Dark/light mode + button ,prvni text
This commit is contained in:
parent
62990f45c9
commit
11256f1eaa
Binary file not shown.
105
index.html
105
index.html
|
|
@ -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 ©
|
||||
<a href="https://git.archoslinux.cz/kankys" target="_blank"
|
||||
>Lukáš Kaňka</a
|
||||
>
|
||||
2024
|
||||
</footer>
|
||||
</section>
|
||||
<footer>Copyright © <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>
|
||||
|
|
|
|||
49
script.js
49
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);
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
20
style.css
20
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue