# Slavic Pulse - Frontend (Dokploy Deployment)

Strona internetowa ze statycznym obrazem tła od pierwszej klatki i krótkim intro wideo streamowanym z YouTube (bez widocznych ramek playera) po załadowaniu.

## Struktura projektu

```
site-slavic-pulse-com/
├── docker-compose.yml                    # Lokalny dev (build: context .)
├── Dockerfile                            # Kontener nginx 1.27 Alpine
├── default.conf                          # Konfiguracja nginx
├── index.html                            # Strona ze streamem YouTube
├── assets/imgs/www-bg-slavic-pulse-com-001.jpg  # Obraz tła (367 KB)
├── assets/imgs/favico/                   # Favicony (48, 180, 512 px)
├── site.webmanifest                      # Manifest PWA / Android
├── .dockerignore                         # Ignorowane pliki przy budowie
├── .gitignore                            # Git ignore
└── docker-compose-example/               # Pliki deploymentowe Dokploy
    ├── docker-compose.yml                # Dokploy: image + git clone
    ├── .env                              # Wymagany przez Dokploy (pusty)
    └── README.md                         # Ten plik
```

## Dwa podejścia do deployu

### 1. Lokalny development (docker-compose.yml w root)

Używa `build:` z Dockerfile — buduje obraz lokalnie. Port hosta ustawiasz w `.env`:

```bash
cp .env.example .env   # opcjonalnie zmień FRONTEND_PORT
cd /home/tomasz-syn-grzegorza/Pulpit/cursor/site-slavic-pulse-com/
docker compose up -d --build
# Strona na http://localhost:${FRONTEND_PORT}  (domyślnie 8082)
```

### 2. Dokploy deployment (docker-compose-example/)

Używa `image:` + runtime git clone — nie wymaga lokalnego build contextu, bo Dokploy kopiuje tylko `docker-compose.yml` i `.env` na serwer.

**Kroki w Dokploy UI:**
1. Nowa aplikacja → wklej zawartość `docker-compose-example/docker-compose.yml`
2. Wklej `.env` z tego samego katalogu (ustaw `FRONTEND_PORT` jeśli potrzebny)
3. Ustaw FQDN w UI (np. `slavic-pulse.com`)
4. Deploy

**Porty:** `FRONTEND_PORT` z `.env` mapuje port hosta na nginx w kontenerze (`${FRONTEND_PORT}:80`). Wewnątrz kontenera nginx zawsze nasłuchuje na porcie 80 (`default.conf`). Dokploy/Traefik routuje po FQDN do tego samego wewnętrznego portu 80.

## Jak to działa

1. **Obraz tła od startu** - Lokalny JPG widoczny od pierwszej klatki; loader znika po załadowaniu obrazka
2. **Intro wideo YouTube** - Standardowy embed YouTube (`kujXXtoHUbc`) jako nakładka po załadowaniu playera
3. **Po zakończeniu filmu** - Warstwa wideo znika, obraz JPG zostaje
4. **Safety timeout 15s** - Jeśli YouTube nie załaduje się w czasie → strona zostaje na obrazku tła

## Modyfikacja

- **Inny film:** zmień `VIDEO_ID` w `index.html`
- **Inny port hosta:** zmień `FRONTEND_PORT` w `.env` (nginx w kontenerze zostaje na porcie 80)