-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (129 loc) · 6.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
147
148
149
150
151
152
<!--
SPDX-FileCopyrightText: 2024 Pablo Portas López <[email protected]>
SPDX-License-Identifier: Apache-2.0
-->
<!DOCTYPE html>
<html lang="es"> <!-- Web escrita en español-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CronoSquare | HackUDC 2024</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="imagenes/favicon.ico">
</head>
<body>
<audio id="musifondo" loop>
<!-- Música en bucle de fondo libre de derechos de autor -->
<source src="musica/Fondo.mp3" type="audio/mpeg">
</audio>
<audio id="sonidoClick" src="musica/Clicks.mp3" preload="auto">
<!-- Música del Minecraft para cada vez que el usuario clica en un tile -->
</audio>
<div class="fondo-animado"> <!-- El fondo va cambiado de color según lo especificado en el .css -->
<h1 style="text-align: center;">Crono <img style="height: 75px;" src="./imagenes/Logo_ICON_sin-fondo.png"
alt=""> Square</h1>
<h3 style="text-align: center;">HackUDC 2024</h3>
<div class="contenedor"> <!-- Div Principal -->
<div class="texto"> <!-- Contadores y Temporizador -->
<img style="width: 60px;" src="imagenes/ChinchetaVerde.png" alt=""><br>
<div id="cuentaAtras">10:00:00</div>
<br>
<div id="score-display">Puntuación: 0</div>
<div id="move-display">Movimientos: 0</div>
<div class="contenedor-botones">
<a target="_blank" href="https://github.com/TeenBiscuits/CronoSquare" class="boton avanzar">⭐ Enlace
al Github</a>
</div>
</div>
<div class="puzzle" id="game-grid"> <!-- Game Grid utilizada por el programa para el tablero de juego -->
</div>
<script src="script.js"></script>
<div class="botones"> <!-- Opciones de dificultad del Juego -->
Imagen
<label class="switch">
<input type="checkbox" id="show-image" onclick="toggleImage()">
<span class="slider"></span>
</label>
<div id="imagenContenedor" style="display:none;">
<img style="width: 50px;" id="imagen" src="imagenes/patron.png" alt="">
</div>
<br><br>
<div>
<img id="imagenDeLaEsquina" src="" alt="Cargando..." height="256" width="auto">
<script src="script.js"></script>
</div>
<br>
Números <label class="switch">
<input type="checkbox" id="show-numbers">
<span class="slider"></span>
</label>
<br>
</div>
</div>
<div class="contenedor-centrado"> <!-- Botón para Generar una nueva imagen -->
<div class="contenedor-botones">
<button id="random-button" class="boton avanzar">→ 🎲✨ Crear con IA ✨🎲 ←</button>
</div>
</div>
<div> <!-- Créditos <3 -->
<br>
<p style="text-align: center;">Creado por Pablo Portas López, Ángel Díaz Fernández y Alexandre Laredo
Fernández.</p>
</div>
</div>
<script>
// JavaScript para ocultar la imagen original según el botón
function toggleImage() {
var isChecked = document.getElementById("show-image").checked; // Booleano para el botón de mostrar imagen (activado)
var image = document.getElementById("imagenDeLaEsquina");
// localStorage.getItem('imagenDeLaEsquina'.style.display);
if (image.style.display === "none" && isChecked) {
image.style.display = "block";
} else if (image.style.display === "block" && !isChecked) {
image.style.display = "none";
}
// Update the toggle state in localStorage
// localStorage.setItem('imageToggleState', image.style.display === "none" ? "false" : "true");
localStorage.setItem("show-image", isChecked);
}
// Obtiene el estado del switch del localStorage para mostrar u ocultar la imagen de ayuda (o "imagenDeLaEsquina")
// No es necesario el setItem para guardar el dato
document.addEventListener('DOMContentLoaded', function() {
var isChecked;
// Check if localStorage is available
if (typeof(Storage) !== "undefined") {
// Retrieve data from localStorage if available
isChecked = localStorage.getItem('show-image');
}
var image = document.getElementById("imagenDeLaEsquina");
var toggle = document.getElementById("show-image");
// Set the default toggle state if localStorage is empty
if (isChecked === null) {
isChecked = false; // Set default value to false
}
if (isChecked === 'false') {
image.style.display = 'none';
localStorage.setItem("show-image", isChecked);
toggle.checked = false;
} else if (isChecked === 'true') {
image.style.display = 'block';
localStorage.setItem("show-image", isChecked);
toggle.checked = true;
} else {
image.style.display = 'none';
localStorage.setItem("show-image", isChecked);
toggle.checked = false;
}
// Add event listener for checkbox change event
toggle.addEventListener("change", toggleImage);
});
</script>
</body>
<script>
// TODO: Solucional el ERROR.
document.getElementById('botonClickeable').addEventListener('click', function () {
var sonido = document.getElementById('sonidoClick');
sonido.play();
});
</script>
</html>