From 395abab1c4e07684bbabb2db777632b4114a4cc5 Mon Sep 17 00:00:00 2001
From: akmaily <anna.theimann@outlook.de>
Date: Tue, 18 Jun 2024 17:57:17 +0200
Subject: [PATCH] Mobile Version

---
 index.html |  1 +
 script.js  | 68 ++++++++++++++++++++++-------------------
 styles.css | 90 +++++++++++++++++++++++++++++++++++++++++++-----------
 3 files changed, 110 insertions(+), 49 deletions(-)
diff --git a/index.html b/index.html
index aadc850..1540077 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
 </head>
 
 <body>
+    <button class="menu-button">Menu</button>
     <div class="navbar" id="navbar">
         <ul class="navbar-links">
             <li>
diff --git a/script.js b/script.js
index e8bf021..6cb1769 100644
--- a/script.js
+++ b/script.js
@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
     const checklistItems = document.querySelectorAll('.checklist li');
 
     // Initialisiere die Checkliste basierend auf dem gespeicherten Zustand
@@ -15,8 +15,8 @@ document.addEventListener('DOMContentLoaded', function() {
     // Füge Klick-Event für Checkliste hinzu
     checklistItems.forEach(item => {
         const checkbox = item.querySelector('input[type="checkbox"]');
-        
-        checkbox.addEventListener('change', function() {
+
+        checkbox.addEventListener('change', function () {
             if (this.checked) {
                 item.classList.add('completed');
                 localStorage.setItem(checkbox.id, 'true');
@@ -28,23 +28,29 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 });
 
-// script.js
+document.addEventListener("DOMContentLoaded", function () {
+    var menuButton = document.querySelector(".menu-button");
+    var navbar = document.querySelector(".navbar");
+
+    menuButton.addEventListener("click", function () {
+        navbar.classList.toggle("active");
+
+    });
+});
+
+
+
 
 // script.js
 
 // Funktion zur Steuerung des Burgermenüs
-document.addEventListener("DOMContentLoaded", function() {
-    const burgerIcon = document.getElementById("burger-icon");
+document.addEventListener("DOMContentLoaded", function () {
     const navbar = document.getElementById("navbar");
     const navbarLinks = document.getElementById("navbar-links");
 
-    burgerIcon.addEventListener("click", function() {
-        navbar.classList.toggle("active");
-    });
-
     // Schließe das Burgermenü, wenn auf einen Link geklickt wird
     navbarLinks.querySelectorAll("a").forEach(link => {
-        link.addEventListener("click", function() {
+        link.addEventListener("click", function () {
             navbar.classList.remove("active");
         });
     });
@@ -53,24 +59,24 @@ document.addEventListener("DOMContentLoaded", function() {
 
 
 function copyToClipboard(index) {
-        const codeboxes = document.querySelectorAll('.codebox pre');
-        const code = codeboxes[index].textContent.trim();
-
-        navigator.clipboard.writeText(code)
-            .then(() => {
-                showCopyMessage(index);
-            })
-            .catch(err => {
-                console.error('Fehler beim Kopieren: ', err);
-            });
-    }
-
-    function showCopyMessage(index) {
-        const copyMessages = document.querySelectorAll('.copy-message');
-        copyMessages[index].style.display = 'inline-block';
-
-        setTimeout(() => {
-            copyMessages[index].style.display = 'none';
-        }, 2000);
-    }
+    const codeboxes = document.querySelectorAll('.codebox pre');
+    const code = codeboxes[index].textContent.trim();
+
+    navigator.clipboard.writeText(code)
+        .then(() => {
+            showCopyMessage(index);
+        })
+        .catch(err => {
+            console.error('Fehler beim Kopieren: ', err);
+        });
+}
+
+function showCopyMessage(index) {
+    const copyMessages = document.querySelectorAll('.copy-message');
+    copyMessages[index].style.display = 'inline-block';
+
+    setTimeout(() => {
+        copyMessages[index].style.display = 'none';
+    }, 2000);
+}
 
diff --git a/styles.css b/styles.css
index cc460f7..39defdf 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,4 @@
+/* Basis-Stile */
 body {
     font-family: Arial, sans-serif;
     line-height: 1.6;
@@ -5,9 +6,11 @@ body {
     max-width: 800px;
     padding: 20px;
     background-color: #000000;
-    /* Dunkle Sonnenuntergangsfarbe für den Hintergrund */
     color: #FFFFFF;
-    /* Weiße Textfarbe */
+}
+
+.content {
+    margin: 20px;
 }
 
 .infobox {
@@ -22,15 +25,14 @@ body {
 
 .nebeninfo {
     background-color: rgb(0, 68, 2);
-    /* Rote Sonnenuntergangsfarbe für Infoboxen */
+    /* Grüne Farbe für Nebeninfo */
     padding: 10px;
     margin-bottom: 15px;
     border: 1px solid green;
-    /* Etwas dunklere Rote Farbe für den Rahmen */
+    /* Etwas dunklere Grüne Farbe für den Rahmen */
     border-radius: 10px;
 }
 
-
 /* Stil für Codeboxen */
 .codebox {
     position: relative;
@@ -201,26 +203,31 @@ body {
     text-decoration: underline;
 }
 
-/* styles.css */
-/* styles.css */
-
+/* Navigation Bar */
+/* Navigation Bar */
 .navbar {
-    background-color: #f0f0f0;
+    background-color: #333;
     position: fixed;
-    left: 0;
     top: 0;
-    height: 100%;
+    left: 0;
     width: 250px;
-    /* Breite der Navigationsleiste */
+    height: 100%;
     overflow-x: hidden;
-    transition: 0.5s;
+    transition: transform 0.3s ease;
     z-index: 1000;
+    transform: translateX(-100%);
+}
+
+.navbar.active {
+    transform: translateX(0);
 }
 
 .navbar-links {
     list-style-type: none;
-    padding: 20px 0;
+    padding: 0;
     margin: 0;
+    margin-top: 60px;
+    /* Platz für den Menü-Button */
 }
 
 .navbar-links li {
@@ -230,12 +237,13 @@ body {
 .navbar-links a {
     display: block;
     text-decoration: none;
-    color: #333;
+    color: white;
+    /* Weiße Textfarbe für Links */
     transition: background-color 0.3s;
 }
 
 .navbar-links a:hover {
-    background-color: #ddd;
+    background-color: #575757;
 }
 
 .sub-links {
@@ -253,9 +261,55 @@ body {
 }
 
 .sub-links a {
-    color: #666;
+    color: #CCCCCC;
 }
 
 .sub-links a:hover {
-    color: #444;
+    color: #AAAAAA;
+}
+
+.menu-button {
+    position: fixed;
+    top: 15px;
+    left: 15px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 3px;
+    z-index: 1100;
+}
+
+.menu-button:hover {
+    background-color: #45a049;
+}
+
+.menu-button.hidden {
+    display: none;
+}
+
+
+/* Media Queries */
+@media (max-width: 768px) {
+    .navbar {
+        width: 100%;
+        height: auto;
+        position: relative;
+    }
+
+    .navbar-links {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .navbar-links li {
+        text-align: center;
+    }
+
+    body {
+        padding-top: 60px;
+        /* Platz für die Menüschaltfläche */
+    }
 }
\ No newline at end of file
