adrien/Sudoku
adrien/Sudoku
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improve color picker

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-10-23 16:43:19 +02:00
parent 4a0d03f445
commit 24806a289f
4 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/style.css
View File

@ -139,6 +139,10 @@ table input:enabled {
color: var(--bs-secondary-color) !important;
}
#colorPicker{
width: 2.5rem;
}
@media (prefers-color-scheme:dark) {
.pencil {
color: #5a5a5a !important;

30
head.php
View File

@ -7,19 +7,19 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css" rel="alternate stylesheet" type="text/css" title="Sombre" />
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="apple-touch-icon" href="thumbnail.php?size=57&grid=<?=$currentGrid?>" sizes="57x57">
<link rel="apple-touch-icon" href="thumbnail.php?size=114&grid=<?=$currentGrid?>" sizes="114x114">
<link rel="apple-touch-icon" href="thumbnail.php?size=72&grid=<?=$currentGrid?>" sizes="72x72">
<link rel="apple-touch-icon" href="thumbnail.php?size=144&grid=<?=$currentGrid?>" sizes="144x144">
<link rel="apple-touch-icon" href="thumbnail.php?size=60&grid=<?=$currentGrid?>" sizes="60x60">
<link rel="apple-touch-icon" href="thumbnail.php?size=120&grid=<?=$currentGrid?>" sizes="120x120">
<link rel="apple-touch-icon" href="thumbnail.php?size=76&grid=<?=$currentGrid?>" sizes="76x76">
<link rel="apple-touch-icon" href="thumbnail.php?size=152&grid=<?=$currentGrid?>" sizes="152x152">
<link rel="icon" type="image/png" href="thumbnail.php?size=196&grid=<?=$currentGrid?>" sizes="196x196">
<link rel="icon" type="image/png" href="thumbnail.php?size=160&grid=<?=$currentGrid?>" sizes="160x160">
<link rel="icon" type="image/png" href="thumbnail.php?size=96&grid=<?=$currentGrid?>" sizes="96x96">
<link rel="icon" type="image/png" href="thumbnail.php?size=16&grid=<?=$currentGrid?>" sizes="16x16">
<link rel="icon" type="image/png" href="thumbnail.php?size=32&grid=<?=$currentGrid?>" sizes="32x32">
<link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$currentGrid?>size=196&" sizes="196x196">
<link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$currentGrid?>size=160&" sizes="160x160">
<link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$currentGrid?>size=96&" sizes="96x96">
<link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$currentGrid?>size=16&" sizes="16x16">
<link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$currentGrid?>size=32&" sizes="32x32">
<link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$currentGrid?>size=57&" sizes="57x57">
<link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$currentGrid?>size=114&" sizes="114x114">
<link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$currentGrid?>size=72&" sizes="72x72">
<link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$currentGrid?>size=144&" sizes="144x144">
<link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$currentGrid?>size=60&" sizes="60x60">
<link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$currentGrid?>size=120&" sizes="120x120">
<link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$currentGrid?>size=76&" sizes="76x76">
<link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$currentGrid?>size=152&" sizes="152x152">
<link rel="manifest" href="manifest.php?grid=<?=$currentGrid?>">
<meta property="og:title" content="Sudoku" />
<meta property="og:type" content="website" />
@ -32,6 +32,4 @@
<meta property="og:description"
content="Remplissez la grille de sorte que chaque ligne, colonne et région (carré de 3×3 cases) contienne tous les chiffres de 1 à 9." />
<meta property="og:locale" content="fr_FR" />
<meta property="og:site_name" content="<?=$_SERVER["HTTP_HOST"]?>" />
<script src='js/sudoku.js'></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<meta property="og:site_name" content="<?=$_SERVER["HTTP_HOST"]?>" />

12
js/sudoku.js
View File

@ -80,6 +80,8 @@ window.onload = function() {
}
loadSavedGame()
colorPicker.value = getComputedStyle(document.body).getPropertyValue("--bs-body-color")
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register(`service-worker.php?location=${location.pathname}`)
@ -172,8 +174,8 @@ function oninput() {
this.previousPlaceholder = this.placeholder
refreshBox(this)
}
if (penColor) {
this.style.setProperty("color", penColor)
if (colorPicker.value) {
this.style.setProperty("color", colorPicker.value)
}
}
@ -324,12 +326,6 @@ function insert(radio) {
}
}
let penColor
function changeColor() {
penColor = colorPicker.value
}
function undo() {
if (history.length) {
const previousState = history.pop()

4
sudoku.php
View File

@ -24,7 +24,7 @@
<i class="ri-eraser-fill"></i>
</label>
</div>
<input type="color" class="btn btn-primary form-control form-control-sm form-control-color" id="colorPicker" title="Couleur" oninput="changeColor()" value="var(--bs-body-color)"/>
<input type="color" class="btn btn-primary form-control form-control-sm form-control-color" id="colorPicker" title="Couleur"/>
<div class='btn-group'>
<input type='checkbox' id='sightCheckbox' class='btn-check' onclick='highlighterCheckbox.checked = false; refreshUI()' />
<label for='sightCheckbox' class='btn btn-info' title='Surligner la ligne, la colonne et la région de la case survolée'>
@ -109,6 +109,8 @@
<a href='https://git.malingrey.fr/adrien/Sudoku' target="_blank" class='list-group-item list-group-item-action'>Code source</a>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src='js/sudoku.js' defer></script>
</body>
</html>