Sixty words on the wall became a dozen. The handoff's own summary of the rule:
Jersey 15 NAMES (screen titles, rooms, cards), Bangers CALLS exactly once per
screen (the fixture, the primary button, a modal headline), Silkscreen INFORMS
(numbers, labels, chips) — and a sentence survives only where it carries a
decision. Everything else moved into a bar, a pip or the modal that opens with
the mode.
· Jersey 15 bundled subset (9 KB) and Bungee retired after one afternoon
· SPLASH: the plaque is one row, the goal line is gone (the fixture button
below said it already), the two doors carry a number each
· PICK A GAME: rooms are one word, posters are their names, the fixture is a
hero with the only second line — the whole wall fits one screen now
· MATCH SETUP: unnumbered blocks, the meters' legend once instead of a
description per court, no summary footer
· DIFFICULTY: three pips instead of three sentences
· TRAINING: the revanche is a full-width row, rungs are numbers, the list
ends on the league that opens the rest of the ladder
· VS: three paragraphs became YOU / HOST / JOIN
· MODALS: one rule per row (the sub was the lead again in other words), the
blood pool as pips on that same line, and the walk-on's two levels in ONE
face at ONE size — a comparison drawn at two sizes is a headline with a
footnote (Oliver)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1421 lines
146 KiB
HTML
1421 lines
146 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="./support.js"></script>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<helmet>
|
|
<meta name="design_doc_mode" content="canvas">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@500;600&family=Jersey+15&display=swap" rel="stylesheet">
|
|
<style>
|
|
@font-face { font-family:'Silkscreen'; font-weight:400; src:url('assets/fonts/Silkscreen-Regular.ttf') format('truetype'); font-display:block; }
|
|
@font-face { font-family:'Silkscreen'; font-weight:700; src:url('assets/fonts/Silkscreen-Bold.ttf') format('truetype'); font-display:block; }
|
|
@font-face { font-family:'Bangers'; font-weight:400; src:url('assets/fonts/Bangers-Regular.ttf') format('truetype'); font-display:block; }
|
|
@font-face { font-family:'Bungee'; font-weight:400; src:url('assets/fonts/Bungee-Subset.ttf') format('truetype'); font-display:block; }
|
|
|
|
body { margin:0; background:#0a0f0d; font-family:Silkscreen, monospace; }
|
|
a { color:#bcd455; }
|
|
a:hover { color:#e2f087; }
|
|
</style>
|
|
</helmet>
|
|
|
|
<section style="padding:56px 48px 8px; display:flex; flex-direction:column; gap:26px">
|
|
<div style="display:flex; flex-direction:column; gap:6px">
|
|
<div style="font:400 22px 'Jersey 15', sans-serif; color:#bcd455; letter-spacing:1.5px">5 · GESETZT — ALLE SCREENS IN JERSEY 15</div>
|
|
<div style="font:400 11px/1.7 Silkscreen, monospace; color:#6c7f74; max-width:820px">Regel für alle: Jersey 15 benennt (Screen-Titel, Räume, Karten), Bangers ruft genau einmal pro Screen (das Fixture, der Primär-Button, die Modal-Headline), Silkscreen bleibt für Zahlen und Labels. Sätze nur, wo sie eine Entscheidung tragen — Regeln wandern ins Modal, Werte in Balken und Pips. Die Wand selbst ist <a href="#2c">2c</a>.</div>
|
|
</div>
|
|
|
|
<div id="5a" style="display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start">
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">SPLASH — OHNE ZIEL-SATZ, OHNE STRAPS</div>
|
|
<div style="width:390px; height:844px; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca; background:linear-gradient(rgba(12,20,17,0.60) 0%, rgba(12,20,17,0.30) 46%, rgba(12,20,17,0.58) 100%), url('assets/menu_bg.png') 50% 42% / cover no-repeat #0e1714; image-rendering:pixelated; padding:0 14px">
|
|
<div style="flex:1; display:flex; flex-direction:column; justify-content:center; padding:12px 0; text-align:center">
|
|
<img src="assets/logo.png" alt="Splatter Tennis" style="display:block; width:288px; height:auto; margin:0 auto 6px; image-rendering:pixelated; filter:drop-shadow(0 3px 0 rgba(0,0,0,0.45))">
|
|
<p style="margin:8px 0 20px; font:400 11px Silkscreen, monospace; color:#a8a09e; letter-spacing:0.5px">Fifteen. Thirty. Forty. <b style="color:#c9564a">Dead.</b></p>
|
|
<div style="position:relative; display:flex; align-items:center; gap:14px; text-align:left; margin:24px auto 0; width:330px; box-sizing:border-box; padding:14px 34px 14px 18px; background:rgba(8,14,10,0.48); border-radius:12px">
|
|
<img src="assets/badge_l3.png" alt="" style="height:50px; flex:none; image-rendering:pixelated; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))">
|
|
<div style="flex:1; min-width:0; display:flex; flex-direction:column; gap:7px">
|
|
<div style="display:flex; align-items:baseline; justify-content:space-between; gap:8px">
|
|
<b style="font:400 24px 'Jersey 15', sans-serif; color:#ccd7ca; letter-spacing:0.5px">OLIVER</b>
|
|
<u style="font:700 10px Silkscreen, monospace; color:#bcd455; text-decoration:none; letter-spacing:1px">LEVEL 12</u>
|
|
</div>
|
|
<span style="display:flex; align-items:center; gap:7px">
|
|
<s style="flex:1; height:6px; background:rgba(255,255,255,0.10); border:1px solid #2c4238; text-decoration:none; display:block"><i style="display:block; height:100%; width:62%; background:linear-gradient(90deg,#3f9560,#bcd455 55%,#e8b23a)"></i></s>
|
|
<u style="font:700 9px Silkscreen, monospace; color:#6c7f74; text-decoration:none">13</u>
|
|
</span>
|
|
</div>
|
|
<em style="position:absolute; right:14px; top:50%; transform:translateY(-50%); font:700 15px Silkscreen, monospace; font-style:normal; color:#bcd455">></em>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:auto; padding:10px 0 18px; display:flex; flex-direction:column">
|
|
<div style="padding:13px 10px 11px; background:#a4231f; border:2px solid #69201c; color:#f6e7dc; letter-spacing:2px; margin-bottom:10px; text-align:center">
|
|
<b style="display:block; font:400 26px/1.15 Bangers, cursive">LEAGUE 3 · THE CUP</b>
|
|
<i style="display:block; margin-top:3px; font:400 9px Silkscreen, monospace; font-style:normal; letter-spacing:0.5px; color:#f0cfc4">ROUND ONE: THE STRAWBERRY SELLER</i>
|
|
</div>
|
|
<div style="padding:14px 10px; background:#16211d; border:2px solid #2c4238; color:#ccd7ca; font:400 22px 'Jersey 15', sans-serif; letter-spacing:0.5px; text-align:center; margin-bottom:10px">OTHER GAMES</div>
|
|
<div style="display:flex; gap:8px">
|
|
<div style="flex:1; padding:12px 10px; background:#16211d; border:2px solid #2c4238; font:400 18px 'Jersey 15', sans-serif; text-align:center">STATS<i style="display:block; margin-top:5px; font:700 10px Silkscreen, monospace; font-style:normal; color:#bcd455">4 812</i></div>
|
|
<div style="flex:1; padding:12px 10px; background:#16211d; border:2px solid #2c4238; font:400 18px 'Jersey 15', sans-serif; text-align:center">BOARD<i style="display:block; margin-top:5px; font:700 10px Silkscreen, monospace; font-style:normal; color:#bcd455">BEST 612</i></div>
|
|
</div>
|
|
<p style="margin:14px 0 0; font:400 9px Silkscreen, monospace; color:#4a5a52; letter-spacing:0.5px; text-align:center">BUILD 341</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">MATCH SETUP — PLÄTZE OHNE BESCHREIBUNG, BALKEN SAGEN ES</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 33px/1 'Jersey 15', sans-serif; color:#bcd455; letter-spacing:0.5px">MATCH SETUP</div>
|
|
</div>
|
|
<div style="flex:1; padding:0 14px; overflow:hidden">
|
|
<div style="margin:18px 0 9px; font:400 17px 'Jersey 15', sans-serif; color:#bcd455; letter-spacing:1px">PLAYER</div>
|
|
<div style="display:flex; gap:12px; align-items:flex-start">
|
|
<div style="width:100px; height:176px; flex:none; background:repeating-linear-gradient(135deg,#16211d 0 6px,#1b2823 6px 12px); border:1px solid #2c4238; display:grid; place-items:center; text-align:center; font:400 8px/1.5 Silkscreen, monospace; color:#4a5a52">LIVE<br>PLAYER<br>SPRITE</div>
|
|
<div style="flex:1; min-width:0; display:flex; flex-direction:column; gap:7px">
|
|
<div style="display:flex; gap:7px">
|
|
<div style="flex:1; padding:11px 2px; background:rgba(188,212,85,0.09); border:2px solid #bcd455; color:#ccd7ca; font:400 16px 'Jersey 15', sans-serif; text-align:center">MEN'S</div>
|
|
<div style="flex:1; padding:11px 2px; background:rgba(42,62,54,0.42); border:2px solid #2c4238; color:#6c7f74; font:400 16px 'Jersey 15', sans-serif; text-align:center">WOMEN'S</div>
|
|
</div>
|
|
<u style="display:flex; justify-content:space-between; margin-top:2px; text-decoration:none; font:400 9px Silkscreen, monospace; color:#6c7f74; letter-spacing:1.5px">KIT<i style="font-style:normal; color:#ccd7ca">CLARET</i></u>
|
|
<div style="display:flex; gap:6px">
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#1678ba"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #bcd455; background:#b83030; box-shadow:inset 0 0 0 2px #0e1714"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#6ea52a"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#7a46c0"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#d4761e"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#2e3138"></div>
|
|
</div>
|
|
<u style="display:flex; justify-content:space-between; margin-top:2px; text-decoration:none; font:400 9px Silkscreen, monospace; color:#6c7f74; letter-spacing:1.5px">SKIN<i style="font-style:normal; color:#ccd7ca">OLIVE</i></u>
|
|
<div style="display:flex; gap:6px">
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#d6956f"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#eec4a4"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #bcd455; background:#b8825a; box-shadow:inset 0 0 0 2px #0e1714"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#8e5a38"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#5d3722"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin:22px 0 9px; display:flex; align-items:baseline; justify-content:space-between">
|
|
<span style="font:400 17px 'Jersey 15', sans-serif; color:#bcd455; letter-spacing:1px">COURT</span>
|
|
<span style="font:400 8px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">BOUNCE · PACE</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:11px; margin:0 0 8px; padding:7px; background:rgba(188,212,85,0.09); border:2px solid #bcd455">
|
|
<img src="assets/court_clay.png" alt="" style="width:92px; height:60px; display:block; image-rendering:pixelated; object-fit:cover; flex:none">
|
|
<div style="flex:1; min-width:0">
|
|
<b style="display:block; font:400 22px 'Jersey 15', sans-serif; color:#ccd7ca">TERRE ROUGE</b>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:7px"><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:78%; background:#bcd455"></i></s></div>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:4px"><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:34%; background:#4e8fa6"></i></s></div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:11px; margin:0 0 8px; padding:7px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/court_hard.png" alt="" style="width:92px; height:60px; display:block; image-rendering:pixelated; object-fit:cover; flex:none">
|
|
<div style="flex:1; min-width:0">
|
|
<b style="display:block; font:400 22px 'Jersey 15', sans-serif; color:#ccd7ca">THE SLAB</b>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:7px"><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:60%; background:#bcd455"></i></s></div>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:4px"><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:60%; background:#4e8fa6"></i></s></div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:11px; margin:0 0 8px; padding:7px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/court_grass.png" alt="" style="width:92px; height:60px; display:block; image-rendering:pixelated; object-fit:cover; flex:none">
|
|
<div style="flex:1; min-width:0">
|
|
<b style="display:block; font:400 22px 'Jersey 15', sans-serif; color:#ccd7ca">CENTRE COURT</b>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:7px"><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:40%; background:#bcd455"></i></s></div>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:4px"><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:86%; background:#4e8fa6"></i></s></div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:11px; padding:7px; background:rgba(42,62,54,0.42); border:2px solid #2c4238; opacity:0.45">
|
|
<img src="assets/court_gloom.png" alt="" style="width:92px; height:60px; display:block; image-rendering:pixelated; object-fit:cover; flex:none">
|
|
<div style="flex:1; min-width:0">
|
|
<b style="display:block; font:400 22px 'Jersey 15', sans-serif; color:#ccd7ca">THE NIGHT COURT</b>
|
|
<i style="display:block; margin-top:6px; font:400 9px Silkscreen, monospace; font-style:normal; color:#cf5a4e; letter-spacing:1px">LEAGUE 4</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding:10px 14px 18px; border-top:2px solid #2c4238; background:#16211d">
|
|
<div style="padding:13px 10px 11px; background:#a4231f; border:2px solid #69201c; color:#f6e7dc; font:400 26px Bangers, cursive; letter-spacing:2px; text-align:center">SERVE UP</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">DIFFICULTY — PIPS STATT ERKLÄRUNG</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 33px/1 'Jersey 15', sans-serif; color:#bcd455; letter-spacing:0.5px">DIFFICULTY</div>
|
|
</div>
|
|
<div style="flex:1; padding:14px 14px 0; display:flex; flex-direction:column; gap:10px">
|
|
<div style="display:flex; align-items:center; justify-content:space-between; padding:26px 16px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<span style="font:400 30px 'Jersey 15', sans-serif; color:#ccd7ca">EASY</span>
|
|
<span style="display:flex; gap:5px">
|
|
<i style="width:10px; height:10px; background:#bcd455"></i>
|
|
<i style="width:10px; height:10px; background:rgba(255,255,255,0.12)"></i>
|
|
<i style="width:10px; height:10px; background:rgba(255,255,255,0.12)"></i>
|
|
</span>
|
|
</div>
|
|
<div style="position:relative; display:flex; align-items:center; justify-content:space-between; padding:26px 16px; background:rgba(188,212,85,0.09); border:2px solid #bcd455">
|
|
<span style="font:400 30px 'Jersey 15', sans-serif; color:#ccd7ca">MEDIUM</span>
|
|
<span style="display:flex; gap:5px">
|
|
<i style="width:10px; height:10px; background:#bcd455"></i>
|
|
<i style="width:10px; height:10px; background:#bcd455"></i>
|
|
<i style="width:10px; height:10px; background:rgba(255,255,255,0.12)"></i>
|
|
</span>
|
|
<u style="position:absolute; top:8px; right:10px; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px; text-decoration:none">LAST</u>
|
|
</div>
|
|
<div style="display:flex; align-items:center; justify-content:space-between; padding:26px 16px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<span style="font:400 30px 'Jersey 15', sans-serif; color:#ccd7ca">HARD</span>
|
|
<span style="display:flex; gap:5px">
|
|
<i style="width:10px; height:10px; background:#cf5a4e"></i>
|
|
<i style="width:10px; height:10px; background:#cf5a4e"></i>
|
|
<i style="width:10px; height:10px; background:#cf5a4e"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">TRAINING — REVANCHE OBEN, SONST NUR NAME UND RANG</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 33px/1 'Jersey 15', sans-serif; color:#bcd455; letter-spacing:0.5px">TRAINING</div>
|
|
</div>
|
|
<div style="flex:1; padding:14px 14px 0; overflow:hidden">
|
|
<div style="display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:9px 12px 9px 9px; background:rgba(164,35,31,0.16); border:2px solid #a4231f">
|
|
<img src="assets/z_sbhead.png" alt="" style="height:52px; width:auto; display:block; image-rendering:pixelated; flex:none">
|
|
<div style="flex:1; min-width:0">
|
|
<b style="display:block; font:400 24px 'Jersey 15', sans-serif; color:#ccd7ca">THE STRAWBERRY SELLER</b>
|
|
<i style="display:block; margin-top:4px; font:400 9px Silkscreen, monospace; font-style:normal; color:#e08a7c; letter-spacing:1px">PUT YOU OUT</i>
|
|
</div>
|
|
<div style="font:700 15px Silkscreen, monospace; color:#bcd455">></div>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px">
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_shhead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 17px/1 'Jersey 15', sans-serif; color:#ccd7ca; text-align:center">THE SHAMBLER</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">01</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_bbhead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 17px/1 'Jersey 15', sans-serif; color:#ccd7ca; text-align:center">THE BALL BOY</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">02</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_sphead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 17px/1 'Jersey 15', sans-serif; color:#ccd7ca; text-align:center">THE SPECTATOR</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">03</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_gkhead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 17px/1 'Jersey 15', sans-serif; color:#ccd7ca; text-align:center">THE GROUNDSKEEPER</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">04</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_rmhead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 17px/1 'Jersey 15', sans-serif; color:#ccd7ca; text-align:center">THE ROLLER MAN</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">05</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_sthead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 17px/1 'Jersey 15', sans-serif; color:#ccd7ca; text-align:center">THE STEWARD</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">06</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_mahead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 17px/1 'Jersey 15', sans-serif; color:#ccd7ca; text-align:center">THE MASCOT</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">07</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_ruhead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 17px/1 'Jersey 15', sans-serif; color:#ccd7ca; text-align:center">THE RUNNER</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">08</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_sghead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 17px/1 'Jersey 15', sans-serif; color:#ccd7ca; text-align:center">THE STRINGER</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">10</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_ljhead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 17px/1 'Jersey 15', sans-serif; color:#ccd7ca; text-align:center">THE LINE JUDGE</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">11</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_cuhead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 17px/1 'Jersey 15', sans-serif; color:#ccd7ca; text-align:center">THE CHAIR UMPIRE</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">12</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.20); border:2px dashed #2c4238">
|
|
<b style="font:400 16px/1.1 'Jersey 15', sans-serif; color:#4a5a52; text-align:center">LEAGUE 4</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#4a5a52; font-style:normal; letter-spacing:1px">13 — 15</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">VS A FRIEND — DREI ZEILEN STATT DREI ABSÄTZE</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 33px/1 'Jersey 15', sans-serif; color:#bcd455; letter-spacing:0.5px">VS A FRIEND</div>
|
|
</div>
|
|
<div style="flex:1; padding:16px 14px 0; display:flex; flex-direction:column; gap:22px">
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 17px 'Jersey 15', sans-serif; color:#bcd455; letter-spacing:1px">YOU</div>
|
|
<div style="padding:14px 12px; background:#16211d; border:2px solid #2c4238; font:700 14px Silkscreen, monospace; color:#ccd7ca; letter-spacing:2px">OLIVER</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 17px 'Jersey 15', sans-serif; color:#bcd455; letter-spacing:1px">HOST</div>
|
|
<div style="display:flex; gap:8px">
|
|
<div style="flex:1; padding:20px 8px; background:rgba(42,62,54,0.42); border:2px solid #2c4238; font:400 19px/1 'Jersey 15', sans-serif; color:#ccd7ca; text-align:center">CLASSIC</div>
|
|
<div style="flex:1; padding:20px 8px; background:rgba(42,62,54,0.42); border:2px solid #2c4238; font:400 19px/1 'Jersey 15', sans-serif; color:#ccd7ca; text-align:center">DEATH MATCH</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 17px 'Jersey 15', sans-serif; color:#bcd455; letter-spacing:1px">JOIN</div>
|
|
<div style="display:flex; gap:8px">
|
|
<div style="flex:1; padding:14px 12px; background:#16211d; border:2px solid #2c4238; font:700 14px Silkscreen, monospace; color:#4a5a52; letter-spacing:6px">CODE</div>
|
|
<div style="width:96px; flex:none; padding:14px 0; background:#16211d; border:2px solid #2c4238; font:400 19px 'Jersey 15', sans-serif; color:#ccd7ca; text-align:center">GO</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">MODALS — EINE REGEL PRO ZEILE</div>
|
|
<div style="width:390px; height:844px; position:relative; overflow:hidden; border:2px solid #2c4238; background:#12281c">
|
|
<div style="position:absolute; inset:0; background:url('assets/court_clay.png') center / cover no-repeat; image-rendering:pixelated; opacity:0.75"></div>
|
|
<div style="position:absolute; inset:0; background:rgba(6,10,8,0.45)"></div>
|
|
<div style="position:absolute; left:19px; right:19px; top:96px; background:rgba(8,22,16,0.93); border:1px solid rgba(120,150,130,0.45); border-radius:5px; padding:20px; display:flex; flex-direction:column; gap:18px">
|
|
<div style="display:flex; align-items:center; gap:12px">
|
|
<div style="width:52px; height:52px; border:1px solid rgba(120,150,130,0.28); background:rgba(188,212,85,0.06); display:grid; place-items:center; font:400 22px Bangers, cursive; color:#bcd455">C</div>
|
|
<div style="display:flex; flex-direction:column; gap:4px">
|
|
<div style="font:400 27px/1 Bangers, cursive; color:#e07a3c; letter-spacing:1px">THE TOURNAMENT</div>
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:0.5px">LEAGUE 3 · 4 ROUNDS</div>
|
|
</div>
|
|
</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="font:700 12px Silkscreen, monospace; color:#ccd7ca; letter-spacing:0.5px">WIN IT ALL — MOVE UP A LEAGUE</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="display:flex; align-items:center; justify-content:space-between; gap:10px">
|
|
<div style="font:700 12px Silkscreen, monospace; color:#cf5a4e; letter-spacing:0.5px">POINTS DRAW BLOOD</div>
|
|
<div style="display:flex; gap:4px">
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
</div>
|
|
</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="height:43px; background:#a4231f; border:1px solid #69201c; display:grid; place-items:center; font:400 20px Bangers, cursive; color:#f6e7dc; letter-spacing:2px">WALK ON</div>
|
|
</div>
|
|
<div style="position:absolute; left:19px; right:19px; top:430px; background:rgba(8,22,16,0.93); border:1px solid rgba(120,150,130,0.45); border-radius:5px; padding:20px; display:flex; flex-direction:column; gap:18px">
|
|
<div style="display:flex; align-items:center; gap:12px">
|
|
<img src="assets/z_sbhead.png" alt="" style="height:56px; width:auto; flex:none; image-rendering:pixelated">
|
|
<div style="flex:1; min-width:0; display:flex; flex-direction:column; gap:4px">
|
|
<div style="font:400 25px/1 Bangers, cursive; color:#e07a3c; letter-spacing:1px">THE STRAWBERRY SELLER</div>
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74">CREAM WITH THAT?</div>
|
|
</div>
|
|
</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="display:flex; align-items:center; justify-content:space-between">
|
|
<div style="font:700 12px Silkscreen, monospace; color:#cf5a4e; letter-spacing:1px">LEVEL 14</div>
|
|
<div style="font:400 9px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">YOURS 12</div>
|
|
</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="height:43px; background:#a4231f; border:1px solid #69201c; display:grid; place-items:center; font:400 20px Bangers, cursive; color:#f6e7dc; letter-spacing:2px">WALK ON</div>
|
|
</div>
|
|
<div style="position:absolute; left:19px; right:19px; top:658px; background:#16211d; border:2px solid #2c4238; padding:18px 16px; display:flex; flex-direction:column; gap:10px">
|
|
<div style="font:400 20px Bangers, cursive; color:#ccd7ca; letter-spacing:1px; text-align:center">LEAVE THE MATCH?</div>
|
|
<div style="padding:12px 10px; background:#a4231f; border:2px solid #69201c; color:#f6e7dc; font:400 20px Bangers, cursive; letter-spacing:2px; text-align:center">BACK TO THE MENU</div>
|
|
<div style="padding:12px 10px; background:#16211d; border:2px solid #2c4238; color:#ccd7ca; font:400 19px 'Jersey 15', sans-serif; text-align:center">PLAY ON</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section style="padding:56px 48px 8px; display:flex; flex-direction:column; gap:26px">
|
|
<div style="display:flex; flex-direction:column; gap:6px">
|
|
<div style="font:400 15px 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:1.5px; font-size:19px">4 · ERSATZ FÜR BUNGEE — DREI KANDIDATEN AN EINEM SCREEN</div>
|
|
<div style="font:400 11px/1.7 Silkscreen, monospace; color:#6c7f74; max-width:820px">Gesucht: aufrecht (Bangers ist geneigt), Großbuchstaben, leichter und weniger blockig als Bungee, aber im Sport-/Club-Milieu zuhause. Alle drei sind Google Fonts unter SIL OFL, also genauso bündelbar und subsetbar wie die vier Schriften, die schon im Repo liegen. Layout, Grössen-Wirkung und der Bangers-Hero sind in allen drei identisch — nur Screen-Titel, Raum-Label und Poster-Namen wechseln.</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-wrap:wrap; gap:44px; align-items:flex-start">
|
|
|
|
<div id="4a" style="display:flex; flex-direction:column; gap:12px">
|
|
<div style="display:flex; align-items:baseline; gap:10px">
|
|
<span style="font:400 13px 'Bebas Neue', sans-serif; color:#0e1714; background:#bcd455; padding:5px 9px 3px; letter-spacing:1px">4a</span>
|
|
<span style="font:400 16px 'Bebas Neue', sans-serif; color:#ccd7ca; letter-spacing:1px">BEBAS NEUE — CLUB-BESCHILDERUNG</span>
|
|
</div>
|
|
<div style="font:400 10px/1.7 Silkscreen, monospace; color:#6c7f74; width:390px">Hoch, schmal, dünne Striche — die Schrift von Anzeigetafeln und Turnierplakaten. Nimmt viel weniger Fläche als Bungee, bleibt aber laut, weil sie hoch ist. Nur Grossbuchstaben, was hier ohnehin gilt.</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 30px/1 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:1.5px">PICK A GAME</div>
|
|
</div>
|
|
<div style="flex:1; padding:14px 14px 0; display:flex; flex-direction:column; gap:17px">
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 16px/1 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:2px">SEASON</div>
|
|
<div style="position:relative; height:142px; border:2px solid #2c4238; background:#000 url('assets/mode_cup.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:10px 12px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:52%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.82) 26%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:12px; left:-8px; background:#a4231f; border-top:1px solid rgba(255,255,255,0.35); border-bottom:1px solid #69201c; padding:7px 14px 7px 16px; font:700 12px Silkscreen, monospace; color:#fff; letter-spacing:1px; text-shadow:1px 1px 0 rgba(0,0,0,0.55)">THE WAY UP</div>
|
|
<div style="position:relative; z-index:2; display:flex; flex-direction:column; gap:6px">
|
|
<div style="font:400 32px/0.95 Bangers, cursive; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">THE TOURNAMENT</div>
|
|
<div style="font:400 10px Silkscreen, monospace; color:#f0cfc4; letter-spacing:0.5px; text-shadow:0 1px 0 #000">LEAGUE 3 · ROUND ONE: THE STRAWBERRY SELLER</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 16px/1 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:2px">TRAINING</div>
|
|
<div style="display:flex; gap:8px">
|
|
<div style="position:relative; flex:1; height:106px; border:2px solid #2c4238; background:#000 url('assets/mode_arcade.png') center / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 10px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 24px/0.95 'Bebas Neue', sans-serif; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">ARCADE</div>
|
|
</div>
|
|
<div style="position:relative; flex:1; height:106px; border:2px solid #2c4238; background:#000 url('assets/mode_train.png') center / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 10px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:7px; right:8px; z-index:2; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px">18 RUNGS</div>
|
|
<div style="position:relative; z-index:2; font:400 24px/0.95 'Bebas Neue', sans-serif; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">TRAINING</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 16px/1 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:2px">CASUAL</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_gore.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 27px/0.95 'Bebas Neue', sans-serif; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">SPLATTER GORE</div>
|
|
</div>
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_classic.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:7px; right:8px; z-index:2; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px">LAST</div>
|
|
<div style="position:relative; z-index:2; font:400 27px/0.95 'Bebas Neue', sans-serif; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">CLASSIC TENNIS</div>
|
|
</div>
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_vs.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 27px/0.95 'Bebas Neue', sans-serif; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">VS A FRIEND</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="4b" style="display:flex; flex-direction:column; gap:12px">
|
|
<div style="display:flex; align-items:baseline; gap:10px">
|
|
<span style="font:500 13px Oswald, sans-serif; color:#0e1714; background:#bcd455; padding:5px 9px; letter-spacing:1px">4b</span>
|
|
<span style="font:500 15px Oswald, sans-serif; color:#ccd7ca; letter-spacing:1px">OSWALD 500 — PLAKAT, MITTLERES GEWICHT</span>
|
|
</div>
|
|
<div style="font:400 10px/1.7 Silkscreen, monospace; color:#6c7f74; width:390px">Leicht schmalgelaufene Gothic — Turnierplakat statt Neon-Schild. Hat echte Schnitte, also lässt sich das Gewicht regeln (hier 500), was Bungee als Single-Weight nie konnte. Ruhigste der drei.</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:600 25px/1.1 Oswald, sans-serif; color:#bcd455; letter-spacing:1px">PICK A GAME</div>
|
|
</div>
|
|
<div style="flex:1; padding:14px 14px 0; display:flex; flex-direction:column; gap:17px">
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:500 14px/1 Oswald, sans-serif; color:#bcd455; letter-spacing:2px">SEASON</div>
|
|
<div style="position:relative; height:142px; border:2px solid #2c4238; background:#000 url('assets/mode_cup.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:10px 12px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:52%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.82) 26%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:12px; left:-8px; background:#a4231f; border-top:1px solid rgba(255,255,255,0.35); border-bottom:1px solid #69201c; padding:7px 14px 7px 16px; font:700 12px Silkscreen, monospace; color:#fff; letter-spacing:1px; text-shadow:1px 1px 0 rgba(0,0,0,0.55)">THE WAY UP</div>
|
|
<div style="position:relative; z-index:2; display:flex; flex-direction:column; gap:6px">
|
|
<div style="font:400 32px/0.95 Bangers, cursive; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">THE TOURNAMENT</div>
|
|
<div style="font:400 10px Silkscreen, monospace; color:#f0cfc4; letter-spacing:0.5px; text-shadow:0 1px 0 #000">LEAGUE 3 · ROUND ONE: THE STRAWBERRY SELLER</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:500 14px/1 Oswald, sans-serif; color:#bcd455; letter-spacing:2px">TRAINING</div>
|
|
<div style="display:flex; gap:8px">
|
|
<div style="position:relative; flex:1; height:106px; border:2px solid #2c4238; background:#000 url('assets/mode_arcade.png') center / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 10px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:500 20px/1 Oswald, sans-serif; color:#fff; letter-spacing:0.5px; text-shadow:0 2px 0 #000">ARCADE</div>
|
|
</div>
|
|
<div style="position:relative; flex:1; height:106px; border:2px solid #2c4238; background:#000 url('assets/mode_train.png') center / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 10px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:7px; right:8px; z-index:2; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px">18 RUNGS</div>
|
|
<div style="position:relative; z-index:2; font:500 20px/1 Oswald, sans-serif; color:#fff; letter-spacing:0.5px; text-shadow:0 2px 0 #000">TRAINING</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:500 14px/1 Oswald, sans-serif; color:#bcd455; letter-spacing:2px">CASUAL</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_gore.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:500 22px/1 Oswald, sans-serif; color:#fff; letter-spacing:0.5px; text-shadow:0 2px 0 #000">SPLATTER GORE</div>
|
|
</div>
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_classic.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:7px; right:8px; z-index:2; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px">LAST</div>
|
|
<div style="position:relative; z-index:2; font:500 22px/1 Oswald, sans-serif; color:#fff; letter-spacing:0.5px; text-shadow:0 2px 0 #000">CLASSIC TENNIS</div>
|
|
</div>
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_vs.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:500 22px/1 Oswald, sans-serif; color:#fff; letter-spacing:0.5px; text-shadow:0 2px 0 #000">VS A FRIEND</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="4c" style="display:flex; flex-direction:column; gap:12px">
|
|
<div style="display:flex; align-items:baseline; gap:10px">
|
|
<span style="font:400 15px 'Jersey 15', sans-serif; color:#0e1714; background:#bcd455; padding:4px 9px; letter-spacing:1px">4c</span>
|
|
<span style="font:400 19px 'Jersey 15', sans-serif; color:#ccd7ca; letter-spacing:1px">JERSEY 15 — PIXELRASTER, TRIKOTNUMMER</span>
|
|
</div>
|
|
<div style="font:400 10px/1.7 Silkscreen, monospace; color:#6c7f74; width:390px">Sitzt auf demselben Raster wie Silkscreen, ist aber proportional und viel dünner — die Schrift auf einem Trikot, nicht auf einem Terminal. Bleibt am nächsten an der Pixel-Art, ist aber die klar leiseste Wahl.</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 34px/1 'Jersey 15', sans-serif; color:#bcd455; letter-spacing:1px">PICK A GAME</div>
|
|
</div>
|
|
<div style="flex:1; padding:14px 14px 0; display:flex; flex-direction:column; gap:17px">
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 18px/1 'Jersey 15', sans-serif; color:#bcd455; letter-spacing:2px">SEASON</div>
|
|
<div style="position:relative; height:142px; border:2px solid #2c4238; background:#000 url('assets/mode_cup.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:10px 12px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:52%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.82) 26%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:12px; left:-8px; background:#a4231f; border-top:1px solid rgba(255,255,255,0.35); border-bottom:1px solid #69201c; padding:7px 14px 7px 16px; font:700 12px Silkscreen, monospace; color:#fff; letter-spacing:1px; text-shadow:1px 1px 0 rgba(0,0,0,0.55)">THE WAY UP</div>
|
|
<div style="position:relative; z-index:2; display:flex; flex-direction:column; gap:6px">
|
|
<div style="font:400 32px/0.95 Bangers, cursive; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">THE TOURNAMENT</div>
|
|
<div style="font:400 10px Silkscreen, monospace; color:#f0cfc4; letter-spacing:0.5px; text-shadow:0 1px 0 #000">LEAGUE 3 · ROUND ONE: THE STRAWBERRY SELLER</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 18px/1 'Jersey 15', sans-serif; color:#bcd455; letter-spacing:2px">TRAINING</div>
|
|
<div style="display:flex; gap:8px">
|
|
<div style="position:relative; flex:1; height:106px; border:2px solid #2c4238; background:#000 url('assets/mode_arcade.png') center / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 10px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 27px/1 'Jersey 15', sans-serif; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">ARCADE</div>
|
|
</div>
|
|
<div style="position:relative; flex:1; height:106px; border:2px solid #2c4238; background:#000 url('assets/mode_train.png') center / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 10px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:7px; right:8px; z-index:2; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px">18 RUNGS</div>
|
|
<div style="position:relative; z-index:2; font:400 27px/1 'Jersey 15', sans-serif; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">TRAINING</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 18px/1 'Jersey 15', sans-serif; color:#bcd455; letter-spacing:2px">CASUAL</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_gore.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 30px/1 'Jersey 15', sans-serif; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">SPLATTER GORE</div>
|
|
</div>
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_classic.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:7px; right:8px; z-index:2; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px">LAST</div>
|
|
<div style="position:relative; z-index:2; font:400 30px/1 'Jersey 15', sans-serif; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">CLASSIC TENNIS</div>
|
|
</div>
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_vs.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 30px/1 'Jersey 15', sans-serif; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">VS A FRIEND</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="padding:8px 48px 8px; display:flex; flex-direction:column; gap:26px">
|
|
<div style="display:flex; flex-direction:column; gap:6px">
|
|
<div style="font:400 19px 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:1.5px">3a · ALLE FUNKTIONALEN SCREENS IN DER GEWÄHLTEN SPRACHE</div>
|
|
<div style="font:400 11px/1.7 Silkscreen, monospace; color:#6c7f74; max-width:820px">Regel für alle: Bebas Neue benennt (Screen-Titel, Räume, Karten), Bangers ruft genau einmal pro Screen (das Fixture, der Primär-Button, die Modal-Headline), Silkscreen bleibt für Zahlen und Labels. Sätze nur, wo sie eine Entscheidung tragen — Regeln wandern ins Modal, Werte in Balken und Pips. Die Wand selbst ist <a href="#2c">2c</a>.</div>
|
|
</div>
|
|
|
|
<div id="3a" style="display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start">
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">SPLASH — OHNE ZIEL-SATZ, OHNE STRAPS</div>
|
|
<div style="width:390px; height:844px; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca; background:linear-gradient(rgba(12,20,17,0.60) 0%, rgba(12,20,17,0.30) 46%, rgba(12,20,17,0.58) 100%), url('assets/menu_bg.png') 50% 42% / cover no-repeat #0e1714; image-rendering:pixelated; padding:0 14px">
|
|
<div style="flex:1; display:flex; flex-direction:column; justify-content:center; padding:12px 0; text-align:center">
|
|
<img src="assets/logo.png" alt="Splatter Tennis" style="display:block; width:288px; height:auto; margin:0 auto 6px; image-rendering:pixelated; filter:drop-shadow(0 3px 0 rgba(0,0,0,0.45))">
|
|
<p style="margin:8px 0 20px; font:400 11px Silkscreen, monospace; color:#a8a09e; letter-spacing:0.5px">Fifteen. Thirty. Forty. <b style="color:#c9564a">Dead.</b></p>
|
|
<div style="position:relative; display:flex; align-items:center; gap:14px; text-align:left; margin:24px auto 0; width:330px; box-sizing:border-box; padding:14px 34px 14px 18px; background:rgba(8,14,10,0.48); border-radius:12px">
|
|
<img src="assets/badge_l3.png" alt="" style="height:50px; flex:none; image-rendering:pixelated; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))">
|
|
<div style="flex:1; min-width:0; display:flex; flex-direction:column; gap:7px">
|
|
<div style="display:flex; align-items:baseline; justify-content:space-between; gap:8px">
|
|
<b style="font:400 21px 'Bebas Neue', sans-serif; color:#ccd7ca; letter-spacing:0.5px">OLIVER</b>
|
|
<u style="font:700 10px Silkscreen, monospace; color:#bcd455; text-decoration:none; letter-spacing:1px">LEVEL 12</u>
|
|
</div>
|
|
<span style="display:flex; align-items:center; gap:7px">
|
|
<s style="flex:1; height:6px; background:rgba(255,255,255,0.10); border:1px solid #2c4238; text-decoration:none; display:block"><i style="display:block; height:100%; width:62%; background:linear-gradient(90deg,#3f9560,#bcd455 55%,#e8b23a)"></i></s>
|
|
<u style="font:700 9px Silkscreen, monospace; color:#6c7f74; text-decoration:none">13</u>
|
|
</span>
|
|
</div>
|
|
<em style="position:absolute; right:14px; top:50%; transform:translateY(-50%); font:700 15px Silkscreen, monospace; font-style:normal; color:#bcd455">></em>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:auto; padding:10px 0 18px; display:flex; flex-direction:column">
|
|
<div style="padding:13px 10px 11px; background:#a4231f; border:2px solid #69201c; color:#f6e7dc; letter-spacing:2px; margin-bottom:10px; text-align:center">
|
|
<b style="display:block; font:400 26px/1.15 Bangers, cursive">LEAGUE 3 · THE CUP</b>
|
|
<i style="display:block; margin-top:3px; font:400 9px Silkscreen, monospace; font-style:normal; letter-spacing:0.5px; color:#f0cfc4">ROUND ONE: THE STRAWBERRY SELLER</i>
|
|
</div>
|
|
<div style="padding:14px 10px; background:#16211d; border:2px solid #2c4238; color:#ccd7ca; font:400 19px 'Bebas Neue', sans-serif; letter-spacing:0.5px; text-align:center; margin-bottom:10px">OTHER GAMES</div>
|
|
<div style="display:flex; gap:8px">
|
|
<div style="flex:1; padding:12px 10px; background:#16211d; border:2px solid #2c4238; font:400 16px 'Bebas Neue', sans-serif; text-align:center">STATS<i style="display:block; margin-top:5px; font:700 10px Silkscreen, monospace; font-style:normal; color:#bcd455">4 812</i></div>
|
|
<div style="flex:1; padding:12px 10px; background:#16211d; border:2px solid #2c4238; font:400 16px 'Bebas Neue', sans-serif; text-align:center">BOARD<i style="display:block; margin-top:5px; font:700 10px Silkscreen, monospace; font-style:normal; color:#bcd455">BEST 612</i></div>
|
|
</div>
|
|
<p style="margin:14px 0 0; font:400 9px Silkscreen, monospace; color:#4a5a52; letter-spacing:0.5px; text-align:center">BUILD 341</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">MATCH SETUP — PLÄTZE OHNE BESCHREIBUNG, BALKEN SAGEN ES</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 29px/1.1 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:0.5px">MATCH SETUP</div>
|
|
</div>
|
|
<div style="flex:1; padding:0 14px; overflow:hidden">
|
|
<div style="margin:18px 0 9px; font:400 15px 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:1px">PLAYER</div>
|
|
<div style="display:flex; gap:12px; align-items:flex-start">
|
|
<div style="width:100px; height:176px; flex:none; background:repeating-linear-gradient(135deg,#16211d 0 6px,#1b2823 6px 12px); border:1px solid #2c4238; display:grid; place-items:center; text-align:center; font:400 8px/1.5 Silkscreen, monospace; color:#4a5a52">LIVE<br>PLAYER<br>SPRITE</div>
|
|
<div style="flex:1; min-width:0; display:flex; flex-direction:column; gap:7px">
|
|
<div style="display:flex; gap:7px">
|
|
<div style="flex:1; padding:11px 2px; background:rgba(188,212,85,0.09); border:2px solid #bcd455; color:#ccd7ca; font:400 14px 'Bebas Neue', sans-serif; text-align:center">MEN'S</div>
|
|
<div style="flex:1; padding:11px 2px; background:rgba(42,62,54,0.42); border:2px solid #2c4238; color:#6c7f74; font:400 14px 'Bebas Neue', sans-serif; text-align:center">WOMEN'S</div>
|
|
</div>
|
|
<u style="display:flex; justify-content:space-between; margin-top:2px; text-decoration:none; font:400 9px Silkscreen, monospace; color:#6c7f74; letter-spacing:1.5px">KIT<i style="font-style:normal; color:#ccd7ca">CLARET</i></u>
|
|
<div style="display:flex; gap:6px">
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#1678ba"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #bcd455; background:#b83030; box-shadow:inset 0 0 0 2px #0e1714"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#6ea52a"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#7a46c0"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#d4761e"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#2e3138"></div>
|
|
</div>
|
|
<u style="display:flex; justify-content:space-between; margin-top:2px; text-decoration:none; font:400 9px Silkscreen, monospace; color:#6c7f74; letter-spacing:1.5px">SKIN<i style="font-style:normal; color:#ccd7ca">OLIVE</i></u>
|
|
<div style="display:flex; gap:6px">
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#d6956f"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#eec4a4"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #bcd455; background:#b8825a; box-shadow:inset 0 0 0 2px #0e1714"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#8e5a38"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#5d3722"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin:22px 0 9px; display:flex; align-items:baseline; justify-content:space-between">
|
|
<span style="font:400 15px 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:1px">COURT</span>
|
|
<span style="font:400 8px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">BOUNCE · PACE</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:11px; margin:0 0 8px; padding:7px; background:rgba(188,212,85,0.09); border:2px solid #bcd455">
|
|
<img src="assets/court_clay.png" alt="" style="width:92px; height:60px; display:block; image-rendering:pixelated; object-fit:cover; flex:none">
|
|
<div style="flex:1; min-width:0">
|
|
<b style="display:block; font:400 19px 'Bebas Neue', sans-serif; color:#ccd7ca">TERRE ROUGE</b>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:7px"><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:78%; background:#bcd455"></i></s></div>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:4px"><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:34%; background:#4e8fa6"></i></s></div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:11px; margin:0 0 8px; padding:7px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/court_hard.png" alt="" style="width:92px; height:60px; display:block; image-rendering:pixelated; object-fit:cover; flex:none">
|
|
<div style="flex:1; min-width:0">
|
|
<b style="display:block; font:400 19px 'Bebas Neue', sans-serif; color:#ccd7ca">THE SLAB</b>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:7px"><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:60%; background:#bcd455"></i></s></div>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:4px"><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:60%; background:#4e8fa6"></i></s></div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:11px; margin:0 0 8px; padding:7px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/court_grass.png" alt="" style="width:92px; height:60px; display:block; image-rendering:pixelated; object-fit:cover; flex:none">
|
|
<div style="flex:1; min-width:0">
|
|
<b style="display:block; font:400 19px 'Bebas Neue', sans-serif; color:#ccd7ca">CENTRE COURT</b>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:7px"><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:40%; background:#bcd455"></i></s></div>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:4px"><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:86%; background:#4e8fa6"></i></s></div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:11px; padding:7px; background:rgba(42,62,54,0.42); border:2px solid #2c4238; opacity:0.45">
|
|
<img src="assets/court_gloom.png" alt="" style="width:92px; height:60px; display:block; image-rendering:pixelated; object-fit:cover; flex:none">
|
|
<div style="flex:1; min-width:0">
|
|
<b style="display:block; font:400 19px 'Bebas Neue', sans-serif; color:#ccd7ca">THE NIGHT COURT</b>
|
|
<i style="display:block; margin-top:6px; font:400 9px Silkscreen, monospace; font-style:normal; color:#cf5a4e; letter-spacing:1px">LEAGUE 4</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding:10px 14px 18px; border-top:2px solid #2c4238; background:#16211d">
|
|
<div style="padding:13px 10px 11px; background:#a4231f; border:2px solid #69201c; color:#f6e7dc; font:400 26px Bangers, cursive; letter-spacing:2px; text-align:center">SERVE UP</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">DIFFICULTY — PIPS STATT ERKLÄRUNG</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 29px/1.1 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:0.5px">DIFFICULTY</div>
|
|
</div>
|
|
<div style="flex:1; padding:14px 14px 0; display:flex; flex-direction:column; gap:10px">
|
|
<div style="display:flex; align-items:center; justify-content:space-between; padding:26px 16px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<span style="font:400 27px 'Bebas Neue', sans-serif; color:#ccd7ca">EASY</span>
|
|
<span style="display:flex; gap:5px">
|
|
<i style="width:10px; height:10px; background:#bcd455"></i>
|
|
<i style="width:10px; height:10px; background:rgba(255,255,255,0.12)"></i>
|
|
<i style="width:10px; height:10px; background:rgba(255,255,255,0.12)"></i>
|
|
</span>
|
|
</div>
|
|
<div style="position:relative; display:flex; align-items:center; justify-content:space-between; padding:26px 16px; background:rgba(188,212,85,0.09); border:2px solid #bcd455">
|
|
<span style="font:400 27px 'Bebas Neue', sans-serif; color:#ccd7ca">MEDIUM</span>
|
|
<span style="display:flex; gap:5px">
|
|
<i style="width:10px; height:10px; background:#bcd455"></i>
|
|
<i style="width:10px; height:10px; background:#bcd455"></i>
|
|
<i style="width:10px; height:10px; background:rgba(255,255,255,0.12)"></i>
|
|
</span>
|
|
<u style="position:absolute; top:8px; right:10px; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px; text-decoration:none">LAST</u>
|
|
</div>
|
|
<div style="display:flex; align-items:center; justify-content:space-between; padding:26px 16px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<span style="font:400 27px 'Bebas Neue', sans-serif; color:#ccd7ca">HARD</span>
|
|
<span style="display:flex; gap:5px">
|
|
<i style="width:10px; height:10px; background:#cf5a4e"></i>
|
|
<i style="width:10px; height:10px; background:#cf5a4e"></i>
|
|
<i style="width:10px; height:10px; background:#cf5a4e"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">TRAINING — REVANCHE OBEN, SONST NUR NAME UND RANG</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 29px/1.1 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:0.5px">TRAINING</div>
|
|
</div>
|
|
<div style="flex:1; padding:14px 14px 0; overflow:hidden">
|
|
<div style="display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:9px 12px 9px 9px; background:rgba(164,35,31,0.16); border:2px solid #a4231f">
|
|
<img src="assets/z_sbhead.png" alt="" style="height:52px; width:auto; display:block; image-rendering:pixelated; flex:none">
|
|
<div style="flex:1; min-width:0">
|
|
<b style="display:block; font:400 21px 'Bebas Neue', sans-serif; color:#ccd7ca">THE STRAWBERRY SELLER</b>
|
|
<i style="display:block; margin-top:4px; font:400 9px Silkscreen, monospace; font-style:normal; color:#e08a7c; letter-spacing:1px">PUT YOU OUT</i>
|
|
</div>
|
|
<div style="font:700 15px Silkscreen, monospace; color:#bcd455">></div>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px">
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_shhead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 15px/1.1 'Bebas Neue', sans-serif; color:#ccd7ca; text-align:center">THE SHAMBLER</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">01</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_bbhead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 15px/1.1 'Bebas Neue', sans-serif; color:#ccd7ca; text-align:center">THE BALL BOY</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">02</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_sphead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 15px/1.1 'Bebas Neue', sans-serif; color:#ccd7ca; text-align:center">THE SPECTATOR</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">03</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_gkhead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 15px/1.1 'Bebas Neue', sans-serif; color:#ccd7ca; text-align:center">THE GROUNDSKEEPER</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">04</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_rmhead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 15px/1.1 'Bebas Neue', sans-serif; color:#ccd7ca; text-align:center">THE ROLLER MAN</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">05</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_sthead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 15px/1.1 'Bebas Neue', sans-serif; color:#ccd7ca; text-align:center">THE STEWARD</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">06</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_mahead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 15px/1.1 'Bebas Neue', sans-serif; color:#ccd7ca; text-align:center">THE MASCOT</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">07</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_ruhead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 15px/1.1 'Bebas Neue', sans-serif; color:#ccd7ca; text-align:center">THE RUNNER</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">08</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_sghead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 15px/1.1 'Bebas Neue', sans-serif; color:#ccd7ca; text-align:center">THE STRINGER</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">10</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_ljhead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 15px/1.1 'Bebas Neue', sans-serif; color:#ccd7ca; text-align:center">THE LINE JUDGE</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">11</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/z_cuhead.png" alt="" style="height:44px; width:auto; display:block; image-rendering:pixelated">
|
|
<b style="font:400 15px/1.1 'Bebas Neue', sans-serif; color:#ccd7ca; text-align:center">THE CHAIR UMPIRE</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#6c7f74; font-style:normal; letter-spacing:1px">12</i>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px 6px 10px; background:rgba(42,62,54,0.20); border:2px dashed #2c4238">
|
|
<b style="font:400 14px/1.2 'Bebas Neue', sans-serif; color:#4a5a52; text-align:center">LEAGUE 4</b>
|
|
<i style="font:400 8px Silkscreen, monospace; color:#4a5a52; font-style:normal; letter-spacing:1px">13 — 15</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">VS A FRIEND — DREI ZEILEN STATT DREI ABSÄTZE</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 29px/1.1 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:0.5px">VS A FRIEND</div>
|
|
</div>
|
|
<div style="flex:1; padding:16px 14px 0; display:flex; flex-direction:column; gap:22px">
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 15px 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:1px">YOU</div>
|
|
<div style="padding:14px 12px; background:#16211d; border:2px solid #2c4238; font:700 14px Silkscreen, monospace; color:#ccd7ca; letter-spacing:2px">OLIVER</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 15px 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:1px">HOST</div>
|
|
<div style="display:flex; gap:8px">
|
|
<div style="flex:1; padding:20px 8px; background:rgba(42,62,54,0.42); border:2px solid #2c4238; font:400 17px/1.1 'Bebas Neue', sans-serif; color:#ccd7ca; text-align:center">CLASSIC</div>
|
|
<div style="flex:1; padding:20px 8px; background:rgba(42,62,54,0.42); border:2px solid #2c4238; font:400 17px/1.1 'Bebas Neue', sans-serif; color:#ccd7ca; text-align:center">DEATH MATCH</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 15px 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:1px">JOIN</div>
|
|
<div style="display:flex; gap:8px">
|
|
<div style="flex:1; padding:14px 12px; background:#16211d; border:2px solid #2c4238; font:700 14px Silkscreen, monospace; color:#4a5a52; letter-spacing:6px">CODE</div>
|
|
<div style="width:96px; flex:none; padding:14px 0; background:#16211d; border:2px solid #2c4238; font:400 17px 'Bebas Neue', sans-serif; color:#ccd7ca; text-align:center">GO</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">MODALS — EINE REGEL PRO ZEILE</div>
|
|
<div style="width:390px; height:844px; position:relative; overflow:hidden; border:2px solid #2c4238; background:#12281c">
|
|
<div style="position:absolute; inset:0; background:url('assets/court_clay.png') center / cover no-repeat; image-rendering:pixelated; opacity:0.75"></div>
|
|
<div style="position:absolute; inset:0; background:rgba(6,10,8,0.45)"></div>
|
|
<div style="position:absolute; left:19px; right:19px; top:96px; background:rgba(8,22,16,0.93); border:1px solid rgba(120,150,130,0.45); border-radius:5px; padding:20px; display:flex; flex-direction:column; gap:18px">
|
|
<div style="display:flex; align-items:center; gap:12px">
|
|
<div style="width:52px; height:52px; border:1px solid rgba(120,150,130,0.28); background:rgba(188,212,85,0.06); display:grid; place-items:center; font:400 22px Bangers, cursive; color:#bcd455">C</div>
|
|
<div style="display:flex; flex-direction:column; gap:4px">
|
|
<div style="font:400 27px/1 Bangers, cursive; color:#e07a3c; letter-spacing:1px">THE TOURNAMENT</div>
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:0.5px">LEAGUE 3 · 4 ROUNDS</div>
|
|
</div>
|
|
</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="font:700 12px Silkscreen, monospace; color:#ccd7ca; letter-spacing:0.5px">WIN IT ALL — MOVE UP A LEAGUE</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="display:flex; align-items:center; justify-content:space-between; gap:10px">
|
|
<div style="font:700 12px Silkscreen, monospace; color:#cf5a4e; letter-spacing:0.5px">POINTS DRAW BLOOD</div>
|
|
<div style="display:flex; gap:4px">
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
</div>
|
|
</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="height:43px; background:#a4231f; border:1px solid #69201c; display:grid; place-items:center; font:400 20px Bangers, cursive; color:#f6e7dc; letter-spacing:2px">WALK ON</div>
|
|
</div>
|
|
<div style="position:absolute; left:19px; right:19px; top:430px; background:rgba(8,22,16,0.93); border:1px solid rgba(120,150,130,0.45); border-radius:5px; padding:20px; display:flex; flex-direction:column; gap:18px">
|
|
<div style="display:flex; align-items:center; gap:12px">
|
|
<img src="assets/z_sbhead.png" alt="" style="height:56px; width:auto; flex:none; image-rendering:pixelated">
|
|
<div style="flex:1; min-width:0; display:flex; flex-direction:column; gap:4px">
|
|
<div style="font:400 25px/1 Bangers, cursive; color:#e07a3c; letter-spacing:1px">THE STRAWBERRY SELLER</div>
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74">CREAM WITH THAT?</div>
|
|
</div>
|
|
</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="display:flex; align-items:center; justify-content:space-between">
|
|
<div style="font:700 12px Silkscreen, monospace; color:#cf5a4e; letter-spacing:1px">LEVEL 14</div>
|
|
<div style="font:400 9px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">YOURS 12</div>
|
|
</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="height:43px; background:#a4231f; border:1px solid #69201c; display:grid; place-items:center; font:400 20px Bangers, cursive; color:#f6e7dc; letter-spacing:2px">WALK ON</div>
|
|
</div>
|
|
<div style="position:absolute; left:19px; right:19px; top:658px; background:#16211d; border:2px solid #2c4238; padding:18px 16px; display:flex; flex-direction:column; gap:10px">
|
|
<div style="font:400 20px Bangers, cursive; color:#ccd7ca; letter-spacing:1px; text-align:center">LEAVE THE MATCH?</div>
|
|
<div style="padding:12px 10px; background:#a4231f; border:2px solid #69201c; color:#f6e7dc; font:400 20px Bangers, cursive; letter-spacing:2px; text-align:center">BACK TO THE MENU</div>
|
|
<div style="padding:12px 10px; background:#16211d; border:2px solid #2c4238; color:#ccd7ca; font:400 17px 'Bebas Neue', sans-serif; text-align:center">PLAY ON</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="padding:8px 48px 8px; display:flex; flex-direction:column; gap:26px">
|
|
<div style="display:flex; flex-direction:column; gap:6px">
|
|
<div style="font:400 19px 'Bebas Neue', sans-serif; color:#bcd455; letter-spacing:1px">1a · WELCHE SCHRIFT TRAGEN DIE POSTER-HEADLINES?</div>
|
|
<div style="font:400 11px/1.7 Silkscreen, monospace; color:#6c7f74; max-width:760px">Gleiche Wand, gleiche Grössenwirkung, nur die Headline-Schrift getauscht. Bangers ist geneigt und schmaler, braucht also mehr Punkte für dieselbe Präsenz.</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-wrap:wrap; gap:44px; align-items:flex-start">
|
|
|
|
<div id="2a" style="display:flex; flex-direction:column; gap:12px">
|
|
<div style="display:flex; align-items:baseline; gap:10px">
|
|
<span style="font:400 13px Bungee, sans-serif; color:#0e1714; background:#bcd455; padding:4px 8px">2a</span>
|
|
<span style="font:400 13px Bungee, sans-serif; color:#ccd7ca">BUNGEE — AUFRECHT, SIGNAGE</span>
|
|
</div>
|
|
<div style="font:400 10px/1.7 Silkscreen, monospace; color:#6c7f74; width:390px">Dieselbe Stimme wie der Screen-Titel. Steht still, liest sich als Beschilderung — „welcher Raum ist das“.</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 23px/1.2 Bungee, sans-serif; color:#bcd455; letter-spacing:0.5px">PICK A GAME</div>
|
|
</div>
|
|
<div style="flex:1; padding:14px 14px 0; display:flex; flex-direction:column; gap:17px">
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 12px Bungee, sans-serif; color:#bcd455; letter-spacing:1px">SEASON</div>
|
|
<div style="position:relative; height:142px; border:2px solid #2c4238; background:#000 url('assets/mode_cup.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:10px 12px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:52%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.82) 26%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:12px; left:-8px; background:#a4231f; border-top:1px solid rgba(255,255,255,0.35); border-bottom:1px solid #69201c; padding:7px 14px 7px 16px; font:700 12px Silkscreen, monospace; color:#fff; letter-spacing:1px; text-shadow:1px 1px 0 rgba(0,0,0,0.55)">THE WAY UP</div>
|
|
<div style="position:relative; z-index:2; display:flex; flex-direction:column; gap:5px">
|
|
<div style="font:400 24px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">THE TOURNAMENT</div>
|
|
<div style="font:400 10px Silkscreen, monospace; color:#f0cfc4; letter-spacing:0.5px; text-shadow:0 1px 0 #000">LEAGUE 3 · ROUND ONE: THE STRAWBERRY SELLER</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 12px Bungee, sans-serif; color:#bcd455; letter-spacing:1px">TRAINING</div>
|
|
<div style="display:flex; gap:8px">
|
|
<div style="position:relative; flex:1; height:106px; border:2px solid #2c4238; background:#000 url('assets/mode_arcade.png') center / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 10px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 17px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">ARCADE</div>
|
|
</div>
|
|
<div style="position:relative; flex:1; height:106px; border:2px solid #2c4238; background:#000 url('assets/mode_train.png') center / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 10px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:7px; right:8px; z-index:2; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px">18 RUNGS</div>
|
|
<div style="position:relative; z-index:2; font:400 17px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">TRAINING</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 12px Bungee, sans-serif; color:#bcd455; letter-spacing:1px">CASUAL</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_gore.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 19px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">SPLATTER GORE</div>
|
|
</div>
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_classic.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:7px; right:8px; z-index:2; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px">LAST</div>
|
|
<div style="position:relative; z-index:2; font:400 19px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">CLASSIC TENNIS</div>
|
|
</div>
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_vs.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 19px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">VS A FRIEND</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="2c" style="display:flex; flex-direction:column; gap:12px">
|
|
<div style="display:flex; align-items:baseline; gap:10px">
|
|
<span style="font:400 13px Bungee, sans-serif; color:#0e1714; background:#bcd455; padding:4px 8px">2c</span>
|
|
<span style="font:400 13px Bungee, sans-serif; color:#ccd7ca">GEMISCHT — HERO RUFT, REGALE BESCHILDERN</span>
|
|
</div>
|
|
<div style="font:400 10px/1.7 Silkscreen, monospace; color:#6c7f74; width:390px">Das Fixture ist eine Ankündigung, also Bangers. Die fünf Regal-Poster bleiben Bungee — sie beantworten „welcher Raum“, und fünf geneigte Rufe untereinander nehmen der Liste die Ruhe.</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 23px/1.2 Bungee, sans-serif; color:#bcd455; letter-spacing:0.5px">PICK A GAME</div>
|
|
</div>
|
|
<div style="flex:1; padding:14px 14px 0; display:flex; flex-direction:column; gap:17px">
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 12px Bungee, sans-serif; color:#bcd455; letter-spacing:1px">SEASON</div>
|
|
<div style="position:relative; height:142px; border:2px solid #2c4238; background:#000 url('assets/mode_cup.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:10px 12px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:52%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.82) 26%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:12px; left:-8px; background:#a4231f; border-top:1px solid rgba(255,255,255,0.35); border-bottom:1px solid #69201c; padding:7px 14px 7px 16px; font:700 12px Silkscreen, monospace; color:#fff; letter-spacing:1px; text-shadow:1px 1px 0 rgba(0,0,0,0.55)">THE WAY UP</div>
|
|
<div style="position:relative; z-index:2; display:flex; flex-direction:column; gap:6px">
|
|
<div style="font:400 32px/0.95 Bangers, cursive; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">THE TOURNAMENT</div>
|
|
<div style="font:400 10px Silkscreen, monospace; color:#f0cfc4; letter-spacing:0.5px; text-shadow:0 1px 0 #000">LEAGUE 3 · ROUND ONE: THE STRAWBERRY SELLER</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 12px Bungee, sans-serif; color:#bcd455; letter-spacing:1px">TRAINING</div>
|
|
<div style="display:flex; gap:8px">
|
|
<div style="position:relative; flex:1; height:106px; border:2px solid #2c4238; background:#000 url('assets/mode_arcade.png') center / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 10px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 17px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">ARCADE</div>
|
|
</div>
|
|
<div style="position:relative; flex:1; height:106px; border:2px solid #2c4238; background:#000 url('assets/mode_train.png') center / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 10px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:7px; right:8px; z-index:2; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px">18 RUNGS</div>
|
|
<div style="position:relative; z-index:2; font:400 17px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">TRAINING</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 12px Bungee, sans-serif; color:#bcd455; letter-spacing:1px">CASUAL</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_gore.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 19px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">SPLATTER GORE</div>
|
|
</div>
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_classic.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:7px; right:8px; z-index:2; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px">LAST</div>
|
|
<div style="position:relative; z-index:2; font:400 19px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">CLASSIC TENNIS</div>
|
|
</div>
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_vs.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 19px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">VS A FRIEND</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="2b" style="display:flex; flex-direction:column; gap:12px">
|
|
<div style="display:flex; align-items:baseline; gap:10px">
|
|
<span style="font:400 13px Bungee, sans-serif; color:#0e1714; background:#bcd455; padding:4px 8px">2b</span>
|
|
<span style="font:400 13px Bungee, sans-serif; color:#ccd7ca">BANGERS — GENEIGT, ANKÜNDIGUNG</span>
|
|
</div>
|
|
<div style="font:400 10px/1.7 Silkscreen, monospace; color:#6c7f74; width:390px">Die Stimme, die im Spiel ruft (SET, CHAPTER, SERVE UP). Auf der Wand klingt jeder Modus wie eine Ankündigung — lauter, aber die Neigung nimmt der Liste die Ruhe.</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 23px/1.2 Bungee, sans-serif; color:#bcd455; letter-spacing:0.5px">PICK A GAME</div>
|
|
</div>
|
|
<div style="flex:1; padding:14px 14px 0; display:flex; flex-direction:column; gap:17px">
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 12px Bungee, sans-serif; color:#bcd455; letter-spacing:1px">SEASON</div>
|
|
<div style="position:relative; height:142px; border:2px solid #2c4238; background:#000 url('assets/mode_cup.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:10px 12px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:52%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.82) 26%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:12px; left:-8px; background:#a4231f; border-top:1px solid rgba(255,255,255,0.35); border-bottom:1px solid #69201c; padding:7px 14px 7px 16px; font:700 12px Silkscreen, monospace; color:#fff; letter-spacing:1px; text-shadow:1px 1px 0 rgba(0,0,0,0.55)">THE WAY UP</div>
|
|
<div style="position:relative; z-index:2; display:flex; flex-direction:column; gap:6px">
|
|
<div style="font:400 32px/0.95 Bangers, cursive; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">THE TOURNAMENT</div>
|
|
<div style="font:400 10px Silkscreen, monospace; color:#f0cfc4; letter-spacing:0.5px; text-shadow:0 1px 0 #000">LEAGUE 3 · ROUND ONE: THE STRAWBERRY SELLER</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 12px Bungee, sans-serif; color:#bcd455; letter-spacing:1px">TRAINING</div>
|
|
<div style="display:flex; gap:8px">
|
|
<div style="position:relative; flex:1; height:106px; border:2px solid #2c4238; background:#000 url('assets/mode_arcade.png') center / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 10px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 23px/0.95 Bangers, cursive; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">ARCADE</div>
|
|
</div>
|
|
<div style="position:relative; flex:1; height:106px; border:2px solid #2c4238; background:#000 url('assets/mode_train.png') center / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 10px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:7px; right:8px; z-index:2; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px">18 RUNGS</div>
|
|
<div style="position:relative; z-index:2; font:400 23px/0.95 Bangers, cursive; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">TRAINING</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 12px Bungee, sans-serif; color:#bcd455; letter-spacing:1px">CASUAL</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_gore.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 26px/0.95 Bangers, cursive; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">SPLATTER GORE</div>
|
|
</div>
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_classic.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:7px; right:8px; z-index:2; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px">LAST</div>
|
|
<div style="position:relative; z-index:2; font:400 26px/0.95 Bangers, cursive; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">CLASSIC TENNIS</div>
|
|
</div>
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_vs.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 26px/0.95 Bangers, cursive; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 #000">VS A FRIEND</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="padding:8px 48px 8px; display:flex; flex-direction:column; gap:26px">
|
|
<div style="display:flex; flex-direction:column; gap:6px">
|
|
<div style="font:400 15px Bungee, sans-serif; color:#bcd455; letter-spacing:1px">VORSCHLAG · WENIGER TEXT IN DEN MENÜS</div>
|
|
<div style="font:400 11px/1.7 Silkscreen, monospace; color:#6c7f74; max-width:760px">Zwei Richtungen für „PICK A GAME“. Beide behalten Palette, Fonts und Poster-Art; sie unterscheiden sich darin, wo die Regeln hingehen.</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-wrap:wrap; gap:44px; align-items:flex-start">
|
|
|
|
<div id="1a" style="display:flex; flex-direction:column; gap:12px">
|
|
<div style="display:flex; align-items:baseline; gap:10px">
|
|
<span style="font:400 13px Bungee, sans-serif; color:#0e1714; background:#bcd455; padding:4px 8px">1a</span>
|
|
<span style="font:400 13px Bungee, sans-serif; color:#ccd7ca">RÄUME BLEIBEN, SÄTZE GEHEN</span>
|
|
</div>
|
|
<div style="font:400 10px/1.7 Silkscreen, monospace; color:#6c7f74; width:390px">Ein Wort pro Raum, ein Name pro Poster. Regeln nur noch als Chip, wenn sie wirklich anders sind — der Rest wandert in das Modal, das beim ersten Start sowieso kommt.</div>
|
|
<div style="display:flex; gap:22px">
|
|
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 23px/1.2 Bungee, sans-serif; color:#bcd455; letter-spacing:0.5px">PICK A GAME</div>
|
|
</div>
|
|
<div style="flex:1; padding:14px 14px 0; display:flex; flex-direction:column; gap:17px">
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 12px Bungee, sans-serif; color:#bcd455; letter-spacing:1px">SEASON</div>
|
|
<div style="position:relative; height:142px; border:2px solid #2c4238; background:#000 url('assets/mode_cup.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:10px 12px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:52%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.82) 26%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:12px; left:-8px; background:#a4231f; border-top:1px solid rgba(255,255,255,0.35); border-bottom:1px solid #69201c; padding:7px 14px 7px 16px; font:700 12px Silkscreen, monospace; color:#fff; letter-spacing:1px; text-shadow:1px 1px 0 rgba(0,0,0,0.55)">THE WAY UP</div>
|
|
<div style="position:relative; z-index:2; display:flex; flex-direction:column; gap:5px">
|
|
<div style="font:400 24px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">THE TOURNAMENT</div>
|
|
<div style="font:400 10px Silkscreen, monospace; color:#f0cfc4; letter-spacing:0.5px; text-shadow:0 1px 0 #000">LEAGUE 3 · ROUND ONE: THE STRAWBERRY SELLER</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 12px Bungee, sans-serif; color:#bcd455; letter-spacing:1px">TRAINING</div>
|
|
<div style="display:flex; gap:8px">
|
|
<div style="position:relative; flex:1; height:106px; border:2px solid #2c4238; background:#000 url('assets/mode_arcade.png') center / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 10px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 17px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">ARCADE</div>
|
|
</div>
|
|
<div style="position:relative; flex:1; height:106px; border:2px solid #2c4238; background:#000 url('assets/mode_train.png') center / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 10px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:7px; right:8px; z-index:2; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px">18 RUNGS</div>
|
|
<div style="position:relative; z-index:2; font:400 17px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">TRAINING</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 12px Bungee, sans-serif; color:#bcd455; letter-spacing:1px">CASUAL</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_gore.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 19px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">SPLATTER GORE</div>
|
|
</div>
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_classic.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:7px; right:8px; z-index:2; font:400 8px Silkscreen, monospace; color:#bcd455; background:rgba(0,0,0,0.72); border:1px solid rgba(188,212,85,0.5); padding:3px 6px; letter-spacing:1px">LAST</div>
|
|
<div style="position:relative; z-index:2; font:400 19px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">CLASSIC TENNIS</div>
|
|
</div>
|
|
<div style="position:relative; height:84px; border:2px solid #2c4238; background:#000 url('assets/mode_vs.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:9px 11px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.8) 30%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2; font:400 19px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">VS A FRIEND</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width:390px; height:844px; position:relative; overflow:hidden; border:2px solid #2c4238; background:#12281c">
|
|
<div style="position:absolute; inset:0; background:url('assets/court_clay.png') center / cover no-repeat; image-rendering:pixelated; opacity:0.75"></div>
|
|
<div style="position:absolute; inset:0; background:rgba(6,10,8,0.45)"></div>
|
|
<div style="position:absolute; left:19px; right:19px; top:250px; background:rgba(8,22,16,0.93); border:1px solid rgba(120,150,130,0.45); border-radius:5px; padding:20px; display:flex; flex-direction:column; gap:18px">
|
|
<div style="display:flex; align-items:center; gap:12px">
|
|
<div style="width:52px; height:52px; border:1px solid rgba(120,150,130,0.28); background:rgba(188,212,85,0.06); display:grid; place-items:center; font:400 22px Bangers, cursive; color:#bcd455">C</div>
|
|
<div style="display:flex; flex-direction:column; gap:4px">
|
|
<div style="font:400 27px/1 Bangers, cursive; color:#e07a3c; letter-spacing:1px">THE TOURNAMENT</div>
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:0.5px">LEAGUE 3 · 4 ROUNDS</div>
|
|
</div>
|
|
</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="display:flex; flex-direction:column; gap:5px">
|
|
<div style="font:700 12px Silkscreen, monospace; color:#ccd7ca; letter-spacing:0.5px">WIN IT ALL — MOVE UP A LEAGUE</div>
|
|
</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="display:flex; align-items:center; justify-content:space-between; gap:10px">
|
|
<div style="font:700 12px Silkscreen, monospace; color:#cf5a4e; letter-spacing:0.5px">ITS POINTS DRAW BLOOD</div>
|
|
<div style="display:flex; gap:4px">
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
</div>
|
|
</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="height:43px; background:#a4231f; border:1px solid #69201c; display:grid; place-items:center; font:400 20px Bangers, cursive; color:#f6e7dc; letter-spacing:2px">WALK ON</div>
|
|
</div>
|
|
<div style="position:absolute; left:0; right:0; bottom:16px; text-align:center; font:400 9px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">MODAL: EINE REGEL PRO ZEILE, KEINE ZWEITE ZEILE</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="1b" style="display:flex; flex-direction:column; gap:12px">
|
|
<div style="display:flex; align-items:baseline; gap:10px">
|
|
<span style="font:400 13px Bungee, sans-serif; color:#0e1714; background:#bcd455; padding:4px 8px">1b</span>
|
|
<span style="font:400 13px Bungee, sans-serif; color:#ccd7ca">EIN HELD, DER REST IST LISTE</span>
|
|
</div>
|
|
<div style="font:400 10px/1.7 Silkscreen, monospace; color:#6c7f74; width:390px">Keine Überschriften. Das Fixture ist das eine große Poster mit dem einen Satz; alles andere ist eine ruhige Zeilenliste mit Thumbnail. Ein Screen, kein Scrollen.</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 23px/1.2 Bungee, sans-serif; color:#bcd455; letter-spacing:0.5px">PICK A GAME</div>
|
|
</div>
|
|
<div style="flex:1; padding:16px 14px 0; display:flex; flex-direction:column; gap:18px">
|
|
<div style="position:relative; height:230px; border:2px solid #2c4238; background:#000 url('assets/mode_cup.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:14px 14px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:56%; background:linear-gradient(0deg, rgba(6,10,8,0.95) 0%, rgba(6,10,8,0.84) 26%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:14px; left:-8px; background:#a4231f; border-top:1px solid rgba(255,255,255,0.35); border-bottom:1px solid #69201c; padding:7px 14px 7px 16px; font:700 12px Silkscreen, monospace; color:#fff; letter-spacing:1px; text-shadow:1px 1px 0 rgba(0,0,0,0.55)">THE WAY UP</div>
|
|
<div style="position:relative; z-index:2; display:flex; flex-direction:column; gap:6px">
|
|
<div style="font:400 30px/1 Bungee, sans-serif; color:#fff; text-shadow:0 2px 0 #000">THE TOURNAMENT</div>
|
|
<div style="font:400 10px Silkscreen, monospace; color:#f0cfc4; letter-spacing:0.5px; text-shadow:0 1px 0 #000">LEAGUE 3 · ROUND ONE: THE STRAWBERRY SELLER</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="display:flex; align-items:center; gap:12px; border:2px solid #2c4238; background:rgba(42,62,54,0.42); padding:8px">
|
|
<div style="width:78px; height:56px; flex:none; background:#000 url('assets/mode_arcade.png') center / cover no-repeat; image-rendering:pixelated"></div>
|
|
<div style="flex:1; font:400 17px/1 Bungee, sans-serif; color:#ccd7ca">ARCADE</div>
|
|
<div style="font:700 15px Silkscreen, monospace; color:#bcd455">></div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:12px; border:2px solid #2c4238; background:rgba(42,62,54,0.42); padding:8px">
|
|
<div style="width:78px; height:56px; flex:none; background:#000 url('assets/mode_train.png') center / cover no-repeat; image-rendering:pixelated"></div>
|
|
<div style="flex:1; font:400 17px/1 Bungee, sans-serif; color:#ccd7ca">TRAINING</div>
|
|
<div style="font:400 8px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">18 RUNGS</div>
|
|
<div style="font:700 15px Silkscreen, monospace; color:#bcd455">></div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:12px; border:2px solid #2c4238; background:rgba(42,62,54,0.42); padding:8px">
|
|
<div style="width:78px; height:56px; flex:none; background:#000 url('assets/mode_gore.png') center / cover no-repeat; image-rendering:pixelated"></div>
|
|
<div style="flex:1; font:400 17px/1 Bungee, sans-serif; color:#ccd7ca">SPLATTER GORE</div>
|
|
<div style="font:700 15px Silkscreen, monospace; color:#bcd455">></div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:12px; border:2px solid #bcd455; background:rgba(188,212,85,0.09); padding:8px">
|
|
<div style="width:78px; height:56px; flex:none; background:#000 url('assets/mode_classic.png') center / cover no-repeat; image-rendering:pixelated"></div>
|
|
<div style="flex:1; font:400 17px/1 Bungee, sans-serif; color:#ccd7ca">CLASSIC TENNIS</div>
|
|
<div style="font:400 8px Silkscreen, monospace; color:#bcd455; letter-spacing:1px">LAST</div>
|
|
<div style="font:700 15px Silkscreen, monospace; color:#bcd455">></div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:12px; border:2px solid #2c4238; background:rgba(42,62,54,0.42); padding:8px">
|
|
<div style="width:78px; height:56px; flex:none; background:#000 url('assets/mode_vs.png') center / cover no-repeat; image-rendering:pixelated"></div>
|
|
<div style="flex:1; font:400 17px/1 Bungee, sans-serif; color:#ccd7ca">VS A FRIEND</div>
|
|
<div style="font:700 15px Silkscreen, monospace; color:#bcd455">></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="padding:8px 48px 80px; display:flex; flex-direction:column; gap:20px">
|
|
<div style="display:flex; align-items:baseline; gap:10px">
|
|
<span style="font:400 13px Bungee, sans-serif; color:#0e1714; background:#6c7f74; padding:4px 8px">IST</span>
|
|
<span style="font:400 13px Bungee, sans-serif; color:#ccd7ca">STAND HEUTE — NACHGEBAUT AUS index.html / config.MENU</span>
|
|
</div>
|
|
<div style="display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start">
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">SPLASH</div>
|
|
<div style="width:390px; height:844px; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca; background:linear-gradient(rgba(12,20,17,0.60) 0%, rgba(12,20,17,0.30) 46%, rgba(12,20,17,0.58) 100%), url('assets/menu_bg.png') 50% 42% / cover no-repeat #0e1714; image-rendering:pixelated; padding:0 14px">
|
|
<div style="flex:1; display:flex; flex-direction:column; justify-content:center; padding:12px 0; text-align:center">
|
|
<img src="assets/logo.png" alt="Splatter Tennis" style="display:block; width:288px; height:auto; margin:0 auto 6px; image-rendering:pixelated; filter:drop-shadow(0 3px 0 rgba(0,0,0,0.45))">
|
|
<p style="margin:8px 0 20px; font:400 11px Silkscreen, monospace; color:#a8a09e; letter-spacing:0.5px">Fifteen. Thirty. Forty. <b style="color:#c9564a">Dead.</b></p>
|
|
<div style="position:relative; display:grid; column-gap:14px; align-items:center; text-align:left; grid-template-columns:auto 1fr; grid-template-areas:'badge name' 'badge lv' 'bar bar' 'goal goal'; margin:24px auto 0; width:330px; box-sizing:border-box; padding:18px 34px 15px 18px; background:rgba(8,14,10,0.48); border-radius:12px">
|
|
<img src="assets/badge_l3.png" alt="" style="grid-area:badge; height:54px; image-rendering:pixelated; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))">
|
|
<b style="grid-area:name; align-self:end; padding-bottom:3px; font:700 13px Silkscreen, monospace; color:#ccd7ca; letter-spacing:2px">OLIVER</b>
|
|
<u style="grid-area:lv; align-self:start; font:400 26px Bangers, cursive; color:#bcd455; letter-spacing:1.5px; text-decoration:none; text-shadow:2px 2px 0 rgba(0,0,0,0.5)">LEVEL 12 · LEAGUE 3</u>
|
|
<span style="grid-area:bar; display:flex; align-items:center; gap:7px; margin-top:15px">
|
|
<u style="font:700 9px Silkscreen, monospace; color:#ccd7ca; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0,0.5)">12</u>
|
|
<s style="flex:1; height:6px; background:rgba(255,255,255,0.10); border:1px solid #2c4238; text-decoration:none; display:block"><i style="display:block; height:100%; width:62%; background:linear-gradient(90deg,#3f9560,#bcd455 55%,#e8b23a)"></i></s>
|
|
<u style="font:700 9px Silkscreen, monospace; color:#ccd7ca; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0,0.5)">13</u>
|
|
</span>
|
|
<i style="grid-area:goal; margin-top:10px; font:400 9px/1.6 Silkscreen, monospace; font-style:normal; color:#e0cc72; letter-spacing:1px; text-shadow:1px 1px 0 rgba(0,0,0,0.5)">WIN THE CUP TO REACH LEAGUE 4</i>
|
|
<em style="position:absolute; right:14px; top:50%; transform:translateY(-50%); font:700 15px Silkscreen, monospace; font-style:normal; color:#bcd455">></em>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:auto; padding:10px 0 18px; display:flex; flex-direction:column">
|
|
<div style="padding:13px 10px 11px; background:#a4231f; border:2px solid #69201c; color:#f6e7dc; letter-spacing:2px; margin-bottom:10px; text-align:center">
|
|
<b style="display:block; font:400 26px/1.15 Bangers, cursive">LEAGUE 3 · THE CUP</b>
|
|
<i style="display:block; margin-top:3px; font:400 9px Silkscreen, monospace; font-style:normal; letter-spacing:0.5px; color:#f0cfc4">4 ROUNDS · ROUND ONE: THE STRAWBERRY SELLER</i>
|
|
</div>
|
|
<div style="padding:12px 10px; background:#16211d; border:2px solid #2c4238; color:#ccd7ca; font:400 13px Silkscreen, monospace; letter-spacing:1px; text-align:center; margin-bottom:12px">OTHER GAMES<i style="display:block; margin-top:4px; font:400 9px Silkscreen, monospace; font-style:normal; color:#6c7f74; letter-spacing:0.5px">CLIMB · TRAINING · GORE · A FRIEND</i></div>
|
|
<div style="display:flex; gap:8px">
|
|
<div style="flex:1; padding:12px 10px; background:#16211d; border:2px solid #2c4238; font:400 13px Silkscreen, monospace; letter-spacing:1px; text-align:center">STATS<i style="display:block; margin-top:4px; font:400 9px Silkscreen, monospace; font-style:normal; color:#6c7f74">4 812 KILLS</i></div>
|
|
<div style="flex:1; padding:12px 10px; background:#16211d; border:2px solid #2c4238; font:400 13px Silkscreen, monospace; letter-spacing:1px; text-align:center">RANKINGS<i style="display:block; margin-top:4px; font:400 9px Silkscreen, monospace; font-style:normal; color:#6c7f74">WORLD BOARD</i></div>
|
|
</div>
|
|
<p style="margin:14px 0 0; font:400 9px Silkscreen, monospace; color:#4a5a52; letter-spacing:0.5px; text-align:center">BUILD 341</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">PICK A GAME — SCROLLT ÜBER ZWEI BILDSCHIRME</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 23px/1.2 Bungee, sans-serif; color:#bcd455; letter-spacing:0.5px">PICK A GAME</div>
|
|
</div>
|
|
<div style="flex:1; padding:12px 14px 0; overflow:hidden">
|
|
<section style="margin:0 0 12px">
|
|
<header style="margin:0 0 11px; text-align:left">
|
|
<b style="display:block; letter-spacing:0.5px; color:#bcd455; font:400 15px/1.3 Bungee, sans-serif">THE SEASON</b>
|
|
<i style="display:block; margin:4px 0 0; letter-spacing:0.5px; color:#6c7f74; font-style:normal; font:400 9px/1.4 Silkscreen, monospace">THE ONLY WAY UP THE CLUB</i>
|
|
</header>
|
|
<div style="position:relative; min-height:148px; height:148px; border:2px solid #2c4238; background:#000 url('assets/mode_cup.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:7px 9px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:62%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.86) 22%, rgba(6,10,8,0.5) 58%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:absolute; top:12px; left:-8px; z-index:2; background:#a4231f; border-top:1px solid rgba(255,255,255,0.35); border-bottom:1px solid #69201c; padding:8px 64px 8px 16px; font:700 13px Silkscreen, monospace; color:#fff; letter-spacing:1px; text-shadow:1px 1px 0 rgba(0,0,0,0.55)">THE WAY UP</div>
|
|
<div style="position:relative; z-index:2">
|
|
<b style="display:block; font:700 15px Silkscreen, monospace; color:#ccd7ca; letter-spacing:0.5px; text-shadow:0 1px 0 #000, 0 0 6px rgba(0,0,0,0.9)">THE TOURNAMENT</b>
|
|
<i style="display:block; margin:4px 0 0; font:400 10px Silkscreen, monospace; font-style:normal; color:#fff; text-shadow:0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 0 7px #000">YOUR LEAGUE'S ROUNDS · WIN IT TO RISE</i>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section style="margin:26px 0 12px">
|
|
<header style="margin:0 0 11px; text-align:left">
|
|
<b style="display:block; letter-spacing:0.5px; color:#bcd455; font:400 15px/1.3 Bungee, sans-serif">THE TRAINING</b>
|
|
<i style="display:block; margin:4px 0 0; letter-spacing:0.5px; color:#6c7f74; font-style:normal; font:400 9px/1.4 Silkscreen, monospace">SHARPEN UP · NOTHING HERE MOVES YOUR LEAGUE</i>
|
|
</header>
|
|
<div style="position:relative; height:148px; margin:0 0 8px; border:2px solid #2c4238; background:#000 url('assets/mode_arcade.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:7px 9px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:62%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.86) 22%, rgba(6,10,8,0.5) 58%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2">
|
|
<b style="display:block; font:700 15px Silkscreen, monospace; color:#ccd7ca; letter-spacing:0.5px; text-shadow:0 1px 0 #000, 0 0 6px rgba(0,0,0,0.9)">ARCADE</b>
|
|
<i style="display:block; margin:4px 0 0; font:400 10px Silkscreen, monospace; font-style:normal; color:#fff; text-shadow:0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 0 7px #000">THE WHOLE CLUB, BOTTOM UP · BLOOD ONLY</i>
|
|
</div>
|
|
</div>
|
|
<div style="position:relative; height:148px; border:2px solid #2c4238; background:#000 url('assets/mode_train.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:7px 9px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:62%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.86) 22%, rgba(6,10,8,0.5) 58%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2">
|
|
<b style="display:block; font:700 15px Silkscreen, monospace; color:#ccd7ca; letter-spacing:0.5px; text-shadow:0 1px 0 #000, 0 0 6px rgba(0,0,0,0.9)">TRAINING</b>
|
|
<i style="display:block; margin:4px 0 0; font:400 10px Silkscreen, monospace; font-style:normal; color:#fff; text-shadow:0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 0 7px #000">PICK A BODY · ONE GAME · GO AGAIN</i>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section style="margin:26px 0 12px">
|
|
<header style="margin:0 0 11px; text-align:left">
|
|
<b style="display:block; letter-spacing:0.5px; color:#bcd455; font:400 15px/1.3 Bungee, sans-serif">OUT OF COMPETITION</b>
|
|
<i style="display:block; margin:4px 0 0; letter-spacing:0.5px; color:#6c7f74; font-style:normal; font:400 9px/1.4 Silkscreen, monospace">NO LEAGUE, NO RECORD, NO STAKES</i>
|
|
</header>
|
|
<div style="position:relative; height:148px; border:2px solid #2c4238; background:#000 url('assets/mode_gore.png') center bottom / cover no-repeat; image-rendering:pixelated; display:flex; align-items:flex-end; padding:7px 9px">
|
|
<div style="position:absolute; left:0; right:0; bottom:0; height:62%; background:linear-gradient(0deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.86) 22%, rgba(6,10,8,0.5) 58%, rgba(6,10,8,0) 100%)"></div>
|
|
<div style="position:relative; z-index:2">
|
|
<b style="display:block; font:700 15px Silkscreen, monospace; color:#ccd7ca; letter-spacing:0.5px; text-shadow:0 1px 0 #000, 0 0 6px rgba(0,0,0,0.9)">SPLATTER GORE</b>
|
|
<i style="display:block; margin:4px 0 0; font:400 10px Silkscreen, monospace; font-style:normal; color:#fff; text-shadow:0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 0 7px #000">NO WARM-UP · SURVIVE THE DEAD CLUB</i>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div style="padding:6px 14px 10px; font:400 9px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px; border-top:2px solid #2c4238; background:#16211d">↓ WEITER UNTEN: CLASSIC TENNIS · VS A FRIEND</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">MATCH SETUP</div>
|
|
<div style="width:390px; height:844px; background:#0e1714; border:2px solid #2c4238; position:relative; overflow:hidden; display:flex; flex-direction:column; color:#ccd7ca">
|
|
<div style="display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:2px solid #2c4238; background:#16211d">
|
|
<div style="width:34px; height:34px; border:2px solid #2c4238; color:#bcd455; font:700 14px Silkscreen, monospace; display:grid; place-items:center"><</div>
|
|
<div style="font:400 23px/1.2 Bungee, sans-serif; color:#bcd455; letter-spacing:0.5px">MATCH SETUP</div>
|
|
</div>
|
|
<div style="flex:1; padding:0 14px; overflow:hidden">
|
|
<h3 style="display:flex; justify-content:space-between; margin:20px 0 9px; font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:2px">01 · PLAYER</h3>
|
|
<div style="display:flex; gap:12px; align-items:flex-start">
|
|
<div style="width:100px; height:176px; flex:none; background:repeating-linear-gradient(135deg,#16211d 0 6px,#1b2823 6px 12px); border:1px solid #2c4238; display:grid; place-items:center; text-align:center; font:400 8px/1.5 Silkscreen, monospace; color:#4a5a52">LIVE<br>PLAYER<br>SPRITE</div>
|
|
<div style="flex:1; min-width:0; display:flex; flex-direction:column; gap:7px">
|
|
<div style="display:flex; gap:7px">
|
|
<div style="flex:1; padding:10px 2px; background:rgba(188,212,85,0.09); border:2px solid #bcd455; color:#ccd7ca; font:400 10px Silkscreen, monospace; letter-spacing:1px; text-align:center">MEN'S SINGLES</div>
|
|
<div style="flex:1; padding:10px 2px; background:rgba(42,62,54,0.42); border:2px solid #2c4238; color:#6c7f74; font:400 10px Silkscreen, monospace; letter-spacing:1px; text-align:center">WOMEN'S SINGLES</div>
|
|
</div>
|
|
<u style="display:flex; justify-content:space-between; margin-top:2px; text-decoration:none; font:400 9px Silkscreen, monospace; color:#6c7f74; letter-spacing:1.5px">KIT<i style="font-style:normal; color:#ccd7ca">CRIMSON</i></u>
|
|
<div style="display:flex; gap:6px">
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #bcd455; background:#a4231f; box-shadow:inset 0 0 0 2px #0e1714"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#2f6ea8"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#e0cc72"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#3f9560"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#8a5ca8"></div>
|
|
</div>
|
|
<u style="display:flex; justify-content:space-between; margin-top:2px; text-decoration:none; font:400 9px Silkscreen, monospace; color:#6c7f74; letter-spacing:1.5px">SKIN<i style="font-style:normal; color:#ccd7ca">TAN</i></u>
|
|
<div style="display:flex; gap:6px">
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#f2d3b0"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #bcd455; background:#d8a877; box-shadow:inset 0 0 0 2px #0e1714"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#a9724a"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#7a4d2f"></div>
|
|
<div style="flex:1; aspect-ratio:1; border:2px solid #2c4238; background:#4a2f1e"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 style="display:flex; justify-content:space-between; margin:20px 0 9px; font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:2px">02 · COURT</h3>
|
|
<div style="display:flex; align-items:center; gap:11px; margin:0 0 8px; padding:7px; background:rgba(188,212,85,0.09); border:2px solid #bcd455">
|
|
<img src="assets/court_clay.png" alt="" style="width:92px; height:66px; display:block; image-rendering:pixelated; object-fit:cover; flex:none">
|
|
<div style="flex:1; min-width:0">
|
|
<b style="display:block; font:700 15px Silkscreen, monospace; color:#ccd7ca; letter-spacing:0.5px">THE RED CLAY</b>
|
|
<i style="display:block; margin:4px 0 6px; font:400 10px Silkscreen, monospace; color:#c9c4b8; font-style:normal">SLOWEST · HIGHEST BOUNCE</i>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:4px; font:400 8px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px"><u style="flex:none; width:46px; text-decoration:none">BOUNCE</u><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:78%; background:#bcd455"></i></s></div>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:4px; font:400 8px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px"><u style="flex:none; width:46px; text-decoration:none">PACE</u><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:34%; background:#4e8fa6"></i></s></div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:11px; margin:0 0 8px; padding:7px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/court_hard.png" alt="" style="width:92px; height:66px; display:block; image-rendering:pixelated; object-fit:cover; flex:none">
|
|
<div style="flex:1; min-width:0">
|
|
<b style="display:block; font:700 15px Silkscreen, monospace; color:#ccd7ca; letter-spacing:0.5px">THE HARD COURT</b>
|
|
<i style="display:block; margin:4px 0 6px; font:400 10px Silkscreen, monospace; color:#c9c4b8; font-style:normal">TRUE BOUNCE · MEDIUM PACE</i>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:4px; font:400 8px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px"><u style="flex:none; width:46px; text-decoration:none">BOUNCE</u><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:60%; background:#bcd455"></i></s></div>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:4px; font:400 8px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px"><u style="flex:none; width:46px; text-decoration:none">PACE</u><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:60%; background:#4e8fa6"></i></s></div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:11px; padding:7px; background:rgba(42,62,54,0.42); border:2px solid #2c4238">
|
|
<img src="assets/court_grass.png" alt="" style="width:92px; height:66px; display:block; image-rendering:pixelated; object-fit:cover; flex:none">
|
|
<div style="flex:1; min-width:0">
|
|
<b style="display:block; font:700 15px Silkscreen, monospace; color:#ccd7ca; letter-spacing:0.5px">THE LAWN</b>
|
|
<i style="display:block; margin:4px 0 6px; font:400 10px Silkscreen, monospace; color:#c9c4b8; font-style:normal">FAST · LOW SKID</i>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:4px; font:400 8px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px"><u style="flex:none; width:46px; text-decoration:none">BOUNCE</u><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:40%; background:#bcd455"></i></s></div>
|
|
<div style="display:flex; align-items:center; gap:6px; margin-top:4px; font:400 8px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px"><u style="flex:none; width:46px; text-decoration:none">PACE</u><s style="flex:1; height:5px; background:rgba(0,0,0,0.45); text-decoration:none; display:block"><i style="display:block; height:100%; width:86%; background:#4e8fa6"></i></s></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding:10px 14px 18px; border-top:2px solid #2c4238; background:#16211d">
|
|
<p style="margin:0 0 8px; font:400 9px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px; text-align:center">CLASSIC TENNIS · MEDIUM · THE RED CLAY</p>
|
|
<div style="padding:13px 10px 11px; background:#a4231f; border:2px solid #69201c; color:#f6e7dc; font:400 26px Bangers, cursive; letter-spacing:2px; text-align:center">SERVE UP</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:8px">
|
|
<div style="font:400 10px Silkscreen, monospace; color:#6c7f74; letter-spacing:1px">MODAL IM SPIEL · THE TOURNAMENT</div>
|
|
<div style="width:390px; height:844px; position:relative; overflow:hidden; border:2px solid #2c4238; background:#12281c">
|
|
<div style="position:absolute; inset:0; background:url('assets/court_clay.png') center / cover no-repeat; image-rendering:pixelated; opacity:0.75"></div>
|
|
<div style="position:absolute; inset:0; background:rgba(6,10,8,0.45)"></div>
|
|
<div style="position:absolute; left:19px; right:19px; top:210px; background:rgba(8,22,16,0.93); border:1px solid rgba(120,150,130,0.45); border-radius:5px; padding:20px; display:flex; flex-direction:column; gap:18px">
|
|
<div style="display:flex; align-items:center; gap:12px">
|
|
<div style="width:52px; height:52px; border:1px solid rgba(120,150,130,0.28); background:rgba(188,212,85,0.06); display:grid; place-items:center; font:400 22px Bangers, cursive; color:#bcd455">C</div>
|
|
<div style="flex:1; min-width:0; display:flex; flex-direction:column; gap:4px">
|
|
<div style="font:400 27px/1 Bangers, cursive; color:#e07a3c; letter-spacing:1px">THE TOURNAMENT</div>
|
|
<div style="font:400 10px/1.5 Silkscreen, monospace; color:#6c7f74">YOUR LEAGUE, ROUND BY ROUND — WIN IT ALL, MOVE UP A LEAGUE</div>
|
|
</div>
|
|
</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="display:flex; flex-direction:column; gap:5px">
|
|
<div style="font:700 12px Silkscreen, monospace; color:#ccd7ca; letter-spacing:0.5px">YOUR LEAGUE, ROUND BY ROUND</div>
|
|
<div style="font:400 11px Silkscreen, monospace; color:#6c7f74">WIN IT ALL — MOVE UP A LEAGUE</div>
|
|
</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="display:flex; flex-direction:column; gap:5px">
|
|
<div style="font:700 12px Silkscreen, monospace; color:#cf5a4e; letter-spacing:0.5px">ITS POINTS DRAW BLOOD</div>
|
|
<div style="font:400 11px Silkscreen, monospace; color:#6c7f74">AT ZERO YOU ARE EATEN</div>
|
|
<div style="display:flex; gap:4px; margin-top:4px">
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
<span style="width:9px; height:9px; background:#cf5a4e"></span>
|
|
</div>
|
|
</div>
|
|
<div style="height:1px; background:rgba(120,150,130,0.22)"></div>
|
|
<div style="height:43px; background:#a4231f; border:1px solid #69201c; display:grid; place-items:center; font:400 20px Bangers, cursive; color:#f6e7dc; letter-spacing:2px">GOT IT</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</x-dc>
|
|
</body>
|
|
</html>
|