69 lines
3.2 KiB
HTML
69 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="light dark">
|
|
<meta name="theme-color" content="#4A2E1F">
|
|
<title>Ustagammon</title>
|
|
<link rel="manifest" href="manifest.webmanifest">
|
|
<link rel="icon" href="icons/favicon.svg" type="image/svg+xml">
|
|
<link rel="icon" href="icons/favicon-32.png" sizes="32x32" type="image/png">
|
|
<link rel="apple-touch-icon" href="icons/apple-touch-icon-180.png">
|
|
<link rel="preload" href="fonts/AlegreyaSans-Regular.woff2" as="font" type="font/woff2" crossorigin>
|
|
<link rel="preload" href="fonts/AlegreyaSans-Bold.woff2" as="font" type="font/woff2" crossorigin>
|
|
<link rel="stylesheet" href="app.css">
|
|
<script type="module" src="app/main.js"></script>
|
|
</head>
|
|
<body class="busy">
|
|
<!-- Les textes des boutons et des messages viennent de app/src/ui/texts.ts. -->
|
|
<header class="topbar">
|
|
<!-- Logo de la charte (docs/identite/logo/, copié dans icons/ par make
|
|
site) : horizontal, ou symbole seul quand la place manque (téléphone
|
|
étroit, colonne du mode paysage) ; version sombre en thème sombre. -->
|
|
<h1 class="brand">
|
|
<picture>
|
|
<source media="(prefers-color-scheme: dark) and (max-width: 24.5rem), (prefers-color-scheme: dark) and (orientation: landscape) and (max-height: 40rem)" srcset="icons/symbole-sombre.svg">
|
|
<source media="(max-width: 24.5rem), (orientation: landscape) and (max-height: 40rem)" srcset="icons/symbole-couleur.svg">
|
|
<source media="(prefers-color-scheme: dark)" srcset="icons/logo-horizontal-sombre.svg">
|
|
<img src="icons/logo-horizontal-couleur.svg" alt="Ustagammon">
|
|
</picture>
|
|
</h1>
|
|
<button id="help-button" type="button" class="secondary"></button>
|
|
<button id="new-game" type="button" class="secondary"></button>
|
|
</header>
|
|
|
|
<main id="game">
|
|
<svg id="board" class="board" role="img" xmlns="http://www.w3.org/2000/svg"></svg>
|
|
<p id="pips" class="pips"></p>
|
|
<p id="info" class="info" aria-live="polite"></p>
|
|
<p id="prompt" class="prompt" aria-live="polite"></p>
|
|
<div class="actions">
|
|
<button id="roll" type="button" hidden></button>
|
|
<button id="double" type="button" class="secondary" hidden></button>
|
|
<button id="take" type="button" hidden></button>
|
|
<button id="drop" type="button" class="secondary" hidden></button>
|
|
<button id="confirm" type="button" hidden></button>
|
|
<button id="cancel" type="button" class="secondary" hidden></button>
|
|
<button id="skip" type="button" hidden></button>
|
|
<button id="replay" type="button" class="secondary" hidden></button>
|
|
<button id="again" type="button" hidden></button>
|
|
</div>
|
|
<!-- Confirmation avant de doubler (ouverte par app/ui/app.js). -->
|
|
<dialog id="double-dialog" class="confirm" aria-labelledby="double-question">
|
|
<p id="double-question"></p>
|
|
<div class="actions">
|
|
<button id="double-confirm" type="button"></button>
|
|
<button id="double-cancel" type="button" class="secondary"></button>
|
|
</div>
|
|
</dialog>
|
|
<noscript><p>Ustagammon a besoin de JavaScript.</p></noscript>
|
|
</main>
|
|
|
|
<section id="help" class="help" hidden>
|
|
<button id="help-back" type="button" class="secondary"></button>
|
|
<div id="help-content"></div>
|
|
</section>
|
|
</body>
|
|
</html>
|