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

výzva začíná
2026-01-06 17:52:53 +00:00 · 2025-12-22 22:10:16 +01:00 · 2025-12-22 19:03:54 +01:00
7 changed files with 316 additions and 2 deletions
--- a/README.md
+++ b/README.md
@@ -1,3 +1,8 @@
-# musicCalendar
+# 💿 Každý den jedno album. 🎸 Zažíj numetal a grunge každý den.
+## 💪 Zvládneš tuto výzvu v roce 2026?
+## 🤟 Ukaž že na to máš .
+Odkaz na [výzvu](https://lukaskanka.cz/musicCalendar/index.html)

-Na každý den jedno album. Numetal či grunge s odkazy na Tidal a Spotify.
+Projekt hostuje [OSCloud](https://oscloud.cz/) 👉 vstupenka do světa Open-source a hostingu. Díky!
+ 
+Do konce roku jedeme v testovacím režimu, od 1.1.2026 začínáme na ostro.
--- a/img/electric-guitar_12494348.png
+++ b/img/electric-guitar_12494348.png
--- a/img/vyzva-EDIT.jpg
+++ b/img/vyzva-EDIT.jpg
--- a/index.html
+++ b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="cs">
+<head>
+    <meta charset="UTF-8">
+    <title>Hudební Kalendář</title>
+    <meta name="Hudební kalendář" content="Každý den jedno album. Zažíj numetal a grunge každý den." />
+    <link rel="stylesheet" href="style.css">
+        <link rel="shortcut icon" href="img/electric-guitar_12494348.png" />
+</head>
+<body>
+
+    <!-- <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">
+        <a href="https://bsky.app/profile/kankys.bsky.social" target="_blank">Bluesky</a>
+        <a href="https://mastodon.arch-linux.cz/deck/@Kankys" target="_blank">Mastodon</a>
+        <br>
+        <a href="https://codeberg.org/Kankys" target="_blank">Codeberg</a>
+    </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
@@ -0,0 +1,99 @@
+
+
+        // --- 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ě:
+        // const dnes = "2025-12-24"; 
+
+        console.log("Dnes je:", dnes); // Vypíše do konzole prohlížeče (F12)
+
+        // --- 3. HLEDÁNÍ V SEZNAMU ---
+        // Funkce .find() projde pole 'kalendarAlb' a hledá shodu data
+        const dnesniAlbum = kalendarAlb.find(album => album.datum === dnes);
+
+        // --- 4. ZOBRAZENÍ NA STRÁNCE ---
+        const vystup = document.getElementById('zobrazeni-alba');
+
+        if (dnesniAlbum) {
+            // Pokud jsme našli album pro dnešek:
+            vystup.innerHTML = `
+                <div class="album-card">
+                    <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>
+                    <p>${dnesniAlbum.recenze}</p>
+                    <a href="${dnesniAlbum.tidal}" target="_blank" class="btn tidal">Tidal</a> - <a href="${dnesniAlbum.spotify}" target="_blank" class="btn spotify">Spotify</a>
+
+                </div>
+            `;
+        } else {
+            // Pokud pro dnešek nic naplánováno není:
+            vystup.innerHTML = `
+                <div class="album-card">
+                    <h3>Dnes není v plánu žádné album 🎵</h3>
+                    <p>Zkus se podívat zítra!</p>
+                </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
@@ -0,0 +1,117 @@
+body { font-family: sans-serif; text-align: center; padding: 50px; background-color: #333; }
+        .album-card { 
+            background: grey; 
+            padding: 20px; 
+            border-radius: 10px; 
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
+            display: inline-block;
+            max-width: 400px;
+        }
+        img { width: 100%; border-radius: 5px; margin-bottom: 15px; }
+        h1 { color: black }
+        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 */
+    text-decoration: none; /* Zruší podtržení */
+    padding: 10px 20px;    /* Vnitřní odsazení (prostor kolem textu) */
+    border-radius: 25px;   /* Kulaté rohy */
+    color: white;          /* Bílé písmo */
+    font-weight: bold;
+    margin: 5px;           /* Mezera mezi tlačítky */
+    transition: transform 0.2s; /* Animace při najetí */
+}
+
+/* Barvy pro konkrétní služby */
+.tidal { background-color: #000000; } /* Černá pro Tidal */
+.spotify { background-color: #1DB954; } /* Zelená pro Spotify */
+
+.btn:hover {
+    transform: scale(1.05); /* Při najetí myší se tlačítko trochu zvětší */
+    opacity: 0.9;
+}
+footer {
+    margin-top: 50px;
+    border-top: 1px solid #ddd;
+    padding-top: 20px;
+    font-size: 0.8em;
+    color: #666;
+}
+footer a {
+    color: black;
+    margin: 0 10px;
+    text-decoration: none;
+    font-weight: bold;
+}
+footer a:hover {
+    color: #000;
+    text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+    body {
+    padding: 10px;
+  }
+  /* .album-card {
+    width: 90%;
+    margin: 0 auto;
+    padding: 20px; 
+    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;
+}
Author	SHA1	Message	Date
Kankys	1e6a38f6b0	Databaze alb, změna stylu do tmavého, historie alb	2025-12-22 22:10:16 +01:00
Kankys	770a361676	výzva začíná	2025-12-22 19:03:54 +01:00