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.
403 lines
21 KiB
403 lines
21 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
|
|
<link href="css/style.css" rel="stylesheet">
|
|
<title>Make It True | Menu</title>
|
|
</head>
|
|
|
|
<body id="body" class="background">
|
|
<!--Play Page-->
|
|
<div id="playPage">
|
|
<div id="success" class="modal">
|
|
<div class="modal-content info-content">
|
|
<div class="modal-body border background success_modal_body" align=center>
|
|
<span class="close" onclick="closeModal('success');nextLevel();">×</span>
|
|
<h1 class="txt dys" id="successTitle"></h1>
|
|
<hr id="hr">
|
|
<p class="dys"><a class="txt" id="successInfo"></a><a id="click_number"></a><a> click(s)</a></p>
|
|
<div id="show_stage" class="border"></div><br>
|
|
<button class="border dys background color" id="button_next_level" onmouseover="hoverButton()"
|
|
onclick="closeModal('success');nextLevel();">Niveau suivant</button><br><br>
|
|
<p class="dys info_check" align=right>Toujours afficher ce panneau <input type="checkbox"
|
|
id="success_check_input" onclick="successCheck();" checked></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="firstTimeet" class="modal">
|
|
<div class="modal-content info-content">
|
|
<div class="modal-body border background" align=center>
|
|
<span class="close" onclick="closeModal('firstTimeet');timer.start()">×</span>
|
|
<h1 class="txt dys" id="infoFirstTimeEt"></h1>
|
|
<hr id="hr">
|
|
<p class="dys txt margin-global" id="infoFirstTimeEtInfo1"></p>
|
|
<table class="veriteTable dys">
|
|
<tr>
|
|
<th class="border">a</th>
|
|
<th class="border">b</td>
|
|
<th class="border">S</th>
|
|
</tr>
|
|
<tr>
|
|
<td class="border">0</td>
|
|
<td class="border">0</td>
|
|
<td class="border">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border">0</td>
|
|
<td class="border">1</td>
|
|
<td class="border">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border">1</td>
|
|
<td class="border">0</td>
|
|
<td class="border">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border">1</td>
|
|
<td class="border">1</td>
|
|
<td class="border">1</td>
|
|
</tr>
|
|
</table>
|
|
<br><br>
|
|
<p><img src="img/and_test.png" class="margin-right"><img src="img/and_test.png"></p>
|
|
<br><br>
|
|
<p class="dys info_check" align=right>Ne plus afficher les aides <input type="checkbox"
|
|
id="info_check_input" onclick="showInfo();"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="firstTimeou" class="modal">
|
|
<div class="modal-content info-content">
|
|
<div class="modal-body border background" align=center>
|
|
<span class="close" onclick="closeModal('firstTimeou');timer.start()">×</span>
|
|
<h1 class="txt dys" id="infoFirstTimeOu"></h1>
|
|
<hr id="hr">
|
|
<p class="dys txt margin-global" id="infoFirstTimeOuInfo1"></p>
|
|
<table class="veriteTable dys">
|
|
<tr>
|
|
<th class="border">a</th>
|
|
<th class="border">b</td>
|
|
<th class="border">S</th>
|
|
</tr>
|
|
<tr>
|
|
<td class="border">0</td>
|
|
<td class="border">0</td>
|
|
<td class="border">0</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border">0</td>
|
|
<td class="border">1</td>
|
|
<td class="border">1</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border">1</td>
|
|
<td class="border">0</td>
|
|
<td class="border">1</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border">1</td>
|
|
<td class="border">1</td>
|
|
<td class="border">1</td>
|
|
</tr>
|
|
</table>
|
|
<br><br>
|
|
<p><img src="img/or_test.png" class="margin-right"><img src="img/or_test.png"></p>
|
|
<br><br>
|
|
<p class="dys info_check" align=right>Ne plus afficher les aides <input type="checkbox"
|
|
id="info_check_input" onclick="showInfo();"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="firstTimeinv" class="modal">
|
|
<div class="modal-content info-content">
|
|
<div class="modal-body border background" align=center>
|
|
<span class="close" onclick="closeModal('firstTimeinv');timer.start()">×</span>
|
|
<h1 class="txt dys" id="infoFirstTimeinv"></h1>
|
|
<hr id="hr">
|
|
<p class="dys txt margin-global" id="infoFirstTimeinvInfo1"></p>
|
|
<table class="veriteTable dys">
|
|
<tr>
|
|
<th class="border">a</th>
|
|
<th class="border">S</th>
|
|
</tr>
|
|
<tr>
|
|
<td class="border">0</td>
|
|
<td class="border">1</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border">1</td>
|
|
<td class="border">0</td>
|
|
</tr>
|
|
</table>
|
|
<br><br>
|
|
<p><img src="img/not_test.png" class="margin-right"><img src="img/not_test.png"></p>
|
|
<br><br>
|
|
<p class="dys info_check" align=right><a class="txt" id="close_helps"></a><input type="checkbox"
|
|
id="info_check_input" onclick="showInfo();"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu border">
|
|
<div align=center>
|
|
|
|
<a onclick="closeGame();"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
|
|
<div class="timer_show dys border"><span class="timer_txt"></span></div>
|
|
<p id="modeDeJeu" class="txt dys"></p>
|
|
<p><a id="niveau" class="txt dys"></a><a class="dys niveau"></a></p>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div id="play_container" class="border">
|
|
|
|
</div>
|
|
</div>
|
|
<!--Main Page-->
|
|
<div id="mainPage">
|
|
<div id="menu">
|
|
<p id="titleGame" class="title dys">M<a class="secret" onclick="flip()">a</a>ke It True</p>
|
|
</div>
|
|
<div class="btn_play" id="menu-selection">
|
|
<ul>
|
|
<li>
|
|
<div class="message">
|
|
<a class="txt dys" id="playSelection"></a>
|
|
<select id="jeu-select" class="background">
|
|
<option value="aleatoire" class="txt background dys" id="mode1"></option>
|
|
<option value="perso" class="txt background dys" id="mode2"></option>
|
|
</select>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<a onclick="play();"><i class="far fa-play-circle"></i></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a onclick="openModal('myModal')"><i class="fa fa-cog" id="setting" aria-hidden="true"></i></a>
|
|
<a onclick="openModal('scoreModal')"><i class="fa fa-trophy" id="setting" aria-hidden="true"></i></a>
|
|
<a onclick="document.location.href='https://gitlab.iut-clermont.uca.fr/'; "><i class="fa fa-users" id="setting"
|
|
aria-hidden="true"></i></a>
|
|
<a onclick="openModal('infoModal')"><i class="fa fa-info" id="setting" aria-hidden="true"></i></a>
|
|
<div id="myModal" class="modal">
|
|
<div class="modal-content">
|
|
|
|
<div id="setting_int" class="modal-body border background" align=center>
|
|
<span class="close" onclick="closeModal('myModal')">×</span>
|
|
<h1 class="txt dys" id="settingTitle">Parametres</h1>
|
|
<hr id="hr">
|
|
<br>
|
|
<p>
|
|
<a class="txt dys" id="themeDark">Theme dark</a>
|
|
<input id="darkcheck" type="checkbox" onclick="darkMode()" checked></p>
|
|
<p>
|
|
<a class="txt dys" id="dysfont">DYSLEXIE</a>
|
|
<input id="dyscheckbox" type="checkbox" onclick="dysFont()" checked></p>
|
|
<br>
|
|
<br><img onclick="setLang('fr')" class="img_france" src="img/france.png" />
|
|
<img onclick="setLang('en')" class="img_usa" src="img/usa.png" /><br><br><br>
|
|
<button class="dys txt" id="cache_reinit" onclick="resetCache();"></button><br>
|
|
<hr id="hr">
|
|
<p id="setting_title_perso" class="txt dys"></p>
|
|
<div class="input_line">
|
|
<div class="colomn_line_input">
|
|
<a class="txt dys" id="active_switch_setting"></a>
|
|
<div class="input-color-container">
|
|
<input type="color" id="active_switch_picker" name="head" value="#008000" />
|
|
</div>
|
|
</div>
|
|
<div class="colomn_line_input">
|
|
<a class="txt dys" id="inactive_switch_setting"></a>
|
|
<div class="input-color-container">
|
|
<input type="color" id="inactive_switch_picker" name="head" value="#FF0000">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="input_line">
|
|
<div class="colomn_line_input">
|
|
<a class="txt dys" id="active_line_setting"></a>
|
|
<div class="input-color-container">
|
|
<input type="color" id="active_line_picker" name="head" value="#4CFEFE">
|
|
</div>
|
|
</div>
|
|
<div class="colomn_line_input">
|
|
<a class="txt dys" id="inactive_line_setting"></a>
|
|
<div class="input-color-container">
|
|
<input type="color" id="inactive_line_picker" name="head" value="#000000">
|
|
</div>
|
|
</div>
|
|
<div class="colomn_line_input">
|
|
<a class="txt dys" id="inactive_end_setting"></a>
|
|
<div class="input-color-container">
|
|
<input type="color" id="inactive_end_picker" name="head" value="#9a9a9a">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr id="hr">
|
|
<div class="setting_play" id="setting_container">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="reset_cache" class="modal">
|
|
<div class="modal-content info-content">
|
|
<div class="modal-body border background" align=center>
|
|
<span class="close" onclick="closeModal('reset_cache');">×</span>
|
|
<h1 class="txt dys" id="reset"></h1>
|
|
<hr id="hr">
|
|
<p class="dys txt margin-global" id="reset_cache_message"></p>
|
|
<br><br>
|
|
<br><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="scoreModal" class="modal">
|
|
<div class="modal-content score-content">
|
|
<div class="modal-body border background">
|
|
<span class="close" onclick="closeModal('scoreModal')">×</span>
|
|
<h1 align=center class="txt dys" id="scoreTitle">Tableau des scores</h1>
|
|
<hr id="hr">
|
|
<div class="scoreOne border" align=center>
|
|
<p class="dys txt" id="mode1">Aleatoire</p>
|
|
<hr id="hr">
|
|
<p class="dys">Pseudo | Score</p>
|
|
<p class="dys">Pseudo | Score</p>
|
|
<p class="dys">Pseudo | Score</p>
|
|
<p class="dys">Pseudo | Score</p>
|
|
</div>
|
|
<div class="scoreTwo border" align=center>
|
|
<p class="dys txt" id="mode2">Cameleon</p>
|
|
<hr id="hr">
|
|
<p class="dys">Pseudo | Score</p>
|
|
<p class="dys">Pseudo | Score</p>
|
|
<p class="dys">Pseudo | Score</p>
|
|
<p class="dys">Pseudo | Score</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="gameOver" class="modal">
|
|
<div class="modal-content score-content">
|
|
<div class="modal-body border background">
|
|
<span class="close" onclick="closeModal('gameOver')">×</span>
|
|
<h1 align=center class="txt dys" id="gameOverTitle">Game Over</h1>
|
|
<hr id="hr">
|
|
<br><br>
|
|
<div align=center>
|
|
<p><a class="dys">Vous avez fait un score total de </a><a class="dys"
|
|
id="scoreTotGameOver">140</a></p>
|
|
<p class="dys"><a class="dys">Vous avez fait un temps total de </a><a class="dys"
|
|
id="TempsTotGameOver">40</a> s</p>
|
|
<p><a class="dys">Niveau max : </a><a class="dys" id="niveauGameOver"></a></p>
|
|
<hr id="hr">
|
|
<p class="dys">Entrez votre pseudo : <input type="text" class="border background color"><button
|
|
class="border background">Valider</button></p>
|
|
<br>
|
|
<hr id="hr">
|
|
<br>
|
|
<p><i class="fa fa-star" id="star1" aria-hidden="true"></i>
|
|
<i class="fa fa-star" id="star2" aria-hidden="true"></i>
|
|
<i class="fa fa-star" id="star3" aria-hidden="true"></i>
|
|
<i class="fa fa-star" id="star4" aria-hidden="true"></i>
|
|
<i class="fa fa-star" id="star5" aria-hidden="true"></i></p>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="infoModal" class="modal">
|
|
<div class="modal-content info-content">
|
|
<div class="modal-body border background" align=center>
|
|
<span class="close" onclick="closeModal('infoModal')">×</span>
|
|
<h1 class="txt dys" id="infoTitle">Tableau des scores</h1>
|
|
<hr id="hr">
|
|
<p class="dys">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada lectus.
|
|
Morbi
|
|
imperdiet fringilla maximus. Integer ac aliquet ex. Quisque vestibulum elit ac velit feugiat
|
|
facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis eleifend
|
|
porta.
|
|
Sed in risus hendrerit, tincidunt ante id, cursus tellus. Mauris et nisl neque. Fusce id dictum
|
|
sapien.
|
|
|
|
Vivamus ornare porta egestas. Cras id sem et turpis imperdiet mollis nec in turpis. Cras semper
|
|
urna
|
|
sit amet neque pharetra vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et
|
|
ultrices
|
|
posuere cubilia curae; In congue lorem at tellus ornare malesuada. Sed vel volutpat tortor.
|
|
Aenean
|
|
imperdiet hendrerit arcu, vel faucibus mauris porttitor quis.
|
|
|
|
Suspendisse potenti. Suspendisse tincidunt arcu nec nisi vulputate, a tempus est sagittis. Donec
|
|
laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis lacinia.
|
|
Sed
|
|
sed nibh iaculis, pulvinar risus sed, fermentum justo. Aenean id libero maximus risus ornare
|
|
elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra sapien a
|
|
augue
|
|
aliquam consectetur. Morbi dictum lobortis elit, a faucibus ligula ultricies ac. Nullam suscipit
|
|
at
|
|
risus ut fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus ex nec
|
|
finibus semper. Pellentesque quam magna, gravida sed semper bibendum, gravida nec augue.
|
|
Interdum et
|
|
malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet ex ut sapien facilisis auctor.
|
|
|
|
Vivamus vestibulum fermentum odio vel viverra. Donec nec nisi ex. Curabitur tempor venenatis
|
|
porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus. Maecenas et
|
|
leo
|
|
ultricies, sodales sapien ac, venenatis risus. Vestibulum elementum, felis ac malesuada
|
|
tincidunt,
|
|
sem arcu suscipit mi, quis malesuada mauris nibh in diam. Mauris erat diam, bibendum sed viverra
|
|
vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra leo.
|
|
Aenean
|
|
quis odio in elit dictum faucibus. Vivamus tristique, lectus at pretium lobortis, neque odio
|
|
efficitur leo, aliquam rutrum nunc massa in diam. Sed mattis, tellus convallis ultricies
|
|
lobortis,
|
|
odio justo maximus nisi, at efficitur dui nulla at eros. Mauris eleifend felis non est molestie
|
|
sollicitudin.
|
|
|
|
Vivamus neque felis, interdum eu egestas eget, imperdiet vel orci. Etiam finibus venenatis
|
|
tortor,
|
|
vitae feugiat dolor malesuada eget. Nulla erat sem, venenatis ac tincidunt eget, condimentum et
|
|
est.
|
|
Nam a pharetra ligula. Nullam quis convallis turpis. Duis quis nibh ut mi commodo euismod. Ut
|
|
iaculis vestibulum elit vitae scelerisque. Sed sollicitudin, leo id cursus placerat, erat ipsum
|
|
varius dolor, non egestas erat nibh sed nisl. Vestibulum sit amet purus sed nulla mattis
|
|
malesuada
|
|
eget vitae ligula. Vivamus iaculis, felis vel dapibus lacinia, nisl felis tincidunt sem, vel
|
|
finibus
|
|
mauris elit maximus lorem. Donec non viverra leo. Vestibulum iaculis ipsum et mi aliquam
|
|
aliquam.
|
|
Vivamus maximus justo eu fermentum hendrerit.</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</body>
|
|
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
|
|
<script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
|
|
<script src="js/const.js"></script>
|
|
<script src="js/lang.js"></script>
|
|
<script src="js/func.js"></script>
|
|
<script src="js/class.js"></script>
|
|
<script src="js/createElement.js"></script>
|
|
<script src="js/easytimer.min.js"></script>
|
|
<script src="js/logique.js"></script>
|
|
<script src="js/init.js"></script>
|
|
<script src="js/main.js"></script>
|
|
<script src="js/creator.js"></script>
|
|
<script src="js/timer.js"></script>
|
|
<script src="js/db.js"></script>
|
|
|
|
<script>
|
|
initAll();
|
|
</script>
|
|
|
|
|
|
</html> |