diff --git a/img/vyzva-EDIT.jpg b/img/vyzva-EDIT.jpg new file mode 100644 index 0000000..efecc77 Binary files /dev/null and b/img/vyzva-EDIT.jpg differ diff --git a/index.html b/index.html index 05c9640..7a5fc9a 100644 --- a/index.html +++ b/index.html @@ -9,11 +9,17 @@ -

Album pro dnešní den

-

💿 Každý den jedno album. 🎸 Zažíj numetal a grunge každý den.

+ + + +

🎸 Zažij numetal a grunge každý den. 💿

+
+ +
+
+
Výzva
+ + diff --git a/musicData.js b/musicData.js new file mode 100644 index 0000000..873c5f8 --- /dev/null +++ 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", + } + ]; \ No newline at end of file diff --git a/script.js b/script.js index 574872c..fef57b3 100644 --- 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 = `
-
${dnesniAlbum.datum}
+
🗓️ ${dnesniAlbum.datum}
Obal alba

${dnesniAlbum.umelec} - ${dnesniAlbum.nazev}

Vyšlo ${dnesniAlbum.vydano}

@@ -61,4 +38,62 @@

Zkus se podívat zítra!

`; - } \ No newline at end of file + } + + // 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 = "

Zatím tu žádná historie není. Přijď zítra! ⏳

"; + return; + } + + // E. Vykreslíme kartičky + let htmlObsah = ""; + + minulaAlba.forEach(album => { + htmlObsah += ` +
+
${album.datum}
+ + ${album.nazev} + +

${album.umelec}

+
${album.nazev}
+
+ `; + }); + + divArchiv.innerHTML = htmlObsah; + btnArchiv.textContent = "❌ Zavřít archiv"; +}); \ No newline at end of file diff --git a/style.css b/style.css index 61ef134..f98f0b0 100644 --- 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 */ @@ -59,4 +60,58 @@ footer a:hover { 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; } \ No newline at end of file