nová sekce about, nové grafické rozhraní

2026-01-01 00:02:54 +00:00 · 2025-12-24 01:55:16 +01:00
parent ea40bbb8a0
commit 36bc232106
9 changed files with 265 additions and 50 deletions
--- a/about.html
+++ b/about.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="cs">
+<head>
+    <meta charset="UTF-8">
+    <title>Zažij numetal a grunge každý den, po celý rok. 💿</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" />
+</head>
+<body>
+    <p>Aplikace je stále vyvývoji, mohou se objevit chyby. Plné nasazení se očekává 1.1.2026</p>
+<h1>🎸 Zažij numetal a grunge každý den, po celý rok. 💿</h1>
+        <p class="smile"><strong>💿 Každý den jedno album. 💪 Zvládneš tuto výzvu v roce 2026? 🤟 Ukaž že na to máš.</strong></p>
+        
+        <section class="text">
+            <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>
+        </section>
+        <p><a href="./index.html">Zpět na výzvu</a></p>
+<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>
+        <br>
+        <a href="https://lukaskanka.cz/index/about/index.html" target="_blank">Pokud chčeš podpořit tento projekt veškeré informace najdeš zde.</a>
+        <p class="hastag">#GrungeMetalRok #HudebniVyzva #NuMetal #AlbumDne #TipNaHudbu #DnesPosloucham </p>
+    </div>
+    <p class="copyright">&copy; 2025 Tvůj Hudební Kurátor Kankys</p>
+    <section class="photo"><img id="vyzva" class="zoom" src="./img/vyzva-EDIT.jpg" alt="Výzva" ></section>
+</footer>
+   
+
+
+<script src="scriptabout.js"></script>
+</body>
+</html>
+
--- a/img/nu-metal-wallpapers.png
+++ b/img/nu-metal-wallpapers.png
--- a/img/so0naj17qrh91.jpg
+++ b/img/so0naj17qrh91.jpg
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="cs">
 <head>
    <meta charset="UTF-8">
-    <title>Hudební Kalendář</title>
+    <title>Zažij numetal a grunge každý den, po celý rok. 💿</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">
@@ -19,29 +19,14 @@
 </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, po celý rok. 💿</h1>
-    <p><strong>💿 Každý den jedno album. 💪 Zvládneš tuto výzvu v roce 2026? 🤟 Ukaž že na to máš.</strong></p>
-    <p>Aplikace je v testovacím režimu (díky za nahlášení chyb). Na ostro jedeme od 1.1.2026!</p>
    <div id="zobrazeni-alba"></div>
-    <p>#GrungeMetalRok #HudebniVyzva #NuMetal #AlbumDne #TipNaHudbu #DnesPosloucham </p>
+    
    <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.jpg" alt="Výzva" ></section>

 <script src="musicData.js"></script>
--- a/musicData.js
+++ b/musicData.js
@@ -183,7 +183,7 @@
            },
            {
               datum: "2026-01-07", 
-                umelec: "🎤 Twisted Method ",
+                umelec: "🎤 Twisted Method",
                nazev: "💿 Escape from Cape Coma",
                img: "https://resources.tidal.com/images/cecd9139/c794/4711/ab7c/c971977b909e/1280x1280.jpg",
                vydano: "2003",
@@ -191,4 +191,134 @@
                tidal: "https://tidal.com/album/255500183",
                spotify: "https://open.spotify.com/album/3GzpA2rUPGt29aWbkMVctj", 
            },
+            {
+               datum: "2026-01-08", 
+                umelec: "🎤 Spike 1000",
+                nazev: "💿 Waste of Skin",
+                img: "https://resources.tidal.com/images/a4538346/a01f/4c8f/9898/009a5c6a6aa8/1280x1280.jpg",
+                vydano: "2001",
+                recenze: "Kapela s frontwoman, což v nu-metalu (kromě Kittie a Otep) nebylo tak časté. Skvělý mix melodie a tvrdosti.",
+                tidal: "https://tidal.com/album/539804",
+                spotify: "https://open.spotify.com/album/5vlJuHJKL0fkvGBoZbaDnK", 
+            },
+            {
+               datum: "2026-01-09", 
+                umelec: "🎤 Boy Hits Car",
+                nazev: "💿 Boy Hits Car",
+                img: "https://resources.tidal.com/images/6efa2bb4/ff0b/4f6d/8846/333f3a23bf91/1280x1280.jpg",
+                vydano: "9.1.2001",
+                recenze: "Co to je: Lovecore. Tahle kapela míchala nu-metal s world music a akustickými kytarami. Naprosto unikátní zvuk, který jinde neuslyšíš.",
+                tidal: "https://tidal.com/album/32074179",
+                spotify: "https://open.spotify.com/album/6hutUJoKIA9u0pMyNHlVDv", 
+            },
+            {
+               datum: "2026-01-10", 
+                umelec: "🎤 Haunted Horses",
+                nazev: "💿 Dweller",
+                img: "https://resources.tidal.com/images/9a58454f/1c26/45e7/962d/6ef831f55fbc/1280x1280.jpg",
+                vydano: "10.1.2025",
+                recenze: "Moderní pojetí noise-rocku a industrialu. Pokud máš rád temnější stránku grunge (jako rané Nirvana B-sides), tohle tě bude bavit.",
+                tidal: "https://tidal.com/album/398251424",
+                spotify: "https://open.spotify.com/artist/6snN2rjeQQ7pG8SMJ5w2Gm", 
+            },
+            {
+               datum: "2026-01-11", 
+                umelec: "🎤 Kittie",
+                nazev: "💿 Spit",
+                img: "https://resources.tidal.com/images/2c19c887/366c/429d/98f4/a9b67eb63c5f/1280x1280.jpg",
+                vydano: "11.1.2000",
+                recenze: "Legenda: První album Kittie původně vyšlo na podzim 1999, ale 11. ledna vyšla verze, která dobyla svět. Píseň Brackish je absolutní hymna ženského nu-metalu.",
+                tidal: "https://tidal.com/album/334245150",
+                spotify: "https://open.spotify.com/album/5PyNZ5DIu4UNWYfIgJwqXH", 
+            },
+            {
+               datum: "2026-01-12", 
+                umelec: "🎤 Motograter",
+                nazev: "💿 Motograter",
+                img: "https://resources.tidal.com/images/8cfab8c4/5639/42b2/9da4/ded8a0299ab4/1280x1280.jpg",
+                vydano: "2003",
+                recenze: "Kapela, kde začínal Ivan Moody (dnes Five Finger Death Punch). Používali vlastnoručně vyrobený nástroj Motograter z průmyslových kabelů. Temné, kmenové, hutné.",
+                tidal: "https://tidal.com/album/255519",
+                spotify: "https://open.spotify.com/album/4BoC5fsK04wLyeEYEIaOpn", 
+            },
+            {
+               datum: "2026-01-13", 
+                umelec: "🎤 Korn",
+                nazev: "💿 Forgotten",
+                img: "https://resources.tidal.com/images/30698456/aeb8/42e8/bec7/46cbb74a7693/1280x1280.jpg",
+                vydano: "13.1.2022",
+                recenze: "V tento den Korn vydali první ochutnávku z alba Requiem. Pusť si to a k tomu třeba celé album, ať vidíš, jak zní staří fotři nu-metalu dnes.",
+                tidal: "https://tidal.com/album/211473089",
+                spotify: "https://open.spotify.com/track/00BBwHjAf8WWq4HcOtEJO1", 
+            },
+            {
+               datum: "2026-01-14", 
+                umelec: "🎤 40 Below Summer",
+                nazev: "💿 Invitation to the Dance",
+                img: "https://resources.tidal.com/images/ea5a2b35/3412/4073/a9c3/2bbc8f353168/1280x1280.jpg",
+                vydano: "2001",
+                recenze: "Pokud hledáš kapelu, která zní jako mix Slipknot a Incubus, jsi doma. Zpěvák Max Illidge má jeden z nejlepších hlasů v žánru.",
+                tidal: "https://tidal.com/album/3470519",
+                spotify: "https://open.spotify.com/album/7mtd4Uz9RrBecHD6jaQWLb", 
+            },
+            {
+               datum: "2026-01-15", 
+                umelec: "🎤 Five Bolt Main",
+                nazev: "💿 Venting",
+                img: "https://resources.tidal.com/images/30e7f16b/0e95/4342/97d8/afc688b1d5f8/1280x1280.jpg",
+                vydano: "2005",
+                recenze: "Projekt zpěváka z Flaw. Je to melodický, emotivní nu-metal/post-grunge. Ideální na klidnější poslech uprostřed měsíce. Bohužel Tidal toto album nenabízí.",
+                tidal: "https://tidal.com/artist/16503",
+                spotify: "https://open.spotify.com/album/227IyUn6NiHO2lE0tfZKfa", 
+            },
+            {
+               datum: "2026-01-16", 
+                umelec: "🎤 Dry Kill Logic",
+                nazev: "💿 The Darker Side of Nonsense",
+                img: "https://resources.tidal.com/images/9bfd6d5b/13fa/40a7/96e1/89076a5a1319/1280x1280.jpg",
+                vydano: "2001",
+                recenze: "Tohle je pro dny, kdy jsi naštvaný. Čistá agrese, žádné rapování o holkách, jen tvrdé riffy a řev. Skladba Rot je brutální.",
+                tidal: "https://tidal.com/album/704273",
+                spotify: "https://open.spotify.com/album/2MwTe2PM8IAZy84vfYtpEz", 
+            },
+            {
+               datum: "2026-01-17", 
+                umelec: "🎤 Simon Says",
+                nazev: "💿 Shut Your Breath",
+                img: "https://resources.tidal.com/images/f31ef27f/ff1c/4331/9415/d46637bf6879/1280x1280.jpg",
+                vydano: "2001",
+                recenze: "Sacramento scene. Velmi nedoceněná kapela, která míchala post-grunge s nu-metalovou tvrdostí. Produkoval to stejný člověk jako Limp Bizkit.",
+                tidal: "https://tidal.com/album/311515701",
+                spotify: "https://open.spotify.com/album/3f3a5L0nq6H3GIA4b0i74U", 
+            },
+            {
+               datum: "2026-01-18", 
+                umelec: "🎤 Nothingface",
+                nazev: "💿 Violence",
+                img: "https://resources.tidal.com/images/959120fe/33b0/40be/bd74/0f350517eb76/1280x1280.jpg",
+                vydano: "2000",
+                recenze: "Mnozí fanoušci považují Nothingface za nejlepší nu-metalovou kapelu, která se nikdy nestala slavnou. Komplexní, technické, ale stále chytlavé.",
+                tidal: "https://tidal.com/album/35146920",
+                spotify: "https://open.spotify.com/album/7yQZd3pPslCqM6J1IOMWMj", 
+            },
+            {
+               datum: "2026-01-19", 
+                umelec: "🎤 Pressure 4-5",
+                nazev: "💿 Burning the Process",
+                img: "https://resources.tidal.com/images/496ab361/fea3/4292/9bdc/059a771b4be6/1280x1280.jpg",
+                vydano: "2001",
+                recenze: "Zněli hodně jako Papa Roach, ale trochu techničtěji. Hráli na Ozzfestu a pak zmizeli. Skrytý klenot roku 2001.",
+                tidal: "https://tidal.com/album/3974107",
+                spotify: "https://open.spotify.com/album/1u0Wtdd0tuDiCmoUb5mg6l", 
+            },
+            {
+               datum: "2026-01-20", 
+                umelec: "🎤 Slaves on Dope",
+                nazev: "💿 Inches from the Mainline",
+                img: "https://resources.tidal.com/images/08de420c/3e36/4b2f/a48d/0dd9ee40e499/1280x1280.jpg",
+                vydano: "2000",
+                recenze: "První kapela, kterou Ozzy Osbourne podepsal na svůj label. Kanadský nu-metal, hodně ovlivněný Faith No More a Korn.",
+                tidal: "https://tidal.com/album/123800451",
+                spotify: "https://open.spotify.com/album/6FH0kAYm6rSSSZEdj0cIJb", 
+            },
        ];
--- a/script.js
+++ b/script.js
@@ -33,13 +33,15 @@ const dnes = `${rok}-${mesic}-${den}`;
            // Dnešní album
            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>
-
+                    <p><a href="./about.html" class="btn about">👉🏻 O projektu 👈🏻</a></p>
                </div>
            `;
        } else {
@@ -52,16 +54,7 @@ const dnes = `${rok}-${mesic}-${den}`;
            `;
        }

-        // --- 5. 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)";
-});

 // --- 6. LOGIKA PRO ARCHIV (Předchozí alba) ---

--- a/scriptabout.js
+++ b/scriptabout.js
@@ -0,0 +1,10 @@
+// --- 5. Photo Gallery -> section (zoom)
+const img = document.querySelector(".zoom");
+
+img.addEventListener("mouseenter", () => {
+  img.style.transform = "scale(10.2)";
+});
+
+img.addEventListener("mouseleave", () => {
+  img.style.transform = "scale(1)";
+});
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-body { font-family: sans-serif; text-align: center; padding: 50px; background-color: #333; }
+body { font-family: sans-serif; text-align: center; padding: 50px; background-image: url(./img/so0naj17qrh91.jpg);  }
        .album-card { 
            background: grey; 
            padding: 20px; 
@@ -8,9 +8,11 @@ body { font-family: sans-serif; text-align: center; padding: 50px; background-co
            max-width: 400px;
        }
        img { width: 100%; border-radius: 5px; margin-bottom: 15px; }
-        h1 { color: black }
+        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 */
@@ -28,28 +30,13 @@ body { font-family: sans-serif; text-align: center; padding: 50px; background-co
 /* 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 */

 .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 {
--- a/styleabout.css
+++ b/styleabout.css
@@ -0,0 +1,44 @@
+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;
+}
+