-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
248 lines (236 loc) · 18.2 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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html>
<head>
<title>WordBank</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="/word-bank/style.css" rel="stylesheet">
<link href="/word-bank/images/wordBank.png" rel="icon">
<script type="module" defer src="/word-bank/main.js"></script>
<script type="module" defer src="/word-bank/functions.js"></script>
</head>
<body>
<main class="page-wrapper">
<div class="main-container">
<div class="content-container">
<!-- FIRST -->
<div class="top-container">
<div>
<button class="settings-btn theme-btn">
<svg class="sun" style="display:none" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -1.5 24 24" width="24" fill="currentColor"><path d="M10 15.565a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-15a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1zm0 16a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1zm-9-7h2a1 1 0 1 1 0 2H1a1 1 0 0 1 0-2zm16 0h2a1 1 0 0 1 0 2h-2a1 1 0 0 1 0-2zm.071-6.071a1 1 0 0 1 0 1.414l-1.414 1.414a1 1 0 1 1-1.414-1.414l1.414-1.414a1 1 0 0 1 1.414 0zM5.757 14.808a1 1 0 0 1 0 1.414l-1.414 1.414a1 1 0 1 1-1.414-1.414l1.414-1.414a1 1 0 0 1 1.414 0zM4.343 3.494l1.414 1.414a1 1 0 0 1-1.414 1.414L2.93 4.908a1 1 0 0 1 1.414-1.414zm11.314 11.314l1.414 1.414a1 1 0 0 1-1.414 1.414l-1.414-1.414a1 1 0 1 1 1.414-1.414z"></path></svg>
<svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" width="24" fill="currentColor"><path d="M12.253.335A10.086 10.086 0 0 0 8.768 8c0 4.632 3.068 8.528 7.232 9.665A9.555 9.555 0 0 1 9.742 20C4.362 20 0 15.523 0 10S4.362 0 9.742 0c.868 0 1.71.117 2.511.335z"></path></svg>
</button>
</div>
<div class="order-first">
<h1>Word<span class="header-title">Bank</span></h1>
</div>
<div>
<button class="settings-btn how-to-play-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" width="24" fill="currentColor"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path></svg>
</button>
</div>
<!-- settings overlay -->
<div class="overlay-game-win">
<div class="game-stats-overlay">
<div class="header-content stats-header">
<header>Current <span class="money-streak">Money </span>Streak</header>
<div class="close-stats">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 24 24" width="24" fill="currentColor"><path d="M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"></path></svg>
</div>
</div>
<div class="streak-container">
<p class="game-end-phrase"><p>
<p class="money-streak money-added-to-streak"><span class="font-color">+ </span></p>
<p class="money-streak streak-total"></p>
</div>
<div>
<p class="highest-streak-header">Highest Cash Streak</p>
<p class="money-streak highest-streak"></p>
</div>
</div>
</div>
<div class="overlay">
<div class="overlay-content">
<header class="header-content">
<div>
<h1 class="overlay-header">How To Play</h1>
</div>
<div class="close-settings">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 24 24" width="24" fill="currentColor"><path d="M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"></path></svg>
</div>
</header>
<div class="overlay-content-container">
<div>
<p class="instruction-headers"><strong>Game Overview</strong></p>
<ul class="game-instructions">
<li>Guess the Phrase of the day!</li>
<li>You have $1000 to start.</li>
<li>2 free guesses!</li>
<li>Purchase Letters, Hints, and more Guesses!</li>
<li>Fill in the entire phrase and don't run out of money...</li>
<li>Go!</li>
</ul>
</div>
<hr>
<div>
<p class="instruction-headers"><strong>Purchases</strong></p>
<ul class="game-instructions">
<li>Letters - Cost displayed on each letter</li>
<li>Hint - $150</li>
<li>Additional Guesses - $150</li>
</ul>
</div>
<hr>
<div>
<p class="instruction-headers"><strong>Game Play</strong></p>
<ul class="game-instructions">
<li class="game-play-format line-format">
<div class="example-instructions half-container">
<div class="lineup">
<p>Selected</p>
<div class="letter example-letter highlight-example no-hover">a<sup class="example-letter-money">$130</sup></div>
</div>
<div class="lineup">
<p>Correct</p>
<div class="letter example-letter correct-example no-hover">a<sup class="example-letter-money">$130</sup></div>
</div>
<div class="lineup">
<p>Incorrect</p>
<div class="letter example-letter incorrect-example no-hover">a<sup class="example-letter-money">$130</sup></div>
</div>
</div>
<p class="normal-line-height half-container">The selected letter will turn blue. To confirm choice click <strong class="capitalize">"enter"</strong>. Letters will turn either red or green.</p>
</li>
<li class="hint-btn-instruction line-format game-play-format">
<div></div>
<div class="normal-line-height half-container">
Click the
<span class="settings-btn hint-example-btn no-hover half-container">
<div class="hint-example-btn-inner">
<p>hint</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -1.5 24 24" width="30" fill="currentColor"><path d="M11 14.565H8v-8a1 1 0 1 0-2 0v8H3V13.31a7 7 0 1 1 8 0v1.255zm0 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2h8z"></path></svg>
</div>
</span>
button then click <strong class="capitalize">"enter"</strong> to purchase and reveal a hint.
</div>
</li>
<li class="game-play-format line-format">
<div></div>
<p class="normal-line-height half-container">The <span class="remaining-guesses-example-btn">2</span> button shows how many guesses remain. Click this and then click enter to purchase another guess.</p>
</li>
<li class="game-play-format">
<div class="example-instructions half-container">
<div>
<p>Active</p>
<div class="letter guess-highlight-example no-hover">
<span class="number">2</span>
<span class="word">Guess?</span>
</div>
</div>
<div>
<p>Inactive</p>
<div class="letter guess-highlight-example no-color no-hover">
<span class="number">1</span>
<span class="word">Guess?</span>
</div>
</div>
</div>
<p class="normal-line-height half-container">To enter or exit guess mode, select the <strong class="capitalize">"guess"</strong> button. Fill out the puzzle, then press enter to confirm.</p>
</li>
</ul>
</div>
<hr class="bottom-break">
</div>
</div>
</div>
</div>
<!-- SECOND -->
<div>
<div class="category-hint">
<div class="category-consistency">
<div class="category-btn-shift">
<button class="settings-btn hint-btn">
<p>hint</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -1.5 24 24" width="24" fill="currentColor"><path d="M11 14.565H8v-8a1 1 0 1 0-2 0v8H3V13.31a7 7 0 1 1 8 0v1.255zm0 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2h8z"></path></svg>
</button>
</div>
</div>
<div class="category category-consistency"></div>
<div class="category-consistency">
<div class="category-btn-shift shift-left">
<button class="remaining-guesses-btn">
<p class="display-guesses"></p>
</button>
</div>
</div>
</div>
<div class="hint-container">
<p class="hint"></p>
</div>
<div class="phrase-container"></div>
<div><span class="alert-div"></span></div>
</div>
<!-- THIRD -->
<div>
<div class="play-container">
<div class="info-container">
<!-- Bankroll -->
<div class="bottom-info">
<section>
<header><u>Bankroll</u></header>
<p id="bankroll"></p>
<p id="potential-purchase"></p>
</section>
</div>
</div>
<!-- Alphabet -->
<div class="letter-container">
<section>
<div class="letters-div">
<button class="letter">q<sup>$30</sup></button>
<button class="letter">w<sup>$50</sup></button>
<button class="letter">e<sup>$140</sup></button>
<button class="letter">r<sup>$120</sup></button>
<button class="letter">t<sup>$120</sup></button>
<button class="letter">y<sup>$60</sup></button>
<button class="letter">u<sup>$80</sup></button>
<button class="letter">i<sup>$110</sup></button>
<button class="letter">o<sup>$90</sup></button>
<button class="letter">p<sup>$80</sup></button>
</div>
<div class="letters-div">
<div class="spacer-third"></div>
<button class="letter">a<sup>$130</sup></button>
<button class="letter">s<sup>$120</sup></button>
<button class="letter">d<sup>$80</sup></button>
<button class="letter">f<sup>$60</sup></button>
<button class="letter">g<sup>$70</sup></button>
<button class="letter">h<sup>$70</sup></button>
<button class="letter">j<sup>$30</sup></button>
<button class="letter">k<sup>$50</sup></button>
<button class="letter">l<sup>$80</sup></button>
<button class="delete-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -5 24 24" width="30" fill="currentColor"><path d="M7.828 0H18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7.828a2 2 0 0 1-1.414-.586L.707 7.707a1 1 0 0 1 0-1.414L6.414.586A2 2 0 0 1 7.828 0zm0 12H18V2H7.828l-5 5 5 5zm6.586-5l1.414 1.414a1 1 0 0 1-1.414 1.414L13 8.414l-1.414 1.414a1 1 0 1 1-1.414-1.414L11.586 7l-1.414-1.414a1 1 0 1 1 1.414-1.414L13 5.586l1.414-1.414a1 1 0 1 1 1.414 1.414L14.414 7z"></path></svg>
</button>
<div class="spacer-third"></div>
</div>
<div class="letters-div">
<button class="make-guess-btn">Guess?<sup class="display-guesses"></sup></button>
<button class="letter">z<sup>$40</sup></button>
<button class="letter">x<sup>$40</sup></button>
<button class="letter">c<sup>$80</sup></button>
<button class="letter">v<sup>$50</sup></button>
<button class="letter">b<sup>$60</sup></button>
<button class="letter">n<sup>$100</sup></button>
<button class="letter">m<sup>$70</sup></button>
<button class="enter">Enter</button>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>