tomasz-syn-grzegorza
d565f83490
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
255 lines
9.2 KiB
HTML
255 lines
9.2 KiB
HTML
<!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>
|