Skip to content

Commit db60de7

Browse files
LauraAllObeLauraAllObe
committed
update colors demo
1 parent 1b8c655 commit db60de7

File tree

1 file changed

+128
-7
lines changed

1 file changed

+128
-7
lines changed

‎packages/cloudflare-worker/src/demo/demo.html‎

Lines changed: 128 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,81 @@ <h1>LeetCode Stats Card</h1>
3636
</select>
3737
</div>
3838
<div class="input-group">
39-
<label for="colors">Colors</label>
40-
<input id="colors" placeholder="#1e1e2e,#45475a,#cdd6f4,#bac2de,#fab387,#a6e3a1,#f9e2af,#f38ba8" />
39+
<label>Colors</label>
40+
<div class="colors-grid">
41+
<div class="color-field">
42+
<span>bg0</span>
43+
<input
44+
type="color"
45+
id="color-bg0"
46+
class="color-input"
47+
value="#1e1e2e"
48+
/>
49+
</div>
50+
<div class="color-field">
51+
<span>bg1</span>
52+
<input
53+
type="color"
54+
id="color-bg1"
55+
class="color-input"
56+
value="#45475a"
57+
/>
58+
</div>
59+
<div class="color-field">
60+
<span>text0</span>
61+
<input
62+
type="color"
63+
id="color-text0"
64+
class="color-input"
65+
value="#cdd6f4"
66+
/>
67+
</div>
68+
<div class="color-field">
69+
<span>text1</span>
70+
<input
71+
type="color"
72+
id="color-text1"
73+
class="color-input"
74+
value="#bac2de"
75+
/>
76+
</div>
77+
<div class="color-field">
78+
<span>color0</span>
79+
<input
80+
type="color"
81+
id="color-color0"
82+
class="color-input"
83+
value="#fab387"
84+
/>
85+
</div>
86+
<div class="color-field">
87+
<span>color1</span>
88+
<input
89+
type="color"
90+
id="color-color1"
91+
class="color-input"
92+
value="#a6e3a1"
93+
/>
94+
</div>
95+
<div class="color-field">
96+
<span>color2</span>
97+
<input
98+
type="color"
99+
id="color-color2"
100+
class="color-input"
101+
value="#f9e2af"
102+
/>
103+
</div>
104+
<div class="color-field">
105+
<span>color3</span>
106+
<input
107+
type="color"
108+
id="color-color3"
109+
class="color-input"
110+
value="#f38ba8"
111+
/>
112+
</div>
113+
</div>
41114
</div>
42115
<div class="input-group">
43116
<label for="extension">Extension</label>
@@ -283,6 +356,35 @@ <h1>LeetCode Stats Card</h1>
283356
text-decoration: underline;
284357
}
285358

359+
.colors-grid {
360+
display: grid;
361+
grid-template-columns: repeat(8, minmax(0, 1fr));
362+
gap: 0.5rem;
363+
}
364+
365+
.color-field {
366+
display: flex;
367+
flex-direction: column;
368+
align-items: flex-start;
369+
font-size: 12px;
370+
gap: 0.25rem;
371+
}
372+
373+
.color-field span {
374+
opacity: 0.8;
375+
}
376+
377+
.color-field input[type="color"] {
378+
width: 100%;
379+
aspect-ratio: 1 / 1;
380+
border: none;
381+
border-radius: 8px;
382+
cursor: pointer;
383+
background: none;
384+
padding: 0;
385+
appearance: none;
386+
}
387+
286388
@media (max-width: 600px) {
287389
body {
288390
padding: 0.5rem;
@@ -362,6 +464,10 @@ <h1>LeetCode Stats Card</h1>
362464
font-size: 0.9rem;
363465
margin: 1rem 0;
364466
}
467+
468+
.colors-grid {
469+
grid-template-columns: repeat(2, minmax(0, 1fr));
470+
}
365471
}
366472
</style>
367473
<script>
@@ -380,16 +486,28 @@ <h1>LeetCode Stats Card</h1>
380486
}
381487

382488
function setupAutoPreview() {
383-
// Debounced preview for username input
384489
const debouncedPreview = debounce(preview, 1000);
385490
document.querySelector("#username").addEventListener("input", debouncedPreview);
386491

387-
// Immediate preview for other inputs
388-
["theme","font","extension","site","colors"].forEach((id) => {
492+
["theme", "font", "extension", "site"].forEach((id) => {
389493
const el = document.querySelector("#" + id);
390494
el.addEventListener("change", preview);
391-
if (id === "colors") el.addEventListener("input", preview);
392495
});
496+
497+
document.querySelectorAll(".color-input").forEach((el) => {
498+
el.addEventListener("input", preview);
499+
el.addEventListener("change", preview);
500+
});
501+
}
502+
503+
function getColors() {
504+
const order = ["bg0", "bg1", "text0", "text1", "color0", "color1", "color2", "color3"];
505+
return order
506+
.map((key) => {
507+
const el = document.querySelector("#color-" + key);
508+
return el ? el.value.trim() : "";
509+
})
510+
.join(",");
393511
}
394512

395513
function toggleTheme() {
@@ -404,6 +522,9 @@ <h1>LeetCode Stats Card</h1>
404522
if (!value("username")) {
405523
return "";
406524
}
525+
526+
const colors = getColors();
527+
407528
return (
408529
location.origin +
409530
"/" +
@@ -412,7 +533,7 @@ <h1>LeetCode Stats Card</h1>
412533
encodeURIComponent(value("theme")) +
413534
"&font=" +
414535
encodeURIComponent(value("font")) +
415-
(value("colors") ? "&colors=" + encodeURIComponent(value("colors")) : "") +
536+
(colors ? "&colors=" + encodeURIComponent(colors) : "") +
416537
(value("extension") ? "&ext=" + encodeURIComponent(value("extension")) : "") +
417538
(value("site") === "cn" ? "&site=cn" : "")
418539
);

0 commit comments

Comments
 (0)