152 lines
7.2 KiB
HTML
152 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="js/scene.js"></script>
|
|
<script src="cordova.js"></script>
|
|
<link rel="manifest" href="manifest.json">
|
|
<meta name="theme-color" content="#000000">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/menu-scene.css">
|
|
<link rel="stylesheet" href="css/clock-scene.css">
|
|
<link rel="stylesheet" href="css/cube-scene.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Cinzel:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div id="sceneMenu" class="scene scene-menu">
|
|
<div class="menu-shell">
|
|
<section class="menu-hero">
|
|
<p class="menu-kicker">ChessCubing</p>
|
|
<h1 class="menu-title">Configure your match</h1>
|
|
<p class="menu-subtitle">Set the clock, choose the block mode, then launch the game from the same scene system.</p>
|
|
<div class="menu-actions">
|
|
<button id="StartGameButton" class="menu-primary-button" type="button">Start Game</button>
|
|
<a class="menu-link-button" href="https://www.chesscubing.fr/" target="_blank" rel="noopener noreferrer">chesscubing.fr</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="menu-settings-card">
|
|
<div class="menu-settings-head">
|
|
<h2 class="menu-section-title">Settings</h2>
|
|
</div>
|
|
|
|
<div class="menu-settings-grid">
|
|
<label class="menu-field">
|
|
<span class="menu-label">Start Time</span>
|
|
<input id="MenuStartTime" class="menu-input" type="number" min="0" step="1">
|
|
<span class="menu-help">Minutes for both white and black</span>
|
|
</label>
|
|
|
|
<label class="menu-field">
|
|
<span class="menu-label">Start Move Left</span>
|
|
<input id="MenuStartMoveLeft" class="menu-input" type="number" min="0" step="1">
|
|
<span class="menu-help">Moves before cube phase</span>
|
|
</label>
|
|
|
|
<label class="menu-field">
|
|
<span class="menu-label">Block Time</span>
|
|
<input id="MenuBlockTime" class="menu-input" type="number" min="0" step="1">
|
|
<span class="menu-help">Minutes</span>
|
|
</label>
|
|
|
|
<label class="menu-field">
|
|
<span class="menu-label">Max Increment</span>
|
|
<input id="MenuMaxIncrement" class="menu-input" type="number" min="0" step="1">
|
|
<span class="menu-help">Seconds</span>
|
|
</label>
|
|
|
|
<label class="menu-field menu-field-toggle">
|
|
<span class="menu-label">Game Start With Block</span>
|
|
<select id="MenuLastBlock" class="menu-input menu-select">
|
|
<option value="true">Block +</option>
|
|
<option value="false">Block -</option>
|
|
</select>
|
|
<span class="menu-help">Choose the block mode used when the game begins</span>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sceneClock" class="scene scene-clock">
|
|
<div class="clock-shell">
|
|
<div class="clock-topbar">
|
|
<h1 id="BlockTime" class="TextClock clock-status">Temps restant Block : 3:00</h1>
|
|
<h1 id="BlockType" class="TextClock clock-mode">Block -</h1>
|
|
<button id="StartClockButton" class="clock-start-button is-hidden" type="button">Start</button>
|
|
</div>
|
|
|
|
<div class="clock-board">
|
|
<section class="player-zone player-zone-white">
|
|
<div class="player-badge">BLANC</div>
|
|
<div class="clock-panel clock-panel-white">
|
|
<div class="button" id="white_button" aria-label="White clock button"></div>
|
|
<div class="panel-light"></div>
|
|
<h1 id="TimeWhite" class="TextClock clock-time">10:00</h1>
|
|
<h1 id="MoveLeftWhite" class="TextClock clock-moves">Coup restant Blanc : 8</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="clock-divider"></div>
|
|
|
|
<section class="player-zone player-zone-black">
|
|
<div class="player-badge player-badge-dark">NOIR</div>
|
|
<div class="clock-panel clock-panel-black">
|
|
<div class="button" id="black_button" aria-label="Black clock button"></div>
|
|
<div class="panel-light"></div>
|
|
<h1 id="TimeBlack" class="TextClock clock-time">10:00</h1>
|
|
<h1 id="MoveLeftBlack" class="TextClock clock-moves">Coup restant Noir : 8</h1>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scene scene-cube" id="sceneCube">
|
|
<div class="cube-shell">
|
|
<div class="cube-topbar">
|
|
<h1 class="TimerText cube-title">Phase Cube</h1>
|
|
<h1 class="TimerText" id="BlockTypeTimer">Block -</h1>
|
|
<p class="cube-subtitle">Maintiens 2 secondes pour lancer le timer, puis touche de nouveau quand le cube est termine.</p>
|
|
</div>
|
|
|
|
<div class="cube-board">
|
|
<section class="cube-lane cube-lane-white">
|
|
<div class="cube-badge">BLANC</div>
|
|
<div class="TimerCube cube-pad" id="TimerWhite">
|
|
<div class="cube-grid"></div>
|
|
<h1 class="TimerText" id="TextWhite">Temps au cube Blanc : 0:00</h1>
|
|
<p class="cube-hint">Appui long pour demarrer</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="cube-divider"></div>
|
|
|
|
<section class="cube-lane cube-lane-black">
|
|
<div class="cube-badge cube-badge-dark">NOIR</div>
|
|
<div class="TimerCube cube-pad cube-pad-dark" id="TimerBlack">
|
|
<div class="cube-grid"></div>
|
|
<h1 class="TimerText" id="TextBlack">Temps au cube Noir : 0:00</h1>
|
|
<p class="cube-hint">Touchez quand le cube est fini</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scene" id="MainMenu"></div>
|
|
<script src="js/ClockFrontEnd.js"></script>
|
|
<script src="js/TimerFrontEnd.js"></script>
|
|
<script src="js/backend.js"></script>
|
|
<script src="js/MenuFrontEnd.js"></script>
|
|
<script src="js/appload.js"></script>
|
|
</body>
|
|
</html>
|