63 lines
2.9 KiB
HTML
63 lines
2.9 KiB
HTML
<!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>
|