-
Notifications
You must be signed in to change notification settings - Fork 0
/
client.html
61 lines (55 loc) · 2.56 KB
/
client.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
<!DOCTYPE html>
<html>
<head>
<title>Othello</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="/css/main.css" />
<link rel="stylesheet" type="text/css" href="/css/board.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/main.js"></script>
<script src="/js/users.js"></script>
<script src="/js/Board.js"></script>
<script src="/js/Game.js"></script>
</head>
<body>
<p><img src="img/logo.png" class="logo" alt="logo" /></p>
<div id="container">
<!-- Sign up / Sign in forms -->
<div id="page-1">
<h3>Sign up</h3>
<p>Sign up if you want to play online against millions of players from all over the world. Play, win, and be the #1 !</p>
<form action="/signup" method="post" id="sign-up-form">
<p>
Nickname : <input type="text" name="nickname" /><br />
Password : <input type="password" name="password" /><br />
<input type="submit" value="Sign up" />
</p>
</form>
<h3>Sign in</h3>
<form action="/signin" method="post" id="sign-in-form">
<p>
Nickname : <input type="text" name="nickname" /><br />
Password : <input type="password" name="password" /><br />
<input type="submit" value="Sign in" />
</p>
</form>
</div>
<!-- Place where the player will decide when to start the game -->
<div id="page-2" class="on-right">
<p id="message"></p>
<h3>Welcome, <span id="nickname-display"></span></h3>
<p>You have <span id="wins-display"></span> wins against <span id="losses-display"></span> losses</p>
<p><button type="button" id="start-game">Start a game against a random player</button></p>
</div>
<!-- Game board -->
<div id="page-3" class="on-right">
<p id="status"></p>
<p id="color"></p>
<p id="whose-turn" class="turn"></p>
<div id="game-container"></div>
</div>
</div>
</body>
</html>