# Design Preview System - Claude Instruksjoner

## Oversikt

Dette systemet bruker HTML/CSS for å lage presise UI-design previews lokalt. Ingen eksterne verktøy trengs - bare en nettleser og Playwright for screenshots.

## Arbeidsflyt

```
1. Bruker beskriver ønsket design (eller deler referansebilde)
2. Claude lager HTML-fil i /pages/
3. Bruker åpner i nettleser ELLER Claude tar screenshot med Playwright
4. Bruker gir feedback
5. Claude justerer HTML/CSS
6. Gjenta til godkjent
```

---

## Designsystem - Byggekamera

### Farger

```css
:root {
  /* Bakgrunner */
  --gray-0: #0A0A0A;           /* Hovedbakgrunn */
  --gray-1: #1A1A1A;           /* Sekundær bakgrunn, kort */
  --gray-2: #262626;           /* Hover, alternerende rader */
  --gray-3: #333333;           /* Aktive elementer */

  /* Primary (gull/bronse) */
  --primary-main: #C48F4D;
  --primary-dark: #8B5F2D;
  --primary-light: rgba(196, 143, 77, 0.16);

  /* Tekst */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.73);
  --text-disabled: rgba(255, 255, 255, 0.46);

  /* Status */
  --success: #13C665;
  --warning: #FFB303;
  --error: #D3341F;

  /* Borders */
  --border-divider: rgba(255, 255, 255, 0.06);
  --border-card: rgba(255, 255, 255, 0.12);
  --border-input: rgba(255, 255, 255, 0.23);
}
```

### Typografi

```css
/* Font: Roboto Condensed, weight 300 (light) */
font-family: 'Roboto Condensed', sans-serif;
font-weight: 300;

/* Størrelser */
--text-xs: 10px;
--text-sm: 12px;
--text-base: 14px;
--text-lg: 16px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 32px;
```

### Spacing

```css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
```

### Border Radius

```css
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
```

---

## Komponent-mønstre

### Knapper

```html
<!-- Primary -->
<button class="btn btn-primary">Label</button>

<!-- Secondary/Ghost -->
<button class="btn btn-ghost">Label</button>

<!-- Icon button -->
<button class="btn-icon">
  <svg>...</svg>
</button>
```

### Kort (Cards)

```html
<div class="card">
  <div class="card-header">...</div>
  <div class="card-body">...</div>
</div>
```

### Tabs

```html
<div class="tabs">
  <button class="tab active">Tab 1</button>
  <button class="tab">Tab 2</button>
</div>
```

### Status-badges

```html
<span class="badge badge-success">Online</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-neutral">Deactivated</span>
```

### Filter-chips

```html
<div class="chip-group">
  <button class="chip active">All</button>
  <button class="chip">
    <span class="dot dot-success"></span>
    Online
  </button>
</div>
```

---

## Ikoner

Bruk inline SVG for ikoner. Vanlige ikoner:

- **Meny (3 dots)**: Vertikal ellipsis
- **Søk**: Forstørrelsesglass
- **Online**: Grønn sirkel
- **Warning**: Gul trekant
- **Error**: Rød sirkel med X
- **Video**: Kamera-ikon
- **Cloud**: Sky-ikon

---

## Screenshot-prosedyre

**VIKTIG: Følg denne prosedyren for ALLE screenshots!**

### 1. Start lokal server (file:// er blokkert)
```bash
cd /Users/fredrikahlsen/Documents/Prosjekt/Penpot/design-preview
python3 -m http.server 8765 &
```

### 2. Ta screenshot med Playwright
```javascript
// Naviger til siden
await page.goto('http://localhost:8765/pages/sidenavn.html');

// Ta fullpage screenshot
await page.screenshot({ fullPage: true });
```

### 3. Arkiver og lagre screenshot

**ALLTID arkiver forrige versjon før du overskriver!**

```bash
# Opprett mapper hvis de ikke finnes
mkdir -p screenshots/sidenavn/archive

# Arkiver eksisterende current.png (hvis den finnes)
if [ -f screenshots/sidenavn/current.png ]; then
  mv screenshots/sidenavn/current.png \
     screenshots/sidenavn/archive/v$(date +%Y%m%d-%H%M%S).png
fi

# Kopier nytt screenshot som current.png
cp /path/to/new-screenshot.png screenshots/sidenavn/current.png
```

### 4. Stopp server når ferdig
```bash
pkill -f "python3 -m http.server 8765"
```

---

## Filstruktur

```
design-preview/
├── CLAUDE.md              # Denne filen
├── assets/                # Bilder, fonter, ikoner
├── components/            # Gjenbrukbare HTML-snippets
├── pages/                 # Fullstendige side-previews
│   └── cameras-list.html
└── screenshots/           # Genererte screenshots
    └── cameras-list/      # En mappe per side
        ├── current.png    # Gjeldende versjon
        └── archive/       # Tidligere versjoner
            ├── v20260121-120730.png
            └── v20260121-143022.png
```

### Navnekonvensjon for screenshots
- `current.png` - Alltid gjeldende versjon
- `archive/vYYYYMMDD-HHMMSS.png` - Arkiverte versjoner med timestamp
- `archive/vYYYYMMDD-HHMMSS.md` - Changelog for hver versjon

---

## Changelog-filer

**For hver side skal det finnes en changelog-fil som dokumenterer endringer.**

### Når opprettes changelog?
- Opprett `CHANGELOG.md` i sidens screenshot-mappe når første versjon arkiveres
- Oppdater filen hver gang en ny versjon arkiveres

### Format

```markdown
# [sidenavn] Changelog

## current
- [Beskrivelse av siste endring]

## vYYYYMMDD-HHMMSS
- [Én setning per endring]
- [Én setning per endring]
```

### Eksempel: cameras-list

```markdown
# cameras-list Changelog

## current
- Implementert kompakt schedule-format (Hourly | 4:00–23:00 | Mon–Fri)

## v20260121-181108
- Begrenset prosjektbeskrivelse til én linje med ellipsis
- Lagt til tom linje-placeholder for kort uten beskrivelse

## v20260121-180824
- Satt fast høyde (180px) på thumbnail-bilder
- Lagt til align-items: stretch på grid
```

### Regler
1. **Kun design-endringer** - Ikke dokumenter tekniske detaljer eller bugfixes under utvikling
2. **Én setning per endring** - Kort og beskrivende
3. **Kronologisk rekkefølge** - Nyeste øverst
4. **Start fra første arkivering** - Ikke dokumenter endringer før første screenshot er tatt

---

## Implementeringsfil

**Hver side skal ha en `IMPLEMENTATION.md` som oppsummerer hva utvikler må gjøre.**

### Formål
- Gi utvikler en kort sjekkliste over endringer fra prod til current
- Holdes oppdatert når current endres
- Erstatter hele innholdet ved hver oppdatering (ikke append)

### Format

```markdown
# [sidenavn] – Endringer å implementere

Endringer fra dagens produksjonsdesign til current.png:

1. [Konkret endring]
2. [Konkret endring]
3. [Konkret endring]
```

### Regler
1. **Nummerert liste** - Enkelt å følge og krysse av
2. **Konkrete handlinger** - "Fjern X", "Endre Y til Z", "Legg til W"
3. **Ingen historikk** - Kun diff mellom prod og current
4. **Oppdater ved hver endring** - Skriv hele filen på nytt

---

## Tips for presisjon

1. **Bruk eksakte verdier** fra designsystemet - aldri tilnærminger
2. **Placeholder-bilder**: Bruk grå bokser med riktig aspect ratio
3. **Responsivitet**: Design for 1440px bredde som standard
4. **Sammenlign**: Legg screenshot ved siden av referanse for å verifisere

---

## Metode: Lese fra GitHub for 100% match

For å oppnå pixel-perfekt design, les direkte fra kildekoden i stedet for å gjenskape fra screenshots.

### 1. Klon repository (én gang)

```bash
cd /Users/fredrikahlsen/Documents/Prosjekt/Penpot
git clone https://github.com/GDX-AS/byggekamera.git byggekamera-source
```

### 2. Nøkkelfiler å lese

| Fil | Innhold |
|-----|---------|
| `client/tailwind.config.ts` | Alle farger, spacing, breakpoints |
| `client/src/views/*.vue` | Side-layout og struktur |
| `client/src/components/**/*.vue` | Komponent-struktur og styling |

### 3. Konverter Tailwind til CSS

Tailwind-klasser → CSS-verdier:

```
Tailwind          CSS
────────────────────────────────
rounded-xl        border-radius: 12px
bg-[#262626]      background: #262626
py-3 px-4         padding: 12px 16px
gap-5             gap: 20px
text-sm           font-size: 14px
h-5 w-5           width: 20px; height: 20px
size-1.5          width: 6px; height: 6px
sm:size-2         @media (min-width: 640px) { width: 8px; height: 8px }
```

### 4. Eksempel: CameraListItem

Fra `CameraListItem.vue`:

```vue
<li class="flex flex-col w-full justify-between rounded-xl bg-[#262626]
    relative border border-neutral-ondark-divider h-full">
```

Konverteres til:

```css
.camera-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
  border-radius: 12px;           /* rounded-xl */
  background: #262626;           /* bg-[#262626] */
  border: 1px solid rgba(255, 255, 255, 0.06);  /* neutral-ondark-divider */
  height: 100%;
}
```

### 5. Viktige filer for Cameras List

| Komponent | Fil | Beskrivelse |
|-----------|-----|-------------|
| Kamerakort | `components/camera/CameraListItem.vue` | Hovedkort-layout |
| Status-indikator | `components/camera/CameraStatus.vue` | Nested circles (h-5 w-5 + h-3 w-3) |
| Historikk-bar | `components/camera/CameraHistoryStatus.vue` | 30 segmenter (size-1.5 / sm:size-2) |
| Side-layout | `views/Cameras.vue` | Grid (grid-cols-3), tabs, filter-chips |

### 6. Fargereferanse (fra tailwind.config.ts)

```css
/* Direkte fra kildekoden */
--primary-main: #C48F4D;
--primary-light: rgba(196, 143, 77, 0.16);
--gray-0: #0A0A0A;
--gray-1: #1A1A1A;
--gray-2: #262626;
--gray-3: #333333;
--success-main: #13C665;
--success-background: rgba(19, 198, 101, 0.16);
--warning-main: #FFB303;
--warning-background: rgba(255, 179, 3, 0.24);
--error-main: #D3341F;
--error-background: rgba(211, 52, 31, 0.12);
--light-primary: #FFFFFF;
--light-secondary: rgba(255, 255, 255, 0.73);
--light-disabled: rgba(255, 255, 255, 0.46);
--neutral-ondark-divider: rgba(255, 255, 255, 0.06);
--neutral-ondark-card-outline-border: rgba(255, 255, 255, 0.12);
```

---

## Vanlige oppgaver

### Ny side
1. Kopier eksisterende side som mal
2. Oppdater innhold
3. Test i nettleser
4. Ta screenshot

### Justere spacing
- Bruk `--space-*` variabler
- Inspiser i DevTools for nøyaktig måling

### Legge til ny komponent
1. Lag i `/components/` først
2. Test isolert
3. Integrer i side