From 11256f1eaaaf1f42895fa720a65264acb25b9953 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Ka=C5=88ka?= Date: Sun, 24 Mar 2024 00:58:20 +0100 Subject: [PATCH] Dark/light mode + button ,prvni text --- .script.js.kate-swp | Bin 0 -> 837 bytes index.html | 105 ++++++++++++++++++++++++++------------------ script.js | 49 +++++++++++++++------ style.css | 20 ++++++++- 4 files changed, 116 insertions(+), 58 deletions(-) create mode 100644 .script.js.kate-swp diff --git a/.script.js.kate-swp b/.script.js.kate-swp new file mode 100644 index 0000000000000000000000000000000000000000..d3ef9824ac096c6852f4c9f0048856fe70e2d078 GIT binary patch literal 837 zcmb8s&1%9x6b0akiN?gA6cM^jUG+yoDRk5Q2qJXhP`VZgr4UTP&_07M-S?f^*XRp$ z+j|1jld2RIBJ)k|y*ZO8rFxTDk;dk2_7abtvoyX*u9Z^#_5IiB$b5e!#b)z*_SuWx zZ&&6~?p(^{=yG`_OQp?N{)bq~&$-h^o2jgRceV-!w%kGaV5j)M-Z^KL-8o&uv<0WZ zE{XCQDZ(Lal#&^}clZyy78wXb5(f`R c9IZ(OV literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 852fa99..b1503ea 100644 --- a/index.html +++ b/index.html @@ -1,52 +1,71 @@ - - - + + + - - - - + + + + - - Project 2 - + + Project 2 + - -
- - + +
+ + - - + + -
- - - - -
-
-
- -
-
-

Vítám tě na Terminalu, webu věnovanému Terminalům a aplikacim v Terminalu.

+
+ + + + +
+
+
+ + + +
+
+

+ Vítám tě na Terminalu, webu věnovanému Terminalům a aplikacim v + Terminalu. +

+

+ 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. +

+

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 Zellij nebo Tmux.

+
+
- - - - - + + diff --git a/script.js b/script.js index a6716d8..93afbaf 100644 --- a/script.js +++ b/script.js @@ -26,20 +26,41 @@ 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") { - body.style.backgroundColor = "black"; - logo.style.backgroundColor = "white"; - link.style.color = "white"; - link1.style.color = "white"; - 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 { +// 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"; + link1.style.color = "white"; + link2.style.color = "white"; + nav.style.backgroundColor = "black"; + h1.style.color = "white"; + 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); + + + diff --git a/style.css b/style.css index 80748ad..dbf4960 100644 --- a/style.css +++ b/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 {