-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.php
More file actions
327 lines (304 loc) · 19.3 KB
/
index.php
File metadata and controls
327 lines (304 loc) · 19.3 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
<!DOCTYPE html>
<html lang="en">
<?php include "./layouts/head.php" ?>
<body>
<?php include "./layouts/header.php" ?>
<header class="header pt-6">
<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true" style="max-width: 2000px;">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./assets/images/1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/images/2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/images/3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/images/4.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/images/6.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/images/7.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/images/9.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/images/10.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/images/12.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</header>
<section id="juegos" class="juegos py-6">
<br>
<div class="container">
<p class="lead text-uppercase text-primary fw-medium text-center">
Juegos Populares
</p>
<h2 class="text-capitalize fw-bold pb-4 text-center text-light">
Encuentra tus juegos favoritos
</h2>
<div class="row">
<?php
// Establece la conexión con la base de datos
$conexion = new mysqli("localhost", "root", "", "vicionow");
// Verifica si hay errores en la conexión
if ($conexion->connect_error) {
die("Error de conexión: " . $conexion->connect_error);
}
// Consulta SQL para obtener la contraseña del usuario
$sql = $conexion->query("SELECT * FROM juegos INNER JOIN categorias ON categorias.ID_Categoria=juegos.ID_Categoria");
foreach ($sql as $row) {
?>
<!--Cards-->
<div class="col-md-4 mb-4">
<div class="card border-0 h-100">
<img src="./assets/images/<?php echo $row["ID_Juego"]; ?>.jpg" class="card-img-top img-fluid" />
<div class="card-body d-flex flex-column">
<div class="d-flex pb-3 gap-3 flex-grow-1 justify-content-between align-items-center">
<a href="juegos.php?id=<?php echo htmlspecialchars($row["ID_Juego"]); ?>"
class="card-title-link">
<h5 class="card-title pt-4 fs-4 fw-medium">
<?php
switch ($row["Nombre_Categoria"]) {
case "PC":
echo '<i class="bi bi-pc-display"></i>';
break;
case "PlayStation":
echo '<i class="bi bi-playstation"></i>';
break;
case "Xbox":
echo '<i class="bi bi-xbox"></i>';
break;
case "Nintendo":
echo '<i class="bi bi-nintendo-switch"></i>';
break;
}
?>
<?php echo $row["Nombre"]; ?>
</h5>
</a>
<a href="juegos.php?id=<?php echo htmlspecialchars($row["ID_Juego"]); ?>"
class="price-link d-flex align-items-center justify-content-center bg-primary text-white">
<?php echo $row["Precio"]; ?> €
</a>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
</section>
<br>
<!--About-->
<section id="about" class="about py-5"><!--Nos dara los espacios arriba y abajo en el eje Y osea vertical-->
<div class="container"><!--Nos dara los espacios laterales-->
<div class="row"><!--Filas-->
<div class="col-md-6 py-5 ps-5"><!--Columna del texto. ps-5 ponemos margen solo al lado izquierdo-->
<p class="lead text-uppercase text-primary fw-medium"> Próximos
Lanzamientos<!--lead = para hacer la letra más grande, text-uppercase = texto a mayusculas, text-primary = color por defecto en azul que luego lo cambiaremos y fw-medium = ancho del texto -->
</p>
<h2 class="fw-bold pb-2"> Se confirman las filtraciones <br> de los últimos
meses:<!--text-capitalize = la primera letra de cada palabra sera mayuscula ,fw-bold = ancho de letra 2, y pb-2 = separa el titulo con el siguiente parrafo-->
</h2>
<p class="text-muted"><!--cambia el color del texto a gris-->El nuevo juego estará protagonizado por
una ninja y un samurái africano,Yasuke y Naoe. Protagonistas del capítulo ambientado en el Japón
feudal que hasta hace poco se conocía con el nombre de Assassin's Creed Codename RED.</p>
<p class="text-muted">Yasuke fue el único samurái de origen africano, un personaje histórico que
sirvió a Oda Nobunaga, el gran unificador. Vivió en el siglo XVI y fue uno de los vasallos más
fieles del señor feudal. Ubisoft ha recuperado su figura para el videojuego, un movimiento
extraño no porque no haya habido personajes históricos en la saga, sino porque le han entregado
el estatus de protagonista. La premisa histórica todavía no está clara, así que habrá que ver
que hasta qué punto concuerda con el personaje real. Lo que es seguro hasta ahora, es que será
samurái.</p>
<p class="text-muted">De Naoe no se conocen detalles, más allá de que será una figura que se fundirá
con las sombras, puesto que abraza las técnicas de los shinobi. Mientras que Yasuke encarará la
batalla de frente, Naoe usará sus habilidades kunoichi (ninja) valiéndose del sigilo.</p>
</div>
<div class="col-md-6 align-self-stretch"><!--Columna de la imagen-->
<img id="imgEfecto" src="./assets/images/ProximoLanzamientoAssassins-Creed-Shadows.jpeg"
class="img-fluid" /><!--Para ajustarla utilizamos img-fluid-->
</div>
</div>
</div>
</section>
<!--Noticias-->
<section id="noticias" class="noticias py-6">
<br>
<div class="container"><!--para tener espacios laterales-->
<p class="lead text-uppercase text-primary fw-medium text-center"> Últimas
Noticias<!--lead = para hacer la letra más grande, text-uppercase = texto a mayusculas, text-primary = color por defecto en azul que luego lo cambiaremos, fw-medium = ancho del texto -->
</p>
<h2 class="text-capitalize fw-bold pb-4 text-center text-light"> No te pierdas las
novedades!<!--text-capitalize = la primera letra de cada palabra sera mayuscula ,fw-bold = ancho de letra 2, pb-4 = separa el titulo con el siguiente parrafo -->
</h2>
<div class="row">
<!--Clase 1-->
<div class="col-md-3"><!--columna 1-->
<div class="card border-0 ">
<img src="./assets/images/NoticiasPaperMario.jpg"
class="card-img-top img-fluid" /><!--card-img-top = redondear las esquinas de la img superior, img-fluid = ajustar al ancho-->
<div class="card-body px-5 py-4">
<!--px-5 = separacion de 5 horizontal, py-4 = separacion de 4 vertical-->
<div class="d-flex pb-3 gap-3"><!--d-flex = imagen del icono y el texto esten al lado-->
<h5 class="card-titel pt-4 fs-4 fw-medium">Paper Mario nueva función en su gameplay</h5>
</div>
<p class="card-text small pb-2">Uno de los juegos más esperados para Nintendo Switch es
Paper Mario: The Thousand-Year Door, el cual sigue revelando más detalles que demuestran
lo que ha mejorado en relación con su versión original. Ahora, un nuevo clip enseñó una
función que será bastante útil en la aventura del fontanero.</p>
<!--card-text = texto de la carta, small = tamaño de la letra pequeña-->
</div>
</div>
</div>
<!--Clase 2-->
<div class="col-md-3"><!--columna 2-->
<div class="card border-0">
<img src="./assets/images/NoticiasHelldivers2.jpeg"
class="card-img-top img-fluid" /><!--card-img-top = redondear las esquinas de la img superior, img-fluid = ajustar al ancho-->
<div class="card-body px-5 py-4">
<!--px-5 = separacion de 5 horizontal, py-4 = separacion de 4 vertical-->
<div class="d-flex pb-3 gap-3"><!--d-flex = imagen del icono y el texto esten al lado-->
<h5 class="card-titel pt-4 fs-4 fw-medium">Helldivers 2 el juego que más rápido se está
vendiendo de la historia</h5>
</div>
<p class="card-text small pb-2">Sony y el CEO de Arrowhead arrojan una curiosa comparativa.
Johan Pilestedt, CEO de Arrowhead Game Studios, compara el éxito de Helldivers II, uno
de los juegos más exitosos de la historia de Sony, con la población actual de Suecia.
</p><!--card-text = texto de la carta, small = tamaño de la letra pequeña-->
</div>
</div>
</div>
<!--Clase 3-->
<div class="col-md-3"><!--columna 3-->
<div class="card border-0">
<img src="./assets/images/NoticiasGhostofTsushima.jpeg"
class="card-img-top img-fluid" /><!--card-img-top = redondear las esquinas de la img superior, img-fluid = ajustar al ancho-->
<div class="card-body px-5 py-4">
<!--px-5 = separacion de 5 horizontal, py-4 = separacion de 4 vertical-->
<div class="d-flex pb-3 gap-3"><!--d-flex = imagen del icono y el texto esten al lado-->
<h5 class="card-titel pt-4 fs-4 fw-medium">Ghost of Tsushima está optimizado para Steam
Deck y otros dispositivos</h5>
</div>
<p class="card-text small pb-2">Nixxes ha confirmado que esta aventura de samuráis en mundo
abierto ha sido optimizada para Steam Deck y otros dispositivos similares. El juego
entre consolas se lanzará en beta. No te pierdas ninguna de las noticias sobre este
grandísimo videojuego, ya que esta siendo muy solicitado por todos los usuarios.</p>
<!--card-text = texto de la carta, small = tamaño de la letra pequeña-->
</div>
</div>
</div>
<!--Clase 4-->
<div class="col-md-3"><!--columna 4-->
<div class="card border-0">
<img src="./assets/images/noticiasGta6.jpeg"
class="card-img-top img-fluid" /><!--card-img-top = redondear las esquinas de la img superior, img-fluid = ajustar al ancho-->
<div class="card-body px-5 py-4">
<!--px-5 = separacion de 5 horizontal, py-4 = separacion de 4 vertical-->
<div class="d-flex pb-3 gap-3"><!--d-flex = imagen del icono y el texto esten al lado-->
<h5 class="card-titel pt-4 fs-4 fw-medium">Los fans de GTA 6 creen se revelarán cosas
dentro de muy poco</h5>
</div>
<p class="card-text small pb-2">¿Cuándo tendremos más novedades sobre GTA 6? Los mayores
fans del juego han estado buscando pistas y creen haber dado con algo muy interesante,
creen que la portada y más imágenes del juego revelaran algo. ¿Tendremos una revelación
pronto?</p><!--card-text = texto de la carta, small = tamaño de la letra pequeña-->
</div>
</div>
</div>
</div>
</div> <br>
</section>
<br>
<!-- Ofertas -->
<section id="ofertas" class="ofertas py-6">
<div class="container">
<p class="lead text-uppercase text-primary fw-medium text-center">Juegos en Ofertas</p>
<h2 class="text-capitalize fw-bold pb-4 text-center">¡Tenemos las mejores ofertas!</h2>
<div class="row">
<!-- Oferta 1 -->
<div class="col-md-4 mb-4">
<div class="card border-0 h-100 bg-white">
<img src="./assets/images/11.jpg" class="card-img-top img-fluid" />
<div class="card-body d-flex flex-column">
<div class="d-flex pb-3 gap-3 flex-grow-1 justify-content-between align-items-center">
<a href="#" class="card-title-link">
<h5 class="card-title pt-4 fs-4 fw-medium"><i class="bi bi-nintendo-switch"> EA
Sports FC24 Switch</i></h5>
</a>
<a href="#"
class="price-link d-flex flex-column align-items-center justify-content-center bg-primary text-white">
<span class="text-decoration-line-through text-black">39.99€</span>
<span class="fw-bold">15.99€</span>
</a>
</div>
</div>
</div>
</div>
<!-- Oferta 2 -->
<div class="col-md-4 mb-4">
<div class="card border-0 h-100 bg-white">
<img src="./assets/images/JuegoStarWarsJediSurvivor.jpg" class="card-img-top img-fluid" />
<div class="card-body d-flex flex-column">
<div class="d-flex pb-3 gap-3 flex-grow-1 justify-content-between align-items-center">
<a href="#" class="card-title-link">
<h5 class="card-title pt-4 fs-4 fw-medium"><i class="bi bi-pc-display"> Star Wars:
Jedi Survivor</i></h5>
</a>
<a href="#"
class="price-link d-flex flex-column align-items-center justify-content-center bg-primary text-white">
<span class="text-decoration-line-through text-black">59.99€</span>
<span class="fw-bold">39.99€</span>
</a>
</div>
</div>
</div>
</div>
<!-- Oferta 3 -->
<div class="col-md-4 mb-4">
<div class="card border-0 h-100 bg-white">
<img src="./assets/images/9.jpg" class="card-img-top img-fluid" />
<div class="card-body d-flex flex-column">
<div class="d-flex pb-3 gap-3 flex-grow-1 justify-content-between align-items-center">
<a href="#" class="card-title-link">
<h5 class="card-title pt-4 fs-4 fw-medium"><i class="bi bi-xbox"> Red Dead
Redemption II Xbox</i></h5>
</a>
<a href="#"
class="price-link d-flex flex-column align-items-center justify-content-center bg-primary text-white">
<span class="text-decoration-line-through text-black">49.99€</span>
<span class="fw-bold">18.19€</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<br>
<?php include "./layouts/footer.php"; ?>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>