asdas

assets/script.js

@@ -0,0 +1,14 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const toggleBtn = document.getElementById('toggle_btn');
+    const toggleBtnIcon = document.getElementById('toggle_btn_icon');
+    const dropDownMenu = document.getElementById('dropdown_menu');
+
+    toggleBtn.addEventListener('click', function() {
+        dropDownMenu.classList.toggle('open');
+        const isOpen = dropDownMenu.classList.contains('open');
+
+        toggleBtnIcon.classList = isOpen
+        ? 'ri-close-line'
+        : 'ri-menu-line';
+    }, false);
+}, false);

assets/style.css

@@ -1,3 +1,105 @@
+:root {
+    --pico-background-color: #474747;
+    --pico-color: #c2c7d0;
+    --pico-text-selection-color: rgb(207, 219, 224);
+    --pico-muted-color: #7b8495;
+    --pico-muted-border-color: #202632;
+    --pico-primary: #acc487;
+    --pico-primary-background: #6e6e6e;
+    --pico-primary-border: var(--pico-primary-background);
+    --pico-primary-underline: rgba(1, 170, 255, 0.5);
+    --pico-primary-hover: #3c423a;
+    --pico-primary-hover-background: #999ea1;
+    --pico-primary-hover-border: var(--pico-primary-hover-background);
+    --pico-primary-hover-underline: var(--pico-primary-hover);
+    --pico-primary-focus: rgb(119, 119, 119);
+    --pico-primary-inverse: #fff;
+    --pico-secondary: #969eaf;
+    --pico-secondary-background: #525f7a;
+    --pico-secondary-border: var(--pico-secondary-background);
+    --pico-secondary-underline: rgba(150, 158, 175, 0.5);
+    --pico-secondary-hover: #b3b9c5;
+    --pico-secondary-hover-background: #5d6b89;
+    --pico-secondary-hover-border: var(--pico-secondary-hover-background);
+    --pico-secondary-hover-underline: var(--pico-secondary-hover);
+    --pico-secondary-focus: rgba(144, 158, 190, 0.25);
+    --pico-secondary-inverse: #fff;
+    --pico-contrast: #dfe3eb;
+    --pico-contrast-background: #eff1f4;
+    --pico-contrast-border: var(--pico-contrast-background);
+    --pico-contrast-underline: rgba(223, 227, 235, 0.5);
+    --pico-contrast-hover: #fff;
+    --pico-contrast-hover-background: #fff;
+    --pico-contrast-hover-border: var(--pico-contrast-hover-background);
+    --pico-contrast-hover-underline: var(--pico-contrast-hover);
+    --pico-contrast-focus: rgba(207, 213, 226, 0.25);
+    --pico-contrast-inverse: #000;
+    --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015);
+    --pico-h1-color: #f0f1f3;
+    --pico-h2-color: #e0e3e7;
+    --pico-h3-color: #c2c7d0;
+    --pico-h4-color: #b3b9c5;
+    --pico-h5-color: #a4acba;
+    --pico-h6-color: #8891a4;
+    --pico-mark-background-color: #014063;
+    --pico-mark-color: #fff;
+    --pico-ins-color: #62af9a;
+    --pico-del-color: #ce7e7b;
+    --pico-blockquote-border-color: var(--pico-muted-border-color);
+    --pico-blockquote-footer-color: var(--pico-muted-color);
+    --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    --pico-table-border-color: var(--pico-muted-border-color);
+    --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
+    --pico-code-background-color: #1a1f28;
+    --pico-code-color: #8891a4;
+    --pico-code-kbd-background-color: var(--pico-color);
+    --pico-code-kbd-color: var(--pico-background-color);
+    --pico-form-element-background-color: #a8a8a8;
+    --pico-form-element-selected-background-color: #2a3140;
+    --pico-form-element-border-color: #2a3140;
+    --pico-form-element-color: #e0e3e7;
+    --pico-form-element-placeholder-color: #8891a4;
+    --pico-form-element-active-background-color: #424242;
+    --pico-form-element-active-border-color: var(--pico-primary-border);
+    --pico-form-element-focus-color: var(--pico-primary-border);
+    --pico-form-element-disabled-opacity: 0.5;
+    --pico-form-element-invalid-border-color: #964a50;
+    --pico-form-element-invalid-active-border-color: #b7403b;
+    --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
+    --pico-form-element-valid-border-color: #2a7b6f;
+    --pico-form-element-valid-active-border-color: #16896a;
+    --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
+    --pico-switch-background-color: #333c4e;
+    --pico-switch-checked-background-color: var(--pico-primary-background);
+    --pico-switch-color: #fff;
+    --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    --pico-range-border-color: #202632;
+    --pico-range-active-border-color: #2a3140;
+    --pico-range-thumb-border-color: var(--pico-background-color);
+    --pico-range-thumb-color: var(--pico-secondary-background);
+    --pico-range-thumb-active-color: var(--pico-primary-background);
+    --pico-accordion-border-color: var(--pico-muted-border-color);
+    --pico-accordion-active-summary-color: var(--pico-primary-hover);
+    --pico-accordion-close-summary-color: var(--pico-color);
+    --pico-accordion-open-summary-color: var(--pico-muted-color);
+    --pico-card-background-color: #181c25;
+    --pico-card-border-color: var(--pico-card-background-color);
+    --pico-card-box-shadow: var(--pico-box-shadow);
+    --pico-card-sectioning-background-color: #1a1f28;
+    --pico-dropdown-background-color: #181c25;
+    --pico-dropdown-border-color: #202632;
+    --pico-dropdown-box-shadow: var(--pico-box-shadow);
+    --pico-dropdown-color: var(--pico-color);
+    --pico-dropdown-hover-background-color: #202632;
+    --pico-loading-spinner-opacity: 0.5;
+    --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
+    --pico-progress-background-color: #202632;
+    --pico-progress-color: var(--pico-primary-background);
+    --pico-tooltip-background-color: var(--pico-contrast-background);
+    --pico-tooltip-color: var(--pico-contrast-inverse); 
+}
+
 body, html {
     margin: 0;
     padding: 0;
@@ -6,24 +108,38 @@ body, html {
     flex-direction: column;
     min-height: 100vh;
     align-items: center;
-    background-color: #b9b9b9;
+    width: 100%;
 }
 
 header #top {
     background-image: url(/assets/bambus.jpg);
+    background-repeat: repeat !important;
     color: #fff;
     text-shadow: #363636 5px 4px;
     padding: 20px;
     text-align: center;
 }
 
+header {
+    padding: 0 !important;
+    flex-direction: column;
+}
+
+header > * {
+    width: 100%;
+}
+
 header nav {
     display: flex;
     align-items: center;
     flex-grow: 1;
-    background-color: #444444b7;
-    padding: 10px;
+    background-color: #3d3d3d;
+    padding: 0;
+    margin: 0;
     text-align: center;
+    text-decoration: none;
+    list-style: none;
+    box-sizing: border-box;
 }
 
 header nav > * {
@@ -34,11 +150,20 @@ header nav > * {
     padding: 0;
     justify-content: center;
     width: 100%;
-    color: #dfd07a;
-    text-decoration: none;
     margin: 0 10px;
 }
 
+header nav > *, header nav > .dropdown > *, header nav > .dropdown > .dropdown-content > * {
+    color: #dfd07a !important;
+    text-decoration: none;
+    white-space: nowrap;
+    width: fit-content;
+}
+
+header nav p, header nav a {
+    text-decoration: none;
+} 
+
 nav a:hover {
     color: rgb(189, 189, 42);
 }
@@ -98,13 +223,81 @@ footer > * {
     flex: 1;
 }
 
+header {
+    padding-top: 0;
+}
+
 main {
     display: flex;
     flex-grow: 1;
     align-items: center;
     flex-direction: column;
+    width: 60%;
 }
 
 h1, h2, h3, h4, h5, h6 {
     text-align: center;
+}
+
+#dropdown_menu {
+    top: 0;
+    width: fit-content;
+    display: flex;
+    left: auto;
+    gap: 2rem;
+}
+
+#dropdown_menu li {
+    padding: 0.7rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#dropdown_menu .action_btn {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+#toggle_btn {
+    display: none;
+    color: #fff;
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+/* RESPONSIVE DESIGN */
+@media(max-width: 500px) {
+
+    #toggle_btn {
+        display: block;
+        z-index: 200;
+    }
+
+    .dropdown-content {
+        display: block;
+        position: relative;
+    }
+
+    #dropdown_menu {
+        gap: unset;
+        position: fixed;
+        height: 0;
+        left: 0;
+        top: 0;
+        width: 100%;
+        background: rgba(0, 0, 0, 0.4);
+        backdrop-filter: blur(15px);
+        border-radius: 10px;
+        overflow: hidden;
+        flex-direction: column;
+        transition: height .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        z-index: 100;
+        margin: 0;
+    }
+
+    #dropdown_menu.open {
+        height: 280px;
+    }
 }

assets/tabulka.css

@@ -0,0 +1,34 @@
+body {
+    font-family: Arial, sans-serif;    
+}
+
+h1 {
+    text-align: center;
+}
+
+table {
+    width: 120%;
+    border-collapse: collapse;
+    margin: 20px 0; font-family:serif;
+    font-size: 18px;
+    text-align: left;
+}
+
+th, td {
+    color: #c2c2c2 !important;
+    padding: 13px;
+    border-bottom: 4px solid #000000;
+    border: 2px  solid #000000
+}
+
+th {
+    background-color: #3752346b;
+}
+
+tbody tr:nth-child  {
+    background-color: #c0c0c0;
+}
+
+tbody tr:hover   > td {
+    background-color: #7a7a7a;
+}

stranky/drahe.html

@@ -1,6 +1,9 @@
 <h2>Najdrahšie</h2>
         <p>Tu môžete nájsť Najdrahšie ponožky:</p>
         <ul>
-            <a href="LINK NA OBRAZOK" download><img src="LINK NA OBRAZOK"></a>
-            <li><a href="https://www.trenirkaren.sk/panske-ponozky/162497-10pack-ponozky-styx-clenkove-bambusove-cierne-10hbk960.html?gad_source=1&gclid=CjwKCAjwmYCzBhA6EiwAxFwfgFD14oeQOxriGY8n4Gd-7CbWGguXAlA81t3KvUPqpVvP25RXSlahQxoC9dsQAvD_BwE#/21-velkost-l">Najdrahšie ponožky</a></li>
+            <a href="https://trenirkaren.vshcdn.net/782101-large_default/10pack-ponozky-styx-clenkove-bambusove-cierne-10hbk960.jpg"
+                download><img
+                    src="https://trenirkaren.vshcdn.net/782101-large_default/10pack-ponozky-styx-clenkove-bambusove-cierne-10hbk960.jpg" width="300" height="350"></a>
+            <li><a href="https://www.trenirkaren.sk/panske-ponozky/162497-10pack-ponozky-styx-clenkove-bambusove-cierne-10hbk960.html?gad_source=1&gclid=CjwKCAjwmYCzBhA6EiwAxFwfgFD14oeQOxriGY8n4Gd-7CbWGguXAlA81t3KvUPqpVvP25RXSlahQxoC9dsQAvD_BwE#/21-velkost-l">Najdrahšie ponožky</a>
+            </li>
         </ul>

stranky/formular.html

@@ -6,7 +6,16 @@
     <input type="submit" value="Odoslať">
     <hr>
 </form>
-
+<form method="get">
+    <br>
+    <label>Prihlásenie sa</label><br><br>
+        <label for="username">Používateľské meno:</label><br>
+        <input type="text" id="username" name="username"><br>
+        <label for="pwd">Heslo:</label><br>
+        <input type="password" id="pwd" name="pwd">
+        <input type="submit" value="Odoslať">
+    </form>
+    <hr>
 <form action="/action_page.php" method="get" name="prihlasenie">
     <!-- method moze naberat dve hodnoty post alebo algebricky, default je get-->
     <br>

stranky/index.html

@@ -1,2 +1,6 @@
-<h2>O nás</h2>
-        <p>Vitajte na našej stránke s najlepšími bambusovými ponožkami.</p>
+<h1>O nás</h1>
+        <p>Vitajte na našej stránke s najlepšími bambusovými ponožkami.<br><br>
+                <h2>Prečo Bambus?</h2><br>
+              <p> Bambus je úžasný materiál, ktorý je nielen neuveriteľne mäkký a prievzdušný, ale aj prirodzene antibakteriálny a hypoalergénny. 
+                Naše bambusové ponožky vám poskytujú maximálne pohodlie počas celého dňa, pričom zároveň pomáhajú chrániť našu planétu. 
+                Bambus rastie rýchlo a nevyžaduje chemické pesticídy ani hnojivá, čo z neho robí ideálny udržateľný zdroj.</p>

stranky/kontakt.html

@@ -1,5 +1,7 @@
-<h2>Kontakty</h2>
-        <p>Tu nás môžete kontaktovať:</p>
+<h1>Kontakty</h1>
+        <p><h2>Tu nás môžete kontaktovať:</h2></p>
         Email: BambusPonozky@gmail.com <br>
         Ig: BambusovePonozky.majstrovke<br>
-        TT: Majster_a_ponozky
+        TT: Majster_a_ponozky
+<br> <br>
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/aiGdn6T21RE?si=hctZiODvAZUoyOsZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

stranky/lacne.html

@@ -1,6 +1,9 @@
 <h2>Lacnejšie</h2>
-        <p>Tu môžete nájsť Lacnejšie ponožky:</p>
-        <ul>
-            <a href="LINK NA OBRAZOK" download><img src="LINK NA OBRAZOK"></a>
-            <li><a href="https://ecobamboo.sk/sk-SK/product/82003P-W/Bambusove-klasicke-ponozky-damske">Lacnejšie ponožky</a></li>
-        </ul>
+<p>Tu môžete nájsť Lacnejšie ponožky:</p>
+<ul>
+    <a href="https://ecobamboo.sk/_next/image?url=https%3A%2F%2Fcdn.ecobm.cz%2Fcore%2Fmedia%2Fproducts%2F82003P%2FW%2F82003_DxG_W1.jpg&w=1920&q=75"
+        download><img
+            src="https://ecobamboo.sk/_next/image?url=https%3A%2F%2Fcdn.ecobm.cz%2Fcore%2Fmedia%2Fproducts%2F82003P%2FW%2F82003_DxG_W1.jpg&w=1920&q=75" width="300" height="350"></a>
+    <li><a href="https://ecobamboo.sk/sk-SK/product/82003P-W/Bambusove-klasicke-ponozky-damske">Lacnejšie ponožky</a>
+    </li>
+</ul>

stranky/specialne.html

@@ -1,6 +0,0 @@
-<h2>Špeciality</h2>
-        <p>Tu môžete nájsť Špeciality:</p>
-        <ul>
-            <a href="LINK NA OBRAZOK" download><img src="LINK NA OBRAZOK"></a>
-            <li><a href="https://example.com/Special-bamboo-socks-1">Špeciality</a></li>
-        </ul>

stranky/stredne.html

@@ -1,6 +1,9 @@
 <h2>Drahšie</h2>
         <p>Tu môžete nájsť Drahšie ponožky:</p>
         <ul>
-            <a href="LINK NA OBRAZOK" download><img src="LINK NA OBRAZOK"></a>
-            <li> <a href="https://www.trenirkaren.sk/panske-ponozky/163729-10pack-ponozky-styx-nizke-bambusove-cierne-10hbn960.html?gad_source=1&gclid=CjwKCAjwmYCzBhA6EiwAxFwfgExqTdhD8HGqHI4OafdxnkXdGbxlYoJLlT5uy__0LdTcjw8IjrTvrBoC7fgQAvD_BwE#/22-velkost-m">Drahšie ponožky</a></li>
+            <a href="https://trenirkaren.vshcdn.net/782100-large_default/10pack-ponozky-styx-nizke-bambusove-cierne-10hbn960.jpg"
+                download><img
+                    src="https://trenirkaren.vshcdn.net/782100-large_default/10pack-ponozky-styx-nizke-bambusove-cierne-10hbn960.jpg" width="300" height="350"></a>
+            <li><a href="https://www.trenirkaren.sk/panske-ponozky/163729-10pack-ponozky-styx-nizke-bambusove-cierne-10hbn960.html?gad_source=1&gclid=CjwKCAjwmYCzBhA6EiwAxFwfgExqTdhD8HGqHI4OafdxnkXdGbxlYoJLlT5uy__0LdTcjw8IjrTvrBoC7fgQAvD_BwE#/22-velkost-m">Drahsie ponožky</a>
+            </li>
         </ul>

stranky/tabulka.html

@@ -0,0 +1,32 @@
+<head>  
+    <link rel="stylesheet" href="../assets/tabulka.css">
+</head>
+<body>
+    <h1>Dodávanie tovaru</h1><br>
+    <table>
+        <thead>
+            <tr>
+                <th>Typ</th>
+                <th>Čas</th>
+                <th>Kedy</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Lacnejšie</td>
+                <td>Pred otvorením</td>
+                <td>Každý tretí deň</td>
+            </tr>
+            <tr>
+                <td>Drahšie</td>
+                <td>Pred otvorením - do obeda</td>
+                <td>Každý tretí deň</td>
+            </tr>
+            <tr>
+                <td>Najdrahšie</td>
+                <td>Na objednávku</td>
+                <td>Podľa zákazníka</td>
+            </tr>
+        </tbody>
+    </table>
+</body>

templates/footer.html

@@ -1 +1,3 @@
-<p>© 2024 Moje bambusove ponožky. Copyright rezervovaný.</p>
+<footer>
+<p class="copyright"> 2024 Moje bambusove ponožky.</p>
+</footer>

templates/header.html

@@ -2,17 +2,21 @@
     <h1>Bambusové ponožky od majstra</h1>
 </div>
 <nav>
-    <a href="/index" id="homeLink">Domov</a>
-    <div class="dropdown">
-        <a href="#" class="dropdown">Podľa ceny</a>
-        <div class="dropdown-content">
-            <a href="/lacne" id="lacnejsieLink">Lacnejšie</a>
-            <a href="/stredne" id="drahsieLink">Drahšie</a>
-            <a href="/drahe" id="najdrahsieLink">Najdrahšie</a>
-            <a href="/specialne" id="specialityLink">Špeciality</a>
+    <div id="toggle_btn">
+        <i id="toggle_btn_icon" class="ri-menu-line"></i>
+    </div>
+    <div id="dropdown_menu">
+        <a href="/index" id="homeLink">Domov</a>
+        <a href="/kontakt" class="socklink" data-idcko="contactLinkCont" id="contactLink">Kontakty</a>
+        <a href="/formular" class="socklink" data-idcko="formularLinkCont" id="formularLink">Formular</a>
+        <a href="/tabulka" class="socklink" data-idcko="tabulkaLinkCont" id="tabulkaLink">Dodávanie</a>
+        <div class="dropdown">
+            <a href="#" class="dropdown">Podľa ceny</a>
+            <div class="dropdown-content">
+                <a href="/lacne" id="lacnejsieLink">Lacnejšie</a>
+                <a href="/stredne" id="drahsieLink">Drahšie</a>
+                <a href="/drahe" id="najdrahsieLink">Najdrahšie</a>
+            </div>
         </div>
     </div>
-    <a href="/kontakt" class="socklink" data-idcko="contactLinkCont" id="contactLink">Kontakty</a>
-    <a href="/formular" class="socklink" data-idcko="formularLinkCont" id="formularLink">Formular</a>
-
 </nav>

templates/skeleton.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="sk">
+<html lang="sk" data-theme="dark">
 
 <head>
     <meta charset="UTF-8">
@@ -7,8 +7,10 @@
     <meta name="description" content="Bambusové ponožky od majstra">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="/assets/pico.min.css">
+    <link rel="stylesheet" href="/assets/fonts/remixicon/remixicon.css">
     <link rel="stylesheet" href="/assets/style.css" />
-    <link rel="icon" href="/assets/favicon.png" type="image/png">
+    <link rel="icon" href="/assets/icon.png" type="image/png">
     <script src="/assets/script.js"></script>
     <title>Bambusové ponožky</title>
     __TEMPLATE_SCRIPT__