130 lines
5.9 KiB
HTML
130 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>The Button</title>
|
|
<meta name="description" content="A web game of patience and nerve. Press the button before the 24-hour countdown runs out, and score based on how long you waited.">
|
|
<meta property="og:title" content="The Button">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:description" content="A web game of patience and nerve. Press the button before the 24-hour countdown runs out, and score based on how long you waited.">
|
|
<meta property="og:image" content="/poster.png">
|
|
<meta property="og:site_name" content="The Button">
|
|
<meta property="og:locale" content="en_US">
|
|
<link rel="stylesheet" href="/style.css">
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<h1>THE BUTTON</h1>
|
|
|
|
<section id="timer-section">
|
|
<div id="countdown" class="zone-green">--:--:--.--</div>
|
|
<div id="zone-label"></div>
|
|
<div id="zone-bar"><div id="zone-marker"></div></div>
|
|
</section>
|
|
|
|
<section id="button-section">
|
|
<button id="the-button" class="zone-green" disabled>PRESS</button>
|
|
<p id="press-result" aria-live="polite"></p>
|
|
<div id="share-controls" hidden>
|
|
<p>Share your press:</p>
|
|
<div class="share-links">
|
|
<a id="share-facebook" class="share-link" target="_blank" rel="noopener noreferrer">Facebook</a>
|
|
<a id="share-x" class="share-link" target="_blank" rel="noopener noreferrer">X</a>
|
|
<a id="share-bluesky" class="share-link" target="_blank" rel="noopener noreferrer">Bluesky</a>
|
|
</div>
|
|
<label for="mastodon-instance">Mastodon instance</label>
|
|
<div class="share-links">
|
|
<input id="mastodon-instance" type="url" value="https://mastodon.social" aria-label="Mastodon instance URL">
|
|
<a id="share-mastodon" class="share-link" target="_blank" rel="noopener noreferrer">Share on Mastodon</a>
|
|
</div>
|
|
<p id="share-error" class="error" aria-live="polite"></p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="register-section" hidden>
|
|
<h2>Log in or join the game</h2>
|
|
<form id="register-form">
|
|
<input id="name-input" maxlength="24" placeholder="Your name" required autocomplete="username">
|
|
<input id="password-input" type="password" minlength="8" maxlength="128" placeholder="Password (8+ chars)" required autocomplete="current-password">
|
|
<button type="submit" value="login">Log in</button>
|
|
<button type="submit" value="register">Sign up</button>
|
|
</form>
|
|
<p id="register-error" class="error"></p>
|
|
</section>
|
|
|
|
<section id="me-section" hidden>
|
|
<h2>Your score: <span id="my-name"></span></h2>
|
|
<button id="logout-button" type="button">Log out</button>
|
|
<p id="my-subscribed" hidden>You're on the mailing list. Thanks!</p>
|
|
<p>Total points: <strong id="my-points">0</strong> · Presses: <strong id="my-presses">0</strong></p>
|
|
<table id="my-zones" class="zone-table"></table>
|
|
<details>
|
|
<summary>Your press history</summary>
|
|
<table id="my-history"></table>
|
|
<p id="history-global-summary" aria-live="polite"></p>
|
|
</details>
|
|
</section>
|
|
|
|
<section id="stats-section" hidden>
|
|
<h2>Game over — final global stats</h2>
|
|
<div id="stats-summary"></div>
|
|
<h3>Presses per zone</h3>
|
|
<table id="stats-zones" class="zone-table"></table>
|
|
<h3>Leaderboard</h3>
|
|
<table id="stats-leaderboard"></table>
|
|
<details>
|
|
<summary>Full press log</summary>
|
|
<table id="stats-log"></table>
|
|
</details>
|
|
</section>
|
|
|
|
<section id="rules">
|
|
<h2>Rules</h2>
|
|
<ul>
|
|
<li>A 24 hour countdown resets whenever anyone presses the button.</li>
|
|
<li>If the countdown reaches zero, the game is over forever.</li>
|
|
<li>The lower the countdown when you press, the more points you score.</li>
|
|
<li>Zones: <span id="rules-zones"></span></li>
|
|
<li>Each press scores the fixed point value of the zone it lands in.</li>
|
|
<li>Global stats are published when the game ends.</li>
|
|
<li>Inspired by the original <a href="https://en.wikipedia.org/wiki/The_Button_(Reddit)">Reddit "The Button"</a> experiment.</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section id="more">
|
|
<h2>More</h2>
|
|
<p>Visit <a href="https://www.eom.dev/">Eric's homepage</a> for contact information, social media, and links to his other projects.</p>
|
|
</section>
|
|
|
|
<section id="mailing-list" hidden>
|
|
<p>Join the mailing list to receive updates on Eric's projects:</p>
|
|
<form id="subscribe-form">
|
|
<input id="sub-first" maxlength="50" placeholder="First name" required autocomplete="given-name">
|
|
<input id="sub-last" maxlength="50" placeholder="Last name (optional)" autocomplete="family-name">
|
|
<input id="sub-email" type="email" maxlength="254" placeholder="Email" required autocomplete="email">
|
|
<input id="sub-phone" type="tel" maxlength="25" placeholder="Phone (optional)" autocomplete="tel">
|
|
<button type="submit">Sign up</button>
|
|
</form>
|
|
<p id="subscribe-result" aria-live="polite"></p>
|
|
</section>
|
|
|
|
<section id="donate">
|
|
<h2>Donate</h2>
|
|
<p>Help support my <a href="https://gitea.eom.dev/Gaming/the-button">free and open source projects</a> by making a donation through Stripe:</p>
|
|
<script async
|
|
src="https://js.stripe.com/v3/buy-button.js">
|
|
</script>
|
|
|
|
<stripe-buy-button
|
|
buy-button-id="buy_btn_1US18mC5KPXqTvVL4BJNK1MU"
|
|
publishable-key="pk_live_51RXqTsC5KPXqTvVLWl5bzCxoaZivWceeLGMNURUmxzQMwaM5pUUl4VabywrjCQvgKopGFvUBqPLxRMF3eALsiDst00tR59vRhN"
|
|
>
|
|
</stripe-buy-button>
|
|
</section>
|
|
</main>
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|