wuwi/splatter-tennis
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The poster holds still, names its price, and points at the stores

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wuwiandClaude Fable 5 committed 2026-08-18 10:15:21 +02:00
1 parent 26c6298aed
commit f8201ce7a2
1 file changed
+104 -24
Download Patch File Download Diff File Expand all files Collapse all files
promo/index.html
+104 -24
View File
@@ -81,6 +81,39 @@
font-size: .7rem; color: var(--acid); letter-spacing: .14em;
}
/* ---- store badges (pseudo — the apps are not out yet) ---- */
.stores { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
.store {
display: inline-flex; align-items: center; gap: .7em; position: relative;
background: #000; color: var(--chalk); border: 3px solid var(--chalk);
padding: .55em 1.1em; box-shadow: 0 5px 0 #00000088; cursor: default;
}
.store svg { flex: 0 0 auto; }
.store .txt { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.store .txt small { font-family: 'Silkscreen', monospace; font-size: .5rem; letter-spacing: .1em; color: var(--dim); }
.store .txt b { font-family: 'Silkscreen', monospace; font-weight: 700; font-size: .8rem; letter-spacing: .06em; }
.store .soon {
position: absolute; top: -.7em; right: -.7em; background: var(--blood); color: #fff;
font-family: 'Silkscreen', monospace; font-size: .5rem; letter-spacing: .08em;
padding: .25em .5em; border: 2px solid var(--chalk); transform: rotate(4deg);
}
/* ---- pricing ---- */
.price { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.tier { border: 1px solid var(--line); background: var(--panel); padding: 1.6rem 1.4rem 1.5rem; }
.tier.paid { border: 2px solid var(--blood); background: linear-gradient(135deg, #1c0e0e, #0c140e 65%); }
.tier .big { font-family: 'Bangers', cursive; font-size: 2.4rem; line-height: 1; display: block; margin-bottom: .1em; }
.tier.paid .big { color: var(--blood); }
.tier h3 { font-size: .8rem; letter-spacing: .08em; color: var(--acid); margin-bottom: .9rem; }
.tier ul { list-style: none; }
.tier li {
font-family: 'Silkscreen', monospace; font-size: .68rem; letter-spacing: .05em;
padding: .4em 0 .4em 1.5em; position: relative; color: var(--chalk);
}
.tier li::before { content: '■'; position: absolute; left: 0; color: var(--blood); }
.tier li.dim { color: var(--dim); }
.tier li.dim::before { color: var(--dim); }
/* ---- pitch + phone ---- */
.split { display: flex; gap: 3rem; align-items: center; flex-wrap: wrap; }
.split > div { flex: 1 1 320px; }
@@ -133,8 +166,6 @@
height: 100%; width: auto; image-rendering: pixelated;
filter: drop-shadow(0 3px 0 #00000080);
}
.sprite img + img { opacity: 0; animation: shamble .8s steps(1) infinite; }
@keyframes shamble { 50% { opacity: 1; } }
.z h3 { font-size: .72rem; letter-spacing: .04em; }
.z .sub {
font-family: 'Silkscreen', monospace; font-size: .56rem; color: var(--blood);
@@ -187,7 +218,26 @@
<p class="under">SNES-STYLE PSEUDO-3D · UMPIRE VOICE · 15/30/40 · AND THE DEAD</p>
<a class="cta" href="/">▶ PLAY NOW</a>
<a class="cta ghost" href="#dead">MEET THE DEAD</a>
<span class="free">FREE · IN YOUR BROWSER · NO DOWNLOAD · NO ACCOUNT</span>
<span class="free">PLAY FREE IN YOUR BROWSER · NO ACCOUNT</span>
<div class="stores">
<span class="store">
<svg viewBox="0 0 8 8" width="26" height="26" fill="currentColor" aria-hidden="true">
<rect x="4" y="0" width="1" height="2"/><rect x="5" y="1" width="2" height="1"/>
<rect x="1" y="2" width="6" height="1"/><rect x="0" y="3" width="8" height="3"/>
<rect x="1" y="6" width="6" height="1"/><rect x="2" y="7" width="4" height="1"/>
</svg>
<span class="txt"><small>DOWNLOAD ON THE</small><b>APP STORE</b></span>
<span class="soon">SOON</span>
</span>
<span class="store">
<svg viewBox="0 0 8 8" width="26" height="26" fill="currentColor" aria-hidden="true">
<rect x="0" y="0" width="2" height="8"/><rect x="2" y="1" width="2" height="6"/>
<rect x="4" y="2" width="2" height="4"/><rect x="6" y="3" width="1" height="2"/>
</svg>
<span class="txt"><small>GET IT ON</small><b>GOOGLE PLAY</b></span>
<span class="soon">SOON</span>
</span>
</div>
</header>
<section>
@@ -252,31 +302,61 @@
</div>
</section>
<section>
<p class="kicker">What it costs</p>
<h2>Free to play. Then <span>2€</span>. Once.</h2>
<p class="lead">No subscription, no coins, no energy bar. You try the club for free — on your
phone or right here in the browser — and if it gets its teeth into you, one payment opens
everything. For good.</p>
<div class="price">
<div class="tier">
<span class="big">FREE</span>
<h3>TRY THE CLUB</h3>
<ul>
<li>THE FIRST 10 GORE LEVELS</li>
<li>ZOMBIE TENNIS · THE FIRST 5 OPPONENTS</li>
<li>SAME FREE MODES IN THE BROWSER</li>
<li>NO ACCOUNT · NO ADS</li>
</ul>
</div>
<div class="tier paid">
<span class="big">2€ · ONCE</span>
<h3>THE FULL MEMBERSHIP</h3>
<ul>
<li>EVERY MODE, EVERY LEVEL, EVERY BOSS</li>
<li>ALL FUTURE CONTENT INCLUDED</li>
<li>LIFETIME · PAY ONCE, NEVER AGAIN</li>
<li>NEVER ADS. NEVER.</li>
</ul>
</div>
</div>
</section>
<section id="dead">
<p class="kicker">Know your enemy</p>
<h2>Meet <span>the dead</span></h2>
<p class="lead">Everyone who worked, watched or played at this club is still here. They have kept
their jobs. The jobs have changed.</p>
<div class="roster">
<div class="z"><div class="sprite"><img src="/assets/z_a1.png" alt=""><img src="/assets/z_a2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_a1.png" alt=""></div>
<h3>SHAMBLER</h3><span class="sub">THE ORDINARY DEAD</span><q>He was here before any of this.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_e1.png" alt=""><img src="/assets/z_e2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_e1.png" alt=""></div>
<h3>THE BALL BOY</h3><span class="sub">STILL FETCHING</span><q>He still fetches. He just bites now.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_s1.png" alt=""><img src="/assets/z_s2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_s1.png" alt=""></div>
<h3>THE SPECTATOR</h3><span class="sub">BLOCKS WITH HIS CHAIR</span><q>He paid for the whole seat.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_d1.png" alt=""><img src="/assets/z_d2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_d1.png" alt=""></div>
<h3>THE STEWARD</h3><span class="sub">HI-VIS · ONE HIT TOUGHER</span><q>He is asking you to leave.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_f1.png" alt=""><img src="/assets/z_f2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_f1.png" alt=""></div>
<h3>THE RUNNER</h3><span class="sub">ONE HIT · BUT HE SPRINTS</span><q>He covers the court. All of it.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_g1.png" alt=""><img src="/assets/z_g2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_g1.png" alt=""></div>
<h3>THE BRUTE</h3><span class="sub">SLOW · DRAGS A POLE</span><q>Nothing gets past him twice.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_h1.png" alt=""><img src="/assets/z_h2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_h1.png" alt=""></div>
<h3>THE BOUNCER</h3><span class="sub">BUILT LIKE A DOOR</span><q>Name's not on the list.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_k1.png" alt=""><img src="/assets/z_k2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_k1.png" alt=""></div>
<h3>THE ROLLER MAN</h3><span class="sub">HAULS THE COURT ROLLER</span><q>He flattened this court. Then the rest.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_r1.png" alt=""><img src="/assets/z_r2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_r1.png" alt=""></div>
<h3>THE CLUB PRO</h3><span class="sub">STILL HAS A BACKHAND</span><q>Beat him and his weapon is yours.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_mach1.png" alt=""><img src="/assets/z_mach2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_mach1.png" alt=""></div>
<h3>THE BALL MACHINE</h3><span class="sub">FIRES BACK · FURNITURE</span><q>Somebody left it on.</q></div>
</div>
</section>
@@ -288,26 +368,26 @@
court, clears the stage, and volleys at you until one of you stops moving. They don't shamble.
They remember the game.</p>
<div class="roster boss-grid">
<div class="z"><div class="sprite"><img src="/assets/z_boss1.png" alt=""><img src="/assets/z_boss2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_boss1.png" alt=""></div>
<h3>THE GROUNDSKEEPER</h3><q>He mowed this lawn for thirty years.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_judge1.png" alt=""><img src="/assets/z_judge2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_judge1.png" alt=""></div>
<h3>THE LINE JUDGE</h3><q>Every ball of yours is out.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_chair1.png" alt=""><img src="/assets/z_chair2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_chair1.png" alt=""></div>
<h3>THE CHAIR UMPIRE</h3><q>His call was always final.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_coach1.png" alt=""><img src="/assets/z_coach2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_coach1.png" alt=""></div>
<h3>THE HEAD COACH</h3><q>He taught you every shot you have.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_physio1.png" alt=""><img src="/assets/z_physio2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_physio1.png" alt=""></div>
<h3>THE PHYSIO</h3><q>He knows exactly where it hurts.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_mascot1.png" alt=""><img src="/assets/z_mascot2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_mascot1.png" alt=""></div>
<h3>THE SPONSOR MASCOT</h3><q>The crowd still loves him.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_string1.png" alt=""><img src="/assets/z_string2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_string1.png" alt=""></div>
<h3>THE STRINGER</h3><q>He strung your racket. He knows its limit.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_dir1.png" alt=""><img src="/assets/z_dir2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_dir1.png" alt=""></div>
<h3>THE TOURNAMENT DIRECTOR</h3><q>He is calling security.</q></div>
<div class="z"><div class="sprite"><img src="/assets/z_berry1.png" alt=""><img src="/assets/z_berry2.png" alt=""></div>
<div class="z"><div class="sprite"><img src="/assets/z_berry1.png" alt=""></div>
<h3>THE STRAWBERRY SELLER</h3><q>Cream with that?</q></div>
<div class="champ">
<div class="sprite"><img src="/assets/z_champ1.png" alt=""><img src="/assets/z_champ2.png" alt=""></div>
<div class="sprite"><img src="/assets/z_champ1.png" alt=""></div>
<div>
<span class="sub">EVERY TENTH CHAPTER · THE FINAL</span>
<h3>THE CHAMPION</h3>
@@ -337,7 +417,7 @@
<section class="foot">
<p class="tag">The umpire is still calling the score.</p>
<a class="cta" href="/">▶ PLAY SPLATTER TENNIS</a>
<p class="fine">FREE · NO DOWNLOAD · NO ADS · NO ACCOUNT<br>
<p class="fine">FREE TO PLAY · 2€ ONCE FOR EVERYTHING, FOREVER · NEVER ADS<br>
BEST ON A PHONE, HELD IN ONE HAND · ADD IT TO YOUR HOME SCREEN<br>
ZERO DEPENDENCIES · HANDMADE PIXELS · QUIET, PLEASE</p>
</section>