Version2

GirlsDayPython/templates/index.html

@@ -0,0 +1,165 @@
+{% extends "layout.html" %}
+
+{% block content %}
+
+<div id="main" style="text-align:center; margin-top:50px; color:#00ffcc; position:relative; z-index:2;">
+    <h1>Girls Day Quiz</h1>
+    <p>Gib den Code ein</p>
+
+    {% if message %}
+    <p style="color: {{ color }}; font-weight:bold;">{{ message }}</p>
+    {% endif %}
+
+    {% if not success %}
+    <form method="POST" id="codeForm">
+        <div id="inputs"></div>
+        <input type="hidden" name="code" id="hiddenCode">
+        <button type="submit">Absenden</button>
+    </form>
+    {% endif %}
+
+    <div id="lock" style="font-size:90px; margin-top:30px; transition: transform 1.8s ease, opacity 1.2s ease;">
+        🔒
+    </div>
+</div>
+
+<div id="flash-overlay"></div>
+
+<style>
+    #inputs input {
+        width: 44px;
+        height: 56px;
+        font-size: 26px;
+        text-align: center;
+        margin: 5px;
+        background: #020617;
+        color: #00ffcc;
+        border: 2px solid #00ffcc;
+        border-radius: 8px;
+        outline: none;
+    }
+
+        #inputs input:focus {
+            box-shadow: 0 0 12px #00ffcc;
+        }
+
+    button {
+        margin-top: 20px;
+        padding: 10px 20px;
+        background-color: #00ffcc;
+        border: none;
+        border-radius: 5px;
+        color: #020617;
+        cursor: pointer;
+        font-weight: bold;
+    }
+
+        button:hover {
+            background-color: #00ccaa;
+        }
+
+    #flash-overlay {
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        width: 0;
+        height: 0;
+        background: white;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 9999;
+        pointer-events: none;
+        opacity: 0;
+    }
+
+    body.animating {
+        overflow: hidden;
+    }
+</style>
+
+<script>
+const codeLength = {{ code_length }};
+const container = document.getElementById("inputs");
+const hiddenInput = document.getElementById("hiddenCode");
+
+// Eingabefelder erzeugen
+if (container) {
+    for (let i = 0; i < codeLength; i++) {
+        let input = document.createElement("input");
+        input.type = "text";
+        input.maxLength = 1;
+        input.autocomplete = "off";
+        input.inputMode = "numeric";
+        input.pattern = "[0-9]*";
+
+        input.addEventListener("input", () => {
+            input.value = input.value.replace(/[^0-9]/g, "");
+            updateHidden();
+
+            if (input.value && input.nextElementSibling) {
+                input.nextElementSibling.focus();
+            }
+        });
+
+        input.addEventListener("keydown", (e) => {
+            if (e.key === "Backspace" && !input.value && input.previousElementSibling) {
+                input.previousElementSibling.focus();
+            }
+        });
+
+        container.appendChild(input);
+    }
+}
+
+// Code zusammensetzen
+function updateHidden() {
+    let code = "";
+    container.querySelectorAll("input").forEach(i => code += i.value);
+    hiddenInput.value = code;
+}
+
+// Animation bei Erfolg
+const success = "{{ success }}";
+
+if (success === "True") {
+    const lock = document.getElementById("lock");
+    const overlay = document.getElementById("flash-overlay");
+    const main = document.getElementById("main");
+
+    document.body.classList.add("animating");
+
+    // 1. Kurz warten
+    setTimeout(() => {
+        // 2. Schloss geht auf
+        lock.textContent = "🔓";
+        lock.style.transform = "scale(1.08)";
+    }, 500);
+
+    // 3. Langsamer Zoom Richtung Schloss
+    setTimeout(() => {
+        main.style.transition = "transform 2.8s ease-in-out, opacity 1.4s ease";
+        main.style.transformOrigin = "center 65%";
+        main.style.transform = "scale(2.4)";
+    }, 1700);
+
+    // 4. Schloss verschwindet, während der Weiß-Effekt beginnt
+    setTimeout(() => {
+        lock.style.opacity = "0";
+    }, 3300);
+
+    // 5. Weißer Kreis wächst von der Mitte bis zum Rand
+    setTimeout(() => {
+        overlay.style.opacity = "1";
+        overlay.style.transition = "width 2.6s ease-out, height 2.6s ease-out, opacity 0.4s ease";
+        overlay.style.width = "250vmax";
+        overlay.style.height = "250vmax";
+    }, 3500);
+
+    // 6. Weiterleitung
+    setTimeout(() => {
+        window.location.href = "/success";
+    }, 6200);
+}
+</script>
+
+{% endblock %}