From 816d2a3a3095f768622f64b9ca79177a3b402663 Mon Sep 17 00:00:00 2001
From: Claude Code <noreply@anthropic.com>
Date: Mon, 6 Apr 2026 17:20:21 +0200
Subject: [PATCH] refactor: Lagebild nach /lagen/iran-konflikt/ verschoben +
 Vorschau-Seite

- /lagebild/ -> 301 Redirect -> /lagen/iran-konflikt/
- Relative Pfade auf absolute umgestellt (Tiefe 2)
- Sync-Script + Analytics auf neuen Pfad aktualisiert
- /vorschau/ mit Passwort-Gate fuer neue Hauptseite
- CLAUDE.md aktualisiert
- .gitignore: Lagen-Datenverzeichnisse ausgeschlossen

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .gitignore                                    |   1 +
 CLAUDE.md                                     |  23 +-
 analytics-events.js                           |   2 +-
 index.html                                    |   2 +-
 {lagebild => lagen/iran-konflikt}/index.html  |  16 +-
 .../iran-konflikt}/lagebild.css               |   0
 {lagebild => lagen/iran-konflikt}/lagebild.js |   0
 vorschau/index.html                           | 225 ++++++++++++++++++
 8 files changed, 258 insertions(+), 11 deletions(-)
 rename {lagebild => lagen/iran-konflikt}/index.html (94%)
 rename {lagebild => lagen/iran-konflikt}/lagebild.css (100%)
 rename {lagebild => lagen/iran-konflikt}/lagebild.js (100%)
 create mode 100644 vorschau/index.html

diff --git a/.gitignore b/.gitignore
index 924b642..ab1a123 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 # Lagebild-Daten (werden per Cron-Sync vom Monitor regeneriert)
 lagebild/data/
+lagen/*/data/
diff --git a/CLAUDE.md b/CLAUDE.md
index 3084876..6fbc35a 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -69,6 +69,16 @@ STRUCTURE:
 
     docs: Rechtliche PDFs
 
+    lagen:
+      iran-konflikt:
+        - index.html: Lagebild-Seite (Leaflet, Tabs, Timeline)
+        - lagebild.js: Datenladung, Rendering, Interaktionen
+        - lagebild.css: Dark-Theme Styling
+        - data/: current.json + Snapshots (sync alle 5min)
+
+    vorschau:
+      - index.html: Platzhalter mit Passwort-Gate
+
 PAGES:
   homepage:
     sections: [Hero mit Video, Ueber uns, Loesungen, Kontakt]
@@ -77,6 +87,17 @@ PAGES:
     - Datenschutz (DE/EN)
   product:
     - AccountForger Video-Demo
+  lagen:
+    url_struktur: /lagen/{thema}/
+    redirect: /lagebild/ -> 301 -> /lagen/iran-konflikt/
+    aktiv:
+      - iran-konflikt: Live-Lagebild Irankonflikt (ehemals /lagebild/)
+    geplant:
+      - (2 weitere Lagen in Vorbereitung)
+  vorschau:
+    url: /vorschau/
+    zweck: Passwortgeschuetzte Vorschau der neuen Hauptseite
+    auth: JavaScript SHA-256 Passwort-Gate
 
 DEVELOPMENT:
   translations: js/translations.js
@@ -97,7 +118,7 @@ CHANGE_LOG:
     - "Email: info@aegis-sight.de"
     - "Footer: Dynamisches Jahr, AGB entfernt"
 
-Last-Updated: 2026-01-25
+Last-Updated: 2026-04-06
 
 RULES:
   neue_html_seiten:
diff --git a/analytics-events.js b/analytics-events.js
index 57ef190..fb4b10c 100644
--- a/analytics-events.js
+++ b/analytics-events.js
@@ -55,7 +55,7 @@
         });
 
         // 5. Lagebild-Seite: Tab gewechselt
-        if (window.location.pathname.indexOf("lagebild") > -1) {
+        if (window.location.pathname.indexOf("lagen") > -1) {
             document.querySelectorAll(".tab-button, [data-tab]").forEach(function(el) {
                 el.addEventListener("click", function() {
                     var tab = el.getAttribute("data-tab") || el.textContent.trim().substring(0, 30);
diff --git a/index.html b/index.html
index 59905bd..896b640 100644
--- a/index.html
+++ b/index.html
@@ -289,7 +289,7 @@
                     </div>
                     <div class="product-body">
                         <p class="product-description" data-translate="productOsintMonitorDesc">AegisSight Monitor aggregiert, analysiert und verifiziert Informationen aus öffentlich zugänglichen Quellen in Echtzeit. Erleben Sie die Plattform live am Beispiel des Iran-Livetickers.</p>
-                        <a href="/lagebild/" class="product-learn-more" style="text-decoration: none; text-align: center;">
+                        <a href="/lagen/iran-konflikt/" class="product-learn-more" style="text-decoration: none; text-align: center;">
                             <span data-translate="osintMonitorButton">Iran-Liveticker öffnen</span>
                         </a>
                     </div>
diff --git a/lagebild/index.html b/lagen/iran-konflikt/index.html
similarity index 94%
rename from lagebild/index.html
rename to lagen/iran-konflikt/index.html
index 3148ac2..ad3f525 100644
--- a/lagebild/index.html
+++ b/lagen/iran-konflikt/index.html
@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Lagebild Irankonflikt - AegisSight</title>
     <meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
-    <link rel="icon" type="image/svg+xml" href="../favicon.svg">
-    <link rel="stylesheet" href="../css/main.css">
-    <link rel="stylesheet" href="../css/fonts.css">
-    <link rel="stylesheet" href="../css/mobile.css">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/fonts.css">
+    <link rel="stylesheet" href="/css/mobile.css">
     <link rel="stylesheet" href="lagebild.css">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
 </head>
@@ -20,7 +20,7 @@
     <nav class="navbar" role="navigation">
         <div class="nav-container">
             <div class="logo">
-                <a href="/"><img src="../assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img"></a>
+                <a href="/"><img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img"></a>
             </div>
             <ul class="nav-menu">
                 <li><a href="/" data-translate="navHome">Startseite</a></li>
@@ -182,9 +182,9 @@
     </footer>
 
     <!-- Scripts -->
-    <script src="../js/config.js"></script>
-    <script src="../js/translations.js"></script>
-    <script src="../js/mobile-nav.js"></script>
+    <script src="/js/config.js"></script>
+    <script src="/js/translations.js"></script>
+    <script src="/js/mobile-nav.js"></script>
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script src="lagebild.js"></script>
 </body>
diff --git a/lagebild/lagebild.css b/lagen/iran-konflikt/lagebild.css
similarity index 100%
rename from lagebild/lagebild.css
rename to lagen/iran-konflikt/lagebild.css
diff --git a/lagebild/lagebild.js b/lagen/iran-konflikt/lagebild.js
similarity index 100%
rename from lagebild/lagebild.js
rename to lagen/iran-konflikt/lagebild.js
diff --git a/vorschau/index.html b/vorschau/index.html
new file mode 100644
index 0000000..c39fee6
--- /dev/null
+++ b/vorschau/index.html
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AegisSight - Vorschau</title>
+    <meta name="robots" content="noindex, nofollow, noarchive">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <style>
+        @font-face {
+            font-family: 'Inter';
+            src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
+            font-weight: 400;
+        }
+        @font-face {
+            font-family: 'Inter';
+            src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');
+            font-weight: 600;
+        }
+        @font-face {
+            font-family: 'Inter';
+            src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
+            font-weight: 700;
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Inter', system-ui, -apple-system, sans-serif;
+            background: #0A1832;
+            color: #E8E8E8;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        .container {
+            text-align: center;
+            padding: 2rem;
+            max-width: 600px;
+        }
+        .logo {
+            width: 80px;
+            height: 80px;
+            margin: 0 auto 2rem;
+        }
+        .logo img {
+            background: #fff;
+            border-radius: 12px;
+            padding: 6px;
+            width: 100%;
+            height: 100%;
+        }
+        h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            color: #C8A851;
+            margin-bottom: 1rem;
+            letter-spacing: 0.02em;
+        }
+        p {
+            font-size: 1.1rem;
+            line-height: 1.6;
+            color: #A0A8B8;
+            margin-bottom: 0.5rem;
+        }
+        .divider {
+            width: 60px;
+            height: 2px;
+            background: #C8A851;
+            margin: 1.5rem auto;
+            opacity: 0.6;
+        }
+        .badge {
+            display: inline-block;
+            padding: 0.4rem 1.2rem;
+            border: 1px solid rgba(200, 168, 81, 0.3);
+            border-radius: 20px;
+            color: #C8A851;
+            font-size: 0.85rem;
+            font-weight: 600;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+            margin-top: 1.5rem;
+        }
+
+        /* Login Gate */
+        #login-gate {
+            text-align: center;
+            padding: 2rem;
+            max-width: 400px;
+        }
+        #login-gate h1 {
+            font-size: 1.6rem;
+            margin-bottom: 0.5rem;
+        }
+        #login-gate p {
+            font-size: 0.95rem;
+            margin-bottom: 1.5rem;
+        }
+        .pw-form {
+            display: flex;
+            gap: 0.5rem;
+            justify-content: center;
+        }
+        .pw-input {
+            padding: 0.7rem 1rem;
+            border: 1px solid rgba(200, 168, 81, 0.3);
+            border-radius: 6px;
+            background: rgba(255, 255, 255, 0.05);
+            color: #E8E8E8;
+            font-family: inherit;
+            font-size: 0.95rem;
+            width: 220px;
+            outline: none;
+            transition: border-color 0.2s;
+        }
+        .pw-input:focus {
+            border-color: #C8A851;
+        }
+        .pw-input::placeholder {
+            color: #5A6478;
+        }
+        .pw-btn {
+            padding: 0.7rem 1.2rem;
+            border: none;
+            border-radius: 6px;
+            background: #C8A851;
+            color: #0A1832;
+            font-family: inherit;
+            font-size: 0.95rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+        .pw-btn:hover {
+            background: #D4B96A;
+        }
+        .pw-error {
+            color: #E85454;
+            font-size: 0.85rem;
+            margin-top: 0.75rem;
+            display: none;
+        }
+
+        #content { display: none; }
+    </style>
+</head>
+<body>
+    <!-- Login Gate -->
+    <div id="login-gate">
+        <div class="logo">
+            <img src="/assets/images/logos/AegisSightLogo_NavyGold.svg" alt="AegisSight">
+        </div>
+        <h1>Vorschau</h1>
+        <p>Zugang nur mit Passwort</p>
+        <form class="pw-form" onsubmit="return checkPassword(event)">
+            <input type="password" class="pw-input" id="pw-input" placeholder="Passwort" autofocus>
+            <button type="submit" class="pw-btn">Weiter</button>
+        </form>
+        <div class="pw-error" id="pw-error">Falsches Passwort</div>
+    </div>
+
+    <!-- Actual Content (hidden until authenticated) -->
+    <div id="content">
+        <div class="container">
+            <div class="logo">
+                <img src="/assets/images/logos/AegisSightLogo_NavyGold.svg" alt="AegisSight">
+            </div>
+            <h1>Vorschau</h1>
+            <p>Hier entsteht die neue Hauptseite.</p>
+            
+            <div class="divider"></div>
+            <span class="badge">Work in Progress</span>
+        </div>
+    </div>
+
+    <script>
+        const HASH = 'feab257468bdb1b836bae5bc439db625d9a1b9a56ca60e0916ab04fb04c2ec31';
+
+        async function sha256(str) {
+            const buf = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(str));
+            return Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2, '0')).join('');
+        }
+
+        function getCookie(name) {
+            const m = document.cookie.match(new RegExp('(?:^|; )' + name + '=([^;]*)'));
+            return m ? m[1] : null;
+        }
+
+        function setCookie(name, value, days) {
+            const d = new Date();
+            d.setTime(d.getTime() + days * 86400000);
+            document.cookie = name + '=' + value + ';expires=' + d.toUTCString() + ';path=/vorschau/;SameSite=Strict;Secure';
+        }
+
+        function unlock() {
+            document.getElementById('login-gate').style.display = 'none';
+            document.getElementById('content').style.display = 'flex';
+            document.body.style.minHeight = '100vh';
+        }
+
+        async function checkPassword(e) {
+            e.preventDefault();
+            const pw = document.getElementById('pw-input').value;
+            const hash = await sha256(pw);
+            if (hash === HASH) {
+                setCookie('vorschau_auth', hash, 30);
+                unlock();
+            } else {
+                document.getElementById('pw-error').style.display = 'block';
+                document.getElementById('pw-input').value = '';
+                document.getElementById('pw-input').focus();
+            }
+            return false;
+        }
+
+        // Check cookie on load
+        (async () => {
+            if (getCookie('vorschau_auth') === HASH) {
+                unlock();
+            }
+        })();
+    </script>
+</body>
+</html>