-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (116 loc) · 8.92 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
<!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" />
<title>Memorama JS</title>
<link rel="stylesheet" href="css/style.css" />
<script defer src="js/functions.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
</head>
<body class="relative min-h-screen flex flex-col justify-start items-center overflow-hidden select-none">
<!-- Barra de la ventana -->
<div id="bar-window" class="bg-red-600/60 w-full h-8 flex items-center overflow-hidden">
<div class="flex-grow">
<p class="text-white w-full font-handlee-reg font-semibold tracking-wide pl-10 bar">Memorama Js by Leo Ss</p>
</div>
<div class="flex justify-end items-center bg-red-600/50">
<button id="minBtn" class="hover:bg-red-600" title="Minimizar">
<img src="img/min.svg" class="object-fill px-1">
</button>
<button id="maxBtn" class="hover:bg-red-600" title="Maximizar">
<img src="img/max.svg" class="object-fill">
</button>
<button id="closeBtn" class="hover:bg-red-600" title="Cerrar">
<img src="img/close.svg" class="object-fill">
</button>
</div>
</div>
<!-- Titulo -->
<h1 id="titulo" class="mt-36 mb-8 mx-auto text-6xl font-kaushan-reg">Memorama JS</h1>
<!-- Botón Nueva partida -->
<div class="mt-4 flex justify-center content-btn">
<button id="nuevo-juego" class="rounded-lg bg-red-600/60 text-2xl font-handlee-reg py-3 px-4 leading-none text-white flex justify-center items-center uppercase hover:bg-red-600">Nueva partida</button>
</div>
<!-- Modal Seleccionar Dificultad -->
<div id="modal-dificultad" class="flex justify-center items-center absolute m-auto top-0 right-0 bottom-0 left-0 w-full h-[100vh-32px] bg-slate-900/75 hidden">
<div class="w-full h-52 flex flex-col justify-center items-center bg-yellow-400">
<h2 class="text-5xl text-black font-kaushan-reg text-center uppercase tracking-widest">Selecciona una dificultad</h2>
<div class="flex gap-x-12 mt-12 text-xl font-semibold">
<button id="facil" class="rounded-lg bg-red-600 text-2xl font-handlee-reg py-3 px-4 leading-none text-white flex justify-center items-center uppercase hover:bg-red-600/60 shadow-lg shadow-red-500/40">Fácil</button>
<button id="intermedio" class="rounded-lg bg-red-600 text-2xl font-handlee-reg py-3 px-4 leading-none text-white flex justify-center items-center uppercase hover:bg-red-600/60 shadow-lg shadow-red-500/40">Intermedio</button>
<button id="dificil" class="rounded-lg bg-red-600 text-2xl font-handlee-reg py-3 px-4 leading-none text-white flex justify-center items-center uppercase hover:bg-red-600/60 shadow-lg shadow-red-500/40">Díficil</button>
<button id="muy-dificil" class="rounded-lg bg-red-600 text-2xl font-handlee-reg py-3 px-4 leading-none text-white flex justify-center items-center uppercase hover:bg-red-600/60 shadow-lg shadow-red-500/40">Muy Díficil</button>
</div>
</div>
</div>
<!-- UI Puntuación -->
<div id="score" class="w-[550px] h-14 mt-10 flex justify-around items-center bg-slate-200/20 rounded-md hidden">
<div>
<span id="movimientos" class="text-2xl font-semibold">Movimientos: 0</span>
</div>
<div>
<p id="pares" class="text-2xl font-semibold">Aciertos: 0</p>
</div>
<div>
<p id="tiempo" class="text-2xl font-semibold">Tiempo: <span id="minutos">00</span>:<span id="segundos">00</span></p>
</div>
</div>
<!-- UI Tablero del juego -->
<div id="tablero" class="mt-4 grid gap-3 hidden p-10 bg-slate-200/20 rounded-md">
</div>
<!-- Modal Pantalla Ganadora -->
<div id="modal-win" class="flex justify-center items-center absolute m-auto top-0 right-0 bottom-0 left-0 w-full h-[100vh-32px] bg-slate-900/75 hidden">
<div class="w-full h-52 flex flex-col justify-center items-center bg-lime-400">
<h2 class="text-6xl text-black font-kaushan-reg text-center uppercase tracking-widest animate-bounce">¡Ganaste!</h2>
<div class="flex gap-x-12 mt-12 text-xl font-semibold">
<p id="modal-movimientos">Movimientos: 20</p>
<p id="modal-tiempo">Tiempo: 02:05</p>
<p id="modal-puntaje">Puntaje total: 100</p>
</div>
</div>
</div>
<!-- UI Botones de sonido -->
<div id="contenedor-btn-sonido" class="mt-auto flex justify-end w-full hidden">
<button id="musicOnOff" class="p-3 bg-red-600/60 rounded-full mb-8 mr-4">
<svg xmlns="http://www.w3.org/2000/svg" width="20pt" height="20pt" fill="#ffffff" version="1.1" viewBox="0 0 752 752">
<defs>
<clipPath id="a">
<path d="m176 139.21h400v473.58h-400z"/>
</clipPath>
</defs>
<g clip-path="url(#a)">
<path d="m575.3 139.21-283.2 51.199v326.25c-7.5781-7.1562-20.152-9.2617-34.836-9.2617-16.785 0-36.836 8.418-52.621 21.523-15.785 13.102-27.73 30.047-27.73 47.359l0.003906-0.003906c-0.19922 10.363 4.4766 20.223 12.629 26.625 8.5547 6.6211 19.121 10.113 29.941 9.8945 20.18-0.58984 39.625-7.7188 55.406-20.312 16.363-12.68 39.098-29.992 39.098-48.988v-275.05l239.53-47.359v246c-7.5781-7.1562-20.152-9.2617-34.836-9.2617-16.785 0-36.836 8.418-52.621 21.523-15.785 13.102-27.73 30.047-27.73 47.359-0.19922 10.363 4.4766 20.223 12.629 26.625 8.5938 6.7734 19.266 10.359 30.207 10.156 20.18-0.58984 39.625-7.7188 55.406-20.312 16.363-12.68 39.098-29.992 39.098-49.043z" fill-rule="evenodd"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20pt" height="20pt" class="hidden" fill="#ffffff" version="1.1" viewBox="0 0 752 752">
<defs>
<clipPath id="a">
<path d="m154 139.21h444v473.58h-444z"/>
</clipPath>
</defs>
<g clip-path="url(#a)">
<path d="m536.55 493.61 60.457 65.039-19.258 19.312-391.18-419.43 19.414-19.312 63.777 68.406 266.68-48.254zm-204.75-219.53 183.8 197.06v-233.47zm-66.301 246.42v-239.21l21.047 22.469v242.68c0 18.207-21.73 34.781-37.414 46.938-15.191 12.117-33.93 18.938-53.355 19.418-10.484 0.20312-20.715-3.2344-28.941-9.7344-7.7109-6.1719-12.094-15.594-11.84-25.469 0-16.629 11.262-33.203 26.309-45.359 15.051-12.156 34.57-20.629 50.621-20.629 14.105 0 26.152 2.0547 33.574 8.8945zm166.33-35.465c4.5781-3.7578 9.4922-7.0859 14.68-9.9453l60.41 64.984-7.7891 6.0508c-15.121 12.016-33.734 18.793-53.043 19.312-10.477 0.17969-20.699-3.2578-28.941-9.7344-7.8047-6.1367-12.27-15.594-12.047-25.52 0-16.418 11.258-33.152 26.52-45.148z" fill-rule="evenodd"/>
</g>
</svg>
</button>
<button id="soundsOnOff" class="p-2 bg-red-600/60 rounded-full mb-8 mr-8">
<svg xmlns="http://www.w3.org/2000/svg" width="26pt" height="26pt" fill="#ffffff" version="1.1" viewBox="0 0 752 752">
<g>
<path d="m372.05 222.09-115.2 96.098c-2.4609 2.0469-5.5586 3.1641-8.7617 3.1602h-36.031c-3.6289 0-7.1055 1.4414-9.668 4.0117-2.5625 2.5703-3.9961 6.0547-3.9844 9.6797v81.93c0 7.543 6.1133 13.656 13.652 13.656h36.031c3.2031-0.007813 6.3008 1.1094 8.7617 3.1562l115.2 96.137c5.3438 4.4727 12.199 6.7305 19.156 6.3164 6.9531-0.41797 13.488-3.4766 18.262-8.5547 4.7734-5.0781 7.4258-11.785 7.4141-18.758v-265.84c0.011719-6.9688-2.6406-13.68-7.4141-18.754-4.7734-5.0781-11.309-8.1367-18.262-8.5547-6.957-0.41406-13.812 1.8438-19.156 6.3125zm17.484 286.79-115.2-96.055c-7.3711-6.1367-16.656-9.5-26.246-9.5117h-22.375v-54.621h22.375c9.5938-0.007812 18.879-3.3711 26.246-9.5117l115.32-96.098z"/>
<path d="m471.62 266.72h27.309v218.56h-27.309z"/>
<path d="m526.29 294.03h27.309v163.94h-27.309z"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="26pt" height="26pt" class="hidden" fill="#ffffff" version="1.1" viewBox="0 0 752 752">
<g>
<path d="m359.74 233.1-107.07 89.23c-2.2773 1.9102-5.1562 2.957-8.1289 2.9609h-33.465c-3.3594 0-6.582 1.3359-8.9609 3.7109-2.375 2.375-3.707 5.5977-3.707 8.957v76.09c0 6.9961 5.6719 12.668 12.668 12.668h33.465c2.9688-0.011719 5.8477 1.0234 8.1289 2.918l107.07 89.273c4.9648 4.125 11.32 6.207 17.77 5.8125 6.4453-0.39453 12.5-3.2305 16.926-7.9336 4.4297-4.7031 6.8945-10.918 6.9023-17.375v-246.82c-0.007813-6.457-2.4727-12.672-6.9023-17.375-4.4258-4.7031-10.48-7.5391-16.926-7.9336-6.4492-0.39453-12.805 1.6836-17.77 5.8125zm16.258 266.31-107.07-89.23c-6.8438-5.6836-15.457-8.7969-24.352-8.8008h-20.797v-50.754h20.758c8.9141-0.003906 17.543-3.1328 24.391-8.8398l107.07-89.191z"/>
<path d="m553.59 340.13-17.957-17.957-35.871 35.871-35.875-35.871-17.918 17.957 35.875 35.871-35.875 35.875 17.918 17.957 35.875-35.875 35.871 35.875 17.957-17.957-35.875-35.875z"/>
</g>
</svg>
</button>
</div>
<script src="js/app.js"></script>
</body>
</html>