Dark/light mode + button ,prvni text

This commit is contained in:
Lukáš Kaňka 2024-03-24 00:58:20 +01:00
parent 62990f45c9
commit 11256f1eaa
4 changed files with 116 additions and 58 deletions

BIN
.script.js.kate-swp Normal file

Binary file not shown.

View File

@ -1,52 +1,71 @@
<!DOCTYPE html>
<html lang="cs">
<!-- Lukáš Kaňka -->
<!-- lukas.kanka@outlook.cz -->
<!-- Discord: Lukáš K. -->
<!-- Lukáš Kaňka -->
<!-- lukas.kanka@outlook.cz -->
<!-- Discord: Lukáš K. -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<head>
<meta charset="UTF-8" />
<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>
<title>Project 2</title>
</head>
<script
src="https://kit.fontawesome.com/0a43c6cd1f.js"
crossorigin="anonymous"
></script>
<title>Project 2</title>
</head>
<body>
<header>
<!-- Terminal - logo (Terminal) -->
<div class="logo">
<img class="picture" src="img/terminal.png" alt="" />
<h1 class="title">Terminal</h1>
</div>
<body>
<header>
<!-- Terminal - logo (Terminal) -->
<div class="logo">
<img class="picture" src="img/terminal.png" alt="" />
<h1 class="title">Terminal</h1>
</div>
<!-- Terminal - navigation -->
<nav class="navigation">
<ul>
<li><a class="link" href="">Domů</a></li>
<li><a class="link1" href="">O nás</a></li>
<li><a class="link2" href="">Kontakt</a></li>
</ul>
</nav>
<!-- Terminal - navigation -->
<nav class="navigation">
<ul>
<li><a class="link" href="">Domů</a></li>
<li><a class="link1" href="">O nás</a></li>
<li><a class="link2" href="">Kontakt</a></li>
</ul>
</nav>
<div class="menu-icon">
<!-- Ikona hamburger -->
<i class="fa-solid fa-bars"></i>
<!-- Ikona cross -->
<!-- <i class="fa-solid fa-xmark"></i> -->
</div>
</header>
<hr>
<!-- 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>
<div class="menu-icon">
<!-- Ikona hamburger -->
<i class="fa-solid fa-bars"></i>
<!-- Ikona cross -->
<!-- <i class="fa-solid fa-xmark"></i> -->
</div>
</header>
<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>
<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>
</section>
<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>
<script src="script.js"></script>
</body>
</html>

View File

@ -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);

View File

@ -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 {