-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (141 loc) · 5.03 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alphabet Clash</title>
<link
href="https://cdn.jsdelivr.net/npm/daisyui@4.12.23/dist/full.min.css"
rel="stylesheet"
type="text/css"
/>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Anton&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<style>
.poppins {
font-family: "Poppins", serif;
font-style: normal;
}
.anton {
font-family: "Anton", serif;
font-style: normal;
}
</style>
</head>
<body>
<main
class="min-h-screen bg-[#010313] bg-[url(/images/background.png)] bg-center bg-no-repeat"
>
<section
id="home"
class="text-white min-h-screen flex flex-col justify-center items-center gap-8"
>
<h1 class="text-9xl anton">ALPHABET CLASH</h1>
<p class="poppins text-xl">
Unleash Your Keyboard Expertise: Press "Play Now" to Start
</p>
<button
onclick="playgroundButton()"
class="btn btn-outline bg-cyan-200 btn-primary"
>
Play Now
</button>
</section>
<section id="playground" class="hidden">
<div class="flex flex-col items-center gap-24 pt-28">
<div
class="artboard artboard-horizontal phone-6 border-[20px] border-[#010313CC] rounded-2xl bg-[#FFFFFFB3]"
>
<div class="flex justify-center">
<p class="bg-[#010313CC] text-white rounded-b-xl px-4 pb-4">
Don't watch the keyboard while playing...
</p>
</div>
<div class="flex justify-center h-full pt-10">
<p
id="current-alphabet"
class="text-black font-semibold text-9xl uppercase"
>
A
</p>
</div>
</div>
<div>
<div class="my-1 flex w-full justify-center gap-1">
<kbd id="q" class="kbd">q</kbd>
<kbd id="w" class="kbd">w</kbd>
<kbd id="e" class="kbd">e</kbd>
<kbd id="r" class="kbd">r</kbd>
<kbd id="t" class="kbd">t</kbd>
<kbd id="y" class="kbd">y</kbd>
<kbd id="u" class="kbd">u</kbd>
<kbd id="i" class="kbd">i</kbd>
<kbd id="o" class="kbd">o</kbd>
<kbd id="p" class="kbd">p</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
<kbd id="a" class="kbd">a</kbd>
<kbd id="s" class="kbd">s</kbd>
<kbd id="d" class="kbd">d</kbd>
<kbd id="f" class="kbd">f</kbd>
<kbd id="g" class="kbd">g</kbd>
<kbd id="h" class="kbd">h</kbd>
<kbd id="j" class="kbd">j</kbd>
<kbd id="k" class="kbd">k</kbd>
<kbd id="l" class="kbd">l</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
<kbd id="z" class="kbd">z</kbd>
<kbd id="x" class="kbd">x</kbd>
<kbd id="c" class="kbd">c</kbd>
<kbd id="v" class="kbd">v</kbd>
<kbd id="b" class="kbd">b</kbd>
<kbd id="n" class="kbd">n</kbd>
<kbd id="m" class="kbd">m</kbd>
</div>
</div>
<div class="flex justify-between w-96">
<button class="btn bg-[#894189] text-white rounded-full text-xl">
Life
<img src="/images/heart.svg" alt="" />
<span id="life">3</span>
</button>
<button class="btn bg-[#894189] text-white rounded-full text-xl">
Score
<img src="/images/score.svg" alt="" />
<span id="score">0</span>
</button>
</div>
</div>
</section>
<section
id="final-result"
class="flex hidden justify-center items-center min-h-screen"
>
<div
class="bg-[#FFFFFF33] p-8 rounded-3xl text-white space-y-5 text-center"
>
<p class="text-4xl font-semibold">Game Over!</p>
<h1 class="text-8xl font-semibold poppins">
<span>Score: </span>
<span id="final-score">0</span>
</h1>
<button
onclick="playgroundButton()"
class="btn btn-outline bg-cyan-200 btn-primary"
>
Play Again
</button>
<p class="text-xl">Practice will make you a Pro</p>
</div>
</section>
</main>
<script src="/scripts/utility.js"></script>
<script src="/scripts/script.js"></script>
</body>
</html>