lorem_ipsum/pages/play.html

<!-- Spielseite: Die vier Phasen werden per play.js ein- und ausgeblendet. -->
<div class="game-container">
    
    <!-- Status-Badge zeigt die aktuelle Spielphase: Bereit, Lernphase, Eingabe, Abgeschlossen. -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold mb-0">Lorem Ipsum - Challenge you brain</h2>
            <p class="text-muted mb-0">Merken Sie sich den Text so gut wie möglich.</p>
        </div>
        <div id="gameStatus" class="badge bg-secondary fs-6 px-3 py-2">
            Bereit
        </div>
    </div>

    <!-- Phase 1: Startbildschirm vor der Textanzeige. -->
    <div id="phaseStart" class="card">
        <div class="card-body text-center py-5">
            <h3 class="mb-3">Sind Sie bereit?</h3>
            <p class="mb-4" style="max-width: 600px; margin: 0 auto; font-size: 1.1rem;">
                Sie sehen gleich einen Text für <strong style="color: #4a6fa5;">15 Sekunden</strong>.<br>
                Versuchen Sie, sich so viele Wörter wie möglich zu merken!
            </p>
            <button id="btnStartGame" class="btn btn-lg px-5">
                Spiel Starten
            </button>
        </div>
    </div>

    <!-- Phase 2: Merken. Der zufaellige Rundentext wird in #targetTextDisplay eingesetzt. -->
    <div id="phaseMemorize" class="d-none">
        <div class="card border-warning" style="border-left: 5px solid #ffd166; background-color: #fffbf0;">
            <div class="card-body text-center py-4">
                <h4 class="text-warning-emphasis mb-3" style="color: #b58900;">Lernphase läuft...</h4>
                <p id="targetTextDisplay" class="lead fw-bold mb-4 fst-italic" style="color: #1b1b2f; font-size: 1.4rem; line-height: 1.6;">
                    <!-- Text wird per JS eingefügt -->
                </p>
                <div class="mt-3">
                    <span class="badge bg-danger fs-6 px-3 py-2 blink-animation">
                        Verbleibende Zeit: <span id="timerDisplay">15</span>s
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Phase 3: Eingabe aus dem Gedaechtnis. Der Originaltext ist hier bewusst ausgeblendet. -->
    <div id="phaseInput" class="d-none">
        <div class="card">
            <div class="card-body">
                <label for="userTextInput" class="form-label fw-bold mb-2">Geben Sie den Text aus dem Gedächtnis ein:</label>
                <textarea id="userTextInput" class="form-control mb-3" rows="8" placeholder="Tippen Sie hier den gemerkten Text ein..."></textarea>
                <div class="d-grid">
                    <button id="btnSubmitScore" class="btn btn-success btn-lg" style="background-color: #28a745; border: none;">
                        Auswerten & Absenden
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Phase 4: Auswertung inklusive Backend-Feedback und Vergleich Original/Eingabe. -->
    <div id="phaseResult" class="d-none">
        <div class="card text-center" style="border-top: 5px solid #28a745;">
            <div class="card-body py-5">
                <h3 class="text-success mb-2">Ergebnis</h3>
                <div class="display-1 fw-bold my-4" id="resultScore" style="color: #4a6fa5;">0</div>
                <p class="text-muted mb-5">Punkte (korrekte Wörter an der richtigen Position)</p>
                <!-- Wird von saveScore() befuellt: gespeichert, nur lokal berechnet oder Fehler. -->
                <div id="scoreSaveFeedback" class="alert d-none mb-4" role="alert"></div>
                
                <div class="row g-4 text-start mb-5">
                    <div class="col-md-6">
                        <div class="p-3 h-100" style="background: #f8f9fa; border-radius: 8px;">
                            <small class="text-muted d-block mb-2 text-uppercase fw-bold" style="font-size: 0.75rem;">Originaltext</small>
                            <p class="mb-0 fst-italic" id="resultOriginal" style="font-size: 0.95rem; line-height: 1.5;"></p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="p-3 h-100" style="background: #f8f9fa; border-radius: 8px;">
                            <small class="text-muted d-block mb-2 text-uppercase fw-bold" style="font-size: 0.75rem;">Ihre Eingabe</small>
                            <p class="mb-0 fst-italic" id="resultInput" style="font-size: 0.95rem; line-height: 1.5;"></p>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-center gap-3">
                    <button id="btnRestart" class="btn px-4">
                        Nochmal spielen
                    </button>
                    <button id="btnLeaderboard" class="btn px-4" style="background-color: #4a6fa5;">
                        Zum Leaderboard
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>