Update index.html
Browse files- index.html +69 -13
index.html
CHANGED
@@ -9,6 +9,68 @@
|
|
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;
|
@@ -304,19 +366,13 @@ footer {
|
|
304 |
<h1>LuminAI API Client</h1>
|
305 |
</header>
|
306 |
<div class="container">
|
307 |
-
<div class="toggle-switch"
|
308 |
-
|
309 |
-
|
310 |
-
|
311 |
-
|
312 |
-
|
313 |
-
|
314 |
-
<div class="dot" style="background-color: #fff; border-radius: 50%; width: 22px; height: 22px; position: absolute; top: 2px; left: 2px; transition: 0.3s;"></div>
|
315 |
-
</div>
|
316 |
-
<div class="moon" style="background-color: #bbb; border-radius: 50%; width: 22px; height: 22px;">
|
317 |
-
π <!-- Tambahkan simbol bulan -->
|
318 |
-
</div>
|
319 |
-
</label>
|
320 |
</div>
|
321 |
|
322 |
|
|
|
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 |
+
.toggle-switch {
|
13 |
+
position: absolute;
|
14 |
+
top: 10px;
|
15 |
+
right: 10px;
|
16 |
+
display: flex;
|
17 |
+
align-items: center;
|
18 |
+
}
|
19 |
+
|
20 |
+
#theme-switch {
|
21 |
+
display: none;
|
22 |
+
}
|
23 |
+
|
24 |
+
.toggle-container {
|
25 |
+
display: flex;
|
26 |
+
align-items: center;
|
27 |
+
justify-content: space-between;
|
28 |
+
background-color: #ccc;
|
29 |
+
border-radius: 34px;
|
30 |
+
width: 60px;
|
31 |
+
height: 30px;
|
32 |
+
padding: 3px;
|
33 |
+
position: relative;
|
34 |
+
transition: background-color 0.3s ease;
|
35 |
+
}
|
36 |
+
|
37 |
+
.dot {
|
38 |
+
background-color: #fff;
|
39 |
+
border-radius: 50%;
|
40 |
+
width: 24px;
|
41 |
+
height: 24px;
|
42 |
+
position: absolute;
|
43 |
+
top: 3px;
|
44 |
+
left: 3px;
|
45 |
+
transition: left 0.3s ease;
|
46 |
+
}
|
47 |
+
|
48 |
+
.toggle-container .sun,
|
49 |
+
.toggle-container .moon {
|
50 |
+
display: flex;
|
51 |
+
align-items: center;
|
52 |
+
justify-content: center;
|
53 |
+
width: 24px;
|
54 |
+
height: 24px;
|
55 |
+
position: absolute;
|
56 |
+
top: 3px;
|
57 |
+
}
|
58 |
+
|
59 |
+
.toggle-container .sun {
|
60 |
+
left: 3px;
|
61 |
+
}
|
62 |
+
|
63 |
+
.toggle-container .moon {
|
64 |
+
right: 3px;
|
65 |
+
}
|
66 |
+
|
67 |
+
#theme-switch:checked + .toggle-container {
|
68 |
+
background-color: #4a90e2;
|
69 |
+
}
|
70 |
+
|
71 |
+
#theme-switch:checked + .toggle-container .dot {
|
72 |
+
left: calc(100% - 3px - 24px);
|
73 |
+
}
|
74 |
body {
|
75 |
font-family: 'Roboto', sans-serif;
|
76 |
background-color: #f5f7fa;
|
|
|
366 |
<h1>LuminAI API Client</h1>
|
367 |
</header>
|
368 |
<div class="container">
|
369 |
+
<div class="toggle-switch">
|
370 |
+
<input type="checkbox" id="theme-switch">
|
371 |
+
<label for="theme-switch" class="toggle-container">
|
372 |
+
<div class="sun">βοΈ</div>
|
373 |
+
<div class="dot"></div>
|
374 |
+
<div class="moon">π</div>
|
375 |
+
</label>
|
|
|
|
|
|
|
|
|
|
|
|
|
376 |
</div>
|
377 |
|
378 |
|