101 lines
4.2 KiB
HTML
101 lines
4.2 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||
<meta name="theme-color" content="#05050b">
|
||
<meta name="color-scheme" content="dark">
|
||
<meta name="description" content="Everyone puts a finger on the screen and Picker chooses one of you at random.">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<meta name="apple-mobile-web-app-title" content="Picker">
|
||
<title>Picker</title>
|
||
<link rel="manifest" href="manifest.webmanifest">
|
||
<link rel="icon" href="icons/icon.svg" type="image/svg+xml">
|
||
<link rel="icon" href="icons/icon-192.png" type="image/png" sizes="192x192">
|
||
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
|
||
<link rel="stylesheet" href="css/app.css">
|
||
<script type="module" src="js/main.js"></script>
|
||
</head>
|
||
<body>
|
||
<canvas id="stage" aria-hidden="true"></canvas>
|
||
|
||
<div id="overlay" aria-live="polite">
|
||
<p id="msg-main" class="msg"></p>
|
||
<p id="msg-sub" class="msg-sub"></p>
|
||
</div>
|
||
|
||
<nav id="toolbar" class="hidden">
|
||
<button id="btn-settings" class="tool" type="button" data-i18n-aria="settings">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/></svg>
|
||
</button>
|
||
<button id="btn-sound" class="tool" type="button" data-i18n-aria="mute">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9.5h3.5L12 5.5v13l-4.5-4H4z"/><path class="on" d="M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11"/><path class="off" d="M16 9.5l5 5M21 9.5l-5 5"/></svg>
|
||
</button>
|
||
<button id="btn-fullscreen" class="tool" type="button" data-i18n-aria="fullscreen">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path class="on" d="M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5"/><path class="off" d="M9 4v5H4M20 9h-5V4M15 20v-5h5M4 15h5v5"/></svg>
|
||
</button>
|
||
</nav>
|
||
|
||
<div id="sheet-backdrop" hidden></div>
|
||
<section id="sheet" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="sheet-title" hidden>
|
||
<header class="sheet-head">
|
||
<h2 id="sheet-title" data-i18n="settings"></h2>
|
||
<button class="sheet-close" type="button" data-i18n="done"></button>
|
||
</header>
|
||
<div class="sheet-body">
|
||
<div class="field">
|
||
<h3 data-i18n="modeLabel"></h3>
|
||
<div id="seg-mode" class="seg seg-wrap" data-setting="mode"></div>
|
||
<p id="mode-desc" class="desc"></p>
|
||
</div>
|
||
|
||
<div id="row-pickn" class="field row" hidden>
|
||
<h3 data-i18n="pickNLabel"></h3>
|
||
<div class="stepper">
|
||
<button type="button" data-step="-1" data-i18n-aria="decrease">−</button>
|
||
<output id="pickn-value">2</output>
|
||
<button type="button" data-step="1" data-i18n-aria="increase">+</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="row-teams" class="field row" hidden>
|
||
<h3 data-i18n="teamsLabel"></h3>
|
||
<div id="seg-teams" class="seg" data-setting="teams"></div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<h3><label for="stake-input" data-i18n="stakesLabel"></label></h3>
|
||
<div class="stake-row">
|
||
<input id="stake-input" type="text" maxlength="60" autocomplete="off" enterkeyhint="done">
|
||
<button id="stake-clear" type="button" class="chip" data-i18n="stakesClear" hidden></button>
|
||
</div>
|
||
<div id="stake-presets" class="chips"></div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<h3 data-i18n="themeLabel"></h3>
|
||
<div id="seg-theme" class="seg" data-setting="theme"></div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<h3 data-i18n="languageLabel"></h3>
|
||
<div id="seg-lang" class="seg" data-setting="lang"></div>
|
||
</div>
|
||
|
||
<div class="field row">
|
||
<h3 data-i18n="soundLabel"></h3>
|
||
<div id="seg-sound" class="seg" data-setting="muted"></div>
|
||
</div>
|
||
|
||
<div id="row-haptics" class="field row">
|
||
<h3 data-i18n="hapticsLabel"></h3>
|
||
<div id="seg-haptics" class="seg" data-setting="haptics"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div id="debug-hud" hidden></div>
|
||
</body>
|
||
</html>
|