From 325b2ccccf2dbc4181b9201337e6e304ddb11dae Mon Sep 17 00:00:00 2001
From: kobold-ai <maxi+aijj97uf49@muggleproof.de>
Date: Tue, 20 Oct 2026 17:42:54 +0200
Subject: [PATCH] Add Kochmodus (screen wake lock toggle) and tablet landscape
 cooking station layout

---
 app/static/cookbook.css          | 356 +++++++++++++++++++++++++++++++
 app/templates/recipe_detail.html | 180 +++++++++++++++-
 2 files changed, 529 insertions(+), 7 deletions(-)

diff --git a/app/static/cookbook.css b/app/static/cookbook.css
index e82b01d..5c5cd5e 100755
--- a/app/static/cookbook.css
+++ b/app/static/cookbook.css
@@ -2332,5 +2332,361 @@ body.modal-open {
   font-size: 0.9rem;
 }
 
+/* ==========================================================================
+   Kochmodus (Keep Screen Awake & Interactive Cooking Experience)
+   ========================================================================== */
+.recipe-cookmode-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #FFFFFF;
+  border: 1.5px solid rgba(30, 77, 59, 0.22);
+  border-radius: 10px;
+  padding: 11px 16px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(30, 77, 59, 0.06);
+  transition: all 0.25s ease;
+  user-select: none;
+}
+
+body.cook-mode-on .recipe-cookmode-banner {
+  background: #FFFDF0;
+  border-color: #d4c165;
+  box-shadow: 0 4px 16px rgba(212, 193, 101, 0.28);
+}
+
+.recipe-cookmode-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.cookmode-icon {
+  font-size: 1.7rem;
+  line-height: 1;
+}
+
+.cookmode-text-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cookmode-main-text {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--tannengruen);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cookmode-sub-text {
+  font-size: 0.82rem;
+  color: #666;
+  transition: color 0.2s ease;
+}
+
+body.cook-mode-on .cookmode-sub-text {
+  color: #7a5a00;
+  font-weight: 600;
+}
+
+.recipe-cookmode-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* Custom Schieberegler (Slider Switch) */
+.cb-switch {
+  position: relative;
+  display: inline-block;
+  width: 52px;
+  height: 28px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.cb-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.cb-slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background-color: #d0c9be;
+  transition: .25s ease;
+  border-radius: 28px;
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+}
+
+.cb-slider:before {
+  position: absolute;
+  content: "";
+  height: 22px;
+  width: 22px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: .25s ease;
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
+}
+
+.cb-switch input:checked + .cb-slider {
+  background-color: var(--tannengruen);
+}
+
+.cb-switch input:checked + .cb-slider:before {
+  transform: translateX(24px);
+}
+
+.cb-switch:focus-within .cb-slider {
+  outline: 2px solid var(--tannengruen);
+  outline-offset: 2px;
+}
+
+.cb-switch-sm {
+  width: 44px;
+  height: 24px;
+}
+
+.cb-switch-sm .cb-slider:before {
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+}
+
+.cb-switch-sm input:checked + .cb-slider:before {
+  transform: translateX(20px);
+}
+
+.cookmode-badge {
+  font-size: 0.8rem;
+  font-weight: 700;
+  padding: 3px 9px;
+  border-radius: 12px;
+  background: rgba(34, 34, 34, 0.08);
+  color: #666;
+  transition: all 0.25s ease;
+  white-space: nowrap;
+}
+
+body.cook-mode-on .cookmode-badge {
+  background: var(--tannengruen);
+  color: #FFFFFF;
+  box-shadow: 0 0 10px rgba(30, 77, 59, 0.35);
+}
+
+/* Compact switch for desktop nav */
+.cb-nav-cookmode-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.15);
+  padding: 4px 10px;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: var(--creme);
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+/* Interactive ingredient checkoffs */
+.ingredients-list li.ingredient-item {
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+  padding: 4px 8px;
+  border-radius: 6px;
+  position: relative;
+}
+
+.ingredients-list li.ingredient-item:hover {
+  background: rgba(30, 77, 59, 0.06);
+}
+
+.ingredients-list li.ingredient-item.is-checked {
+  text-decoration: line-through;
+  opacity: 0.45;
+  color: #777;
+  background: rgba(34, 34, 34, 0.04);
+}
+
+/* Interactive step completion in cook mode */
+.step-card {
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+  user-select: none;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.step-card:hover {
+  border-color: var(--tannengruen);
+}
+
+.step-card.is-done {
+  background: rgba(30, 77, 59, 0.05);
+  border-color: rgba(30, 77, 59, 0.35);
+  opacity: 0.72;
+}
+
+.step-card.is-done .step-badge {
+  background: var(--tannengruen);
+  color: #FFFFFF;
+}
+
+.step-card.is-done .step-text {
+  text-decoration: line-through;
+}
+
+.step-card .step-done-check {
+  display: none;
+  margin-left: auto;
+  font-size: 1.25rem;
+  font-weight: 800;
+  color: var(--tannengruen);
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.step-card.is-done .step-done-check {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ==========================================================================
+   Tablet Querformat (Landscape) & Kochstation Layout
+   Optimiert für iPads / Android-Tablets im Querformat (ab 768px landscape)
+   ========================================================================== */
+@media screen and (min-width: 768px) and (orientation: landscape) {
+  /* Volle Bildschirmbreite für entspanntes Kochen aus Distanz */
+  .book-wrapper {
+    max-width: 1400px;
+    width: 100%;
+    margin: 14px auto;
+    padding: 0 20px;
+  }
+
+  .recipe-page {
+    padding: 24px 32px;
+    border-radius: 14px;
+    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12);
+  }
+
+  /* 2-Spalten-Kochstation: Zutaten links, Schritte rechts */
+  .recipe-grid {
+    display: grid;
+    grid-template-columns: 380px 1fr;
+    gap: 32px;
+    align-items: start;
+  }
+
+  /* Linke Spalte (Zutaten) bleibt beim Scrollen dauerhaft am Bildschirm fixiert! */
+  .recipe-side {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 76px;
+    max-height: calc(100vh - 96px);
+    overflow-y: auto;
+    padding-right: 8px;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(30, 77, 59, 0.25) transparent;
+  }
+
+  .recipe-side::-webkit-scrollbar {
+    width: 6px;
+  }
+  .recipe-side::-webkit-scrollbar-thumb {
+    background: rgba(30, 77, 59, 0.25);
+    border-radius: 6px;
+  }
+
+  /* Kompaktes Foto im Querformat, damit die Zutatenliste sofort im Blick ist */
+  .recipe-photo-box {
+    aspect-ratio: 16 / 9;
+    max-height: 180px;
+  }
+
+  .ingredients-box {
+    padding: 18px 20px;
+    background: rgba(255, 255, 255, 0.9);
+  }
+
+  .ingredients-list li {
+    font-size: 1.05rem;
+    line-height: 1.45;
+  }
+
+  /* Große, aus 1-1.5 Meter Distanz lesbare Schrift auf der Küchenzeile */
+  .recipe-title {
+    font-size: 2.3rem;
+  }
+
+  .recipe-subtitle {
+    font-size: 1.6rem;
+  }
+
+  .step-card {
+    padding: 18px 22px;
+    font-size: 1.15rem;
+    line-height: 1.6;
+    border-radius: 10px;
+    margin-bottom: 12px;
+  }
+
+  .step-badge {
+    width: 36px;
+    height: 36px;
+    font-size: 1.15rem;
+  }
+
+  .step-text {
+    font-size: 1.14rem;
+    line-height: 1.65;
+  }
+
+  .notes-box {
+    padding: 16px 20px;
+    font-size: 1.05rem;
+    line-height: 1.55;
+  }
+}
+
+/* Sehr große Tablet-Displays (iPad Pro 12.9", Galaxy Tab Ultra, ab 1200px Querformat) */
+@media screen and (min-width: 1200px) and (orientation: landscape) {
+  .recipe-grid {
+    grid-template-columns: 430px 1fr;
+    gap: 40px;
+  }
+
+  .step-card {
+    padding: 22px 26px;
+  }
+
+  .step-text {
+    font-size: 1.2rem;
+  }
+}
+
+/* Druck-Schutz */
+@media print {
+  .recipe-cookmode-banner,
+  .cb-nav-cookmode-toggle,
+  .step-done-check,
+  .no-print {
+    display: none !important;
+  }
+}
+
 
 
diff --git a/app/templates/recipe_detail.html b/app/templates/recipe_detail.html
index 4ca22fc..3bc1e84 100755
--- a/app/templates/recipe_detail.html
+++ b/app/templates/recipe_detail.html
@@ -2,9 +2,9 @@
 <html lang="de">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
   <title>{{ recipe.title }} – Mein Kochbuch</title>
-  <link rel="stylesheet" href="/static/cookbook.css?v=4.6.8">
+  <link rel="stylesheet" href="/static/cookbook.css?v=4.6.9">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍽️</text></svg>">
 </head>
 <body class="cookbook-body">
@@ -18,6 +18,13 @@
 
     <!-- Desktop Navigation -->
     <div class="cb-nav-actions desktop-nav-actions">
+      <div class="cb-nav-cookmode-toggle no-print" title="Kochmodus: Verhindert automatisches Sperren des Bildschirms">
+        <span>👨‍🍳 Kochmodus</span>
+        <label class="cb-switch cb-switch-sm" for="cook-mode-toggle-nav">
+          <input type="checkbox" id="cook-mode-toggle-nav" class="cook-mode-switch-input" onchange="toggleCookingMode(this.checked)">
+          <span class="cb-slider"></span>
+        </label>
+      </div>
       <a href="/cookbook" class="cb-btn cb-btn-outline">
         <span>📖</span> <span>Alle Rezepte</span>
       </a>
@@ -38,6 +45,14 @@
         <span>⋮</span>
       </button>
       <div id="cb-mobile-menu" class="cb-mobile-dropdown">
+        <div class="cb-mobile-item" style="display: flex; justify-content: space-between; align-items: center;" onclick="event.stopPropagation();">
+          <span>👨‍🍳 Kochmodus (Display an)</span>
+          <label class="cb-switch cb-switch-sm" for="cook-mode-toggle-mobile">
+            <input type="checkbox" id="cook-mode-toggle-mobile" class="cook-mode-switch-input" onchange="toggleCookingMode(this.checked)">
+            <span class="cb-slider"></span>
+          </label>
+        </div>
+        <hr class="cb-mobile-divider">
         <a href="/cookbook" class="cb-mobile-item">
           <span>📖</span> <span>Zum Kochbuch</span>
         </a>
@@ -59,6 +74,24 @@
 
     <!-- EINHEITLICHE REZEPTSEITE -->
     <article class="page recipe-page">
+
+      <!-- KOCHMODUS SCHIEBEREGLER BANNER (Mobil, Tablet & Desktop) -->
+      <div class="recipe-cookmode-banner no-print">
+        <div class="recipe-cookmode-left">
+          <span class="cookmode-icon">👨‍🍳</span>
+          <div class="cookmode-text-group">
+            <span class="cookmode-main-text">Kochmodus</span>
+            <span class="cookmode-sub-text" id="cookmode-sub-text">Verhindert, dass das Display während des Kochens sperrt</span>
+          </div>
+        </div>
+        <div class="recipe-cookmode-right">
+          <label class="cb-switch" for="cook-mode-toggle" title="Kochmodus umschalten">
+            <input type="checkbox" id="cook-mode-toggle" class="cook-mode-switch-input" onchange="toggleCookingMode(this.checked)">
+            <span class="cb-slider"></span>
+          </label>
+          <span id="cook-mode-badge" class="cookmode-badge">Aus</span>
+        </div>
+      </div>
       
       <!-- Header (Ohne Kapitelangabe & ohne Quelle im Titel) -->
       <header class="recipe-header">
@@ -107,7 +140,7 @@
         </div>
       </header>
 
-      <!-- 2-Spalten Layout -->
+      <!-- 2-Spalten Layout (Auf Tablets im Querformat als 2-Spalten Kochstation) -->
       <div class="recipe-grid">
         
         <!-- Linke Spalte: Foto + Zutaten -->
@@ -158,7 +191,7 @@
                 </tbody>
               </table>
             {% else %}
-              <!-- Normale kompakte Zutatenliste (kein Abschneiden im Druck) -->
+              <!-- Normale kompakte Zutatenliste (Tippen zum Abhaken beim Kochen) -->
               <ul class="ingredients-list">
                 {% for line in recipe.ingredients.split('\n') %}
                   {% if line.strip() %}
@@ -166,7 +199,7 @@
                     {% if raw_line.endswith(':') or raw_line.lower().startswith('für ') %}
                       <li class="ing-subheading">{{ raw_line }}</li>
                     {% else %}
-                      <li>{{ raw_line }}</li>
+                      <li class="ingredient-item" onclick="toggleIngredientCheck(this)" title="Tippen zum Abhaken">{{ raw_line }}</li>
                     {% endif %}
                   {% endif %}
                 {% endfor %}
@@ -182,9 +215,10 @@
             <div class="instructions-steps">
               {% for step in recipe.instructions.split('\n') %}
                 {% if step.strip() %}
-                  <div class="step-card">
+                  <div class="step-card" onclick="toggleStepCheck(this)" title="Tippen zum Abhaken dieses Schritts">
                     <span class="step-badge">{{ loop.index }}</span>
                     <div class="step-text">{{ step.strip() | strip_step_number }}</div>
+                    <span class="step-done-check">✓</span>
                   </div>
                 {% endif %}
               {% endfor %}
@@ -204,7 +238,6 @@
                 <div class="notes-blank-line"></div>
               </div>
             </div>
-            </div>
           {% endif %}
 
         </section>
@@ -216,6 +249,9 @@
   </main>
 
   <script>
+    // ==========================================
+    // MOBILE NAVIGATION (3-PUNKTE-MENÜ)
+    // ==========================================
     function toggleMobileMenu(e) {
       if (e) e.stopPropagation();
       const menu = document.getElementById('cb-mobile-menu');
@@ -228,6 +264,136 @@
         if (menu) menu.classList.remove('is-open');
       }
     });
+
+    // ==========================================
+    // KOCHMODUS: SCREEN WAKE LOCK & DISPLAY WACHHALTEN
+    // ==========================================
+    let wakeLockSentinel = null;
+    let isCookModeActive = false;
+
+    async function requestWakeLock() {
+      if ('wakeLock' in navigator) {
+        try {
+          wakeLockSentinel = await navigator.wakeLock.request('screen');
+          wakeLockSentinel.addEventListener('release', () => {
+            if (!isCookModeActive) {
+              setCookModeUI(false, true);
+            }
+          });
+          return true;
+        } catch (err) {
+          console.warn('Wake Lock Anfrage nicht erfolgreich:', err);
+          return false;
+        }
+      }
+      return false;
+    }
+
+    async function releaseWakeLock() {
+      if (wakeLockSentinel !== null) {
+        try {
+          await wakeLockSentinel.release();
+        } catch (e) {}
+        wakeLockSentinel = null;
+      }
+    }
+
+    async function toggleCookingMode(active) {
+      isCookModeActive = active;
+      try {
+        localStorage.setItem('wtc_cookmode_active', active ? 'true' : 'false');
+      } catch (e) {}
+
+      // Synchronisiere alle Schalter (Desktop-Nav, Banner, Mobil-Menü)
+      const switches = document.querySelectorAll('.cook-mode-switch-input');
+      switches.forEach(sw => { sw.checked = active; });
+
+      if (active) {
+        const supported = await requestWakeLock();
+        setCookModeUI(true, supported);
+        showToast(supported ? '✓ Kochmodus an: Display bleibt an 💡' : '✓ Kochmodus aktiv');
+      } else {
+        await releaseWakeLock();
+        setCookModeUI(false, true);
+        showToast('Kochmodus ausgeschaltet');
+      }
+    }
+
+    function setCookModeUI(active, supported = true) {
+      if (active) {
+        document.body.classList.add('cook-mode-on');
+      } else {
+        document.body.classList.remove('cook-mode-on');
+      }
+
+      const badge = document.getElementById('cook-mode-badge');
+      const subText = document.getElementById('cookmode-sub-text');
+
+      if (badge) {
+        if (active) {
+          badge.textContent = supported ? 'Aktiv 💡' : 'Aktiv';
+        } else {
+          badge.textContent = 'Aus';
+        }
+      }
+
+      if (subText) {
+        if (active) {
+          subText.textContent = supported 
+            ? 'Display bleibt während des Kochens dauerhaft eingeschaltet 💡'
+            : 'Display-Wachhalten nicht vom Browser unterstützt (Interaktive Schritte aktiv)';
+        } else {
+          subText.textContent = 'Verhindert, dass das Display während des Kochens sperrt';
+        }
+      }
+    }
+
+    // Wenn der Nutzer die App/den Tab wechselt und zurückkommt: Wake Lock erneuern!
+    document.addEventListener('visibilitychange', async () => {
+      if (isCookModeActive && document.visibilityState === 'visible') {
+        await requestWakeLock();
+      }
+    });
+
+    // Gespeicherten Zustand beim Laden wiederherstellen
+    window.addEventListener('DOMContentLoaded', () => {
+      try {
+        const saved = localStorage.getItem('wtc_cookmode_active') === 'true';
+        if (saved) {
+          const sw = document.getElementById('cook-mode-toggle');
+          if (sw) {
+            sw.checked = true;
+            toggleCookingMode(true);
+          }
+        }
+      } catch (e) {}
+    });
+
+    // Interaktive Zutaten-Checkliste (zum Abhaken beim Vorbereiten)
+    function toggleIngredientCheck(el) {
+      el.classList.toggle('is-checked');
+    }
+
+    // Interaktiver Schritt-Tracker (zum Markieren erledigter Schritte)
+    function toggleStepCheck(el) {
+      el.classList.toggle('is-done');
+    }
+
+    // Toast Benachrichtigung
+    function showToast(msg) {
+      let toast = document.getElementById('cook-toast');
+      if (!toast) {
+        toast = document.createElement('div');
+        toast.id = 'cook-toast';
+        toast.className = 'cb-toast';
+        document.body.appendChild(toast);
+      }
+      toast.textContent = msg;
+      toast.style.display = 'flex';
+      setTimeout(() => {
+        toast.style.display = 'none';
+      }, 2500);
+    }
   </script>
 </body>
 </html>