From 73735b1baabaa84f1d656406771e3cc38d80f0fc Mon Sep 17 00:00:00 2001 From: Kankys Date: Wed, 24 Dec 2025 17:51:16 +0100 Subject: [PATCH] komplet grafika --- about.html | 267 ++++++++++++++++++++++++++++++++++++++----------- gdpr.html | 96 ++++++++++++++++++ index.html | 80 +++++++++------ style.css | 170 +++++++++++++++++++------------ styleabout.css | 44 -------- 5 files changed, 463 insertions(+), 194 deletions(-) create mode 100644 gdpr.html delete mode 100644 styleabout.css diff --git a/about.html b/about.html index 6bc2d90..1046337 100644 --- a/about.html +++ b/about.html @@ -1,66 +1,213 @@ - - - Zažij numetal a grunge každý den, po celý rok. 💿 - - - - - + + + + O projektu a další žvásty + + + + + - - - - - - - - - -

Aplikace je stále vyvývoji, mohou se objevit chyby. Plné nasazení se očekává 1.1.2026

-

🎸 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áš.

- -
-

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 výzvu

- - - - - + + - diff --git a/gdpr.html b/gdpr.html new file mode 100644 index 0000000..cef3e90 --- /dev/null +++ b/gdpr.html @@ -0,0 +1,96 @@ + + + + + + GDPR | Nikoho nezajímáš + + + + + +
+

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.

+
+ +
+

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/index.html b/index.html index d070f3a..712cb47 100644 --- a/index.html +++ b/index.html @@ -1,35 +1,59 @@ - - + + Zažij numetal a grunge každý den, po celý rok. 💿 - - - - - - - - - - - - - - - - + + + + + + + + + + + + + +
- -
- +
+
-
- -
Výzva
- - - - +
+ +
+
+ Výzva +
+ + + diff --git a/style.css b/style.css index 459466f..5033b50 100644 --- a/style.css +++ b/style.css @@ -1,45 +1,75 @@ -body { font-family: sans-serif; text-align: center; padding: 50px; background-image: url(./img/so0naj17qrh91.jpg); } - .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} - .smile { color: black; } - .datum { color: red; font-size: 0.9em; margin-bottom: 10px; font-weight: bold;} - .hastag { color: black} - #vyzva {width: 7%; height: auto} +body { + font-family: sans-serif; + text-align: center; + padding: 50px; + background-image: url(./img/so0naj17qrh91.jpg); +} +.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; +} +.smile { + color: black; +} +.datum { + color: red; + font-size: 0.9em; + margin-bottom: 10px; + font-weight: bold; +} +.hastag { + color: black; +} +#vyzva { + width: 7%; + height: auto; +} - /* Styl pro tlačítka streamovacích služeb */ +/* 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í */ + 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 */ -.about { background-color: #333; } /* Hmědá o projektu */ +.tidal { + background-color: #000000; +} /* Černá pro Tidal */ +.spotify { + background-color: #1db954; +} /* Zelená pro Spotify */ +.about { + background-color: #333; +} /* Hmědá o projektu */ .btn:hover { - transform: scale(1.05); /* Při najetí myší se tlačítko trochu zvětší */ - opacity: 0.9; + transform: scale(1.05); /* Při najetí myší se tlačítko trochu zvětší */ + opacity: 0.9; } - @media (max-width: 768px) { - body { + body { padding: 10px; } /* .album-card { @@ -53,53 +83,69 @@ body { font-family: sans-serif; text-align: center; padding: 50px; background-im /*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; + 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; + 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; + 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; + 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; + width: 100%; + border-radius: 4px; + margin-bottom: 10px; } .archiv-item h3 { - font-size: 1em; - margin: 5px 0; + font-size: 1em; + margin: 5px 0; } .archiv-item .datum { - font-size: 0.8em; - color: #888; -} \ No newline at end of file + font-size: 0.8em; + color: #888; +} + +.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; +} +.link-footer { + text-decoration: none; /* Zruší podtržení */ + color: black; +} diff --git a/styleabout.css b/styleabout.css deleted file mode 100644 index 0d07281..0000000 --- a/styleabout.css +++ /dev/null @@ -1,44 +0,0 @@ -body { font-family: sans-serif; text-align: center; padding: 50px; background-color: grey; } - .text { - 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} - .smile { color: black; } - .datum { color: red; font-size: 0.9em; margin-bottom: 10px; font-weight: bold;} - .hastag { color: black} - #vyzva {width: 7%; height: auto} - - - -@media (max-width: 768px) { - body { - padding: 10px; - } - -} - -/*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; -} -