-
Notifications
You must be signed in to change notification settings - Fork 0
/
queue.html
72 lines (72 loc) · 3.14 KB
/
queue.html
1
2
3
4
5
6
7
8
9
10
11
12
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>en-passant 🇺🇳 BOT Queue 🎟️</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<meta name="theme-color" content="#101827">
<meta name="author" content="Zachary Saine">
<style>
body { overflow-x: hidden; }
@font-face {
font-family: "Noto Color Emoji";
src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}
h1 {
font-family: -apple-system, ui-sans-serif, system-ui, "Apple Color Emoji", "Noto Color Emoji";
}
a, .text-blue { color: #6cbdff !important; }
.bot {
background: #5765F2;
border-radius: 2px;
padding: 2px 4px;
font-size: 10px;
color: #fff;
}
code.text-purple { color: #772ce8; }
code.text-green { color: #67ca44; }
</style>
</head>
<body class="bg-gray-900">
<div class="flex flex-col items-center justify-center w-screen min-h-screen bg-gray-900 py-10">
<h1 class="text-lg text-gray-200 font-medium">en-passant 🇺🇳 <span class="bot">BOT</span> Queue 🎟️</h1>
<h3 class="mt-6 uppercase mb-4"><b><a href="/queue/">🔄 Refresh</a></b></h3>
<div class="flex flex-col mt-6">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow overflow-hidden sm:rounded-lg">
<table class="min-w-full text-sm text-gray-400">
<thead class="bg-gray-800 text-xs uppercase font-medium">
<tr><td id="status" colspan="3" class="px-6 py-3 text-center tracking-wider uppercase text-blue"></td></tr>
<tr><td colspan="3" class="divider"><hr style="border-color:#18212c;border-top-width:2px;"></td></tr>
<tr>
<th scope="col" class="px-6 py-3 text-center tracking-wider" width="40px">#</th>
<th scope="col" class="px-6 py-3 text-center tracking-wider">Twitch Name</th>
<th scope="col" class="px-6 py-3 text-center tracking-wider">Chess.com</th>
</tr>
</thead>
<tbody id="list" class="bg-gray-800"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
const emojis = p => ({ off: '🔴', on:'🟢' }[p]);
const queue = `%QUEUE%`, challenge = `%CHALLENGE%`, subonly = `%SUBONLY%`;
document.getElementById('status').innerHTML = `
<b>Queue</b> ${emojis(queue)}
<b class="pl-5">Sub-only</b> ${emojis(subonly)}
<b class="pl-5">Challenge</b> ${emojis(challenge)}
`;
document.getElementById('list').innerHTML = `%LIST%`.map(
(m, i) => `<tr class="bg-black even:bg-opacity-20 odd:bg-opacity-30">
<td class="px-6 py-4 text-center whitespace-nowrap font-mono">${i + 1}</td>
<td class="px-6 py-4 text-center whitespace-nowrap font-mono"><a href="https://www.twitch.tv/${m.user}" target="_blank"><code class="text-purple">@${m.user}</code></a></td>
<td class="px-6 py-4 text-center whitespace-nowrap font-mono"><a href="https://www.chess.com/member/${m.profile}" target="_blank"><code class="text-green">${m.profile}</code></a></td>
</tr>`).join('\n');
</script>
</body>
</html>