-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
58 lines (58 loc) · 4.21 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sabotage Game</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Permanent+Marker&family=Roboto:wght@400;500;700;900&family=Nanum+Gothic:wght@400;700&family=Hi+Melody&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/landing.css">
</head>
<body>
<div class="landing-body main-container">
<h1>Sabotage Game</h1>
<h3>Select your chat bubble color:</h3>
<div class="color-picker row no-gutters">
<div class="color col-3 selected" style="background-color: #DE5151"></div>
<div class="color col-3" style="background-color: #FB861A"></div>
<div class="color col-3" style="background-color: #F4FF52"></div>
<div class="color col-3" style="background-color: #72BB45"></div>
<div class="color col-3" style="background-color: #3066BE"></div>
<div class="color col-3" style="background-color: #5081C5"></div>
<div class="color col-3" style="background-color: #BF5FFF"></div>
<div class="color col-3" style="background-color: #CD5C5C"></div>
<div class="color col-3" style="background-color: #53FF45"></div>
<div class="color col-3" style="background-color: #67E6EC"></div>
<div class="color col-3" style="background-color: #EAADEA"></div>
<div class="color col-3" style="background-color: #CD9B9B"></div>
<div class="color col-3" style="background-color: #FBB7C0"></div>
<div class="color col-3" style="background-color: #A4D4B4"></div>
<div class="color col-3" style="background-color: #CDD1DE"></div>
<div class="color col-3" style="background-color: #eeeeee"></div>
</div>
<h3>Select chat message font:</h3>
<select class="row mb-2 custom-select" id="font-picker">
<option value="Nanum Pen Script, cursive" style="font-family: 'Nanum Pen Script', cursive;">Nanum Pen Script</option>
<option value="Nanum Gothic, sans-serif" style="font-family: 'Nanum Gothic', sans-serif;">Nanum Gothic</option>
<option value="Roboto, sans-serif" style="font-family: 'Roboto', sans-serif;">Roboto</option>
<option value="Hi Melody, cursive" style="font-family: 'Hi Melody', cursive;">Hi Melody</option>
<option value="Times New Roman, sans-serif" style="font-family: 'Times New Roman', sans-serif;">Times New Roman</option>
<option value="Simson, sans-serif" style="font-family: 'Simson', sans-serif;">Simson</option>
</select>
<form action="public" id="username-form">
<input type="text" placeholder="USERNAME" id="username-input" name="username" maxlength="10">
<button type="submit" id="join-btn">JOIN</button>
</form>
<div class="alert alert-danger mt-3" id="error-feedback">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/h2non/jsHashes/master/hashes.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="scripts/landing.min.js"></script>
</body>
</html>