-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
379 lines (378 loc) · 13.5 KB
/
Copy pathindex.html
File metadata and controls
379 lines (378 loc) · 13.5 KB
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
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="../dist/output.css" rel="stylesheet" />
</head>
<body class="bg-slate-100 h-full">
<div class="flex w-full justify-center pt-7">
<div
class="flex flex-wrap text-2xl justify-around sm:w-[34rem] sm:text-4xl w-80"
>
🔗 NumChain 🔗
<hr class="w-full h-[2px] bg-gray-600 border-0 rounde mt-2" />
</div>
</div>
<div class="flex w-full justify-center mt-2">
<div
class="flex flex-wrap text-sm justify-around sm:w-[34rem] sm:text-xl w-80 cursor-pointer"
id="open-btn"
>
ℹ️ how to play
</div>
</div>
<div class="flex w-full justify-center">
<div
class="flex flex-wrap justify-between sm:w-[34rem] w-80 sm:mt-12 mt-6"
>
<button
class="bg-transparent hover:bg-black sm:text-lg text-sm w-16 sm:w-36 sm:py-3 py-1 sm:px-6 px-2 text-black-700 font-semibold hover:text-white border border-black hover:border-transparent rounded"
id="newGame"
>
New Game
</button>
<div class="relative">
<select
class="block appearance-none bg-transparent border border-black hover:bg-black sm:text-lg text-sm w-24 sm:w-36 sm:py-3 py-4 sm:px-6 px-4 text-black-700 font-semibold hover:text-white rounded leading-tight focus:outline-none focus:bg-transparent focus:text-black"
id="level-container"
>
<option value="2">Easy</option>
<option value="3">Medium</option>
<option value="4">Expert</option>
</select>
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-1 text-gray-400 text-sm"
>
<svg
class="fill-current h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
/>
</svg>
</div>
</div>
<button
class="bg-transparent hover:bg-black sm:text-lg text-sm w-16 sm:w-36 sm:py-3 py-1 sm:px-6 px-2 text-black-700 font-semibold hover:text-white border border-black hover:border-transparent rounded"
id="resetGame"
>
Reset
</button>
</div>
</div>
<div class="hidden" id="success-alert">
<div class="w-full justify-center flex">
<div
class="sm:w-[24rem] w-72 p-3 mt-8 bg-green-200 rounded-2xl flex items-center"
>
<div
tabindex="0"
aria-label="success icon"
role="img"
class="focus:outline-none w-8 h-8 border rounded-full border-green-200 flex flex-shrink-0 items-center justify-center"
>
<svg
viewBox="0 0 32 32"
fill="currentColor"
class="top-0 right-full h-8 w-8 overflow-visible text-teal-500 sm:absolute sm:mr-10 lg:static lg:mr-0"
>
<circle cx="16" cy="16" r="16"></circle>
<circle
cx="16"
cy="16"
r="19"
fill="none"
stroke="currentColor"
opacity="0.5"
stroke-width="2"
></circle>
<circle
cx="16"
cy="16"
r="23"
fill="none"
stroke="currentColor"
opacity="0.1"
stroke-width="2"
></circle>
<path
d="M10.743 16.331a1 1 0 1 0-1.486 1.338l1.486-1.338Zm11.926-4.587a1 1 0 1 0-1.338-1.488l1.338 1.488ZM14.5 22l-.743.669a1 1 0 0 0 1.692-.352L14.5 22Zm.949.317c1.34-4.018 4.11-7.777 7.22-10.573l-1.338-1.488c-3.306 2.973-6.306 7.012-7.78 11.427l1.898.634Zm-6.192-4.648 4.5 5 1.486-1.338-4.5-5-1.486 1.338Z"
fill="#fff"
></path>
</svg>
</div>
<div class="pl-3 w-full">
<div class="flex items-center justify-between">
<p
tabindex="0"
class="focus:outline-none text-base leading-none text-green-700"
>
Well done! 🏅🏅🏅
</p>
</div>
</div>
</div>
</div>
</div>
<div class="hidden" id="fail-alert">
<div class="flex w-full justify-center">
<div
class="sm:w-[24rem] w-72 p-3 mt-4 bg-red-100 rounded-2xl flex items-center"
>
<div
tabindex="0"
aria-label="storage icon"
role="img"
class="focus:outline-none w-8 h-8 border rounded-full border-red-200 flex items-center flex-shrink-0 justify-center"
>
<svg
viewBox="0 0 32 32"
fill="currentColor"
class="top-0 right-full h-8 w-8 flex-none overflow-visible text-rose-500 sm:absolute sm:mr-10 lg:static lg:mr-0"
>
<circle cx="16" cy="16" r="16"></circle>
<circle
cx="16"
cy="16"
r="19"
fill="none"
stroke="currentColor"
opacity="0.5"
stroke-width="2"
></circle>
<circle
cx="16"
cy="16"
r="23"
fill="none"
stroke="currentColor"
opacity="0.1"
stroke-width="2"
></circle>
<path
d="M11 11L21 21M11 21L21 11"
stroke-linecap="round"
fill="none"
stroke="white"
stroke-width="2"
></path>
</svg>
</div>
<div class="pl-3 w-full flex items-center justify-between">
<p
tabindex="0"
class="focus:outline-none text-base leading-none text-red-700"
>
😥 Try again! You can <strong>Reset</strong> or choose
<strong>New Game</strong>
</p>
</div>
</div>
</div>
</div>
<div class="hidden" id="error-alert">
<div class="flex w-full justify-center">
<div
class="sm:w-[24rem] w-72 p-3 mt-4 bg-red-100 rounded-2xl flex items-center"
>
<div
tabindex="0"
aria-label="storage icon"
role="img"
class="focus:outline-none w-8 h-8 border rounded-full border-red-200 flex items-center flex-shrink-0 justify-center"
>
<svg
viewBox="0 0 32 32"
fill="currentColor"
class="top-0 right-full h-8 w-8 flex-none overflow-visible text-rose-500 sm:absolute sm:mr-10 lg:static lg:mr-0"
>
<circle cx="16" cy="16" r="16"></circle>
<circle
cx="16"
cy="16"
r="19"
fill="none"
stroke="currentColor"
opacity="0.5"
stroke-width="2"
></circle>
<circle
cx="16"
cy="16"
r="23"
fill="none"
stroke="currentColor"
opacity="0.1"
stroke-width="2"
></circle>
<path
d="M11 11L21 21M11 21L21 11"
stroke-linecap="round"
fill="none"
stroke="white"
stroke-width="2"
></path>
</svg>
</div>
<div class="pl-3 w-full flex items-center justify-between">
<p
tabindex="0"
class="focus:outline-none text-base leading-none text-red-700"
>
⚠ <strong>Error:</strong> fractions are not allowed
</p>
</div>
</div>
</div>
</div>
<div class="flex w-full justify-center">
<div class="flex flex-nowrap justify-around w-[34rem] mt-2">
<div class="flex flex-col">
<p class="text-center text-xl font-mono font-semibold my-2">
Bring this:
</p>
<div
class="flex shadow-xl rounded w-5 h-5 p-16 border-2 border-gray-600 text-6xl cursor-pointer justify-center items-center"
id="start-card"
>
17
</div>
</div>
<div class="flex flex-col">
<p class="text-center text-xl font-mono font-semibold my-2">
to equal:
</p>
<div
class="flex shadow-xl rounded w-5 h-5 p-16 border-2 border-gray-600 text-6xl cursor-pointer justify-center items-center"
id="end-card"
>
16
</div>
</div>
</div>
</div>
<div class="flex w-full justify-center">
<div
class="flex flex-wrap justify-between sm:w-[34rem] w-80 sm:mt-24 mt-12"
id="operation-card"
>
<button
class="bg-white hover:bg-gray-400 hover:text-white focus:bg-gray-600 focus:text-white sm:text-4xl text-2xl w-16 sm:w-18 sm:py-3 py-1 sm:px-3 px-1 text-gray-800 font-semibold border border-gray-400 rounded shadow"
id="operator"
value="0"
>
+
</button>
<button
class="bg-white hover:bg-gray-400 hover:text-white focus:bg-gray-600 focus:text-white sm:text-4xl text-2xl w-16 sm:w-18 sm:py-3 py-1 sm:px-3 px-1 text-gray-800 font-semibold border border-gray-400 rounded shadow"
id="operator"
value="1"
>
-
</button>
<button
class="bg-white hover:bg-gray-400 hover:text-white focus:bg-gray-600 focus:text-white sm:text-4xl text-2xl w-16 sm:w-18 sm:py-3 py-1 sm:px-3 px-1 text-gray-800 font-semibold border border-gray-400 rounded shadow"
id="operator"
value="2"
>
*
</button>
<button
class="bg-white hover:bg-gray-400 hover:text-white focus:bg-gray-600 focus:text-white sm:text-4xl text-2xl w-16 sm:w-18 sm:py-3 py-1 sm:px-3 px-1 text-gray-800 font-semibold border border-gray-400 rounded shadow"
id="operator"
value="3"
>
/
</button>
</div>
</div>
<div class="flex w-full justify-center">
<div
class="flex flex-wrap justify-center text-xl font-mono font-semibold sm:w-[34rem] w-80 sm:mt-12 mt-3"
>
using all these cards:
</div>
</div>
<div class="flex w-full justify-center">
<div
class="flex flex-wrap justify-around sm:w-[34rem] w-80 sm:mt-12 mt-2"
id="card-container"
></div>
</div>
<div class="flex w-full h-full justify-center sm:mt-8 mt-2">
<div
class="flex flex-wrap justify-center sm:w-[34rem] w-80 mt-5 cursor-pointer"
>
<hr class="w-full h-[2px] bg-gray-600 border-0 rounded mb-2" />
<div>
Created with the help of ChatGPT for Oden ♥️ by
<strong>
<a href="https://www.linkedin.com/in/amirgiveon/" target="_blank">
Amir Give'on
</a>
</strong>
of
<strong>
<a href="https://neuron.vision/" target="_blank">
Neuron Vision.</a
></strong
>
Have feedback?
<strong><a href="mailto:agiveon@gmail.com">Email me</a></strong>
</div>
</div>
</div>
<div
class="fixed hidden inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
id="help-modal"
>
<div
class="relative top-20 mx-auto p-2 border sm:w-2/3 w-full shadow-lg rounded-md bg-white"
>
<div class="mt-3 text-center">
<h3 class="text-2xl leading-6 font-medium text-gray-900">
How to play this game
</h3>
<div class="flex mt-2 px-2 py-3">
<p class="text-sm text-gray-500 text-left">
Welcome to NumChain! A fun new math game. Your goal is to turn the
number on the left (below "Bring this:") into the number on the
right (below "to equal:) using all the numbers at the bottom with
any of the basic arithmatic operations. <br />To perform an
operation, simply choose the arithmatic operation and the card at
the bottom. The operation will be performed on the card on the
left. Only restriction is "no fractions". Good luck! If you have
any feedback, feel to
<strong><a href="mailto:agiveon@gmail.com">Email me</a></strong>
</p>
</div>
<div class="items-center px-4 py-3 flex justify-center">
<button
id="ok-btn"
class="w-32 px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
>
Let's Play!
</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-YKB4PB76CK"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-YKB4PB76CK");
</script>
</body>
</html>