-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
70 lines (70 loc) · 3.27 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tic Tac Toe</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="screen screen-start" id="start">
<header>
<h1>Tic Tac Toe</h1>
<label for"computer"><h2>Play against a computer</h2></label>
<input id="computer" type="checkbox"><br>
<a href="#" id="startButton" class="button">Start game</a>
</header>
</div>
<div class="screen screen-win screen-win-one" id="finish-one">
<header>
<h1>Tic Tac Toe</h1>
<p class="message"><span id="player1Name"></span> is the winner</p>
<a href="#" id="newGame" class="button">New game</a>
</header>
</div>
</div>
<div class="screen screen-win screen-win-two" id="finish-two">
<header>
<h1>Tic Tac Toe</h1>
<p class="message"><span id="player2Name"></span> is the winner</p>
<a href="#" id="newGame" class="button">New game</a>
</header>
</div>
<div class="screen screen-win screen-win-tie" id="finish-draw">
<header>
<h1>Tic Tac Toe</h1>
<p class="message">It's a tie</p>
<a href="#" id="newGame" class="button">New game</a>
</header>
</div>
<div class="board" id="board">
<header>
<h1>Tic Tac Toe</h1>
<h1 id="player1display"></h1> <br>
<h1 id="player2display"></h1>
<ul>
<li class="players" id="player1">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-200.000000, -60.000000)" fill="#000000"><g transform="translate(200.000000, 60.000000)"><path d="M21 36.6L21 36.6C29.6 36.6 36.6 29.6 36.6 21 36.6 12.4 29.6 5.4 21 5.4 12.4 5.4 5.4 12.4 5.4 21 5.4 29.6 12.4 36.6 21 36.6L21 36.6ZM21 42L21 42C9.4 42 0 32.6 0 21 0 9.4 9.4 0 21 0 32.6 0 42 9.4 42 21 42 32.6 32.6 42 21 42L21 42Z"/></g></g></g></svg>
</li>
<li class="players" id="player2">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="43" viewBox="0 0 42 43" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-718.000000, -60.000000)" fill="#000000"><g transform="translate(739.500000, 81.500000) rotate(-45.000000) translate(-739.500000, -81.500000) translate(712.000000, 54.000000)"><path d="M30 30.1L30 52.5C30 53.6 29.1 54.5 28 54.5L25.5 54.5C24.4 54.5 23.5 53.6 23.5 52.5L23.5 30.1 2 30.1C0.9 30.1 0 29.2 0 28.1L0 25.6C0 24.5 0.9 23.6 2 23.6L23.5 23.6 23.5 2.1C23.5 1 24.4 0.1 25.5 0.1L28 0.1C29.1 0.1 30 1 30 2.1L30 23.6 52.4 23.6C53.5 23.6 54.4 24.5 54.4 25.6L54.4 28.1C54.4 29.2 53.5 30.1 52.4 30.1L30 30.1Z"/></g></g></g></svg>
</li>
</ul>
</header>
<ul class="boxes">
<li id="box1" class="box"></li>
<li id="box2" class="box"></li>
<li id="box3" class="box"></li>
<li id="box4" class="box"></li>
<li id="box5" class="box"></li>
<li id="box6" class="box"></li>
<li id="box7" class="box"></li>
<li id="box8" class="box"></li>
<li id="box9" class="box"></li>
</ul>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/script.js"></script>
</body>
</html>