App TODO Katka.ai
TODO PWA aplikace pro práci s markdown soubory s úkoly. Neon Noir design, File System Access API, 30 minut vývoje.
Co je File System Access API? Moderní Web API, které umožňuje webovým aplikacím číst a zapisovat lokální soubory. Funguje v Chrome a Edge, umožňuje vytvářet PWA aplikace pracující s lokálními daty.
Co je tato aplikace? Jednoduchá TODO aplikace, která načítá markdown soubory s úkoly (formát - [ ] a - [x]) a umožňuje je interaktivně spravovat. Design system Neon Noir / Edgy Luxury.
Pro koho je to relevantní? Vývojáři zajímající se o File System Access API. Lidé hledající jednoduché TODO řešení pro markdown soubory. Příklad rychlého vývoje PWA aplikace.
Statistiky projektu
Kontext
Potřeba: Jednoduchá TODO aplikace pro práci s markdown soubory s úkoly. Aplikace má být ve vizuálním stylu webu katka.ai (Neon Noir / Edgy Luxury).
Design System
| Prvek | Hodnota |
|---|---|
| Font Display | Clash Display |
| Font Body | Space Grotesk |
| Font Mono | JetBrains Mono |
Průběh vývoje
Fáze 1: Analýza vizuální identity
- Prozkoumána složka KATKA_AI/04_WEB/
- Načteny dokumenty vizuální identity
- Extrahován design system z deploy/index.html a deploy/ai-lab/styles.css
Fáze 2: Vytvoření základní aplikace
- Implementován kompletní index.html s Neon Noir design system
- Film grain overlay + Glassmorphism efekty
- File System Access API pro načítání/ukládání souborů
- Markdown parser (## a ### headings, - [ ] a - [x] úkoly)
- Collapsible projekt sekce s počítadlem "X/Y hotovo"
Fáze 3: Přidání PWA podpory
- Vytvořen manifest.json
- Přidány meta tagy pro PWA
- Vytvořeny SVG a PNG ikony
Funkce aplikace
Hlavní funkce
- Načtení .md souboru
- Parsování markdown struktury
- Toggle úkolů (checkbox)
- Uložení změn zpět do souboru
- Indikace neuložených změn
- PWA instalace do Docku
UI prvky
- Časové sekce (## heading)
- Projekty (### heading) – collapsible
- Počítadlo "X/Y hotovo"
- Nesplněné úkoly nahoře
- Splněné úkoly šedé, přeškrtnuté
- Klávesové zkratky (Ctrl+S, Ctrl+O)
Technologie
| Technologie | Účel |
|---|---|
| HTML5 | Struktura |
| CSS3 (CSS Variables) | Neon Noir design system |
| Vanilla JavaScript | Logika aplikace |
| File System Access API | Čtení/zápis souborů |
| PWA (manifest.json) | Instalace jako app |
| Canvas API | Generování PNG ikon |
Struktura projektu
02_App_TODO_Katka/
├── deploy/
│ ├── index.html # Hlavní aplikace (vše inline)
│ └── manifest.json # PWA manifest
├── icon-192.png # PWA ikona 192x192
├── icon-512.png # PWA ikona 512x512
├── generate-icons.html # Pomocný generátor ikon
└── Pracovni_denik/
└── pracovni_denik.md
Poznámky
- File System Access API funguje pouze v Chrome/Edge (ne Firefox/Safari)
- Pro správné fungování PWA ikon je potřeba PNG formát
- Aplikace je plně offline-capable po první instalaci