simonandClaude Opus 5
7706fe46c6
Centred, spanning 60% of the screen width, on the poster's layer so the video frame and the stills still pass in front of it. The file lives in assets/ with the posters, so it has to be kept out of the background rotation — it is the one image there that is never a background. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H9v2Xoa6eoeGYpK6gp95k9
48 lines
1.6 KiB
HTML
48 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Party Player</title>
|
|
<link rel="stylesheet" href="/player/player.css" />
|
|
</head>
|
|
<body>
|
|
<div id="backgrounds"></div>
|
|
|
|
<!-- The party's logo, centred over the poster. Its src and width come from
|
|
the shared config, so the file can be swapped without touching this. -->
|
|
<img id="logo" alt="" />
|
|
|
|
<!-- Frozen screenshots of the frame. A sibling, not a child, of #frameMover:
|
|
these are positioned against the screen, not the moving frame. -->
|
|
<div id="stills"></div>
|
|
|
|
<!-- #frameMover owns the motion transform and nothing else, so future
|
|
animations can nest their own transform layers without conflict. -->
|
|
<div id="frameMover">
|
|
<div id="frameSkin">
|
|
<div class="deck" data-deck="a"><div id="deck-a"></div></div>
|
|
<div class="deck" data-deck="b"><div id="deck-b"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Offscreen, muted, 1x1: cues queued videos purely to read their length. -->
|
|
<div id="probe"><div id="probe-player"></div></div>
|
|
|
|
<div id="gate">
|
|
<div class="gate-inner">
|
|
<h1>Party Player</h1>
|
|
<p id="gate-hint">Loading queue…</p>
|
|
<button id="start" type="button" disabled>Start</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="status" hidden>reconnecting…</div>
|
|
|
|
<!-- Why screenshots are missing or misaligned. Set by the capture layer. -->
|
|
<div id="notice" hidden></div>
|
|
|
|
<script type="module" src="/player/player.js"></script>
|
|
</body>
|
|
</html>
|