adrien/lotus
adrien/lotus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

icones

Browse Source
This commit is contained in:
Adrien MALINGREY 2024-04-25 15:21:32 +02:00
parent 1758a6d7aa
commit 3c9d7e77f0
13 changed files with 63 additions and 11 deletions

0
favicons/android-chrome-192x192.png → icones/android-chrome-192x192.png

Side by Side Swipe

Before

(image error) Size: 11 KiB

After

(image error) Size: 11 KiB

0
favicons/android-chrome-512x512.png → icones/android-chrome-512x512.png

Side by Side Swipe

Before

(image error) Size: 29 KiB

After

(image error) Size: 29 KiB

0
favicons/apple-touch-icon.png → icones/apple-touch-icon.png

Side by Side Swipe Overlay

Before

(image error) Size: 9.6 KiB

After

(image error) Size: 9.6 KiB

0
favicons/favicon-16x16.png → icones/favicon-16x16.png

Side by Side Swipe

Before

(image error) Size: 610 B

After

(image error) Size: 610 B

0
favicons/favicon-32x32.png → icones/favicon-32x32.png

Side by Side Swipe Overlay

Before

(image error) Size: 1.2 KiB

After

(image error) Size: 1.2 KiB

0
favicons/favicon.ico → icones/favicon.ico

Side by Side Swipe

Before

Width: 48px  |  Height: 48px  |  Size: 15 KiB

After

Width: 48px  |  Height: 48px  |  Size: 15 KiB

26
icones/lotus.svg Normal file

@ -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>
Side by Side

After

(image error) Size: 2.5 KiB

0
favicons/site.webmanifest → icones/site.webmanifest

1
icones/volumeOff.svg Normal file

@ -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>
Side by Side

After

(image error) Size: 488 B

1
icones/volumeOn.svg Normal file

@ -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>
Side by Side

After

(image error) Size: 371 B

26
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="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/site.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="icones/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icones/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icones/favicon-16x16.png">
<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>

9
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()
}

11
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");
}