Ustagammon/web/index.html

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<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 ;
     les pictogrammes, de app/src/ui/icons.ts. Tout l'écran est dans #screen :
     c'est lui qui tourne d'un quart de tour quand le plein écran ne peut pas
     verrouiller le paysage (ADR 0012). -->
<div id="screen" class="screen">

<header class="topbar">
  <!-- Logo de la charte (docs/identite/logo/, copié dans icons/ par make
       site), version sombre en thème sombre (choix par app.css). -->
  <h1 class="brand">
    <img class="logo-light" src="icons/logo-horizontal-couleur.svg" alt="Ustagammon">
    <img class="logo-dark" src="icons/logo-horizontal-sombre.svg" alt="Ustagammon">
  </h1>
  <button id="help-button" type="button" class="icon-button labelled"></button>
  <button id="fullscreen-button" type="button" class="icon-button labelled"></button>
  <button id="menu-button" type="button" class="icon-button labelled"></button>
</header>

<main id="game" class="game">
  <div id="strip-computer" class="strip">
    <span class="mini mini-computer"></span>
    <span class="who"></span>
    <span class="lead"></span>
    <button type="button" class="count"></button>
  </div>
  <div class="board-box">
    <svg id="board" class="board" role="img" xmlns="http://www.w3.org/2000/svg"></svg>
    <div id="pip-bubble" class="bubble" role="dialog" aria-labelledby="pip-bubble-term" hidden>
      <p id="pip-bubble-term" class="bubble-term"></p>
      <p class="bubble-text"></p>
      <button type="button" class="link-button"></button>
    </div>
  </div>
  <div id="strip-player" class="strip">
    <span class="mini mini-player"></span>
    <span class="who"></span>
    <span class="lead"></span>
    <button type="button" class="count"></button>
  </div>
  <div class="infoline">
    <p id="info" class="info" aria-live="polite"></p>
    <button id="replay" type="button" class="icon-button replay" hidden></button>
  </div>
  <p id="prompt" class="prompt" aria-live="polite"></p>
  <div class="spacer"></div>
  <div id="actions" class="actions">
    <div class="slot">
      <button id="double" type="button" class="secondary" hidden></button>
      <button id="cancel" type="button" class="secondary" hidden></button>
      <button id="drop" type="button" class="secondary" hidden></button>
    </div>
    <div class="slot primary">
      <button id="roll" type="button" hidden></button>
      <button id="confirm" type="button" hidden></button>
      <button id="skip" type="button" hidden></button>
      <button id="take" type="button" hidden></button>
      <button id="again" type="button" hidden></button>
      <p id="move-hint" class="move-hint" hidden></p>
    </div>
  </div>
  <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>

<!-- Menu : une feuille qui monte du bas. -->
<div id="menu-veil" class="veil sheet-veil" hidden>
  <div id="menu" class="sheet" role="dialog" aria-modal="true" aria-labelledby="menu-title">
    <div class="sheet-head">
      <span class="grip" aria-hidden="true"></span>
      <h2 id="menu-title" class="sheet-title"></h2>
      <button id="menu-close" type="button" class="icon-button"></button>
    </div>
    <button id="menu-new-game" type="button" class="item"></button>
    <button id="menu-fullscreen" type="button" class="item"></button>
    <button id="menu-help" type="button" class="item"></button>
    <button id="menu-theme" type="button" class="item"><span class="item-label"></span><span class="item-value"></span></button>
    <button id="menu-vibrations" type="button" class="item" role="switch"><span class="item-label"></span><span class="switch" aria-hidden="true"></span></button>
    <button id="menu-screen-on" type="button" class="item" role="switch"><span class="item-label"></span><span class="switch" aria-hidden="true"></span></button>
  </div>
</div>

<!-- Confirmation avant de doubler : la seule question posée au joueur. -->
<div id="double-veil" class="veil" hidden>
  <div id="double-dialog" class="panel" role="dialog" aria-modal="true" aria-labelledby="double-question">
    <p id="double-question"></p>
    <div class="panel-actions">
      <button id="double-cancel" type="button" class="secondary"></button>
      <button id="double-confirm" type="button"></button>
    </div>
  </div>
</div>

<!-- Fin de partie, et double de l'ordinateur en paysage : un panneau centré
     sur un voile. -->
<div id="panel-veil" class="veil" hidden>
  <div id="panel" class="panel" role="dialog" aria-modal="true" aria-labelledby="panel-text">
    <p id="panel-overline" class="overline"></p>
    <p id="panel-text" class="panel-title"></p>
    <p id="panel-detail" class="panel-detail"></p>
    <div class="panel-actions">
      <button id="panel-secondary" type="button" class="secondary"></button>
      <button id="panel-primary" type="button"></button>
    </div>
  </div>
</div>

<!-- « Nouvelle partie commencée. Reprendre l'ancienne », 10 s. -->
<div id="banner" class="banner" role="status" hidden>
  <span id="banner-text"></span>
  <button id="resume-old" type="button" class="secondary"></button>
  <span class="banner-timer" aria-hidden="true"></span>
</div>

</div>
</body>
</html>