diff --git a/web/README.md b/web/README.md index 06f373a..41b8f3f 100644 --- a/web/README.md +++ b/web/README.md @@ -5,4 +5,38 @@ Odkaz na [výzvu](https://music.lukan.cz) -Do konce roku jedeme v testovacím režimu, od 1.1.2026 začínáme na ostro. \ No newline at end of file +🎸 **Glitch animace** na nadpisu +- 📺 **Scanlines overlay** (jako starý TV) +- 🔴 **Červená záře** kolem alba card + pulzující border +- ⬇️ **Dynamický vstup** alba card při načtení +- 🌫️ **Staggered fade-up** archivních kartiček +- 🤘 **Metal styl tlačítek** s gradient červenou +- 🖼️ **Hover efekty** na obálkách alb + +🎸 Shrnutí přidaných efektů + +### 🖥️ Globální +- **Tmavý overlay** na pozadí — přes stávající fotku je přidán `rgba(0,0,0,0.6)` gradient, aby byl celý web temný a metal +- **Scanlines** — jemné horizontální čáry přes celou stránku pomocí `body::after`, působí jako starý TV/monitor (diskrétní, nepřekáží čtení) + +### ✏️ Nadpis +- **Glitch animace** — každých 6 vteřin `h1` krátce "glitchne": červeno-azurový `text-shadow` + `skewX` transform, jako by byl špatný signál + +### 💿 Karta alba +- **Temné pozadí** s červeným borderem místo šedé +- **Vstupní animace** — karta "dopadne" z vrchu s mírnou rotací a blur efektem +- **Pulzující červená záře** — border a `box-shadow` plynule dýchají (tmavší → jasnější červená) +- **Hover efekt** — karta se zvedne + záře zesílí +- **Obálka alba** — na hover se mírně přiblíží a zvýší kontrast + +### 📂 Archiv alb +- **Tmavé kartičky** s červeným hover borderem a glow +- **Staggered fade-up animace** — každá karta se vynoří o 60ms později než předchozí (vlnový efekt) + +### 🔘 Tlačítka +- **Archiv** — tmavočervený gradient s červenou září +- **Footer** — temně fialový gradient +- **Tidal/Spotify/About** — tmavší, stylizovanější verze + +### 🎸 Logo +- **Červený `drop-shadow`** + na hover se zvětší a otočí \ No newline at end of file diff --git a/web/about.html b/web/about.html index b86a755..4876630 100644 --- a/web/about.html +++ b/web/about.html @@ -1,217 +1,251 @@ - + - - - - O projektu a další žvásty - - - - - + + + + O projektu a další žvásty + + + + + - - - - - - - - - - - -
-

🎸 Zažij numetal a grunge každý den, po celý rok. 💿

-

- 💿 Každý den jedno album. 💪 Zvládneš tuto výzvu v roce 2026? 🤟 Ukaž - že na to máš. -

- -
-

O projektu

-

- Všimli jste si, jak nás algoritmy Spotify a dalších hudebních stream - služeb neustále točí v kruhu? Nabízejí nám pořád to samé, co už známe. - Řekl jsem si to není pro mne. Chtěl jsem se vrátit k poslechu – od - první do poslední skladby. A tak vznikl můj projekt: Hudební výzva - 2026. -

-
-

- Každý den jedno album. To nejšpinavější a nejupřímnější, co hudba za - posledních 30 let nabídla: Grunge a Nu-Metal. -

-

- Mnoho lidí tyto dva žánry odděluje. Grunge je pro ně "ta stará hudba v - kostkovaných košilích" a Nu-Metal jsou "ti týpci v kšiltovkách a - širokých kalhotách". Ale když se zaposloucháte pozorně, zjistíte, že - jsou to pokrevní bratři. -

-
-

- Když Seattle zhasnul světla Grunge (Nirvana, Soundgarden, Pearl Jam) - na začátku 90. let smetl nablýskaný rock. Byla to hudba deště, deprese - a reality. Žádná póza, jen syrová emoce a kytary, které zněly jako by - je někdo tahal bahnem. -

-

- Jenže v polovině 90. let grunge s smrtí Kurta Cobaina a rozpadem scény - utichl. Vzniklo ticho. A v tom tichu se začalo rodit něco nového, - agresivnějšího. -

-
-

- Nástup Nu-Metalu: Vzteklý mladší brácha Zatímco grunge byl o smutku a - apatii, Nu-Metal (Korn, Linkin Park, Limp Bizkit, Slipknot) byl o - čistém vzteku. Vzali ty podladěné, těžké kytary z grunge, ale místo - pomalého tempa přidali rytmiku hip-hopu a elektroniku. -

-

- Kytarista Alice in Chains Jerry Cantrell nebo soundgardenovský Kim - Thayil položili základy pro zvuk, který později kapely jako Korn - dotáhly do extrému sedmistrunnými kytarami. -

-
-

- Ta energie je nenahraditelná. V dnešní době vyžehleného popu chybí ta - lidská nedokonalost a dravost. -

-
-

- Vytvořil jsem jednoduchou webovou aplikaci, která mi (a teď i vám) - každý den servíruje jedno zásadní album z této éry. Někdy je to - depresivní grungeová balada, jindy agresivní nu-metalová smršť. -

-
-

- Zvu vás, abyste do toho šli se mnou. Nemusíte hledat, co si pustit. - Stačí otevřít aplikaci a nechat se vést. -

-
-

- (PS: Aplikaci jsem si naprogramoval sám, tak buďte shovívaví, jde - hlavně o tu hudbu! 🤘 Budu velmi rád za sdílení 🙏) -

-
- -
- 🎸 Zpět na hudbu -
-
-
-

Líbí se ti výběr? Sleduj mě:

-
- Bluesky -
- Codeberg -
- Pokud chčeš podpořit tento projekt veškeré informace najdeš - zde. -

- #GrungeMetalRok #HudebniVyzva #NuMetal #AlbumDne #TipNaHudbu - #DnesPosloucham #Tidal #Spotify #KazdyDenJednoAlbum + + + + + + + + + + + +

+

🎸 Zažij numetal a grunge každý den, po celý rok. 💿

+

+ 💿 Každý den jedno album. 💪 Zvládneš tuto výzvu v roce + 2026? 🤟 Ukaž že na to máš.

-
-

© 2025 - 2026 Tvůj Hudební Kurátor Kankys

-

- Ochrana soukromí a jiné žvásty (GDPR) -

-
- Výzva -
-

FACEBOOK

 -
+
+

O projektu

+

+ Všimli jste si, jak nás algoritmy Spotify a dalších + hudebních stream služeb neustále točí v kruhu? Nabízejí nám + pořád to samé, co už známe. Řekl jsem si to není pro mne. + Chtěl jsem se vrátit k poslechu – od první do poslední + skladby. A tak vznikl můj projekt: Hudební výzva 2026. +

+
+

+ Každý den jedno album. To nejšpinavější a nejupřímnější, co + hudba za posledních 30 let nabídla: Grunge a Nu-Metal. +

+

+ Mnoho lidí tyto dva žánry odděluje. Grunge je pro ně "ta + stará hudba v kostkovaných košilích" a Nu-Metal jsou "ti + týpci v kšiltovkách a širokých kalhotách". Ale když se + zaposloucháte pozorně, zjistíte, že jsou to pokrevní bratři. +

+
+

+ Když Seattle zhasnul světla Grunge (Nirvana, Soundgarden, + Pearl Jam) na začátku 90. let smetl nablýskaný rock. Byla to + hudba deště, deprese a reality. Žádná póza, jen syrová emoce + a kytary, které zněly jako by je někdo tahal bahnem. +

+

+ Jenže v polovině 90. let grunge s smrtí Kurta Cobaina a + rozpadem scény utichl. Vzniklo ticho. A v tom tichu se + začalo rodit něco nového, agresivnějšího. +

+
+

+ Nástup Nu-Metalu: Vzteklý mladší brácha Zatímco grunge byl o + smutku a apatii, Nu-Metal (Korn, Linkin Park, Limp Bizkit, + Slipknot) byl o čistém vzteku. Vzali ty podladěné, těžké + kytary z grunge, ale místo pomalého tempa přidali rytmiku + hip-hopu a elektroniku. +

+

+ Kytarista Alice in Chains Jerry Cantrell nebo + soundgardenovský Kim Thayil položili základy pro zvuk, který + později kapely jako Korn dotáhly do extrému sedmistrunnými + kytarami. +

+
+

+ Ta energie je nenahraditelná. V dnešní době vyžehleného popu + chybí ta lidská nedokonalost a dravost. +

+
+

+ Vytvořil jsem jednoduchou webovou aplikaci, která mi (a teď + i vám) každý den servíruje jedno zásadní album z této éry. + Někdy je to depresivní grungeová balada, jindy agresivní + nu-metalová smršť. +

+
+

+ Zvu vás, abyste do toho šli se mnou. Nemusíte hledat, co si + pustit. Stačí otevřít aplikaci a nechat se vést. +

+
+

+ (PS: Aplikaci jsem si naprogramoval sám, tak buďte + shovívaví, jde hlavně o tu hudbu! 🤘 Budu velmi rád za + sdílení 🙏) +

+
-
+
+ 🎸 Zpět na hudbu +
+
+ +
+
- - - - + + diff --git a/web/gdpr.html b/web/gdpr.html index c1f3d7f..951cc12 100644 --- a/web/gdpr.html +++ b/web/gdpr.html @@ -1,96 +1,162 @@ - + - - - - GDPR | Nikoho nezajímáš - - - - + + + + GDPR | Nikoho nezajímáš + + + + +
+

GDPR & Soukromí

+

+ Aneb: "We don't care about your data, we care about the music." +

-
-

GDPR & Soukromí

-

Aneb: "We don't care about your data, we care about the music."

+
+

1. Kdo jsem?

+

+ Jsem Lukáš. Mám rád hudbu, kódování a klid. Nejsem korporát, + nemám právní oddělení a nemám zájem tě špehovat. Mark + Zuckerberg o tobě ví všechno, já nevím nic. A tak to + zůstane. +

+
-
-

1. Kdo jsem?

-

Jsem Lukáš. Mám rád hudbu, kódování a klid. Nejsem korporát, nemám právní oddělení a nemám zájem tě špehovat. Mark Zuckerberg o tobě ví všechno, já nevím nic. A tak to zůstane.

+
+

2. Sbírám Cookies?

+

+ Ne. Jediné cookies, které mě zajímají, jsou + ty čokoládové, co jsem snědl, když jsem tuhle stránku + programoval ve tři ráno. Limp Bizkit sice zpívali "Do it all + for the Nookie", ale nedělám to pro Cookie. +

+

+ Tato stránka nepoužívá Google Analytics, Facebook Pixel. +

+
+ +
+

3. Co o tobě vím?

+

Vlastně nic. Tato aplikace běží ve tvém prohlížeči.

+

+ Technická vsuvka pro rýpaly: Web běží na mé VPS sídlící u spolku VPSfree. Hostingové servery si ze zákona a z + bezpečnostních důvodů mohou ukládat do logů tvoji IP adresu, + aby věděly, kam tu stránku poslat, ale to já nedělám. Já ty logy nečtu. Je v + nich nuda. Maximalně občas kouknu do analitických nástrojů, + abych mohl zjistit, kolik návštěch mám či z jakého zařízení (ale co s toho o tobě vyčtu nic). +

+
+ +
+

4. Spotify, Tidal a ti druzí

+

+ Na webu jsou tlačítka, která vedou na Spotify, Tidal. + Jakmile na ně klikneš a odejdeš z mého webu, jsi v jejich + teritoriu. +

+

+ Oni už data sbírají. Vědí, že tajně posloucháš Britney + Spears, i když tvrdíš, že jsi drsňák. To už je mezi tebou a + jimi. Já za to nemůžu. +

+
+ +
+

5. Kontakt

+

+ Pokud máš pocit, že jsem narušil tvou auru nebo máš dotaz: +

+

+ 📧 Napiš mi. + Kontakt + najdeš na mém hlavním + webu. Nebo na + Bluesky. Nebo si prostě pusť Nirvanu a neřeš to. +

+
+ +
+ 🎸 Zpět na hudbu +
- -
-

2. Sbírám Cookies?

-

Ne. Jediné cookies, které mě zajímají, jsou ty čokoládové, co jsem snědl, když jsem tuhle stránku programoval ve tři ráno. Limp Bizkit sice zpívali "Do it all for the Nookie", ale nedělám to pro Cookie.

-

Tato stránka nepoužívá Google Analytics, Facebook Pixel, ani žádné jiné šmírovací nástroje.

-
- -
-

3. Co o tobě vím?

-

Vlastně nic. Tato aplikace běží ve tvém prohlížeči.

-

Technická vsuvka pro rýpaly: Web běží na běžném hostingu (Lukan.cz). Hostingové servery si ze zákona a z bezpečnostních důvodů mohou ukládat do logů tvoji IP adresu, aby věděly, kam tu stránku poslat. Já ty logy nečtu. Je v nich nuda.

-
- -
-

4. Spotify, Tidal a ti druzí

-

Na webu jsou tlačítka, která vedou na Spotify, Tidal. Jakmile na ně klikneš a odejdeš z mého webu, jsi v jejich teritoriu.

-

Oni už data sbírají. Vědí, že tajně posloucháš Britney Spears, i když tvrdíš, že jsi drsňák. To už je mezi tebou a jimi. Já za to nemůžu.

-
- -
-

5. Kontakt

-

Pokud máš pocit, že jsem narušil tvou auru nebo máš dotaz:

-

📧 Napiš mi. Kontakt najdeš na mém hlavním webu. Nebo na Bluesky. Nebo si prostě pusť Nirvanu a neřeš to.

-
- -
- 🎸 Zpět na hudbu -
- -
- - - \ No newline at end of file + + diff --git a/web/musicData.js b/web/musicData.js index 983442d..2bddccf 100644 --- a/web/musicData.js +++ b/web/musicData.js @@ -1467,13 +1467,13 @@ const kalendarAlb = [ { datum: "2026-05-14", umelec: "🎤 Kittie", - nazev: "💿 Year of the Spider", - img: "https://resources.tidal.com/images/b82e49a8/e632/413a/9a40/a68b4426b1fc/1280x1280.jpg", - vydano: "13.5.2003", + nazev: "💿 Until the End", + img: "https://resources.tidal.com/images/69edc4b4/253f/4a9d/af2d/8aa9dc2b7056/1280x1280.jpg", + vydano: "2004", recenze: - "Stupid Girl. Album, které kapelu dostalo do mainstreamu, ale zachovalo si tu jejich typickou depresivní náladu.", - tidal: "https://tidal.com/album/122625240", - spotify: "https://open.spotify.com/album/0XxmvWFp66NnlSxco9i7yr", + "Girl Power: Třetí album Kittie. Je to mnohem metalovější a dospělejší než jejich debut Spit. Hodně podladěné a temné.", + tidal: "https://tidal.com/album/8242194", + spotify: "https://open.spotify.com/album/7JH0GlTxHyknSS8qMKBIjZ", }, { datum: "2026-05-15", diff --git a/web/script.js b/web/script.js index 49554af..0cfdd55 100644 --- a/web/script.js +++ b/web/script.js @@ -1,37 +1,35 @@ - - - // --- 2. ZJIŠTĚNÍ DNEŠNÍHO DATA --- - // objekt s aktuálním časem +// --- 2. ZJIŠTĚNÍ DNEŠNÍHO DATA --- +// objekt s aktuálním časem const datum = new Date(); // rok, měsíc a den podle LOKÁLNÍHO času počítače const rok = datum.getFullYear(); -// Leden je v JS 0, proto přičíst 1. +// Leden je v JS 0, proto přičíst 1. // .padStart(2, '0') zajistí, že před jednociferné číslo se dá nula (např. "05") -const mesic = String(datum.getMonth() + 1).padStart(2, '0'); -const den = String(datum.getDate()).padStart(2, '0'); +const mesic = String(datum.getMonth() + 1).padStart(2, "0"); +const den = String(datum.getDate()).padStart(2, "0"); // formát "RRRR-MM-DD" const dnes = `${rok}-${mesic}-${den}`; // výpis do konzole // console.log("Opravené datum (lokální):", dnes); - - // Pro testování: - // const dnes = "2026-07-25"; - console.log("Dnes je:", dnes); +// Pro testování: +// const dnes = "2026-07-25"; - // --- 3. HLEDÁNÍ V SEZNAMU --- - // Funkce .find() projde pole 'kalendarAlb' a hledá shodu data - const dnesniAlbum = kalendarAlb.find(album => album.datum === dnes); +console.log("Dnes je:", dnes); - // --- 4. ZOBRAZENÍ NA STRÁNCE --- - const vystup = document.getElementById('zobrazeni-alba'); +// --- 3. HLEDÁNÍ V SEZNAMU --- +// Funkce .find() projde pole 'kalendarAlb' a hledá shodu data +const dnesniAlbum = kalendarAlb.find((album) => album.datum === dnes); - if (dnesniAlbum) { - // Dnešní album - vystup.innerHTML = ` +// --- 4. ZOBRAZENÍ NA STRÁNCE --- +const vystup = document.getElementById("zobrazeni-alba"); + +if (dnesniAlbum) { + // Dnešní album + vystup.innerHTML = `
🗓️ ${dnesniAlbum.datum}
Obal alba @@ -43,51 +41,49 @@ const dnes = `${rok}-${mesic}-${den}`;

👉🏻 O projektu 👈🏻

`; - } else { - // Alert bez alba - vystup.innerHTML = ` +} else { + // Alert bez alba + vystup.innerHTML = `

Dnes není v plánu žádné album 🎵

Zkus se podívat zítra!

`; - } - - +} // --- 6. LOGIKA PRO ARCHIV (Předchozí alba) --- -const btnArchiv = document.getElementById('btn-archiv'); -const divArchiv = document.getElementById('archiv-container'); +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 - } +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); + // 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)); + // 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; - } + // 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 += ` -
+ // E. Vykreslíme kartičky + let htmlObsah = ""; + + minulaAlba.forEach((album, index) => { + htmlObsah += ` +
${album.datum}
${album.nazev} @@ -97,8 +93,8 @@ btnArchiv.addEventListener('click', () => {
${album.recenze}
`; - }); + }); - divArchiv.innerHTML = htmlObsah; - btnArchiv.textContent = "❌ Zavřít archiv"; -}); \ No newline at end of file + divArchiv.innerHTML = htmlObsah; + btnArchiv.textContent = "❌ Zavřít archiv"; +}); diff --git a/web/style.css b/web/style.css index 0c6352e..fd49fa4 100644 --- a/web/style.css +++ b/web/style.css @@ -1,168 +1,385 @@ +/* === BODY === */ body { - font-family: sans-serif; - text-align: center; - padding: 50px; - background-image: url(./img/4525586.jpg); - /* Tímto zajistíte, že se tapeta při scrollování nehýbe */ - background-attachment: fixed; - - /* Tímto zakážete opakování obrázku "dokola" */ - background-repeat: no-repeat; - - /* DOPORUČENÉ: Roztáhne obrázek přes celou obrazovku */ - background-size: cover; - - /* Vycentruje obrázek, aby byl vždy uprostřed */ - background-position: center; + font-family: sans-serif; + text-align: center; + padding: 50px; + background-image: + linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), + url(./img/4525586.jpg); + background-attachment: fixed; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + color: #e0e0e0; } -.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; + +/* Scanlines overlay */ +body::after { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: repeating-linear-gradient( + to bottom, + transparent 0px, + transparent 2px, + rgba(0, 0, 0, 0.05) 2px, + rgba(0, 0, 0, 0.05) 4px + ); + z-index: 9999; + pointer-events: none; } + +/* === H1 GLITCH === */ h1 { - color: black; + color: #ffffff; + animation: glitch-text 6s infinite; } + +@keyframes glitch-text { + 0%, + 87%, + 95%, + 100% { + text-shadow: none; + transform: none; + filter: none; + } + 88% { + text-shadow: + 4px 0 #ff0000, + -4px 0 #00ffff; + transform: skewX(6deg); + filter: brightness(1.4); + } + 89% { + text-shadow: + -5px 0 #ff0000, + 5px 0 #00ffff; + transform: skewX(-4deg) translateX(6px); + filter: brightness(0.7); + } + 90% { + text-shadow: none; + transform: none; + filter: none; + } + 92% { + text-shadow: + 2px 0 #ff0000, + -2px 0 #00ffff; + transform: skewX(2deg); + } + 93% { + text-shadow: none; + transform: none; + filter: none; + } +} + +/* === ALBUM CARD === */ +.album-card { + background: rgba(12, 12, 12, 0.93); + padding: 20px; + border-radius: 10px; + border: 1px solid #8b0000; + box-shadow: + 0 0 20px rgba(180, 0, 0, 0.4), + 0 0 60px rgba(180, 0, 0, 0.15), + 0 10px 30px rgba(0, 0, 0, 0.8); + display: inline-block; + max-width: 400px; + transition: + box-shadow 0.3s, + transform 0.3s; + animation: + card-entrance 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) both, + border-pulse 3s ease-in-out 0.7s infinite; +} + +@keyframes card-entrance { + from { + transform: translateY(-80px) scale(0.9) rotate(-3deg); + opacity: 0; + filter: blur(5px); + } + to { + transform: translateY(0) scale(1) rotate(0); + opacity: 1; + filter: blur(0); + } +} + +@keyframes border-pulse { + 0%, + 100% { + border-color: #8b0000; + box-shadow: + 0 0 20px rgba(180, 0, 0, 0.4), + 0 0 60px rgba(180, 0, 0, 0.15), + 0 10px 30px rgba(0, 0, 0, 0.8); + } + 50% { + border-color: #cc0000; + box-shadow: + 0 0 30px rgba(220, 0, 0, 0.6), + 0 0 80px rgba(220, 0, 0, 0.25), + 0 10px 30px rgba(0, 0, 0, 0.8); + } +} + +.album-card:hover { + transform: translateY(-4px); + box-shadow: + 0 0 35px rgba(220, 0, 0, 0.7), + 0 0 90px rgba(220, 0, 0, 0.3), + 0 15px 40px rgba(0, 0, 0, 0.9); +} + +.album-card h2 { + color: #ffffff; +} + +.album-card h3 { + color: #cccccc; +} + +.album-card p { + color: #b0b0b0; +} + +/* === OBRÁZKY === */ +img { + width: 100%; + border-radius: 5px; + margin-bottom: 15px; +} + +.album-card img { + box-shadow: 0 0 12px rgba(180, 0, 0, 0.3); + transition: + transform 0.3s, + box-shadow 0.3s, + filter 0.3s; +} + +.album-card img:hover { + transform: scale(1.03); + box-shadow: 0 0 25px rgba(220, 0, 0, 0.6); + filter: contrast(1.1) brightness(1.05); +} + +/* === OBECNÉ NADPISY A TŘÍDY === */ h2 { - color: black; -} -.smile { - color: black; + color: #e0e0e0; } + .datum { - color: red; - font-size: 0.9em; - margin-bottom: 10px; - font-weight: bold; + color: #ff4444; + font-size: 0.9em; + margin-bottom: 10px; + font-weight: bold; } + .hastag { - color: black; -} -#vyzva { - width: 7%; - height: auto; + color: #aaaaaa; } -/* Styl pro tlačítka streamovacích služeb */ +.smile { + color: #e0e0e0; +} + +/* === STREAMING TLAČÍTKA === */ .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í */ + display: inline-block; + text-decoration: none; + padding: 10px 20px; + border-radius: 25px; + color: white; + font-weight: bold; + margin: 5px; + transition: transform 0.2s; } -/* Barvy pro konkrétní služby */ .tidal { - background-color: #000000; -} /* Černá pro Tidal */ + background: linear-gradient(135deg, #111, #2a2a2a); + border: 1px solid #555; +} + .spotify { - background-color: #1db954; -} /* Zelená pro Spotify */ + background-color: #1db954; + border: 1px solid #17a347; +} + .about { - background-color: #333; -} /* Hmědá o projektu */ + background: linear-gradient(135deg, #333, #555); + border: 1px solid #777; +} .btn:hover { - transform: scale(1.05); /* Při najetí myší se tlačítko trochu zvětší */ - opacity: 0.9; + transform: scale(1.08); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); } -@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 */ +/* === HLAVNÍ TLAČÍTKO (ARCHIV) === */ .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; + background: linear-gradient(135deg, #6b0000 0%, #cc0000 100%); + border: 1px solid #ff3333; + box-shadow: + 0 0 12px rgba(200, 0, 0, 0.35), + 0 4px 15px rgba(0, 0, 0, 0.5); + color: white; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); + letter-spacing: 0.5px; + padding: 15px 30px; + border-radius: 50px; + font-size: 1.1em; + cursor: pointer; + font-weight: bold; + transition: all 0.3s; } .btn-main:hover { - background-color: #555; + background: linear-gradient(135deg, #8b0000 0%, #ff1111 100%); + box-shadow: + 0 0 22px rgba(255, 0, 0, 0.6), + 0 6px 20px rgba(0, 0, 0, 0.6); + transform: scale(1.06); } -/* Mřížka pro archiv (aby byly kartičky vedle sebe) */ +/* === FOOTER TLAČÍTKO === */ +.btn-footer { + background: linear-gradient(135deg, #2a0033, #550066); + border: 1px solid #cc44cc; + box-shadow: 0 0 10px rgba(180, 0, 180, 0.3); + border-radius: 20px; + cursor: pointer; + transition: all 0.3s; + font-weight: bold; +} + +.btn-footer:hover { + box-shadow: 0 0 22px rgba(220, 0, 220, 0.55); + transform: scale(1.03); +} + +.link-footer { + text-decoration: none; + color: #e0ccff; +} + +/* === ARCHIVNÍ MŘÍŽKA === */ .archiv-grid { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 20px; - max-width: 1000px; - margin: 0 auto; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + max-width: 1200px; + 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; + background: rgba(18, 18, 18, 0.92); + padding: 15px; + border-radius: 8px; + border: 1px solid #2a2a2a; + box-shadow: 0 3px 12px rgba(0, 0, 0, 0.7); + color: #cccccc; + width: 250px; + text-align: center; + opacity: 0; + animation: fade-up 0.4s ease forwards; + transition: + border-color 0.3s, + box-shadow 0.3s, + transform 0.25s; } -.archiv-item img { - width: 100%; - border-radius: 4px; - margin-bottom: 10px; +.archiv-item:hover { + border-color: #8b0000; + box-shadow: + 0 0 15px rgba(180, 0, 0, 0.4), + 0 6px 18px rgba(0, 0, 0, 0.8); + transform: translateY(-5px); +} + +@keyframes fade-up { + from { + opacity: 0; + transform: translateY(25px); + } + to { + opacity: 1; + transform: translateY(0); + } } .archiv-item h3 { - font-size: 1em; - margin: 5px 0; + font-size: 1em; + margin: 5px 0; + color: #e0e0e0; } .archiv-item .datum { - font-size: 0.8em; - color: #888; + font-size: 0.8em; + color: #ff5555; } -.btn-footer { - /* background-color: #333; - color: white; - padding: 15px 30px; */ - border: none; - border-radius: 20px; - /* font-size: 1.1em; */ - cursor: pointer; - transition: background 0.3s; - font-weight: bold; - background-color: violet; -} -.link-footer { - text-decoration: none; /* Zruší podtržení */ - color: black; +.archiv-item img { + width: 100%; + border-radius: 4px; + margin-bottom: 10px; + transition: + transform 0.3s, + filter 0.3s; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } -/* odkazy */ +.archiv-item img:hover { + transform: scale(1.05); + filter: contrast(1.1) brightness(1.05); +} + +/* === LOGO / FOTO === */ +#vyzva { + width: 7%; + height: auto; + filter: drop-shadow(0 0 6px rgba(180, 0, 0, 0.5)); + transition: + transform 0.3s, + filter 0.3s; +} + +#vyzva:hover { + transform: scale(1.2) rotate(5deg); + filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.9)); +} + +/* === ODKAZY === */ .links { - color: blueviolet; text-decoration: none; - } \ No newline at end of file + color: #aa88ff; + text-decoration: none; +} + +.links:hover { + color: #cc99ff; + text-decoration: underline; +} + +/* === COPYRIGHT === */ +.copyright { + font-size: 0.8em; + color: #888; +} + +/* === RESPONSIVE === */ +@media (max-width: 768px) { + body { + padding: 10px; + } + #vyzva { + width: 20%; + } +}