128 lines
6.8 KiB
HTML
128 lines
6.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head>
|
||
|
|
<meta name="description" content="Fifteen minutes here saves hours on the shoulder. Every commercial driver's sworn by it: the walk-around beats the walk-home."><meta charset="UTF-8"/>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body{margin:0;background:#0b0f14;color:#d7e0e8;font-family:'Courier New',ui-monospace,monospace}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#10222e}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
/* blueprint grid backdrop */
|
||
|
|
.grid{position:absolute;inset:0;background-image:
|
||
|
|
repeating-linear-gradient(0deg,rgba(90,170,210,.10) 0 1px,transparent 1px 40px),
|
||
|
|
repeating-linear-gradient(90deg,rgba(90,170,210,.10) 0 1px,transparent 1px 40px),
|
||
|
|
radial-gradient(circle at 30% 25%,rgba(60,140,190,.18),transparent 60%);
|
||
|
|
opacity:.55}
|
||
|
|
.title{font-size:74px;letter-spacing:.04em;color:#b7e2f5;opacity:0;transform:translateY(18px)}
|
||
|
|
.kicker{font-size:30px;letter-spacing:.35em;color:#7faeC8;text-transform:uppercase;margin-top:14px}
|
||
|
|
.hold{display:flex;flex-direction:column;align-items:center}
|
||
|
|
.stamp{font-size:22px;border:3px solid #5a86a0;color:#8fc2dd;padding:12px 26px;letter-spacing:.2em;transform:rotate(-2deg);opacity:0}
|
||
|
|
/* step card */
|
||
|
|
.step{border:2px solid #4f7992;background:rgba(15,35,50,.72);padding:36px 54px;max-width:1150px;opacity:0}
|
||
|
|
.step h2{font-size:44px;color:#b7e2f5;margin:0 0 16px 0}
|
||
|
|
.step p{font-size:28px;line-height:1.5;color:#c9dbe6;margin:0}
|
||
|
|
.num{font-size:110px;color:#3f6d8a;position:absolute;top:30px;right:60px;font-weight:bold;opacity:.5}
|
||
|
|
/* schematic truck line-art */
|
||
|
|
.truck{position:absolute;inset:0;opacity:0}
|
||
|
|
.truck svg{position:absolute;bottom:70px;left:340px;width:1200px;height:400px}
|
||
|
|
.truck text{font-family:'Courier New',monospace}
|
||
|
|
.lbl{font-size:22px;fill:#8fc2dd;letter-spacing:.1em}
|
||
|
|
.hl{stroke:#e8f6ff}
|
||
|
|
.flash{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,22,30,.4)}
|
||
|
|
.flash b{font-size:60px;color:#ffd28a;letter-spacing:.1em}
|
||
|
|
.end{font-size:58px;color:#b7e2f5;letter-spacing:.12em;opacity:0;text-align:center;line-height:1.4}
|
||
|
|
</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="56">
|
||
|
|
<!-- S1 title -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="9" data-track-index="1">
|
||
|
|
<div class="grid"></div>
|
||
|
|
<div class="hold" style="position:relative;z-index:2">
|
||
|
|
<div class="title" id="s1-title">The Morning Reading</div>
|
||
|
|
<div class="kicker" id="s1-kick">a pre-trip inspection</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- S2 why -->
|
||
|
|
<section id="s2" class="clip" data-start="9" data-duration="10" data-track-index="1">
|
||
|
|
<div class="grid"></div>
|
||
|
|
<div class="step" id="s2-step" style="position:relative">
|
||
|
|
<div class="num" id="s2-num">01</div>
|
||
|
|
<h2>Why it matters</h2>
|
||
|
|
<p>Fifteen minutes here <b>saves hours</b> on the shoulder. Every commercial driver's sworn by it: the walk-around beats the walk-home.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- S3 the walk-around list -->
|
||
|
|
<section id="s3" class="clip" data-start="19" data-duration="14" data-track-index="1">
|
||
|
|
<div class="grid"></div>
|
||
|
|
<div class="truck" id="s3-truck">
|
||
|
|
<svg viewBox="0 0 1200 400">
|
||
|
|
<rect x="40" y="150" width="430" height="160" fill="none" stroke="#4f7992" stroke-width="4"/>
|
||
|
|
<rect x="470" y="90" width="330" height="220" fill="none" stroke="#4f7992" stroke-width="4"/>
|
||
|
|
<rect x="800" y="70" width="360" height="240" fill="none" stroke="#4f7992" stroke-width="4"/>
|
||
|
|
<circle cx="180" cy="320" r="46" fill="none" stroke="#4f7992" stroke-width="4"/>
|
||
|
|
<circle cx="820" cy="320" r="46" fill="none" stroke="#4f7992" stroke-width="4"/>
|
||
|
|
<circle cx="990" cy="320" r="46" fill="none" stroke="#4f7992" stroke-width="4"/>
|
||
|
|
<path d="M470 90 L610 90 L610 150 L470 150 Z" fill="none" stroke="#3f6d8a" stroke-width="2"/>
|
||
|
|
<text x="60" y="130" class="lbl">TIRES · lug & pressure</text>
|
||
|
|
<text x="490" y="70" class="lbl">COUPLER & AIR LINES</text>
|
||
|
|
<text x="830" y="45" class="lbl">BRAKES · LIGHTS · FLAPS</text>
|
||
|
|
<text x="60" y="360" class="lbl hl" id="s3-lug">check lug torque, sidewall, tread</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- S4 fluids flash -->
|
||
|
|
<section id="s4" class="clip" data-start="33" data-duration="8" data-track-index="1">
|
||
|
|
<div class="grid"></div>
|
||
|
|
<div class="flash"><b id="s4-f1">OIL · COOLANT · BRAKE · WINDSHIELD</b></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- S5 lights & mirror flash -->
|
||
|
|
<section id="s5" class="clip" data-start="41" data-duration="8" data-track-index="1">
|
||
|
|
<div class="grid"></div>
|
||
|
|
<div class="step" id="s5-step" style="position:relative">
|
||
|
|
<div class="num" id="s5-num">02</div>
|
||
|
|
<h2>Outboard check</h2>
|
||
|
|
<p>Headlights, signals, brake lights. Mount windshield, both mirrors. Then get in, set the seat, <b>belt up</b> — and read the dash cold.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- S6 signoff -->
|
||
|
|
<section id="s6" class="clip" data-start="49" data-duration="7" data-track-index="1">
|
||
|
|
<div class="grid"></div>
|
||
|
|
<div class="hold"><div class="end" id="s6-end">READY TO ROLL</div></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="9"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="19"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="33"></audio>
|
||
|
|
<audio id="voice-s5" src="audio/s5.wav" data-start="41"></audio>
|
||
|
|
<audio id="voice-s6" src="audio/s6.wav" data-start="49"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
// s1
|
||
|
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 0.5);
|
||
|
|
tl.to("#s1-kick", { opacity: 1, duration: 0.6 }, 1.0);
|
||
|
|
// s2
|
||
|
|
tl.to("#s2-step", { opacity: 1, duration: 0.6 }, 9.4);
|
||
|
|
tl.to("#s2-num", { opacity: 1, duration: 0.5 }, 9.4);
|
||
|
|
// s3 truck draw-in (fade whole)
|
||
|
|
tl.to("#s3-truck", { opacity: 1, duration: 1.0 }, 19.4);
|
||
|
|
tl.to("#s3-lug", { opacity: 1, duration: 0.4 }, 24.0);
|
||
|
|
// s4
|
||
|
|
tl.to("#s4-f1", { opacity: 1, duration: 0.6 }, 33.4);
|
||
|
|
// s5
|
||
|
|
tl.to("#s5-step", { opacity: 1, duration: 0.6 }, 41.4);
|
||
|
|
tl.to("#s5-num", { opacity: 1, duration: 0.5 }, 41.4);
|
||
|
|
// s6
|
||
|
|
tl.to("#s6-end", { opacity: 1, duration: 0.8 }, 49.4);
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</body></html>
|