-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (140 loc) · 5.05 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
<!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" />
<link rel="stylesheet" href="styles.css" />
<script src="https://kit.fontawesome.com/277acdce58.js" crossorigin="anonymous"></script>
<script src="script.js" defer></script>
<title>Wordle Game</title>
</head>
<body>
<div class="game_container start-screen">
<span id="info" onclick="showInfo()"><i class="fas fa-info-circle"></i></span>
<p id = game-header>Wordle Game</p>
<a class="start-btn" href="gameScreen.html">
<input type="image" class="start-btn"src="start-btn.png"></input>
</a>
<div id="popup0" class="show"></div>
<div class="info-popup" id="popup2">
<i class="fa fa-close close-icon" onclick="closeInfo()"></i>
<div>
<p style="text-align: center">POINT SYSTEM</p>
</div>
<div>
<p>
Points are awarded based on the number of word attempts used to solve the Wordle puzzles
and your speed.
</p>
</div>
<div>
<p><br /></p>
</div>
<div>
<p>Attempts</p>
</div>
<div>
<p>1 - 250 points</p>
</div>
<div>
<p>2 - 200 points</p>
</div>
<div>
<p>3 - 150 points</p>
</div>
<div>
<p>4 - 100 points</p>
</div>
<div>
<p>5 - 50 points</p>
</div>
<div>
<p>6 - 25 points</p>
</div>
<div>
<p><br /></p>
</div>
<div>
<p>Speed</p>
</div>
<div>
<p>0:00-0:29 seconds - 500 points</p>
</div>
<div>
<p>0:30-0:59 seconds - 450 points</p>
</div>
<div>
<p>1:00-1:29 minutes - 400 points</p>
</div>
<div>
<p>1:30-1:59 minutes - 350 points</p>
</div>
<div>
<p>2:00-2:29 minutes - 300 points</p>
</div>
<div>
<p>2:30-2:59 minutes - 250 points</p>
</div>
<div>
<p>3:00-3:29 minutes - 200 points</p>
</div>
<div>
<p>3:30-3:59 minutes - 150 points</p>
</div>
<div>
<p>4:00-4:29 minutes - 100 points</p>
</div>
<div>
<p>4:30-4:59 minutes - 50 points</p>
</div>
<div>
<p>5:00+ minutes - 10 points</p>
</div>
</div>
<div class="info-popup" id="popup1">
<i class="fa fa-close close-icon" onclick="closeInfo()"></i>
<i class='fas fa-arrow-alt-circle-right next-icon' onclick="showInfo()"></i>
<div>
<p style="text-align: center">INSTRUCTIONS</p>
</div>
<div>
<p><br /></p>
</div>
<ol start="1">
<li>
<p>You have six attempts to answer the correct five letter word.</p>
</li>
<li>
<p>Type in your guess and submit the word by pressing enter.</p>
</li>
<li>
<p>The letter tiles will change colours once you have submitted your word. </p>
</li>
</ol>
<ul>
<li>
<p>Yellow = correct letter in the wrong spot</p>
</li>
<li>
<p>Green = correct letter in the correct spot</p>
</li>
<li>
<p>Grey = letter not included in the word</p>
</li>
</ul>
<ol start="4">
<li>
<p>Use your attempts to solve the word before you run out of guesses. </p>
</li>
</ol>
<div>
<p><br /></p>
</div>
<div>
<p style="text-align: center">Have fun and good luck!</p>
</div>
</div>
</div>
</body>
</html>