90 lines
4.2 KiB
HTML
90 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr-FR">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="light dark" />
|
|
<title>LOTUS 🪷</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"/>
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="icones/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="icones/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="icones/favicon-16x16.png">
|
|
<link rel="manifest" href="icones/site.webmanifest">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<dialog id="optionsDialog" open>
|
|
<article>
|
|
<header>
|
|
<h2>L<img src="icones/lotus.svg" alt="🪷">TUS</h2>
|
|
</header>
|
|
<form id="optionsForm" action="#" method="dialog">
|
|
<fieldset>
|
|
<label class="option">
|
|
Trouvez des mot de
|
|
<input type="number" id="nbLettresInput" min="6" max="10" value="8" size="2" step="1" required/>
|
|
lettres.
|
|
</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label class="option">
|
|
<input class="lettre mal-placee" disabled>
|
|
indique une lettre se trouvant ailleurs dans le mot et
|
|
</label>
|
|
<label class="option">
|
|
<input class="lettre bien-placee" disabled>
|
|
une lettre bien placée.
|
|
</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label for="volumeCheckbox" style="align-items: end;" class="option">
|
|
<input id="volumeCheckbox" type="checkbox" role="switch" checked/>
|
|
Effets sonores
|
|
</label>
|
|
</fieldset>
|
|
</form>
|
|
<footer>
|
|
<button id="confirmOptionsButton" type="submit" form="optionsForm" disabled>
|
|
<span aria-busy="true"></span> Chargement...
|
|
</button>
|
|
</footer>
|
|
</article>
|
|
</dialog>
|
|
|
|
<header class="container">
|
|
<nav>
|
|
<ul>
|
|
<li style="position: fixed;">
|
|
<button id="optionsButton" class="outline secondary" title="Options">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-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 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 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-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-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-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<ul>
|
|
<li><h1>L<img src="icones/lotus.svg" alt="🪷">TUS</h1></li>
|
|
</ul>
|
|
<ul></ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<div id="grille"></div>
|
|
</main>
|
|
|
|
<div style="display: none">
|
|
<audio preload src="sons/lettre-non-trouve.wav" id="sonLettreNonTrouvee"></audio>
|
|
<audio preload src="sons/lettre-mal-place.wav" id="sonLettreMalPlacee"></audio>
|
|
<audio preload src="sons/lettre-bien-place.wav" id="sonLettreBienPlacee"></audio>
|
|
<audio preload src="sons/mot-trouve.mp3" id="sonMotTrouve"></audio>
|
|
<audio preload src="sons/perdu.mp3" id="sonPerdu"></audio>
|
|
</div>
|
|
|
|
<script src="motsATrouver.js" charset="UTF-8"></script>
|
|
<script src="motsAutorises.js" charset="UTF-8"></script>
|
|
<script src="script.js" charset="UTF-8"></script>
|
|
<script>navigator?.serviceWorker.register('service-worker.js')</script>
|
|
</body>
|
|
</html> |