-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (100 loc) · 4.87 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Twitch.tv random stream viewer">
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="./styles/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<script src="./scripts/languages.js"></script>
<script src="./scripts/library.js"></script>
<script src="./scripts/app.js" defer></script>
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<title>Twitch Roulette</title>
</head>
<body>
<div id="main-header" class="ui inverted borderless top fixed fluid menu">
<a href="."><i class="twitch icon inverted big"></i></a>
<a href="."><h3 class="header item">Twitch Roulette</h3></a>
<div class="right menu">
<div class="item">
<button id="history-button" class="ui button gray">HISTORY</button>
<button class="ui button primary spin">SPIN!</button>
</div>
</div>
<div class="ui modal">
<div class="header center-text">Viewing History</div>
<div id="history-content" class="scrolling content">
</div>
</div>
</div>
<div id="main-grid" class="ui padded grid">
<div class="five wide mobile four wide tablet three wide computer column" id="sidebar">
<div class="ui vertical borderless fluid text menu">
<h2 class="active center-text">Stream Filters</h2>
<div class="ui divider"></div>
<h3 class="center-text">Search Term</h3>
<form>
<div class="ui fluid action input">
<input id="search-input" type="text" autocomplete="off" placeholder="Search...">
<button id="search-button" class="ui icon button"><i class="search icon"></i></button>
</div>
</form>
<div class="ui hidden divider"></div>
<h3 class="center-text">Top Categories</h3>
<div class="ui fluid search selection dropdown">
<input id="category-input" class="search-field" type="hidden" name="category">
<i class="dropdown icon"></i>
<div class="default text">Select Category</div>
<div id="category-menu" class="menu filter-menu"></div>
</div>
<div class="ui hidden divider"></div>
<h3 class="center-text">Stream Tag</h3>
<div class="ui fluid search selection dropdown">
<input class="search-field" type="hidden" name="tag">
<i class="dropdown icon"></i>
<div class="default text">Select Tag</div>
<div id="tag-menu" class="menu filter-menu"></div>
</div>
<div class="ui hidden divider"></div>
<h3 class="center-text">Language</h3>
<div class="ui fluid search selection dropdown">
<input class="search-field" type="hidden" name="language">
<i class="dropdown icon"></i>
<div class="default text">Select Language</div>
<div id="language-menu" class="menu"></div>
</div>
<div class="ui hidden divider"></div>
<div id="chat-toggle" class="ui toggle checkbox">
<input id="chat-checkbox" type="checkbox" name="public">
<label id="toggle-label">Hide Chat</label>
</div>
<div class="ui hidden divider"></div>
<div id="darkmode-toggle" class="ui toggle checkbox">
<input id="darkmode-checkbox" type="checkbox" name="public">
<label>Dark Mode</label>
</div>
</div>
</div>
<div class="eleven wide mobile twelve wide tablet thirteen wide computer right floated column" id="content">
<div class="ui grid" id="main-content">
<div class="ui card" id="welcome-card">
<div class="content">
<h1>Welcome to Twitch Roulette!</h1>
<div class="ui divider"></div>
<div class="ui medium header">Use this site to discover new streamers and make new friends.</div>
<div class="ui medium header">Click the spin button to see a random live stream from <a href="https://twitch.tv" target="_blank">Twitch.tv</a></div>
<button class="massive ui primary button spin" id="main-spin-button">SPIN</button>
</div>
</div>
<div id="twitch-embed"></div>
</div>
</div>
</div>
<div class="ui footer"></div>
<script src="./scripts/semantic-config.js"></script>
</body>
</html>