Update index.html

index.html

@@ -205,6 +205,26 @@
             transform: translateX(24px);
         }
 
+        .toggle-switch .sun, .toggle-switch .moon {
+            position: absolute;
+            width: 22px;
+            height: 22px;
+            top: 2px;
+            transition: 0.3s;
+        }
+
+        .toggle-switch .sun {
+            left: 2px;
+            background: url('https://upload.wikimedia.org/wikipedia/commons/e/e1/Full_Sun_Clipart.svg') no-repeat center;
+            background-size: cover;
+        }
+
+        .toggle-switch .moon {
+            right: 2px;
+            background: url('https://upload.wikimedia.org/wikipedia/commons/3/3a/Moon_clipart.svg') no-repeat center;
+            background-size: cover;
+        }
+
         .button {
             background-color: #007aff;
             border: none;
@@ -237,7 +257,10 @@
     <div class="container">
         <div class="toggle-switch">
             <input type="checkbox" id="theme-switch">
-            <label for="theme-switch"></label>
+            <label for="theme-switch">
+                <div class="sun"></div>
+                <div class="moon"></div>
+            </label>
         </div>
         <div class="main">
             <h2>Introduction</h2>
@@ -245,11 +268,13 @@
             <h2>Installation</h2>
             <p>First, make sure you have Node.js installed. Then, install the necessary dependencies:</p>
             <div class="code-block">
+                <button class="copy-btn" onclick="copyToClipboard(this)"><img src="https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png" alt="Copy"></button>
                 <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">
+                <button class="copy-btn" onclick="copyToClipboard(this)"><img src="https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png" alt="Copy"></button>
                 <pre><code>const axios = require('axios');
 async function lumin(q, username = null, logic = null, webSearchMode = false) {
     try {
@@ -271,6 +296,7 @@ module.exports = { lumin };</code></pre>
             <h3>Basic Usage</h3>
             <p>Send a query to the LuminAI API using GET:</p>
             <div class="code-block">
+                <button class="copy-btn" onclick="copyToClipboard(this)"><img src="https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png" alt="Copy"></button>
                 <pre><code>const axios = require('axios');
 function getLuminaiResponse(q) {
     const url = `https://ilhamdev-luminai.hf.space/api/ai?q=${encodeURIComponent(q)}`;
@@ -293,6 +319,7 @@ getLuminaiResponse('example query')
             </div>
             <p>Send a query to the LuminAI API:</p>
             <div class="code-block">
+                <button class="copy-btn" onclick="copyToClipboard(this)"><img src="https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png" alt="Copy"></button>
                 <pre><code>const { lumin } = require('./lumin');
 lumin("query")
     .then(result => console.log(result))
@@ -301,6 +328,7 @@ lumin("query")
             <h3>Usage with Query and Username</h3>
             <p>Send a query along with a username:</p>
             <div class="code-block">
+                <button class="copy-btn" onclick="copyToClipboard(this)"><img src="https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png" alt="Copy"></button>
                 <pre><code>const { lumin } = require('./lumin');
 lumin("query", "username")
     .then(result => console.log(result))
@@ -309,6 +337,7 @@ lumin("query", "username")
             <h3>Usage with Query, Username, and Logic</h3>
             <p>Send a query with a username and additional logic:</p>
             <div class="code-block">
+                <button class="copy-btn" onclick="copyToClipboard(this)"><img src="https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png" alt="Copy"></button>
                 <pre><code>const { lumin } = require('./lumin');
 lumin("query", "username", "logic")
     .then(result => console.log(result))
@@ -317,6 +346,7 @@ lumin("query", "username", "logic")
             <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">
+                <button class="copy-btn" onclick="copyToClipboard(this)"><img src="https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png" alt="Copy"></button>
                 <pre><code>const { lumin } = require('./lumin');
 lumin("query", "username", "logic", true)
     .then(result => console.log(result))
@@ -355,6 +385,18 @@ lumin("query", "username", "logic", true)
             document.getElementById('total-requests').textContent = data.totalRequests;
         }
         fetchStats();
+
+        function copyToClipboard(button) {
+            const codeBlock = button.nextElementSibling.innerText;
+            navigator.clipboard.writeText(codeBlock).then(() => {
+                button.querySelector('img').src = 'https://cdn.iconscout.com/icon/free/png-256/check-1781599-1518574.png';
+                setTimeout(() => {
+                    button.querySelector('img').src = 'https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png';
+                }, 2000);
+            }).catch(err => {
+                console.error('Failed to copy: ', err);
+            });
+        }
     </script>
 </body>
 </html>