Erste Schritte der Navigation implementiert

Reviewed-on: #5

.gitignore

@@ -0,0 +1 @@
+.vscode/

assets/css/custom.css

@@ -0,0 +1,155 @@
+
+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;
+}
+.navbar .nav-link:hover {
+    color: #ffd166;
+}
+
+/* Main content styles */
+.container-dashboard {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+}
+/* Cards/Scores styles */
+.container > div {
+    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:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+}
+
+/* Ü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 */
+button, .btn {
+    background-color: #4a6fa5;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s;
+}
+button:hover, .btn:hover {
+    background-color: #2b4a7c;
+}
+#page-wrapper {
+    display: flex;
+    min-height: 100vh;
+    font-family: 'Segoe UI', sans-serif;
+}
+/* Sidebar Styles */
+#sidebar {
+    width: 240px;
+    min-height: 100vh;
+    background: linear-gradient(180deg, #1b1b2f, #4a6fa5);
+    color: white;
+    padding: 25px;
+}
+.logo {
+    font-size: 24px;
+    margin-bottom: 30px;
+}
+#sidebar .nav-link {
+    margin: 0.5rem 0;
+    transition: color 0.3s background-color 0.3s;
+}
+#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) {
+    .container > div {
+        flex: 1 1 calc(50% - 40px);
+    }
+    #page-wrapper {
+        flex-direction: column;
+    }
+    #sidebar {
+        width: 100%;
+        display: flex;
+        overflow-x: auto;
+    }
+}
+@media (min-width: 1200px) {
+    body {
+        font-size: 1.1rem;
+    }
+    .container div {
+        flex: 1 1 calc(25% - 40px);
+    }
+    p.columns{
+        column-count: 2;
+        column-gap: 2rem;
+    }
+    #sidebar .nav-link {
+        flex: 0 0 auto;
+        margin: 0 15px;
+    }
+
+}
+

assets/src/example.js

@@ -1,7 +1,7 @@
 var exampleLog = () => {
-    console.log('This is an example log message.');
-}
+  console.log("This is an example log message.");
+};
 
 var aFunctionCall = () => {
-    alert('You have clicked the primary button!');
-}
+  alert("You have clicked the primary button!");
+};

assets/src/service/config-service.js

@@ -0,0 +1,5 @@
+const config = {
+    API_BASE_URL: "https://316214-1.web.fhgr.education/10001/api/"
+}
+
+window.config = config;

assets/src/service/leaderboard-service.js

@@ -0,0 +1,29 @@
+class LeaderboardService {
+  constructor(config) {
+    this.baseUrl = config.API_BASE_URL;
+    this.urlTail = "leaderboard";
+  }
+
+  async getLeaderboard(offset, limit) {
+    const response = await fetch(
+      `${this.baseUrl}${this.urlTail}?offset=${offset}&limit=${limit}`,
+      {
+        method: "GET",
+      },
+    );
+    let body = null;
+    try {
+      body = await response.json();
+    } catch {
+      console.error("Error in getLeaderboard");
+    }
+
+    return {
+      status: response.status,
+      ok: response.ok,
+      body: body,
+    };
+  }
+}
+
+window.LeaderboardService = LeaderboardService;

assets/src/service/score-service.js

@@ -0,0 +1,79 @@
+class ScoreService {
+  constructor(config) {
+    this.baseUrl = config.API_BASE_URL;
+    this.urlTail = "score";
+  }
+
+  async getScoreByName(username) {
+    // Note: When user does not exist, we get a 200 with empty array, not a 404
+    const response = await fetch(`${this.baseUrl}${this.urlTail}/${username}`, {
+      method: "GET",
+    });
+    let body = null;
+    try {
+      body = await response.json();
+    } catch {
+      console.error("Error in getScoreByName");
+    }
+
+    return {
+      status: response.status,
+      ok: response.ok,
+      body: body,
+    };
+  }
+
+  async postScore(username, password, score, time, text, userWrittenText) {
+    const response = await fetch(`${this.baseUrl}${this.urlTail}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Username": username,
+        "X-Password": password,
+      },
+      body: JSON.stringify({
+        score: score,
+        time: time,
+        text: text,
+        userWrittenText: userWrittenText,
+      }),
+    });
+
+    let body = null;
+    try {
+      body = await response.json();
+    } catch {
+      console.error("Error in postScore");
+    }
+
+    return {
+      status: response.status,
+      ok: response.ok,
+      body: body,
+    };
+  }
+
+  async deleteScore(username, password, scoreId) {
+    const response = await fetch(`${this.baseUrl}${this.urlTail}/${scoreId}`, {
+      method: "DELETE",
+      headers: {
+        "X-Username": username,
+        "X-Password": password,
+      },
+    });
+    let body = null;
+    try {
+      body = await response.json();
+    } catch {
+      console.error("Error in deleteScore");
+    }
+
+    return {
+      status: response.status,
+      ok: response.ok,
+      body: body,
+    };
+  }
+}
+
+window.ScoreService = ScoreService;

assets/src/service/user-service.js

@@ -0,0 +1,77 @@
+class UserService {
+  constructor(config) {
+    this.baseUrl = config.API_BASE_URL;
+    this.urlTail = "user";
+  }
+
+  async getUser(username, password) {
+    const response = await fetch(`${this.baseUrl}${this.urlTail}`, {
+      method: "GET",
+      headers: {
+        "X-Username": username,
+        "X-Password": password,
+      },
+    });
+    let body = null;
+    try {
+      body = await response.json();
+    } catch {
+      console.error("Error in getUser");
+    }
+
+    return {
+      status: response.status,
+      ok: response.ok,
+      body: body,
+    };
+  }
+
+  async deleteUser(username, password) {
+    const response = await fetch(`${this.baseUrl}${this.urlTail}`, {
+      method: "DELETE",
+      headers: {
+        "X-Username": username,
+        "X-Password": password,
+      },
+    });
+    let body = null;
+    try {
+      body = await response.json();
+    } catch {
+      console.error("Error in deleteUser");
+    }
+
+    return {
+      status: response.status,
+      ok: response.ok,
+      body: body,
+    };
+  }
+
+  async postUser(username) {
+    const response = await fetch(`${this.baseUrl}${this.urlTail}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        username: username,
+      }),
+    });
+
+    let body = null;
+    try {
+      body = await response.json();
+    } catch {
+      console.error("Error in postUser");
+    }
+
+    return {
+      status: response.status,
+      ok: response.ok,
+      body: body,
+    };
+  }
+}
+
+window.UserService = UserService;

assets/src/sites/exampleAPI.js

@@ -0,0 +1,122 @@
+const userService = new UserService(config);
+const scoreService = new ScoreService(config);
+const leaderboardService = new LeaderboardService(config);
+
+document.addEventListener("DOMContentLoaded", () => {
+  const usernameForm = document.getElementById("usernameForm");
+  const loginForm = document.getElementById("loginForm");
+
+  const postFormScore = document.getElementById("postScoreForm");
+  const getScoreForm = document.getElementById("getScoreForm");
+  const deleteScoreForm = document.getElementById("deleteScoreForm");
+  const getLeaderboardForm = document.getElementById("getLeaderboardForm");
+
+  usernameForm.addEventListener("submit", handleUsernameSubmit);
+  loginForm.addEventListener("submit", handleLoginSubmit);
+  postFormScore.addEventListener("submit", handlePostScoreSubmit);
+  getScoreForm.addEventListener("submit", handleGetScoreSubmit);
+  deleteScoreForm.addEventListener("submit", handleDeleteScoreSubmit);
+  getLeaderboardForm.addEventListener("submit", handleGetLeaderboardSubmit);
+});
+
+async function handleUsernameSubmit(event) {
+  event.preventDefault();
+
+  const username = document.getElementById("desiredUsername").value;
+
+  console.log("Username form submitted:", username);
+
+  const result = userService.postUser(username);
+  console.log("API response:", result);
+}
+
+async function handleLoginSubmit(event) {
+  event.preventDefault();
+
+  const username = document.getElementById("username").value;
+  const password = document.getElementById("password").value;
+
+  console.log("Login form submitted:", username, password);
+
+  const result = await userService.getUser(username, password);
+  console.log("API response:", result);
+}
+
+async function handleDeleteUserSubmit(event) {
+  event.preventDefault();
+
+  const username = document.getElementById("username").value;
+  const password = document.getElementById("password").value;
+
+  console.log("Delete User form submitted:", username, password);
+
+  const result = await userService.deleteUser(username, password);
+  console.log("API response:", result);
+}
+
+async function handlePostScoreSubmit(event) {
+  event.preventDefault();
+
+  const username = document.getElementById("username").value;
+  const password = document.getElementById("password").value;
+  const score = document.getElementById("score").value;
+  const time = document.getElementById("time").value;
+  const text = document.getElementById("text").value;
+  const userWrittenText = document.getElementById("userWrittenText").value;
+
+  console.log(
+    "Post Score form submitted:",
+    username,
+    password,
+    score,
+    time,
+    text,
+    userWrittenText,
+  );
+
+  const result = await scoreService.postScore(
+    username,
+    password,
+    score,
+    time,
+    text,
+    userWrittenText,
+  );
+  console.log("API response:", result);
+}
+
+async function handleGetScoreSubmit(event) {
+  event.preventDefault();
+
+  const username = document.getElementById("scoreUsername").value;
+
+  console.log("Get Score form submitted:", username);
+
+  const result = await scoreService.getScoreByName(username);
+  console.log("API response:", result);
+}
+
+async function handleDeleteScoreSubmit(event) {
+  event.preventDefault();
+
+  const username = document.getElementById("username").value;
+  const password = document.getElementById("password").value;
+  const scoreId = document.getElementById("scoreId").value;
+
+  console.log("Delete Score form submitted:", username, password, scoreId);
+
+  const result = await scoreService.deleteScore(username, password, scoreId);
+  console.log("API response:", result);
+}
+
+async function handleGetLeaderboardSubmit(event) {
+  event.preventDefault();
+
+  const offset = document.getElementById("offset").value;
+  const limit = document.getElementById("limit").value;
+
+  console.log("Get Leaderboard form submitted:", offset, limit);
+
+  const result = await leaderboardService.getLeaderboard(offset, limit);
+  console.log("API response:", result);
+}

exampleAPI.html

@@ -0,0 +1,310 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <title>My Web Page</title>
+    <meta charset="UTF-8" />
+    <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="bg-light">
+    <div class="container mt-5">
+      <div class="row">
+        <!-- AuthForm-->
+        <div class="col-md-12">
+          <div class="card p-4 shadow-sm">
+            <h4 class="mb-3">Login Form</h4>
+
+            <form id="loginForm">
+              <div class="mb-3">
+                <label
+                  for="username"
+                  class="form-label"
+                  >Username</label
+                >
+                <input
+                  type="text"
+                  class="form-control"
+                  id="username"
+                  placeholder="Enter username"
+                />
+              </div>
+
+              <div class="mb-3">
+                <label
+                  for="password"
+                  class="form-label"
+                  >Password</label
+                >
+                <input
+                  type="password"
+                  class="form-control"
+                  id="password"
+                  placeholder="Enter password"
+                />
+              </div>
+
+              <button
+                type="submit"
+                class="btn btn-success"
+              >
+                Login
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- User Endpoint -->
+    <div class="container mt-5">
+      <h2 class="text-center mb-4">User endpoint</h2>
+      <div class="row">
+          <!-- Post User -->
+          <div class="col-md-6">
+            <div class="card p-4 shadow-sm">
+              <h4 class="mb-3">Username Form</h4>
+
+              <form id="usernameForm">
+                <div class="mb-3">
+                  <label
+                    for="desiredUsername"
+                    class="form-label"
+                    >Username</label
+                  >
+                  <input
+                    type="text"
+                    class="form-control"
+                    id="desiredUsername"
+                    placeholder="Enter username"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  class="btn btn-primary"
+                >
+                  Submit
+                </button>
+              </form>
+            </div>
+          </div>
+
+          <!-- Delete User -->
+          <div class="col-md-6">
+            <div class="card p-4 shadow-sm">
+              <h4 class="mb-3">Delete User</h4>
+
+                <button
+                  class="btn btn-danger"
+                  onclick="handleDeleteUserSubmit(event)"
+                >
+                  Delete User
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+    </div>
+
+    <!-- Score Endpoint -->
+    <div class="container mt-5">
+      <h2 class="text-center mb-4">Score endpoint</h2>
+      <div class="row">
+          <!-- Post Score -->
+          <div class="col-md-4">
+            <div class="card p-4 shadow-sm">
+              <h4 class="mb-3">Post Score</h4>
+
+              <form id="postScoreForm">
+                <div class="mb-3">
+                  <label
+                    for="score"
+                    class="form-label"
+                    >Score</label
+                  >
+                  <input
+                    type="number"
+                    class="form-control"
+                    id="score"
+                    placeholder="Enter score"
+                  />
+                </div>
+
+                <div class="mb-3">
+                  <label
+                    for="time"
+                    class="form-label"
+                    >Time</label
+                  >
+                  <input
+                    type="number"
+                    class="form-control"
+                    id="time"
+                    placeholder="Enter time"
+                  />
+                </div>
+
+                <div class="mb-3">
+                  <label
+                    for="text"
+                    class="form-label"
+                    >Text</label
+                  >
+                  <input
+                    type="text"
+                    class="form-control"
+                    id="text"
+                    placeholder="Enter text"
+                  />
+                </div>
+
+                <div class="mb-3">
+                  <label
+                    for="userWrittenText"
+                    class="form-label"
+                    >User Written Text</label
+                  >
+                  <input
+                    type="text"
+                    class="form-control"
+                    id="userWrittenText"
+                    placeholder="Enter text"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  class="btn btn-primary"
+                >
+                  Submit
+                </button>
+              </form>
+            </div>
+          </div>
+
+          <!-- Get Score -->
+          <div class="col-md-4">
+            <div class="card p-4 shadow-sm">
+              <h4 class="mb-3">Get Score</h4>
+
+              <form id="getScoreForm">
+                <div class="mb-3">
+                  <label
+                    for="scoreUsername"
+                    class="form-label"
+                    >Score Username</label
+                  >
+                  <input
+                    type="text"
+                    class="form-control"
+                    id="scoreUsername"
+                    placeholder="Enter score username"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  class="btn btn-primary"
+                >
+                  Get Score
+                </button>
+              </form>
+            </div>
+          </div>
+
+          <!-- Delete Score -->
+          <div class="col-md-4">
+            <div class="card p-4 shadow-sm">
+              <h4 class="mb-3">Delete Score</h4>
+
+              <form id="deleteScoreForm">
+                <div class="mb-3">
+                  <label
+                    for="scoreId"
+                    class="form-label"
+                    >ScoreId</label
+                  >
+                  <input
+                    type="number"
+                    class="form-control"
+                    id="scoreId"
+                    placeholder="Enter score ID"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  class="btn btn-danger"
+                >
+                  Delete Score
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+    </div>
+
+    <!-- Leaderboard Endpoint -->
+    <div class="container mt-5">
+      <h2 class="text-center mb-4">Leaderboard endpoint</h2>
+      <div class="row">
+          <!-- Get Leaderboard -->
+          <div class="col-md-12">
+            <div class="card p-4 shadow-sm">
+              <h4 class="mb-3">Get Leaderboard</h4>
+
+              <form id="getLeaderboardForm">
+                <div class="mb-3">
+                  <label
+                    for="offset"
+                    class="form-label"
+                    >Offset</label
+                  >
+                  <input
+                    type="number"
+                    class="form-control"
+                    id="offset"
+                    placeholder="Enter offset"
+                  />
+                </div>
+
+                <div class="mb-3">
+                  <label
+                    for="limit"
+                    class="form-label"
+                    >Limit</label
+                  >
+                  <input
+                    type="number"
+                    class="form-control"
+                    id="limit"
+                    placeholder="Enter Limit for Leaderboard"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  class="btn btn-primary"
+                >
+                  Get Leaderboard
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+    </div>
+
+    <script src="assets/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.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/config-service.js"></script>
+    <script src="assets/src/sites/exampleAPI.js"></script>
+  </body>
+</html>

index.html

@@ -1,21 +1,129 @@
 <!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>
+    <!-- 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>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="index.html" 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>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" id="nav-login">Login / Registrieren</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <div id="page-wrapper">
+        <!-- Sidebar -->
+         <nav id="sidebar" class="bg-dark text-white p-3">
+            <h3 class="text-center">Navigation</h3>
+            <ul class="nav flex-column">
+                <li class="nav-item">
+                    <a class="nav-link text-white" href="#" id="nav-home">Home</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link text-white" href="#" id="nav-play">Spiel Starten</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link text-white" href="#" id="nav-my-scores">Meine Scores</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link text-white" href="#" id="nav-leaderboard">Leaderboard</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link text-white" href="#" id="nav-login">Login / Registrieren</a>
+                </li>
+            </ul>
+        </nav>
 
-    <button class="btn btn-primary">Primary Button</button>
-  <button class="btn btn-secondary" onclick="exampleLog()">Secondary Button</button>
+        <!--Main Area -->
+        <div id="main-area">
+            <!--Topbar-->
+            <header id="topbar">
+                <h1 class="text-center mb-4">Dashboard</h1>
+                <div class="user-info">
+                    <span>Guest</span>
+                </div>
+            </header>
 
+            <!-- Content -->
+            <main class="container mt-4" id="main-content">
+                <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>
+                </div>    
+            </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 zum Navigieren zwischen Seiten -->
+     <script>
+        const mainContent = document.getElementById('main-content');
+        document.getElementById('nav-home').addEventListener('click', () => {
+            mainContent.innerHTML = `
+                <h1>Willkommen beim Lorem Ipsum Game</h1>
+                <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>
+                <h2> Wähle eine Option aus der Navigation, um zu starten.</h2>
+            `;
+        });
+        document.getElementById('nav-play').addEventListener('click', () => {
+            mainContent.innerHTML = `
+                <h2 class="mb-3">Spiel Starten</h2>
+                <p class="mt-2">Hier kannst du das Spiel starten. Viel Erfolg!</p>
+                <!-- Hier könnte der eigentliche Spielinhalt eingebunden werden -->
+            `;
+        });
+
+        document.getElementById('nav-my-scores').addEventListener('click', () => {
+            mainContent.innerHTML = `
+                <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 -->
+            `;
+        });
+        document.getElementById('nav-leaderboard').addEventListener('click', () => {
+            mainContent.innerHTML = `
+                <h2 class="mb-3">Leaderboard</h2>
+                <p class="mt-2">Hier kannst du die besten Spieler und ihre Scores sehen.</p>
+                <!-- Hier könnte eine Leaderboard-Tabelle eingebunden werden -->
+            `;
+        });
+        document.getElementById('nav-login').addEventListener('click', () => {
+            mainContent.innerHTML = `
+                <h2 class="mb-3">Login / Registrieren</h2>
+                <p class="mt-2">Hier kannst du dich einloggen oder registrieren, um deine Scores zu speichern.</p>
+                <!-- Hier könnte ein Login-Formular eingebunden werden -->
+            `;
+        });
+    </script>
 </body>
 </html>