icones

icones/lotus.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512.001 512.001" xml:space="preserve">
+<path style="fill:#88CC2A;" d="M425.013,326.155H86.987c-54.276,15.316-81.796,36.74-81.796,63.682
+	c0,57.444,130.009,83.603,250.808,83.603s250.808-26.159,250.808-83.603C506.809,362.894,479.289,341.471,425.013,326.155z"/>
+<path style="fill:#7FB335;" d="M425.013,326.155H255.936v147.285c0.021,0,0.042,0,0.064,0c120.799,0,250.808-26.159,250.808-83.603
+	C506.809,362.894,479.289,341.471,425.013,326.155z"/>
+<path style="fill:#D95782;" d="M256.001,405.299c-3.714-1.47-6.904-4.267-8.809-8.089c-2.178-4.375-53.025-107.141-16.756-198.738
+	S374.882,65.96,379.464,64.262c8.01-2.963,16.958,0.58,20.769,8.223c2.178,4.375,53.025,108.256,16.756,199.853
+	S272.542,403.735,267.96,405.432C263.954,406.914,259.715,406.77,256.001,405.299z"/>
+<path style="fill:#F26C9A;" d="M256.001,405.299c-3.724,1.446-7.965,1.563-11.96,0.055c-4.571-1.729-112.475-42.247-148.132-134.084
+	s15.88-195.376,18.088-199.737c3.861-7.618,12.832-11.101,20.823-8.085c4.571,1.729,112.475,43.362,148.132,135.199
+	s-15.88,194.262-18.088,198.622C262.932,401.077,259.725,403.853,256.001,405.299z"/>
+<path style="fill:#FF80AB;" d="M184.677,180.675c-69.539-48.606-164.757-44.36-168.773-44.142
+	c-8.709,0.446-15.61,7.501-15.861,16.209c-0.142,4.878-2.699,120.168,66.784,189.652c59.207,59.207,151.519,64.194,180.911,64.194
+	c5.192,0,8.436-0.163,9.166-0.196c9.21-0.501,16.275-8.371,15.784-17.58L184.677,180.675z"/>
+<path style="fill:#F26C9A;" d="M511.958,152.743c-0.251-8.709-7.152-15.763-15.861-16.209c-4.05-0.217-99.245-4.463-168.773,44.142
+	l-88.011,208.136c-0.489,9.21,6.575,17.079,15.784,17.58c0.729,0.032,3.963,0.196,9.166,0.196
+	c29.403,0,121.713-4.986,180.911-64.194C514.658,272.91,512.1,157.619,511.958,152.743z"/>
+<path style="fill:#FF99BC;" d="M256.001,406.413c-3.995,0-7.99-1.426-11.169-4.278c-3.636-3.266-89.154-81.131-89.154-179.648
+	s85.519-176.382,89.154-179.648c6.357-5.704,15.98-5.704,22.338,0c3.636,3.266,89.154,81.131,89.154,179.648
+	s-85.519,176.382-89.154,179.648C263.99,404.988,259.996,406.413,256.001,406.413z"/>
+<path style="fill:#FF80AB;" d="M267.169,42.839c-3.196-2.867-7.217-4.29-11.233-4.275v367.847c0.021,0,0.042,0.003,0.064,0.003
+	c3.995,0,7.99-1.426,11.169-4.278c3.636-3.266,89.154-81.131,89.154-179.648S270.805,46.106,267.169,42.839z"/>
+</svg>

icones/volumeOff.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="#888"><path d="M792-56 671-177q-25 16-53 27.5T560-131v-82q14-5 27.5-10t25.5-12L480-368v208L280-360H120v-240h128L56-792l56-56 736 736-56 56Zm-8-232-58-58q17-31 25.5-65t8.5-70q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 53-14.5 102T784-288ZM650-422l-90-90v-130q47 22 73.5 66t26.5 96q0 15-2.5 29.5T650-422ZM480-592 376-696l104-104v208Zm-80 238v-94l-72-72H200v80h114l86 86Zm-36-130Z"/></svg>

icones/volumeOn.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="#888"><path d="M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320ZM400-606l-86 86H200v80h114l86 86v-252ZM300-480Z"/></svg>

index.html

@@ -8,15 +8,31 @@
     <title>LOTUS</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"/>
     <link rel="stylesheet" type="text/css" href="style.css">
-    <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="icones/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="icones/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icones/favicon-16x16.png">
-    <link rel="manifest" href="favicons/site.webmanifest">
+    <link rel="manifest" href="icones/site.webmanifest">
 </head>
 
 <body>
     <main>
-        <h1>L<img src="favicons/favicon-32x32.png" alt="O">TUS</h1>
+        <nav>
+            <ul style="position: fixed;">
+                <li>
+                    <input type="checkbox" id="volumeCheckbox" role="switch" checked/>
+                    <label for="volumeCheckbox">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor">
+                            <path d="M792-56 671-177q-25 16-53 27.5T560-131v-82q14-5 27.5-10t25.5-12L480-368v208L280-360H120v-240h128L56-792l56-56 736 736-56 56Zm-8-232-58-58q17-31 25.5-65t8.5-70q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 53-14.5 102T784-288ZM650-422l-90-90v-130q47 22 73.5 66t26.5 96q0 15-2.5 29.5T650-422ZM480-592 376-696l104-104v208Zm-80 238v-94l-72-72H200v80h114l86 86Zm-36-130Z"/>
+                        </svg>
+                    </label>
+                </li>
+            </ul>
+            <ul style="margin: auto">
+                <li>
+                    <h1>L<img src="icones/lotus.svg" alt="O">TUS</h1>
+                </li>
+            </ul>
+        </nav>
         <div id="grille"></div>
     </main>
 

script.js

@@ -79,6 +79,7 @@ function onkeyup(event) {
 
 function onsubmit(event) {
     if (this.checkValidity()) {
+        volumeOn = volumeCheckbox.checked
         if (motsAutorises.includes(Array.from(form.children).map((input) => input.value).join(""))) {
             var inputsNonValides = Array.from(form.children)
             motATrouver.forEach((lettre, indice) => {
@@ -90,7 +91,7 @@ function onsubmit(event) {
                     nbLettresBienPlacees++
                     setTimeout(() => {
                         input.className = "lettre-bien-placee"
-                        sonLettreBienPlacee.play()
+                        if (volumeOn) sonLettreBienPlacee.play()
                     }, periode * indice)
                 }
                 input.readOnly = true
@@ -102,10 +103,10 @@ function onsubmit(event) {
                     delete(lettresATrouver[index])
                     setTimeout(() => {
                         input.className = "lettre-mal-placee"
-                        sonLettreMalPlacee.play()
+                        if (volumeOn) sonLettreMalPlacee.play()
                     }, periode * indice)
                 } else {
-                    setTimeout(() => sonLettreNonTrouvee.play(), periode * indice)
+                    setTimeout(() => {if (volumeOn) sonLettreNonTrouvee.play()}, periode * indice)
                 }
             })
 
@@ -117,7 +118,7 @@ function onsubmit(event) {
 
         } else {
             for(input of form.children) input.readOnly = true
-            sonLettreMalPlacee.play()
+            if (volumeOn) sonLettreMalPlacee.play()
             nouvelEssai()
         }
 

style.css

@@ -1,6 +1,5 @@
 :root {
     font-size: 125%;
-    --pico-typography-spacing-vertical: 1.1em;
 }
 
 h1 {
@@ -13,7 +12,7 @@ h1 img {
     border-radius: 100%;
     background-origin: content-box;
     padding: 0;
-    height: 0.7em;
+    height: 0.75em;
     vertical-align: baseline;
 }
 
@@ -40,4 +39,12 @@ h1 img {
 .lettre-mal-placee {
     background-image: radial-gradient(ellipse at center, #FFBF00A0 70%, transparent 70%);
     background-repeat: no-repeat;
+}
+
+#volumeCheckbox {
+    display: none;
+}
+
+#volumeCheckbox:checked ~ label svg path {
+    d: path("M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320ZM400-606l-86 86H200v80h114l86 86v-252ZM300-480Z");
 }