Update index.html
Browse files- index.html +103 -134
index.html
CHANGED
@@ -10,124 +10,125 @@
|
|
10 |
<title>LuminAI API Client</title>
|
11 |
<style>
|
12 |
body {
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
20 |
-
|
21 |
|
22 |
-
|
23 |
-
|
24 |
-
|
25 |
-
|
26 |
-
|
27 |
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
-
|
33 |
-
|
34 |
-
|
|
|
35 |
|
36 |
-
|
37 |
-
|
38 |
-
|
39 |
-
|
40 |
-
|
41 |
-
|
42 |
|
43 |
-
|
44 |
-
|
45 |
-
|
46 |
|
47 |
-
|
48 |
-
|
49 |
-
|
50 |
-
|
51 |
|
52 |
-
|
53 |
-
|
54 |
-
|
55 |
-
|
56 |
-
|
57 |
-
|
58 |
-
|
59 |
-
|
60 |
-
|
61 |
|
62 |
-
|
63 |
-
|
64 |
-
|
65 |
-
|
66 |
-
|
67 |
|
68 |
-
|
69 |
-
|
70 |
-
|
71 |
-
|
72 |
-
|
73 |
-
|
74 |
-
|
75 |
-
|
76 |
-
|
77 |
|
78 |
-
|
79 |
-
|
80 |
-
|
81 |
-
|
82 |
|
83 |
-
|
84 |
-
|
85 |
-
|
86 |
-
|
87 |
-
|
88 |
-
|
89 |
|
90 |
-
|
91 |
-
|
92 |
-
|
93 |
-
|
94 |
-
|
95 |
-
|
96 |
-
|
97 |
-
|
98 |
|
99 |
-
|
100 |
-
|
101 |
-
|
102 |
-
|
103 |
|
104 |
-
|
105 |
-
|
106 |
-
|
107 |
-
|
108 |
-
|
109 |
-
|
110 |
|
111 |
-
|
112 |
-
|
113 |
-
|
114 |
-
|
115 |
-
|
116 |
-
|
117 |
|
118 |
-
|
119 |
-
|
120 |
-
|
121 |
|
122 |
-
|
123 |
-
|
124 |
-
|
125 |
-
|
126 |
-
|
127 |
-
|
128 |
-
|
129 |
-
|
130 |
-
|
131 |
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
|
132 |
}
|
133 |
|
@@ -294,15 +295,6 @@
|
|
294 |
background-color: #007aff; /* Ganti warna latar belakang saat tombol dihover */
|
295 |
border: 2px solid #007aff; /* Ganti warna border saat tombol dihover */
|
296 |
}
|
297 |
-
header {
|
298 |
-
/* existing styles */
|
299 |
-
transition: height 0.3s ease;
|
300 |
-
}
|
301 |
-
|
302 |
-
.dark-mode header {
|
303 |
-
/* existing styles */
|
304 |
-
height: 40px;
|
305 |
-
}
|
306 |
|
307 |
</style>
|
308 |
</head>
|
@@ -466,29 +458,6 @@ themeSwitch.addEventListener('change', () => {
|
|
466 |
console.error('Failed to copy: ', err);
|
467 |
});
|
468 |
}
|
469 |
-
const themeSwitch = document.getElementById('theme-switch');
|
470 |
-
const pageHeader = document.getElementById('page-header');
|
471 |
-
|
472 |
-
function toggleDarkMode() {
|
473 |
-
document.body.classList.toggle('dark-mode');
|
474 |
-
|
475 |
-
// Change header behavior on scroll
|
476 |
-
if (document.body.classList.contains('dark-mode')) {
|
477 |
-
window.addEventListener('scroll', () => {
|
478 |
-
if (window.scrollY > 0 && window.scrollY < 150) {
|
479 |
-
pageHeader.style.height = `calc(40px + ${window.scrollY * 0.5}px)`;
|
480 |
-
} else if (window.scrollY >= 150) {
|
481 |
-
pageHeader.style.height = '80px';
|
482 |
-
} else {
|
483 |
-
pageHeader.style.height = '40px';
|
484 |
-
}
|
485 |
-
});
|
486 |
-
} else {
|
487 |
-
window.removeEventListener('scroll', headerScrollFunction);
|
488 |
-
}
|
489 |
-
}
|
490 |
-
|
491 |
-
themeSwitch.addEventListener('change', toggleDarkMode);
|
492 |
</script>
|
493 |
</body>
|
494 |
</html>
|
|
|
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;
|
19 |
+
transition: background-color 0.3s, color 0.3s;
|
20 |
+
}
|
21 |
|
22 |
+
.container {
|
23 |
+
max-width: 1000px;
|
24 |
+
margin: 40px auto;
|
25 |
+
padding: 0 20px;
|
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 |
+
transition: height 0.3s ease; /* Add transition for header height */
|
35 |
+
}
|
36 |
|
37 |
+
header h1 {
|
38 |
+
margin: 0;
|
39 |
+
font-size: 2.5em;
|
40 |
+
font-weight: 700;
|
41 |
+
font-family: 'Playfair Display', serif;
|
42 |
+
}
|
43 |
|
44 |
+
.main {
|
45 |
+
margin-top: 20px;
|
46 |
+
}
|
47 |
|
48 |
+
h2, h3 {
|
49 |
+
color: #4a90e2;
|
50 |
+
font-weight: 500;
|
51 |
+
}
|
52 |
|
53 |
+
.code-block {
|
54 |
+
background: #eef7ff;
|
55 |
+
padding: 15px;
|
56 |
+
border-left: 5px solid #4a90e2;
|
57 |
+
margin: 20px 0;
|
58 |
+
position: relative;
|
59 |
+
border-radius: 5px;
|
60 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
61 |
+
}
|
62 |
|
63 |
+
.code-block pre {
|
64 |
+
margin: 0;
|
65 |
+
overflow-x: auto;
|
66 |
+
font-size: 0.9em;
|
67 |
+
}
|
68 |
|
69 |
+
.copy-btn {
|
70 |
+
position: absolute;
|
71 |
+
top: 10px;
|
72 |
+
right: 10px;
|
73 |
+
background: none;
|
74 |
+
border: none;
|
75 |
+
cursor: pointer;
|
76 |
+
outline: none;
|
77 |
+
}
|
78 |
|
79 |
+
.copy-btn img {
|
80 |
+
width: 24px;
|
81 |
+
height: 24px;
|
82 |
+
}
|
83 |
|
84 |
+
.stats-container {
|
85 |
+
display: grid;
|
86 |
+
grid-template-columns: 1fr 1fr;
|
87 |
+
gap: 20px;
|
88 |
+
margin-top: 40px;
|
89 |
+
}
|
90 |
|
91 |
+
.stat-box {
|
92 |
+
background: #fff;
|
93 |
+
padding: 20px;
|
94 |
+
border-radius: 10px;
|
95 |
+
text-align: center;
|
96 |
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
97 |
+
transition: transform 0.3s, box-shadow 0.3s;
|
98 |
+
}
|
99 |
|
100 |
+
.stat-box:hover {
|
101 |
+
transform: translateY(-10px);
|
102 |
+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
103 |
+
}
|
104 |
|
105 |
+
.stat-box h3 {
|
106 |
+
margin: 0;
|
107 |
+
font-size: 1.2em;
|
108 |
+
color: #4a90e2;
|
109 |
+
font-weight: 500;
|
110 |
+
}
|
111 |
|
112 |
+
.stat-box p {
|
113 |
+
margin: 10px 0 0;
|
114 |
+
font-size: 2.5em;
|
115 |
+
font-weight: bold;
|
116 |
+
color: #333;
|
117 |
+
}
|
118 |
|
119 |
+
.stat-box.full-width {
|
120 |
+
grid-column: span 2;
|
121 |
+
}
|
122 |
|
123 |
+
footer {
|
124 |
+
background: linear-gradient(90deg, #4a90e2, #007aff);
|
125 |
+
color: #fff;
|
126 |
+
text-align: center;
|
127 |
+
padding: 20px 0;
|
128 |
+
position: relative;
|
129 |
+
bottom: 0;
|
130 |
+
width: 100%;
|
131 |
+
margin-top: 40px
|
132 |
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
|
133 |
}
|
134 |
|
|
|
295 |
background-color: #007aff; /* Ganti warna latar belakang saat tombol dihover */
|
296 |
border: 2px solid #007aff; /* Ganti warna border saat tombol dihover */
|
297 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
298 |
|
299 |
</style>
|
300 |
</head>
|
|
|
458 |
console.error('Failed to copy: ', err);
|
459 |
});
|
460 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
461 |
</script>
|
462 |
</body>
|
463 |
</html>
|