158 lines
9.9 KiB
HTML
158 lines
9.9 KiB
HTML
<!doctype html>
|
|
<html><head><meta charset="UTF-8"/>
|
|
<title>Stadium-to-Dome Operations</title>
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="Stadium-to-Dome Operations">
|
|
<meta property="og:description" content="TWELVE STADIUMS ONE PLANET 60,000 SOULS PER HOUR AIRLOCK CHOREOGRAPHY DESDE MEDELLÍN HASTA OLIMPUS MONS 99.4% UPTIME GUARANTEED">
|
|
<meta property="og:url" content="https://carlos-torreshernandez.4ort.net/">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="description" content="TWELVE STADIUMS ONE PLANET 60,000 SOULS PER HOUR AIRLOCK CHOREOGRAPHY DESDE MEDELLÍN HASTA OLIMPUS MONS 99.4% UPTIME GUARANTEED">
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
body{margin:0;background:#0b0f14;color:#fff;font-family:'Segoe UI',system-ui,sans-serif}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
|
|
|
/* SCENE 1: STADIUM OPENING */
|
|
#s1-bg{background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%)}
|
|
.seat-row{display:flex;gap:8px;margin:4px 0}
|
|
.seat{width:48px;height:32px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#c1440e 0%,#8b2500 100%);opacity:0}
|
|
.crowd-pulse{position:absolute;width:600px;height:600px;border-radius:50%;border:3px solid #c1440e;opacity:0;top:50%;left:50%;transform:translate(-50%,-50%)}
|
|
|
|
/* SCENE 2: THROUGHPUT CALC */
|
|
#s2-bg{background:radial-gradient(circle at center,#0d4f8b 0%,#001a33 100%)}
|
|
.metric-ring{position:absolute;width:800px;height:800px;border-radius:50%;border:8px dashed #fff;opacity:0}
|
|
.metric-inner{position:absolute;width:600px;height:600px;border-radius:50%;border:4px solid #c1440e;opacity:0}
|
|
.metric-center{font-size:5rem;font-weight:700;text-align:center;line-height:1}
|
|
|
|
/* SCENE 3: AIRLOCK CHOREOGRAPHY */
|
|
#s3-bg{background:linear-gradient(180deg,#000 0%,#1a0a00 100%)}
|
|
.airlock{position:absolute;width:400px;height:600px;border:6px solid #c1440e;border-radius:0 0 40px 40px;opacity:0;left:50%;transform:translateX(-50%)}
|
|
.door-panel{position:absolute;width:388px;height:280px;background:rgba(193,68,14,0.3);border:3px solid #c1440e;border-radius:0 0 34px 34px;bottom:0;left:6px;transition:transform 0.6s}
|
|
.crew-dot{position:absolute;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 0 20px #fff;opacity:0}
|
|
|
|
/* SCENE 4: HERITAGE TERRACING */
|
|
#s4-bg{background:url('https://images.pexels.com/photos/32233687/pexels-photo-32233687.jpeg?auto=compress&cs=tinysrgb&h=1080&w=1920') center/cover}
|
|
.terrace-line{position:absolute;height:8px;background:linear-gradient(90deg,#2e7d32 0%,#4caf50 100%);opacity:0;border-radius:4px}
|
|
.heritage-text{position:absolute;bottom:180px;left:50%;transform:translateX(-50%);font-size:2.5rem;font-weight:300;letter-spacing:4px;opacity:0}
|
|
|
|
/* SCENE 5: DOMES LIVE */
|
|
#s5-bg{background:radial-gradient(circle at 50% 30%,#ffecb3 0%,#c1440e 40%,#1a0a00 100%)}
|
|
.dome-shell{position:absolute;width:1000px;height:500px;border-radius:50% 50% 0 0;border:8px solid #ffecb3;opacity:0;bottom:0;left:50%;transform:translateX(-50%) box-shadow:0 0 80px rgba(255,236,179,0.4)}
|
|
.life-light{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 30px #fff;opacity:0}
|
|
</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="45">
|
|
|
|
<!-- Audio references (REQUIRED for voice playback) -->
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="11"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="20"></audio>
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="30"></audio>
|
|
<audio id="voice-s5" src="audio/s5.wav" data-start="38"></audio>
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
|
|
|
<!-- SCENE 1: STADIUM (0-11s) -->
|
|
<section id="s1" class="clip" data-start="0" data-duration="11" data-track-index="1">
|
|
<div id="s1-bg" style="position:absolute;inset:0"></div>
|
|
<div class="crowd-pulse" id="pulse"></div>
|
|
<div id="seats-container" style="position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)">
|
|
<!-- Generated via JS below -->
|
|
</div>
|
|
<h1 style="position:absolute;bottom:180px;font-size:3.5rem;font-weight:700;letter-spacing:-2px;opacity:0" id="s1-title">TWELVE STADIUMS<br><span style="font-size:2.2rem;color:#c1440e">ONE PLANET</span></h1>
|
|
</section>
|
|
|
|
<!-- SCENE 2: THROUGHPUT (11-20s) -->
|
|
<section id="s2" class="clip" data-start="11" data-duration="9" data-track-index="1">
|
|
<div id="s2-bg" style="position:absolute;inset:0"></div>
|
|
<div class="metric-ring" id="ring"></div>
|
|
<div class="metric-inner" id="inner"></div>
|
|
<div class="metric-center" id="throughput-num">60,000</div>
|
|
<div style="position:absolute;bottom:180px;font-size:1.8rem;letter-spacing:2px;opacity:0" id="s2-label">SOULS PER HOUR</div>
|
|
</section>
|
|
|
|
<!-- SCENE 3: AIRLOCK (20-30s) -->
|
|
<section id="s3" class="clip" data-start="20" data-duration="10" data-track-index="1">
|
|
<div id="s3-bg" style="position:absolute;inset:0"></div>
|
|
<div class="airlock" id="lock"></div>
|
|
<div class="door-panel" id="door"></div>
|
|
<div class="crew-dot" id="crew1" style="top:280px;left:50%;transform:translateX(-50%)"></div>
|
|
<div class="crew-dot" id="crew2" style="top:340px;left:48%;transform:translateX(-50%)"></div>
|
|
<div class="crew-dot" id="crew3" style="top:400px;left:52%;transform:translateX(-50%)"></div>
|
|
<h2 style="position:absolute;bottom:180px;font-size:2.8rem;letter-spacing:4px;opacity:0" id="s3-title">AIRLOCK CHOREOGRAPHY</h2>
|
|
</section>
|
|
|
|
<!-- SCENE 4: HERITAGE (30-38s) -->
|
|
<section id="s4" class="clip" data-start="30" data-duration="8" data-track-index="1">
|
|
<div id="s4-bg" style="position:absolute;inset:0"></div>
|
|
<div class="terrace-line" id="terr1" style="width:800px;bottom:280px;left:50%;transform:translateX(-50%)"></div>
|
|
<div class="terrace-line" id="terr2" style="width:650px;bottom:340px;left:50%;transform:translateX(-50%)"></div>
|
|
<div class="terrace-line" id="terr3" style="width:500px;bottom:400px;left:50%;transform:translateX(-50%)"></div>
|
|
<div class="heritage-text" id="heritage-txt">DESDE MEDELLÍN<br>HASTA OLIMPUS MONS</div>
|
|
</section>
|
|
|
|
<!-- SCENE 5: DOMES LIVE (38-45s) -->
|
|
<section id="s5" class="clip" data-start="38" data-duration="7" data-track-index="1">
|
|
<div id="s5-bg" style="position:absolute;inset:0"></div>
|
|
<div class="dome-shell" id="dome"></div>
|
|
<div class="life-light" id="light1" style="top:420px;left:48%"></div>
|
|
<div class="life-light" id="light2" style="top:460px;left:52%"></div>
|
|
<div class="life-light" id="light3" style="top:500px;left:50%"></div>
|
|
<div class="life-light" id="light4" style="top:380px;left:46%"></div>
|
|
<div class="life-light" id="light5" style="top:540px;left:54%"></div>
|
|
<h1 style="position:absolute;bottom:180px;font-size:4rem;font-weight:700;letter-spacing:-4px;opacity:0" id="s5-title">99.4%<br><span style="font-size:2rem">UPTIME GUARANTEED</span></h1>
|
|
</section>
|
|
|
|
<script>
|
|
// Generate stadium seats dynamically
|
|
const seatsContainer = document.getElementById('seats-container');
|
|
for(let row=0;row<8;row++){
|
|
const rowDiv = document.createElement('div');
|
|
rowDiv.className = 'seat-row';
|
|
for(let col=0;col<12;col++){
|
|
const seat = document.createElement('div');
|
|
seat.className = 'seat';
|
|
seat.id = `seat-${row}-${col}`;
|
|
rowDiv.appendChild(seat);
|
|
}
|
|
seatsContainer.appendChild(rowDiv);
|
|
}
|
|
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
|
|
// SCENE 1: Stadium pulse + seats fill
|
|
tl.to('#pulse', { opacity: 1, scale: 1.8, duration: 3, ease: 'power2.inOut' }, 0.5);
|
|
tl.to('#pulse', { opacity: 0, duration: 2 }, 5);
|
|
tl.to('.seat', { opacity: 1, stagger: 0.05, duration: 0.8, ease: 'back.out(1.7)' }, 1.2);
|
|
tl.to('#s1-title', { opacity: 1, y: 0, duration: 1.2, ease: 'power3.out' }, 3);
|
|
|
|
// SCENE 2: Throughput rings spin + number slams in
|
|
tl.to('#ring', { opacity: 1, rotation: 360, duration: 4, ease: 'power1.inOut' }, 11.5);
|
|
tl.to('#inner', { opacity: 1, rotation: -180, duration: 4, ease: 'power1.inOut' }, 11.8);
|
|
tl.to('#throughput-num', { opacity: 1, scale: 1.2, duration: 0.6, ease: 'expo.out' }, 13);
|
|
tl.to('#s2-label', { opacity: 1, duration: 1 }, 15);
|
|
|
|
// SCENE 3: Airlock opens + crew dots appear
|
|
tl.to('#lock', { opacity: 1, duration: 1.5 }, 20.5);
|
|
tl.to('#door', { transform: 'translateY(-280px)', duration: 1.2, ease: 'power3.inOut' }, 21.5);
|
|
tl.to(['#crew1','#crew2','#crew3'], { opacity: 1, stagger: 0.4, scale: 1.5, duration: 0.6, ease: 'back.out' }, 23);
|
|
tl.to('#s3-title', { opacity: 1, duration: 1.5 }, 25);
|
|
|
|
// SCENE 4: Heritage terraces rise
|
|
tl.to('#terr1', { opacity: 1, x: 0, duration: 2, ease: 'power2.out' }, 30.5);
|
|
tl.to('#terr2', { opacity: 1, x: 0, duration: 2, ease: 'power2.out' }, 31.5);
|
|
tl.to('#terr3', { opacity: 1, x: 0, duration: 2, ease: 'power2.out' }, 32.5);
|
|
tl.to('#heritage-txt', { opacity: 1, y: 0, duration: 2, ease: 'power3.out' }, 33);
|
|
|
|
// SCENE 5: Dome rises + lights ignite
|
|
tl.to('#dome', { opacity: 1, y: 0, duration: 2, ease: 'power3.out' }, 38.5);
|
|
tl.to(['#light1','#light2','#light3','#light4','#light5'], { opacity: 1, stagger: 0.3, scale: 2, duration: 0.8, ease: 'elastic.out(1,0.5)' }, 40);
|
|
tl.to('#s5-title', { opacity: 1, y: 0, duration: 1.5, ease: 'power3.out' }, 41.5);
|
|
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</div>
|
|
</body></html>
|