wuwiandClaude Opus 5.5
da09b55525
cut.py --cut score: no interview audio, only the game's own recorded umpire. "Spectators are reminded to remain seated, especially the deceased", then a love game called against the viewer, one member's stare per point under a broadcast score bug, "Game. Set. Massacre." on black, and "This match is still in progress" over the logo. cut.py now holds named cuts, each with its own build folder and output file. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
106 lines
7.1 KiB
HTML
106 lines
7.1 KiB
HTML
<!doctype html>
|
||
<!-- The trailer's frame: every card, title and lower third, one <section> each, shown by :target.
|
||
render: chrome --headless=new --window-size=1080,1920 --default-background-color=00000000
|
||
--screenshot=<out>.png file://.../frame.html#<id> (cut.py does this)
|
||
Everything is drawn on transparent; cut.py lays it over picture or black. -->
|
||
<html><head><meta charset="utf-8">
|
||
<style>
|
||
@font-face { font-family: Silkscreen; src: url(../../assets/fonts/Silkscreen-Regular.ttf); }
|
||
:root { --paper: #ece6d6; --gold: #c9a45a; --shade: 0 2px 22px rgba(0,0,0,.8), 0 0 4px rgba(0,0,0,.6); }
|
||
html, body { margin: 0; width: 1080px; height: 1920px; background: transparent; overflow: hidden; }
|
||
section { display: none; position: absolute; inset: 0; color: var(--paper); }
|
||
section:target { display: block; }
|
||
.c { position: absolute; left: 0; right: 0; text-align: center; }
|
||
|
||
/* black cards: one line of quiet Baskerville, the documentary's voice */
|
||
.say { font: italic 400 88px/1.18 Baskerville, serif; letter-spacing: .005em; padding: 0 80px; text-wrap: balance; }
|
||
.q { font: italic 400 96px/1.15 Baskerville, serif; padding: 0 80px; text-wrap: balance; }
|
||
.q::before, .q::after { content: ''; display: block; width: 46px; height: 2px; background: var(--gold);
|
||
margin: 0 auto 34px; opacity: .8; }
|
||
.q::after { margin: 34px auto 0; }
|
||
|
||
/* the film's own title */
|
||
.crest { position: absolute; left: 50%; top: 610px; transform: translateX(-50%); }
|
||
.t1 { top: 860px; font: 400 128px/1 'Bodoni 72', Didot, serif; letter-spacing: .16em; margin-left: .16em; }
|
||
.t2 { top: 1000px; font: 400 128px/1 'Bodoni 72', Didot, serif; letter-spacing: .16em; margin-left: .16em; }
|
||
.rule { position: absolute; left: 50%; width: 420px; height: 1px; margin-left: -210px; background: var(--gold); opacity: .7; }
|
||
.club { top: 1196px; font: 400 27px/1 'Gill Sans', sans-serif; letter-spacing: .42em; margin-left: .42em; }
|
||
.est { top: 1246px; font: 400 22px/1 'Gill Sans', sans-serif; letter-spacing: .5em; margin-left: .5em; color: var(--gold); }
|
||
|
||
/* lower thirds — type only, no box; sits above the social-app UI band */
|
||
.lt { position: absolute; left: 84px; top: 1236px; text-shadow: var(--shade); }
|
||
.lt i { display: block; width: 64px; height: 3px; background: var(--gold); margin-bottom: 26px; box-shadow: 0 1px 8px rgba(0,0,0,.6); }
|
||
.lt b { display: block; font: 600 50px/1.05 'Gill Sans', sans-serif; letter-spacing: .13em; text-transform: uppercase; }
|
||
.lt span { display: block; margin-top: 14px; font: italic 300 34px/1.2 'Gill Sans', sans-serif; letter-spacing: .02em; }
|
||
.lt em { display: block; margin-top: 10px; font: 400 25px/1 'Gill Sans', sans-serif; font-style: normal; letter-spacing: .32em; color: var(--gold); }
|
||
|
||
/* the game's own voice at the end: its logo and its pixel face */
|
||
.logo { position: absolute; left: 50%; transform: translateX(-50%); }
|
||
.px { font: 400 34px/1.5 Silkscreen, monospace; letter-spacing: .18em; margin-left: .18em; }
|
||
|
||
/* FIFTEEN–LOVE: a broadcast score bug, the club serving, the viewer receiving */
|
||
.sb { position: absolute; left: 64px; top: 250px; min-width: 470px; padding: 18px 26px 18px 22px;
|
||
background: linear-gradient(90deg, rgba(10,26,17,.9), rgba(10,26,17,.78)); border-left: 4px solid var(--gold);
|
||
box-shadow: 0 6px 30px rgba(0,0,0,.45); font-family: 'Gill Sans', sans-serif; color: var(--paper); }
|
||
.sb .row { display: grid; grid-template-columns: 22px 1fr 96px; align-items: center; height: 54px; }
|
||
.sb .row + .row { border-top: 1px solid rgba(201,164,90,.28); }
|
||
.sb .who { font: 600 27px/1 'Gill Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; }
|
||
.sb .pts { font: 400 44px/1 'Gill Sans', sans-serif; text-align: right; font-variant-numeric: tabular-nums; color: var(--gold); }
|
||
.sb .you .who, .sb .you .pts { color: rgba(236,230,214,.62); }
|
||
.sb i { width: 12px; height: 12px; border-radius: 50%; background: #d8e04a; box-shadow: 0 0 8px rgba(216,224,74,.6); }
|
||
.sb .game { font: 600 34px/1 'Gill Sans', sans-serif; letter-spacing: .2em; }
|
||
</style></head><body>
|
||
|
||
<section id="t_a"><div class="c say" style="top:700px">Every old club has its traditions.</div></section>
|
||
<section id="t_b"><div class="c say" style="top:1010px">Some of them refuse to die.</div></section>
|
||
|
||
<section id="title">
|
||
<svg class="crest" width="150" height="190" viewBox="0 0 150 190" fill="none" stroke="#c9a45a" stroke-width="3.2">
|
||
<g transform="rotate(-32 75 112)"><ellipse cx="75" cy="66" rx="30" ry="40"/><path d="M75 106v64M66 106l9 14 9-14"/>
|
||
<path d="M57 50h36M54 66h42M57 82h36M65 30v72M75 26v80M85 30v72" stroke-width="1.2" opacity=".75"/></g>
|
||
<g transform="rotate(32 75 112)"><ellipse cx="75" cy="66" rx="30" ry="40"/><path d="M75 106v64M66 106l9 14 9-14"/>
|
||
<path d="M57 50h36M54 66h42M57 82h36M65 30v72M75 26v80M85 30v72" stroke-width="1.2" opacity=".75"/></g>
|
||
<circle cx="75" cy="16" r="11" fill="#c9a45a" stroke="none"/>
|
||
</svg>
|
||
<div class="c t1">LIFETIME</div>
|
||
<div class="c t2">MEMBERS</div>
|
||
<div class="rule" style="top:1160px"></div>
|
||
<div class="c club">ST. MORDRED'S LAWN TENNIS CLUB</div>
|
||
<div class="c est">EST. 1877</div>
|
||
</section>
|
||
|
||
<section id="q_start"><div class="c q" style="top:850px">How did it start?</div></section>
|
||
<section id="q_chall"><div class="c q" style="top:790px">And the challengers?</div></section>
|
||
|
||
<section id="lt_reg"><div class="lt"><i></i><b>Reginald Moss</b><span>Head Groundskeeper</span><em>1962 –</em></div></section>
|
||
<section id="lt_doris"><div class="lt"><i></i><b>Doris Penny</b><span>Strawberries & Cream</span><em>1971 –</em></div></section>
|
||
<section id="lt_clive"><div class="lt"><i></i><b>Clive Barrow</b><span>Line Judge</span><em>1974 –</em></div></section>
|
||
<section id="lt_ambrose"><div class="lt"><i></i><b>Ambrose Pike</b><span>Chair Umpire</span><em>1908 –</em></div></section>
|
||
|
||
<section id="logo">
|
||
<img class="logo" src="../../assets/logo-v2.png" style="width:940px; top:640px">
|
||
<div class="c px" style="top:1196px; color:#c9a45a">MATCH IN PROGRESS</div>
|
||
</section>
|
||
|
||
<section id="end">
|
||
<img class="logo" src="../../assets/logo-v2.png" style="width:700px; top:700px">
|
||
<div class="c say" style="top:1170px; font-size:62px">Lifetime membership now open.</div>
|
||
</section>
|
||
<section id="sb_15"><div class="sb">
|
||
<div class="row"><i></i><span class="who">St. Mordred's</span><span class="pts">15</span></div>
|
||
<div class="row you"><span></span><span class="who">You</span><span class="pts">0</span></div>
|
||
</div></section>
|
||
<section id="sb_30"><div class="sb">
|
||
<div class="row"><i></i><span class="who">St. Mordred's</span><span class="pts">30</span></div>
|
||
<div class="row you"><span></span><span class="who">You</span><span class="pts">0</span></div>
|
||
</div></section>
|
||
<section id="sb_40"><div class="sb">
|
||
<div class="row"><i></i><span class="who">St. Mordred's</span><span class="pts">40</span></div>
|
||
<div class="row you"><span></span><span class="who">You</span><span class="pts">0</span></div>
|
||
</div></section>
|
||
<section id="sb_game"><div class="sb">
|
||
<div class="row"><i></i><span class="who">St. Mordred's</span><span class="pts game">GAME</span></div>
|
||
<div class="row you"><span></span><span class="who">You</span><span class="pts">0</span></div>
|
||
</div></section>
|
||
</body></html>
|