Frank Schwenk
5b8042b173
Replace the visible create button with a secret tap gesture that still opens the PIN-protected recap flow. Co-authored-by: Cursor <cursoragent@cursor.com>
85 lines
3.4 KiB
HTML
85 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<meta name="theme-color" content="#0B3D5C">
|
|
<meta name="description" content="Goldfish Recap — YouTube-Zusammenfassungen für Second-Screen-Survivors">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
|
<link rel="apple-touch-icon" href="/icon-192.png">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/styles.css">
|
|
<title>Goldfish Recap</title>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header class="hero">
|
|
<div class="heroInner">
|
|
<div class="logoRow">
|
|
<img src="/icon.svg" alt="" class="logo" id="goldfishLogo" width="56" height="56" title="Goldfish Recap">
|
|
<div>
|
|
<h1>Goldfish Recap</h1>
|
|
<p class="tagline">Second Screen? Kein Problem. Dein Gehirn hat abgespeichert: nein. Wir: ja.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main">
|
|
<section id="recapListSection">
|
|
<h2 class="sectionTitle">Zuletzt gerettet</h2>
|
|
<div id="recapList" class="recapGrid"></div>
|
|
<p id="emptyState" class="emptyState" hidden>
|
|
Noch keine Recaps. Paste eine YouTube-URL — der Goldfisch erinnert sich für dich.
|
|
</p>
|
|
<p id="listError" class="errorText" hidden></p>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<span>🐟 3-Sekunden-Gedächtnis? Nicht mehr.</span>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Create modal -->
|
|
<dialog id="createModal" class="modal">
|
|
<form method="dialog" id="createForm" class="modalBody">
|
|
<h2>Neues Recap</h2>
|
|
<p class="modalHint">YouTube-URL rein, Goldfisch macht den Rest.</p>
|
|
<input type="url" id="urlInput" class="textInput" placeholder="https://youtube.com/watch?v=…" required>
|
|
<label class="checkboxRow">
|
|
<input type="checkbox" id="forceCheckbox">
|
|
<span>Neu generieren, falls schon vorhanden</span>
|
|
</label>
|
|
<p id="createError" class="errorText" hidden></p>
|
|
<div class="modalActions">
|
|
<button type="button" class="btn btn-ghost" id="createCancel">Abbrechen</button>
|
|
<button type="submit" class="btn btn-primary" id="createSubmit">Recap starten</button>
|
|
</div>
|
|
<div id="createProgress" class="progressBox" hidden>
|
|
<div class="spinner"></div>
|
|
<p>Untertitel fischen… KI denkt nach… Goldfisch schwimmt im Kreis…</p>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<!-- PIN modal -->
|
|
<dialog id="pinModal" class="modal">
|
|
<form method="dialog" id="pinForm" class="modalBody">
|
|
<h2>PIN bitte</h2>
|
|
<p class="modalHint">Recaps erstellen ist nur für eingeweihte Goldfische.</p>
|
|
<input type="password" id="pinInput" class="textInput pinInput" inputmode="numeric" autocomplete="off" placeholder="PIN" required>
|
|
<p id="pinError" class="errorText" hidden></p>
|
|
<div class="modalActions">
|
|
<button type="button" class="btn btn-ghost" id="pinCancel">Abbrechen</button>
|
|
<button type="submit" class="btn btn-primary">Anmelden</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<script type="module" src="/app.js"></script>
|
|
</body>
|
|
</html>
|