Databaze alb, změna stylu do tmavého, historie alb

2026-01-01 08:12:53 +00:00 · 2025-12-22 22:10:16 +01:00
parent 770a361676
commit 1e6a38f6b0
5 changed files with 185 additions and 31 deletions
--- a/img/vyzva-EDIT.jpg
+++ b/img/vyzva-EDIT.jpg
--- a/index.html
+++ b/index.html
@@ -9,11 +9,17 @@
 </head>
 <body>

-    <h1>Album pro dnešní den</h1>
-    <h3>💿 Každý den jedno album. 🎸 Zažíj numetal a grunge každý den.</h3>
+    <!-- <h1>Album pro dnešní den</h1> -->
+    
+    <!-- <h1>💿 Každý den jedno album.</h1> -->
+    <h1>🎸 Zažij numetal a grunge každý den. 💿</h1>
    
    <div id="zobrazeni-alba"></div>
+    <div style="margin-top: 30px; margin-bottom: 20px;">
+        <button id="btn-archiv" class="btn-main">📂 Zobrazit předchozí alba</button>
+    </div>

+    <div id="archiv-container" class="archiv-grid"></div>
    <footer>
    <p>Líbí se ti výběr? Sleduj mě:</p>
    <div class="socials">
@@ -24,6 +30,9 @@
    </div>
    <p class="copyright">&copy; 2025 Tvůj Hudební Kurátor Kankys</p>
 </footer>
+    <section class="photo"><img id="vyzva" class="zoom" src="./img/vyzva-EDIT.png" alt="Výzva" ></section>
+
+<script src="musicData.js"></script>
 <script src="script.js"></script>
 </body>
 </html>
--- a/musicData.js
+++ b/musicData.js
@@ -0,0 +1,55 @@
+// --- 1. MOJE "DATABÁZE" (Seznam alb) ---
+        // Tady si ručně dopíšeš alba a dny.
+        // Formát data musí být: "RRRR-MM-DD" (Rok-Měsíc-Den)
+        const kalendarAlb = [
+            {
+                datum: "2025-12-20",
+                umelec: "🎤 Tool ",
+                nazev: "💿 Salival ",
+                img: "https://images.genius.com/2bac33fc6e404c66a295f683bbe8c54d.1000x1000x1.jpg",
+                vydano: "12. 12. 2000",
+                recenze: "Není to řadové album, ale box set s raritami a živáky (včetně legendární verze Pushit). Temné, komplexní, perfektní na dlouhé zimní večery.",
+                tidal: "https://tidal.com/artist/3850668",
+                spotify: "https://open.spotify.com/artist/2yEwvVSSSUkcLeSTNyHKh8"
+            },
+            {
+                datum: "2025-12-21",
+                umelec: "🎤 Green River  ",
+                nazev: "💿 Come on Down ",
+                img: "https://resources.tidal.com/images/13d76b12/a493/46c4/abf9/70b3520f8fc7/1280x1280.jpg",
+                vydano: "?. 12. 1985",
+                recenze: "Historický moment: Tohle je často považováno za vůbec první grunge nahrávku v historii. Vyšlo to přesně v tomto období před 40 lety. Špinavý zvuk ze Seattlu pro nejkratší den v roce.",
+                tidal: "https://tidal.com/album/89971320",
+                spotify: "https://open.spotify.com/album/6H9W3HqmS2UC5QdX7uKpQm"
+            },
+            {
+                datum: "2025-12-22",
+                umelec: "🎤 Alice in Chains ",
+                nazev: "💿 Live ",
+                img: "https://resources.tidal.com/images/1cabaac7/b976/48ba/8fb3/0ce6808d48eb/1280x1280.jpg",
+                vydano: "5. 12. 2000",
+                recenze: "Proč dnes: Syrový živák, poslední oficiální nahrávka s Layne Staleym před jeho smrtí. Vydáno v prosinci, nese v sobě tu správnou grunge melancholii.",
+                tidal: "https://tidal.com/album/33972333",
+                spotify: "https://open.spotify.com/album/36D5anaunH3SgBNgaW3cy4"
+            },
+            {
+                datum: "2025-12-23", 
+                umelec: "Nine Inch Nails",
+                nazev: "💿 Not the Actual Events (EP)",
+                img: "https://resources.tidal.com/images/ee154499/d2ad/4d30/91a3/c87e83e71b12/1280x1280.jpg",
+                vydano: "23. 12. 2016",
+                recenze: "Trefa: Jedna z mála nahrávek, která vyšla přesně v tento den. Trent Reznor (který inspiroval celý nu-metal) vydal toto EP den před Štědrým dnem. Těžké, industriální, nekompromisní.",
+                tidal: "https://tidal.com/album/68529661",
+                spotify: "https://open.spotify.com/album/2fThnKRzs6iudIAzHP9VOa",
+            },
+            {
+               datum: "2025-12-24", 
+                umelec: "Nirvana",
+                nazev: "💿 Incesticide",
+                img: "https://resources.tidal.com/images/6c1c7df4/f424/49e1/bccb/4d1cc52bd0f9/1280x1280.jpg",
+                vydano: "14. 12. 1992",
+                recenze: "Sváteční volba: Tohle je kompilace B-stran a rarit. Je to jako rozbalování dárků, které jsi nečekal. Obsahuje Sliver nebo Aneurysm. Skvělý soundtrack k alternativním Vánocům.",
+                tidal: "https://tidal.com/album/94436656",
+                spotify: "https://open.spotify.com/search/Incesticide", 
+            }
+        ];
--- a/script.js
+++ b/script.js
@@ -1,31 +1,8 @@
-// --- 1. MOJE "DATABÁZE" (Seznam alb) ---
-        // Tady si ručně dopíšeš alba a dny.
-        // Formát data musí být: "RRRR-MM-DD" (Rok-Měsíc-Den)
-        const kalendarAlb = [
-            {
-                datum: "2025-12-22", // Dnešní datum (příklad)
-                umelec: "🎤 Alice in Chains ",
-                nazev: "💿 Live ",
-                img: "https://resources.tidal.com/images/1cabaac7/b976/48ba/8fb3/0ce6808d48eb/1280x1280.jpg",
-                vydano: "5. 12. 2000",
-                recenze: "Proč dnes: Syrový živák, poslední oficiální nahrávka s Layne Staleym před jeho smrtí. Vydáno v prosinci, nese v sobě tu správnou grunge melancholii.",
-                tidal: "https://tidal.com/album/77610756",
-                spotify: "https://open.spotify.com/album/6okv1avxEgYSdc2JYy6ZEi"
-            },
-            {
-                datum: "2016-12-23", // Štědrý den
-                umelec: "Nine Inch Nails",
-                nazev: "💿 Not the Actual Events (EP)",
-                img: "https://resources.tidal.com/images/ee154499/d2ad/4d30/91a3/c87e83e71b12/1280x1280.jpg",
-                vydano: "",
-                recenze: "Trefa: Jedna z mála nahrávek, která vyšla přesně v tento den. Trent Reznor (který inspiroval celý nu-metal) vydal toto EP den před Štědrým dnem. Těžké, industriální, nekompromisní.",
-                tidal: "https://tidal.com/album/68529661",
-                spotify: "https://open.spotify.com/album/2fThnKRzs6iudIAzHP9VOa",
-            }
-        ];
+

        // --- 2. ZJIŠTĚNÍ DNEŠNÍHO DATA ---
        // Získáme dnešní datum ve formátu RRRR-MM-DD
+        // Proměnná 'kalendarAlb' se načte z předchozího souboru.
        const dnes = new Date().toISOString().split('T')[0];
        
        // Pro testování si můžeš odkomentovat řádek níže a změnit datum ručně:
@@ -44,7 +21,7 @@
            // Pokud jsme našli album pro dnešek:
            vystup.innerHTML = `
                <div class="album-card">
-                    <div class="datum">${dnesniAlbum.datum}</div>
+                    <div class="datum">🗓️ ${dnesniAlbum.datum}</div>
                    <img src="${dnesniAlbum.img}" alt="Obal alba">
                    <h2>${dnesniAlbum.umelec} - ${dnesniAlbum.nazev}</h2>
                    <p><strong>Vyšlo</strong> ${dnesniAlbum.vydano}</p>
@@ -62,3 +39,61 @@
                </div>
            `;
        }
+
+        // Photo Gallery -> section (zoom)
+const img = document.querySelector(".zoom");
+
+img.addEventListener("mouseenter", () => {
+  img.style.transform = "scale(4.2)";
+});
+
+img.addEventListener("mouseleave", () => {
+  img.style.transform = "scale(1)";
+});
+
+// --- 5. LOGIKA PRO ARCHIV (Předchozí alba) ---
+
+const btnArchiv = document.getElementById('btn-archiv');
+const divArchiv = document.getElementById('archiv-container');
+
+btnArchiv.addEventListener('click', () => {
+    
+    // A. Zkontrolujeme, jestli je archiv už otevřený
+    if (divArchiv.innerHTML !== "") {
+        divArchiv.innerHTML = ""; // Pokud ano, vymažeme ho (zavřeme)
+        btnArchiv.textContent = "📂 Zobrazit předchozí alba";
+        return; // Ukončíme funkci
+    }
+
+    // B. Vyfiltrujeme alba, která jsou starší než dnešek
+    // (Předpokládá, že proměnná 'dnes' a 'kalendarAlb' existují z předchozího kódu)
+    const minulaAlba = kalendarAlb.filter(album => album.datum < dnes);
+
+    // C. Seřadíme je, aby nahoře bylo to nejnovější z minulosti
+    minulaAlba.sort((a, b) => b.datum.localeCompare(a.datum));
+
+    // D. Pokud žádná minulá alba nejsou
+    if (minulaAlba.length === 0) {
+        divArchiv.innerHTML = "<p>Zatím tu žádná historie není. Přijď zítra! ⏳</p>";
+        return;
+    }
+
+    // E. Vykreslíme kartičky
+    let htmlObsah = "";
+    
+    minulaAlba.forEach(album => {
+        htmlObsah += `
+            <div class="archiv-item">
+                <div class="datum">${album.datum}</div>
+                <a href="${album.tidal}" target="_blank">
+                    <img src="${album.img}" alt="${album.nazev}">
+                </a>
+                <h3>${album.umelec}</h3>
+                <div>${album.nazev}</div>
+            </div>
+        `;
+    });
+
+    divArchiv.innerHTML = htmlObsah;
+    btnArchiv.textContent = "❌ Zavřít archiv";
+});
--- a/style.css
+++ b/style.css
@@ -9,8 +9,9 @@ body { font-family: sans-serif; text-align: center; padding: 50px; background-co
        }
        img { width: 100%; border-radius: 5px; margin-bottom: 15px; }
        h1 { color: black }
-        h3 { color: black}
-        .datum { color: red; font-size: 0.9em; margin-bottom: 10px; }
+        h2 { color: black}
+        .datum { color: red; font-size: 0.9em; margin-bottom: 10px; font-weight: bold;}
+        #vyzva {width: 7%; height: auto}
        /* Styl pro tlačítka streamovacích služeb */
 .btn {
    display: inline-block; /* Aby měly rozměry */
@@ -60,3 +61,57 @@ footer a:hover {
    background-color: #f0f0f0; 
  } */
 }
+
+/*Archív alb */
+/* Styl pro hlavní tlačítko archivu */
+.btn-main {
+    background-color: #333;
+    color: white;
+    padding: 15px 30px;
+    border: none;
+    border-radius: 50px;
+    font-size: 1.1em;
+    cursor: pointer;
+    transition: background 0.3s;
+    font-weight: bold;
+}
+
+.btn-main:hover {
+    background-color: #555;
+}
+
+/* Mřížka pro archiv (aby byly kartičky vedle sebe) */
+.archiv-grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+/* Menší kartička pro archiv */
+.archiv-item {
+    background: white;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    width: 250px; /* Pevná šířka */
+    text-align: center;
+}
+
+.archiv-item img {
+    width: 100%;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+
+.archiv-item h3 {
+    font-size: 1em;
+    margin: 5px 0;
+}
+
+.archiv-item .datum {
+    font-size: 0.8em;
+    color: #888;
+}