mirror of
https://codeberg.org/Kankys/musicCalendar.git
synced 2026-01-01 08:12:53 +00:00
Databaze alb, změna stylu do tmavého, historie alb
This commit is contained in:
BIN
img/vyzva-EDIT.jpg
Normal file
BIN
img/vyzva-EDIT.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 458 KiB |
13
index.html
13
index.html
@@ -9,11 +9,17 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>Album pro dnešní den</h1>
|
<!-- <h1>Album pro dnešní den</h1> -->
|
||||||
<h3>💿 Každý den jedno album. 🎸 Zažíj numetal a grunge každý den.</h3>
|
|
||||||
|
<!-- <h1>💿 Každý den jedno album.</h1> -->
|
||||||
|
<h1>🎸 Zažij numetal a grunge každý den. 💿</h1>
|
||||||
|
|
||||||
<div id="zobrazeni-alba"></div>
|
<div id="zobrazeni-alba"></div>
|
||||||
|
<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>
|
<footer>
|
||||||
<p>Líbí se ti výběr? Sleduj mě:</p>
|
<p>Líbí se ti výběr? Sleduj mě:</p>
|
||||||
<div class="socials">
|
<div class="socials">
|
||||||
@@ -24,6 +30,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<p class="copyright">© 2025 Tvůj Hudební Kurátor Kankys</p>
|
<p class="copyright">© 2025 Tvůj Hudební Kurátor Kankys</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
<section class="photo"><img id="vyzva" class="zoom" src="./img/vyzva-EDIT.png" alt="Výzva" ></section>
|
||||||
|
|
||||||
|
<script src="musicData.js"></script>
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
55
musicData.js
Normal file
55
musicData.js
Normal file
@@ -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",
|
||||||
|
}
|
||||||
|
];
|
||||||
87
script.js
87
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 ---
|
// --- 2. ZJIŠTĚNÍ DNEŠNÍHO DATA ---
|
||||||
// Získáme dnešní datum ve formátu RRRR-MM-DD
|
// 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];
|
const dnes = new Date().toISOString().split('T')[0];
|
||||||
|
|
||||||
// Pro testování si můžeš odkomentovat řádek níže a změnit datum ručně:
|
// 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:
|
// Pokud jsme našli album pro dnešek:
|
||||||
vystup.innerHTML = `
|
vystup.innerHTML = `
|
||||||
<div class="album-card">
|
<div class="album-card">
|
||||||
<div class="datum">${dnesniAlbum.datum}</div>
|
<div class="datum">🗓️ ${dnesniAlbum.datum}</div>
|
||||||
<img src="${dnesniAlbum.img}" alt="Obal alba">
|
<img src="${dnesniAlbum.img}" alt="Obal alba">
|
||||||
<h2>${dnesniAlbum.umelec} - ${dnesniAlbum.nazev}</h2>
|
<h2>${dnesniAlbum.umelec} - ${dnesniAlbum.nazev}</h2>
|
||||||
<p><strong>Vyšlo</strong> ${dnesniAlbum.vydano}</p>
|
<p><strong>Vyšlo</strong> ${dnesniAlbum.vydano}</p>
|
||||||
@@ -62,3 +39,61 @@
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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 = "<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">
|
||||||
|
<div class="datum">${album.datum}</div>
|
||||||
|
<a href="${album.tidal}" target="_blank">
|
||||||
|
<img src="${album.img}" alt="${album.nazev}">
|
||||||
|
</a>
|
||||||
|
<h3>${album.umelec}</h3>
|
||||||
|
<div>${album.nazev}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
|
divArchiv.innerHTML = htmlObsah;
|
||||||
|
btnArchiv.textContent = "❌ Zavřít archiv";
|
||||||
|
});
|
||||||
59
style.css
59
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; }
|
img { width: 100%; border-radius: 5px; margin-bottom: 15px; }
|
||||||
h1 { color: black }
|
h1 { color: black }
|
||||||
h3 { color: black}
|
h2 { color: black}
|
||||||
.datum { color: red; font-size: 0.9em; margin-bottom: 10px; }
|
.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 */
|
/* Styl pro tlačítka streamovacích služeb */
|
||||||
.btn {
|
.btn {
|
||||||
display: inline-block; /* Aby měly rozměry */
|
display: inline-block; /* Aby měly rozměry */
|
||||||
@@ -60,3 +61,57 @@ footer a:hover {
|
|||||||
background-color: #f0f0f0;
|
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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user