Update index.html

index.html

@@ -6,10 +6,13 @@
     <meta name="og:image" content="https://cdn.sazumi.moe/file/t1p7od.jpg">
     <meta name="og:description" content="Revolutionize your daily conversations with Lumin AI, a powerful chatbot that helps you with tasks, answers questions, and even generates creative content. From scheduling appointments to writing emails, Lumin AI is your personal assistant in a chat.">
     <link rel="icon" href="https://cdn.sazumi.moe/file/08kry0.webp" type="image/x-icon">
+    <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>
         body {
             font-family: 'Roboto', sans-serif;
+            background-color: #f5f7fa;
+            color: #444;
             margin: 0;
             padding: 0;
             line-height: 1.6;
@@ -23,18 +26,18 @@
         }
 
         header {
-            background: #5A9BD3;
+            background: linear-gradient(90deg, #4a90e2, #007aff);
             color: #fff;
-            padding: 30px 0;
+            padding: 40px 0;
             text-align: center;
-            border-bottom: 3px solid #41729F;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
 
         header h1 {
             margin: 0;
             font-size: 2.5em;
-            font-weight: 400;
+            font-weight: 700;
+            font-family: 'Playfair Display', serif;
         }
 
         .main {
@@ -42,14 +45,14 @@
         }
 
         h2, h3 {
-            color: #5A9BD3;
-            font-weight: 400;
+            color: #4a90e2;
+            font-weight: 500;
         }
 
         .code-block {
-            background: #e0f7ff;
+            background: #eef7ff;
             padding: 15px;
-            border-left: 5px solid #5A9BD3;
+            border-left: 5px solid #4a90e2;
             margin: 20px 0;
             position: relative;
             border-radius: 5px;
@@ -89,7 +92,7 @@
             padding: 20px;
             border-radius: 10px;
             text-align: center;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
             transition: transform 0.3s, box-shadow 0.3s;
         }
 
@@ -101,8 +104,8 @@
         .stat-box h3 {
             margin: 0;
             font-size: 1.2em;
-            color: #5A9BD3;
-            font-weight: 400;
+            color: #4a90e2;
+            font-weight: 500;
         }
 
         .stat-box p {
@@ -117,7 +120,7 @@
         }
 
         footer {
-            background: #5A9BD3;
+            background: linear-gradient(90deg, #4a90e2, #007aff);
             color: #fff;
             text-align: center;
             padding: 20px 0;
@@ -125,7 +128,7 @@
             bottom: 0;
             width: 100%;
             margin-top: 40px;
-            box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
         }
 
         footer p {
@@ -134,32 +137,31 @@
         }
 
         .dark-mode {
-            background-color: #121212;
-            color: #e0e0e0;
+            background-color: #1c1c1c;
+            color: #cfcfcf;
         }
 
         .dark-mode header {
-            background: #333;
-            border-bottom-color: #444;
+            background: linear-gradient(90deg, #333, #444);
         }
 
         .dark-mode .code-block {
-            background: #1e1e1e;
-            border-left-color: #5A9BD3;
+            background: #2b2b2b;
+            border-left-color: #4a90e2;
             color: #ccc;
         }
 
         .dark-mode .stat-box {
-            background: #1e1e1e;
+            background: #2b2b2b;
             color: #ccc;
         }
 
         .dark-mode footer {
-            background: #333;
+            background: linear-gradient(90deg, #333, #444);
         }
 
         .dark-mode h2, .dark-mode h3 {
-            color: #5A9BD3;
+            color: #4a90e2;
         }
 
         .toggle-switch {
@@ -196,12 +198,36 @@
         }
 
         .toggle-switch input:checked + label {
-            background-color: #5A9BD3;
+            background-color: #4a90e2;
         }
 
         .toggle-switch input:checked + label:before {
             transform: translateX(24px);
         }
+
+        .button {
+            background-color: #007aff;
+            border: none;
+            color: white;
+            padding: 10px 20px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+            margin: 4px 2px;
+            cursor: pointer;
+            border-radius: 8px;
+            transition: background-color 0.3s, transform 0.3s;
+        }
+
+        .button:hover {
+            background-color: #005bb5;
+            transform: translateY(-2px);
+        }
+
+        .button:active {
+            background-color: #004080;
+        }
     </style>
 </head>
 <body>
@@ -310,6 +336,7 @@ lumin("query", "username", "logic", true)
                     <p id="total-requests">0</p>
                 </div>
             </div>
+            <button class="button">Learn More</button>
         </div>
     </div>
     <footer>