-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
159 lines (151 loc) · 5.75 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
155
156
157
158
159
<!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="img/favicon_AC2.png" type="image/x-icon" />
<link rel="icon" href="img/favicon_AC2.png" type="image/x-icon" />
<meta name="author" content="Anthony Chavis" />
<meta
name="description"
content="Avoid doing chores by avoiding the ChoreBot"
/>
<meta property="og: title" content="Chore Bot" />
<meta
property="og:url"
content="https://anthonychavis.github.io/chore-door/"
/>
<meta
property="og:image"
content="https://raw.githubusercontent.com/anthonychavis/chore-door/main/img/mobile-landscape-resize.jpg"
/>
<meta property="og:type" content="website" />
<meta
property="og:description"
content="Avoid doing chores by avoiding the ChoreBot"
/>
<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="Chore Door" />
<meta
property="twitter:description"
content="What awaits behind the door?"
/>
<meta
property="twitter:image"
content="https://raw.githubusercontent.com/anthonychavis/chore-door/main/img/mobile-landscape-resize.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 door1">
<img
id="door1"
src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg"
alt="closed door"
/>
</figure>
<figure class="door door2">
<img
id="door2"
src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg"
alt="closed door"
/>
</figure>
<figure class="door door3">
<img
id="door3"
src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg"
alt="closed door"
/>
</figure>
</section>
<button id="restart-btn">Good luck!</button>
<section id="section2">
<div class="score best-str">
<p>Best streak:</p>
<div id="best-streak" class="counter">0</div>
</div>
<div class="score current-str">
<p>Current streak:</p>
<div id="current-streak" class="counter">0</div>
</div>
</section>
</main>
</body>
</html>