Update index.html
Browse files- index.html +51 -24
index.html
CHANGED
@@ -6,10 +6,13 @@
|
|
6 |
<meta name="og:image" content="https://cdn.sazumi.moe/file/t1p7od.jpg">
|
7 |
<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.">
|
8 |
<link rel="icon" href="https://cdn.sazumi.moe/file/08kry0.webp" type="image/x-icon">
|
|
|
9 |
<title>LuminAI API Client</title>
|
10 |
<style>
|
11 |
body {
|
12 |
font-family: 'Roboto', sans-serif;
|
|
|
|
|
13 |
margin: 0;
|
14 |
padding: 0;
|
15 |
line-height: 1.6;
|
@@ -23,18 +26,18 @@
|
|
23 |
}
|
24 |
|
25 |
header {
|
26 |
-
background: #
|
27 |
color: #fff;
|
28 |
-
padding:
|
29 |
text-align: center;
|
30 |
-
|
31 |
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
32 |
}
|
33 |
|
34 |
header h1 {
|
35 |
margin: 0;
|
36 |
font-size: 2.5em;
|
37 |
-
font-weight:
|
|
|
38 |
}
|
39 |
|
40 |
.main {
|
@@ -42,14 +45,14 @@
|
|
42 |
}
|
43 |
|
44 |
h2, h3 {
|
45 |
-
color: #
|
46 |
-
font-weight:
|
47 |
}
|
48 |
|
49 |
.code-block {
|
50 |
-
background: #
|
51 |
padding: 15px;
|
52 |
-
border-left: 5px solid #
|
53 |
margin: 20px 0;
|
54 |
position: relative;
|
55 |
border-radius: 5px;
|
@@ -89,7 +92,7 @@
|
|
89 |
padding: 20px;
|
90 |
border-radius: 10px;
|
91 |
text-align: center;
|
92 |
-
box-shadow: 0 4px
|
93 |
transition: transform 0.3s, box-shadow 0.3s;
|
94 |
}
|
95 |
|
@@ -101,8 +104,8 @@
|
|
101 |
.stat-box h3 {
|
102 |
margin: 0;
|
103 |
font-size: 1.2em;
|
104 |
-
color: #
|
105 |
-
font-weight:
|
106 |
}
|
107 |
|
108 |
.stat-box p {
|
@@ -117,7 +120,7 @@
|
|
117 |
}
|
118 |
|
119 |
footer {
|
120 |
-
background: #
|
121 |
color: #fff;
|
122 |
text-align: center;
|
123 |
padding: 20px 0;
|
@@ -125,7 +128,7 @@
|
|
125 |
bottom: 0;
|
126 |
width: 100%;
|
127 |
margin-top: 40px;
|
128 |
-
box-shadow: 0 -4px
|
129 |
}
|
130 |
|
131 |
footer p {
|
@@ -134,32 +137,31 @@
|
|
134 |
}
|
135 |
|
136 |
.dark-mode {
|
137 |
-
background-color: #
|
138 |
-
color: #
|
139 |
}
|
140 |
|
141 |
.dark-mode header {
|
142 |
-
background: #333;
|
143 |
-
border-bottom-color: #444;
|
144 |
}
|
145 |
|
146 |
.dark-mode .code-block {
|
147 |
-
background: #
|
148 |
-
border-left-color: #
|
149 |
color: #ccc;
|
150 |
}
|
151 |
|
152 |
.dark-mode .stat-box {
|
153 |
-
background: #
|
154 |
color: #ccc;
|
155 |
}
|
156 |
|
157 |
.dark-mode footer {
|
158 |
-
background: #333;
|
159 |
}
|
160 |
|
161 |
.dark-mode h2, .dark-mode h3 {
|
162 |
-
color: #
|
163 |
}
|
164 |
|
165 |
.toggle-switch {
|
@@ -196,12 +198,36 @@
|
|
196 |
}
|
197 |
|
198 |
.toggle-switch input:checked + label {
|
199 |
-
background-color: #
|
200 |
}
|
201 |
|
202 |
.toggle-switch input:checked + label:before {
|
203 |
transform: translateX(24px);
|
204 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
205 |
</style>
|
206 |
</head>
|
207 |
<body>
|
@@ -310,6 +336,7 @@ lumin("query", "username", "logic", true)
|
|
310 |
<p id="total-requests">0</p>
|
311 |
</div>
|
312 |
</div>
|
|
|
313 |
</div>
|
314 |
</div>
|
315 |
<footer>
|
|
|
6 |
<meta name="og:image" content="https://cdn.sazumi.moe/file/t1p7od.jpg">
|
7 |
<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.">
|
8 |
<link rel="icon" href="https://cdn.sazumi.moe/file/08kry0.webp" type="image/x-icon">
|
9 |
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
10 |
<title>LuminAI API Client</title>
|
11 |
<style>
|
12 |
body {
|
13 |
font-family: 'Roboto', sans-serif;
|
14 |
+
background-color: #f5f7fa;
|
15 |
+
color: #444;
|
16 |
margin: 0;
|
17 |
padding: 0;
|
18 |
line-height: 1.6;
|
|
|
26 |
}
|
27 |
|
28 |
header {
|
29 |
+
background: linear-gradient(90deg, #4a90e2, #007aff);
|
30 |
color: #fff;
|
31 |
+
padding: 40px 0;
|
32 |
text-align: center;
|
33 |
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
|
34 |
}
|
35 |
|
36 |
header h1 {
|
37 |
margin: 0;
|
38 |
font-size: 2.5em;
|
39 |
+
font-weight: 700;
|
40 |
+
font-family: 'Playfair Display', serif;
|
41 |
}
|
42 |
|
43 |
.main {
|
|
|
45 |
}
|
46 |
|
47 |
h2, h3 {
|
48 |
+
color: #4a90e2;
|
49 |
+
font-weight: 500;
|
50 |
}
|
51 |
|
52 |
.code-block {
|
53 |
+
background: #eef7ff;
|
54 |
padding: 15px;
|
55 |
+
border-left: 5px solid #4a90e2;
|
56 |
margin: 20px 0;
|
57 |
position: relative;
|
58 |
border-radius: 5px;
|
|
|
92 |
padding: 20px;
|
93 |
border-radius: 10px;
|
94 |
text-align: center;
|
95 |
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
96 |
transition: transform 0.3s, box-shadow 0.3s;
|
97 |
}
|
98 |
|
|
|
104 |
.stat-box h3 {
|
105 |
margin: 0;
|
106 |
font-size: 1.2em;
|
107 |
+
color: #4a90e2;
|
108 |
+
font-weight: 500;
|
109 |
}
|
110 |
|
111 |
.stat-box p {
|
|
|
120 |
}
|
121 |
|
122 |
footer {
|
123 |
+
background: linear-gradient(90deg, #4a90e2, #007aff);
|
124 |
color: #fff;
|
125 |
text-align: center;
|
126 |
padding: 20px 0;
|
|
|
128 |
bottom: 0;
|
129 |
width: 100%;
|
130 |
margin-top: 40px;
|
131 |
+
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
|
132 |
}
|
133 |
|
134 |
footer p {
|
|
|
137 |
}
|
138 |
|
139 |
.dark-mode {
|
140 |
+
background-color: #1c1c1c;
|
141 |
+
color: #cfcfcf;
|
142 |
}
|
143 |
|
144 |
.dark-mode header {
|
145 |
+
background: linear-gradient(90deg, #333, #444);
|
|
|
146 |
}
|
147 |
|
148 |
.dark-mode .code-block {
|
149 |
+
background: #2b2b2b;
|
150 |
+
border-left-color: #4a90e2;
|
151 |
color: #ccc;
|
152 |
}
|
153 |
|
154 |
.dark-mode .stat-box {
|
155 |
+
background: #2b2b2b;
|
156 |
color: #ccc;
|
157 |
}
|
158 |
|
159 |
.dark-mode footer {
|
160 |
+
background: linear-gradient(90deg, #333, #444);
|
161 |
}
|
162 |
|
163 |
.dark-mode h2, .dark-mode h3 {
|
164 |
+
color: #4a90e2;
|
165 |
}
|
166 |
|
167 |
.toggle-switch {
|
|
|
198 |
}
|
199 |
|
200 |
.toggle-switch input:checked + label {
|
201 |
+
background-color: #4a90e2;
|
202 |
}
|
203 |
|
204 |
.toggle-switch input:checked + label:before {
|
205 |
transform: translateX(24px);
|
206 |
}
|
207 |
+
|
208 |
+
.button {
|
209 |
+
background-color: #007aff;
|
210 |
+
border: none;
|
211 |
+
color: white;
|
212 |
+
padding: 10px 20px;
|
213 |
+
text-align: center;
|
214 |
+
text-decoration: none;
|
215 |
+
display: inline-block;
|
216 |
+
font-size: 16px;
|
217 |
+
margin: 4px 2px;
|
218 |
+
cursor: pointer;
|
219 |
+
border-radius: 8px;
|
220 |
+
transition: background-color 0.3s, transform 0.3s;
|
221 |
+
}
|
222 |
+
|
223 |
+
.button:hover {
|
224 |
+
background-color: #005bb5;
|
225 |
+
transform: translateY(-2px);
|
226 |
+
}
|
227 |
+
|
228 |
+
.button:active {
|
229 |
+
background-color: #004080;
|
230 |
+
}
|
231 |
</style>
|
232 |
</head>
|
233 |
<body>
|
|
|
336 |
<p id="total-requests">0</p>
|
337 |
</div>
|
338 |
</div>
|
339 |
+
<button class="button">Learn More</button>
|
340 |
</div>
|
341 |
</div>
|
342 |
<footer>
|