ungdev · AlbanSdl · May 15, 2024 · May 14, 2024 · May 15, 2024
diff --git a/web/www/borrow.html b/web/www/borrow.html
@@ -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&nbsp;: <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>
diff --git a/web/www/getCode.html b/web/www/getCode.html
@@ -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&nbsp;!
+                    </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>
diff --git a/web/www/login.html b/web/www/login.html
@@ -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>