-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
Merge pull request #1 from DevNono/design
feat: add some page design
Showing
3 changed files
with
327 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,88 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<title>TurboSwitch - Emprunt</title> | ||
|
||
<meta charset="UTF-8"> | ||
<title>Title</title> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
||
<script src="https://cdn.tailwindcss.com"></script> | ||
</head> | ||
<body> | ||
<form method="post"> | ||
<input type="text" name="joycons" placeholder="joycons" /> | ||
<button type="submit">submit</button> | ||
</form> | ||
<div class="flex flex-col items-center justify-center min-h-screen py-6 bg-gray-50 dark:bg-neutral-900 duration-300 transition-all"> | ||
<div | ||
class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-neutral-900 dark:border-neutral-700 w-96"> | ||
<div class="p-4 sm:p-7"> | ||
<div class="text-center"> | ||
<h1 class="block text-2xl font-bold text-gray-800 dark:text-white">Emprunter des joycons</h1> | ||
<p class="block text-md text-gray-800 dark:text-white">Joycons disponibles : <span id="joycons-left" class="text-[#2a7fba] font-bold">0</span></p> | ||
</div> | ||
|
||
<form class="flex flex-col items-center justify-center gap-2 mt-4" method="post"> | ||
<input class="border-2 border-gray-300 rounded-md box-border py-2 px-4 focus:outline-none focus:border-blue-500" type="text" name="joycons" placeholder="Nombre de joycons"> | ||
<button class="bg-[#2d8fce] hover:bg-[#2a7fba] duration-300 box-border transition-all text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline flex items-center"> | ||
<svg class="w-5 h-5 mr-2" stroke="currentColor" stroke-width="2" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | ||
<path d="M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"/> | ||
<path d="M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"/> | ||
<path d="M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z"/> | ||
</svg> | ||
<div> | ||
Emprunter | ||
</div> | ||
</button> | ||
</form> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="group fixed bottom-0 right-0 p-4 flex items-end justify-end w-24 h-24"> | ||
<!-- main --> | ||
<button type="button" onclick="switchTheme()" | ||
class="text-white shadow-xl flex items-center justify-center p-3 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 z-50 absolute svg-containers relative"> | ||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 duration-300 transition-all"> | ||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" /> | ||
</svg> | ||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 duration-300 transition-all absolute"> | ||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" /> | ||
</svg> | ||
</div> | ||
</div> | ||
|
||
<script defer> | ||
tailwind.config = { | ||
darkMode: 'class', | ||
}; | ||
|
||
// On page load or when changing themes, best to add inline in `head` to avoid FOUC | ||
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia( | ||
'(prefers-color-scheme: dark)').matches)) { | ||
localStorage.setItem('color-theme', 'light'); | ||
switchTheme(); | ||
} else { | ||
localStorage.setItem('color-theme', 'dark'); | ||
switchTheme(); | ||
} | ||
|
||
// Whenever the user explicitly chooses light mode | ||
function switchTheme() { | ||
if (localStorage.getItem('color-theme') !== 'dark') { | ||
document.documentElement.classList.add('dark'); | ||
localStorage.setItem('color-theme', 'dark'); | ||
|
||
document.querySelector(".svg-containers").children[0].classList.add("opacity-0") | ||
document.querySelector(".svg-containers").children[1].classList.remove("opacity-0"); | ||
} else { | ||
document.documentElement.classList.remove('dark'); | ||
localStorage.setItem('color-theme', 'light'); | ||
|
||
document.querySelector(".svg-containers").children[0].classList.remove("opacity-0") | ||
document.querySelector(".svg-containers").children[1].classList.add("opacity-0"); | ||
} | ||
} | ||
|
||
window.onload = () => { | ||
const urlSearchParams = new URLSearchParams(window.location.search); | ||
document.getElementById("joycons-left").innerText = Math.max(0, Math.min(100, Number(urlSearchParams.get("joyconsLeft")) || 0)); | ||
} | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,136 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<html lang="fr"> | ||
|
||
<head> | ||
<title>TurboSwitch - Emprunt</title> | ||
|
||
<meta charset="UTF-8"> | ||
<title>Title</title> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
||
<script src="https://cdn.tailwindcss.com"></script> | ||
</head> | ||
|
||
<body> | ||
code | ||
<a href="/">refresh</a> | ||
<div class="flex flex-col items-center justify-center min-h-screen py-6 bg-gray-50 dark:bg-neutral-900 duration-300 transition-all"> | ||
<div class="flex flex-col items-center justify-center"> | ||
<svg | ||
class="w-32 h-auto" | ||
viewBox="0 0 130.49535 71.045853" | ||
version="1.1" | ||
id="svg1" | ||
xml:space="preserve" | ||
xmlns="http://www.w3.org/2000/svg" | ||
xmlns:svg="http://www.w3.org/2000/svg"> | ||
<g | ||
id="layer1" | ||
transform="translate(-0.05934185,-0.04519275)"> | ||
<path | ||
class="fill-[#2d8fce]" | ||
d="m 505.9267,424.84186 q -3.248,0 -5.88,-1.176 -2.632,-1.176 -4.2,-3.808 -1.568,-2.632 -1.568,-7 v -17.304 q 0,-4.368 1.568,-7 1.568,-2.632 4.144,-3.808 2.632,-1.176 5.88,-1.176 3.584,0 6.216,1.288 2.632,1.232 4.088,3.416 1.456,2.184 1.456,5.04 0,1.008 -0.504,1.456 -0.504,0.392 -1.344,0.392 -0.784,0 -1.344,-0.336 -0.504,-0.336 -0.56,-1.064 -0.224,-2.128 -1.176,-3.64 -0.952,-1.512 -2.632,-2.296 -1.68,-0.84 -4.144,-0.84 -3.752,0 -5.824,2.128 -2.072,2.072 -2.072,6.44 v 17.304 q 0,4.368 2.072,6.496 2.072,2.072 5.824,2.072 3.752,0 5.824,-2.072 2.128,-2.128 2.128,-6.496 v -6.664 h -7.448 q -0.672,0 -1.064,-0.448 -0.336,-0.504 -0.336,-1.12 0,-0.616 0.336,-1.12 0.392,-0.504 1.064,-0.504 h 9.8 q 0.672,0 1.008,0.448 0.392,0.448 0.392,1.064 v 8.344 q 0,4.368 -1.568,7 -1.568,2.632 -4.2,3.808 -2.632,1.176 -5.936,1.176 z m 38.46399,-0.224 q -0.616,0 -1.12,-0.616 -0.504,-0.672 -0.84,-1.344 l -8.624,-16.8 h -7.112 v 17.192 q 0,0.728 -0.616,1.12 -0.56,0.336 -1.232,0.336 -0.728,0 -1.288,-0.336 -0.56,-0.392 -0.56,-1.12 v -38.08 q 0,-0.56 0.392,-0.952 0.392,-0.392 1.008,-0.448 h 9.912 q 3.304,0 6.048,1.008 2.744,1.008 4.368,3.416 1.68,2.408 1.68,6.608 0,3.472 -1.176,5.712 -1.12,2.24 -3.136,3.472 -1.96,1.176 -4.424,1.624 l 8.624,16.576 q 0.168,0.168 0.168,0.392 0.056,0.168 0.056,0.336 0,0.448 -0.336,0.896 -0.28,0.448 -0.784,0.728 -0.504,0.28 -1.008,0.28 z m -17.696,-21.952 h 7.616 q 3.752,0 6.048,-1.792 2.352,-1.848 2.352,-6.048 0,-4.256 -2.352,-6.048 -2.296,-1.792 -6.048,-1.792 h -7.616 z m 34.992,22.176 q -3.248,0 -5.88,-1.176 -2.632,-1.176 -4.2,-3.808 -1.568,-2.632 -1.568,-7 v -17.304 q 0,-4.368 1.568,-7 1.568,-2.632 4.144,-3.808 2.632,-1.176 5.936,-1.176 3.304,0 5.936,1.176 2.632,1.176 4.2,3.808 1.568,2.632 1.568,7 v 17.304 q 0,4.368 -1.568,7 -1.568,2.632 -4.2,3.808 -2.632,1.176 -5.936,1.176 z m 0,-3.416 q 3.752,0 5.824,-2.072 2.128,-2.072 2.128,-6.496 v -17.304 q 0,-4.424 -2.128,-6.496 -2.072,-2.072 -5.824,-2.072 -3.752,0 -5.824,2.072 -2.072,2.072 -2.072,6.496 v 17.304 q 0,4.424 2.072,6.496 2.072,2.072 5.824,2.072 z m 29.16797,3.416 q -3.304,0 -5.936,-1.176 -2.632,-1.176 -4.2,-3.808 -1.568,-2.632 -1.568,-7 v -27.888 q 0,-0.728 0.56,-1.064 0.56,-0.336 1.288,-0.336 0.728,0 1.288,0.336 0.56,0.336 0.56,1.064 v 27.888 q 0,4.424 2.128,6.496 2.128,2.072 5.88,2.072 3.808,0 5.936,-2.072 2.128,-2.072 2.128,-6.496 v -27.888 q 0,-0.728 0.56,-1.064 0.56,-0.336 1.288,-0.336 0.728,0 1.288,0.336 0.56,0.336 0.56,1.064 v 27.888 q 0,4.368 -1.568,7 -1.512,2.632 -4.2,3.808 -2.688,1.176 -5.992,1.176 z m 19.81598,-0.336 q -0.728,0 -1.288,-0.336 -0.56,-0.392 -0.56,-1.12 v -38.08 q 0,-0.56 0.392,-0.952 0.448,-0.392 1.176,-0.448 h 10.304 q 3.248,0 5.88,1.176 2.632,1.176 4.144,3.808 1.512,2.576 1.512,6.888 v 0.56 q 0,4.368 -1.568,7 -1.512,2.576 -4.2,3.808 -2.632,1.176 -5.88,1.176 h -8.064 v 15.064 q 0,0.728 -0.616,1.12 -0.56,0.336 -1.232,0.336 z m 1.848,-19.768 h 8.064 q 3.752,0 5.824,-2.072 2.128,-2.128 2.128,-6.496 v -0.616 q 0,-4.424 -2.128,-6.496 -2.072,-2.072 -5.824,-2.072 h -8.064 z" | ||
id="GROUP" | ||
transform="matrix(0.26458333,0,0,0.26458333,-83.629853,-46.059844)" | ||
aria-label="GROUP" /> | ||
<path | ||
class="fill-[#000000] dark:fill-[#ffffff]" | ||
d="m 506.2067,424.84186 q -3.304,0 -5.936,-1.176 -2.632,-1.176 -4.2,-3.808 -1.568,-2.632 -1.568,-7 v -27.888 q 0,-0.728 0.56,-1.064 0.56,-0.336 1.288,-0.336 0.728,0 1.288,0.336 0.56,0.336 0.56,1.064 v 27.888 q 0,4.424 2.128,6.496 2.128,2.072 5.88,2.072 3.808,0 5.936,-2.072 2.128,-2.072 2.128,-6.496 v -27.888 q 0,-0.728 0.56,-1.064 0.56,-0.336 1.288,-0.336 0.728,0 1.288,0.336 0.56,0.336 0.56,1.064 v 27.888 q 0,4.368 -1.568,7 -1.512,2.632 -4.2,3.808 -2.688,1.176 -5.992,1.176 z m 27.09599,-0.336 q -0.728,0 -1.288,-0.336 -0.56,-0.392 -0.56,-1.12 v -36.008 h -9.408 q -0.672,0 -1.064,-0.504 -0.392,-0.56 -0.392,-1.232 0,-0.672 0.392,-1.176 0.392,-0.56 1.064,-0.56 h 22.456 q 0.728,0 1.064,0.56 0.336,0.504 0.336,1.12 0,0.672 -0.336,1.232 -0.336,0.56 -1.064,0.56 h -9.352 v 36.008 q 0,0.728 -0.616,1.12 -0.56,0.336 -1.232,0.336 z m 24.63196,0 q -0.728,0 -1.288,-0.336 -0.56,-0.392 -0.56,-1.12 v -36.008 h -9.408 q -0.672,0 -1.064,-0.504 -0.392,-0.56 -0.392,-1.232 0,-0.672 0.392,-1.176 0.392,-0.56 1.064,-0.56 h 22.456 q 0.728,0 1.064,0.56 0.336,0.504 0.336,1.12 0,0.672 -0.336,1.232 -0.336,0.56 -1.064,0.56 h -9.352 v 36.008 q 0,0.728 -0.616,1.12 -0.56,0.336 -1.232,0.336 z m 26.472,0 q -0.728,0 -1.288,-0.336 -0.56,-0.392 -0.56,-1.12 v -38.08 q 0,-0.784 0.56,-1.064 0.56,-0.336 1.288,-0.336 0.672,0 1.176,0.392 0.504,0.336 0.952,0.952 0.448,0.56 0.784,1.288 l 15.12,29.736 v -30.968 q 0,-0.728 0.56,-1.064 0.56,-0.336 1.288,-0.336 0.672,0 1.232,0.336 0.616,0.336 0.616,1.064 v 38.08 q 0,0.728 -0.616,1.12 -0.56,0.336 -1.232,0.336 -0.784,0 -1.456,-0.616 -0.616,-0.672 -1.008,-1.512 l -15.568,-30.296 v 30.968 q 0,0.728 -0.616,1.12 -0.56,0.336 -1.232,0.336 z m 29.84,0 q -0.616,0 -1.176,-0.336 -0.504,-0.392 -0.504,-1.12 v -38.024 q 0,-0.728 0.504,-1.064 0.56,-0.392 1.176,-0.392 h 19.936 q 0.728,0 1.064,0.56 0.336,0.504 0.336,1.12 0,0.672 -0.392,1.232 -0.336,0.504 -1.008,0.504 h -17.92 v 15.4 h 8.792 q 0.672,0 1.008,0.504 0.392,0.504 0.392,1.176 0,0.56 -0.336,1.064 -0.336,0.504 -1.064,0.504 h -8.792 v 15.456 h 17.92 q 0.672,0 1.008,0.504 0.392,0.504 0.392,1.232 0,0.616 -0.336,1.176 -0.336,0.504 -1.064,0.504 z m 33.81597,0 q -0.728,0 -1.288,-0.336 -0.56,-0.392 -0.56,-1.12 v -36.008 h -9.408 q -0.672,0 -1.064,-0.504 -0.392,-0.56 -0.392,-1.232 0,-0.672 0.392,-1.176 0.392,-0.56 1.064,-0.56 h 22.456 q 0.728,0 1.064,0.56 0.336,0.504 0.336,1.12 0,0.672 -0.336,1.232 -0.336,0.56 -1.064,0.56 h -9.352 v 36.008 q 0,0.728 -0.616,1.12 -0.56,0.336 -1.232,0.336 z" | ||
id="UTT_NET" | ||
transform="matrix(0.26458333,0,0,0.26458333,-130.72587,-46.059844)" | ||
aria-label="UTT NET " /> | ||
<path | ||
class="fill-[#2d8fce]" | ||
d="m 443.03851,700.65119 q -21.55465,0 -38.7253,-6.21066 -17.17065,-5.84533 -27.39998,-17.17065 -9.86399,-10.95999 -9.86399,-25.93865 0,-15.34398 8.76799,-25.20798 9.13333,-9.49865 20.82399,-14.61332 -8.03733,-2.92266 -13.51733,-8.40266 -5.11466,-5.84532 -5.11466,-16.07465 0,-10.22932 5.11466,-16.07465 5.11467,-6.21066 13.15199,-10.95999 -9.86399,-8.03733 -15.34398,-19.72798 -5.48,-12.05599 -5.48,-26.30398 v -12.05599 q 0,-17.90132 8.03733,-31.41864 8.03732,-13.51732 22.65064,-21.18931 14.97866,-7.67199 34.70664,-7.67199 12.78666,0 23.38131,4.01866 10.95999,3.65333 18.99732,10.22932 5.84533,-12.05599 12.05599,-17.90131 6.57599,-5.84533 12.78665,-5.84533 6.576,0 9.86399,3.65333 3.288,3.65333 3.288,7.67199 0,2.92266 -1.82666,5.11466 -1.82667,2.192 -4.384,3.288 -4.01866,1.096 -9.49866,4.384 -5.11466,3.28799 -9.86399,10.95999 5.48,6.94132 8.03733,16.07465 2.92266,8.76799 2.92266,18.63198 v 12.05599 q 0,17.17065 -8.40266,31.05331 -8.40266,13.88265 -23.38131,21.91998 -14.97865,7.67199 -34.3413,7.67199 -14.97866,0 -26.66931,-5.47999 -3.65333,2.19199 -6.576,5.11466 -2.92266,2.55733 -2.92266,7.30666 0,7.67199 8.03733,10.95999 8.40265,3.28799 21.18931,4.74933 12.78665,1.46133 27.03464,3.28799 14.24799,1.82667 27.03464,6.576 12.78666,4.38399 20.82399,13.88265 8.40266,9.49866 8.40266,26.30398 0,17.90132 -9.864,29.59197 -9.86399,12.05599 -26.66931,17.90132 -16.43998,5.84533 -37.26396,5.84533 z m -0.73067,-21.18932 q 20.82398,0 32.87997,-8.76799 12.05599,-8.40266 12.05599,-22.65065 0,-10.22932 -6.21066,-16.07465 -6.21066,-5.47999 -16.07465,-8.40266 -9.86399,-2.55733 -20.82398,-3.65333 -10.59466,-0.73066 -19.36265,-1.82666 -11.69066,3.65333 -20.45865,10.95999 -8.40266,7.30666 -8.40266,18.99731 0,14.24799 12.78666,22.65065 12.78665,8.76799 33.61063,8.76799 z m -1.096,-125.67455 q 16.80532,0 26.30398,-11.32532 9.49866,-11.32533 9.49866,-28.49598 v -12.05599 q 0,-16.80532 -9.49866,-28.13064 -9.49866,-11.32532 -26.66931,-11.32532 -17.17065,0 -26.66931,11.32532 -9.13332,11.32532 -9.13332,28.13064 v 11.69066 q 0,17.17065 9.49865,28.86131 9.49866,11.32532 26.66931,11.32532 z" | ||
id="g" | ||
transform="matrix(0.26458333,0,0,0.26458333,-7.3513809,-114.28958)" | ||
aria-label="g" /> | ||
<path | ||
class="fill-[#000000] dark:fill-[#ffffff]" | ||
d="m 450.7105,619.91259 q -20.09331,0 -36.5333,-9.86399 -16.43999,-9.86399 -26.30398,-25.93864 -9.86399,-16.07465 -9.86399,-34.3413 v -94.98659 q 0,-4.01866 4.384,-7.30666 4.74933,-3.65333 10.95999,-3.65333 6.21066,0 10.59466,3.65333 4.38399,3.288 4.38399,7.30666 v 94.98659 q 0,10.59465 5.48,20.45864 5.84533,9.864 15.34398,16.07466 9.49866,6.21066 21.18932,6.21066 11.69065,0 21.18931,-6.21066 9.49866,-6.21066 14.97866,-16.07466 5.47999,-9.86399 5.47999,-20.45864 v -95.35192 q 0,-4.384 4.74933,-7.30666 4.74933,-3.288 10.59466,-3.288 6.94132,0 10.95999,3.288 4.01866,2.92266 4.01866,7.30666 v 95.35192 q 0,18.63198 -9.86399,34.70663 -9.49866,15.70932 -25.93864,25.57331 -16.43999,9.86399 -35.80264,9.86399 z m 119.23178,-2.92266 q -6.57599,0 -10.95999,-3.288 -4.01866,-3.65333 -4.01866,-7.67199 v -151.6132 q 0,-4.74933 4.01866,-7.67199 4.384,-2.92267 10.95999,-2.92267 5.84533,0 9.86399,2.92267 4.01867,2.92266 4.01867,7.67199 v 14.97865 q 5.84532,-10.59465 18.26665,-18.99731 12.42132,-8.76799 30.68797,-8.76799 17.53598,0 32.1493,9.86399 14.61332,9.49865 23.38132,25.20797 8.76799,15.70932 8.76799,35.07197 v 94.25592 q 0,5.47999 -4.74933,8.40266 -4.74933,2.55733 -10.59466,2.55733 -5.47999,0 -10.22932,-2.55733 -4.74933,-2.92267 -4.74933,-8.40266 v -94.25592 q 0,-10.59465 -5.84533,-20.45865 -5.47999,-9.86399 -14.97865,-16.07465 -9.49866,-6.21066 -20.82398,-6.21066 -9.86399,0 -18.99732,5.48 -9.13333,5.11466 -14.97865,14.61332 -5.84533,9.13332 -5.84533,22.65064 v 94.25592 q 0,4.01866 -4.74933,7.67199 -4.384,3.288 -10.59466,3.288 z" | ||
id="un" | ||
transform="matrix(0.26458333,0,0,0.26458333,-99.955599,-114.28958)" | ||
aria-label="un" /> | ||
</g> | ||
</svg> | ||
</div> | ||
<div | ||
class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-neutral-900 dark:border-neutral-700 w-96"> | ||
<div class="p-4 sm:p-7"> | ||
<div class="text-center"> | ||
<h1 class="block text-2xl font-bold text-gray-800 dark:text-white" id="type">Emprunt</h1> | ||
</div> | ||
|
||
<div class="mt-5"> | ||
<h2 class="block text-6xl font-bold text-gray-800 text-center dark:text-white tracking-widest ml-1" id="sesame">----</h2> | ||
<h3 class="block text-2xl font-bold text-gray-800 text-center dark:text-white ml-1"> | ||
<span id="joycon-count" class="text-[#2d8fce] mr-2">?</span>joycons à<span id="action" class="text-[#2d8fce] ml-2">récupérer</span> | ||
</h3> | ||
</div> | ||
|
||
<div class="text-center"> | ||
<p class="text-gray-500 dark:text-neutral-400 mt-4 italic">Présente cette page à un respo foyer pour <span id="action-footer">rendre</span> les joycons.</p> | ||
<div class="mt-6 p-2 gap-3 text-sm bg-white border border-gray-200 rounded-xl shadow-sm flex items-center justify-center dark:border-neutral-700 text-gray-500 dark:text-neutral-400 dark:bg-neutral-900" id="what-to-do-next"> | ||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 shrink-0 stroke-gray-500 dark:stroke-neutral-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> | ||
Actualise cette page pour rendre les joycons une fois ta session de jeu terminée ! | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="group fixed bottom-0 right-0 p-4 flex items-end justify-end w-24 h-24"> | ||
<!-- main --> | ||
<button type="button" onclick="switchTheme()" | ||
class="text-white shadow-xl flex items-center justify-center p-3 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 z-50 absolute svg-containers relative"> | ||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 duration-300 transition-all"> | ||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" /> | ||
</svg> | ||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 duration-300 transition-all absolute"> | ||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" /> | ||
</svg> | ||
</div> | ||
</div> | ||
|
||
|
||
|
||
<script defer> | ||
tailwind.config = { | ||
darkMode: 'class', | ||
}; | ||
|
||
// On page load or when changing themes, best to add inline in `head` to avoid FOUC | ||
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia( | ||
'(prefers-color-scheme: dark)').matches)) { | ||
localStorage.setItem('color-theme', 'light'); | ||
switchTheme(); | ||
} else { | ||
localStorage.setItem('color-theme', 'dark'); | ||
switchTheme(); | ||
} | ||
|
||
// Whenever the user explicitly chooses light mode | ||
function switchTheme() { | ||
if (localStorage.getItem('color-theme') !== 'dark') { | ||
document.documentElement.classList.add('dark'); | ||
localStorage.setItem('color-theme', 'dark'); | ||
|
||
document.querySelector(".svg-containers").children[0].classList.add("opacity-0") | ||
document.querySelector(".svg-containers").children[1].classList.remove("opacity-0"); | ||
} else { | ||
document.documentElement.classList.remove('dark'); | ||
localStorage.setItem('color-theme', 'light'); | ||
|
||
document.querySelector(".svg-containers").children[0].classList.remove("opacity-0") | ||
document.querySelector(".svg-containers").children[1].classList.add("opacity-0"); | ||
} | ||
} | ||
|
||
window.onload = () => { | ||
const urlSearchParams = new URLSearchParams(window.location.search); | ||
document.getElementById("sesame").innerText = urlSearchParams.get("code") || "----"; | ||
document.getElementById("joycon-count").innerText = urlSearchParams.get("joycons") || 0; | ||
document.getElementById("type").innerText = urlSearchParams.get("type") === 'borrow' ? "Emprunt" : "Retour"; | ||
document.getElementById("action").innerText = document.getElementById("action-footer").innerText = urlSearchParams.get("type") === 'borrow' ? "récupérer" : "rendre"; | ||
if (urlSearchParams.get("type") !== 'borrow') document.getElementById("what-to-do-next").classList.add("hidden"); | ||
} | ||
</script> | ||
</body> | ||
</html> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,123 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<html lang="fr"> | ||
|
||
<head> | ||
<title>TurboSwitch - Login</title> | ||
|
||
<meta charset="UTF-8"> | ||
<title>Title</title> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
||
<script src="https://cdn.tailwindcss.com"></script> | ||
</head> | ||
|
||
<body> | ||
<a href="/login/cas">login</a> | ||
<div class="flex flex-col items-center justify-center min-h-screen py-6 bg-gray-50 dark:bg-neutral-900 duration-300 transition-all"> | ||
<div class="flex flex-col items-center justify-center"> | ||
<svg | ||
class="w-32 h-auto mb-2" | ||
viewBox="0 0 130.49535 71.045853" | ||
version="1.1" | ||
id="svg1" | ||
xml:space="preserve" | ||
xmlns="http://www.w3.org/2000/svg" | ||
xmlns:svg="http://www.w3.org/2000/svg"> | ||
<g | ||
id="layer1" | ||
transform="translate(-0.05934185,-0.04519275)"> | ||
<path | ||
class="fill-[#2d8fce]" | ||
d="m 505.9267,424.84186 q -3.248,0 -5.88,-1.176 -2.632,-1.176 -4.2,-3.808 -1.568,-2.632 -1.568,-7 v -17.304 q 0,-4.368 1.568,-7 1.568,-2.632 4.144,-3.808 2.632,-1.176 5.88,-1.176 3.584,0 6.216,1.288 2.632,1.232 4.088,3.416 1.456,2.184 1.456,5.04 0,1.008 -0.504,1.456 -0.504,0.392 -1.344,0.392 -0.784,0 -1.344,-0.336 -0.504,-0.336 -0.56,-1.064 -0.224,-2.128 -1.176,-3.64 -0.952,-1.512 -2.632,-2.296 -1.68,-0.84 -4.144,-0.84 -3.752,0 -5.824,2.128 -2.072,2.072 -2.072,6.44 v 17.304 q 0,4.368 2.072,6.496 2.072,2.072 5.824,2.072 3.752,0 5.824,-2.072 2.128,-2.128 2.128,-6.496 v -6.664 h -7.448 q -0.672,0 -1.064,-0.448 -0.336,-0.504 -0.336,-1.12 0,-0.616 0.336,-1.12 0.392,-0.504 1.064,-0.504 h 9.8 q 0.672,0 1.008,0.448 0.392,0.448 0.392,1.064 v 8.344 q 0,4.368 -1.568,7 -1.568,2.632 -4.2,3.808 -2.632,1.176 -5.936,1.176 z m 38.46399,-0.224 q -0.616,0 -1.12,-0.616 -0.504,-0.672 -0.84,-1.344 l -8.624,-16.8 h -7.112 v 17.192 q 0,0.728 -0.616,1.12 -0.56,0.336 -1.232,0.336 -0.728,0 -1.288,-0.336 -0.56,-0.392 -0.56,-1.12 v -38.08 q 0,-0.56 0.392,-0.952 0.392,-0.392 1.008,-0.448 h 9.912 q 3.304,0 6.048,1.008 2.744,1.008 4.368,3.416 1.68,2.408 1.68,6.608 0,3.472 -1.176,5.712 -1.12,2.24 -3.136,3.472 -1.96,1.176 -4.424,1.624 l 8.624,16.576 q 0.168,0.168 0.168,0.392 0.056,0.168 0.056,0.336 0,0.448 -0.336,0.896 -0.28,0.448 -0.784,0.728 -0.504,0.28 -1.008,0.28 z m -17.696,-21.952 h 7.616 q 3.752,0 6.048,-1.792 2.352,-1.848 2.352,-6.048 0,-4.256 -2.352,-6.048 -2.296,-1.792 -6.048,-1.792 h -7.616 z m 34.992,22.176 q -3.248,0 -5.88,-1.176 -2.632,-1.176 -4.2,-3.808 -1.568,-2.632 -1.568,-7 v -17.304 q 0,-4.368 1.568,-7 1.568,-2.632 4.144,-3.808 2.632,-1.176 5.936,-1.176 3.304,0 5.936,1.176 2.632,1.176 4.2,3.808 1.568,2.632 1.568,7 v 17.304 q 0,4.368 -1.568,7 -1.568,2.632 -4.2,3.808 -2.632,1.176 -5.936,1.176 z m 0,-3.416 q 3.752,0 5.824,-2.072 2.128,-2.072 2.128,-6.496 v -17.304 q 0,-4.424 -2.128,-6.496 -2.072,-2.072 -5.824,-2.072 -3.752,0 -5.824,2.072 -2.072,2.072 -2.072,6.496 v 17.304 q 0,4.424 2.072,6.496 2.072,2.072 5.824,2.072 z m 29.16797,3.416 q -3.304,0 -5.936,-1.176 -2.632,-1.176 -4.2,-3.808 -1.568,-2.632 -1.568,-7 v -27.888 q 0,-0.728 0.56,-1.064 0.56,-0.336 1.288,-0.336 0.728,0 1.288,0.336 0.56,0.336 0.56,1.064 v 27.888 q 0,4.424 2.128,6.496 2.128,2.072 5.88,2.072 3.808,0 5.936,-2.072 2.128,-2.072 2.128,-6.496 v -27.888 q 0,-0.728 0.56,-1.064 0.56,-0.336 1.288,-0.336 0.728,0 1.288,0.336 0.56,0.336 0.56,1.064 v 27.888 q 0,4.368 -1.568,7 -1.512,2.632 -4.2,3.808 -2.688,1.176 -5.992,1.176 z m 19.81598,-0.336 q -0.728,0 -1.288,-0.336 -0.56,-0.392 -0.56,-1.12 v -38.08 q 0,-0.56 0.392,-0.952 0.448,-0.392 1.176,-0.448 h 10.304 q 3.248,0 5.88,1.176 2.632,1.176 4.144,3.808 1.512,2.576 1.512,6.888 v 0.56 q 0,4.368 -1.568,7 -1.512,2.576 -4.2,3.808 -2.632,1.176 -5.88,1.176 h -8.064 v 15.064 q 0,0.728 -0.616,1.12 -0.56,0.336 -1.232,0.336 z m 1.848,-19.768 h 8.064 q 3.752,0 5.824,-2.072 2.128,-2.128 2.128,-6.496 v -0.616 q 0,-4.424 -2.128,-6.496 -2.072,-2.072 -5.824,-2.072 h -8.064 z" | ||
id="GROUP" | ||
transform="matrix(0.26458333,0,0,0.26458333,-83.629853,-46.059844)" | ||
aria-label="GROUP" /> | ||
<path | ||
class="fill-[#000000] dark:fill-[#ffffff]" | ||
d="m 506.2067,424.84186 q -3.304,0 -5.936,-1.176 -2.632,-1.176 -4.2,-3.808 -1.568,-2.632 -1.568,-7 v -27.888 q 0,-0.728 0.56,-1.064 0.56,-0.336 1.288,-0.336 0.728,0 1.288,0.336 0.56,0.336 0.56,1.064 v 27.888 q 0,4.424 2.128,6.496 2.128,2.072 5.88,2.072 3.808,0 5.936,-2.072 2.128,-2.072 2.128,-6.496 v -27.888 q 0,-0.728 0.56,-1.064 0.56,-0.336 1.288,-0.336 0.728,0 1.288,0.336 0.56,0.336 0.56,1.064 v 27.888 q 0,4.368 -1.568,7 -1.512,2.632 -4.2,3.808 -2.688,1.176 -5.992,1.176 z m 27.09599,-0.336 q -0.728,0 -1.288,-0.336 -0.56,-0.392 -0.56,-1.12 v -36.008 h -9.408 q -0.672,0 -1.064,-0.504 -0.392,-0.56 -0.392,-1.232 0,-0.672 0.392,-1.176 0.392,-0.56 1.064,-0.56 h 22.456 q 0.728,0 1.064,0.56 0.336,0.504 0.336,1.12 0,0.672 -0.336,1.232 -0.336,0.56 -1.064,0.56 h -9.352 v 36.008 q 0,0.728 -0.616,1.12 -0.56,0.336 -1.232,0.336 z m 24.63196,0 q -0.728,0 -1.288,-0.336 -0.56,-0.392 -0.56,-1.12 v -36.008 h -9.408 q -0.672,0 -1.064,-0.504 -0.392,-0.56 -0.392,-1.232 0,-0.672 0.392,-1.176 0.392,-0.56 1.064,-0.56 h 22.456 q 0.728,0 1.064,0.56 0.336,0.504 0.336,1.12 0,0.672 -0.336,1.232 -0.336,0.56 -1.064,0.56 h -9.352 v 36.008 q 0,0.728 -0.616,1.12 -0.56,0.336 -1.232,0.336 z m 26.472,0 q -0.728,0 -1.288,-0.336 -0.56,-0.392 -0.56,-1.12 v -38.08 q 0,-0.784 0.56,-1.064 0.56,-0.336 1.288,-0.336 0.672,0 1.176,0.392 0.504,0.336 0.952,0.952 0.448,0.56 0.784,1.288 l 15.12,29.736 v -30.968 q 0,-0.728 0.56,-1.064 0.56,-0.336 1.288,-0.336 0.672,0 1.232,0.336 0.616,0.336 0.616,1.064 v 38.08 q 0,0.728 -0.616,1.12 -0.56,0.336 -1.232,0.336 -0.784,0 -1.456,-0.616 -0.616,-0.672 -1.008,-1.512 l -15.568,-30.296 v 30.968 q 0,0.728 -0.616,1.12 -0.56,0.336 -1.232,0.336 z m 29.84,0 q -0.616,0 -1.176,-0.336 -0.504,-0.392 -0.504,-1.12 v -38.024 q 0,-0.728 0.504,-1.064 0.56,-0.392 1.176,-0.392 h 19.936 q 0.728,0 1.064,0.56 0.336,0.504 0.336,1.12 0,0.672 -0.392,1.232 -0.336,0.504 -1.008,0.504 h -17.92 v 15.4 h 8.792 q 0.672,0 1.008,0.504 0.392,0.504 0.392,1.176 0,0.56 -0.336,1.064 -0.336,0.504 -1.064,0.504 h -8.792 v 15.456 h 17.92 q 0.672,0 1.008,0.504 0.392,0.504 0.392,1.232 0,0.616 -0.336,1.176 -0.336,0.504 -1.064,0.504 z m 33.81597,0 q -0.728,0 -1.288,-0.336 -0.56,-0.392 -0.56,-1.12 v -36.008 h -9.408 q -0.672,0 -1.064,-0.504 -0.392,-0.56 -0.392,-1.232 0,-0.672 0.392,-1.176 0.392,-0.56 1.064,-0.56 h 22.456 q 0.728,0 1.064,0.56 0.336,0.504 0.336,1.12 0,0.672 -0.336,1.232 -0.336,0.56 -1.064,0.56 h -9.352 v 36.008 q 0,0.728 -0.616,1.12 -0.56,0.336 -1.232,0.336 z" | ||
id="UTT_NET" | ||
transform="matrix(0.26458333,0,0,0.26458333,-130.72587,-46.059844)" | ||
aria-label="UTT NET " /> | ||
<path | ||
class="fill-[#2d8fce]" | ||
d="m 443.03851,700.65119 q -21.55465,0 -38.7253,-6.21066 -17.17065,-5.84533 -27.39998,-17.17065 -9.86399,-10.95999 -9.86399,-25.93865 0,-15.34398 8.76799,-25.20798 9.13333,-9.49865 20.82399,-14.61332 -8.03733,-2.92266 -13.51733,-8.40266 -5.11466,-5.84532 -5.11466,-16.07465 0,-10.22932 5.11466,-16.07465 5.11467,-6.21066 13.15199,-10.95999 -9.86399,-8.03733 -15.34398,-19.72798 -5.48,-12.05599 -5.48,-26.30398 v -12.05599 q 0,-17.90132 8.03733,-31.41864 8.03732,-13.51732 22.65064,-21.18931 14.97866,-7.67199 34.70664,-7.67199 12.78666,0 23.38131,4.01866 10.95999,3.65333 18.99732,10.22932 5.84533,-12.05599 12.05599,-17.90131 6.57599,-5.84533 12.78665,-5.84533 6.576,0 9.86399,3.65333 3.288,3.65333 3.288,7.67199 0,2.92266 -1.82666,5.11466 -1.82667,2.192 -4.384,3.288 -4.01866,1.096 -9.49866,4.384 -5.11466,3.28799 -9.86399,10.95999 5.48,6.94132 8.03733,16.07465 2.92266,8.76799 2.92266,18.63198 v 12.05599 q 0,17.17065 -8.40266,31.05331 -8.40266,13.88265 -23.38131,21.91998 -14.97865,7.67199 -34.3413,7.67199 -14.97866,0 -26.66931,-5.47999 -3.65333,2.19199 -6.576,5.11466 -2.92266,2.55733 -2.92266,7.30666 0,7.67199 8.03733,10.95999 8.40265,3.28799 21.18931,4.74933 12.78665,1.46133 27.03464,3.28799 14.24799,1.82667 27.03464,6.576 12.78666,4.38399 20.82399,13.88265 8.40266,9.49866 8.40266,26.30398 0,17.90132 -9.864,29.59197 -9.86399,12.05599 -26.66931,17.90132 -16.43998,5.84533 -37.26396,5.84533 z m -0.73067,-21.18932 q 20.82398,0 32.87997,-8.76799 12.05599,-8.40266 12.05599,-22.65065 0,-10.22932 -6.21066,-16.07465 -6.21066,-5.47999 -16.07465,-8.40266 -9.86399,-2.55733 -20.82398,-3.65333 -10.59466,-0.73066 -19.36265,-1.82666 -11.69066,3.65333 -20.45865,10.95999 -8.40266,7.30666 -8.40266,18.99731 0,14.24799 12.78666,22.65065 12.78665,8.76799 33.61063,8.76799 z m -1.096,-125.67455 q 16.80532,0 26.30398,-11.32532 9.49866,-11.32533 9.49866,-28.49598 v -12.05599 q 0,-16.80532 -9.49866,-28.13064 -9.49866,-11.32532 -26.66931,-11.32532 -17.17065,0 -26.66931,11.32532 -9.13332,11.32532 -9.13332,28.13064 v 11.69066 q 0,17.17065 9.49865,28.86131 9.49866,11.32532 26.66931,11.32532 z" | ||
id="g" | ||
transform="matrix(0.26458333,0,0,0.26458333,-7.3513809,-114.28958)" | ||
aria-label="g" /> | ||
<path | ||
class="fill-[#000000] dark:fill-[#ffffff]" | ||
d="m 450.7105,619.91259 q -20.09331,0 -36.5333,-9.86399 -16.43999,-9.86399 -26.30398,-25.93864 -9.86399,-16.07465 -9.86399,-34.3413 v -94.98659 q 0,-4.01866 4.384,-7.30666 4.74933,-3.65333 10.95999,-3.65333 6.21066,0 10.59466,3.65333 4.38399,3.288 4.38399,7.30666 v 94.98659 q 0,10.59465 5.48,20.45864 5.84533,9.864 15.34398,16.07466 9.49866,6.21066 21.18932,6.21066 11.69065,0 21.18931,-6.21066 9.49866,-6.21066 14.97866,-16.07466 5.47999,-9.86399 5.47999,-20.45864 v -95.35192 q 0,-4.384 4.74933,-7.30666 4.74933,-3.288 10.59466,-3.288 6.94132,0 10.95999,3.288 4.01866,2.92266 4.01866,7.30666 v 95.35192 q 0,18.63198 -9.86399,34.70663 -9.49866,15.70932 -25.93864,25.57331 -16.43999,9.86399 -35.80264,9.86399 z m 119.23178,-2.92266 q -6.57599,0 -10.95999,-3.288 -4.01866,-3.65333 -4.01866,-7.67199 v -151.6132 q 0,-4.74933 4.01866,-7.67199 4.384,-2.92267 10.95999,-2.92267 5.84533,0 9.86399,2.92267 4.01867,2.92266 4.01867,7.67199 v 14.97865 q 5.84532,-10.59465 18.26665,-18.99731 12.42132,-8.76799 30.68797,-8.76799 17.53598,0 32.1493,9.86399 14.61332,9.49865 23.38132,25.20797 8.76799,15.70932 8.76799,35.07197 v 94.25592 q 0,5.47999 -4.74933,8.40266 -4.74933,2.55733 -10.59466,2.55733 -5.47999,0 -10.22932,-2.55733 -4.74933,-2.92267 -4.74933,-8.40266 v -94.25592 q 0,-10.59465 -5.84533,-20.45865 -5.47999,-9.86399 -14.97865,-16.07465 -9.49866,-6.21066 -20.82398,-6.21066 -9.86399,0 -18.99732,5.48 -9.13333,5.11466 -14.97865,14.61332 -5.84533,9.13332 -5.84533,22.65064 v 94.25592 q 0,4.01866 -4.74933,7.67199 -4.384,3.288 -10.59466,3.288 z" | ||
id="un" | ||
transform="matrix(0.26458333,0,0,0.26458333,-99.955599,-114.28958)" | ||
aria-label="un" /> | ||
</g> | ||
</svg> | ||
<h1 class="text-3xl font-bold text-gray-800 dark:text-white">Formulaire d'emprunt des Joy-Cons</h1> | ||
</div> | ||
<div | ||
class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-neutral-900 dark:border-neutral-700 w-96"> | ||
<div class="p-4 sm:p-7"> | ||
<div class="text-center"> | ||
<h2 class="block text-2xl font-bold text-gray-800 dark:text-white">Se connecter</h1> | ||
</div> | ||
|
||
<div class="mt-5"> | ||
<a href="/login/cas" | ||
class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 font-bold"> | ||
<img class="w-6 h-auto" | ||
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJ1ZKoT1PRAT6Mevq78RfRYeh3Hhgm-NhdVbwC1Yioew&s" | ||
alt="Logo CAS UTT" /> | ||
Se connecter avec le CAS | ||
</a> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="group fixed bottom-0 right-0 p-4 flex items-end justify-end w-24 h-24"> | ||
<!-- main --> | ||
<button type="button" onclick="switchTheme()" | ||
class="text-white shadow-xl flex items-center justify-center p-3 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 z-50 absolute svg-containers relative"> | ||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 duration-300 transition-all"> | ||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" /> | ||
</svg> | ||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 duration-300 transition-all absolute"> | ||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" /> | ||
</svg> | ||
</div> | ||
</div> | ||
|
||
|
||
|
||
<script defer> | ||
tailwind.config = { | ||
darkMode: 'class', | ||
}; | ||
|
||
// On page load or when changing themes, best to add inline in `head` to avoid FOUC | ||
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia( | ||
'(prefers-color-scheme: dark)').matches)) { | ||
localStorage.setItem('color-theme', 'light'); | ||
switchTheme(); | ||
} else { | ||
localStorage.setItem('color-theme', 'dark'); | ||
switchTheme(); | ||
} | ||
|
||
// Whenever the user explicitly chooses light mode | ||
function switchTheme() { | ||
if (localStorage.getItem('color-theme') !== 'dark') { | ||
document.documentElement.classList.add('dark'); | ||
localStorage.setItem('color-theme', 'dark'); | ||
|
||
document.querySelector(".svg-containers").children[0].classList.add("opacity-0") | ||
document.querySelector(".svg-containers").children[1].classList.remove("opacity-0"); | ||
} else { | ||
document.documentElement.classList.remove('dark'); | ||
localStorage.setItem('color-theme', 'light'); | ||
|
||
document.querySelector(".svg-containers").children[0].classList.remove("opacity-0") | ||
document.querySelector(".svg-containers").children[1].classList.add("opacity-0"); | ||
} | ||
} | ||
</script> | ||
</body> | ||
</html> | ||
|
||
</html> |