-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
53 lines (52 loc) · 2.55 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="media/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="start-menu">
<h1>TICTACTOE</h1>
<form action="#">
<label for="player1"><h3>Enter your names: </h3></label>
<div class="name-inputs">
<input type="text" name="player1" id="player1" maxlength="15">
<span>vs</span>
<input type="text" name="player2" id="player2" maxlength="15">
<button class="bot-btn" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 8H20V9H19V8M20 5H19V7H20V6H20.5C20.78 6 21 5.78 21 5.5V3.5C21 3.22 20.78 3 20.5 3H18V4H20V5M17 3H16V7H17V3M13.5 15.5C13.5 16.61 14.4 17.5 15.5 17.5S17.5 16.61 17.5 15.5 16.61 13.5 15.5 13.5 13.5 14.4 13.5 15.5M17 8H16V9H17V8M22 14H21C21 12.5 20.53 11.13 19.74 10H16.97C18.19 10.91 19 12.36 19 14V16H21V17H19V20H5V17H3V16H5V14C5 11.24 7.24 9 10 9H14C14.34 9 14.68 9.04 15 9.1V7.08C14.67 7.03 14.34 7 14 7H13V5.73C13.6 5.39 14 4.74 14 4C14 2.9 13.11 2 12 2S10 2.9 10 4C10 4.74 10.4 5.39 11 5.73V7H10C6.13 7 3 10.13 3 14H2C1.45 14 1 14.45 1 15V18C1 18.55 1.45 19 2 19H3V20C3 21.11 3.9 22 5 22H19C20.11 22 21 21.11 21 20V19H22C22.55 19 23 18.55 23 18V15C23 14.45 22.55 14 22 14M8.5 13.5C7.4 13.5 6.5 14.4 6.5 15.5S7.4 17.5 8.5 17.5 10.5 16.61 10.5 15.5 9.61 13.5 8.5 13.5Z" /></svg></button>
</div>
<button type="submit">START!</button>
</form>
<small id="bot-advertisement"><em>You are playing against a bot</em></small>
</div>
<div class="ttt-page">
<div class="game-state"></div>
<div class="game-container">
<div data-index="1" class="ttt-cells">
</div>
<div data-index="2" class="ttt-cells">
</div>
<div data-index="3" class="ttt-cells">
</div>
<div data-index="4" class="ttt-cells">
</div>
<div data-index="5" class="ttt-cells">
</div>
<div data-index="6" class="ttt-cells">
</div>
<div data-index="7" class="ttt-cells">
</div>
<div data-index="8" class="ttt-cells">
</div>
<div data-index="9" class="ttt-cells">
</div>
</div>
</div>
</body>
</html>