# Prompt: Osobní Habit Tracker

> Zkopíruj tento prompt do AI (např. ChatGPT, Claude, Grok) a řekni: **„Vytvoř mi tento web podle promptu“**. AI vygeneruje plně funkční aplikaci.

---

## 🎯 Cíl

Vytvoř osobní **habit tracker** aplikaci v Reactu s tmavým minimalistickým designem, zelenými akcenty a ukládáním dat do `localStorage`. Všechny texty jsou v češtině.

---

## 🛠️ Technologie

- **React 19** s TypeScript
- **Vite** (build tool)
- **Tailwind CSS v4** pro stylování
- **Lucide React** pro ikony
- **Google Fonts**: `Space Grotesk` (nadpisy) + `Inter` (text)
- Bez externího backendu — vše v `localStorage`

---

## 🎨 Design systém

### Paleta (CSS custom properties)
```css
:root {
  --radius: 0.75rem;
  --background: oklch(0.16 0.01 160);
  --foreground: oklch(0.96 0.01 140);
  --card: oklch(0.20 0.012 160);
  --card-foreground: oklch(0.96 0.01 140);
  --popover: oklch(0.20 0.012 160);
  --popover-foreground: oklch(0.96 0.01 140);
  --primary: oklch(0.78 0.18 145);          /* zelená */
  --primary-foreground: oklch(0.15 0.02 160);
  --secondary: oklch(0.25 0.015 160);
  --secondary-foreground: oklch(0.96 0.01 140);
  --muted: oklch(0.23 0.012 160);
  --muted-foreground: oklch(0.62 0.02 150);
  --accent: oklch(0.78 0.18 145);
  --accent-foreground: oklch(0.15 0.02 160);
  --destructive: oklch(0.62 0.22 25);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.27 0.012 160);
  --input: oklch(0.25 0.012 160);
  --ring: oklch(0.78 0.18 145);

  /* Heat mapa barvy */
  --heat-0: oklch(0.22 0.012 160);
  --heat-1: oklch(0.36 0.08 145);
  --heat-2: oklch(0.52 0.14 145);
  --heat-3: oklch(0.68 0.17 145);
  --heat-4: oklch(0.82 0.20 145);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;
}
```

### Pravidla designu
- **Tmavé téma** — pozadí téměř černé, text světlý
- **Zelená** (`--primary`) jako jediný akcentní barevný prvek
- **Zaoblené rohy** — `rounded-2xl` na kartách, `rounded-full` na tlačítkách
- **Typography**: nadpisy `Space Grotesk`, tělo `Inter`
- **Animace**: `check-pop` na checkboxu, `fade-up` na dialogu
- Všechny komponenty používají **semantické tokeny** (`bg-card`, `text-primary`, `border-border`)

### Favicon
SVG s tmavým kolečkem a zeleným středem + fajfkou.

---

## 📦 Datový model

```ts
export type Frequency = "daily" | "weekdays" | "weekly";

export interface Habit {
  id: string;
  name: string;
  icon: string;        // název Lucide ikony, např. "Dumbbell"
  frequency: Frequency;
  createdAt: string;   // ISO datum vytvoření
}

export interface HabitState {
  habits: Habit[];
  completions: Record<string, string[]>; // habitId → pole YYYY-MM-DD
}
```

### 5 přednastavených návyků (při prvním spuštění)
1. **Cvičení** — `Dumbbell` — denně
2. **Čtení** — `BookOpen` — denně
3. **Meditace** — `Sparkles` — denně
4. **Voda 2l** — `Droplet` — denně
5. **Bez sociálních sítí po 21:00** — `MoonStar` — denně

---

## 🔧 Funkce a logika

### 1. Správa návyků
- **Přidání** vlastního návyku přes dialog:
  - Název (textový input)
  - Výběr ikony z 20 Lucide ikon (grid 10×2)
  - Frekvence: **Denně / Pracovní dny / Týdně** (3 tlačítka)
- **Smazání** návyku (ikona koše se zobrazí při hoveru na řádku)
- Na první návštěvě se automaticky vytvoří 5 přednastavených návyků a uloží do `localStorage`

### 2. Zaškrtávání návyků
- Každý návyk má **kruhový checkbox** s animací `check-pop` (scale 1 → 1.35 → 1, 0.4s)
- Kliknutím přepneš mezi splněno / nesplněno
- Nesplněné checkboxy mají průhledné pozadí, splněné zelené
- Nepřiřazené návyky (podle frekvence) mají sníženou průhlednost (`opacity-40`)

### 3. Streak counter
- Vedle každého návyku se zobrazí **plamínek** + číslo
- Streak = počet po sobě jdoucích naplánovaných dní, kdy byl návyk splněn
- Pokud dnes není splněno, streak se počítá od včerejška
- Nepřiřazené dny se přeskakují (neberou se do streaku)

### 4. Týdenní heat mapa (GitHub-style)
- Grid **17 týdnů × 7 dní** (pondělí → neděle)
- Každý den = malý čtvereček `3.5×3.5px`, zaoblený `3px`
- Barva podle **procenta splněných návyků** toho dne:
  - `0%` → `--heat-0` (téměř neviditelný)
  - `1–33%` → `--heat-1`
  - `34–66%` → `--heat-2`
  - `67–99%` → `--heat-3`
  - `100%` → `--heat-4` (nejzelenější)
- Po najetí myší se zobrazí tooltip: `YYYY-MM-DD — splněno/celkem`
- Dny do budoucna jsou prázdné (nevykreslené)
- Vlevo popisky dnů: Po, St, Pá, Ne

### 5. Statistiky (3 karty)
1. **Nejdelší streak** — nejvyšší aktuální streak mezi všemi návyky
2. **Tento měsíc** — průměrná úspěšnost (%) od 1. dne měsíce do dneška
3. **Nejsilnější den** — den v týdnu s nejvyšší průměrnou úspěšností za posledních 8 týdnů

### 6. Motivační zpráva
- Pod datem se zobrazuje dynamická zpráva podle dnešního výkonu:
  - `0/0` → *„Žádné návyky na dnešek. Užij si pauzu.“*
  - `0/X` → *„Nový den, čistý štít. Začni jedním malým krokem.“*
  - `100%` → *„Perfektní den. Všechno splněno.“*
  - `≥67%` → *„Skvělá práce — jen kousek schází.“*
  - `≥34%` → *„Rozjeto. Dotáhni to do konce.“*
  - jinak → *„Dobrý start. Pokračuj v tempu.“*

### 7. Header
- Levá strana: logo (klíček `Sprout` + „Habits“), datum ve formátu „úterý 26. května“
- Pravá strana: počet splněných / celkem návyků dnes (velké zelené číslo)

### 8. Ukládání dat
- Vše se ukládá do `localStorage` pod klíčem `habit-tracker-v1`
- Při načítání: pokud localStorage prázdný → vytvoř 5 default návyků
- Při každé změně state se automaticky uloží

---

## 📁 Struktura souborů

```
src/
  styles.css              # Tailwind + CSS variables + animace
  main.tsx                # Entry point + fonty z Google Fonts
  App.tsx                 # Hlavní stránka (header, habit list, heat map, stats)
  lib/
    habits.ts             # Všechna logika (typy, helper funkce, localStorage, statistiky)
  components/
    HabitRow.tsx          # Jeden řádek návyku (checkbox, ikona, frekvence, streak, smazat)
    AddHabitDialog.tsx    # Dialog pro přidání návyku (ikony, frekvence)
    HeatMap.tsx           # GitHub-style heat mapa
    Stats.tsx             # 3 statistické karty + motivační zpráva
public/
  favicon.svg             # Minimalistický zelený favicon
```

---

## 🧮 Klíčové funkce v `lib/habits.ts`

```ts
// Datum jako YYYY-MM-DD
function todayISO(d = new Date()): string

// Přičti dny k datu
function addDays(date: Date, n: number): Date

// Je návyk naplánovaný na daný den?
function isScheduled(habit: Habit, date: Date): boolean

// Načti state z localStorage (nebo vytvoř default)
function loadState(): HabitState

// Ulož state do localStorage
function saveState(state: HabitState)

// Spočti streak (dny v řadě)
function calcStreak(habit: Habit, completed: string[]): number

// Procento splnění pro konkrétní den
function dayCompletionRatio(state, date): { done, total, ratio }

// Heat level (0–4) podle ratio
function heatLevel(ratio, total): 0 | 1 | 2 | 3 | 4
```

---

## 🎨 Detaily UI komponent

### HabitRow
```
┌─────────────────────────────────────────────────────┐
│ [○]  [icon]  Název návyku      🔥 12    🗑         │
│          Denně                                      │
└─────────────────────────────────────────────────────┘
```
- Celý řádek: `rounded-2xl`, `border border-border`, `bg-card`, `px-4 py-4`
- Checkbox: `h-10 w-10`, `rounded-full`, `border-2`
- Ikona: `h-10 w-10`, `rounded-xl`, `bg-secondary`, `text-primary`
- Streak badge: `rounded-full`, `bg-secondary`, plamínek + číslo
- Koš: viditelný jen při hoveru řádku

### HeatMap
- Grid s `gap-1` mezi sloupci
- Tooltip pomocí nativního `title` atributu
- Horizontální scroll na mobilu

### AddHabitDialog
- Backdrop: `bg-background/80 backdrop-blur-sm`
- Dialog: `rounded-2xl`, `bg-card`, `border border-border`, `animate-fade-up`
- Ikony: grid `grid-cols-10 gap-1.5`, vybraná má `border-primary bg-primary/10`
- Frekvence: 3 tlačítka vedle sebe

### Stats
- 3 karty vedle sebe (`sm:grid-cols-3`)
- Každá karta: `rounded-2xl`, `bg-card`, ikona v kruhu `bg-primary/10`

---

## 📱 Responzivita
- Max-width: `768px` (`max-w-3xl`), zarovnání na středu
- Padding: `px-5` mobil, `sm:px-8` desktop
- Stats: 1 sloupec na mobilu, 3 na desktopu

---

## ✅ Checklist pro studenty

- [ ] React + Vite + Tailwind CSS nastaveno
- [ ] Google Fonts `Space Grotesk` a `Inter` připojeny
- [ ] CSS variables definovány v `styles.css`
- [ ] `localStorage` persistuje data
- [ ] 5 default návyků se vytvoří při prvním spuštění
- [ ] Checkbox má animaci při kliknutí
- [ ] Heat mapa zobrazuje 17 týdnů zpětně
- [ ] Streak se počítá správně (přeskakuje neplánované dny)
- [ ] Statistiky se aktualizují živě
- [ ] Dialog na přidání návyku funguje (ikona + frekvence)
- [ ] Návyk se dá smazat
- [ ] Favicon je zelený minimalistický SVG