Update index.html

index.html

@@ -366,17 +366,24 @@ footer {
         <h1>LuminAI API Client</h1>
     </header>
     <div class="container">
-<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 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">
+      <!-- Ganti dengan kode SVG untuk ikon 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">
+      <!-- Ganti dengan kode SVG untuk ikon bulan -->
+    </div>
+  </label>
 </div>
 
 
 
+
 <script>
   document.getElementById('theme-switch').addEventListener('change', function() {
     var dot = document.querySelector('.dot');