modes light/dark étendus sur tout le site

master
adplantade 5 years ago
parent 09f881adba
commit f4998ba996

@ -13,6 +13,14 @@
}
.day { background: #eee; color: black; }
.night { background: #333; color: white; }
.lightButton {
position: absolute;
right: 0px;
}
.flex-container {
/* We first create a flex layout context */
display : flex;

@ -7,6 +7,7 @@
<script>var tutoMode=false;</script>
</head>
<body>
<img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
<ul id="all-container" class="all-container">
<ul class="stats">
@ -51,6 +52,7 @@
<script src="chrono.js"></script>
<script src="timer.js"></script>
<script src="vitraux.js"></script>
<script src="themeSwitcher.js"></script>
</body>
</html>

@ -91,4 +91,12 @@
color: #000;
text-decoration: none;
cursor: pointer;
}
}
.lightButton {
position: absolute;
right: 0px;
}
.day { background: #eee; color: black; }
.night { background: #333; color: white; }

@ -1,113 +1,119 @@
<head>
<link rel="stylesheet" type="text/css" href="highscores.css"/>
</head>
<body>
<img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
<form action="highscores.php" method="post">
<div id="modeSelection">
<ul id="modes">
<img id="img_points" class="button" src="./ress/button_mode_points.png"/>
<form action="highscores.php" method="post">
<div id="modeSelection">
<ul id="modes">
<img id="img_points" class="button" src="./ress/button_mode_points.png"/>
<img id="img_temps" class="button" src="./ress/button_mode_temps.png"/>
<img id="img_survie" class="button" src="./ress/button_mode_survie.png"/>
</ul>
<ul id="points" class="all-container">
<input type="radio" class="rad" name="game_mode" id="5p" value="5p" />
<label for="5p"><img id="img_5p" class="button" src="./ress/button_points_5.png"/></label>
<input type="radio" class="rad" name="game_mode" id="10p" value="10p"/>
<label for="10p"><img id="img_10p" class="button" src="./ress/button_points_10.png"/></label>
<input type="radio" class="rad" name="game_mode" id="15p" value="15p" />
<label for="15p"><img id="img_15p" class="button" src="./ress/button_points_15.png"/></label>
<input type="radio" class="rad" name="game_mode" id="20p" value="20p" />
<label for="20p"><img id="img_20p" class="button" src="./ress/button_points_20.png"/></label>
</ul>
<ul id="temps" class="all-container">
<input type="radio" class="rad" name="game_mode" id="5m" value="5m" />
<label for="5m"><img id="img_5m" class="button" src="./ress/button_temps_5.png"/></label>
<input type="radio" class="rad" name="game_mode" id="10m" value="10m"/>
<label for="10m"><img id="img_10m" class="button" src="./ress/button_temps_10.png"/></label>
</ul>
<ul id="survie" class="all-container">
<input type="radio" class="rad" name="game_mode" id="15s" value="15s"/>
<label for="15s"><img id="img_15s" class="button" src="./ress/button_survie_15.png"/></label>
<input type="radio" class="rad" name="game_mode" id="30s" value="30s" />
<label for="30s"><img id="img_30s" class="button" src="./ress/button_survie_30.png"/></label>
<input type="radio" class="rad" name="game_mode" id="45s" value="45s" />
<label for="45s"><img id="img_45s" class="button" src="./ress/button_survie_45.png"/> </label>
</ul>
</div>
<ul id="diff" class="all-container">
<input type="radio" class="rad" name="difficulty" id="easy" value="easy" />
<label for="easy"><img id="img_easy" class="button" src="./ress/button_diff_easy.png"/></label>
<input type="radio" class="rad" name="difficulty" id="med" value="med" />
<label for="med"><img id="img_med" class="button" src="./ress/button_diff_normal.png"/></label>
<input type="radio" class="rad" name="difficulty" id="hard" value="hard" />
<label for="hard"><img id="img_hard" class="button" src="./ress/button_diff_hard.png"/></label>
</ul>
<div>
<p>Mode pause activé : </p>
<input type="radio" id="pause1" value="1" name="pause">
<label for="pause1">Oui</label>
<input type="radio" id="pause0" value="0" name="pause">
<label for="pause0">Non</label>
</div>
<p>Changer le nombre de points</p>
<input type="range" min="2" max="8" class="slider" name="dotsAmount" id="range_dots">
<p>Nombre de points : <span id="dotsNumber"></span></p>
<input type="image" src="ress/button_highscores.png" alt="Submit" id="btn_high">
<img id="btn_high_des" src="ress/button_highscores_desac.png"/>
</form>
Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarder votre score): <br/>
<input type="text" id="field_pseudo" /><br/>
<img id="btn_play" src="ress/button_play.png" onClick="play()"/>
<img id="btn_play_des" src="ress/button_play_desac.png"/>
<img id="img_temps" class="button" src="./ress/button_mode_temps.png"/>
<script src="bakery.js"></script>
<script src="highscore_button_displayer.js"></script>
<?php
<img id="img_survie" class="button" src="./ress/button_mode_survie.png"/>
</ul>
<ul id="points" class="all-container">
<input type="radio" class="rad" name="game_mode" id="5p" value="5p" />
<label for="5p"><img id="img_5p" class="button" src="./ress/button_points_5.png"/></label>
$database = new SQLite3("data.db");
<input type="radio" class="rad" name="game_mode" id="10p" value="10p"/>
<label for="10p"><img id="img_10p" class="button" src="./ress/button_points_10.png"/></label>
<input type="radio" class="rad" name="game_mode" id="15p" value="15p" />
<label for="15p"><img id="img_15p" class="button" src="./ress/button_points_15.png"/></label>
<input type="radio" class="rad" name="game_mode" id="20p" value="20p" />
<label for="20p"><img id="img_20p" class="button" src="./ress/button_points_20.png"/></label>
if(isset($_POST["game_mode"]) && $_POST["game_mode"]!="" && $_POST["difficulty"]!="" && $_POST["dotsAmount"]!="" && $_POST["pause"]!="")
{
if(stristr($_POST['game_mode'], "p") === FALSE)
{
$sql='select score, player from score where game_mode="'.$_POST['game_mode'].'" and difficulty="'.$_POST['difficulty'].'" and dots_amount='.$_POST["dotsAmount"].' and pause='.$_POST["pause"].' and score=(select min(score) from score where game_mode="'.$_POST['game_mode'].'" and difficulty="'.$_POST['difficulty'].'" and dots_amount='.$_POST["dotsAmount"].' and pause='.$_POST["pause"].')';
}
else
{
$sql='select score, player from score where game_mode="'.$_POST['game_mode'].'" and difficulty="'.$_POST['difficulty'].'" and dots_amount='.$_POST["dotsAmount"].' and pause='.$_POST["pause"].' and score=(select max(score) from score where game_mode="'.$_POST['game_mode'].'" and difficulty="'.$_POST['difficulty'].'" and dots_amount='.$_POST["dotsAmount"].' and pause='.$_POST["pause"].')';
}
$result = $database->query($sql);
$a=$result->fetchArray();
</ul>
<ul id="temps" class="all-container">
<input type="radio" class="rad" name="game_mode" id="5m" value="5m" />
<label for="5m"><img id="img_5m" class="button" src="./ress/button_temps_5.png"/></label>
if($a==false)
{
$phrase= "Il n'y a pas encore de score pour ce mode de jeu.";
}
else
<input type="radio" class="rad" name="game_mode" id="10m" value="10m"/>
<label for="10m"><img id="img_10m" class="button" src="./ress/button_temps_10.png"/></label>
</ul>
<ul id="survie" class="all-container">
<input type="radio" class="rad" name="game_mode" id="15s" value="15s"/>
<label for="15s"><img id="img_15s" class="button" src="./ress/button_survie_15.png"/></label>
<input type="radio" class="rad" name="game_mode" id="30s" value="30s" />
<label for="30s"><img id="img_30s" class="button" src="./ress/button_survie_30.png"/></label>
<input type="radio" class="rad" name="game_mode" id="45s" value="45s" />
<label for="45s"><img id="img_45s" class="button" src="./ress/button_survie_45.png"/> </label>
</ul>
</div>
<ul id="diff" class="all-container">
<input type="radio" class="rad" name="difficulty" id="easy" value="easy" />
<label for="easy"><img id="img_easy" class="button" src="./ress/button_diff_easy.png"/></label>
<input type="radio" class="rad" name="difficulty" id="med" value="med" />
<label for="med"><img id="img_med" class="button" src="./ress/button_diff_normal.png"/></label>
<input type="radio" class="rad" name="difficulty" id="hard" value="hard" />
<label for="hard"><img id="img_hard" class="button" src="./ress/button_diff_hard.png"/></label>
</ul>
<div>
<p>Mode pause activé : </p>
<input type="radio" id="pause1" value="1" name="pause">
<label for="pause1">Oui</label>
<input type="radio" id="pause0" value="0" name="pause">
<label for="pause0">Non</label>
</div>
<p>Changer le nombre de points</p>
<input type="range" min="2" max="8" class="slider" name="dotsAmount" id="range_dots">
<p>Nombre de points : <span id="dotsNumber"></span></p>
<input type="image" src="ress/button_highscores.png" alt="Submit" id="btn_high">
<img id="btn_high_des" src="ress/button_highscores_desac.png"/>
</form>
Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarder votre score): <br/>
<input type="text" id="field_pseudo" /><br/>
<img id="btn_play" src="ress/button_play.png" onClick="play()"/>
<img id="btn_play_des" src="ress/button_play_desac.png"/>
<script src="bakery.js"></script>
<script src="highscore_button_displayer.js"></script>
<script src="themeSwitcher.js"></script>
<?php
$database = new SQLite3("data.db");
if(isset($_POST["game_mode"]) && $_POST["game_mode"]!="" && $_POST["difficulty"]!="" && $_POST["dotsAmount"]!="" && $_POST["pause"]!="")
{
$phrase="Le record est ".$a[0].", tenu par ".$a["player"];
while ($row = $result->fetchArray()) {
$phrase=$phrase.", ".$row["player"];
}
if(stristr($_POST['game_mode'], "p") === FALSE)
{
$sql='select score, player from score where game_mode="'.$_POST['game_mode'].'" and difficulty="'.$_POST['difficulty'].'" and dots_amount='.$_POST["dotsAmount"].' and pause='.$_POST["pause"].' and score=(select min(score) from score where game_mode="'.$_POST['game_mode'].'" and difficulty="'.$_POST['difficulty'].'" and dots_amount='.$_POST["dotsAmount"].' and pause='.$_POST["pause"].')';
}
else
{
$sql='select score, player from score where game_mode="'.$_POST['game_mode'].'" and difficulty="'.$_POST['difficulty'].'" and dots_amount='.$_POST["dotsAmount"].' and pause='.$_POST["pause"].' and score=(select max(score) from score where game_mode="'.$_POST['game_mode'].'" and difficulty="'.$_POST['difficulty'].'" and dots_amount='.$_POST["dotsAmount"].' and pause='.$_POST["pause"].')';
}
$result = $database->query($sql);
$a=$result->fetchArray();
if($a==false)
{
$phrase= "Il n'y a pas encore de score pour ce mode de jeu.";
}
else
{
$phrase="Le record est ".$a[0].", tenu par ".$a["player"];
while ($row = $result->fetchArray()) {
$phrase=$phrase.", ".$row["player"];
}
}
}
echo "<h1 id='aya'>".$phrase."</h1>";
}
?>
echo "<h1 id='aya'>".$phrase."</h1>";
}
?>
<script src="bakery.js"></script>
<script src="themeSwitcher.js"></script>
</body>

@ -12,16 +12,6 @@
.day { background: #eee; color: black; }
.night { background: #333; color: white; }
@media (prefers-color-scheme: dark) {
.day.dark-scheme { background: #333; color: white; }
.night.dark-scheme { background: black; color: #ddd; }
}
@media (prefers-color-scheme: light) {
.day.light-scheme { background: white; color: #555; }
.night.light-scheme { background: #eee; color: black; }
}
.button {
padding: 2px;
}

@ -5,7 +5,7 @@
<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 class="night">
<body>
<div>
<div class="logo">
<img src="ress/logo_dark.png" id="logo"/>

@ -1,8 +1,10 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
<script src="selecteur.js"></script>
Votre score est : <h1 id="points"></h1>
@ -91,5 +93,8 @@ function index()
window.location.replace("./");
}
</script>
<script src="bakery.js"></script>
<script src="themeSwitcher.js"></script>
</body>
</html>

@ -13,7 +13,11 @@ function switchLight() {
function applyLight(li) {
console.log("app li "+li);
document.getElementById("light").src="ress/"+(li=="true" ? "light" : "dark")+".png";
document.getElementById("logo").src="ress/logo_"+(li=="true" ? "clair" : "dark")+".png";
if(document.getElementById("logo")!=null)
{
document.getElementById("logo").src="ress/logo_"+(li=="true" ? "clair" : "dark")+".png";
}
document.getElementsByTagName("body")[0].classList.add((li=="true" ? "day" : "night"));
document.getElementsByTagName("body")[0].classList.remove((li=="true" ? "night" : "day"));
}

Loading…
Cancel
Save