Update index.html

index.html

@@ -10,124 +10,125 @@
     <title>LuminAI API Client</title>
     <style>
         body {
-            font-family: 'Roboto', sans-serif;
-            background-color: #f5f7fa;
-            color: #444;
-            margin: 0;
-            padding: 0;
-            line-height: 1.6;
-            transition: background-color 0.3s, color 0.3s;
-        }
+  font-family: 'Roboto', sans-serif;
+  background-color: #f5f7fa;
+  color: #444;
+  margin: 0;
+  padding: 0;
+  line-height: 1.6;
+  transition: background-color 0.3s, color 0.3s;
+}
 
-        .container {
-            max-width: 1000px;
-            margin: 40px auto;
-            padding: 0 20px;
-        }
+.container {
+  max-width: 1000px;
+  margin: 40px auto;
+  padding: 0 20px;
+}
 
-        header {
-            background: linear-gradient(90deg, #4a90e2, #007aff);
-            color: #fff;
-            padding: 40px 0;
-            text-align: center;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        }
+header {
+  background: linear-gradient(90deg, #4a90e2, #007aff);
+  color: #fff;
+  padding: 40px 0;
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: height 0.3s ease; /* Add transition for header height */
+}
 
-        header h1 {
-            margin: 0;
-            font-size: 2.5em;
-            font-weight: 700;
-            font-family: 'Playfair Display', serif;
-        }
+header h1 {
+  margin: 0;
+  font-size: 2.5em;
+  font-weight: 700;
+  font-family: 'Playfair Display', serif;
+}
 
-        .main {
-            margin-top: 20px;
-        }
+.main {
+  margin-top: 20px;
+}
 
-        h2, h3 {
-            color: #4a90e2;
-            font-weight: 500;
-        }
+h2, h3 {
+  color: #4a90e2;
+  font-weight: 500;
+}
 
-        .code-block {
-            background: #eef7ff;
-            padding: 15px;
-            border-left: 5px solid #4a90e2;
-            margin: 20px 0;
-            position: relative;
-            border-radius: 5px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
+.code-block {
+  background: #eef7ff;
+  padding: 15px;
+  border-left: 5px solid #4a90e2;
+  margin: 20px 0;
+  position: relative;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
 
-        .code-block pre {
-            margin: 0;
-            overflow-x: auto;
-            font-size: 0.9em;
-        }
+.code-block pre {
+  margin: 0;
+  overflow-x: auto;
+  font-size: 0.9em;
+}
 
-        .copy-btn {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: none;
-            border: none;
-            cursor: pointer;
-            outline: none;
-        }
+.copy-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
+}
 
-        .copy-btn img {
-            width: 24px;
-            height: 24px;
-        }
+.copy-btn img {
+  width: 24px;
+  height: 24px;
+}
 
-        .stats-container {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 20px;
-            margin-top: 40px;
-        }
+.stats-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-top: 40px;
+}
 
-        .stat-box {
-            background: #fff;
-            padding: 20px;
-            border-radius: 10px;
-            text-align: center;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s, box-shadow 0.3s;
-        }
+.stat-box {
+  background: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s, box-shadow 0.3s;
+}
 
-        .stat-box:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
-        }
+.stat-box:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+}
 
-        .stat-box h3 {
-            margin: 0;
-            font-size: 1.2em;
-            color: #4a90e2;
-            font-weight: 500;
-        }
+.stat-box h3 {
+  margin: 0;
+  font-size: 1.2em;
+  color: #4a90e2;
+  font-weight: 500;
+}
 
-        .stat-box p {
-            margin: 10px 0 0;
-            font-size: 2.5em;
-            font-weight: bold;
-            color: #333;
-        }
+.stat-box p {
+  margin: 10px 0 0;
+  font-size: 2.5em;
+  font-weight: bold;
+  color: #333;
+}
 
-        .stat-box.full-width {
-            grid-column: span 2;
-        }
+.stat-box.full-width {
+  grid-column: span 2;
+}
 
-        footer {
-            background: linear-gradient(90deg, #4a90e2, #007aff);
-            color: #fff;
-            text-align: center;
-            padding: 20px 0;
-            position: relative;
-            bottom: 0;
-            width: 100%;
-            margin-top: 40px;
+footer {
+  background: linear-gradient(90deg, #4a90e2, #007aff);
+  color: #fff;
+  text-align: center;
+  padding: 20px 0;
+  position: relative;
+  bottom: 0;
+  width: 100%;
+  margin-top: 40px
             box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
         }
 
@@ -294,15 +295,6 @@
     background-color: #007aff; /* Ganti warna latar belakang saat tombol dihover */
     border: 2px solid #007aff; /* Ganti warna border saat tombol dihover */
 }
-      header {
-  /* existing styles */
-  transition: height 0.3s ease;
-}
-
-.dark-mode header {
-  /* existing styles */
-  height: 40px;
-}
 
     </style>
 </head>
@@ -466,29 +458,6 @@ themeSwitch.addEventListener('change', () => {
                 console.error('Failed to copy: ', err);
             });
         }
-const themeSwitch = document.getElementById('theme-switch');
-const pageHeader = document.getElementById('page-header');
-
-function toggleDarkMode() {
-  document.body.classList.toggle('dark-mode');
-
-  // Change header behavior on scroll
-  if (document.body.classList.contains('dark-mode')) {
-    window.addEventListener('scroll', () => {
-      if (window.scrollY > 0 && window.scrollY < 150) {
-        pageHeader.style.height = `calc(40px + ${window.scrollY * 0.5}px)`;
-      } else if (window.scrollY >= 150) {
-        pageHeader.style.height = '80px';
-      } else {
-        pageHeader.style.height = '40px';
-      }
-    });
-  } else {
-    window.removeEventListener('scroll', headerScrollFunction);
-  }
-}
-
-themeSwitch.addEventListener('change', toggleDarkMode);
     </script>
 </body>
 </html>