-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
287 lines (283 loc) · 22.5 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
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
<!DOCTYPE html>
<html lang="es">
<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">
<meta name="author" content="Jesus Miguel">
<meta name="description"
content="Página de mecanografía, permite probar tus habilidades de tipeo / velocidad al teclear.">
<title>pGames | Mecanografía</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="tailwind\output.css">
<link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/2178/2178211.png">
</head>
<body>
<article class="h-full md:h-screen bg-neutral-300 dark:bg-neutral-500">
<div id="modal" tabindex="-1"
class="overflow-y-auto overflow-x-hidden fixed backdrop-blur-md z-50 w-full h-screen md:h-full opacity-100">
<div class="relative mx-auto p-4 w-screen max-w-2xl h-screen md:h-auto">
<div class="relative bg-neutral-200 rounded-lg shadow dark:bg-slate-800">
<div
class="flex justify-center items-center p-5 rounded-t border-b dark:border-gray-600 bg-gray-100 dark:bg-gray-700">
<h3 class="font-text font-bold text-xl text-gray-900 dark:text-white">
¿Te gustaría registrar un usuario?
</h3>
</div>
<div class="p-6 space-y-6">
<section
class="font-text text-justify leading-relaxed text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-md p-4">
Al registrar un nick o apodo en el campo <span
class="font-bold underline decoration-red-500"><a href="#getNickname"
target="_self">Usuario</a></span>
podrás guardar las estadísticas de todas las pruebas que hagas dentro
de esta página. En caso de no querer registrarse, puede continuar como
<a href="#registerAsGuest" target="_self"
class="font-bold underline decoration-red-500">Invitado</a>.
</section>
<section
class="font-text text-justify text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-md p-4">
Debe
llenar las casillas de <span class="font-bold underline decoration-red-500">Palabras <a
href="#valueMin" target="_self">mínimas</a> y <a href="#valueMax"
target="_self">máximas</a></span> para empezar la prueba.
</section>
<label class="block">
<span
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 font-title">Usuario</span>
<input type="text" id="getNickname"
class="peer rounded-lg block w-full p-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm dark:bg-white focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-emerald-500"
placeholder="Aaron">
<small id="nicknameHelp" class="hidden text-red-400">¡No se puede registrar un usuario sin
nombre!</small>
</label>
<section class="grid gap-6 mb-6 md:grid-cols-2">
<div>
<label for="valueMin"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 font-title">Palabras
mínimas</label>
<input type="number" id="valueMin"
class="peer rounded-lg block w-full p-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm dark:bg-white focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-blue-500"
placeholder="Mínimo... E.j: 5" required>
<small id="helpMin" class="hidden text-red-400">No cumple los requisitos</small>
</div>
<div>
<label for="valueMax"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 font-title">Palabras
máximas</label>
<input type="number" id="valueMax"
class="peer rounded-lg block w-full p-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm dark:bg-white focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-blue-500"
placeholder="Máximo... E.j: 10" required>
<small id="helpMax" class="hidden text-red-400">No cumple los requisitos</small>
</div>
</section>
<section
class="font-text rounded-md p-4 text-justify md:text-md text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-md">
<span class="font-bold underline decoration-red-500">Dato:</span> No hay un límite de
palabras a
mostrar establecido.
</section>
</div>
<div
class="flex items-center p-6 space-x-2 mb-2 rounded-b border-t border-gray-200 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 font-title">
<button type="button" id="registerAsUser"
class="focus:ring-4 focus:outline-none focus:ring-red-400 font-medium rounded-lg text-sm px-5 py-2.5 text-center text-white bg-red-600 hover:bg-red-700 focus:ring-red-500">Registrar</button>
<button type="button" id="registerAsGuest"
class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-400 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Invitado</button>
</div>
</div>
</div>
</div>
<section class="grid grid-cols-5 bg-white dark:bg-slate-800 shadow-xl py-2 font-title">
<aside class="col-span-1 md:hidden place-content-center my-auto">
<section class="flex items-center">
<nav class="mx-auto">
<div class="px-4">
<div class="flex">
<div class="md:hidden flex items-center">
<button class="outline-none mobile-menu-button">
<svg class=" w-8 h-8 text-black dark:text-white hover:text-sky-500"
x-show="!showMenu" fill="none" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="hidden mobile-menu absolute pb-4">
<ul>
<li>
<a href="#"
class="rounded-t-md block text-sm p-4 text-white dark:text-black bg-neutral-400 dark:bg-neutral-200 hover:bg-neutral-500 hover:text-white transition duration-300">Página
principal</a>
</li>
<li class="active">
<a href="index.html"
class="block p-4 text-sm text-black dark:text-white bg-neutral-200 dark:bg-neutral-600">Mecanografía</a>
</li>
<li>
<a href="#"
class="block text-sm p-4 text-white dark:text-black bg-neutral-400 dark:bg-neutral-200 hover:bg-neutral-500 hover:text-white transition duration-300">Próximamente</a>
</li>
<li>
<a href="#"
class="rounded-b-md block text-sm p-4 text-white dark:text-black bg-neutral-400 dark:bg-neutral-200 hover:bg-neutral-500 hover:text-white transition duration-300">Próximamente</a>
</li>
</ul>
</div>
</nav>
</aside>
<header class="col-span-4 md:col-span-5 md:text-2xl bg-white dark:bg-slate-800">
<section>
<h1 class="text-center italic text-lg md:text-2xl text-black dark:text-white">
Prueba de mecanografía</h1>
</section>
</header>
<div class="col-span-5 flex justify-center items-center gap-4 my-4">
<div id="showTimer"
class="px-4 rounded-md text-black dark:text-white bg-neutral-200 dark:bg-neutral-400">0:00</div>
<button id="change-txt"
class="btn rounded-md px-4 text-black dark:text-white bg-red-500 hover:bg-red-600 dark:bg-rose-500 dark:hover:bg-rose-600 hover:text-white dark:hover:text-black transition duration-300">Cambiar
texto</button>
<div id="showNickname"
class="text-black dark:text-white bg-neutral-200 dark:bg-neutral-400 px-4 rounded-md"></div>
</div>
</section>
<main class="grid grid-cols-5 font-text md:mx-auto">
<article class="hidden md:col-span-1 md:block">
<button id="aside-btn"
class="btn w-btn text-sm p-4 text-black dark:text-white bg-red-500 hover:bg-red-600 dark:bg-rose-500 dark:hover:bg-rose-600 hover:text-white dark:hover:text-black transition duration-300">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="w-6 h-6 mr-4">
<path fill-rule="evenodd"
d="M11.622 1.602a.75.75 0 01.756 0l2.25 1.313a.75.75 0 01-.756 1.295L12 3.118 10.128 4.21a.75.75 0 11-.756-1.295l2.25-1.313zM5.898 5.81a.75.75 0 01-.27 1.025l-1.14.665 1.14.665a.75.75 0 11-.756 1.295L3.75 8.806v.944a.75.75 0 01-1.5 0V7.5a.75.75 0 01.372-.648l2.25-1.312a.75.75 0 011.026.27zm12.204 0a.75.75 0 011.026-.27l2.25 1.312a.75.75 0 01.372.648v2.25a.75.75 0 01-1.5 0v-.944l-1.122.654a.75.75 0 11-.756-1.295l1.14-.665-1.14-.665a.75.75 0 01-.27-1.025zm-9 5.25a.75.75 0 011.026-.27L12 11.882l1.872-1.092a.75.75 0 11.756 1.295l-1.878 1.096V15a.75.75 0 01-1.5 0v-1.82l-1.878-1.095a.75.75 0 01-.27-1.025zM3 13.5a.75.75 0 01.75.75v1.82l1.878 1.095a.75.75 0 11-.756 1.295l-2.25-1.312a.75.75 0 01-.372-.648v-2.25A.75.75 0 013 13.5zm18 0a.75.75 0 01.75.75v2.25a.75.75 0 01-.372.648l-2.25 1.312a.75.75 0 11-.756-1.295l1.878-1.096V14.25a.75.75 0 01.75-.75zm-9 5.25a.75.75 0 01.75.75v.944l1.122-.654a.75.75 0 11.756 1.295l-2.25 1.313a.75.75 0 01-.756 0l-2.25-1.313a.75.75 0 11.756-1.295l1.122.654V19.5a.75.75 0 01.75-.75z"
clip-rule="evenodd" />
</svg>
<span class="self-center text-xl font-semibold whitespace-nowrap">pGames
Studios</span>
</div>
</button>
<ul id="pc-menu">
<li>
<a href="#"
class="block text-sm p-4 bg-neutral-400 dark:bg-neutral-200 hover:bg-neutral-500 hover:text-white transition duration-300">Página
principal</a>
</li>
<li class="active">
<a href="index.html"
class="block p-4 text-sm text-black dark:text-white bg-neutral-200 dark:bg-neutral-400 font-bold">Mecanografía</a>
</li>
<li>
<a href="#"
class="block text-sm p-4 bg-neutral-400 dark:bg-neutral-200 hover:bg-neutral-500 hover:text-whitetransition duration-300">Próximamente</a>
</li>
<li>
<a href="#"
class="block text-sm p-4 rounded-b-md bg-neutral-400 dark:bg-neutral-200 hover:bg-neutral-500 hover:text-white transition duration-300">Próximamente</a>
</li>
</ul>
</article>
<article class="col-span-5 md:col-span-4">
<div class="p-4">
<section id="paragraph"
class="flex flex-wrap text-sm md:text-2xl text-black dark:text-gray-700 my-4 px-8 py-4 justify-center text-center font-bold mb-8 bg-neutral-400 dark:bg-neutral-300 rounded-md">
</section>
<textarea id="textarea"
class="p-4 rounded-md placeholder:italic placeholder:text-black caret-blue-500 h-48 w-full font-xs focus:outline-none focus:ring focus:ring-violet-300 bg-neutral-400 dark:bg-neutral-300 text-black dark:text-white resize-none"
placeholder="Escribe aquí tu respuesta..."></textarea>
<article id="statistics"
class="hidden md:w-6/12 mx-auto my-8 p-2 font-title bg-neutral-400 dark:bg-neutral-300 text-lg rounded-md text-center text-white dark:text-black md:text-2xl">
<div id="pts"></div>
<div id="miss"></div>
<div id="time"></div>
<div class="flex justify-center my-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" id="reload"
class="w-12 h-12 cursor-pointer rounded-md p-2 text-black dark:text-white bg-red-500 hover:bg-red-600 dark:bg-rose-500 dark:hover:bg-rose-600 hover:text-white dark:hover:text-black">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</div>
</article>
<section class="flex items-center justify-center my-2 sm:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="w-10 h-10 fill-black dark:fill-white">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="w-5 h-5 fill-blue-500">
<path fill-rule="evenodd"
d="M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z"
clip-rule="evenodd" />
</svg>
<span class="underline decoration-blue-500 text-black dark:text-white">Para propósitos
educativos</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="w-10 h-10 fill-black dark:fill-white">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z"
clip-rule="evenodd" />
</svg>
</section>
<section id="showBestScore"
class="hidden md:w-6/12 mx-auto mb-16 py-2 md:py-4 md:mt-8 bg-neutral-400 dark:bg-neutral-300 text-sm rounded-md text-center text-white dark:text-black md:text-2xl font-title">
<h2 class="my-2 font-bold text-2xl text-black">Mejor puntuación</h2>
<div class="flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="w-6 h-6 mr-4 fill-black">
<path fill-rule="evenodd"
d="M5.166 2.621v.858c-1.035.148-2.059.33-3.071.543a.75.75 0 00-.584.859 6.753 6.753 0 006.138 5.6 6.73 6.73 0 002.743 1.346A6.707 6.707 0 019.279 15H8.54c-1.036 0-1.875.84-1.875 1.875V19.5h-.75a2.25 2.25 0 00-2.25 2.25c0 .414.336.75.75.75h15a.75.75 0 00.75-.75 2.25 2.25 0 00-2.25-2.25h-.75v-2.625c0-1.036-.84-1.875-1.875-1.875h-.739a6.706 6.706 0 01-1.112-3.173 6.73 6.73 0 002.743-1.347 6.753 6.753 0 006.139-5.6.75.75 0 00-.585-.858 47.077 47.077 0 00-3.07-.543V2.62a.75.75 0 00-.658-.744 49.22 49.22 0 00-6.093-.377c-2.063 0-4.096.128-6.093.377a.75.75 0 00-.657.744zm0 2.629c0 1.196.312 2.32.857 3.294A5.266 5.266 0 013.16 5.337a45.6 45.6 0 012.006-.343v.256zm13.5 0v-.256c.674.1 1.343.214 2.006.343a5.265 5.265 0 01-2.863 3.207 6.72 6.72 0 00.857-3.294z"
clip-rule="evenodd" />
</svg>
<span id="userStored"
class="text-xl font-title underline decoration-blue-500 md:text-2xl"></span>
</div>
<div id="ptsStored" class="text-lg"></div>
<div id="missStored" class="text-lg"></div>
<div id="timeStored" class="text-lg"></div>
</section>
</div>
</article>
</main>
<footer
class="fixed bottom-0 left-0 right-0 flex justify-between mt-2 px-6 py-4 mx-auto font-title text-white bg-white dark:bg-slate-800 shadow-xl">
<section class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="w-6 h-6 mr-4 fill-black dark:fill-white">
<path fill-rule="evenodd"
d="M11.622 1.602a.75.75 0 01.756 0l2.25 1.313a.75.75 0 01-.756 1.295L12 3.118 10.128 4.21a.75.75 0 11-.756-1.295l2.25-1.313zM5.898 5.81a.75.75 0 01-.27 1.025l-1.14.665 1.14.665a.75.75 0 11-.756 1.295L3.75 8.806v.944a.75.75 0 01-1.5 0V7.5a.75.75 0 01.372-.648l2.25-1.312a.75.75 0 011.026.27zm12.204 0a.75.75 0 011.026-.27l2.25 1.312a.75.75 0 01.372.648v2.25a.75.75 0 01-1.5 0v-.944l-1.122.654a.75.75 0 11-.756-1.295l1.14-.665-1.14-.665a.75.75 0 01-.27-1.025zm-9 5.25a.75.75 0 011.026-.27L12 11.882l1.872-1.092a.75.75 0 11.756 1.295l-1.878 1.096V15a.75.75 0 01-1.5 0v-1.82l-1.878-1.095a.75.75 0 01-.27-1.025zM3 13.5a.75.75 0 01.75.75v1.82l1.878 1.095a.75.75 0 11-.756 1.295l-2.25-1.312a.75.75 0 01-.372-.648v-2.25A.75.75 0 013 13.5zm18 0a.75.75 0 01.75.75v2.25a.75.75 0 01-.372.648l-2.25 1.312a.75.75 0 11-.756-1.295l1.878-1.096V14.25a.75.75 0 01.75-.75zm-9 5.25a.75.75 0 01.75.75v.944l1.122-.654a.75.75 0 11.756 1.295l-2.25 1.313a.75.75 0 01-.756 0l-2.25-1.313a.75.75 0 11.756-1.295l1.122.654V19.5a.75.75 0 01.75-.75z"
clip-rule="evenodd" />
</svg>
<p class="text-black dark:text-white">Derechos reservados | 2022 | pGames</p>
</section>
<section class="hidden md:flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="w-10 h-10 fill-black dark:fill-white">
<path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="w-5 h-5 fill-blue-500">
<path fill-rule="evenodd"
d="M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z"
clip-rule="evenodd" />
</svg>
<span class="underline decoration-blue-500 text-black dark:text-white">Para propósitos
educativos</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="w-10 h-10 fill-black dark:fill-white">
<path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H3.75A.75.75 0 013 10z"
clip-rule="evenodd" />
</svg>
</section>
</footer>
</article>
</body>
<script src="words.js"></script>
<script src="index.js"></script>
</html>