2024-03-22 21:19:38 +00:00
|
|
|
//Nastavení Header menu
|
|
|
|
const menuIcon = document.querySelector(".menu-icon");
|
|
|
|
const menuList = document.querySelector("nav");
|
|
|
|
const hamburgerIcon = document.querySelector(".fa-solid");
|
|
|
|
|
|
|
|
menuIcon.addEventListener("click", () => {
|
|
|
|
if (hamburgerIcon.classList[1] === "fa-bars") {
|
|
|
|
hamburgerIcon.classList.add("fa-xmark");
|
|
|
|
hamburgerIcon.classList.remove("fa-bars");
|
|
|
|
menuList.style.display = "block";
|
|
|
|
} else {
|
|
|
|
hamburgerIcon.classList.add("fa-bars");
|
|
|
|
hamburgerIcon.classList.remove("fa-xmark");
|
|
|
|
menuList.style.display = "none";
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2024-03-23 18:38:39 +00:00
|
|
|
// Dark Light Mode
|
|
|
|
|
|
|
|
const body = document.querySelector("body");
|
2024-03-28 17:53:22 +00:00
|
|
|
const head = document.querySelector("header");
|
|
|
|
const links = document.querySelectorAll("a");
|
2024-03-23 18:38:39 +00:00
|
|
|
const nav = document.querySelector(".navigation");
|
|
|
|
const h1 = document.querySelector("h1");
|
2024-03-28 17:53:22 +00:00
|
|
|
const nadpish2 = document.querySelectorAll("h2");
|
2024-03-23 18:38:39 +00:00
|
|
|
const p = document.querySelector("p");
|
2024-03-28 17:53:22 +00:00
|
|
|
const solid = document.querySelector(".fa-solid");
|
|
|
|
const solid1 = document.querySelector(".menu-icon");
|
|
|
|
const footer = document.querySelector("footer");
|
2024-03-28 20:16:26 +00:00
|
|
|
const gotop = document.getElementById("scrollToTopBtn");
|
2024-03-23 23:58:20 +00:00
|
|
|
|
2024-03-28 17:53:22 +00:00
|
|
|
let isDraculaMode = false;
|
|
|
|
|
|
|
|
// Funkce pro nastavení stylů pro Dracula mód
|
|
|
|
function setDraculaStyles() {
|
|
|
|
body.style.backgroundColor = "#2a232b"; // Barva pozadí pro Dracula mód
|
|
|
|
body.style.color = "#f8f8f2"; // Barva textu pro Dracula mód
|
|
|
|
head.style.backgroundColor = "#2a232b";
|
|
|
|
links.forEach((a) => {
|
|
|
|
a.style.color = "#f76b00";
|
|
|
|
});
|
|
|
|
nav.style.backgroundColor = "#2a232b";
|
|
|
|
h1.style.color = "#e54472";
|
|
|
|
nadpish2.forEach((h2) => {
|
|
|
|
h2.style.color = "#18f700";
|
|
|
|
});
|
|
|
|
solid.style.backgroundColor = "#2a232b";
|
|
|
|
solid.style.color = "#f76b00";
|
|
|
|
solid1.style.backgroundColor = "#2a232b";
|
|
|
|
footer.style.backgroundColor = "#2a232b";
|
2024-03-28 20:16:26 +00:00
|
|
|
gotop.style.backgroundColor = "#18f700";
|
2024-03-28 17:53:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Funkce pro nastavení stylů pro Light mód
|
|
|
|
function setLightStyles() {
|
|
|
|
body.style.backgroundColor = "#f8f8f2"; // Barva pozadí pro Light mód
|
|
|
|
body.style.color = "#282a36"; // Barva textu pro Light mód
|
|
|
|
head.style.backgroundColor = "#f8f8f2";
|
|
|
|
}
|
2024-03-23 23:58:20 +00:00
|
|
|
|
|
|
|
// Funkce pro přepnutí módu
|
|
|
|
function toggleMode() {
|
2024-03-28 17:53:22 +00:00
|
|
|
if (isDraculaMode) {
|
|
|
|
// Pokud je momentálně v Dracula modu, přepnout na Light mód
|
|
|
|
setLightStyles();
|
|
|
|
isDraculaMode = false;
|
2024-03-23 23:58:20 +00:00
|
|
|
} else {
|
2024-03-28 17:53:22 +00:00
|
|
|
// Pokud je momentálně v Light modu, přepnout na Dracula mód
|
|
|
|
setDraculaStyles();
|
|
|
|
isDraculaMode = true;
|
2024-03-23 23:58:20 +00:00
|
|
|
}
|
2024-03-23 18:38:39 +00:00
|
|
|
}
|
2024-03-23 23:58:20 +00:00
|
|
|
|
2024-03-28 17:53:22 +00:00
|
|
|
// Při kliknutí na tlačítko spusť funkci pro přepnutí módu
|
2024-03-23 23:58:20 +00:00
|
|
|
document.getElementById("toggleButton").addEventListener("click", toggleMode);
|
|
|
|
|
2024-03-28 17:53:22 +00:00
|
|
|
// Nastavit výchozí styl na Dracula mód po načtení stránky
|
|
|
|
setDraculaStyles();
|
|
|
|
isDraculaMode = true;
|
2024-03-28 19:08:37 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Photo Gallery -> section
|
|
|
|
const image1 = document.querySelector(".picture")
|
|
|
|
|
|
|
|
image1.addEventListener("mouseenter", () => {
|
|
|
|
|
|
|
|
image1.style.transform = "scale(2.2)"
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
image1.addEventListener("mouseleave", () => {
|
|
|
|
|
|
|
|
image1.style.transform = "scale(1)"
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
const image2 = document.querySelector(".picture1")
|
|
|
|
|
|
|
|
image2.addEventListener("mouseenter", () => {
|
|
|
|
|
|
|
|
image2.style.transform = "scale(2.2)"
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
image2.addEventListener("mouseleave", () => {
|
|
|
|
|
|
|
|
image2.style.transform = "scale(1)"
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
const image3 = document.querySelector(".picture2")
|
|
|
|
|
|
|
|
image3.addEventListener("mouseenter", () => {
|
|
|
|
|
|
|
|
image3.style.transform = "scale(2.2)"
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
image3.addEventListener("mouseleave", () => {
|
|
|
|
|
|
|
|
image3.style.transform = "scale(1)"
|
|
|
|
|
|
|
|
})
|
2024-03-28 20:16:26 +00:00
|
|
|
|
|
|
|
|
|
|
|
// Tlačítko go to top
|
|
|
|
// Zobrazit tlačítko, pokud je uživatel dostatečně daleko od horní části stránky
|
|
|
|
window.onscroll = function() {scrollFunction()};
|
|
|
|
|
|
|
|
function scrollFunction() {
|
|
|
|
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
|
|
|
document.getElementById("scrollToTopBtn").style.display = "block";
|
|
|
|
} else {
|
|
|
|
document.getElementById("scrollToTopBtn").style.display = "none";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Posunout nahoru, když uživatel klikne na tlačítko
|
|
|
|
function scrollToTop() {
|
|
|
|
document.body.scrollTop = 0; // Pro Safari
|
|
|
|
document.documentElement.scrollTop = 0; // Pro ostatní prohlížeče
|
|
|
|
}
|