Update index.html

index.html

@@ -9,6 +9,68 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
     <title>LuminAI API Client</title>
     <style>
+      .toggle-switch {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      display: flex;
+      align-items: center;
+    }
+
+    #theme-switch {
+      display: none;
+    }
+
+    .toggle-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: #ccc;
+      border-radius: 34px;
+      width: 60px;
+      height: 30px;
+      padding: 3px;
+      position: relative;
+      transition: background-color 0.3s ease;
+    }
+
+    .dot {
+      background-color: #fff;
+      border-radius: 50%;
+      width: 24px;
+      height: 24px;
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      transition: left 0.3s ease;
+    }
+
+    .toggle-container .sun,
+    .toggle-container .moon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      position: absolute;
+      top: 3px;
+    }
+
+    .toggle-container .sun {
+      left: 3px;
+    }
+
+    .toggle-container .moon {
+      right: 3px;
+    }
+
+    #theme-switch:checked + .toggle-container {
+      background-color: #4a90e2;
+    }
+
+    #theme-switch:checked + .toggle-container .dot {
+      left: calc(100% - 3px - 24px);
+    }
         body {
   font-family: 'Roboto', sans-serif;
   background-color: #f5f7fa;
@@ -304,19 +366,13 @@ footer {
         <h1>LuminAI API Client</h1>
     </header>
     <div class="container">
-<div class="toggle-switch" style="position: absolute; top: 10px; right: 10px;">
-  <input type="checkbox" id="theme-switch">
-  <label for="theme-switch" style="display: flex; align-items: center; justify-content: space-between; padding: 2px;">
-    <div class="sun" style="background-color: #ff0; border-radius: 50%; width: 22px; height: 22px;">
-      ☀️ <!-- Tambahkan simbol matahari -->
-    </div>
-    <div class="slider" style="background-color: #ccc; border-radius: 34px; width: 50px; height: 26px; position: relative;">
-      <div class="dot" style="background-color: #fff; border-radius: 50%; width: 22px; height: 22px; position: absolute; top: 2px; left: 2px; transition: 0.3s;"></div>
-    </div>
-    <div class="moon" style="background-color: #bbb; border-radius: 50%; width: 22px; height: 22px;">
-      🌙 <!-- Tambahkan simbol bulan -->
-    </div>
-  </label>
+<div class="toggle-switch">
+    <input type="checkbox" id="theme-switch">
+    <label for="theme-switch" class="toggle-container">
+      <div class="sun">☀️</div>
+      <div class="dot"></div>
+      <div class="moon">🌙</div>
+    </label>
 </div>