Dark/light mode + button ,prvni text
This commit is contained in:
parent
62990f45c9
commit
11256f1eaa
BIN
.script.js.kate-swp
Normal file
BIN
.script.js.kate-swp
Normal file
Binary file not shown.
43
index.html
43
index.html
@ -1,19 +1,22 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="cs">
|
<html lang="cs">
|
||||||
<!-- Lukáš Kaňka -->
|
<!-- Lukáš Kaňka -->
|
||||||
<!-- lukas.kanka@outlook.cz -->
|
<!-- lukas.kanka@outlook.cz -->
|
||||||
<!-- Discord: Lukáš K. -->
|
<!-- Discord: Lukáš K. -->
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="stylesheet" href="style.css" />
|
<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>
|
<title>Project 2</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<!-- Terminal - logo (Terminal) -->
|
<!-- Terminal - logo (Terminal) -->
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
@ -37,16 +40,32 @@
|
|||||||
<!-- <i class="fa-solid fa-xmark"></i> -->
|
<!-- <i class="fa-solid fa-xmark"></i> -->
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<hr>
|
<hr />
|
||||||
|
<button id="toggleButton">Dark/Light mode</button>
|
||||||
|
|
||||||
<!-- Sekce 1 -->
|
<!-- Sekce 1 -->
|
||||||
<section class="section1">
|
<section class="section1">
|
||||||
<section class="welcome">
|
<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>
|
</section>
|
||||||
<footer>Copyright © <a href="https://git.archoslinux.cz/kankys" target="_blank">Lukáš Kaňka</a> 2024
|
<footer>
|
||||||
|
Copyright ©
|
||||||
|
<a href="https://git.archoslinux.cz/kankys" target="_blank"
|
||||||
|
>Lukáš Kaňka</a
|
||||||
|
>
|
||||||
|
2024
|
||||||
</footer>
|
</footer>
|
||||||
</section>
|
</section>
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
35
script.js
35
script.js
@ -26,11 +26,27 @@ const nav = document.querySelector(".navigation");
|
|||||||
const h1 = document.querySelector("h1");
|
const h1 = document.querySelector("h1");
|
||||||
const h3 = document.querySelector("h3");
|
const h3 = document.querySelector("h3");
|
||||||
const p = document.querySelector("p");
|
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";
|
body.style.backgroundColor = "black";
|
||||||
logo.style.backgroundColor = "white";
|
logo.style.backgroundColor = "white";
|
||||||
link.style.color = "white";
|
link.style.color = "white";
|
||||||
@ -38,8 +54,13 @@ if (mode === "dark") {
|
|||||||
link2.style.color = "white";
|
link2.style.color = "white";
|
||||||
nav.style.backgroundColor = "black";
|
nav.style.backgroundColor = "black";
|
||||||
h1.style.color = "white";
|
h1.style.color = "white";
|
||||||
h3.style.color = "white";
|
h3.style.color = "yellow";
|
||||||
p.style.color = "yellow";
|
p.style.color = "white";
|
||||||
footer.style.backgroundColor = "white";
|
}
|
||||||
} else {
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
body {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
}
|
||||||
/* Terminal ( header) */
|
/* Terminal ( header) */
|
||||||
|
|
||||||
header {
|
header {
|
||||||
@ -56,10 +60,24 @@ nav li a {
|
|||||||
.menu-icon {
|
.menu-icon {
|
||||||
display: none;
|
display: none;
|
||||||
margin-right: 30px;
|
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*/
|
/*Header small display*/
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
|
body {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
@ -73,7 +91,6 @@ nav li a {
|
|||||||
|
|
||||||
.menu-icon {
|
.menu-icon {
|
||||||
display: block;
|
display: block;
|
||||||
/*color: var(--special-white);*/
|
|
||||||
font-size: 23px;
|
font-size: 23px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -101,6 +118,7 @@ footer {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
margin-left: 25px;
|
margin-left: 25px;
|
||||||
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer a {
|
footer a {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user