202 lines
8.6 KiB
HTML
202 lines
8.6 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#140700" />
|
|
<meta name="application-name" content="ChessCubing Arena" />
|
|
<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="ChessCubing" />
|
|
<meta
|
|
name="description"
|
|
content="Phase chrono de ChessCubing Arena avec gros boutons face-à-face."
|
|
/>
|
|
<title>ChessCubing Arena | Phase Chrono</title>
|
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
|
<link rel="shortcut icon" href="/favicon.png" />
|
|
<link rel="apple-touch-icon" href="logo.png" />
|
|
<link rel="manifest" href="site.webmanifest" />
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body data-page="chrono" class="phase-body">
|
|
<main class="phase-shell">
|
|
<header class="phase-header chrono-toolbar">
|
|
<button
|
|
class="chrono-toolbar-button"
|
|
id="openArbiterButton"
|
|
type="button"
|
|
aria-label="Ouvrir les outils arbitre"
|
|
title="Outils arbitre"
|
|
>
|
|
<svg class="toolbar-icon" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
d="M19.14 12.94a7.43 7.43 0 0 0 .05-.94 7.43 7.43 0 0 0-.05-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.28 7.28 0 0 0-1.63-.94l-.36-2.54a.49.49 0 0 0-.49-.42h-3.84a.49.49 0 0 0-.49.42l-.36 2.54c-.58.22-1.13.52-1.63.94l-2.39-.96a.5.5 0 0 0-.6.22L2.71 8.84a.5.5 0 0 0 .12.64l2.03 1.58a7.43 7.43 0 0 0-.05.94c0 .31.02.63.05.94l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32a.5.5 0 0 0 .6.22l2.39-.96c.5.42 1.05.72 1.63.94l.36 2.54a.49.49 0 0 0 .49.42h3.84a.49.49 0 0 0 .49-.42l.36-2.54c.58-.22 1.13-.52 1.63-.94l2.39.96a.5.5 0 0 0 .6-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58ZM12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Outils arbitre</span>
|
|
</button>
|
|
|
|
<button
|
|
class="chrono-toolbar-button"
|
|
id="primaryChronoButton"
|
|
type="button"
|
|
aria-label="Demarrer la partie"
|
|
title="Demarrer la partie"
|
|
data-state="play"
|
|
>
|
|
<svg class="toolbar-icon toolbar-icon-play" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M8 5.14v13.72a1 1 0 0 0 1.53.85l10.03-6.86a1 1 0 0 0 0-1.7L9.53 4.29A1 1 0 0 0 8 5.14Z" fill="currentColor" />
|
|
</svg>
|
|
<svg class="toolbar-icon toolbar-icon-pause" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M7 5.5h3.5a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1Zm6.5 0H17a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3.5a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1Z" fill="currentColor" />
|
|
</svg>
|
|
<svg class="toolbar-icon toolbar-icon-home" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M12 4.25 4.75 10.2v8.05a.75.75 0 0 0 .75.75h4.25v-5.25h4.5V19H18.5a.75.75 0 0 0 .75-.75V10.2L12 4.25Z" fill="currentColor" />
|
|
</svg>
|
|
<span class="sr-only" id="primaryChronoLabel">Demarrer la partie</span>
|
|
</button>
|
|
|
|
<button
|
|
class="chrono-toolbar-button"
|
|
id="quickResetChronoButton"
|
|
type="button"
|
|
aria-label="Reinitialiser le match"
|
|
title="Reinitialiser le match"
|
|
>
|
|
<svg class="toolbar-icon" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
d="M12 4.5a7.5 7.5 0 1 1-6.38 3.56H3.75a.75.75 0 0 1 0-1.5h4a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0V9.48A6 6 0 1 0 12 6a.75.75 0 0 1 0-1.5Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Reinitialiser le match</span>
|
|
</button>
|
|
</header>
|
|
|
|
<section class="sr-only" aria-label="Informations du chrono">
|
|
<p class="eyebrow">Phase chrono</p>
|
|
<h1 id="chronoTitle">Partie 1</h1>
|
|
<p id="chronoSubtitle" class="phase-subtitle"></p>
|
|
<article>
|
|
<span>Temps partie</span>
|
|
<strong id="blockTimer">03:00</strong>
|
|
</article>
|
|
<article>
|
|
<span>Temps coup</span>
|
|
<strong id="moveTimer">00:20</strong>
|
|
</article>
|
|
<article>
|
|
<span id="chronoCenterLabel">Trait</span>
|
|
<strong id="chronoCenterValue">Blanc</strong>
|
|
</article>
|
|
<article>
|
|
<p class="micro-label" id="spineLabel">Etat de la partie</p>
|
|
<strong id="spineHeadline">Pret a demarrer</strong>
|
|
<p id="spineText"></p>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="faceoff-board chrono-board">
|
|
<article class="player-zone opponent-zone" id="blackZone">
|
|
<div class="zone-inner mirrored-mobile">
|
|
<div class="zone-head">
|
|
<div>
|
|
<span class="seat-tag dark-seat">Noir</span>
|
|
<h2 id="blackNameChrono">Noir</h2>
|
|
</div>
|
|
<div class="zone-stats">
|
|
<strong id="blackMovesChrono">0 / 6</strong>
|
|
<span id="blackClockChrono"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="zone-button dark-button" id="blackMoveButton" type="button">
|
|
<span class="zone-button-shell">
|
|
<span class="zone-button-meta" id="blackDisplayMeta">Temps partie</span>
|
|
<span class="zone-button-clock" id="blackDisplayClock">03:00</span>
|
|
<span class="zone-button-state" id="blackActionChrono">En attente</span>
|
|
<span class="zone-button-corner" id="blackQuotaChrono">0 / 6</span>
|
|
</span>
|
|
</button>
|
|
|
|
<p class="zone-foot" id="blackHintChrono"></p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="player-zone" id="whiteZone">
|
|
<div class="zone-inner">
|
|
<div class="zone-head">
|
|
<div>
|
|
<span class="seat-tag light-seat">Blanc</span>
|
|
<h2 id="whiteNameChrono">Blanc</h2>
|
|
</div>
|
|
<div class="zone-stats">
|
|
<strong id="whiteMovesChrono">0 / 6</strong>
|
|
<span id="whiteClockChrono"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="zone-button light-button" id="whiteMoveButton" type="button">
|
|
<span class="zone-button-shell">
|
|
<span class="zone-button-meta" id="whiteDisplayMeta">Temps coup</span>
|
|
<span class="zone-button-clock" id="whiteDisplayClock">00:20</span>
|
|
<span class="zone-button-state" id="whiteActionChrono">En attente</span>
|
|
<span class="zone-button-corner" id="whiteQuotaChrono">0 / 6</span>
|
|
</span>
|
|
</button>
|
|
|
|
<p class="zone-foot" id="whiteHintChrono"></p>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</main>
|
|
|
|
<section class="modal hidden" id="arbiterModal" aria-hidden="true">
|
|
<div class="modal-backdrop" data-close-modal="true"></div>
|
|
<div class="modal-card">
|
|
<div class="modal-head">
|
|
<div>
|
|
<p class="eyebrow">Outils arbitre</p>
|
|
<h2>Contrôles avancés</h2>
|
|
</div>
|
|
<button class="button ghost small" id="closeArbiterButton" type="button">Fermer</button>
|
|
</div>
|
|
|
|
<p class="section-copy" id="arbiterStatus"></p>
|
|
|
|
<div class="modal-actions">
|
|
<button class="button secondary" id="arbiterPauseButton" type="button">
|
|
Pause / reprise
|
|
</button>
|
|
<button class="button secondary" id="arbiterCloseBlockButton" type="button">
|
|
Passer au cube
|
|
</button>
|
|
<button class="button secondary" id="arbiterTimeoutButton" type="button">
|
|
Dépassement temps coup
|
|
</button>
|
|
<button class="button secondary" id="arbiterSwitchTurnButton" type="button">
|
|
Corriger le trait
|
|
</button>
|
|
<button class="button ghost" id="arbiterWhiteWinButton" type="button">
|
|
Blanc gagne
|
|
</button>
|
|
<button class="button ghost" id="arbiterBlackWinButton" type="button">
|
|
Noir gagne
|
|
</button>
|
|
<button class="button ghost danger" id="arbiterStopButton" type="button">
|
|
Abandon / arrêt
|
|
</button>
|
|
<button class="button ghost" id="arbiterResetButton" type="button">
|
|
Réinitialiser le match
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
</html>
|