The court art had three faults: a hard-edged pale panel sitting on the near half, mown stripes that stopped and restarted where the court began, and the blood pool stranded behind the baseline where a portrait phone cropped it off. Redrawn with the stripes running unbroken the full depth and the stain out on the court where it can be seen. The picture also read as zoomed in, which was not the art but the crop: at 4:6 `cover` was throwing away a third of the width on a phone. The sky is extended to 1:2 instead, so the whole arena survives the crop. Menu palette rotated off olive towards a cool desaturated blue-green with much quieter borders, and the boxed BEST RUN / WORLD RANK bar is gone from the splash — it sat on the best part of the art to say what the two buttons under it already said. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
315 lines
22 KiB
HTML
315 lines
22 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Splatter Tennis</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<!-- save-to-homescreen: a bloody tennis ball. iOS needs the apple-* tags (it ignores the
|
|
manifest's display/name); Android reads the manifest. -->
|
|
<link rel="icon" type="image/png" href="assets/favicon.png">
|
|
<link rel="apple-touch-icon" href="assets/icon-180.png">
|
|
<link rel="manifest" href="manifest.webmanifest">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-title" content="Splatter">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="theme-color" content="#2b2735">
|
|
<style>
|
|
/* pixel HUD font — bundled so it renders offline; used by the canvas scoreboard + rack */
|
|
@font-face { font-family: 'Silkscreen'; font-weight: 400; font-display: block;
|
|
src: url('assets/fonts/Silkscreen-Regular.ttf') format('truetype'); }
|
|
@font-face { font-family: 'Silkscreen'; font-weight: 700; font-display: block;
|
|
src: url('assets/fonts/Silkscreen-Bold.ttf') format('truetype'); }
|
|
/* the ANNOUNCEMENT face. Silkscreen is the HUD and the instructions — small, even, quiet. The
|
|
things that shout (SET, CHAPTER, EPIC!, PERFECT) are a second register on purpose, so a message
|
|
tells you which kind it is before you have read a word of it. Bundled, like the other one. */
|
|
@font-face { font-family: 'Bangers'; font-weight: 400; font-display: block;
|
|
src: url('assets/fonts/Bangers-Regular.ttf') format('truetype'); }
|
|
/* html needs a real HEIGHT: the root element's background paints the viewport, but a GRADIENT is
|
|
laid out in the root's own box — and with the canvas position:fixed the root has no content and
|
|
collapses, so the gradient render.js sets had nowhere to go. */
|
|
html { height: 100%; height: 100dvh; }
|
|
html, body { margin: 0; padding: 0; background: #10141c; overflow: hidden; }
|
|
/* invisible probe: env() is only readable from CSS, so park the insets on an element and let
|
|
render.js measure them. The canvas stays FULL-BLEED (the stands under the notch look good) —
|
|
it is the HUD that has to move, see SAFE in render.js. */
|
|
#safe { position: fixed; top: 0; left: 0; width: 0; height: 0; pointer-events: none; visibility: hidden;
|
|
padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
|
|
/* The canvas STRETCHES to the viewport and render.js derives its logical height from the box it
|
|
actually got. Sizing it the other way round (compute a scale from innerWidth/innerHeight, then set
|
|
explicit px) meant it was laid out against whatever innerHeight reported at load — before iOS
|
|
Safari's toolbars had settled — and it stayed a strip short of the bottom forever after.
|
|
100dvh is the dynamic viewport height, so it tracks those toolbars. */
|
|
/* TOP inset only. The status bar is opaque UI and the scoreboard must clear it, so the canvas starts
|
|
below it — but the home indicator is a slim translucent bar, so the canvas runs all the way to the
|
|
PHYSICAL bottom edge and the court art fills it. Only the weapon RACK lifts clear of the indicator,
|
|
via SAFE.bottom in render.js. Reserving the bottom inset here instead just left a dead band.
|
|
100dvh is the dynamic viewport height, so it tracks iOS Safari's toolbars appearing/hiding. */
|
|
canvas { image-rendering: pixelated; display: block; position: fixed; touch-action: none;
|
|
top: env(safe-area-inset-top, 0px);
|
|
left: env(safe-area-inset-left, 0px);
|
|
width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
|
|
height: calc(100vh - env(safe-area-inset-top, 0px));
|
|
height: calc(100dvh - env(safe-area-inset-top, 0px)); }
|
|
/* ...but NOT installed. Launched from the homescreen, WebKit does not initialise the DYNAMIC
|
|
viewport until the geometry is "exercised" — 100dvh stays provisional until you rotate the
|
|
phone, which is exactly the bug. Standalone has no toolbars, so 100vh is both correct and
|
|
stable from the first frame; dvh only exists for the browser's disappearing toolbars. */
|
|
@media (display-mode: standalone) {
|
|
html { height: 100vh; }
|
|
canvas { height: calc(100vh - env(safe-area-inset-top, 0px)); }
|
|
}
|
|
/* desktop key hint — up in the empty top-right corner now that the rack owns the bottom edge */
|
|
#hint { position: fixed; top: 6px; right: 10px; text-align: right;
|
|
font: 400 10px Silkscreen, monospace; color: #6b7688; }
|
|
@media (pointer: coarse) { #hint { display: none; } }
|
|
/* ---- THE MENU PALETTE. The canvas HUD keeps its own blue-grey and gold; the menus are
|
|
deliberately a different room — dark court green, one acid accent, and one crimson reserved for
|
|
the thing you actually came here to press. Five names so a repaint is five edits, not fifty. */
|
|
/* COOL, not olive. The first pass sat around hue 80 — yellow-green — and read loud and warm next
|
|
to the art. These are the same idea rotated towards blue-green and desaturated: the field is
|
|
nearly neutral, the borders are quiet, and the acid accent is the only thing allowed to be
|
|
bright, so it still means "this is the number / this is selected". */
|
|
:root { --ink:#0e1714; --panel:rgba(42,62,54,0.42); --line:#2c4238; --acid:#bcd455;
|
|
--cream:#ccd7ca; --dim:#6c7f74; --red:#a4231f; --bad:#cf5a4e;
|
|
/* the same green as --panel over --ink, but OPAQUE: the pinned header and footer have
|
|
content scrolling underneath them and a translucent bar shows it through */
|
|
--solid:#16211d; }
|
|
/* touch-action is pan-y, not none: the BODY COUNT list is taller than a phone and has to scroll.
|
|
align-content is `safe center` rather than place-items — plain centring on a grid whose item
|
|
overflows pushes the top of the item out of the scrollport, where nothing can reach it. */
|
|
#intro { position: fixed; inset: 0; z-index: 10; touch-action: pan-y; background: var(--ink);
|
|
display: grid; grid-template-columns: 1fr; justify-items: center;
|
|
align-content: safe center; overflow-y: auto; overscroll-behavior: contain; }
|
|
/* the SPLASH sits on the court; the other stages are lists and want a flat field behind them.
|
|
The art is dimmed here rather than baked dark, so the same file can be reused at another level. */
|
|
#intro[data-stage="splash"] {
|
|
/* Three stops, not two. The logo needs a dark, quiet band behind it and the blood needs to be
|
|
READABLE, and those pull opposite ways — so the scrim is heaviest at the top, lifts over the
|
|
court where the stain is, and comes back down only far enough to seat the buttons. */
|
|
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?v=86') 50% 42% / cover no-repeat var(--ink);
|
|
image-rendering: pixelated; }
|
|
#intro .card { font: 400 11px Silkscreen, monospace; color: var(--cream); text-align: center;
|
|
line-height: 1.9; padding: 16px 14px 20px; width: min(370px, 94vw);
|
|
animation: drop 0.5s ease-out; }
|
|
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } }
|
|
/* EVERY SCREEN FILLS THE VIEWPORT, and every screen is the same three bands: something pinned to
|
|
the top, something pinned to the bottom, and whatever is between them taking the slack. The
|
|
card is a full-height flex column, so `margin-top:auto` on the footer drops it to the bottom
|
|
when the content is short and `position:sticky` keeps it there once the content is long enough
|
|
to scroll. Centring the card instead left the buttons floating in the middle of a tall phone. */
|
|
#intro { align-content: stretch; }
|
|
#intro .card { display: flex; flex-direction: column; min-height: 100dvh; padding: 0 14px; }
|
|
/* the slack band: the title sits in the middle of whatever is left over */
|
|
.mid { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 12px 0; }
|
|
/* the logo is generated pixel art (assets/logo.png), not stacked CSS text */
|
|
#intro .logo { display: block; width: min(300px, 74vw); height: auto; margin: 0 auto 6px;
|
|
image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,0.45)); }
|
|
/* the slogan carries most of the gap between the logo's blood and the first button */
|
|
#intro .slogan { margin: 8px 0 20px; font-size: 11px; color: #a8a09e; letter-spacing: 0.5px; }
|
|
#intro .slogan b { color: #c9564a; }
|
|
/* which build is served — filled in by main.js, empty (and invisible) if the header is missing */
|
|
#build { margin: 14px 0 0; font-size: 9px; color: #4a5a52; letter-spacing: 0.5px; }
|
|
/* ONE overlay, four panels, swapped by #intro[data-stage]. Keeping the backdrop and the card frame
|
|
alive across every screen is the point — a screen that unmounts the whole overlay flashes the
|
|
court through between menus. */
|
|
#splash, #setup, #stats, #ranks { display: none; }
|
|
#intro[data-stage="splash"] #splash { display: flex; flex-direction: column; flex: 1; }
|
|
/* flex COLUMN, not block: it is what lets the footer's margin-top:auto reach the bottom of a
|
|
screen whose content does not fill it */
|
|
#intro[data-stage="setup"] #setup,
|
|
#intro[data-stage="stats"] #stats,
|
|
#intro[data-stage="ranks"] #ranks { display: flex; flex-direction: column; flex: 1;
|
|
animation: drop 0.3s ease-out; }
|
|
/* the overlay is HIDDEN during play, not removed: a restart puts it straight back, and the
|
|
display:grid above would otherwise win over the hidden attribute */
|
|
#intro[hidden] { display: none; }
|
|
/* Screen titles and the primary button are BANGERS — the same announcement face the canvas uses
|
|
for SET and CHAPTER. A screen title is a thing that shouts. Everything that is a NUMBER or a
|
|
label stays Silkscreen, so the two registers keep meaning what they have always meant. */
|
|
#intro h2 { margin: 0; font: 400 26px Bangers, cursive; color: var(--acid); letter-spacing: 1.5px; }
|
|
#intro h3 { display: flex; justify-content: space-between; margin: 18px 0 8px;
|
|
font: 400 9px Silkscreen, monospace; color: var(--dim); letter-spacing: 2px;
|
|
text-align: left; }
|
|
/* header strip: back chevron + title. Every screen but the splash wears one, pinned to the top. */
|
|
.hdr { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px;
|
|
padding: 10px 12px; margin: 0 -14px; border-bottom: 2px solid var(--line);
|
|
background: var(--solid);
|
|
padding-top: max(10px, env(safe-area-inset-top)); }
|
|
.hdr h2 { padding-left: 2px; }
|
|
.chev { width: 34px; height: 34px; flex: none; background: none; border: 2px solid var(--line);
|
|
color: var(--acid); font: 400 20px Bangers, cursive; line-height: 1; cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent; }
|
|
/* the BODY COUNT headline row: three boxed figures sharing one frame */
|
|
.figs { display: flex; border: 2px solid var(--line); background: var(--panel); }
|
|
.fig { flex: 1; min-width: 0; padding: 7px 6px; text-align: center; }
|
|
.fig + .fig { border-left: 2px solid var(--line); }
|
|
.fig b { display: block; font: 400 8px Silkscreen, monospace; color: var(--dim); letter-spacing: 1px; }
|
|
.fig i { display: block; font: 700 15px Silkscreen, monospace; color: var(--acid);
|
|
font-style: normal; letter-spacing: 1px; }
|
|
.fig.bad i { color: var(--bad); }
|
|
/* one button look for every menu screen */
|
|
.btn { display: block; width: 100%; margin: 0 auto 10px; padding: 12px 10px;
|
|
background: var(--panel); border: 2px solid var(--line); color: var(--cream);
|
|
font: 400 12px Silkscreen, monospace; letter-spacing: 1px; cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent; }
|
|
/* The generated button plates are gone with the tutorial. The primary is a flat crimson block
|
|
now: it survives being resized, which a fixed-size plate crop never did, and the mockup's
|
|
hierarchy is carried by colour rather than by art. */
|
|
.btn.big { padding: 13px 10px 11px; background: var(--red); border-color: #69201c; color: #f6e7dc;
|
|
font: 400 26px Bangers, cursive; letter-spacing: 2px; line-height: 1.15; }
|
|
.two { display: flex; gap: 8px; }
|
|
.two .btn { margin-bottom: 0; }
|
|
.btn.sec i { display: block; margin-top: 3px; font: 400 8px Silkscreen, monospace;
|
|
font-style: normal; color: var(--dim); letter-spacing: 0.5px; }
|
|
/* the tour: two tiles SIDE BY SIDE, not two more full-width rows. The figures face the camera —
|
|
in play you only ever see your player from behind, so a rear view would show nothing. */
|
|
#tours { display: flex; gap: 8px; }
|
|
#tours button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
|
|
padding: 8px 6px 10px; background: var(--panel); border: 2px solid var(--line);
|
|
color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
|
|
#tours button.on { border-color: var(--acid); background: rgba(188,212,85,0.09); }
|
|
#tours img { height: 88px; width: auto; display: block; image-rendering: pixelated; }
|
|
#tours b { font: 400 10px Silkscreen, monospace; color: var(--cream); letter-spacing: 0.5px; }
|
|
/* a row, not a stacked tile: three 3:2 tiles stacked fill a phone twice over, and the art still
|
|
reads at this size. -webkit-tap-highlight-color kills iOS's blue flash over the pixel art. */
|
|
#courtList button.court { display: flex; align-items: center; gap: 11px; width: 100%;
|
|
margin: 0 0 8px; padding: 7px; background: var(--panel);
|
|
border: 2px solid var(--line); color: inherit; font: inherit; text-align: left;
|
|
cursor: pointer; -webkit-tap-highlight-color: transparent; }
|
|
#courtList button.court.on { border-color: var(--acid); background: rgba(188,212,85,0.09); }
|
|
#courtList img { width: 92px; height: 66px; display: block; image-rendering: pixelated; flex: none;
|
|
object-fit: cover; }
|
|
#courtList .cb { flex: 1; min-width: 0; }
|
|
#courtList b { display: block; font: 400 11px Silkscreen, monospace; color: var(--cream); letter-spacing: 0.5px; }
|
|
#courtList i { display: block; margin: 2px 0 5px; font: 400 8px Silkscreen, monospace; color: var(--dim); font-style: normal; }
|
|
/* The two meters read straight off the court's own bounce numbers (see main.js), so they cannot
|
|
drift away from what the ball actually does on it. */
|
|
.meter { display: flex; align-items: center; gap: 6px; margin-top: 3px;
|
|
font: 400 7px Silkscreen, monospace; color: var(--dim); letter-spacing: 1px; }
|
|
.meter u { flex: none; width: 40px; text-decoration: none; }
|
|
.meter s { flex: 1; height: 5px; background: rgba(0,0,0,0.45); text-decoration: none; display: block; }
|
|
.meter s > i { display: block; height: 100%; background: var(--acid); }
|
|
.meter.b s > i { background: #4e8fa6; }
|
|
/* the commit strip. #intro is the scrollport, so sticky resolves against it and the button stays
|
|
reachable however long the list above grows. */
|
|
/* margin-top:auto pins it to the BOTTOM of a short screen; sticky keeps it there on a long one */
|
|
.foot { position: sticky; bottom: 0; z-index: 2; margin: auto -14px 0; padding: 10px 14px;
|
|
padding-bottom: max(10px, env(safe-area-inset-bottom));
|
|
border-top: 2px solid var(--line); background: var(--solid); }
|
|
.foot .btn { margin-bottom: 0; }
|
|
/* the splash's bottom band: no bar, no rule — the court art has to keep running under it */
|
|
.foot.bare { border: 0; background: none; }
|
|
.foot.bare .btn.big { margin-bottom: 10px; }
|
|
#sSum { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px;
|
|
font: 400 8px Silkscreen, monospace; color: var(--dim); letter-spacing: 1px; }
|
|
.tabs { display: flex; gap: 6px; margin: 12px 0 14px; }
|
|
.tabs button { flex: 1; padding: 9px 2px; background: var(--panel); border: 2px solid var(--line);
|
|
color: var(--dim); font: 400 8px Silkscreen, monospace; letter-spacing: 1px;
|
|
cursor: pointer; -webkit-tap-highlight-color: transparent; }
|
|
.tabs button.on { border-color: var(--acid); color: var(--acid); }
|
|
/* one opponent. The sprite is the walk frame the game already draws, sat on its own baseline. */
|
|
.zrow { display: flex; align-items: center; gap: 10px; padding: 7px 9px; margin-bottom: 6px;
|
|
border: 2px solid var(--line); background: var(--panel); text-align: left; }
|
|
.zrow.boss { border-color: #6e2a24; background: rgba(110,42,36,0.22); }
|
|
.zrow img { width: 34px; height: 46px; object-fit: contain; object-position: bottom;
|
|
image-rendering: pixelated; flex: none; }
|
|
.zb { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 0 8px;
|
|
line-height: 1.4; }
|
|
.zb b { font: 400 10px Silkscreen, monospace; color: var(--cream); letter-spacing: 0.5px;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.zb > span { font: 700 12px Silkscreen, monospace; color: var(--acid); text-align: right; }
|
|
.zrow.boss .zb > span { color: var(--bad); }
|
|
.pb { grid-column: 1 / -1; height: 5px; margin-top: 4px; background: rgba(0,0,0,0.45); }
|
|
.pb s { display: block; height: 100%; background: var(--acid); text-decoration: none; }
|
|
.zrow.boss .pb s { background: var(--bad); }
|
|
.zb i { grid-column: 1 / -1; margin-top: 3px; font: 400 7px Silkscreen, monospace;
|
|
font-style: normal; color: var(--dim); letter-spacing: 1px; }
|
|
#stW { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.wtile { flex: 1 1 54px; max-width: 76px; padding: 6px 2px; border: 2px solid var(--line);
|
|
background: var(--panel); }
|
|
.wtile img { width: 26px; height: 26px; object-fit: contain; display: block; margin: 0 auto 2px;
|
|
image-rendering: pixelated; }
|
|
.wtile b { display: block; font: 400 9px Silkscreen, monospace; color: var(--acid); }
|
|
.none { margin: 4px 0 0; font: 400 8px Silkscreen, monospace; color: var(--dim); letter-spacing: 1px;
|
|
text-align: left; }
|
|
#stFoot { display: flex; justify-content: space-between; align-items: baseline;
|
|
border-top: 2px solid var(--line); }
|
|
#stFoot b { font: 400 8px Silkscreen, monospace; color: var(--dim); letter-spacing: 1px; }
|
|
#stFoot i { font: 700 13px Silkscreen, monospace; color: var(--acid); font-style: normal; }
|
|
.rkrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 5px;
|
|
border: 2px solid var(--line); background: var(--panel); text-align: left; }
|
|
.rkrow.me { border-color: var(--acid); background: rgba(188,212,85,0.11); }
|
|
.rkrow b { flex: none; width: 60px; font: 700 10px Silkscreen, monospace; color: var(--dim); }
|
|
.rkrow.me b { color: var(--acid); }
|
|
.rkrow span { flex: 1; min-width: 0; font: 400 9px Silkscreen, monospace; color: var(--cream);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.rkrow i { font: 400 9px Silkscreen, monospace; font-style: normal; color: var(--dim); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="c" width="480" height="270"></canvas>
|
|
<div id="safe"></div>
|
|
<div id="hint">move: WASD/arrows · serve/swing: SPACE · aim: hold a direction while swinging · T: tuning panel</div>
|
|
<div id="intro" data-stage="splash">
|
|
<div class="card">
|
|
<!-- The title screen IS the menu. A separate menu stage behind it was the same logo over the
|
|
same backdrop with two buttons, so it read as the title screen failing to advance. -->
|
|
<!-- three bands: the figures at the top, the title floating in the middle, the buttons under
|
|
your thumb. Same anchoring as every other screen. -->
|
|
<div id="splash">
|
|
<div class="mid">
|
|
<img class="logo" src="assets/logo.png" alt="Splatter Tennis">
|
|
<p class="slogan">Fifteen. Thirty. Forty. <b>Dead.</b></p>
|
|
</div>
|
|
<div class="foot bare">
|
|
<button class="btn big" id="mStart">PLAY MATCH</button>
|
|
<div class="two">
|
|
<button class="btn sec" id="mStats">STATS<i id="mKills">0 KILLS</i></button>
|
|
<button class="btn sec" id="mRanks">RANKINGS<i>SEASON 1</i></button>
|
|
</div>
|
|
<p id="build"></p>
|
|
</div>
|
|
</div>
|
|
<!-- tour tiles and court rows are both built from tables in main.js (config.TOURS / config.COURTS):
|
|
adding either is a table row, never markup -->
|
|
<div id="setup">
|
|
<div class="hdr"><button class="chev" id="sBack">‹</button><h2>MATCH SETUP</h2></div>
|
|
<h3>01 · PLAYER</h3>
|
|
<div id="tours"></div>
|
|
<h3>02 · COURT</h3>
|
|
<div id="courtList"></div>
|
|
<div class="foot">
|
|
<p id="sSum"></p>
|
|
<button class="btn big" id="cStart">SERVE UP</button>
|
|
</div>
|
|
</div>
|
|
<!-- BODY COUNT. Every row in here is built by stats.js from the run records in localStorage. -->
|
|
<div id="stats">
|
|
<div class="hdr"><button class="chev" id="stBack">‹</button><h2>BODY COUNT</h2></div>
|
|
<div class="tabs" id="stTabs">
|
|
<button class="on" data-p="all">ALL TIME</button>
|
|
<button data-p="last">LAST MATCH</button>
|
|
<button data-p="7d">7 DAYS</button>
|
|
</div>
|
|
<div class="figs" id="stFigs"></div>
|
|
<h3>BY OPPONENT<span id="stPeriod"></span></h3>
|
|
<div id="stZ"></div>
|
|
<h3>BY WEAPON</h3>
|
|
<div id="stW"></div>
|
|
<div class="foot" id="stFoot"></div>
|
|
</div>
|
|
<!-- placeholder ladder until the leaderboard task lands — see stats.drawRanks -->
|
|
<div id="ranks">
|
|
<div class="hdr"><button class="chev" id="rkBack">‹</button><h2>RANKINGS</h2></div>
|
|
<h3>SEASON 1<span>UNRANKED · OFFLINE</span></h3>
|
|
<div id="rkList"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="main.js?v=123"></script>
|
|
</body>
|
|
</html>
|