fixed SPA
This commit is contained in:
@@ -2,208 +2,20 @@
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Daily Bookmarks</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/app-icon-64.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="daily-bookmarks.css">
|
||||
<script>
|
||||
(function redirectToShell() {
|
||||
const url = new URL(window.location.href);
|
||||
const params = new URLSearchParams(url.search);
|
||||
params.set('view', 'daily-bookmarks');
|
||||
const target = `index.html${params.toString() ? `?${params}` : ''}${url.hash}`;
|
||||
window.location.replace(target);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="daily-shell">
|
||||
<header class="hero">
|
||||
<a class="back-link" href="index.html">← Zurück zur App</a>
|
||||
<h1 class="hero__title">Daily Bookmarks</h1>
|
||||
<div class="hero__controls">
|
||||
<div class="day-switch">
|
||||
<button class="ghost-btn" id="prevDayBtn" aria-label="Vorheriger Tag">◀</button>
|
||||
<div class="day-switch__label">
|
||||
<div id="dayLabel" class="day-switch__day">Heute</div>
|
||||
<div id="daySubLabel" class="day-switch__sub"></div>
|
||||
</div>
|
||||
<button class="ghost-btn" id="nextDayBtn" aria-label="Nächster Tag">▶</button>
|
||||
<button class="ghost-btn ghost-btn--today" id="todayBtn">Heute</button>
|
||||
</div>
|
||||
<div class="hero__actions">
|
||||
<div class="bulk-actions">
|
||||
<label for="bulkCountSelect">Anzahl</label>
|
||||
<select id="bulkCountSelect">
|
||||
<option value="1">1</option>
|
||||
<option value="5">5</option>
|
||||
<option value="10">10</option>
|
||||
<option value="15">15</option>
|
||||
<option value="20">20</option>
|
||||
</select>
|
||||
<label class="auto-open-toggle">
|
||||
<input type="checkbox" id="autoOpenToggle">
|
||||
<span>Auto öffnen</span>
|
||||
</label>
|
||||
<button class="secondary-btn" id="bulkOpenBtn" type="button">Öffnen & abhaken</button>
|
||||
</div>
|
||||
<button class="primary-btn" id="openCreateBtn" type="button">+ Bookmark</button>
|
||||
<button class="secondary-btn" id="openImportBtn" type="button">Liste importieren</button>
|
||||
<button class="ghost-btn" id="refreshBtn" type="button">Aktualisieren</button>
|
||||
<span id="heroStats" class="hero__stats"></span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="autoOpenOverlay" class="auto-open-overlay" hidden>
|
||||
<div class="auto-open-overlay__panel" id="autoOpenOverlayPanel">
|
||||
<div class="auto-open-overlay__badge">Auto-Öffnen startet gleich</div>
|
||||
<div class="auto-open-overlay__timer">
|
||||
<span id="autoOpenCountdown" class="auto-open-overlay__count">0.0</span>
|
||||
<span class="auto-open-overlay__unit">Sek.</span>
|
||||
</div>
|
||||
<p class="auto-open-overlay__text">
|
||||
Die nächste Runde deiner gefilterten Bookmarks öffnet automatisch. Abbrechen, falls du noch warten willst.
|
||||
</p>
|
||||
<p class="auto-open-overlay__hint">Klicke irgendwo in dieses Panel, um abzubrechen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="panel list-panel">
|
||||
<header class="panel__header panel__header--row">
|
||||
<div>
|
||||
<p class="panel__eyebrow">Tägliche Liste</p>
|
||||
<h2 class="panel__title">Alle Bookmarks</h2>
|
||||
</div>
|
||||
<div class="list-summary" id="listSummary"></div>
|
||||
</header>
|
||||
<div id="listStatus" class="list-status" role="status" aria-live="polite"></div>
|
||||
<div class="table-wrapper">
|
||||
<table class="bookmark-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-url">
|
||||
<button type="button" class="sort-btn" data-sort-key="url_template">URL (aufgelöst)</button>
|
||||
</th>
|
||||
<th class="col-marker">
|
||||
<button type="button" class="sort-btn" data-sort-key="marker">Marker</button>
|
||||
</th>
|
||||
<th class="col-created">
|
||||
<button type="button" class="sort-btn" data-sort-key="created_at">Erstelldatum</button>
|
||||
</th>
|
||||
<th class="col-last">
|
||||
<button type="button" class="sort-btn" data-sort-key="last_completed_at">Letzte Erledigung</button>
|
||||
</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
<tr class="table-filter-row">
|
||||
<th>
|
||||
<label class="visually-hidden" for="urlFilter">Nach URL filtern</label>
|
||||
<input id="urlFilter" type="search" placeholder="URL filtern">
|
||||
</th>
|
||||
<th>
|
||||
<label class="visually-hidden" for="markerFilter">Nach Marker filtern</label>
|
||||
<select id="markerFilter">
|
||||
<option value="">Alle Marker</option>
|
||||
<option value="__none">Ohne Marker</option>
|
||||
</select>
|
||||
</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th class="filter-hint">
|
||||
<button type="button" class="ghost-btn ghost-btn--tiny" id="resetViewBtn" aria-label="Filter und Sortierung zurücksetzen">↺</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="bookmarkModal" class="modal" hidden>
|
||||
<div class="modal__backdrop"></div>
|
||||
<div class="modal__content" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
|
||||
<header class="modal__header">
|
||||
<div>
|
||||
<p class="panel__eyebrow" id="formModeLabel">Neues Bookmark</p>
|
||||
<h2 id="modalTitle" class="panel__title">Bookmark pflegen</h2>
|
||||
<p class="panel__subtitle">Titel optional, URL-Template erforderlich. Platzhalter werden für den gewählten Tag aufgelöst.</p>
|
||||
</div>
|
||||
<button class="ghost-btn modal__close" type="button" id="modalCloseBtn" aria-label="Schließen">×</button>
|
||||
</header>
|
||||
<form id="bookmarkForm" class="bookmark-form" autocomplete="off">
|
||||
<label class="field">
|
||||
<span>Titel (optional)</span>
|
||||
<input id="titleInput" type="text" name="title" maxlength="160" placeholder="z.B. Daily Gewinnspielrunde">
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>URL-Template *</span>
|
||||
<input id="urlInput" type="url" name="url_template" maxlength="800" placeholder="https://www.test.de/tag-{{day}}/" required>
|
||||
</label>
|
||||
<div id="urlSuggestionBox" class="suggestion-box" hidden></div>
|
||||
<label class="field">
|
||||
<span>Notiz (optional)</span>
|
||||
<textarea id="notesInput" name="notes" maxlength="800" rows="3" placeholder="Kurze Hinweise oder To-do für diesen Link"></textarea>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Marker (optional)</span>
|
||||
<input id="markerInput" type="text" name="marker" maxlength="120" placeholder="z.B. März-Import oder Kampagne A">
|
||||
</label>
|
||||
<div class="form-preview">
|
||||
<div>
|
||||
<p class="form-preview__label">Aufgelöste URL für den gewählten Tag:</p>
|
||||
<a id="previewLink" class="form-preview__link" href="#" target="_blank" rel="noopener">–</a>
|
||||
</div>
|
||||
<div class="form-preview__actions">
|
||||
<button class="secondary-btn" type="button" id="resetBtn">Zurücksetzen</button>
|
||||
<button class="primary-btn" type="submit" id="submitBtn">Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="placeholder-help">
|
||||
<p class="placeholder-help__title">Dynamische Platzhalter</p>
|
||||
<ul class="placeholder-help__list">
|
||||
<li><code>{{day}}</code> Tag des Monats (1–31), <code>{{dd}}</code> zweistellig</li>
|
||||
<li><code>{{date}}</code> liefert <code>YYYY-MM-DD</code></li>
|
||||
<li><code>{{mm}}</code> Monat zweistellig, <code>{{yyyy}}</code> Jahr</li>
|
||||
<li><code>{{day+1}}</code> oder <code>{{date-2}}</code> verschieben um Tage</li>
|
||||
<li><code>{{counter:477}}</code> Basiswert + aktueller Tag, z.B. <code>https://www.test.de/sweepstakes/{{counter:477}}/</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="formStatus" class="form-status" role="status" aria-live="polite"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="importModal" class="modal" hidden>
|
||||
<div class="modal__backdrop"></div>
|
||||
<div class="modal__content" role="dialog" aria-modal="true" aria-labelledby="importModalTitle">
|
||||
<header class="modal__header">
|
||||
<div>
|
||||
<p class="panel__eyebrow">Masseneingabe</p>
|
||||
<h2 id="importModalTitle" class="panel__title">Viele Bookmarks importieren</h2>
|
||||
<p class="panel__subtitle">Füge hunderte Links gleichzeitig hinzu und vergebe einen gemeinsamen Marker.</p>
|
||||
</div>
|
||||
<button class="ghost-btn modal__close" type="button" id="importCloseBtn" aria-label="Schließen">×</button>
|
||||
</header>
|
||||
<form id="importForm" class="bookmark-form" autocomplete="off">
|
||||
<label class="field">
|
||||
<span>Liste der URL-Templates *</span>
|
||||
<textarea id="importInput" name="import_urls" maxlength="120000" rows="8" placeholder="Jeder Link in eine neue Zeile, z.B. https://example.com/{{date}}/"></textarea>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Marker für alle Einträge (optional)</span>
|
||||
<input id="importMarkerInput" type="text" name="import_marker" maxlength="120" placeholder="z.B. Batch März 2024">
|
||||
</label>
|
||||
<p class="import-hint">Doppelte oder ungültige Zeilen werden automatisch übersprungen.</p>
|
||||
<div class="form-preview">
|
||||
<div>
|
||||
<p class="form-preview__label">Filter und Sortierung gelten auch beim Batch-Öffnen.</p>
|
||||
</div>
|
||||
<div class="form-preview__actions">
|
||||
<button class="secondary-btn" type="button" id="importResetBtn">Zurücksetzen</button>
|
||||
<button class="primary-btn" type="submit" id="importSubmitBtn">Import starten</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="importStatus" class="form-status" role="status" aria-live="polite"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="daily-bookmarks.js"></script>
|
||||
<p>Weiterleitung zu Daily Bookmarks…</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user