⭐ Moe-Counter Compatible Website Hit Counter Written in Gleam
mayu.due.moe
hit-counter
svg
moe
feat(index.html): random image on desktop
+75
-2
+75
-2
index.html
+75
-2
index.html
···
33
33
0 6px 20px -3px rgba(0, 0, 0, 0.2);
34
34
}
35
35
36
-
img {
36
+
.example-image {
37
37
display: block;
38
38
margin: 10px 0;
39
39
width: 100%;
···
156
156
select {
157
157
margin-bottom: unset;
158
158
}
159
+
160
+
.mascot {
161
+
display: none;
162
+
}
163
+
}
164
+
165
+
@media (min-width: 768px) {
166
+
.mascot {
167
+
position: fixed;
168
+
bottom: 0;
169
+
right: 20px;
170
+
width: 300px;
171
+
margin: 0;
172
+
border-radius: 0;
173
+
z-index: -1;
174
+
}
159
175
}
160
176
</style>
161
177
···
167
183
Enter the username you'd like to use as the ID of your counter.
168
184
</p>
169
185
170
-
<input type="text" id="idInput" placeholder="@demo" />
186
+
<input type="text" id="idInput" placeholder="demo" />
171
187
172
188
<p></p>
173
189
···
197
213
id="example"
198
214
src="https://counter.due.moe/get/@demo"
199
215
alt="Example counter"
216
+
class="example-image"
200
217
/>
201
218
202
219
<pre id="copy-codes" class="copy-codes">hi</pre>
···
213
230
</div>
214
231
</main>
215
232
233
+
<img
234
+
src="https://i.imgur.com/efamPLp.png"
235
+
alt="Mascot"
236
+
class="mascot"
237
+
title="Mascot"
238
+
/>
239
+
216
240
<script>
217
241
let inputTimeout;
218
242
const idInput = document.getElementById("idInput");
···
227
251
image.src = `https://counter.due.moe/get/@${inputValue}?theme=${themeValue}`;
228
252
copyCodesInput.innerText = `\n\n<img src="${image.src}" alt="${inputValue}" />`;
229
253
};
254
+
const mascots = [
255
+
{ name: "Akaza Akari", image: "https://i.imgur.com/efamPLp.png" },
256
+
{ name: "Akemi Homura", image: "https://i.imgur.com/8v6aSbV.png" },
257
+
{ name: "Akiyama Mio", image: "https://i.imgur.com/fgbEdWe.png" },
258
+
{ name: "Ali Baba", image: "https://i.imgur.com/FWC00jB.png" },
259
+
{ name: "Cirno", image: "https://i.imgur.com/u65u8oN.png" },
260
+
{ name: "Fubuki Atsuya", image: "https://i.imgur.com/97DaEBD.png" },
261
+
{ name: "Gasai Yuno", image: "https://i.imgur.com/BurJnOd.png" },
262
+
{ name: "Hatsune Miku", image: "https://i.imgur.com/HsqOvDJ.png" },
263
+
{ name: "Hirasawa Yui", image: "https://i.imgur.com/ZttwSus.png" },
264
+
{
265
+
name: "Hitagi Senjougahara",
266
+
image: "https://i.imgur.com/ttQDirH.png",
267
+
},
268
+
{ name: "Horo", image: "https://i.imgur.com/4F6BAMZ.png" },
269
+
{ name: "Kaname Madoka", image: "https://i.imgur.com/TVlagl3.png" },
270
+
{ name: "Kikuchi Makoto", image: "https://i.imgur.com/aXVz09Y.png" },
271
+
{ name: "Kirisame Marisa", image: "https://i.imgur.com/MCvbGgt.png" },
272
+
{ name: "Kisaragi Chihaya", image: "https://i.imgur.com/4Hdd0R8.png" },
273
+
{ name: "Kousaka Kirino", image: "https://i.imgur.com/E0sdnuC.png" },
274
+
{ name: "Kurisu Makise", image: "https://i.imgur.com/pMNliiX.png" },
275
+
{ name: "Kuriyama Mirai", image: "https://i.imgur.com/TwcfQPD.png" },
276
+
{ name: "Kuroko no Basuke", image: "https://i.imgur.com/FNgiG0D.png" },
277
+
{ name: "Mashiro Shiina", image: "https://i.imgur.com/BxJylsO.png" },
278
+
{ name: "Mayoi Hachikuji", image: "https://i.imgur.com/Xgzke7s.png" },
279
+
{ name: "Miyamoto Konatsu", image: "https://i.imgur.com/GhwBI5n.png" },
280
+
{ name: "Nagase Iori", image: "https://i.imgur.com/SRWU4e1.png" },
281
+
{ name: "Nakano Azusa", image: "https://i.imgur.com/pfqZLHo.png" },
282
+
{ name: "Poko Fox", image: "https://i.imgur.com/OF68sMQ.png" },
283
+
{ name: "Remilia Scarlet", image: "https://i.imgur.com/3YSqyiI.png" },
284
+
{ name: "Ruri Gokou", image: "https://i.imgur.com/UtjqvU6.png" },
285
+
{ name: "Saber", image: "https://i.imgur.com/H7GtZ9j.png" },
286
+
{ name: "Shana", image: "https://i.imgur.com/MPD95PX.png" },
287
+
{ name: "Touwa Erio", image: "https://i.imgur.com/AFINQjc.png" },
288
+
{ name: "Yin", image: "https://i.imgur.com/rddrYFR.png" },
289
+
{ name: "Yoko Littner", image: "https://i.imgur.com/bEPA1rz.png" },
290
+
{
291
+
name: "Yukinoshita Yukino",
292
+
image: "https://i.imgur.com/uu6Dh0I.png",
293
+
},
294
+
{ name: "Yuuki Asuna", image: "https://i.imgur.com/283FX36.png" },
295
+
{ name: "Yuzuki Yukari", image: "https://i.imgur.com/84HOYIc.png" },
296
+
];
230
297
231
298
copyCodesInput.innerText = `\n\n<img src="${image.src}" alt="${inputValue}" />`;
232
299
···
236
303
inputTimeout = setTimeout(set, 500);
237
304
});
238
305
themeSelect.addEventListener("change", set);
306
+
307
+
const randomMascot = mascots[Math.floor(Math.random() * mascots.length)];
308
+
309
+
document.querySelector(".mascot").src = randomMascot.image;
310
+
document.querySelector(".mascot").alt = randomMascot.name;
311
+
document.querySelector(".mascot").title = randomMascot.name;
239
312
</script>
240
313
</body>
241
314
</html>