-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (145 loc) · 5.32 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/favicon-32x32.png"
/>
<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=Outfit:wght@500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="dist/style.css" />
<title>Frontend Mentor | Tic Tac Toe</title>
</head>
<body>
<main>
<!-- New Game Page -->
<div class="flex column container" id="new-game-page">
<div class="flex align-self--center gap--8 mb--40">
<img src="assets/icon-x.svg" alt="x mark" class="icon--md" />
<img src="assets/icon-o.svg" alt="o mark" class="icon--md" />
</div>
<div class="card--md flex--center column mb--40">
<h1 class="heading--sm mb--24">PICK PLAYER 1'S MARK</h1>
<div class="toggle mb--16">
<button
class="toggle__button active"
id="toggle-x"
aria-label="Toggle-X"
>
<img
src="assets/icon-x.svg"
alt="x mark"
class="icon--md icon--navy"
id="toggle-x-icon"
/>
</button>
<button class="toggle__button" id="toggle-o" aria-label="Toggle-O">
<img
src="assets/icon-o.svg"
alt="o mark"
class="icon--md icon--silver"
id="toggle-o-icon"
/>
</button>
</div>
<p class="text transparent">REMEMBER: X GOES FIRST</p>
</div>
<button
class="button button--primary button--primary--yellow mb--20"
id="vs-ai"
>
<span class="heading--sm">NEW GAME (VS CPU)</span>
</button>
<button class="button button--primary button--primary--blue" id="vs-p2">
<span class="heading--sm">NEW GAME (VS PLAYER)</span>
</button>
</div>
<!-- Game Board Page -->
<div class="grid hidden" id="game-board-page">
<div class="flex align-self--center gap--8 mb--mobile--44">
<img src="assets/icon-x.svg" alt="x mark" class="icon--md" />
<img src="assets/icon-o.svg" alt="o mark" class="icon--md" />
</div>
<div class="card--sm flex--center gap--12 mb--mobile--44">
<img
src="assets/icon-x.svg"
alt="x mark"
class="icon--sm icon--silver"
id="turn-indicator"
/>
<p class="heading--xs">TURN</p>
</div>
<button
class="justify-self--right button button--secondary button--secondary--silver mb--mobile--44"
id="restart-button"
>
<img src="assets/icon-restart.svg" alt="restart" class="icon--sm" />
</button>
<div class="flex--center card--lg" id="0"></div>
<div class="flex--center card--lg" id="1"></div>
<div class="flex--center card--lg" id="2"></div>
<div class="flex--center card--lg" id="3"></div>
<div class="flex--center card--lg" id="4"></div>
<div class="flex--center card--lg" id="5"></div>
<div class="flex--center card--lg" id="6"></div>
<div class="flex--center card--lg" id="7"></div>
<div class="flex--center card--lg" id="8"></div>
<div class="score bg--blue flex--center column">
<div class="text" id="score-1-text"></div>
<div class="heading heading--md" id="score-1">0</div>
</div>
<div class="score bg--silver flex--center column">
<div class="text">TIES</div>
<div class="heading heading--md" id="ties">0</div>
</div>
<div class="score bg--yellow flex--center column">
<div class="text" id="score-2-text"></div>
<div class="heading heading--md" id="score-2">0</div>
</div>
</div>
<!-- Game Result -->
<dialog class="modal" id="modal">
<div class="game-result flex--center column">
<p
class="heading--xs mb--16 color--silver"
id="game-result-text-1"
></p>
<div class="flex--center gap--24 mb--24 gap--mobile--8">
<img
src="placeholder"
alt="Winning Mark"
class="icon--lg icon--mobile"
id="game-result-icon"
/>
<p class="heading--lg color--blue" id="game-result-text-2"></p>
</div>
<div class="button-container flex gap--16">
<button
class="button button--secondary button--secondary--silver"
id="modal-button-1"
>
<span class="heading--xs" id="modal-button-1-text">QUIT</span>
</button>
<button
class="button button--secondary button--secondary--yellow"
id="modal-button-2"
>
<span class="heading--xs" id="modal-button-2-text"
>NEXT ROUND</span
>
</button>
</div>
</div>
</dialog>
</main>
<script src="js/script.js"></script>
</body>
</html>