⭐ Moe-Counter Compatible Website Hit Counter Written in Gleam
mayu.due.moe
hit-counter
svg
moe
feat(index.html): theme selector
+39
-9
+39
-9
index.html
+39
-9
index.html
···
46
46
margin-bottom: 15px;
47
47
}
48
48
49
-
input {
49
+
input,
50
+
select {
50
51
background-color: rgb(11, 22, 34);
51
52
color: rgb(159, 173, 189);
52
53
border-radius: 4px;
···
56
57
line-height: 40px;
57
58
display: inline-block;
58
59
font-size: 0.9rem;
60
+
}
61
+
62
+
::placeholder {
63
+
color: #9fadbd;
64
+
}
65
+
66
+
select {
67
+
color: #9fadbd;
68
+
}
69
+
70
+
select:focus {
71
+
outline: none;
59
72
}
60
73
61
74
input:focus {
···
137
150
Enter the username you'd like to use as the ID of your counter.
138
151
</p>
139
152
140
-
<input type="text" id="inputField" placeholder="@demo" />
153
+
<input type="text" id="idInput" placeholder="@demo" />
154
+
155
+
<p></p>
156
+
157
+
<select id="themeSelect">
158
+
<option value="asoul">asoul</option>
159
+
<option value="gelbooru">gelbooru</option>
160
+
<option value="gelbooru-h">gelbooru-h</option>
161
+
<option value="moebooru">moebooru</option>
162
+
<option value="moebooru-h">moebooru-h</option>
163
+
<option value="rule34">rule34</option>
164
+
<option value="urushi">urushi</option>
165
+
</select>
141
166
142
167
<p class="attribution attribution-1">
143
168
Written by
···
173
198
174
199
<script>
175
200
let inputTimeout;
176
-
const idInput = document.getElementById("inputField");
201
+
const idInput = document.getElementById("idInput");
202
+
const themeSelect = document.getElementById("themeSelect");
177
203
const image = document.getElementById("example");
178
204
const copyCodesInput = document.getElementById("copy-codes");
179
205
let inputValue = "demo";
206
+
let themeValue = "asoul";
207
+
const set = () => {
208
+
inputValue = idInput.value || "demo";
209
+
themeValue = themeSelect.value || "asoul";
210
+
image.src = `https://counter.due.moe/get/@${inputValue}?theme=${themeValue}`;
211
+
copyCodesInput.innerText = `\n\n<img src="${image.src}" alt="${inputValue}" />`;
212
+
};
180
213
181
-
copyCodesInput.innerText = `\n\n<img src="https://counter.due.moe/get/@${inputValue}" alt="${inputValue}" />`;
214
+
copyCodesInput.innerText = `\n\n<img src="${image.src}" alt="${inputValue}" />`;
182
215
183
216
idInput.addEventListener("input", () => {
184
217
clearTimeout(inputTimeout);
185
218
186
-
inputTimeout = setTimeout(() => {
187
-
inputValue = idInput.value;
188
-
image.src = `https://counter.due.moe/get/@${inputValue}`;
189
-
copyCodesInput.innerText = `\n\n<img src="https://counter.due.moe/get/@${inputValue}" alt="${inputValue}" />`;
190
-
}, 500);
219
+
inputTimeout = setTimeout(set, 500);
191
220
});
221
+
themeSelect.addEventListener("change", set);
192
222
</script>
193
223
</body>
194
224
</html>