Meik/PostTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

reworked site

Browse Source
This commit is contained in:
Meik
2025-11-16 13:02:05 +01:00
parent 339f03e38e
commit f9d8fc5b82
8 changed files with 628 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
web/bookmarks.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post Tracker – Bookmarks</title>
<link rel="icon" type="image/png" sizes="32x32" href="assets/app-icon-64.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/app-icon-192.png">
<link rel="apple-touch-icon" href="assets/app-icon-192.png">
<link rel="stylesheet" href="style.css">
</head>
<body class="bookmarks-page">
<div class="container">
<main class="bookmark-page">
<section class="bookmark-page__panel">
<div class="bookmark-panel__header">
<h2 class="bookmark-panel__title">🔖 Bookmarks</h2>
<a href="index.html" class="btn btn-secondary">Zurück zum Dashboard</a>
</div>
<p class="bookmark-page__lead">Über die Bookmarks kannst du auf einen Schlag mehrere relevante Suchanfragen öffnen.</p>
<div class="bookmark-panel__toolbar">
<label class="bookmark-panel__search">
<span>Suche</span>
<input type="search" id="bookmarkSearchInput" placeholder="Keyword oder Titel durchsuchen">
</label>
<div class="bookmark-panel__sort">
<label>
<span>Sortierung</span>
<select id="bookmarkSortSelect">
<option value="recent">Zuletzt verwendet</option>
<option value="label">Alphabetisch</option>
</select>
</label>
<button type="button" class="bookmark-sort__direction" id="bookmarkSortDirectionToggle" aria-pressed="false" title="Sortierreihenfolge umkehren">
<span class="bookmark-sort__direction-icon" aria-hidden="true">▼</span>
</button>
</div>
</div>
<div id="bookmarksList" class="bookmark-list" role="list" aria-live="polite"></div>
<form id="bookmarkForm" class="bookmark-form" autocomplete="off">
<div class="bookmark-form__fields">
<label class="bookmark-form__field">
<span>Titel</span>
<input type="text" id="bookmarkName" maxlength="40" placeholder="Optionaler Titel">
</label>
<label class="bookmark-form__field">
<span>Keyword *</span>
<input type="text" id="bookmarkQuery" required placeholder="z.B. gewinnspiel">
</label>
</div>
<div class="bookmark-form__actions">
<button type="submit" class="btn btn-primary">Speichern</button>
<button type="button" class="btn btn-secondary" id="bookmarkCancelBtn">Zurücksetzen</button>
</div>
<p class="bookmark-form__hint">Öffnet drei Varianten (… Gewinnspiel / … gewinnen / … verlosen) mit Filter auf die letzten vier Wochen.</p>
</form>
</section>
</main>
</div>
<script src="app.js"></script>
</body>
</html>