Refond le chrono en style pendule
This commit is contained in:
107
chrono.html
107
chrono.html
@@ -22,37 +22,84 @@
|
||||
</head>
|
||||
<body data-page="chrono" class="phase-body">
|
||||
<main class="phase-shell">
|
||||
<header class="phase-header">
|
||||
<a class="brand-link brand-link-logo" href="application.html" aria-label="Retour à l'application">
|
||||
<img class="brand-link-icon" src="logo.png" alt="Icône ChessCubing" />
|
||||
<img class="brand-link-mark" src="transparent.png" alt="Logo ChessCubing" />
|
||||
</a>
|
||||
<div class="phase-title">
|
||||
<p class="eyebrow">Phase chrono</p>
|
||||
<h1 id="chronoTitle">Partie 1</h1>
|
||||
<p id="chronoSubtitle" class="phase-subtitle"></p>
|
||||
</div>
|
||||
<button class="button ghost small utility-button" id="openArbiterButton" type="button">
|
||||
Arbitre
|
||||
<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="status-strip">
|
||||
<article class="status-card">
|
||||
<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 class="status-card">
|
||||
<article>
|
||||
<span>Temps coup</span>
|
||||
<strong id="moveTimer">00:20</strong>
|
||||
</article>
|
||||
<article class="status-card wide">
|
||||
<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">
|
||||
<section class="faceoff-board chrono-board">
|
||||
<article class="player-zone opponent-zone" id="blackZone">
|
||||
<div class="zone-inner mirrored-mobile">
|
||||
<div class="zone-head">
|
||||
@@ -67,25 +114,18 @@
|
||||
</div>
|
||||
|
||||
<button class="zone-button dark-button" id="blackMoveButton" type="button">
|
||||
En attente
|
||||
<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="phase-spine">
|
||||
<div class="spine-card">
|
||||
<p class="micro-label" id="spineLabel">État de la partie</p>
|
||||
<strong id="spineHeadline">Prêt à démarrer</strong>
|
||||
<p id="spineText"></p>
|
||||
</div>
|
||||
|
||||
<button class="button primary spine-button" id="primaryChronoButton" type="button">
|
||||
Démarrer la partie
|
||||
</button>
|
||||
</article>
|
||||
|
||||
<article class="player-zone" id="whiteZone">
|
||||
<div class="zone-inner">
|
||||
<div class="zone-head">
|
||||
@@ -100,7 +140,12 @@
|
||||
</div>
|
||||
|
||||
<button class="zone-button light-button" id="whiteMoveButton" type="button">
|
||||
En attente
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user