kankys/musicCalendar
1
0
Fork 0
mirror of https://codeberg.org/Kankys/musicCalendar.git synced 2026-05-21 18:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor code

Browse Source
This commit is contained in:
kankys
2026-05-15 21:41:00 +02:00
parent e2e498d2e3
commit d72e7db358
6 changed files with 834 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/README.md
+35 -1
View File
@@ -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.
🎸 **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čí
web/about.html
+244 -210
View File
@@ -1,217 +1,251 @@
<!DOCTYPE html>
<!doctype html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>O projektu a další žvásty</title>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://music.lukan.cz/" />
<meta property="og:title" content="Hudební Výzva 2026: Grunge & Nu-Metal" />
<meta
property="og:description"
content="Každý den jedno zásadní album. Zvládneš to se mnou? 365 dní, 365 desek."
/>
<meta
property="og:image"
content="https://music.lukan.cz/img/vyzva-EDIT.jpg"
/>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>O projektu a další žvásty</title>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://music.lukan.cz/" />
<meta
property="og:title"
content="Hudební Výzva 2026: Grunge & Nu-Metal"
/>
<meta
property="og:description"
content="Každý den jedno zásadní album. Zvládneš to se mnou? 365 dní, 365 desek."
/>
<meta
property="og:image"
content="https://music.lukan.cz/img/vyzva-EDIT.jpg"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="Hudební Výzva 2026: Grunge & Nu-Metal"
/>
<meta
name="twitter:description"
content="Každý den jedno zásadní album. Přidej se!"
/>
<meta
name="twitter:image"
content="https://music.lukan.cz/img/vyzva-EDIT.jpg"
/>
<meta
name="Hudební kalendář"
content="Každý den jedno album. Zažíj numetal a grunge každý den."
/>
<link rel="stylesheet" href="styleabout.css" />
<link rel="shortcut icon" href="img/electric-guitar_12494348.png" />
<link rel="stylesheet" href="style.css" />
<style>
/* Specifické styly pro textovou stránku */
.about-container {
max-width: 800px;
margin: 0 auto;
text-align: left;
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
line-height: 1.6;
}
.about-container h1 {
text-align: center;
text-transform: uppercase;
color: #d32f2f; /* Trochu agresivní červená */
font-size: 2.5em;
margin-bottom: 10px;
}
.subtitle {
text-align: center;
color: #666;
font-style: italic;
margin-bottom: 40px;
font-size: 1.2em;
}
.about-section {
margin-bottom: 30px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.about-section:last-child {
border-bottom: none;
}
h3 {
color: #222;
font-weight: 900; /* Extra tučné */
}
.back-btn {
display: block;
width: fit-content;
margin: 40px auto 0;
text-align: center;
}
footer {
text-align: center;
}
</style>
</head>
<body>
<div class="about-container">
<h1>🎸 Zažij numetal a grunge každý den, po celý rok. 💿</h1>
<p class="subtitle">
<strong
>💿 Každý den jedno album. 💪 Zvládneš tuto výzvu v roce 2026? 🤟 Ukaž
že na to máš.</strong
>
</p>
<div class="about-section">
<h3>O projektu</h3>
<p>
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.
</p>
<br />
<p>
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.
</p>
<p>
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.
</p>
<br />
<p>
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.
</p>
<p>
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.
</p>
<br />
<p>
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.
</p>
<p>
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.
</p>
<br />
<p>
Ta energie je nenahraditelná. V dnešní době vyžehleného popu chybí ta
lidská nedokonalost a dravost.
</p>
<br />
<p>
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šť.
</p>
<br />
<p>
Zvu vás, abyste do toho šli se mnou. Nemusíte hledat, co si pustit.
Stačí otevřít aplikaci a nechat se vést.
</p>
<br />
<p>
(PS: Aplikaci jsem si naprogramoval sám, tak buďte shovívaví, jde
hlavně o tu hudbu! 🤘 Budu velmi rád za sdílení 🙏)
</p>
</div>
<div class="back-btn">
<a href="index.html" class="btn-main" style="text-decoration: none"
>🎸 Zpět na hudbu</a
>
</div>
<div class="footer-section>">
<footer>
<p style="padding-top: 30px;">Líbí se ti výběr? Sleduj mě:</p>
<div class="socials">
<a
href="https://bsky.app/profile/kankys.bsky.social"
target="_blank" class="links"
>Bluesky</a
>
<br />
<a href="https://codeberg.org/Kankys" target="_blank" class="links">Codeberg</a>
<br />
<a
href="https://lukaskanka.cz/index/about/index.html"
target="_blank" class="links"
>Pokud chčeš podpořit tento projekt veškeré informace najdeš
zde.</a
>
<p class="hastag">
#GrungeMetalRok #HudebniVyzva #NuMetal #AlbumDne #TipNaHudbu
#DnesPosloucham #Tidal #Spotify #KazdyDenJednoAlbum
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="Hudební Výzva 2026: Grunge & Nu-Metal"
/>
<meta
name="twitter:description"
content="Každý den jedno zásadní album. Přidej se!"
/>
<meta
name="twitter:image"
content="https://music.lukan.cz/img/vyzva-EDIT.jpg"
/>
<meta
name="Hudební kalendář"
content="Každý den jedno album. Zažíj numetal a grunge každý den."
/>
<link rel="stylesheet" href="styleabout.css" />
<link rel="shortcut icon" href="img/electric-guitar_12494348.png" />
<link rel="stylesheet" href="style.css" />
<style>
/* Specifické styly pro textovou stránku */
.about-container {
max-width: 800px;
margin: 0 auto;
text-align: left;
background: rgba(12, 12, 12, 0.92);
color: #e0e0e0;
padding: 40px;
border-radius: 10px;
border: 1px solid #8b0000;
box-shadow:
0 0 20px rgba(180, 0, 0, 0.3),
0 4px 30px rgba(0, 0, 0, 0.8);
line-height: 1.6;
}
.about-container h1 {
text-align: center;
text-transform: uppercase;
color: #ff3333;
font-size: 2.5em;
margin-bottom: 10px;
}
.subtitle {
text-align: center;
color: #aaaaaa;
font-style: italic;
margin-bottom: 40px;
font-size: 1.2em;
}
.about-section {
margin-bottom: 30px;
border-bottom: 1px solid #2a2a2a;
padding-bottom: 20px;
}
.about-section:last-child {
border-bottom: none;
}
h3 {
color: #e0e0e0;
font-weight: 900; /* Extra tučné */
}
.about-container p {
color: #b0b0b0;
}
footer {
color: #aaaaaa;
}
.back-btn {
display: block;
width: fit-content;
margin: 40px auto 0;
text-align: center;
}
footer {
text-align: center;
}
</style>
</head>
<body>
<div class="about-container">
<h1>🎸 Zažij numetal a grunge každý den, po celý rok. 💿</h1>
<p class="subtitle">
<strong
>💿 Každý den jedno album. 💪 Zvládneš tuto výzvu v roce
2026? 🤟 Ukaž že na to máš.</strong
>
</p>
</div>
<p class="copyright">&copy; 2025 - 2026 Tvůj Hudební Kurátor Kankys</p>
<p style="font-size: 0.8em; margin-top: 10px">
<a href="gdpr.html" class="links"
>Ochrana soukromí a jiné žvásty (GDPR)</a
>
</p>
<section class="photo">
<img
id="vyzva"
class="zoom"
src="./img/vyzva-EDIT.jpg"
alt="Výzva"
/>
</section>
<a href="https://www.facebook.com/groups/1802260010492466" target="_blank" style="color: rgb(88, 88, 227);"><h3>FACEBOOK</h3></a>
</footer>
<div class="about-section">
<h3>O projektu</h3>
<p>
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.
</p>
<br />
<p>
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.
</p>
<p>
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.
</p>
<br />
<p>
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.
</p>
<p>
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.
</p>
<br />
<p>
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.
</p>
<p>
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.
</p>
<br />
<p>
Ta energie je nenahraditelná. V dnešní době vyžehleného popu
chybí ta lidská nedokonalost a dravost.
</p>
<br />
<p>
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šť.
</p>
<br />
<p>
Zvu vás, abyste do toho šli se mnou. Nemusíte hledat, co si
pustit. Stačí otevřít aplikaci a nechat se vést.
</p>
<br />
<p>
(PS: Aplikaci jsem si naprogramoval sám, tak buďte
shovívaví, jde hlavně o tu hudbu! 🤘 Budu velmi rád za
sdílení 🙏)
</p>
</div>
</div>
<div class="back-btn">
<a
href="index.html"
class="btn-main"
style="text-decoration: none"
>🎸 Zpět na hudbu</a
>
</div>
<div class="footer-section>">
<footer>
<p style="padding-top: 30px">
Líbí se ti výběr? Sleduj mě:
</p>
<div class="socials">
<a
href="https://bsky.app/profile/kankys.bsky.social"
target="_blank"
class="links"
>Bluesky</a
>
<br />
<a
href="https://codeberg.org/Kankys"
target="_blank"
class="links"
>Codeberg</a
>
<br />
<a
href="https://lukaskanka.cz/index/about/index.html"
target="_blank"
class="links"
>Pokud chčeš podpořit tento projekt veškeré
informace najdeš zde.</a
>
<p class="hastag">
#GrungeMetalRok #HudebniVyzva #NuMetal #AlbumDne
#TipNaHudbu #DnesPosloucham #Tidal #Spotify
#KazdyDenJednoAlbum
</p>
</div>
<p class="copyright">
&copy; 2025 - 2026 Tvůj Hudební Kurátor Kankys
</p>
<p style="font-size: 0.8em; margin-top: 10px">
<a href="gdpr.html" class="links"
>Ochrana soukromí a jiné žvásty (GDPR)</a
>
</p>
<section class="photo">
<img
id="vyzva"
class="zoom"
src="./img/vyzva-EDIT.jpg"
alt="Výzva"
/>
</section>
<!--<a
href="https://www.facebook.com/groups/1802260010492466"
target="_blank"
style="color: rgb(88, 88, 227)"
><h3>FACEBOOK</h3></a
>-->
</footer>
</div>
</div>
</div>
<script src="scriptabout.js"></script>
</body>
<script src="scriptabout.js"></script>
</body>
</html>
web/gdpr.html
+158 -92
View File
@@ -1,96 +1,162 @@
<!DOCTYPE html>
<!doctype html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GDPR | Nikoho nezajímáš</title>
<link rel="stylesheet" href="style.css">
<style>
/* Specifické styly pro textovou stránku */
.gdpr-container {
max-width: 800px;
margin: 0 auto;
text-align: left;
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
line-height: 1.6;
}
.gdpr-container h1 {
text-align: center;
text-transform: uppercase;
color: #d32f2f; /* Trochu agresivní červená */
font-size: 2.5em;
margin-bottom: 10px;
}
.subtitle {
text-align: center;
color: #666;
font-style: italic;
margin-bottom: 40px;
font-size: 1.2em;
}
.gdpr-section {
margin-bottom: 30px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.gdpr-section:last-child {
border-bottom: none;
}
h3 {
color: #222;
font-weight: 900; /* Extra tučné */
}
.back-btn {
display: block;
width: fit-content;
margin: 40px auto 0;
text-align: center;
}
</style>
</head>
<body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GDPR | Nikoho nezajímáš</title>
<link rel="stylesheet" href="style.css" />
<style>
/* Specifické styly pro textovou stránku */
.gdpr-container {
max-width: 800px;
margin: 0 auto;
text-align: left;
background: rgba(12, 12, 12, 0.92);
color: #e0e0e0;
padding: 40px;
border-radius: 10px;
border: 1px solid #8b0000;
box-shadow:
0 0 20px rgba(180, 0, 0, 0.3),
0 4px 30px rgba(0, 0, 0, 0.8);
line-height: 1.6;
}
.gdpr-container h1 {
text-align: center;
text-transform: uppercase;
color: #ff3333;
font-size: 2.5em;
margin-bottom: 10px;
}
.gdpr-container p {
color: #b0b0b0;
}
.gdpr-container strong {
color: #e0e0e0;
}
.gdpr-container em {
color: #999999;
}
.subtitle {
text-align: center;
color: #aaaaaa;
font-style: italic;
margin-bottom: 40px;
font-size: 1.2em;
}
.gdpr-section {
margin-bottom: 30px;
border-bottom: 1px solid #2a2a2a;
padding-bottom: 20px;
}
.gdpr-section:last-child {
border-bottom: none;
}
h3 {
color: #e0e0e0;
font-weight: 900;
}
.back-btn {
display: block;
width: fit-content;
margin: 40px auto 0;
text-align: center;
}
</style>
</head>
<body>
<div class="gdpr-container">
<h1>GDPR & Soukromí</h1>
<p class="subtitle">
Aneb: "We don't care about your data, we care about the music."
</p>
<div class="gdpr-container">
<h1>GDPR & Soukromí</h1>
<p class="subtitle">Aneb: "We don't care about your data, we care about the music."</p>
<div class="gdpr-section">
<h3>1. Kdo jsem?</h3>
<p>
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.
</p>
</div>
<div class="gdpr-section">
<h3>1. Kdo jsem?</h3>
<p>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.</p>
<div class="gdpr-section">
<h3>2. Sbírám Cookies?</h3>
<p>
<strong>Ne.</strong> 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.
</p>
<p>
Tato stránka nepoužívá Google Analytics, Facebook Pixel.
</p>
</div>
<div class="gdpr-section">
<h3>3. Co o tobě vím?</h3>
<p>Vlastně nic. Tato aplikace běží ve tvém prohlížeči.</p>
<p>
<em>Technická vsuvka pro rýpaly:</em> 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).
</p>
</div>
<div class="gdpr-section">
<h3>4. Spotify, Tidal a ti druzí</h3>
<p>
Na webu jsou tlačítka, která vedou na Spotify, Tidal.
Jakmile na ně klikneš a odejdeš z mého webu, jsi v jejich
teritoriu.
</p>
<p>
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.
</p>
</div>
<div class="gdpr-section">
<h3>5. Kontakt</h3>
<p>
Pokud máš pocit, že jsem narušil tvou auru nebo máš dotaz:
</p>
<p>
📧 Napiš mi.
<a
href="https://lukaskanka.cz/index/about/index.html"
target="_blank"
class="links"
>Kontakt</a
>
najdeš na mém hlavním
<a
href="https://lukaskanka.cz/index/about/index.html"
target="_blank"
class="links"
>webu</a
>. Nebo na
<a
href="https://bsky.app/profile/kankys.bsky.social"
target="_blank"
class="links"
>Bluesky</a
>. Nebo si prostě pusť Nirvanu a neřeš to.
</p>
</div>
<div class="back-btn">
<a
href="index.html"
class="btn-main"
style="text-decoration: none"
>🎸 Zpět na hudbu</a
>
</div>
</div>
<div class="gdpr-section">
<h3>2. Sbírám Cookies?</h3>
<p><strong>Ne.</strong> 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.</p>
<p>Tato stránka nepoužívá Google Analytics, Facebook Pixel, ani žádné jiné šmírovací nástroje. </p>
</div>
<div class="gdpr-section">
<h3>3. Co o tobě vím?</h3>
<p>Vlastně nic. Tato aplikace běží ve tvém prohlížeči. </p>
<p><em>Technická vsuvka pro rýpaly:</em> 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.</p>
</div>
<div class="gdpr-section">
<h3>4. Spotify, Tidal a ti druzí</h3>
<p>Na webu jsou tlačítka, která vedou na Spotify, Tidal. Jakmile na ně klikneš a odejdeš z mého webu, jsi v jejich teritoriu. </p>
<p>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.</p>
</div>
<div class="gdpr-section">
<h3>5. Kontakt</h3>
<p>Pokud máš pocit, že jsem narušil tvou auru nebo máš dotaz:</p>
<p>📧 Napiš mi. <a href="https://lukaskanka.cz/index/about/index.html" target="_blank" class="links">Kontakt</a> najdeš na mém hlavním <a href="https://lukaskanka.cz/index/about/index.html" target="_blank" class="links">webu</a>. Nebo na <a href="https://bsky.app/profile/kankys.bsky.social" target="_blank" class="links">Bluesky</a>. Nebo si prostě pusť Nirvanu a neřeš to.</p>
</div>
<div class="back-btn">
<a href="index.html" class="btn-main" style="text-decoration: none;">🎸 Zpět na hudbu</a>
</div>
</div>
</body>
</html>
</body>
</html>
web/musicData.js
+6 -6
View File
@@ -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",
web/script.js
+51 -55
View File
@@ -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 = `
<div class="album-card">
<div class="datum">🗓️ ${dnesniAlbum.datum}</div>
<img src="${dnesniAlbum.img}" alt="Obal alba">
@@ -43,51 +41,49 @@ const dnes = `${rok}-${mesic}-${den}`;
<p><a href="./about.html" class="btn about">👉🏻 O projektu 👈🏻</a></p>
</div>
`;
} else {
// Alert bez alba
vystup.innerHTML = `
} else {
// Alert bez alba
vystup.innerHTML = `
<div class="album-card">
<h3>Dnes není v plánu žádné album 🎵</h3>
<p>Zkus se podívat zítra!</p>
</div>
`;
}
}
// --- 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 = "<p>Zatím tu žádná historie není. Přijď zítra! ⏳</p>";
return;
}
// 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">
// E. Vykreslíme kartičky
let htmlObsah = "";
minulaAlba.forEach((album, index) => {
htmlObsah += `
<div class="archiv-item" style="animation-delay: ${index * 0.06}s">
<div class="datum">${album.datum}</div>
<img src="${album.img}" alt="${album.nazev}">
</a>
@@ -97,8 +93,8 @@ btnArchiv.addEventListener('click', () => {
<div>${album.recenze}</div>
</div>
`;
});
});
divArchiv.innerHTML = htmlObsah;
btnArchiv.textContent = "❌ Zavřít archiv";
});
divArchiv.innerHTML = htmlObsah;
btnArchiv.textContent = "❌ Zavřít archiv";
});
web/style.css
+340 -123
View File
@@ -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;
}
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%;
}
}