-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
90 lines (90 loc) · 2.97 KB
/
index.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JustInChatters</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="header">
<div class="header__wrapper">
<h1>JustInChatters: who is in your chat?</h1>
<div class="user-search hide">
<label for="username">Search a username</label>
<input
type="text"
placeholder="Search for user"
id="username"
name="username"
onkeyup="filter_results()"
/>
</div>
<div id="lastupdate" class="hide">
This page will automatically update every 3 minutes. User count includes the broadcaster.
</div>
</div>
<div id="subheader" class="horizontal-space">
<div>
<div class="broadcaster">
<h2 id="broadcaster-name" class="hide"></h2>
</div>
<div id="totalcount" class="hide"><span></span> Chatters</div>
</div>
</div>
</header>
<div id="chatters"></div>
<div id="loader-wrapper" class="loader-hide">
<div id="loading" class="loading">
<div class="loading-1"></div>
<div class="loading-2"></div>
<div class="loading-3"></div>
<div class="loading-4"></div>
</div>
</div>
<div id="footer" class="footer main-footer--hide">
<div id="example" class="hide">
<p class="hide">
Each tile represents one (1) user and some have additional styling:
</p>
<div class="row hide">
<div>
<ul class="hide">
<li class="bot-user hide">known bot</li>
<li class="service-user hide">digital service</li>
<li class="custom-user hide">highlighted* user</li>
</ul>
</div>
<div class="hide highlight-info userlist">
<p>*You can add highlighted users by entering their Twitch username(s) into the field below and then click anywhere on the page. You can enter multiple usernames as comma-separated values (e.g. user1,user2). The highlight overrides all other styles.</p>
<label for="userlist">user1,user2</label>
<input
type="text"
placeholder="user1,user2"
id="userlist"
name="userlist"
onblur="apply_userlist()"
/>
</div>
</div>
<div class="footer--hide" onClick="hideFooter()">
<span id="footer--hide__text" class="footer--hide__text">Show Key</span>
<svg
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="footer--hide__icon"
>
<path
fill="currentColor"
d="M108 284c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h232c6.6 0 12 5.4 12 12v32c0 6.6-5.4 12-12 12H108zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
class=""
></path>
</svg>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>