forked from anthonychavis/chore-door
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (145 loc) · 5.69 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
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chore Door</title>
<link rel="stylesheet" href="style.css" />
<!-- <link rel="stylesheet" href="favicon_AC2.png" type="image/x-icon" />
<link rel="icon" href="favicon_AC2.png" type="image/x-icon" />
<meta name="author" content="Anthony Chavis" />
<meta
name="description"
content="To Score 100 First, Know When to Hold'em" />
<meta property="og: title" content="Pig Game" />
<meta
property="og:url"
content="https://anthonychavis.github.io/pig_game/" />
<meta
property="og:image"
content="https://raw.githubusercontent.com/anthonychavis/pig_game/main/pig-game1.jpg" />
<meta property="og:type" content="website" />
<meta
property="og:description"
content="To Score 100 First, Know When to Hold'em" />
<meta property="og:locale" content="en_GB" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="twitter:title" content="Pig Game" />
<meta property="twitter:description" content="Discover hidden places" />
<meta
property="twitter:image"
content="https://raw.githubusercontent.com/anthonychavis/pig_game/main/pig-game1.jpg" />
<meta property="twitter:card" content="summary_large_image" /> -->
<script async src="script.js"></script>
</head>
<body>
<header>
<figure>
<img
alt="chore door logo"
src="https://content.codecademy.com/projects/chore-door/images/logo.svg"
/>
</figure>
</header>
<main>
<section class="big-screen">
<h1>Instructions</h1>
<table>
<tr>
<td>1</td>
<td>
Hiding behind one of these doors is the ChoreBot.
</td>
</tr>
<tr>
<td>2</td>
<td>
Your mission is to open all of the doors without
running into the ChoreBot.
</td>
</tr>
<tr>
<td>3</td>
<td>
If you manage to avoid the ChoreBot until the very
last door, you win!
</td>
</tr>
<tr>
<td>4</td>
<td>See if you can score a winning streak!</td>
</tr>
</table>
</section>
<button id="rules-btn" class="mobile">How to Play</button>
<section id="mobile-rules" class="hidden modal">
<h1>Instructions</h1>
<table>
<tr>
<td>1</td>
<td>
Hiding behind one of these doors is the ChoreBot.
</td>
</tr>
<tr>
<td>2</td>
<td>
Your mission is to open all of the doors without
running into the ChoreBot.
</td>
</tr>
<tr>
<td>3</td>
<td>
If you manage to avoid the ChoreBot until the very
last door, you win!
</td>
</tr>
<tr>
<td>4</td>
<td>See if you can score a winning streak!</td>
</tr>
</table>
</section>
<div class="overlay hidden"></div>
<section id="section1">
<figure class="door">
<img
id="door1"
src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg"
alt="closed door"
/>
</figure>
<figure class="door">
<img
id="door2"
src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg"
alt="closed door"
/>
</figure>
<figure class="door">
<img
id="door3"
src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg"
alt="closed door"
/>
</figure>
</section>
<div class="landscape">
<button id="restart-btn">Good luck!</button>
<section id="section2">
<div class="score">
<p>Best streak:</p>
<div id="best-streak" class="counter">0</div>
</div>
<div class="score">
<p>Current streak:</p>
<div id="current-streak" class="counter">0</div>
</div>
</section>
</div>
</main>
</body>
</html>