From 25ef045289fa077eb8027863f51d9480bad1d865 Mon Sep 17 00:00:00 2001 From: Kankys Date: Wed, 17 Apr 2024 23:13:56 +0200 Subject: [PATCH] =?UTF-8?q?prvni=20v=C3=A1rka?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Formulář/index.html | 20 +++++++++ Formulář/script.js | 14 +++++++ Formulář/style.css | 34 ++++++++++++++++ Go-To-Up/index.html | 11 +++++ Go-To-Up/script.js | 19 +++++++++ Go-To-Up/style.css | 14 +++++++ NavBar/index.html | 31 ++++++++++++++ NavBar/script.js | 15 +++++++ NavBar/style.cs | 68 +++++++++++++++++++++++++++++++ Switch theme/index.html | 10 +++++ Switch theme/script.js | 89 +++++++++++++++++++++++++++++++++++++++++ Switch theme/style.css | 17 ++++++++ Ubuntu Fonts/index.html | 6 +++ Ubuntu Fonts/style.css | 5 +++ Zoom photo/index.html | 7 ++++ Zoom photo/script.js | 30 ++++++++++++++ codebox/index.html | 9 +++++ codebox/script.js | 10 +++++ codebox/style.css | 24 +++++++++++ 19 files changed, 433 insertions(+) create mode 100644 Formulář/index.html create mode 100644 Formulář/script.js create mode 100644 Formulář/style.css create mode 100644 Go-To-Up/index.html create mode 100644 Go-To-Up/script.js create mode 100644 Go-To-Up/style.css create mode 100644 NavBar/index.html create mode 100644 NavBar/script.js create mode 100644 NavBar/style.cs create mode 100644 Switch theme/index.html create mode 100644 Switch theme/script.js create mode 100644 Switch theme/style.css create mode 100644 Ubuntu Fonts/index.html create mode 100644 Ubuntu Fonts/style.css create mode 100644 Zoom photo/index.html create mode 100644 Zoom photo/script.js create mode 100644 codebox/index.html create mode 100644 codebox/script.js create mode 100644 codebox/style.css diff --git a/Formulář/index.html b/Formulář/index.html new file mode 100644 index 0000000..a5daa39 --- /dev/null +++ b/Formulář/index.html @@ -0,0 +1,20 @@ + +
+

Registrace

+
+
+ + +
+
+ + +
+
+ + + +
+ +
+
diff --git a/Formulář/script.js b/Formulář/script.js new file mode 100644 index 0000000..449f8f9 --- /dev/null +++ b/Formulář/script.js @@ -0,0 +1,14 @@ +// Formulář +function validateForm() { + var password1 = document.getElementById("password1").value; + var password2 = document.getElementById("password2").value; + var passwordMatch = document.getElementById("passwordMatch"); + + if (password1 !== password2) { + passwordMatch.textContent = "Hesla se neshodují"; + passwordMatch.style.color = "red"; + return false; + } else { + return true; + } +} diff --git a/Formulář/style.css b/Formulář/style.css new file mode 100644 index 0000000..65f9a9e --- /dev/null +++ b/Formulář/style.css @@ -0,0 +1,34 @@ +/*Formulář*/ +.container { + max-width: 400px; + margin: 0 auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 5px; +} + +.form-group { + margin-bottom: 20px; +} + +label { + display: block; + font-weight: bold; +} + +input { + width: 100%; + padding: 8px; + font-size: 16px; +} + +button { + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} diff --git a/Go-To-Up/index.html b/Go-To-Up/index.html new file mode 100644 index 0000000..865a40c --- /dev/null +++ b/Go-To-Up/index.html @@ -0,0 +1,11 @@ + + + + + + diff --git a/Go-To-Up/script.js b/Go-To-Up/script.js new file mode 100644 index 0000000..2c7b77e --- /dev/null +++ b/Go-To-Up/script.js @@ -0,0 +1,19 @@ +// Tlačítko go to top +// Zobrazení tlačítka od rolovaní části stránky (víc logické než až na konci) +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 +} diff --git a/Go-To-Up/style.css b/Go-To-Up/style.css new file mode 100644 index 0000000..c7a054c --- /dev/null +++ b/Go-To-Up/style.css @@ -0,0 +1,14 @@ +/* Go to go */ +#scrollToTopBtn { + display: none; + position: fixed; + bottom: 20px; + right: 20px; + /*butoon přes obsah*/ + z-index: 99; + outline: none; + cursor: pointer; + padding: 15px; + border-radius: 50%; + background-color: transparent; +} diff --git a/NavBar/index.html b/NavBar/index.html new file mode 100644 index 0000000..b2af842 --- /dev/null +++ b/NavBar/index.html @@ -0,0 +1,31 @@ + + + + + +
+ + + + + + +
+ + + + +
+
+ diff --git a/NavBar/script.js b/NavBar/script.js new file mode 100644 index 0000000..839aa84 --- /dev/null +++ b/NavBar/script.js @@ -0,0 +1,15 @@ +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"; + } +}); diff --git a/NavBar/style.cs b/NavBar/style.cs new file mode 100644 index 0000000..764e4be --- /dev/null +++ b/NavBar/style.cs @@ -0,0 +1,68 @@ +header { + display: flex; + align-items: center; + background-color: #313131; + height: 70px; + flex-direction: row; + /*position: fixed;*/ +} + +.logo { + flex-grow: 1; +} + +.logo img { + width: 150px; + margin-left: 40px; +} + +/* EOS - navigation */ +nav { + margin-right: 40px; +} + +nav li { + display: inline-block; + list-style-type: none; + margin-right: 20px; +} + +nav li a { + text-decoration: none; + color: #734f96; + /*border: 1px solid #734f96;*/ +} + +/* EOS - navigation icons */ + +.menu-icon { + display: none; + margin-right: 30px; +} + + +@media (max-width: 600px) { + header { + position: relative; + } + header nav { + position: absolute; + top: 70px; + background-color: #313131; + width: 100%; + display: none; + } + + .menu-icon { + display: block; + color: var(--special-white); + font-size: 23px; + } + + header nav li { + display: block !important; + text-align: center; + margin-top: 10px; + margin-bottom: 10px; + } +} \ No newline at end of file diff --git a/Switch theme/index.html b/Switch theme/index.html new file mode 100644 index 0000000..6501e4e --- /dev/null +++ b/Switch theme/index.html @@ -0,0 +1,10 @@ + + + + + + + diff --git a/Switch theme/script.js b/Switch theme/script.js new file mode 100644 index 0000000..c7b99a1 --- /dev/null +++ b/Switch theme/script.js @@ -0,0 +1,89 @@ +// Dark / Light Mode + +const body = document.querySelector("body"); +const head = document.querySelector("header"); +const links = document.querySelectorAll("a"); +const nav = document.querySelector(".navigation"); +const h1 = document.querySelector("h1"); +const nadpish2 = document.querySelectorAll("h2"); +const p = document.querySelector("p"); +const solid = document.querySelector(".fa-solid"); +const solid1 = document.querySelector(".menu-icon"); +const footer = document.querySelector("footer"); +const gotop = document.querySelector("#scrollToTopBtn"); +const theme = document.querySelector("#toggleButton"); +const box = document.querySelectorAll(".code-box"); +const form = document.querySelector(".log"); +let isDraculaMode = false; + +// Funkce pro nastavení stylů pro Dracula mód +function setDraculaStyles() { + body.style.backgroundColor = "#2a232b"; + body.style.color = "#f8f8f2"; + head.style.backgroundColor = "#2a232b"; + theme.style.color = "#9fea8a"; + gotop.style.color = "#9fea8a"; + 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"; + //gotop.style.backgroundColor = "#18f700"; + //theme.style.backgroundColor = "#18f700"; + form.style.backgroundColor = "#18f700"; + form.style.color = "black"; +} + +// Funkce pro nastavení stylů pro Light mód; +function setKakouneStyles() { + body.style.backgroundColor = "#9fea8a"; + body.style.color = "#282a36"; + h1.style.color = "#e84046"; + theme.style.color = "#2a232b"; + links.forEach((a) => { + a.style.color = "#ea3838"; + }); + gotop.style.color = "#2a232b"; + head.style.backgroundColor = "#9fea8a"; + nav.style.backgroundColor = "#9fea8a"; + solid.style.backgroundColor = "#9fea8a"; + solid1.style.backgroundColor = "#9fea8a"; + footer.style.backgroundColor = "#9fea8a"; + nadpish2.forEach((h2) => { + h2.style.color = "#1909f4"; + }); + //gotop.style.backgroundColor = "#a7e6ef"; + //theme.style.backgroundColor = "#a7e6ef"; + box.forEach((p) => { + p.style.color = "white"; + }); + form.style.backgroundColor = "#1909f4"; + form.style.color = "white"; +} + +// Funkce pro přepnutí módu +function toggleMode() { + if (isDraculaMode) { + // Pokud je momentálně v Dracula modu, přepnout na Light mód + setKakouneStyles(); + isDraculaMode = false; + } else { + // Pokud je momentálně v Light modu, přepnout na Dracula mód + setDraculaStyles(); + isDraculaMode = true; + } +} + +// Funkce na změnu stylů +document.getElementById("toggleButton").addEventListener("click", toggleMode); + +// Nastavení - výchozí styl na Light(Kakoune) +setKakouneStyles(); +isDraculaMode = true; diff --git a/Switch theme/style.css b/Switch theme/style.css new file mode 100644 index 0000000..7b18705 --- /dev/null +++ b/Switch theme/style.css @@ -0,0 +1,17 @@ +/*Dark/Light mode button*/ +#toggleButton { + float: right; + margin-right: 30px; + margin-top: 10px; + padding: 5px; +} + +#toggleButton { + bottom: 20px; + right: 20px; + border: none; + outline: none; + background-color: transparent; + font-size: 34px; + cursor: pointer; +} diff --git a/Ubuntu Fonts/index.html b/Ubuntu Fonts/index.html new file mode 100644 index 0000000..9fed5d9 --- /dev/null +++ b/Ubuntu Fonts/index.html @@ -0,0 +1,6 @@ + + + + diff --git a/Ubuntu Fonts/style.css b/Ubuntu Fonts/style.css new file mode 100644 index 0000000..4fded85 --- /dev/null +++ b/Ubuntu Fonts/style.css @@ -0,0 +1,5 @@ +body { + max-width: 1000px; + margin: 0 auto; + font-family: "Ubuntu", sans-serif; +} diff --git a/Zoom photo/index.html b/Zoom photo/index.html new file mode 100644 index 0000000..311a16b --- /dev/null +++ b/Zoom photo/index.html @@ -0,0 +1,7 @@ + +
+ Homescreen + Zellij + Command +
+ diff --git a/Zoom photo/script.js b/Zoom photo/script.js new file mode 100644 index 0000000..eadcd24 --- /dev/null +++ b/Zoom photo/script.js @@ -0,0 +1,30 @@ +// Photo Gallery -> section (zoom) +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)"; +}); diff --git a/codebox/index.html b/codebox/index.html new file mode 100644 index 0000000..02c5f6c --- /dev/null +++ b/codebox/index.html @@ -0,0 +1,9 @@ + +
+ 
+        Místo pro kód (s kódem je možné manipulovat a tak i zůstame)
+
+ +
+ diff --git a/codebox/script.js b/codebox/script.js new file mode 100644 index 0000000..10122d3 --- /dev/null +++ b/codebox/script.js @@ -0,0 +1,10 @@ +// Code-box +document.getElementById("copy-button").addEventListener("click", function () { + var codeContent = document.getElementById("code-content"); + var range = document.createRange(); + range.selectNode(codeContent); + window.getSelection().removeAllRanges(); + window.getSelection().addRange(range); + document.execCommand("copy"); + window.getSelection().removeAllRanges(); +}); diff --git a/codebox/style.css b/codebox/style.css new file mode 100644 index 0000000..87b0223 --- /dev/null +++ b/codebox/style.css @@ -0,0 +1,24 @@ +/* CodeBox */ + +.code-box { + position: relative; + width: 500px; + height: auto; + border: 1px solid #734f96; + padding: 5px; + overflow: auto; + background-color: #313131; + color: yellowgreen; + margin: auto; + text-align: left; +} + +#copy-button { + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; + color: whitesmoke; + background-color: transparent; + border: 1px solid #734f96; +}