# Katalog produktów - CMS (bez WordPressa), wersja 2

Plansza produktu wygląda teraz dokładnie tak jak katalogowe plansze „Bolek” i „Tola”.
Przy produkcie wybierasz jeden z dwóch układów, wgrywasz zdjęcia w opisane miejsca, wpisujesz opis - i to wszystko.

Zanim cokolwiek wgrasz na serwer, otwórz plik **`podglad.html`** w przeglądarce (zwykłe kliknięcie dwa razy).
Zobaczysz oba układy z szarymi polami w miejscach, gdzie trafią Twoje zdjęcia.

---

## Co się zmieniło względem poprzedniej wersji

| Obszar | Zmiana |
|---|---|
| Wygląd planszy | Nowy `catalog.css` odwzorowuje plansze z katalogu: kolorowy pasek, warianty z kropkami, pionowa nazwa produktu, stopka z paletą (kółka + lakierowane słupki stelaży) |
| Dwa układy | Nowa kolumna `products.layout`: `bolek` (układ A) i `tola` (układ B) |
| Zdjęcia | Zamiast luźnej galerii - nazwane miejsca na planszy (`hero`, `side`, `side2`, `classroom`, `feature`, `detail`, `logo`). W panelu każde pole ma opis, gdzie trafi zdjęcie |
| Warianty | Dwa zdjęcia na wariant (lewe i prawe), opis wieloliniowy - łamie się dokładnie tam, gdzie wciśniesz Enter |
| Kolory | Tabela `product_colors` w końcu jest używana - przy produkcie zaznaczasz, które kolory pokazać. Brak zaznaczenia = pokazujemy całą paletę |
| Slug | Poprawiony błąd: „Bolek” dawało slug `-olek`. Teraz `bolek`, z obsługą polskich znaków i doklejaniem `-2` przy powtórce |
| Kasowanie | Usunięcie produktu / podmiana zdjęcia kasuje też stary plik z `uploads/` (wcześniej pliki zostawały na zawsze) |
| Bezpieczeństwo | Tokeny CSRF w formularzach, `session_regenerate_id` po zalogowaniu, twardsza walidacja uploadu (plik musi być realnym obrazem), komunikaty błędów bazy bez danych logowania |
| Telefon | Plansza zwija się do czytelnej kolumny na ekranach poniżej 860 px |

---

## Instalacja na LH.pl

### A) Nowa instalacja

1. Załóż bazę MySQL w panelu LH.pl.
2. W phpMyAdmin zaimportuj `sql/katalog_produktow_schema.sql`.
3. Wgraj cały katalog przez FTP do `public_html` (albo do katalogu subdomeny).
4. Uzupełnij `config.php` - host, nazwa bazy, login, hasło.
5. Utwórz konto: wejdź w phpMyAdmin -> tabela `users` -> wstaw wiersz:
   - `login`: np. `klient`
   - `password_hash`: wynik z `password_hash('twoje_haslo', PASSWORD_DEFAULT)`
   - `role`: `admin`
6. Nadaj katalogowi `uploads/` prawa zapisu (755 lub 775).
7. Zaloguj się na `/admin/login.php`.

### B) Masz już starą wersję (są dane w bazie)

1. W phpMyAdmin uruchom **raz** `sql/migracja_v2.sql`.
2. Podmień pliki PHP i CSS na te z tej paczki (`config.php` zostaw swój - dopisz tylko brakującą stałą `MAX_IMAGE_WIDTH`).
3. Wejdź w panel i przy każdym produkcie wybierz układ oraz wgraj zdjęcia w nowe pola.

Do wygenerowania hasła możesz użyć jednorazowego pliku, który potem **skasuj z serwera**:

```php
<?php echo password_hash('twoje_haslo', PASSWORD_DEFAULT); ?>
```

---

## Jak dodać nowy produkt (2 minuty)

1. Panel -> **+ Nowy produkt**.
2. **Układ** - A (jak Bolek) albo B (jak Tola).
3. **Dane podstawowe** - nazwa, kategoria, kolor planszy (pasek, kropki i pionowy napis biorą ten kolor).
4. **Zdjęcia planszy** - każde pole podpisane jest miejscem na planszy. Zdjęcia produktowe wgrywaj na białym tle.
5. **Warianty** - jeden wariant to jedno lub dwa zdjęcia obok siebie plus opis. Tytuł to linijka przy kropce, resztę wpisujesz w polu opisu, każdą linijkę od nowej linii, np.:
   ```
   stelaż - Ø 25mm,
   sklejka buk,
   rozmiar 4,5,6,7
   ```
6. **Kolory** - odznacz te, których przy tym produkcie nie ma.
7. Zaznacz **Opublikowany** i zapisz. Podgląd: `katalog/produkt.php?slug=nazwa`.

### Ile czego mieści plansza

| Układ | Warianty | Zdjęcia |
|---|---|---|
| A („Bolek”) | 3 (max 4) | główne + krzesło w prawym górnym rogu + duże krzesło na dole + detal przy prawej krawędzi |
| B („Tola”) | 1 (max 2) | główne (duże, z dzieckiem) + 2 krzesła w prawym górnym rogu + zdjęcie sali + duże krzesło na tle sali + logo |

### Zdjęcia - jak przygotować

- Krzesła: **białe tło**, produkt wycentrowany, format pionowy - są wpasowywane w całości (bez przycinania).
- Zdjęcia z dziećmi / sala: kadrowane do ramki, więc najważniejsze rzeczy trzymaj bliżej środka kadru.
- Wystarczy 1600 px szerokości - system i tak zmniejsza większe pliki (`MAX_IMAGE_WIDTH` w `config.php`).
- Formaty: JPG, PNG, WEBP, do 8 MB.

---

## Struktura plików

```
katalog_cms/
├── admin/                  panel: logowanie, produkty, kategorie, kolory
│   ├── product_edit.php    formularz produktu (układ + zdjęcia + warianty + kolory)
│   └── partials/nav.php
├── katalog/                część publiczna
│   ├── index.php           lista produktów
│   ├── produkt.php         wczytuje dane i wybiera układ
│   └── partials/
│       ├── plansza-bolek.php   układ A
│       ├── plansza-tola.php    układ B
│       └── kolory.php          wspólna stopka z paletą
├── includes/               auth.php, upload.php, helpers.php
├── assets/css/             catalog.css (plansze), admin.css (panel)
├── sql/                    schemat bazy + migracja
├── uploads/                wgrane zdjęcia
├── podglad.html            statyczny podgląd obu układów
└── config.php
```

## Jak zmienić proporcje planszy

Cała plansza jest rysowana w siatce **1800 × 1270 px** i skalowana proporcjonalnie do szerokości ekranu.
W `assets/css/catalog.css` każda wartość zapisana jest jako `calc(N * var(--px))`, gdzie `N` to piksel projektu.
Chcesz przesunąć zdjęcie o 20 px w prawo - zmieniasz jedną liczbę, a plansza dalej skaluje się poprawnie.

## Wymagania hostingu

- PHP 8.0+ z rozszerzeniami GD i PDO MySQL (standard na LH.pl)
- MySQL 5.7+ / 8.0
- Przeglądarki: Chrome/Edge 105+, Safari 16+, Firefox 110+ (plansza używa jednostek container query)