Quartz 4

Závěrečný projekt

3 min read

🔥 ANO, Hrote Bagr — tohle je přesně ono! 🔥

To, co popisuješ, má obrovský potenciál — je to osobní, vizuálně silné a technicky zvládnutelné.

Představ si, že na veletrhu otevřeš web s názvem třeba „DarkDash: Gothic Personal Dashboard“, kde se všechno hýbe, svítí runovým světlem a dýchá atmosférou „dark fantasy productivity“.

A přitom to není jen efekt, ale i praktický nástroj pro tvůj každodenní život. 🕯️⚙️

🏰 Tvoje finální projektová vize (verze, kterou můžeš použít i pro zadání učiteli):

🕯️ Název projektu:

DarkDash – Gothic Personal Dashboard

🎯 Cíl projektu:

Cílem projektu je vytvořit osobní webovou aplikaci ve stylu gothic/dark fantasy, která kombinuje estetiku temného designu s praktickými funkcemi pro každodenní život.

Dashboard umožní sledovat aktuální počasí, čas, zaznamenávat fitness výkony, ukládat osobní poznámky, sledovat progres a získávat motivaci formou citátů nebo motivačních hlášek.

⚙️ Funkční části (moduly):

🌤️ 1. Počasí a čas

  • API: OpenWeatherMap

  • Zobrazení aktuálního počasí, teploty, lokace a času

  • Animace (např. temný déšť, blesky, stíny)

  • Styl: temné barvy, lehký kouřový efekt v pozadí

🏋️ 2. Fitness & Aktivita Tracker

  • Možnost přidávat denní sportovní výkony (běh, posilování, turistika, Sokol akce)

  • Ukládání dat do LocalStorage nebo Firebase

  • Statistiky: součet tréninků, průměrné výkony, graf (např. pomocí Chart.js)

  • Přehled aktivit s datem a poznámkou („běh 5 km – osobák 🔥“)

📓 3. Motivace a poznámky

  • Citát dne (náhodně vybíraný z JSON souboru nebo API)

  • Sekce pro psaní vlastních poznámek (deník / PR – osobní rekordy, cíle, myšlenky)

  • Uložení do LocalStorage (přetrvá i po zavření prohlížeče)

🕸️ 4. Dark fantasy design

  • Barevná paleta: černá, fialová, tmavě šedá, rudá

  • Fonty: Cinzel Decorative, Cormorant Garamond

  • Vizuální efekty:

    • pohybující se kouř (CSS nebo canvas)

    • rozsvěcující se runy / světlo po hoveru

    • zvuky při kliknutí (volitelně)

  • Animace pomocí Anime.js / GSAP

🧠 5. Rozšíření (volitelně)

  • Režim „focus“ – minimalistický mód pro práci

  • Den/noc přepínač s jiným pozadím

  • Statistiky výkonu za měsíc (graf)

  • Export dat do .json (záloha)

📊 Prezentace na veletrhu

Na veletrhu spustíš aplikaci na velkém monitoru:

  • úvodní obrazovka: „Welcome, Warrior of Routine“

  • živý dashboard (počasí, čas, motivace, aktivita)

  • ukázka přidání sportovního záznamu, citátu, poznámky

  • můžeš přidat i krátké video s ukázkou designu a zvukem pro atmosféru

🧰 Použité technologie:

  • HTML5, CSS3, JavaScript (ES6+)

  • Bootstrap 5 (layout)

  • OpenWeatherMap API

  • Chart.js (grafy)

  • LocalStorage / Firebase (data)

  • Anime.js (animace)

  • Google Fonts (Cinzel / Garamond)

📁 Struktura projektu:

DarkDash/
│
├── index.html
├── css/
│   ├── bootstrap.min.css
│   └── style.css
├── js/
│   ├── main.js
│   ├── weather.js
│   ├── fitness.js
│   ├── motivation.js
│   └── effects.js
├── data/
│   ├── quotes.json
│   └── activities.json
└── assets/
    ├── images/
    ├── backgrounds/
    └── sounds/

🧩 Proč je to ideální projekt pro čtvrtý ročník

✅ osobní a originální téma

✅ moderní technologie (JS, API, Bootstrap)

✅ hotové, otestovatelné, prezentovatelné

✅ možnost rozšíření (verze 2.0 – PWA, grafy, exporty)

✅ zaujme vizuálně i obsahově

Graph View