mirror of
https://codeberg.org/Kankys/musicCalendar.git
synced 2026-11-11 05:54:36 +01:00
updateProject
This commit is contained in:
kankys committed
1 parent
8a2c5aabb7
commit
61f1c2f88a
2 files changed
+885
-34
No files matched your search
@@ -1,42 +1,345 @@
|
||||
# 💿 Každý den jedno album. 🎸 Denní hudební doporučení.
|
||||
## 🎵 365 alb na celý rok
|
||||
## 🤟 Prozkoumej historii rockové hudby.
|
||||
Odkaz na [Denní Hudební Doporučení](https://music.lukan.cz)
|
||||
# 🎸 Denní Hudební Doporučení: 365 Alb na Celý Rok 💿
|
||||
|
||||
**Co je nového:**
|
||||
|
||||
🎸 **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
|
||||
> **Každý den jedno ikonické grunge nebo nu-metal album. Prozkoumejte historii rockové hudby!**
|
||||
|
||||
🎸 Shrnutí přidaných efektů
|
||||
[](https://music.lukan.cz)
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
[](https://codeberg.org/Kankys/musicCalendar)
|
||||
|
||||
### 🖥️ 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
|
||||
## 🎵 O projektu
|
||||
|
||||
### 💿 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
|
||||
**Denní Hudební Doporučení** je webová aplikace, která každý den nabízí jedno vybrané album z žánrů **grunge** a **nu-metal**. Projekt vznikl jako alternativa k algoritmickým doporučením streamovacích služeb, která nás uzavírají do bubliny známých skladeb.
|
||||
|
||||
### 📂 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)
|
||||
### 🎯 Hlavní cíle
|
||||
- 🎶 **Každý den jedno album** - 365 alb na celý rok 2026
|
||||
- 🔍 **Objevování hudby** - Méně známá, ale kvalitní alba
|
||||
- 🎸 **Grunge & Nu-Metal** - Focus na ikonické žánry 90. let
|
||||
- 💡 **Jednoduchost** - Žádné složité vyhledávání, jen čistý poslech
|
||||
|
||||
### 🔘 Tlačítka
|
||||
- **Archiv** — tmavočervený gradient s červenou září
|
||||
- **Footer** — temně fialový gradient
|
||||
- **Tidal/Spotify/About** — tmavší, stylizovanější verze
|
||||
### 🌟 Proč tento projekt?
|
||||
> "Všimli jste si, jak nás algoritmy Spotify a dalších 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."
|
||||
|
||||
### 🎸 Logo
|
||||
- **Červený `drop-shadow`** + na hover se zvětší a otočí
|
||||
---
|
||||
|
||||
## ✨ Funkce
|
||||
|
||||
### 🎨 Design & UX
|
||||
- 🖤 **Temný metalový vzhled** - Inspirován grunge a nu-metal estetikou
|
||||
- ✨ **Glitch animace** - Dynamické efekty na nadpisech
|
||||
- 🎭 **Pulzující prvky** - Červená záře kolem alb a tlačítek
|
||||
- 📱 **Responsive design** - Optimalizováno pro všechny zařízení
|
||||
- 🎯 **Staggered animace** - Vlnový efekt při načítání archivu
|
||||
|
||||
### 🔧 Technické vlastnosti
|
||||
- ⚡ **Rychlé načítání** - Žádné externí API, vše lokálně
|
||||
- 🗓️ **Automatické datum** - Zobrazení alba pro aktuální den
|
||||
- 📚 **Archiv alb** - Prohlížení minulých doporučení
|
||||
- 🔗 **Streaming integrace** - Přímé odkazy na Tidal a Spotify
|
||||
- 📊 **Vlastní analytics** - Bez externího trackingu
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Rychlý start
|
||||
|
||||
### 🌐 Online verze
|
||||
Aplikaci můžete vyzkoušet přímo online:
|
||||
👉 [https://music.lukan.cz](https://music.lukan.cz)
|
||||
|
||||
### 💻 Lokální spuštění
|
||||
|
||||
#### Požadavky
|
||||
- Moderní webový prohlížeč (Chrome, Firefox, Edge, Safari)
|
||||
- Žádné další závislosti - aplikace běží čistě v prohlížeči
|
||||
|
||||
#### Spuštění
|
||||
1. Naklonujte repozitář:
|
||||
```bash
|
||||
git clone https://codeberg.org/Kankys/musicCalendar.git
|
||||
cd musicCalendar
|
||||
```
|
||||
|
||||
2. Otevřete hlavní stránku ve svém prohlížeči:
|
||||
```bash
|
||||
# Na Linuxu/Macu
|
||||
xdg-open web/index.html # nebo open web/index.html
|
||||
|
||||
# Na Windows
|
||||
start web/index.html
|
||||
```
|
||||
|
||||
3. Nebo spusťte jednoduchý server:
|
||||
```bash
|
||||
# Python 3
|
||||
python3 -m http.server 8000 --directory web
|
||||
|
||||
# Node.js (npx)
|
||||
npx serve web
|
||||
```
|
||||
|
||||
Pak navštivte: [http://localhost:8000](http://localhost:8000)
|
||||
|
||||
---
|
||||
|
||||
## 📁 Struktura projektu
|
||||
|
||||
```
|
||||
musicCalendar/
|
||||
├── web/ # Hlavní webová aplikace
|
||||
│ ├── index.html # Hlavní stránka
|
||||
│ ├── about.html # O projektu
|
||||
│ ├── gdpr.html # Ochrana soukromí
|
||||
│ ├── script.js # Hlavní logika
|
||||
│ ├── scriptabout.js # Logika pro about stránku
|
||||
│ ├── musicData.js # Databáze 365 alb
|
||||
│ ├── style.css # Hlavní styly
|
||||
│ └── img/ # Obrázky
|
||||
│ ├── 4525586.jpg # Pozadí
|
||||
│ ├── electric-guitar_12494348.png # Favicon
|
||||
│ └── vyzva-EDIT.jpg # Logo
|
||||
├── test/ # Testy (Playwright)
|
||||
│ ├── tests/
|
||||
│ │ └── homePage.test.ts
|
||||
│ ├── assets/pages/
|
||||
│ │ └── HomePage.ts
|
||||
│ └── package.json
|
||||
├── .htaccess # HTTPS přesměrování
|
||||
├── LICENSE # MIT License
|
||||
├── README.md # Tento soubor
|
||||
└── DOCUMENTATION.md # Komplexní dokumentace
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎵 Databáze alb
|
||||
|
||||
### 📊 Statistiky
|
||||
- **Počet alb**: 365 (pro celý rok 2026)
|
||||
- **Datumové rozpětí**: 1. ledna 2026 - 31. prosince 2026
|
||||
- **Soubor**: `web/musicData.js` (4011 řádků)
|
||||
|
||||
### 🎯 Žánry a umělci
|
||||
|
||||
#### Grunge
|
||||
Nirvana, Pearl Jam, Soundgarden, Alice in Chains, Stone Temple Pilots, Mudhoney, Temple of the Dog
|
||||
|
||||
#### Nu-Metal
|
||||
Korn, Limp Bizkit, Linkin Park, Slipknot, System of a Down, Deftones, Papa Roach, Disturbed
|
||||
|
||||
#### Alternativní Metal
|
||||
Tool, Primus, Helmet, Faith No More, Rage Against the Machine
|
||||
|
||||
#### Méně známé kapely
|
||||
World Eaters, Relative Ash, Factory 81, Shuvel, NO One, Sw1tched, Twisted Method, Spike 1000, Boy Hits Car
|
||||
|
||||
### 📋 Struktura alba
|
||||
```javascript
|
||||
{
|
||||
datum: "2026-01-01", // Datum ve formátu YYYY-MM-DD
|
||||
umelec: "🎤 World Eaters", // Název kapely
|
||||
nazev: "💿 Hounds of Blood", // Název alba
|
||||
img: "URL k obálce", // Obrázek alba
|
||||
vydano: "01.2025", // Datum vydání
|
||||
recenze: "Popis alba...", // Recenze/doporučení
|
||||
tidal: "URL na Tidal", // Odkaz na Tidal
|
||||
spotify: "URL na Spotify" // Odkaz na Spotify
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Technické detaily
|
||||
|
||||
### 🌐 Technologický stack
|
||||
- **Frontend**: HTML5, CSS3, JavaScript (ES6+)
|
||||
- **Design**: Responsive CSS, CSS Animations
|
||||
- **Testování**: Playwright + TypeScript
|
||||
- **Hosting**: VPS (VPSfree.cz)
|
||||
- **Doména**: music.lukan.cz
|
||||
|
||||
### 🎨 Designové prvky
|
||||
|
||||
#### Barevná paleta
|
||||
| Barva | Hex | Použití |
|
||||
|-------|-----|---------|
|
||||
| Tmavě červená | #8b0000 | Primární barva, bordery |
|
||||
| Jasně červená | #cc0000 | Akcenty, hover efekty |
|
||||
| Tmavě fialová | #2a0033 | Footer, sekundární prvky |
|
||||
| Světle šedá | #e0e0e0 | Text, nadpisy |
|
||||
| Středně šedá | #b0b0b0 | Vedlejší text |
|
||||
|
||||
#### Animace
|
||||
- **Glitch efekt** na hlavním nadpise (každých 6 vteřin)
|
||||
- **Pulzující border** na kartách alb
|
||||
- **Staggered fade-up** pro archivní kartičky
|
||||
- **Hover efekty** na všech interaktivních prvcích
|
||||
- **Scanlines overlay** - starý TV efekt
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testování
|
||||
|
||||
### 🔧 Testovací framework
|
||||
- **Playwright** - Moderní E2E testování
|
||||
- **TypeScript** - Typová bezpečnost
|
||||
- **Page Object Model** - Strukturovaný přístup
|
||||
|
||||
### 🚀 Spuštění testů
|
||||
|
||||
#### Lokálně
|
||||
```bash
|
||||
cd test
|
||||
npm install
|
||||
npm test
|
||||
```
|
||||
|
||||
#### Na produkci
|
||||
```bash
|
||||
cd test
|
||||
BASE_URL=https://music.lukan.cz npm run test:prod
|
||||
```
|
||||
|
||||
### 📋 Aktuální testy
|
||||
- ✅ Test titulu hlavní stránky
|
||||
- ✅ Test URL hlavní stránky
|
||||
- 🔜 Plánované: Test archivu, about stránky, responsive designu
|
||||
|
||||
---
|
||||
|
||||
## 📦 Nasazení
|
||||
|
||||
### 🌐 Produkční prostředí
|
||||
- **URL**: [https://music.lukan.cz](https://music.lukan.cz)
|
||||
- **Hosting**: VPSfree.cz
|
||||
- **Protokol**: HTTPS (vynuceno přes .htaccess)
|
||||
- **Server**: Apache s mod_rewrite
|
||||
|
||||
### 🚀 Deploy proces
|
||||
1. **Vývoj**: Lokální úpravy
|
||||
2. **Testování**: Spuštění Playwright testů
|
||||
3. **Commit**: Uložení změn do Git
|
||||
4. **Push**: Odeslání na Codeberg
|
||||
5. **Nasazení**: Ruční kopírování na VPS
|
||||
|
||||
### 🔄 Automatizace (plánované)
|
||||
- CI/CD pipeline
|
||||
- Automatické testování před deployem
|
||||
- Monitorování dostupnosti
|
||||
|
||||
---
|
||||
|
||||
## 🔒 Bezpečnost & GDPR
|
||||
|
||||
### ✅ Bezpečnostní opatření
|
||||
- **HTTPS** - Vynuceno pro všechny požadavky
|
||||
- **Žádné cookies** - Aplikace neukládá žádná cookies
|
||||
- **Žádný tracking** - Nepoužívá Google Analytics, Facebook Pixel
|
||||
- **Lokální běh** - Všechny výpočty v prohlízeči
|
||||
- **Minimální data** - Pouze základní serverové logy
|
||||
|
||||
### 📜 GDPR Compliance
|
||||
- **Transparence** - Jasné informace o sběru dat
|
||||
- **Minimalizace** - Sbírá se pouze nezbytná data
|
||||
- **Žádný skrytý sběr** - Vše je jasně deklarováno
|
||||
- **Právo na zapomenutí** - Uživatelé mohou požádat o smazání
|
||||
|
||||
### 🔗 Externí služby
|
||||
- **Tidal** - Externí odkazy (data sbírána Tidalem)
|
||||
- **Spotify** - Externí odkazy (data sbírána Spotify)
|
||||
- **Analytics** - Vlastní systém (analytics.lukan.cz)
|
||||
|
||||
---
|
||||
|
||||
## 📈 Roadmap
|
||||
|
||||
### 🎯 Krátkodobé cíle (1-3 měsíce)
|
||||
- [ ] Vylepšené E2E testy
|
||||
- [ ] CI/CD pipeline
|
||||
- [ ] Monitorování dostupnosti
|
||||
- [ ] Optimalizace obrázků (lazy loading)
|
||||
- [ ] PWA podpora (Progressive Web App)
|
||||
|
||||
### 🎯 Střednědobé cíle (3-6 měsíců)
|
||||
- [ ] Uživatelské účty
|
||||
- [ ] Systém hodnocení alb
|
||||
- [ ] Vyhledávání v databázi
|
||||
- [ ] Filtrování podle žánru/roku
|
||||
- [ ] REST API pro přístup k datům
|
||||
|
||||
### 🎯 Dlouhodobé cíle (6-12 měsíců)
|
||||
- [ ] Mobilní aplikace (iOS/Android)
|
||||
- [ ] Integrace se streamovacími službami
|
||||
- [ ] Komunitní funkce (fórum, sdílení)
|
||||
- [ ] Mezinárodní verze (překlady)
|
||||
- [ ] Rozšíření databáze (další žánry/roky)
|
||||
|
||||
---
|
||||
|
||||
## 🤝 Přispění
|
||||
|
||||
### 📝 Jak přispět
|
||||
1. **Nahlásit chybu** - Vytvořte [Issue](https://codeberg.org/Kankys/musicCalendar/issues)
|
||||
2. **Navrhnout vylepšení** - Vytvořte Feature Request
|
||||
3. **Přispět kódem** - Fork → Změny → Pull Request
|
||||
4. **Přidat album** - Navrhněte nové album do databáze
|
||||
5. **Překlad** - Pomozte s překlady do dalších jazyků
|
||||
|
||||
### 🎯 Pravidla pro přispěvatele
|
||||
- Dodržujte existující kódový styl
|
||||
- Přidávejte testy pro nové funkce
|
||||
- Aktualizujte dokumentaci
|
||||
- Pište jasné commit zprávy
|
||||
- Dělejte malé, zaměřené pull requesty
|
||||
|
||||
### 📦 Vývojové prostředí
|
||||
```bash
|
||||
# Klonování
|
||||
git clone https://codeberg.org/Kankys/musicCalendar.git
|
||||
cd musicCalendar
|
||||
|
||||
# Instalace závislostí (pro testování)
|
||||
cd test
|
||||
npm install
|
||||
|
||||
# Spuštění testů
|
||||
npm test
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📜 License
|
||||
|
||||
Projekt je licencován pod **MIT License** - podrobnosti viz [LICENSE](LICENSE) nebo [DOCUMENTATION.md](DOCUMENTATION.md#-license).
|
||||
|
||||
---
|
||||
|
||||
## 📞 Kontakt
|
||||
|
||||
### 👤 Autor
|
||||
- **Jméno**: Lukáš Kaňka (Kankys)
|
||||
- **Web**: [lukaskanka.cz](https://lukaskanka.cz)
|
||||
- **Bluesky**: [@kankys.bsky.social](https://bsky.app/profile/kankys.bsky.social)
|
||||
- **Codeberg**: [@Kankys](https://codeberg.org/Kankys)
|
||||
- **Email**: [Kontaktní formulář](https://lukaskanka.cz/index/about/index.html)
|
||||
|
||||
### 🌐 Projekt
|
||||
- **Live Demo**: [music.lukan.cz](https://music.lukan.cz)
|
||||
- **Repozitář**: [codeberg.org/Kankys/musicCalendar](https://codeberg.org/Kankys/musicCalendar)
|
||||
- **Dokumentace**: [DOCUMENTATION.md](DOCUMENTATION.md)
|
||||
- **Issues**: [codeberg.org/Kankys/musicCalendar/issues](https://codeberg.org/Kankys/musicCalendar/issues)
|
||||
|
||||
---
|
||||
|
||||
## 🏆 Poděkování
|
||||
|
||||
- ✅ Všem kapelám, které inspirovaly tento projekt
|
||||
- ✅ Uživatelům, kteří podporují nezávislé projekty
|
||||
- ✅ [VPSfree.cz](https://vpsfree.cz) za bezplatné hostování
|
||||
- ✅ [Codeberg](https://codeberg.org) za open-source platformu
|
||||
|
||||
---
|
||||
|
||||
> **"Hudba je jazyk duše. A grunge s nu-metalem jsou její nejupřímnější dialekty."** 🎸
|
||||
|
||||
*Poslední aktualizace: 5. srpna 2026*
|
||||
Reference in new issue
Block a user