sutom/public/index.html

122 lines
7.4 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SUTOM</title>
<script data-main="js/main" type="text/javascript" src="node_modules/requirejs/require.js"></script>
<link rel="stylesheet" href="jeu.css" type="text/css" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />
<link rel="me" href="https://mastodon.social/@JonathanMM" />
<link rel="me" href="https://twitter.com/Jonamaths" />
</head>
<body>
<div id="contenu">
<header>
<div class="header-icones">
<a href="#" id="configuration-regles-bouton">
<svg id="configuration-regles-icone">
<use href="#icone-regles" stroke="var(--couleur-icone)" fill="var(--couleur-icone)"></use>
</svg>
</a>
<a href="#" id="configuration-stats-bouton">
<svg id="configuration-stats-icone">
<use href="#icone-stats" stroke="var(--couleur-icone)"></use>
</svg>
</a>
</div>
<h1>SUTOM</h1>
<div class="header-icones">
<a href="#" id="configuration-audio-bouton">
<svg id="configuration-audio-icone">
<use href="#icone-son-active" fill="var(--couleur-icone)"></use>
</svg>
</a>
<a href="#" id="configuration-config-bouton">
<svg id="configuration-config-icone">
<use href="#icone-config" fill="var(--couleur-icone)"></use>
</svg>
</a>
</div>
</header>
<div id="notification-area"><div id="notification-label"></div></div>
<div id="panel-area">
<div id="panel-fenetre">
<div id="panel-fenetre-header">
<h2 id="panel-fenetre-titre">Règles</h2>
<div>
<a href="#" id="panel-fenetre-bouton-fermeture">
<svg id="panel-fenetre-bouton-fermeture-icone">
<use href="#icone-croix" stroke="var(--couleur-icone)"></use>
</svg>
</a>
</div>
</div>
<div id="panel-fenetre-notification-area"><div id="panel-fenetre-notification-label"></div></div>
<div id="panel-fenetre-contenu"></div>
</div>
</div>
<div id="grille" class="grille">Chargement de la grille en cours…</div>
<div id="input-area"></div>
<div style="display: none">
<audio preload src="sons/lettre-non-trouve.wav" id="son-lettre-non-trouve"></audio>
<audio preload src="sons/lettre-mal-place.wav" id="son-lettre-mal-place"></audio>
<audio preload src="sons/lettre-bien-place.wav" id="son-lettre-bien-place"></audio>
<svg>
<symbol id="icone-son-active" height="24" viewBox="0 96 960 960" width="24">
<path
d="M560 925v-82q90-26 145-100t55-168q0-94-55-168T560 307v-82q124 28 202 125.5T840 575q0 127-78 224.5T560 925ZM120 696V456h160l200-200v640L280 696H120Zm440 40V414q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560 736ZM400 450l-86 86H200v80h114l86 86V450ZM300 576Z"
/>
</symbol>
<symbol id="icone-son-desactive" height="24" viewBox="0 96 960 960" width="24">
<path
d="M792 1000 671 879q-25 16-53 27.5T560 925v-82q14-5 27.5-10t25.5-12L480 688v208L280 696H120V456h128L56 264l56-56 736 736-56 56Zm-8-232-58-58q17-31 25.5-65t8.5-70q0-94-55-168T560 307v-82q124 28 202 125.5T840 575q0 53-14.5 102T784 768ZM650 634l-90-90V414q47 22 73.5 66t26.5 96q0 15-2.5 29.5T650 634ZM480 464 376 360l104-104v208Zm-80 238v-94l-72-72H200v80h114l86 86Zm-36-130Z"
/>
</symbol>
<symbol id="icone-croix" height="40" viewBox="0 96 960 960" width="40">
<path
d="m251.333 851.333-46.666-46.666L433.334 576 204.667 347.333l46.666-46.666L480 529.334l228.667-228.667 46.666 46.666L526.666 576l228.667 228.667-46.666 46.666L480 622.666 251.333 851.333Z"
/>
</symbol>
<symbol id="icone-stats" height="24" viewBox="0 96 960 960" width="24">
<path d="M160 896V456h160v440H160Zm240 0V256h160v640H400Zm240 0V616h160v280H640Z" />
</symbol>
<symbol id="icone-regles" height="24" viewBox="0 96 960 960" width="24">
<path
d="M478 816q21 0 35.5-14.5T528 766q0-21-14.5-35.5T478 716q-21 0-35.5 14.5T428 766q0 21 14.5 35.5T478 816Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342 438l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506 530q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197 859q-54-54-85.5-127T80 576q0-83 31.5-156T197 293q54-54 127-85.5T480 176q83 0 156 31.5T763 293q54 54 85.5 127T880 576q0 83-31.5 156T763 859q-54 54-127 85.5T480 976Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
/>
</symbol>
<symbol id="icone-config" height="24" viewBox="0 96 960 960" width="24">
<path
d="m370 976-16-128q-13-5-24.5-12T307 821l-119 50L78 681l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78 471l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12l-16 128H370Zm112-260q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342 576q0 58 40.5 99t99.5 41Zm0-80q-25 0-42.5-17.5T422 576q0-25 17.5-42.5T482 516q25 0 42.5 17.5T542 576q0 25-17.5 42.5T482 636Zm-2-60Zm-40 320h79l14-106q31-8 57.5-23.5T639 729l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533 362l-13-106h-79l-14 106q-31 8-57.5 23.5T321 423l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427 790l13 106Z"
/>
</symbol>
<symbol id="icone-copie" height="20" viewBox="0 96 960 960" width="20">
<path
d="M216 960q-29.7 0-50.85-21.15Q144 917.7 144 888V336h72v552h456v72H216Zm144-144q-29.7 0-50.85-21.15Q288 773.7 288 744V264q0-29.7 21.15-50.85Q330.3 192 360 192h384q29.7 0 50.85 21.15Q816 234.3 816 264v480q0 29.7-21.15 50.85Q773.7 816 744 816H360Zm0-72h384V264H360v480Zm0 0V264v480Z"
/>
</symbol>
<symbol id="icone-restaure" height="20" viewBox="0 96 960 960" width="20">
<path
d="M479.788 648Q450 648 429 626.788q-21-21.213-21-51Q408 546 429.212 525q21.213-21 51-21Q510 504 531 525.212q21 21.213 21 51Q552 606 530.788 627q-21.213 21-51 21ZM480 912q-140 0-238.5-98T144 576h72q2 110 78.5 187T480 840q110.314 0 187.157-76.778Q744 686.443 744 576.222 744 466 667.157 389 590.314 312 480 312q-59 0-111.5 25.5T277 408h107v72H144V240h72v130q47.909-62.09 116.955-96.045Q402 240 480 240q70 0 131.133 26.6 61.134 26.6 106.4 71.867 45.267 45.266 71.867 106.4Q816 506 816 576t-26.6 131.133q-26.6 61.134-71.867 106.4-45.266 45.267-106.4 71.867Q550 912 480 912Z"
/>
</symbol>
</svg>
</div>
</div>
<script type="text/javascript">
requirejs.config({
waitSeconds: 20,
});
requirejs(["main"], function (Main) {
var socket = new Main.default();
});
</script>
</body>
</html>