tomasz-syn-grzegorza
0706909aff
Choose FHD 16:9 or vertical 9:16 intro from .env based on browser aspect ratio, with per-format redirect URLs and orientation change handling. Co-authored-by: Cursor <cursoragent@cursor.com>
302 lines
9.3 KiB
Plaintext
302 lines
9.3 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>${SITE_TITLE}</title>
|
|
<meta name="description" content="${SITE_DESCRIPTION}">
|
|
<link rel="canonical" href="${SITE_BASE_URL}/">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="${SITE_TITLE}">
|
|
<meta property="og:locale" content="pl_PL">
|
|
<meta property="og:title" content="${SITE_TITLE}">
|
|
<meta property="og:url" content="${SITE_BASE_URL}/">
|
|
<meta property="og:image" content="${OG_IMAGE_URL}">
|
|
<meta property="og:image:type" content="image/jpeg">
|
|
<meta property="og:image:alt" content="${SITE_OG_IMAGE_ALT}">
|
|
<meta property="og:description" content="${SITE_DESCRIPTION}">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="${SITE_TITLE}">
|
|
<meta name="twitter:image" content="${OG_IMAGE_URL}">
|
|
<meta name="twitter:description" content="${TWITTER_DESCRIPTION}">
|
|
<link rel="icon" type="image/png" sizes="48x48" href="${FAVICON_48}">
|
|
<link rel="icon" type="image/png" sizes="512x512" href="${FAVICON_512}">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="${FAVICON_180}">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<meta name="theme-color" content="${THEME_COLOR}">
|
|
<link rel="preload" as="image" href="${BG_IMAGE}">
|
|
<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="${BG_IMAGE}" alt="${SITE_OG_IMAGE_ALT}">
|
|
</div>
|
|
<div id="stage-video" class="stage-layer">
|
|
<div id="player"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const VIDEO_CONFIGS = {
|
|
fhd: {
|
|
id: '${VIDEO_ID_FHD_JS}',
|
|
ratio: 16 / 9,
|
|
redirectUrl: '${POST_VIDEO_REDIRECT_URL_FHD_JS}'
|
|
},
|
|
vertical: {
|
|
id: '${VIDEO_ID_VERTICAL_JS}',
|
|
ratio: 9 / 16,
|
|
redirectUrl: '${POST_VIDEO_REDIRECT_URL_VERTICAL_JS}'
|
|
}
|
|
};
|
|
const POST_VIDEO_REDIRECT_ENABLED = ${POST_VIDEO_REDIRECT_ENABLED_JS};
|
|
const BG_IMAGE = '${BG_IMAGE_JS}';
|
|
let player;
|
|
let activeFormat;
|
|
let activeConfig;
|
|
|
|
const loader = document.getElementById('loader');
|
|
const stageVideo = document.getElementById('stage-video');
|
|
const stage = document.getElementById('stage');
|
|
|
|
function getVideoFormat() {
|
|
const w = stage.clientWidth || window.innerWidth;
|
|
const h = stage.clientHeight || window.innerHeight;
|
|
return w >= h ? 'fhd' : 'vertical';
|
|
}
|
|
|
|
function resolveConfig(format) {
|
|
const config = VIDEO_CONFIGS[format];
|
|
if (config.id) return config;
|
|
const fallbackKey = format === 'fhd' ? 'vertical' : 'fhd';
|
|
const fallback = VIDEO_CONFIGS[fallbackKey];
|
|
if (fallback.id) return fallback;
|
|
return config;
|
|
}
|
|
|
|
function sizeVideoCover() {
|
|
const iframe = document.querySelector('#stage-video iframe');
|
|
if (!stage || !iframe || !activeConfig) return;
|
|
|
|
const ratio = activeConfig.ratio;
|
|
const w = stage.clientWidth;
|
|
const h = stage.clientHeight;
|
|
let iw, ih;
|
|
|
|
if (w / h > ratio) {
|
|
iw = w;
|
|
ih = w / ratio;
|
|
} else {
|
|
ih = h;
|
|
iw = h * 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() {
|
|
activeFormat = getVideoFormat();
|
|
activeConfig = resolveConfig(activeFormat);
|
|
if (!activeConfig.id) return;
|
|
|
|
player = new YT.Player('player', {
|
|
height: '100%',
|
|
width: '100%',
|
|
videoId: activeConfig.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');
|
|
if (POST_VIDEO_REDIRECT_ENABLED && activeConfig.redirectUrl) {
|
|
window.location.href = activeConfig.redirectUrl;
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleResize() {
|
|
const newFormat = getVideoFormat();
|
|
if (player && newFormat !== activeFormat) {
|
|
activeFormat = newFormat;
|
|
activeConfig = resolveConfig(activeFormat);
|
|
if (activeConfig.id) {
|
|
player.loadVideoById(activeConfig.id);
|
|
}
|
|
}
|
|
sizeVideoCover();
|
|
}
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
document.getElementById('stage-root').addEventListener('pointerdown', enableVideoSound, { once: true });
|
|
|
|
setTimeout(() => {
|
|
loader.classList.add('hidden');
|
|
}, 15000);
|
|
</script>
|
|
</body>
|
|
</html>
|