From fa0bcf0af85671015d1e945f928599016c412792 Mon Sep 17 00:00:00 2001
From: DST81 <danielastuder81@bluewin.ch>
Date: Sun, 8 Mar 2026 23:12:45 +0100
Subject: [PATCH] Erste Schritte der Navigation implementiert

---
 assets/css/custom.css | 158 ++++++++++++++++++++++++++++++++++--------
 index.html            | 140 ++++++++++++++++++++++++++++++-------
 2 files changed, 244 insertions(+), 54 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index 5e6ecc5..8316967 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,56 +1,154 @@
 
 body {
-    background: white;
-    color: black;
+    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;
 }
-p.image {
-    text-align: center;
+
+/* Navigation Styles */
+.navbar {
+    background: linear-gradient(90deg, #1b1b2f, #4a6fa5)
 }
-.container {
-    display: flex;
+.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;
-    background-color: dodgerblue;
-}
-.container div {
-    background-color:#f1f1f1;
-    margin: 10px;
+    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;
-    color: black;
     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;
+}
 
-@media (min-width: 768px) {
-    body {
-        background-color: steelblue;
-        color: white;
-        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    }
-    .container div {
+/* 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 {
-        background-color: darkblue;
-        color: white;
-        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        font-size: 1.1rem;
     }
-    p {
+    .container div {
+        flex: 1 1 calc(25% - 40px);
+    }
+    p.columns{
         column-count: 2;
         column-gap: 2rem;
     }
-    p.dotted {
-        column-gap: 2rem;
-        column-rule: 5px dotted black;
-        outline-style: dotted;
-    } 
-    .container div {
-        flex: 1 1 calc(25% - 20px);
+    #sidebar .nav-link {
+        flex: 0 0 auto;
+        margin: 0 15px;
     }
 
 }
diff --git a/index.html b/index.html
index b091372..c47bfa9 100644
--- a/index.html
+++ b/index.html
@@ -1,37 +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>
-    <p class="dotted" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-    <p class="image"><img src="https://cdn.pixabay.com/photo/2020/04/05/13/22/lorem-5006124_1280.jpg" alt="Lorem ipsum Blumen" width="200px"></p>
-    <div class="container">
-        <div>Item 1</div>
-        <div>Item 2</div>
-        <div>Item 3</div>
-        <div>Item 4</div>
+    <!-- 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>
+
+        <!--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>
-    <a href="index.html">Go to Main Page</a>
-    <a href="secondSite.html">Go to Second Page</a>
-    <br />
-
-    <button class="btn btn-primary">Primary Button</button>
-    <button class="btn btn-secondary" onclick="exampleLog()">Secondary Button</button>
-    <button class="btn btn-success">Success Button</button>
-    <button class="btn btn-danger">Danger Button</button>
-    <button class="btn btn-warning">Warning Button</button>
-    <button class="btn btn-info">Info Button</button>
-    <button class="btn btn-light">Light Button</button>
-    <button class="btn btn-dark">Dark Button</button>
-    <button class="btn btn-link">Link Button</button>
 
+    <!-- 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>
\ No newline at end of file