girlsday/GirlsDayPython/templates/index.html

{% 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 %}