From 3d606a1a3d6546ce8967c7c31fe1dca841c4abae Mon Sep 17 00:00:00 2001
From: Trompi001 <gartmann.florin@gmail.com>
Date: Tue, 9 Jun 2026 18:21:46 +0200
Subject: [PATCH] docs: Add detailed German comments to HTML templates

---
 index.html             |  39 ++++++----
 pages/home.html        |   8 ++-
 pages/leaderboard.html |  10 +--
 pages/login.html       | 157 +++++++++++++++++++++--------------------
 pages/messages.html    |  64 ++++++++++-------
 pages/play.html        |  27 +++++--
 pages/scores.html      |  57 ++++++++-------
 7 files changed, 208 insertions(+), 154 deletions(-)
diff --git a/index.html b/index.html
index c50eb33..6f22b81 100644
--- a/index.html
+++ b/index.html
@@ -4,12 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Lorem Ipsum - Das Spiel</title>
-    <link rel="icon" type="image/png" href="image/icon_l.png">
-    <!-- Bootstrap CSS -->
+    <!-- Favicon -->
+    <link class="icon" type="image/png" href="image/icon_l.png">
+    
+    <!-- Bootstrap CSS (Lokale Distribution) -->
     <link rel="stylesheet" href="assets/bootstrap-5.3.8-dist/css/bootstrap.min.css">
+    <!-- Eigene Styles für Design-Anpassungen -->
     <link rel="stylesheet" href="assets/css/custom.css?v=challenge-flow-20260528e">
     
-    <!-- Kleine Korrektur direkt hier, falls Sie custom.css nicht sofort ändern wollen -->
+    <!-- Inline-CSS-Anpassungen zur Behebung von Flexbox-Layout-Verschiebungen -->
     <style>
         /* Sicherstellen, dass der Main-Area den ganzen Platz einnimmt */
         #main-area {
@@ -36,9 +39,8 @@
     </style>
 </head>
 
-<!-- class="p-4" entfernt -->
 <body>
-    <!-- Navigation -->
+    <!-- Navigation: Navbar am oberen Bildschirmrand -->
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
         <div class="container-fluid">
             <a class="navbar-brand" href="#">Lorem Ipsum - Das Spiel</a>
@@ -47,6 +49,7 @@
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav ms-auto">
+                    <!-- Navigationslinks für Nachrichten (Inbox) und den Login/Registrierungsstatus -->
                     <li class ="nav-item"><a class="nav-link" href="#" id="navbar-messages">Nachrichten</a></li>
                     <li class="nav-item"><a class="nav-link" href="#" id="navbar-login">Login / Registrieren</a></li>
                 </ul>
@@ -54,8 +57,9 @@
         </div>
     </nav> 
     
+    <!-- Hauptseiten-Wrapper für das Flexbox-Layout -->
     <div id="page-wrapper">
-        <!-- Sidebar -->
+        <!-- Sidebar Navigation auf der linken Seite (oder einklappbar auf Mobilgeräten) -->
          <nav id="sidebar" class="bg-dark text-white p-3">
             <ul class="nav flex-column">
                 <li class="nav-item"><a class="nav-link" href="#" id="nav-home">Home</a></li>
@@ -65,22 +69,22 @@
             </ul>
         </nav>
 
-        <!-- Main Area: Enthält jetzt Topbar, Content UND Footer -->
+        <!-- Hauptbereich: Enthält Topbar, Content und Footer -->
         <div id="main-area">
-            <!-- Topbar -->
+            <!-- Topbar (Seiten-Überschrift) -->
             <header id="topbar">
                 <h1 class="text-center mb-4">Dashboard</h1>
             </header>
 
-            <!-- Content -->
+            <!-- Dynamischer Inhalts-Container: Hier werden die HTML-Dateien aus pages/ hineingeladen -->
             <main class="container mt-4" id="main-content">
                 <!-- Hier werden die pages.html geladen -->
             </main>
 
-            <!-- Footer: Jetzt INSIDE main-area, damit Flexbox funktioniert -->
+            <!-- Footer-Bereich mit Impressums- und Urheberrechtsangaben -->
             <footer class="bg-dark text-black py-4 border-top border-secondary">
                 <div class="container">
-                    <!-- Oberer Bereich -->
+                    <!-- Modul-Informationen -->
                     <div class="row mb-3">
                         <div class="col-12">Made with <span class="text-danger">♥</span> für das Modul Frontend
                             <h5 class="text-warning">Made with Bootstrap 5.3.8.</h5>
@@ -90,7 +94,7 @@
                         </div>
                     </div>
 
-                    <!-- Impressum -->
+                    <!-- Impressumsdetails -->
                     <div class="row mt-2">
                         <div class="col-12">
                             <span class="text-warning fw-bold d-block mb-2" style="font-size: 0.7rem;">Impressum</span>
@@ -113,6 +117,7 @@
                                     </div>
                                 </div>
                             </div>
+                            <!-- Copyright-Angabe -->
                             <div class="text-center mt-2">
                                 <p class="mb-0 text-black-50" style="font-size: 0.65rem;">
                                     &copy; 2026 Modul Frontend Projekt. Alle Rechte vorbehalten.
@@ -125,20 +130,26 @@
         </div>
     </div>
 
-    <!-- Bootstrap JS Bundle -->
+    <!-- JavaScript-Einbindungen -->
+    <!-- Bootstrap JS Bundle (Lokale Distribution) -->
     <script src="assets/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Backend API Services -->
     <script src="assets/src/service/config-service.js"></script>
     <script src="assets/src/service/user-service.js"></script>
     <script src="assets/src/service/score-service.js"></script>
     <script src="assets/src/service/leaderboard-service.js"></script>
     <script src="assets/src/service/message-service.js"></script>
     <script src="assets/src/service/challenge-service.js"></script>
+    
+    <!-- Frontend Logik-Skripte -->
     <script src="js/login.js"></script>
     <script src="js/leaderboard.js"></script>
     <script src="js/scores.js"></script>
     <script src="js/messages.js?v=challenge-flow-20260531b"></script>
-    <!--Navigation Script -->
     <script src="js/play.js?v=challenge-flow-20260531b"></script>
+    <!-- Hauptnavigations-Steuerung -->
     <script src="js/navigation.js?v=challenge-flow-20260528"></script>
 </body>
 </html>
+
diff --git a/pages/home.html b/pages/home.html
index 0a5496f..de7e7fb 100644
--- a/pages/home.html
+++ b/pages/home.html
@@ -1,8 +1,14 @@
+<!-- Startseite der Anwendung -->
 <div class="card mb-4 text-start">
+    <!-- Willkommens-Überschrift und Kurzbeschreibung des Spiels -->
     <div class="mb-4">
         <h2 class="fw-bold mb-1">Willkommen beim Lorem Ipsum Game</h2>
         <p class="text-muted mb-0 fs-6">Teste deine Fähigkeiten im Umgang mit Lorem Ipsum Texten! Je schneller und genauer du bist, desto höher ist dein Score.</p>
     </div>
+    <!-- Handlungsaufforderung an den Spieler -->
     <p class="card-text fs-6">Wähle eine Option aus der Navigation, um zu starten. Viel Spaß beim Spielen!</p>
+    
+    <!-- Projekt-Logo zentriert im unteren Bereich -->
     <img id="logo_img" src="image/Logo_loremIpsum.png" alt="Lorem Ipsum Game" class="img-fluid mt-3 d-block mx-auto">
-</div> 
\ No newline at end of file
+</div> 
+ 
\ No newline at end of file
diff --git a/pages/leaderboard.html b/pages/leaderboard.html
index 2d65451..3d70f37 100644
--- a/pages/leaderboard.html
+++ b/pages/leaderboard.html
@@ -1,14 +1,15 @@
-<!-- Hauptbereich der Rangliste -->
+<!-- Rangliste (Leaderboard) - Zeigt die globalen Top-10 Spieler an -->
 <div class="card mb-4 text-start">
+    <!-- Header-Bereich mit Titel und Kurzbeschreibung -->
     <div class="mb-4">
         <h2 class="fw-bold mb-1">Leaderboard</h2>
         <p class="text-muted mb-0 fs-6">Hier siehst du ein Leaderboard mit den 10 besten Usern.</p>
     </div>
 
-    <!-- Tabellarische Darstellung der besten Eintraege -->
+    <!-- Tabellarische Darstellung der besten Einträge -->
     <table class="leaderboard-table">
         <thead>
-            <!-- Spalten fuer Rang, Nutzer, Zeit und Punkte -->
+            <!-- Spaltenköpfe für Rang, Benutzername, benötigte Zeit und Punktzahl -->
             <tr>
                 <th>Rank</th>
                 <th>User</th>
@@ -16,7 +17,8 @@
                 <th>Score</th>
             </tr>
         </thead>
-        <!-- Wird zur Laufzeit durch js/leaderboard.js befuellt -->
+        <!-- Tabellenkörper: Wird dynamisch zur Laufzeit durch js/leaderboard.js mit Zeilen befüllt -->
         <tbody id="leaderboard-body"></tbody>
     </table>
 </div>
+
diff --git a/pages/login.html b/pages/login.html
index 5465103..6b3a801 100644
--- a/pages/login.html
+++ b/pages/login.html
@@ -1,76 +1,81 @@
-<!-- Login Seite -->
-<div class="card mb-4 text-start">
-    <div class="mb-4">
-        <h2 class="fw-bold mb-1">Account</h2>
-        <p class="text-muted mb-0 fs-6">Verwalte deine Sitzung und Account-Details.</p>
-    </div>
-
-    <div id="auth-feedback" class="alert d-none" role="status" aria-live="polite"></div>
-
-    <!-- Logout und Account löschen -->
-    <div class="card bg-light mb-3" id="current-session-box">
-        <h3 class="mb-2">Aktuelle Sitzung</h3>
-        <p class="h5 mb-2" id="current-session-text">Nicht eingeloggt.</p>
-        <div class="d-flex gap-2">
-            <button id="logout-button" type="button" class="btn btn-outline-secondary btn-sm" disabled>Logout</button>
-            <button id="delete-account-button" type="button" class="btn btn-danger btn-sm" disabled>Account löschen</button>
-        </div>
-    </div>
-
-    <!-- Login und Account erstellen -->
-    <div class="row g-3" id="auth-forms-row">
-        <div class="col-12 col-lg-6">
-            <div class="card h-100">
-                <h3 class="mb-3">Login</h3>
-                <form id="login-form">
-                    <div class="h5 mb-3">
-                        <label for="login-username" class="form-label">Username</label>
-                        <input id="login-username" class="form-control" type="text" required maxlength="40" autocomplete="username" />
-                    </div>
-                    <div class="h5 mb-3">
-                        <label for="login-password" class="form-label">Passwort</label>
-                        <input id="login-password" class="form-control" type="password" required maxlength="100" autocomplete="current-password" />
-                    </div>
-                    <button type="submit" class="btn btn-primary">Einloggen</button>
-                </form>
-            </div>
-        </div>
-
-        <div class="col-12 col-lg-6">
-            <div class="card h-100">
-                <h3 class="mb-3">Neuen Account erstellen</h3>
-                <form id="register-form">
-                    <div class="h5 mb-3">
-                        <label for="register-username" class="form-label">Gewünschter Username</label>
-                        <input id="register-username" class="form-control" type="text" required maxlength="40" autocomplete="username" />
-                    </div>
-                    <button type="submit" class="btn btn-success">Account anlegen</button>
-                </form>
-                <p class="text-muted mb-0 fs-6">Hinweis: Das Passwort wird vom Backend erstellt und bei Erfolg angezeigt.</p>
-            </div>
-        </div>
-    </div>
-</div>
-
-
-<!-- Modal für Account-Erstellung -->
-<div class="modal fade" id="password-modal" tabindex="-1" aria-labelledby="password-modal-label" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="password-modal-label">Account erfolgreich erstellt!</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <div class="alert alert-info mb-3">
-                    <strong>Username:</strong> <span id="modal-username"></span><br/>
-                    <strong>Passwort:</strong> <span id="modal-password" style="font-family: monospace; background-color: #f0f0f0; padding: 4px 8px; border-radius: 4px;"></span>
-                </div>
-                <p class="text-muted small mb-0">Bitte speichere das Passwort. Du benötigst es zum Einloggen.</p>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Weiter zur Startseite</button>
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+<!-- Account-Verwaltung (Login, Registrierung, Sitzungsanzeige) -->
+<div class="card mb-4 text-start">
+    <!-- Header-Bereich mit Kurzbeschreibung -->
+    <div class="mb-4">
+        <h2 class="fw-bold mb-1">Account</h2>
+        <p class="text-muted mb-0 fs-6">Verwalte deine Sitzung und Account-Details.</p>
+    </div>
+
+    <!-- Alert-Box für Fehlermeldungen und Erfolgsmeldungen (wird per js/login.js gesteuert) -->
+    <div id="auth-feedback" class="alert d-none" role="status" aria-live="polite"></div>
+
+    <!-- Aktuelle Sitzung: Zeigt den Login-Status und bietet Buttons für Logout und Account löschen -->
+    <div class="card bg-light mb-3" id="current-session-box">
+        <h3 class="mb-2">Aktuelle Sitzung</h3>
+        <p class="h5 mb-2" id="current-session-text">Nicht eingeloggt.</p>
+        <div class="d-flex gap-2">
+            <button id="logout-button" type="button" class="btn btn-outline-secondary btn-sm" disabled>Logout</button>
+            <button id="delete-account-button" type="button" class="btn btn-danger btn-sm" disabled>Account löschen</button>
+        </div>
+    </div>
+
+    <!-- Formular-Bereich: Login und Registrierung nebeneinander (auf Desktop) -->
+    <div class="row g-3" id="auth-forms-row">
+        <!-- Linke Spalte: Login-Formular -->
+        <div class="col-12 col-lg-6">
+            <div class="card h-100">
+                <h3 class="mb-3">Login</h3>
+                <form id="login-form">
+                    <div class="h5 mb-3">
+                        <label for="login-username" class="form-label">Username</label>
+                        <input id="login-username" class="form-control" type="text" required maxlength="40" autocomplete="username" />
+                    </div>
+                    <div class="h5 mb-3">
+                        <label for="login-password" class="form-label">Passwort</label>
+                        <input id="login-password" class="form-control" type="password" required maxlength="100" autocomplete="current-password" />
+                    </div>
+                    <button type="submit" class="btn btn-primary">Einloggen</button>
+                </form>
+            </div>
+        </div>
+
+        <!-- Rechte Spalte: Registrierungs-Formular -->
+        <div class="col-12 col-lg-6">
+            <div class="card h-100">
+                <h3 class="mb-3">Neuen Account erstellen</h3>
+                <form id="register-form">
+                    <div class="h5 mb-3">
+                        <label for="register-username" class="form-label">Gewünschter Username</label>
+                        <input id="register-username" class="form-control" type="text" required maxlength="40" autocomplete="username" />
+                    </div>
+                    <button type="submit" class="btn btn-success">Account anlegen</button>
+                </form>
+                <p class="text-muted mb-0 fs-6 mt-2">Hinweis: Das Passwort wird vom Backend erstellt und bei Erfolg angezeigt.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- Bootstrap Modal: Zeigt das einmalig generierte Passwort nach erfolgreicher Account-Erstellung an -->
+<div class="modal fade" id="password-modal" tabindex="-1" aria-labelledby="password-modal-label" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="password-modal-label">Account erfolgreich erstellt!</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <!-- Anzeige der generierten Zugangsdaten -->
+                <div class="alert alert-info mb-3">
+                    <strong>Username:</strong> <span id="modal-username"></span><br/>
+                    <strong>Passwort:</strong> <span id="modal-password" style="font-family: monospace; background-color: #f0f0f0; padding: 4px 8px; border-radius: 4px;"></span>
+                </div>
+                <p class="text-muted small mb-0">Bitte speichere das Passwort. Du benötigst es zum Einloggen.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Weiter zur Startseite</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pages/messages.html b/pages/messages.html
index 3d07ae8..eeaf709 100644
--- a/pages/messages.html
+++ b/pages/messages.html
@@ -1,4 +1,6 @@
+<!-- Nachrichten- und Challenge-Dashboard -->
 <div class="card messages-card mb-4 text-start">
+    <!-- Header-Bereich mit Aktualisierungs-Button -->
     <div class="messages-header mb-4">
         <div>
             <h2 class="fw-bold mb-1">Nachrichten</h2>
@@ -7,43 +9,53 @@
         <button class="btn btn-sm" id="refresh-messages-button" type="button">Aktualisieren</button>
     </div>
 
+    <!-- Platzhalter: Wird angezeigt, wenn der Benutzer nicht angemeldet ist -->
     <div id="messages-login-placeholder" class="alert alert-warning mt-3 d-none">
         Melde dich zuerst an, bevor du eine Nachricht verschicken kannst.
     </div>
 
+    <!-- Hauptbereich der Inbox (Sichtbar wenn eingeloggt) -->
     <div id="messages-content" class="d-none">
+        <!-- Status- und Feedbackanzeige -->
         <div id="messages-feedback" class="alert d-none mt-3 mb-0" role="alert"></div>
 
         <div class="row g-4 mt-2">
+            <!-- Linke Spalte: Sidebar mit der Liste aller verfügbaren Benutzer -->
             <div class="col-lg-4">
-            <section class="messages-panel">
-                <h3>User</h3>
-                <div id="messages-user-list" class="messages-user-list"></div>
-            </section>
-        </div>
+                <section class="messages-panel">
+                    <h3>User</h3>
+                    <!-- Wird zur Laufzeit per js/messages.js mit User-Schaltflächen befüllt -->
+                    <div id="messages-user-list" class="messages-user-list"></div>
+                </section>
+            </div>
 
-        <div class="col-lg-8">
-            <section class="messages-panel mb-4">
-                <h3>Challenge senden</h3>
-                <form id="challenge-form" class="message-form">
-                    <label for="challenge-recipient" class="form-label">Empfaenger</label>
-                    <select id="challenge-recipient" class="form-select mb-3"></select>
+            <!-- Rechte Spalte: Formular zum Erstellen von Challenges und die Inbox -->
+            <div class="col-lg-8">
+                <!-- Sektion: Challenge senden -->
+                <section class="messages-panel mb-4">
+                    <h3>Challenge senden</h3>
+                    <form id="challenge-form" class="message-form">
+                        <label for="challenge-recipient" class="form-label">Empfaenger</label>
+                        <select id="challenge-recipient" class="form-select mb-3"></select>
+ 
+                        <label for="challenge-text" class="form-label">Nachricht</label>
+                        <textarea id="challenge-text" class="form-control mb-3" rows="3">Kannst du mich schlagen? Spiel eine Runde, dann bin ich dran.</textarea>
+ 
+                        <button class="btn" type="submit">Challenge senden</button>
+                    </form>
+                </section>
 
-                    <label for="challenge-text" class="form-label">Nachricht</label>
-                    <textarea id="challenge-text" class="form-control mb-3" rows="3">Kannst du mich schlagen? Spiel eine Runde, dann bin ich dran.</textarea>
-
-                    <button class="btn" type="submit">Challenge senden</button>
-                </form>
-            </section>
-
-            <section class="messages-panel">
-                <div class="messages-inbox-title">
-                    <h3>Posteingang</h3>
-                    <button class="btn btn-sm" id="mark-read-button" type="button">Als gelesen markieren</button>
-                </div>
-                <div id="message-list" class="message-list"></div>
-            </section>
-        </div>
+                <!-- Sektion: Posteingang (Liste der empfangenen/gesendeten Nachrichten) -->
+                <section class="messages-panel">
+                    <div class="messages-inbox-title">
+                        <h3>Posteingang</h3>
+                        <button class="btn btn-sm" id="mark-read-button" type="button">Als gelesen markieren</button>
+                    </div>
+                    <!-- Wird dynamisch durch js/messages.js gerendert (normale Messages & Challenge-Karten) -->
+                    <div id="message-list" class="message-list"></div>
+                </section>
+            </div>
         </div>
     </div>
 </div>
+
diff --git a/pages/play.html b/pages/play.html
index 2c49de0..c4f5147 100644
--- a/pages/play.html
+++ b/pages/play.html
@@ -1,19 +1,21 @@
-<!-- Spielseite: Die vier Phasen werden per play.js ein- und ausgeblendet. -->
+<!-- Spielseite: Die vier Phasen werden dynamisch per play.js ein- und ausgeblendet. -->
 <div class="game-container text-start">
     
-    <!-- Status-Badge zeigt die aktuelle Spielphase: Bereit, Lernphase, Eingabe, Abgeschlossen. -->
+    <!-- Status-Header: Zeigt Titel, Challenge-Hinweise und das Status-Badge der aktuellen Spielphase (Bereit, Lernphase, Eingabe, Abgeschlossen) -->
     <div class="d-flex justify-content-between align-items-md-center flex-column flex-md-row mb-4">
         <div class="mb-3 mb-md-0">
             <h2 class="fw-bold mb-1">Lorem Ipsum - Challenge your brain</h2>
+            <!-- Challenge-Hinweis: Zeigt an, gegen wen und um welchen Score gespielt wird (wird per JS eingeblendet) -->
             <div id="challengeHint" class="challenge-hint d-none"></div>
             <p class="text-muted mb-0 fs-6">Merken Sie sich den Text so gut wie möglich.</p>
         </div>
+        <!-- Status-Badge der aktuellen Spielphase -->
         <div id="gameStatus" class="badge bg-secondary fs-6 px-3 py-2" style="width: fit-content;">
             Bereit
         </div>
     </div>
 
-    <!-- Phase 1: Startbildschirm vor der Textanzeige. -->
+    <!-- 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>
@@ -27,14 +29,16 @@
         </div>
     </div>
 
-    <!-- Phase 2: Merken. Der zufaellige Rundentext wird in #targetTextDisplay eingesetzt. -->
+    <!-- Phase 2: Lern-/Einprägephase. Der Runden-Text wird per JS in #targetTextDisplay eingefügt. -->
     <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>
+                <!-- Rundentext-Anzeige -->
                 <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>
+                <!-- Countdown-Anzeige -->
                 <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
@@ -44,11 +48,12 @@
         </div>
     </div>
 
-    <!-- Phase 3: Eingabe aus dem Gedaechtnis. Der Originaltext ist hier bewusst ausgeblendet. -->
+    <!-- Phase 3: Eingabephase. Der Originaltext wird ausgeblendet und das Textfeld wird fokussiert. -->
     <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>
+                <!-- Eingabefeld für den gemerkten Text (Cheating-Sperren in play.js verhindern Copy/Paste) -->
                 <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;">
@@ -59,23 +64,28 @@
         </div>
     </div>
 
-    <!-- Phase 4: Auswertung inklusive Backend-Feedback und Vergleich Original/Eingabe. -->
+    <!-- Phase 4: Auswertungs- und Ergebnisphase (inklusive API-Feedback und farbigem Wortvergleich) -->
     <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>
+                <!-- Erzielte Punktzahl -->
                 <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. -->
+                
+                <!-- Feedback-Box für API-Antworten (wird per JS befüllt) -->
                 <div id="scoreSaveFeedback" class="alert d-none mb-4" role="alert"></div>
                 
+                <!-- Wortvergleich: Gegenüberstellung des Originaltexts und der Eingabe -->
                 <div class="row g-4 text-start mb-5">
+                    <!-- Originaltext mit rot/grünen Wort-Badges -->
                     <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>
+                    <!-- Benutzereingabe mit rot/grünen Wort-Badges -->
                     <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>
@@ -84,6 +94,7 @@
                     </div>
                 </div>
 
+                <!-- Navigation nach dem Spiel -->
                 <div class="d-flex justify-content-center gap-3">
                     <button id="btnRestart" class="btn px-4">
                         Nochmal spielen
@@ -98,3 +109,5 @@
 
 </div>
 
+</div>
+
diff --git a/pages/scores.html b/pages/scores.html
index a33d29e..df507a6 100644
--- a/pages/scores.html
+++ b/pages/scores.html
@@ -1,26 +1,31 @@
-<div class="card mb-4 text-start">
-    <div class="mb-4">
-        <h2 class="fw-bold mb-1">Meine Scores</h2>
-        <p class="text-muted mb-0 fs-6">Hier siehst du alle gespeicherten Scores deines Accounts.</p>
-    </div>
-
-    <div id="scores-feedback" class="alert d-none mb-4" role="alert"></div>
-
-    <div class="table-responsive">
-        <table class="table leaderboard-table mb-0">
-            <thead>
-                <tr>
-                    <th scope="col">Rang</th>
-                    <th scope="col">User</th>
-                    <th scope="col">time</th>
-                    <th scope="col">Score</th>
-                </tr>
-            </thead>
-            <tbody id="scores-body">
-                <tr>
-                    <td colspan="4" class="text-center text-muted py-4">Lade Scores ...</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</div>
\ No newline at end of file
+<!-- Eigene Scores-Ansicht des angemeldeten Benutzers -->
+<div class="card mb-4 text-start">
+    <!-- Header-Bereich mit Titel und Kurzbeschreibung -->
+    <div class="mb-4">
+        <h2 class="fw-bold mb-1">Meine Scores</h2>
+        <p class="text-muted mb-0 fs-6">Hier siehst du alle gespeicherten Scores deines Accounts.</p>
+    </div>
+
+    <!-- Alert-Box für Rückmeldungen (wird bei Fehlern/Info-Meldungen per js/scores.js eingeblendet) -->
+    <div id="scores-feedback" class="alert d-none mb-4" role="alert"></div>
+
+    <!-- Tabelle zur Auflistung der eigenen Scores -->
+    <div class="table-responsive">
+        <table class="table leaderboard-table mb-0">
+            <thead>
+                <tr>
+                    <th scope="col">Rang</th>
+                    <th scope="col">User</th>
+                    <th scope="col">time</th>
+                    <th scope="col">Score</th>
+                </tr>
+            </thead>
+            <!-- Tabellenkörper: Wird per js/scores.js mit den eigenen Ergebnissen des Users befüllt -->
+            <tbody id="scores-body">
+                <tr>
+                    <td colspan="4" class="text-center text-muted py-4">Lade Scores ...</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
\ No newline at end of file
