ré-alignement des éléments de l'accueil + highscores

master
adplantade 5 years ago
parent e88ab47283
commit e98534cd42

@ -124,4 +124,15 @@ margin-right: auto;
.slot { .slot {
display: inline-block; display: inline-block;
}
.texte {
font-size: medium;
font-family: 'Segoe print';
}
.texteG {
font-size: xx-large;
font-weight: bold;
font-family: 'Segoe print';
} }

@ -69,14 +69,14 @@
<ul> <ul>
<div class="slot"> <div class="slot">
<p>Mode pause activé : </p> <p class="texte">Mode pause activé : </p>
<input type="radio" id="pause1" value="1" name="pause"> <input type="radio" id="pause1" value="1" name="pause">
<label for="pause1">Oui</label> <label for="pause1" class="texte">Oui</label>
<input type="radio" id="pause0" value="0" name="pause"> <input type="radio" id="pause0" value="0" name="pause">
<label for="pause0">Non</label> <label for="pause0" class="texte">Non</label>
</div> </div>
<div class="slot"> <div class="slot">
<p>Changer le nombre de points</p> <p class="texte">Changer le nombre de points</p>
<img src="ress/-" onClick="less()" id="-"/> <img src="ress/-" onClick="less()" id="-"/>
<span id="dotsNumber" class="texte"></span> <span id="dotsNumber" class="texte"></span>
<img src="ress/+" onClick="more()" id="+"/> <img src="ress/+" onClick="more()" id="+"/>
@ -89,11 +89,13 @@
</div> </div>
</form> </form>
<div> <div class="mode-container">
Pseudo : <br/> <div class="texte">
<input type="text" id="field_pseudo" /><br/> Pseudo :
<img id="btn_play" src="ress/button_play.png" onClick="play()"/> <input type="text" id="field_pseudo" /><br/>
<img id="btn_play_des" src="ress/button_play_desac.png"/> <img id="btn_play" src="ress/button_play.png" onClick="play()"/>
<img id="btn_play_des" src="ress/button_play_desac.png"/>
</div>
</div> </div>
<img id="btn_back" src="ress/button_back.png" class="back" onClick="index()"/> <img id="btn_back" src="ress/button_back.png" class="back" onClick="index()"/>
<script src="bakery.js"></script> <script src="bakery.js"></script>
@ -131,7 +133,7 @@
} }
echo "<h1 id='aya'>".$phrase."</h1>"; echo "<h1 id='aya' class='texte' >".$phrase."</h1>";
} }
?> ?>
<script src="bakery.js"></script> <script src="bakery.js"></script>

@ -11,15 +11,17 @@
} }
.bd { .bd {
/*
border-style: solid; border-style: solid;
border-width: 5px;*/ border-width: 5px;
} }
.bd2 {
.ad { /* border-color: mediumblue;
border-style: solid; border-style: solid;
border-width: 5px; border-width: 5px;
border-color: red; */ }
.ad {
width: min-content; width: min-content;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -147,10 +149,14 @@
.slot { .slot {
display: inline-block; display: inline-block;
border: 1px solid white;
} }
.texte { .texte {
font-size: medium;
font-family: 'Segoe print';
}
.texteG {
font-size: xx-large; font-size: xx-large;
font-weight: bold; font-weight: bold;
font-family: 'Segoe print'; font-family: 'Segoe print';

@ -18,12 +18,12 @@
<div id="modeSelection" class="mode-container"> <div id="modeSelection" class="mode-container">
<ul id="diff" class="all-container bd"> <ul id="diff" class="all-container">
<img id="btn_easy" class="button" src="./ress/button_diff_easy.png"/> <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_med" class="button" src="./ress/button_diff_normal.png"/>
<img id="btn_hard" class="button" src="./ress/button_diff_hard.png"/> <img id="btn_hard" class="button" src="./ress/button_diff_hard.png"/>
</ul> </ul>
<ul id="modes" class="all-container bd"> <ul id="modes" class="all-container">
<img id="btn_points" class="button" src="./ress/button_mode_points.png"/> <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_temps" class="button" src="./ress/button_mode_temps.png"/>
<img id="btn_survie" class="button" src="./ress/button_mode_survie.png"/> <img id="btn_survie" class="button" src="./ress/button_mode_survie.png"/>
@ -44,16 +44,17 @@
<img id="45s" class="button z" src="./ress/button_survie_45.png"/> <img id="45s" class="button z" src="./ress/button_survie_45.png"/>
</ul> </ul>
</div> </div>
<div class="mode-container">
<div class="ad"> <div class="texte">
Pseudo : Pseudo :
<input type="text" id="field_pseudo" /> <input type="text" id="field_pseudo" />
</div>
<ul id="btns_play">
<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>
</div> </div>
<ul class="ad">
<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>
<!-- The Modal --> <!-- The Modal -->
<div id="optionsModal" class="modal"> <div id="optionsModal" class="modal">
@ -61,13 +62,13 @@
<!-- Modal content --> <!-- Modal content -->
<div class="modal-content" id="modal"> <div class="modal-content" id="modal">
<span class="close">&times;</span> <span class="close">&times;</span>
<p>Options :</p> <p class="texte">Options :</p>
<div class="slidecontainer"> <div class="slidecontainer">
<p>Changer le nombre de points</p> <p class="texte">Changer le nombre de points</p>
<img src="ress/-" onClick="less()" id="-"/> <img src="ress/-" onClick="less()" id="-"/>
<span id="dotsNumber" class="texte"></span> <span id="dotsNumber" class="texteG"></span>
<img src="ress/+" onClick="more()" id="+"/> <img src="ress/+" onClick="more()" id="+"/>
<p> <p class="texte">
Mode d'affichage : Mode d'affichage :
</p> </p>
<div id="displays"> <div id="displays">
@ -75,17 +76,17 @@
<img id="gems_di" src="ress/green.png" onClick="selectDisplay('gems')"/> <img id="gems_di" src="ress/green.png" onClick="selectDisplay('gems')"/>
<span id="both_di" class="dot both" onClick="selectDisplay('both')"></span> <span id="both_di" class="dot both" onClick="selectDisplay('both')"></span>
</div> </div>
<p> <p class="texte">
Mettre le jeu en pause après avoir gagné un point Mettre le jeu en pause après avoir gagné un point
</p> </p>
<input type="radio" id="yes_pause" value="1" name="pause"> <input type="radio" id="yes_pause" value="1" name="pause">
<label for="no_pause">Oui</label> <label for="no_pause" class="texte">Oui</label>
<input type="radio" id="no_pause" value="0" name="pause"> <input type="radio" id="no_pause" value="0" name="pause">
<label for="no_pause">Non</label> <label for="no_pause" class="texte">Non</label>
<div id="color_pickers" class="color-pickers"> <div id="color_pickers" class="color-pickers">
<div> Choisir les couleurs des points<br/> <div class="texte"> Choisir les couleurs des points<br/>
<span id="col1" class="dot col1 pickr"></span> <span id="col1" class="dot col1 pickr"></span>
<span id="col2" class="dot col2 pickr"></span> <span id="col2" class="dot col2 pickr"></span>
<span id="col3" class="dot col3 pickr"></span> <span id="col3" class="dot col3 pickr"></span>
@ -97,6 +98,7 @@
</div> </div>
</div> </div>
<div id="gems_picker"> <div id="gems_picker">
<div class="texte">Choisir les gemmes à afficher<br/></div>
<img id="gem1" draggable="true" ondragstart="drag(event)"/> <img id="gem1" draggable="true" ondragstart="drag(event)"/>
<img id="gem2" draggable="true" ondragstart="drag(event)"/> <img id="gem2" draggable="true" ondragstart="drag(event)"/>
<img id="gem3" draggable="true" ondragstart="drag(event)"/> <img id="gem3" draggable="true" ondragstart="drag(event)"/>

@ -1,7 +1,12 @@
var light= (getCookie("light")=="" ? true : getCookie("light")); var light= (getCookie("light")=="" ? true : getCookie("light"));
document.getElementById("light").width=size/4; document.getElementById("light").width=size/4;
document.getElementById("logo").width=size*2;
if(document.getElementById("logo")!=null)
{
document.getElementById("logo").width=size*2;
}
function switchLight() { function switchLight() {
light=(light=="true" ? "false" : "true"); light=(light=="true" ? "false" : "true");

Loading…
Cancel
Save