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,9 @@
+.dockerignore
+.git
+.gitignore
+*.md
+__pycache__/
+node_modules/
+.env
+.venv/
+docker-compose-example/
@@ -0,0 +1,8 @@
+# Agencja AI — Environment Configuration (Local Development)
+# Copy to .env and fill in your values.
+# Never commit .env with real credentials to version control.
+
+# --- Frontend Server ---
+# Port na hoście (localhost). W kontenerze nginx zawsze nasłuchuje na 80.
+# Mapowanie w docker-compose.yml: ${FRONTEND_PORT}:80
+FRONTEND_PORT=8080
@@ -0,0 +1,19 @@
+# Environment files
+.env
+*.env.local
+
+# Python
+__pycache__/
+.venv/
+*.pyc
+
+# Node
+node_modules/
+
+# IDE
+.vscode/
+.idea/
+
+# OS
+.DS_Store
+Thumbs.db
@@ -0,0 +1,19 @@
+FROM nginx:1.27-alpine AS production
+
+# Remove default nginx config
+RUN rm /etc/nginx/conf.d/default.conf
+
+# Copy nginx config from project root
+COPY default.conf /etc/nginx/conf.d/default.conf
+
+# Copy web files (index.html + assets)
+COPY index.html /usr/share/nginx/html/index.html
+COPY site.webmanifest /usr/share/nginx/html/site.webmanifest
+COPY assets/ /usr/share/nginx/html/assets/
+
+EXPOSE 80
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+    CMD wget -qO- http://localhost:80/ || exit 1
+
+CMD ["nginx", "-g", "daemon off;"]
@@ -0,0 +1,35 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;
+    gzip_min_length 1024;
+
+    # Main page
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Web app manifest
+    location = /site.webmanifest {
+        default_type application/manifest+json;
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Assets - long cache for images
+    location /assets/ {
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+        try_files $uri =404;
+    }
+
+    # Security headers
+    add_header X-Frame-Options SAMEORIGIN always;
+    add_header X-Content-Type-Options nosniff always;
+}
@@ -0,0 +1,9 @@
+# Agencja AI — Environment Configuration (Dokploy)
+# Copy to .env before deploy if needed.
+# Never commit .env with real credentials to version control.
+
+# --- Frontend Server ---
+# Port publikowany na hoście. W kontenerze nginx zawsze nasłuchuje na 80.
+# Mapowanie w docker-compose.yml: ${FRONTEND_PORT}:80
+# Dokploy/Traefik dodatkowo routuje po FQDN do wewnętrznego portu 80 kontenera.
+FRONTEND_PORT=8080
@@ -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)
@@ -0,0 +1,47 @@
+# ============================================================
+# Agencja AI - Docker Compose (Dokploy / manual)
+# ============================================================
+# Dokploy-compatible pattern: uses pre-built image + runtime git clone.
+# Dokploy only copies docker-compose.yml + .env to the server, so local
+# build context with a Dockerfile does not work. This approach matches
+# other working apps on our servers (e.g. wdj-hermes-frontend-matrix).
+#
+# Port hosta: FRONTEND_PORT z .env (domyślnie 8080) → nginx w kontenerze na porcie 80.
+# Dokploy/Traefik routuje po FQDN do wewnętrznego portu 80 kontenera.
+# ============================================================
+
+services:
+  frontend:
+    image: nginx:1.27-alpine
+    container_name: agencja-ai-frontend
+    restart: unless-stopped
+    ports:
+      - "${FRONTEND_PORT:-8080}:80"
+
+    command: >
+      sh -c "
+        apk add --no-cache git &&
+        rm -rf /app &&
+        git clone https://gitea.expert-it.agency-ai.dev/tomasz-syn-grzegorza/site-agency-ai-dev.git /app &&
+        cp /app/index.html /usr/share/nginx/html/index.html &&
+        cp /app/site.webmanifest /usr/share/nginx/html/site.webmanifest &&
+        cp -r /app/assets /usr/share/nginx/html/assets &&
+        rm /etc/nginx/conf.d/default.conf &&
+        cp /app/default.conf /etc/nginx/conf.d/default.conf &&
+        nginx -g 'daemon off;'
+      "
+
+    healthcheck:
+      test: ["CMD", "wget", "-qO-", "http://127.0.0.1:80/"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 45s
+
+    deploy:
+      resources:
+        limits:
+          memory: 256M
+          cpus: "0.5"
+        reservations:
+          memory: 64M
@@ -0,0 +1,12 @@
+# Agencja AI — lokalny development (build z Dockerfile)
+# Port hosta: FRONTEND_PORT z pliku .env (domyślnie 8080) → nginx w kontenerze na porcie 80
+
+services:
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: agencja-ai-frontend
+    restart: unless-stopped
+    ports:
+      - "${FRONTEND_PORT:-8080}:80"
@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Agencja AI</title>
+    <!-- SITE_BASE_URL: https://agencja-ai.com -->
+    <meta name="description" content="Lokalne modele LLM, własny serwer AI (Proxmox, TrueNAS, Ubuntu), RAG, Ollama, Open WebUI, bezpieczny self-hosting i wdrożenia biznesowe lokalnej AI.">
+    <link rel="canonical" href="https://agencja-ai.com/">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="Agencja AI">
+    <meta property="og:locale" content="pl_PL">
+    <meta property="og:title" content="Agencja AI">
+    <meta property="og:url" content="https://agencja-ai.com/">
+    <meta property="og:image" content="https://agencja-ai.com/assets/imgs/www-bg-agencja-ai-com-001.jpg">
+    <meta property="og:image:type" content="image/jpeg">
+    <meta property="og:image:alt" content="Agencja AI — lokalna sztuczna inteligencja i self-hosting">
+    <meta property="og:description" content="Lokalne modele LLM (Llama 3, Mistral, Command-R, Phi-3, DeepSeek i inne). Budowa własnego serwera AI na bazie Proxmox, TrueNAS SCALE oraz Ubuntu. Optymalizacja GPU w środowisku Linux (Ubuntu, OpenSUSE, Proxmox). Technologia RAG – jak podpiąć Twoją firmową wiedzę do lokalnego AI. Prywatne instancje Ollama, Open WebUI, AnythingLLM, PrivateGPT. Bezpieczny self-hosting – od konfiguracji Proxmox VE, przez TrueNAS, po produkcyjne wdrożenia. Porównania sprzętu, zużycie prądu, chłodzenie i realne koszty posiadania własnego AI. Automatyzacje, integracje i zaawansowane zastosowania biznesowe lokalnej AI.">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Agencja AI">
+    <meta name="twitter:image" content="https://agencja-ai.com/assets/imgs/www-bg-agencja-ai-com-001.jpg">
+    <meta name="twitter:description" content="Lokalne modele LLM (Llama 3, Mistral, Command-R, Phi-3, DeepSeek i inne). Budowa własnego serwera AI na bazie Proxmox, TrueNAS SCALE oraz Ubuntu. Optymalizacja GPU w środowisku Linux (Ubuntu, OpenSUSE, Proxmox). Technologia RAG – jak podpiąć Twoją firmową wiedzę do lokalnego AI. Prywatne instancje Ollama, Open WebUI, AnythingLLM, PrivateGPT. Bezpieczny self-hosting – od konfiguracji Proxmox VE, przez TrueNAS, po produkcyjne wdrożenia. Porównania sprzętu, zużycie prądu, chłodzenie i realne koszty posiadania własnego AI. Automatyzacje, integracje i zaawansowane zastosowania biznesowe lokalnej AI.">
+    <link rel="icon" type="image/png" sizes="48x48" href="/assets/imgs/favico/48x48.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="/assets/imgs/favico/512x512.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/imgs/favico/180x180.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <meta name="theme-color" content="#000000">
+    <link rel="preload" as="image" href="/assets/imgs/www-bg-agencja-ai-com-001.jpg">
+    <link rel="preconnect" href="https://www.youtube.com">
+    <link rel="preconnect" href="https://www.google.com">
+    <style>
+        *, *::before, *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        html, body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background: #000;
+        }
+
+        /* Outer wrapper — fullscreen viewport */
+        #stage-root {
+            position: fixed;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background: #000;
+        }
+
+        /* Inner canvas — shared box for image + video layers */
+        #stage {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        .stage-layer {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        /* Image layer — visible from first paint */
+        #stage-image img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center;
+        }
+
+        /* Video layer — above image, shown while intro plays */
+        #stage-video {
+            z-index: 2;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+
+        #stage-video.active {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        #stage-image {
+            z-index: 1;
+        }
+
+        #stage-video #player {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+        }
+
+        /* Centered cover iframe — position from CSS, size from JS */
+        #stage-video #player iframe {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            border: none;
+        }
+
+        /* Loading overlay */
+        #loader {
+            position: fixed;
+            inset: 0;
+            z-index: 10;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #000;
+            transition: opacity 0.5s ease;
+        }
+
+        #loader.hidden {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid rgba(255,255,255,0.1);
+            border-top-color: rgba(255,255,255,0.7);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div id="loader"><div class="spinner"></div></div>
+
+    <div id="stage-root">
+        <div id="stage">
+            <div id="stage-image" class="stage-layer">
+                <img src="/assets/imgs/www-bg-agencja-ai-com-001.jpg" alt="">
+            </div>
+            <div id="stage-video" class="stage-layer">
+                <div id="player"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const VIDEO_ID = 'kujXXtoHUbc';
+        const BG_IMAGE = '/assets/imgs/www-bg-agencja-ai-com-001.jpg';
+        let player;
+
+        const loader = document.getElementById('loader');
+        const stageVideo = document.getElementById('stage-video');
+        const stage = document.getElementById('stage');
+        const VIDEO_RATIO = 16 / 9;
+
+        function sizeVideoCover() {
+            const iframe = document.querySelector('#stage-video iframe');
+            if (!stage || !iframe) return;
+
+            const w = stage.clientWidth;
+            const h = stage.clientHeight;
+            let iw, ih;
+
+            if (w / h > VIDEO_RATIO) {
+                iw = w;
+                ih = w / VIDEO_RATIO;
+            } else {
+                ih = h;
+                iw = h * VIDEO_RATIO;
+            }
+
+            iframe.style.width = iw + 'px';
+            iframe.style.height = ih + 'px';
+            iframe.style.position = 'absolute';
+            iframe.style.left = '50%';
+            iframe.style.top = '50%';
+            iframe.style.transform = 'translate(-50%, -50%)';
+            iframe.style.margin = '0';
+        }
+
+        const bgPreload = new Image();
+        bgPreload.onload = () => loader.classList.add('hidden');
+        bgPreload.src = BG_IMAGE;
+
+        const tag = document.createElement('script');
+        tag.src = 'https://www.youtube.com/iframe_api';
+        document.head.appendChild(tag);
+
+        function enableVideoSound() {
+            if (!player || typeof player.unMute !== 'function') return;
+            player.unMute();
+            player.setVolume(100);
+        }
+
+        function onYouTubeIframeAPIReady() {
+            player = new YT.Player('player', {
+                height: '100%',
+                width: '100%',
+                videoId: VIDEO_ID,
+                playerVars: {
+                    autoplay: 1,
+                    mute: 0,
+                    controls: 0,
+                    showinfo: 0,
+                    modestbranding: 1,
+                    rel: 0,
+                    fs: 0,
+                    playsinline: 1,
+                    disablekb: 1,
+                    iv_load_policy: 3,
+                    cc_load_policy: 0,
+                    origin: window.location.origin
+                },
+                events: {
+                    onReady: onPlayerReady,
+                    onStateChange: onPlayerStateChange
+                }
+            });
+        }
+
+        function onPlayerReady(event) {
+            sizeVideoCover();
+            enableVideoSound();
+            stageVideo.classList.add('active');
+            event.target.playVideo();
+        }
+
+        function onPlayerStateChange(event) {
+            if (event.data === YT.PlayerState.ENDED) {
+                stageVideo.classList.remove('active');
+            }
+        }
+
+        window.addEventListener('resize', sizeVideoCover);
+
+        document.getElementById('stage-root').addEventListener('pointerdown', enableVideoSound, { once: true });
+
+        setTimeout(() => {
+            loader.classList.add('hidden');
+        }, 15000);
+    </script>
+</body>
+</html>
@@ -0,0 +1,24 @@
+{
+    "name": "Agencja AI",
+    "short_name": "Agencja AI",
+    "icons": [
+        {
+            "src": "/assets/imgs/favico/48x48.png",
+            "sizes": "48x48",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/imgs/favico/180x180.png",
+            "sizes": "180x180",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/imgs/favico/512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#000000"
+}