creating login function

assets/css/custom.css

@@ -0,0 +1,215 @@
+
+body {
+    background: #f0f4f8;
+    color: #1b1b2f;
+    font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
+    line-height: 1.6;
+    margin-bottom: 1rem;
+    padding: 0;
+}
+
+/* Navigation Styles */
+.navbar {
+    background: linear-gradient(90deg, #1b1b2f,  #4a6fa5)
+}
+.navbar .nav-link {
+    color: #fff;
+    transition: color 0.3s, background-color 0.3s;
+    margin: 0 5px;
+}
+.navbar .nav-link:hover {
+    background-color: #ffd166;
+    color: #1b1b2f;
+    border-radius: 6px;
+    padding: 5px 10px;
+}
+
+.navbar .nav-link.active {
+    background-color: #ffd166;
+    color: #1b1b2f;
+    font-weight: bold;
+    border-radius: 6px;
+    padding: 5px 10px;
+}
+
+/* Main content styles */
+.container-dashboard {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+}
+/* Cards/Scores styles */
+.container > div:not(.modal) {
+    background-color:#ffffff;
+    border-radius: 12px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    padding: 25px;
+    font-size: 30px;
+    flex: 1 1 100%;
+    text-align: center;
+    transition: transform 0.3s, box-shadow 0.3s;
+}  
+.container > div:not(.modal):hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+}
+
+/* Keep Bootstrap modal sizing/layout intact */
+#password-modal {
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    border-radius: 0;
+    font-size: 1rem;
+}
+
+#password-modal .modal-dialog {
+    max-width: 560px;
+}
+
+/* Überschriften und Abstände  */
+h1, h2, h3, h4, h5, h6 {
+    margin-top: 1rem;
+    margin-bottom: 20px;
+    color: #1b1b2f;
+}
+p {
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+    color: #333;
+}
+/* Button Styles */
+.btn {
+    background-color: #4a6fa5;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s;
+}
+.btn:hover {
+    background-color: #2b4a7c;
+}
+.btn-danger {
+    background-color: #a84848;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s;
+}
+.btn-danger:hover {
+    background-color: #8a3b3b;
+}
+#page-wrapper {
+    display: flex;
+    min-height: 100vh;
+    font-family: 'Segoe UI', sans-serif;
+}
+/* Sidebar Styles */
+#sidebar {
+    width: 240px;
+    min-height: auto;
+    background: linear-gradient(180deg, #1b1b2f,  #4a6fa5);
+    color: white;
+    padding: 25px;
+}
+#sidebar .nav-link {
+    margin: 0.5rem 0;
+    transition: color 0.3s, background-color 0.3s;
+    color: white;
+    padding: 5px 10px;
+    border-radius: 6x;
+}
+#sidebar .nav-link:hover {
+    color: #1b1b2f;
+    border-radius: 6px;
+}
+#sidebar .nav-link.active {
+    color: #1b1b2f;
+    font-weight: bold;
+    background-color: #ffd166;
+        border-radius: 6px;
+    padding: 5px 10px;
+}
+#logo-img {
+    max-width: 500px;   
+    width: 100%;      
+    height: auto;       
+}
+#main-area {
+    flex: 1;
+    background: #f3f4f6;
+    display: flex;
+    flex-direction: column;
+}
+/* Topbar Styles */
+#topbar {
+    height: 70px;
+    background: white;
+    padding: 0px 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+#main-content {
+    background-color: #f0f4f8;
+    padding: 30px;
+}
+/* Card Styles */
+.card {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+    padding: 25px;
+    margin-bottom: 20px;
+}
+.card h2 {
+    margin-bottom: 10px;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+    body {
+        font-size: 0.9rem;
+    }
+    .container > div:not(.modal) {
+        flex: 1 1 calc(50% - 40px);
+    }
+    #page-wrapper {
+        flex-direction: column;
+    }
+    #sidebar {
+        width: 100%;
+        display: flex;
+        overflow-x: auto;
+    }
+    #sidebar .nav-link {
+        flex: 0 0 auto;
+        margin: 0 10px;
+    }
+}
+@media (min-width: 1200px) {
+    body {
+        font-size: 1.1rem;
+    }
+    .container > div:not(.modal) {
+        flex: 1 1 calc(25% - 40px);
+    }
+    p.columns{
+        column-count: 2;
+        column-gap: 2rem;
+    }
+    #sidebar .nav-link {
+        flex: 0 0 auto;
+        margin: 0 15px;
+    }
+
+}
+

index.html

@@ -1,21 +1,65 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-    <title>My Web Page</title>
     <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 -->
     <link rel="stylesheet" href="assets/bootstrap-5.3.8-dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="assets/css/custom.css">
 </head>
+
 <body class="p-4">
-    <h1 class="text-primary">Hello From Main Page</h1>
-    <a href="index.html">Go to Main Page</a>
-    <a href="secondSite.html">Go to Second Page</a>
-    <br />
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">Lorem Ipsum - Das Spiel</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <!--evtl. weglassen, da es eine Sidebar gibt -->
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <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>
+            </div>
+        </div>
+    </nav> 
+    <div id="page-wrapper">
+        <!-- Sidebar -->
+         <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>
+                <li class="nav-item"><a class="nav-link" href="#" id="nav-play">Spiel Starten</a></li>
+                <li class="nav-item"><a class="nav-link" href="#" id="nav-my-scores">Meine Scores</a></li>
+                <li class="nav-item"> <a class="nav-link" href="#" id="nav-leaderboard">Leaderboard</a></li>
 
-    <button class="btn btn-primary">Primary Button</button>
-  <button class="btn btn-secondary" onclick="exampleLog()">Secondary Button</button>
+            </ul>
+        </nav>
 
+        <!--Main Area -->
+        <div id="main-area">
+            <!--Topbar-->
+            <header id="topbar">
+                <h1 class="text-center mb-4">Dashboard</h1>
+            </header>
+
+            <!-- Content -->
+            <main class="container mt-4" id="main-content"></main>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS Bundle -->
     <script src="assets/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
-    <script src="assets/src/example.js"></script>
+    <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="js/login.js"></script>
+    <!--Navigation Script -->
+    <script src="js/navigation.js"></script>
+
 </body>
 </html>

js/login.js

@@ -0,0 +1,288 @@
+(function () {
+  const AUTH_STORAGE_KEY = "loremIpsumAuth";
+
+  function readAuth() {
+    const raw = localStorage.getItem(AUTH_STORAGE_KEY);
+    if (!raw) {
+      return null;
+    }
+
+    try {
+      const parsed = JSON.parse(raw);
+      if (!parsed.username || !parsed.password) {
+        return null;
+      }
+      return parsed;
+    } catch {
+      return null;
+    }
+  }
+
+  function saveAuth(username, password) {
+    localStorage.setItem(
+      AUTH_STORAGE_KEY,
+      JSON.stringify({ username: username, password: password }),
+    );
+  }
+
+  function clearAuth() {
+    localStorage.removeItem(AUTH_STORAGE_KEY);
+  }
+
+  function updateHeaderUsername() {
+    const usernameDisplay = document.getElementById("username-display");
+    const navbarLogin = document.getElementById("navbar-login");
+    const auth = readAuth();
+
+    if (usernameDisplay) {
+      usernameDisplay.textContent = auth ? "User: " + auth.username : "User: Guest";
+    }
+
+    if (navbarLogin) {
+      navbarLogin.textContent = auth ? auth.username : "Login / Registrieren";
+    }
+  }
+
+  function setFeedback(message, type) {
+    const feedback = document.getElementById("auth-feedback");
+    if (!feedback) {
+      return;
+    }
+
+    feedback.className = "alert alert-" + type;
+    feedback.textContent = message;
+    feedback.classList.remove("d-none");
+  }
+
+  function updateSessionBox() {
+    const sessionText = document.getElementById("current-session-text");
+    const logoutButton = document.getElementById("logout-button");
+    const deleteAccountButton = document.getElementById("delete-account-button");
+    const currentSessionBox = document.getElementById("current-session-box");
+    const authFormsRow = document.getElementById("auth-forms-row");
+
+    if (!sessionText || !logoutButton || !deleteAccountButton || !currentSessionBox || !authFormsRow) {
+      return;
+    }
+
+    const auth = readAuth();
+    if (auth) {
+      sessionText.textContent = "Eingeloggt als " + auth.username + ".";
+      logoutButton.disabled = false;
+      deleteAccountButton.disabled = false;
+      currentSessionBox.classList.remove("d-none");
+      authFormsRow.classList.add("d-none");
+    } else {
+      sessionText.textContent = "Nicht eingeloggt.";
+      logoutButton.disabled = true;
+      deleteAccountButton.disabled = true;
+      currentSessionBox.classList.add("d-none");
+      authFormsRow.classList.remove("d-none");
+    }
+  }
+
+  function getUserService() {
+    if (!window.config || !window.UserService) {
+      return null;
+    }
+
+    return new window.UserService(window.config);
+  }
+
+  async function handleLoginSubmit(event) {
+    event.preventDefault();
+
+    const userService = getUserService();
+    if (!userService) {
+      setFeedback("User-Service konnte nicht geladen werden.", "danger");
+      return;
+    }
+
+    const usernameInput = document.getElementById("login-username");
+    const passwordInput = document.getElementById("login-password");
+    const username = usernameInput.value.trim();
+    const password = passwordInput.value.trim();
+
+    if (!username || !password) {
+      setFeedback("Bitte Username und Passwort eingeben.", "warning");
+      return;
+    }
+
+    const result = await userService.getUser(username, password);
+    if (result.ok) {
+      saveAuth(username, password);
+      setFeedback("Login erfolgreich.", "success");
+      updateSessionBox();
+      updateHeaderUsername();
+      setTimeout(function() {
+        if (typeof window.loadPage === "function") {
+          window.loadPage("home", "nav-home");
+        }
+      }, 500);
+      return;
+    }
+
+    if (result.status === 401) {
+      setFeedback("Login fehlgeschlagen: Username oder Passwort ist falsch.", "danger");
+      return;
+    }
+
+    setFeedback("Login fehlgeschlagen (Status " + result.status + ").", "danger");
+  }
+
+  async function handleRegisterSubmit(event) {
+    event.preventDefault();
+
+    const userService = getUserService();
+    if (!userService) {
+      setFeedback("User-Service konnte nicht geladen werden.", "danger");
+      return;
+    }
+
+    const usernameInput = document.getElementById("register-username");
+    const username = usernameInput.value.trim();
+
+    if (!username) {
+      setFeedback("Bitte einen Username eingeben.", "warning");
+      return;
+    }
+
+    const result = await userService.postUser(username);
+    if (result.ok && result.body) {
+      const createdName = result.body.name || username;
+      const createdPassword = result.body.password || "";
+
+      saveAuth(createdName, createdPassword);
+      updateSessionBox();
+      updateHeaderUsername();
+
+      // Modal mit Daten füllen und anzeigen
+      const modalUsername = document.getElementById("modal-username");
+      const modalPassword = document.getElementById("modal-password");
+      if (modalUsername) modalUsername.textContent = createdName;
+      if (modalPassword) modalPassword.textContent = createdPassword;
+
+      const passwordModalElement = document.getElementById("password-modal");
+      if (passwordModalElement) {
+        const passwordModal = new window.bootstrap.Modal(passwordModalElement);
+        
+        // Listener für Modals-Schließen: zur Startseite navigieren
+        passwordModalElement.addEventListener("hidden.bs.modal", function handleClose() {
+          if (typeof window.loadPage === "function") {
+            window.loadPage("home", "nav-home");
+          }
+          passwordModalElement.removeEventListener("hidden.bs.modal", handleClose);
+        });
+
+        passwordModal.show();
+      } else {
+        // Fallback wenn Modal nicht gefunden
+        setFeedback(
+          "Account erstellt. Username: " + createdName + ", Passwort: " + createdPassword,
+          "success",
+        );
+        setTimeout(function() {
+          if (typeof window.loadPage === "function") {
+            window.loadPage("home", "nav-home");
+          }
+        }, 1500);
+      }
+
+      const loginUsernameInput = document.getElementById("login-username");
+      const loginPasswordInput = document.getElementById("login-password");
+      if (loginUsernameInput && loginPasswordInput) {
+        loginUsernameInput.value = createdName;
+        loginPasswordInput.value = createdPassword;
+      }
+
+      return;
+    }
+
+    if (result.status === 400) {
+      const errorMessage = result.body && result.body.message
+        ? result.body.message
+        : "Dieser Username existiert bereits.";
+      setFeedback(errorMessage, "danger");
+      return;
+    }
+
+    setFeedback(
+      "Account konnte nicht erstellt werden (Status " + result.status + ").",
+      "danger",
+    );
+  }
+
+  function handleLogout() {
+    clearAuth();
+    setFeedback("Du wurdest ausgeloggt.", "info");
+    updateSessionBox();
+    updateHeaderUsername();
+  }
+
+  async function handleDeleteAccount() {
+    const auth = readAuth();
+    if (!auth) {
+      setFeedback("Du bist nicht eingeloggt.", "warning");
+      return;
+    }
+
+    const wantsDelete = window.confirm(
+      "Möchtest du den Account \"" + auth.username + "\" wirklich löschen?",
+    );
+    if (!wantsDelete) {
+      return;
+    }
+
+    const userService = getUserService();
+    if (!userService) {
+      setFeedback("User-Service konnte nicht geladen werden.", "danger");
+      return;
+    }
+
+    const result = await userService.deleteUser(auth.username, auth.password);
+    if (result.ok) {
+      clearAuth();
+      updateSessionBox();
+      updateHeaderUsername();
+      setFeedback("Account wurde gelöscht.", "success");
+      return;
+    }
+
+    if (result.status === 401) {
+      setFeedback("Account konnte nicht gelöscht werden: nicht autorisiert.", "danger");
+      return;
+    }
+
+    setFeedback(
+      "Account konnte nicht gelöscht werden (Status " + result.status + ").",
+      "danger",
+    );
+  }
+
+  function initLoginPage() {
+    const loginForm = document.getElementById("login-form");
+    const registerForm = document.getElementById("register-form");
+    const logoutButton = document.getElementById("logout-button");
+    const deleteAccountButton = document.getElementById("delete-account-button");
+
+    if (!loginForm || !registerForm || !logoutButton || !deleteAccountButton) {
+      return;
+    }
+
+    loginForm.addEventListener("submit", handleLoginSubmit);
+    registerForm.addEventListener("submit", handleRegisterSubmit);
+    logoutButton.addEventListener("click", handleLogout);
+    deleteAccountButton.addEventListener("click", handleDeleteAccount);
+
+    updateSessionBox();
+    updateHeaderUsername();
+  }
+
+  window.initLoginPage = initLoginPage;
+  window.AppAuth = {
+    getAuth: readAuth,
+    clearAuth: clearAuth,
+  };
+
+  document.addEventListener("DOMContentLoaded", updateHeaderUsername);
+})();

js/navigation.js

@@ -0,0 +1,49 @@
+document.addEventListener("DOMContentLoaded", () => {
+    function setActiveMenu(id) {
+        //Alle Sidebar-Links zurücksetzen
+        document.querySelectorAll("#sidebar .nav-link").forEach(link => link.classList.remove("active"));
+        // Alle Navbar-Links zurücksetzen
+        document.querySelectorAll(".navbar-nav .nav-link").forEach(link => link.classList.remove("active"));
+        
+        //Aktiven Link setzen
+        const activeLink = document.getElementById(id);
+        if (activeLink) activeLink.classList.add("active");
+    }
+    window.loadPage = function loadPage(page, menuId) {
+        fetch("pages/" + page + ".html")
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error("HTTP " + response.status);
+                }
+                return response.text();
+            })
+            .then(data => {
+                document.getElementById("main-content").innerHTML = data;
+                setActiveMenu(menuId);
+                if (page === "login" && typeof window.initLoginPage === "function") {
+                    window.initLoginPage();
+                }
+            })
+            .catch(error => {
+                console.error("Fehler beim Laden von " + page + ":", error);
+                document.getElementById("main-content").innerHTML = "<div class='alert alert-danger'>Fehler beim Laden der Seite: " + error.message + "</div>";
+            });
+    };
+
+    const navHome = document.getElementById("nav-home");
+    const navPlay = document.getElementById("nav-play");
+    const navMyScores = document.getElementById("nav-my-scores");
+    const navLeaderboard = document.getElementById("nav-leaderboard");
+    const navbarLogin = document.getElementById("navbar-login");
+    const navbarMessages = document.getElementById("navbar-messages");
+
+    if (navHome) navHome.onclick = (e) => { e.preventDefault(); loadPage("home", "nav-home"); };
+    if (navPlay) navPlay.onclick = (e) => { e.preventDefault(); loadPage("play", "nav-play"); };
+    if (navMyScores) navMyScores.onclick = (e) => { e.preventDefault(); loadPage("scores", "nav-my-scores"); };
+    if (navLeaderboard) navLeaderboard.onclick = (e) => { e.preventDefault(); loadPage("leaderboard", "nav-leaderboard"); };
+    if (navbarLogin) navbarLogin.onclick = (e) => { e.preventDefault(); loadPage("login", "navbar-login"); };
+    if (navbarMessages) navbarMessages.onclick = (e) => { e.preventDefault(); loadPage("messages", "navbar-messages"); };
+
+    //Startseite laden
+    loadPage("home", "nav-home");
+});

pages/home.html

@@ -0,0 +1,8 @@
+<div class="card">
+    <h2>Willkommen beim Lorem Ipsum Game</h2>
+    <p>Teste deine Fähigkeiten im Umgang mit Lorem Ipsum Texten! Je schneller und genauer du bist, desto höher ist dein Score. 
+        Viel Spaß beim Spielen!</p>
+
+    <p> Wähle eine Option aus der Navigation, um zu starten.</p>
+    <img id="logo_img" src="image/Logo_loremIpsum.png" alt="Lorem Ipsum Game" class="img-fluid mt-3 d-block mx-auto">
+</div> 

pages/leaderboard.html

@@ -0,0 +1,5 @@
+<div class="card">
+    <h2 class="mb-3">Leaderboard</h2>
+    
+    <p class="mt-2">Hier kannst du die besten Spieler und ihre Scores sehen.</p>
+</div>

pages/login.html

@@ -0,0 +1,73 @@
+<!-- Login Seite -->
+<div class="card">
+    <h2 class="mb-3">Account</h2>
+
+    <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="h5 mb-2">Aktuelle Sitzung</h3>
+        <p class="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="h5 mb-3">Login</h3>
+                <form id="login-form">
+                    <div class="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="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="h5 mb-3">Neuen Account erstellen</h3>
+                <form id="register-form">
+                    <div class="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="small mt-3 mb-0 text-muted">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>

pages/messages.html

@@ -0,0 +1,6 @@
+<div class="card">
+    <h2 class="mb-3">Nachrichten</h2>
+
+    <p class="mt-2">Hier kannst du deine Nachrichten ansehen und verwalten.</p>
+    <!-- Hier könnte eine Nachrichtenliste oder ähnliches eingebunden werden -->    
+</div>

pages/play.html

@@ -0,0 +1,7 @@
+<div class= "card">
+    <h2 class="mb-3">Spiel Starten</h2>
+    <p class="mt-2">Hier kannst du das Spiel starten. Viel Erfolg!</p>
+
+    <button class="btn btn-primary mt-3">Spiel starten</button>
+    <!-- Hier könnte der eigentliche Spielinhalt eingebunden werden -->
+</div>

pages/scores.html

@@ -0,0 +1,6 @@
+<div class="card">
+    <h2 class="mb-3">Meine Scores</h2>
+
+    <p class="mt-2">Hier kannst du deine bisherigen Scores einsehen.</p>
+    <!-- Hier könnte eine Score-Tabelle oder ähnliches eingebunden werden -->
+</div>