From 5b8042b1739274eac58af948599b4175c4bafb3f Mon Sep 17 00:00:00 2001
From: Frank Schwenk <frank@frank-schwenk.de>
Date: Tue, 16 Jun 2026 16:05:13 +0200
Subject: [PATCH] feat: hide recap creation behind five goldfish logo taps

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>
---
 public/app.js     | 42 +++++++++++++++++++++++++++++++++++-------
 public/index.html |  3 +--
 public/styles.css | 18 ++++++++++++++++++
 3 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/public/app.js b/public/app.js
index 6e4e951..300e693 100644
--- a/public/app.js
+++ b/public/app.js
@@ -130,15 +130,43 @@ function wirePinForm() {
   });
 }
 
-function wireCreate() {
-  document.getElementById("newRecapBtn").addEventListener("click", async () => {
-    try {
-      await waitForPinLogin();
-      openCreateModal();
-    } catch {
-      /* cancelled */
+const GOLDFISH_TAPS = 5;
+const GOLDFISH_RESET_MS = 2000;
+
+async function openCreateFlow() {
+  try {
+    await waitForPinLogin();
+    openCreateModal();
+  } catch {
+    /* cancelled */
+  }
+}
+
+function wireGoldfishSecret() {
+  const logo = document.getElementById("goldfishLogo");
+  let taps = 0;
+  let resetTimer = null;
+
+  logo.addEventListener("click", () => {
+    taps += 1;
+    logo.classList.add("logoWiggle");
+    window.setTimeout(() => logo.classList.remove("logoWiggle"), 300);
+
+    if (resetTimer) window.clearTimeout(resetTimer);
+    resetTimer = window.setTimeout(() => {
+      taps = 0;
+    }, GOLDFISH_RESET_MS);
+
+    if (taps >= GOLDFISH_TAPS) {
+      taps = 0;
+      if (resetTimer) window.clearTimeout(resetTimer);
+      openCreateFlow();
     }
   });
+}
+
+function wireCreate() {
+  wireGoldfishSecret();
   document.getElementById("createCancel").addEventListener("click", () => createModal.close());
   document.getElementById("createForm").addEventListener("submit", async (e) => {
     e.preventDefault();
diff --git a/public/index.html b/public/index.html
index 0580912..63e9550 100644
--- a/public/index.html
+++ b/public/index.html
@@ -18,13 +18,12 @@
     <header class="hero">
       <div class="heroInner">
         <div class="logoRow">
-          <img src="/icon.svg" alt="" class="logo" width="56" height="56">
+          <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>
-        <button type="button" class="btn btn-primary" id="newRecapBtn">+ Neues Recap</button>
       </div>
     </header>
 
diff --git a/public/styles.css b/public/styles.css
index 0b84533..efe9bad 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -58,6 +58,24 @@ a {
 
 .logo {
   filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: transform 0.15s;
+}
+
+.logo:active {
+  transform: scale(0.92);
+}
+
+.logoWiggle {
+  animation: goldfishWiggle 0.3s ease;
+}
+
+@keyframes goldfishWiggle {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-8deg) scale(1.05); }
+  75% { transform: rotate(8deg) scale(1.05); }
 }
 
 .hero h1 {