init: static frontend for agency-ai.dev — nginx + YouTube intro video

Static landing page served via nginx 1.27 Alpine container. Features: - Fullscreen background image visible from first paint - YouTube intro video overlay (iframe API, lazy loaded) - PWA manifest with favicons (48x48, 180x180, 512x512) - SEO meta tags (OG, Twitter Cards, canonical URL) - Safety timeout: falls back to static image if YouTube fails Infrastructure: - Dockerfile: nginx 1.27 Alpine with custom default.conf (gzip, cache headers, security headers X-Frame-Options/nosniff) - docker-compose.yml: local dev on FRONTEND_PORT (default 8080) - docker-compose-example/: Dokploy deployment via runtime git clone from Gitea, resource limits (256M RAM, 0.5 CPU) Files: - index.html: main page with inline CSS + JS (YouTube iframe API) - default.conf: nginx config (gzip, caching, security headers) - site.webmanifest: PWA manifest - assets/imgs/: background image + favicons - .env.example: FRONTEND_PORT template
2026-06-26 08:55:39 +00:00
commit d565f83490
15 changed files with 495 additions and 0 deletions
@@ -0,0 +1,59 @@
+# Agencja AI - 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-agency-ai-dev/
+├── 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-agencja-ai-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/m3gan/.hermes/agencja-ai-com/site-agency-ai-dev/
+docker compose up -d --build
+# Strona na http://localhost:${FRONTEND_PORT}  (domyślnie 8080)
+```
+
+### 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. `agencja-ai.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)