You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
4.1 KiB
105 lines
4.1 KiB
<html>
|
|
<head>
|
|
<title>On The Dot</title>
|
|
<link rel="stylesheet" type="text/css" href="index.css"/>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css"/> <!-- 'monolith' theme -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="modeSelection">
|
|
<ul id="diff" class="all-container">
|
|
<img id="btn_easy" class="button" src="./ress/button_diff_easy.png"/>
|
|
<img id="btn_med" class="button" src="./ress/button_diff_normal.png"/>
|
|
<img id="btn_hard" class="button" src="./ress/button_diff_hard.png"/>
|
|
</ul>
|
|
<ul id="modes" class="all-container">
|
|
<img id="btn_points" class="button" src="./ress/button_mode_points.png"/>
|
|
<img id="btn_temps" class="button" src="./ress/button_mode_temps.png"/>
|
|
<img id="btn_survie" class="button" src="./ress/button_mode_survie.png"/>
|
|
</ul>
|
|
<ul id="points" class="all-container">
|
|
<img id="5p" class="button" src="./ress/button_points_5.png"/>
|
|
<img id="10p" class="button" src="./ress/button_points_10.png"/>
|
|
<img id="15p" class="button" src="./ress/button_points_15.png"/>
|
|
<img id="20p" class="button" src="./ress/button_points_20.png"/>
|
|
</ul>
|
|
<ul id="temps" class="all-container">
|
|
<img id="5m" class="button" src="./ress/button_temps_5.png"/>
|
|
<img id="10m" class="button" src="./ress/button_temps_10.png"/>
|
|
</ul>
|
|
<ul id="survie" class="all-container">
|
|
<img id="15s" class="button" src="./ress/button_survie_15.png"/>
|
|
<img id="30s" class="button" src="./ress/button_survie_30.png"/>
|
|
<img id="45s" class="button" src="./ress/button_survie_45.png"/>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
Pseudo :
|
|
<input type="text" id="field_pseudo" />
|
|
<ul>
|
|
<img id="btn_play" src="ress/button_play.png" onClick="play()"/>
|
|
<img id="btn_play_des" src="ress/button_play_desac.png"/>
|
|
<img id="btn_high" src="ress/button_highscores.png" onClick="goHigh()"/>
|
|
</ul>
|
|
|
|
|
|
<img id="btn_options" src="./ress/gear.png"/>
|
|
|
|
<!-- The Modal -->
|
|
<div id="optionsModal" class="modal">
|
|
|
|
<!-- Modal content -->
|
|
<div class="modal-content">
|
|
<span class="close">×</span>
|
|
<p>Options :</p>
|
|
<div class="slidecontainer">
|
|
<p>Changer le nombre de points</p>
|
|
<input type="range" min="2" max="8" class="slider" id="range_dots">
|
|
<p>Nombre de points : <span id="dotsNumber"></span></p>
|
|
<p>
|
|
Mode d'affichage :
|
|
</p>
|
|
<select name="displays" id="displays">
|
|
<option id="points_disp" value="points">Seulement des points</option>
|
|
<option id="gems_disp" value="gems">Seulement des gemmes</option>
|
|
<option id="both_disp" value="both">Les deux</option>
|
|
</select>
|
|
<span id="dot" tag="points" class="dot"></span>
|
|
<img id="gem" tag="gems" src="ress/green.png"/>
|
|
<span id="both" tag="both" class="dot both"></span>
|
|
|
|
<p>
|
|
Mettre le jeu en pause après avoir gagné un point
|
|
</p>
|
|
<input type="radio" id="yes_pause" value="1" name="pause">
|
|
<label for="no_pause">Oui</label>
|
|
<input type="radio" id="no_pause" value="0" name="pause">
|
|
<label for="no_pause">Non</label>
|
|
|
|
<div> Choisir les couleurs des points (ne fonctionne pas en mode "gemmes" ou "les deux")<br/>
|
|
<div id="color_pickers" class="color-pickers">
|
|
<span id="col1" class="dot col1"></span>
|
|
<span id="col2" class="dot col2"></span>
|
|
<span id="col3" class="dot col3"></span>
|
|
<span id="col4" class="dot col4"></span>
|
|
<span id="col5" class="dot col5"></span>
|
|
<span id="col6" class="dot col6"></span>
|
|
<span id="col7" class="dot col7"></span>
|
|
<span id="col8" class="dot col8"></span>
|
|
</div>
|
|
|
|
<p>
|
|
<button id="btn_options" onClick="saveOptions()">Valider</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script src="bakery.js"></script>
|
|
<script src="button_displayer.js"></script>
|
|
<script src="options.js"></script>
|
|
</body>
|
|
</html>
|