Skip to content

Commit db934ef

Browse files
Adityakishore0Adityakishore0
committed
Updated UI in demo.html
1 parent 26466ee commit db934ef

File tree

1 file changed

+76
-42
lines changed

1 file changed

+76
-42
lines changed

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

+76-42
Original file line numberDiff line numberDiff line change
@@ -2,73 +2,94 @@
22
<html>
33
<head>
44
<meta charset="UTF-8" />
5-
<link
6-
rel="icon"
7-
href="https://raw.githubusercontent.com/JacobLinCool/leetcode-stats-card/main/favicon/leetcode.ico"
8-
/>
5+
<link rel="icon" href="https://raw.githubusercontent.com/JacobLinCool/leetcode-stats-card/main/favicon/leetcode.ico" />
96
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
107
<title>LeetCode Stats Card</title>
118
<meta property="og:title" content="LeetCode Stats Card" />
12-
<meta
13-
property="og:description"
14-
content="A simple tool for every leetcoder. Show your leetcode stats on your GitHub profile or your website!"
15-
/>
9+
<meta property="og:description" content="A simple tool for every leetcoder. Show your leetcode stats on your GitHub profile or your website!" />
1610
</head>
1711
<body>
1812
<h1>LeetCode Stats Card</h1>
19-
<input id="username" placeholder="Your LeetCode Username" />
20-
<select id="theme">
21-
${theme_options}
22-
</select>
23-
<select id="font">
24-
${font_options}
25-
</select>
26-
<select id="extension">
27-
<option value="" selected>No Extension</option>
28-
<option value="activity">Activity</option>
29-
<option value="contest">Contest</option>
30-
<option value="heatmap">Heatmap</option>
31-
</select>
32-
<select id="site">
33-
<option value="us" selected>Source: LeetCode</option>
34-
<option value="cn">Source: LeetCode CN</option>
35-
</select>
13+
<div class="input-group">
14+
<label for="username">Username:</label>
15+
<input id="username" placeholder="Your LeetCode Username" />
16+
</div>
17+
<div class="input-group">
18+
<label for="theme">Theme:</label>
19+
<select id="theme">${theme_options}</select>
20+
</div>
21+
<div class="input-group">
22+
<label for="font">Font:</label>
23+
<select id="font">${font_options}</select>
24+
</div>
25+
<div class="input-group">
26+
<label for="extension">Extension:</label>
27+
<select id="extension">
28+
<option value="" selected>No Extension</option>
29+
<option value="activity">Activity</option>
30+
<option value="contest">Contest</option>
31+
<option value="heatmap">Heatmap</option>
32+
</select>
33+
</div>
34+
<div class="input-group">
35+
<label for="site">Source:</label>
36+
<select id="site">
37+
<option value="us" selected>Source: LeetCode</option>
38+
<option value="cn">Source: LeetCode CN</option>
39+
</select>
40+
</div>
3641
<div>
3742
<button onclick="preview()">Preview</button>
3843
<button onclick="go()">Go</button>
3944
<button onclick="md()">Markdown</button>
4045
</div>
4146
<div><img id="preview" /></div>
4247
<div style="margin-top: 20px">
43-
<a
44-
href="https://github.com/JacobLinCool/LeetCode-Stats-Card"
45-
target="_blank"
46-
style="color: royalblue; text-decoration: none"
47-
>Documentation on GitHub</a
48-
>
48+
<a href="https://github.com/JacobLinCool/LeetCode-Stats-Card" target="_blank" style="color: royalblue; text-decoration: none">Documentation on GitHub</a>
49+
</div>
50+
<div class="theme-toggle" onclick="toggleTheme()">
51+
<svg id="theme-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
52+
<circle cx="12" cy="12" r="5"></circle>
53+
<path d="M12 1v2"></path>
54+
<path d="M12 21v2"></path>
55+
<path d="M4.22 4.22l1.42 1.42"></path>
56+
<path d="M18.36 18.36l1.42 1.42"></path>
57+
<path d="M1 12h2"></path>
58+
<path d="M21 12h2"></path>
59+
<path d="M4.22 19.78l1.42-1.42"></path>
60+
<path d="M18.36 5.64l1.42-1.42"></path>
61+
</svg>
4962
</div>
5063
<style>
51-
html,
52-
body {
64+
html, body {
5365
width: 100%;
5466
height: 100%;
5567
margin: 0;
5668
padding: 0;
57-
5869
display: flex;
5970
flex-direction: column;
6071
justify-content: center;
6172
align-items: center;
62-
6373
font-family: sans-serif;
74+
background-color: var(--bg-color);
75+
color: var(--text-color);
6476
}
6577
h1 {
6678
margin: 8px 0;
6779
}
68-
input,
69-
select {
80+
.input-group {
81+
display: flex;
82+
align-items: center;
7083
width: 320px;
7184
margin: 8px 0;
85+
}
86+
.input-group label {
87+
width: 100px;
88+
text-align: left;
89+
font-weight: 600;
90+
}
91+
input, select {
92+
flex-grow: 1;
7293
padding: 2px;
7394
}
7495
button {
@@ -78,7 +99,6 @@ <h1>LeetCode Stats Card</h1>
7899
div {
79100
width: 320px;
80101
margin: 8px 0;
81-
82102
display: flex;
83103
flex-direction: row;
84104
justify-content: center;
@@ -88,9 +108,26 @@ <h1>LeetCode Stats Card</h1>
88108
width: 100%;
89109
min-height: 128px;
90110
}
111+
.theme-toggle {
112+
cursor: pointer;
113+
margin-top: 10px;
114+
}
115+
:root {
116+
--bg-color: white;
117+
--text-color: black;
118+
}
119+
.dark-mode {
120+
--bg-color: black;
121+
--text-color: white;
122+
}
91123
</style>
92124
<script>
93-
preview();
125+
function toggleTheme() {
126+
document.body.classList.toggle('dark-mode');
127+
}
128+
function preview() {
129+
document.querySelector("#preview").src = url();
130+
}
94131
function url() {
95132
if (!value("username")) document.querySelector("#username").value = "JacobLinCool";
96133
return (
@@ -105,9 +142,6 @@ <h1>LeetCode Stats Card</h1>
105142
(value("site") === "cn" ? "&site=cn" : "")
106143
);
107144
}
108-
function preview() {
109-
document.querySelector("#preview").src = url();
110-
}
111145
function go() {
112146
let win = window.open();
113147
win.location = url();

0 commit comments

Comments
 (0)