docs: Add detailed German comments to HTML templates
This commit is contained in:
Trompi001
parent
8aed9d5346
commit
3d606a1a3d
39
index.html
39
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;">
|
||||
© 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>
|
||||
|
||||
|
||||
@ -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>
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
157
pages/login.html
157
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>
|
||||
<!-- 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>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
<!-- 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>
|
||||
Loading…
x
Reference in New Issue
Block a user