Update index.html

index.html

@@ -10,51 +10,58 @@
     <style>
         body {
             font-family: 'Roboto', sans-serif;
-            background-color: #f4faff;
-            color: #333;
             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;
         }
+
         header {
-            background: #1e90ff;
+            background: #5A9BD3;
             color: #fff;
             padding: 30px 0;
             text-align: center;
-            border-bottom: 3px solid #005f9e;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            border-bottom: 3px solid #41729F;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
+
         header h1 {
             margin: 0;
             font-size: 2.5em;
             font-weight: 400;
         }
+
         .main {
             margin-top: 20px;
         }
+
         h2, h3 {
-            color: #1e90ff;
+            color: #5A9BD3;
             font-weight: 400;
         }
+
         .code-block {
             background: #e0f7ff;
             padding: 15px;
-            border-left: 5px solid #1e90ff;
+            border-left: 5px solid #5A9BD3;
             margin: 20px 0;
             position: relative;
             border-radius: 5px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
+
         .code-block pre {
             margin: 0;
             overflow-x: auto;
             font-size: 0.9em;
         }
+
         .copy-btn {
             position: absolute;
             top: 10px;
@@ -64,45 +71,53 @@
             cursor: pointer;
             outline: none;
         }
+
         .copy-btn img {
             width: 24px;
             height: 24px;
         }
+
         .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 8px rgba(0,0,0,0.1);
+            box-shadow: 0 4px 8px 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);
+            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
         }
+
         .stat-box h3 {
             margin: 0;
             font-size: 1.2em;
-            color: #1e90ff;
+            color: #5A9BD3;
             font-weight: 400;
         }
+
         .stat-box p {
             margin: 10px 0 0;
             font-size: 2.5em;
             font-weight: bold;
             color: #333;
         }
+
         .stat-box.full-width {
             grid-column: span 2;
         }
+
         footer {
-            background: #1e90ff;
+            background: #5A9BD3;
             color: #fff;
             text-align: center;
             padding: 20px 0;
@@ -110,31 +125,106 @@
             bottom: 0;
             width: 100%;
             margin-top: 40px;
-            box-shadow: 0 -4px 8px rgba(0,0,0,0.1);
+            box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
         }
+
         footer p {
             margin: 0;
             font-size: 0.9em;
         }
+
+        .dark-mode {
+            background-color: #121212;
+            color: #e0e0e0;
+        }
+
+        .dark-mode header {
+            background: #333;
+            border-bottom-color: #444;
+        }
+
+        .dark-mode .code-block {
+            background: #1e1e1e;
+            border-left-color: #5A9BD3;
+            color: #ccc;
+        }
+
+        .dark-mode .stat-box {
+            background: #1e1e1e;
+            color: #ccc;
+        }
+
+        .dark-mode footer {
+            background: #333;
+        }
+
+        .dark-mode h2, .dark-mode h3 {
+            color: #5A9BD3;
+        }
+
+        .toggle-switch {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 20px 0;
+        }
+
+        .toggle-switch input {
+            display: none;
+        }
+
+        .toggle-switch label {
+            background-color: #ccc;
+            border-radius: 34px;
+            cursor: pointer;
+            display: inline-block;
+            height: 26px;
+            position: relative;
+            width: 50px;
+        }
+
+        .toggle-switch label:before {
+            background-color: #fff;
+            border-radius: 50%;
+            content: '';
+            height: 22px;
+            left: 2px;
+            position: absolute;
+            top: 2px;
+            transition: 0.3s;
+            width: 22px;
+        }
+
+        .toggle-switch input:checked + label {
+            background-color: #5A9BD3;
+        }
+
+        .toggle-switch input:checked + label:before {
+            transform: translateX(24px);
+        }
     </style>
 </head>
 <body>
-<header>
-    <h1>LuminAI API Client</h1>
-</header>
-<div class="container">
-    <div class="main">
-        <h2>Introduction</h2>
-        <p>This document provides a simple JavaScript client for interacting with the LuminAI API. The client allows you to send requests with various parameters and receive results from the API.</p>
-        <h2>Installation</h2>
-        <p>First, make sure you have Node.js installed. Then, install the necessary dependencies:</p>
-        <div class="code-block">
-            <pre><code>npm install axios</code></pre>
+    <header>
+        <h1>LuminAI API Client</h1>
+    </header>
+    <div class="container">
+        <div class="toggle-switch">
+            <input type="checkbox" id="theme-switch">
+            <label for="theme-switch"></label>
         </div>
-        <h2>Usage</h2>
-        <p>Create a file named <code>lumin.js</code> with the following content:</p>
-        <div class="code-block">
-            <pre><code>const axios = require('axios');
+        <div class="main">
+            <h2>Introduction</h2>
+            <p>This document provides a simple JavaScript client for interacting with the LuminAI API. The client allows you to send requests with various parameters and receive results from the API.</p>
+            <h2>Installation</h2>
+            <p>First, make sure you have Node.js installed. Then, install the necessary dependencies:</p>
+            <div class="code-block">
+                <pre><code>npm install axios</code></pre>
+            </div>
+            <h2>Usage</h2>
+            <p>Create a file named <code>lumin.js</code> with the following content:</p>
+            <div class="code-block">
+                <pre><code>const axios = require('axios');
 async function lumin(q, username = null, logic = null, webSearchMode = false) {
     try {
         const payload = { content: q };
@@ -149,85 +239,88 @@ async function lumin(q, username = null, logic = null, webSearchMode = false) {
     }
 }
 module.exports = { lumin };</code></pre>
-        </div>
-        <h2>Example Usage</h2>
-        <p>Below are some examples of how to use the <code>lumin</code> function.</p>
-        <h3>Basic Usage</h3>
-        <p>Send a query to the LuminAI API using GET:</p>
-        <div class="code-block">
-        <pre><code>const axios = require('axios');
-
+            </div>
+            <h2>Example Usage</h2>
+            <p>Below are some examples of how to use the <code>lumin</code> function.</p>
+            <h3>Basic Usage</h3>
+            <p>Send a query to the LuminAI API using GET:</p>
+            <div class="code-block">
+                <pre><code>const axios = require('axios');
 function getLuminaiResponse(q) {
-  const url = `https://ilhamdev-luminai.hf.space/api/ai?q=${encodeURIComponent(q)}`;
-
-  return axios.get(url)
-    .then(response => response.data)
-    .catch(error => {
-      console.error(`Error fetching data from ${url}:`, error);
-      throw error;
-    });
+    const url = `https://ilhamdev-luminai.hf.space/api/ai?q=${encodeURIComponent(q)}`;
+    return axios.get(url)
+        .then(response => response.data)
+        .catch(error => {
+            console.error(`Error fetching data from ${url}:`, error);
+            throw error;
+        });
 }
 
 // Example usage:
 getLuminaiResponse('example query')
-  .then(data => {
-    console.log('Data:', data);
-  })
-  .catch(error => {
-    console.error('Error:', error);
-  });</code></pre>
-</div>
-        <p>Send a query to the LuminAI API:</p>
-        <div class="code-block">
-            <pre><code>const { lumin } = require('./lumin');
+    .then(data => {
+        console.log('Data:', data);
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });</code></pre>
+            </div>
+            <p>Send a query to the LuminAI API:</p>
+            <div class="code-block">
+                <pre><code>const { lumin } = require('./lumin');
 lumin("query")
     .then(result => console.log(result))
     .catch(error => console.error(error));</code></pre>
-        </div>
-        <h3>Usage with Query and Username</h3>
-        <p>Send a query along with a username:</p>
-        <div class="code-block">
-            <pre><code>const { lumin } = require('./lumin');
+            </div>
+            <h3>Usage with Query and Username</h3>
+            <p>Send a query along with a username:</p>
+            <div class="code-block">
+                <pre><code>const { lumin } = require('./lumin');
 lumin("query", "username")
     .then(result => console.log(result))
     .catch(error => console.error(error));</code></pre>
-        </div>
-        <h3>Usage with Query, Username, and Logic</h3>
-        <p>Send a query with a username and additional logic:</p>
-        <div class="code-block">
-            <pre><code>const { lumin } = require('./lumin');
+            </div>
+            <h3>Usage with Query, Username, and Logic</h3>
+            <p>Send a query with a username and additional logic:</p>
+            <div class="code-block">
+                <pre><code>const { lumin } = require('./lumin');
 lumin("query", "username", "logic")
     .then(result => console.log(result))
     .catch(error => console.error(error));</code></pre>
-        </div>
-        <h3>Usage with Query, Username, Logic, and Web Search Mode</h3>
-        <p>Send a query with a username, additional logic, and enable web search mode:</p>
-        <div class="code-block">
-            <pre><code>const { lumin } = require('./lumin');
+            </div>
+            <h3>Usage with Query, Username, Logic, and Web Search Mode</h3>
+            <p>Send a query with a username, additional logic, and enable web search mode:</p>
+            <div class="code-block">
+                <pre><code>const { lumin } = require('./lumin');
 lumin("query", "username", "logic", true)
     .then(result => console.log(result))
     .catch(error => console.error(error));</code></pre>
-        </div>
-        <h2>Closing</h2>
-        <p>Thank you to everyone who has used LuminAI. We hope this API will continue to provide positive impacts to its users.</p>
-        <h2>Special Thanks</h2>
-        <p>This API leverages the Blackbox.ai platform. We extend our deepest gratitude to the Blackbox.ai team for their incredible work.</p>
-        <div class="stats-container">
-            <div class="stat-box">
-                <h3>Rps</h3>
-                <p id="rps">0</p>
             </div>
-            <div class="stat-box">
-                <h3>Total Requests</h3>
-                <p id="total-requests">0</p>
+            <h2>Closing</h2>
+            <p>Thank you to everyone who has used LuminAI. We hope this API will continue to provide positive impacts to its users.</p>
+            <h2>Special Thanks</h2>
+            <p>This API leverages the Blackbox.ai platform. We extend our deepest gratitude to the Blackbox.ai team for their incredible work.</p>
+            <div class="stats-container">
+                <div class="stat-box">
+                    <h3>Rps</h3>
+                    <p id="rps">0</p>
+                </div>
+                <div class="stat-box">
+                    <h3>Total Requests</h3>
+                    <p id="total-requests">0</p>
+                </div>
             </div>
         </div>
     </div>
-</div>
-<footer>
+    <footer>
         <p>LuminAI API Client &copy; 2024</p>
     </footer>
     <script>
+        const themeSwitch = document.getElementById('theme-switch');
+        themeSwitch.addEventListener('change', () => {
+            document.body.classList.toggle('dark-mode', themeSwitch.checked);
+        });
+
         async function fetchStats() {
             const response = await fetch('/api/stats');
             const data = await response.json();
@@ -237,4 +330,4 @@ lumin("query", "username", "logic", true)
         fetchStats();
     </script>
 </body>
-</html>
+</html>