Dark/light mode + button ,prvni text

index.html

@@ -9,7 +9,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
 
-  <script src="https://kit.fontawesome.com/0a43c6cd1f.js" crossorigin="anonymous"></script>
+    <script
+      src="https://kit.fontawesome.com/0a43c6cd1f.js"
+      crossorigin="anonymous"
+    ></script>
     <title>Project 2</title>
   </head>
 
@@ -37,16 +40,32 @@
         <!-- <i class="fa-solid fa-xmark"></i> -->
       </div>
     </header>
-  <hr>
+    <hr />
+    <button id="toggleButton">Dark/Light mode</button>
+
     <!--  Sekce 1 -->
     <section class="section1">
       <section class="welcome">
-      <h3>Vítám tě na Terminalu, webu věnovanému Terminalům a aplikacim v Terminalu. </h3>
+        <h3>
+          Vítám tě na Terminalu, webu věnovanému Terminalům a aplikacim v
+          Terminalu.
+        </h3>
+        <p>
+          Tento projekt je věnován Terminálum hlavně na systémech Linux a MacOS.
+          Najdeš tu všechny možné terminály a multiplexory co si můžeš
+          naistalovat do svého OS, aplikace pro terminály, rady a tipy pro
+          terminály.
+        </p>
+	<p>Terminály nejsou jen pro programátory a správce sítí, pracovat nebo objevat kouzlo terminálů může každý a brzy zjistí že to není nic čeho se bát. Díky Terminálům můžeš monitorovat systém, automatizovat opakující se činnosti, editovat textové soubory, nastavovat svůj OS, programovat, hrát hry a sposty dalšího. To vš zvládneš v jednom Terminálu na jednou s nainatalovaným multiplexrem jako je <a href="https://zellij.dev/" target="_blank">Zellij</a> nebo <a href="https://github.com/tmux/tmux/wiki" target="_blank">Tmux</a>.</p>
       </section>
-    <footer>Copyright &copy; <a href="https://git.archoslinux.cz/kankys" target="_blank">Lukáš Kaňka</a> 2024
+      <footer>
+        Copyright &copy;
+        <a href="https://git.archoslinux.cz/kankys" target="_blank"
+          >Lukáš Kaňka</a
+        >
+        2024
       </footer>
     </section>
     <script src="script.js"></script>
   </body>
-
 </html>

script.js

@@ -26,11 +26,27 @@ const nav = document.querySelector(".navigation");
 const h1 = document.querySelector("h1");
 const h3 = document.querySelector("h3");
 const p = document.querySelector("p");
-//const footer = document.querySelector(".footer");
 
-const mode = prompt("Chcete dark mode nebo light mode? dark / light");
 
-if (mode === "dark") {
+// Funkce pro přepnutí módu
+function toggleMode() {
+  if (body.classList.contains("dark-mode")) {
+    // Pokud je momentálně dark mode, změň na light mode
+    body.classList.remove("dark-mode")
+    body.classList.add("light-mode");
+    body.style.backgroundColor = "white";
+    //logo.style.backgroundColor = "black";
+    link.style.color = "black";
+    link1.style.color = "black";
+    link2.style.color = "black";
+    nav.style.backgroundColor = "white";
+    h1.style.color = "black";
+    h3.style.color = "black";
+    p.style.color = "black";
+  } else {
+    // Pokud je momentálně light mode, změň na dark mode
+    body.classList.remove("light-mode")
+    body.classList.add("dark-mode");
     body.style.backgroundColor = "black";
     logo.style.backgroundColor = "white";
     link.style.color = "white";
@@ -38,8 +54,13 @@ if (mode === "dark") {
     link2.style.color = "white";
     nav.style.backgroundColor = "black";
     h1.style.color = "white";
-  h3.style.color = "white";
-  p.style.color = "yellow";
-  footer.style.backgroundColor = "white";
-} else {
+    h3.style.color = "yellow";
+    p.style.color = "white";
   }
+}
+
+// Tlačítko pro přepnutí módu dark a light mode
+document.getElementById("toggleButton").addEventListener("click", toggleMode);
+
+
+

style.css

@@ -8,7 +8,11 @@
 
   box-sizing: border-box;
 }
+body {
+	  max-width: 1200px;
+	  margin: 0 auto;
 
+}
 /* Terminal ( header) */
 
 header {
@@ -56,10 +60,24 @@ nav li a {
 .menu-icon {
   display: none;
   margin-right: 30px;
+background-color: white;
 }
 
+/*Dark/Light mode button*/
+#toggleButton {
+float: right;
+margin-right: 30px;
+margin-top: 10px;
+background-color: red;
+}
+
+
 /*Header small display*/
 @media (max-width: 600px) {
+	body {
+padding: 10px;
+	}
+
   header {
     position: relative;
   }
@@ -73,7 +91,6 @@ nav li a {
 
   .menu-icon {
     display: block;
-    /*color: var(--special-white);*/
     font-size: 23px;
   }
 
@@ -101,6 +118,7 @@ footer {
   bottom: 0;
   margin-bottom: 10px;
   margin-left: 25px;
+  background-color: white;
  }
 
 footer a {