Compare commits
5 Commits
fdd0712cd5
...
cb3b00fba3
| Author | SHA1 | Date | |
|---|---|---|---|
 Isaac
|
cb3b00fba3 | ||
 daniel
|
db6e1304bf | ||
|
Isaac
|
38a091a2fd | ||
|
Isaac
|
c603a3c0ba | ||
 alexis
|
afbf66c073 |
+1
-162
@@ -14,171 +14,10 @@ $username = $isLoggedIn ? $_SESSION['usuario'] : '';
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
||||
<!-- Google Fonts para estilo Kahoot -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/index.css">
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
<style>
|
||||
|
||||
:root {
|
||||
--kahoot-purple: #46178f;
|
||||
--kahoot-blue: #1368ce;
|
||||
--kahoot-red: #e21b3c;
|
||||
--kahoot-yellow: #ffa602;
|
||||
--kahoot-green: #26890c;
|
||||
--kahoot-green-hover: #1f6f09;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
background-color: #f2f2f2;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.navbar-kahoot {
|
||||
background-color: var(--kahoot-purple);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: 700;
|
||||
font-size: 1.8rem;
|
||||
color: #fff !important;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.btn-kahoot-login {
|
||||
background-color: var(--kahoot-blue);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-bottom: 4px solid #0c4891;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-kahoot-login:hover {
|
||||
background-color: #0f56ab;
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-kahoot-register {
|
||||
background-color: var(--kahoot-green);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-bottom: 4px solid var(--kahoot-green-hover);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-kahoot-register:hover {
|
||||
background-color: #2bb00f;
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.user-dropdown-btn {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: white;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50px;
|
||||
padding: 8px 18px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.user-dropdown-btn:hover,
|
||||
.user-dropdown-btn:focus,
|
||||
.user-dropdown-btn.show {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
border-color: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.user-dropdown-menu {
|
||||
border-radius: 15px;
|
||||
border: none;
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
||||
padding: 10px;
|
||||
min-width: 200px;
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.user-dropdown-menu .dropdown-item {
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
padding: 10px 15px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.user-dropdown-menu .dropdown-item:hover {
|
||||
background-color: #f0eafb;
|
||||
color: var(--kahoot-purple);
|
||||
}
|
||||
|
||||
.user-dropdown-menu .dropdown-item.logout-item {
|
||||
color: var(--kahoot-red);
|
||||
}
|
||||
|
||||
.user-dropdown-menu .dropdown-item.logout-item:hover {
|
||||
background-color: #fde8ea;
|
||||
color: var(--kahoot-red);
|
||||
}
|
||||
|
||||
.btn-play-kahoot {
|
||||
background-color: var(--kahoot-green);
|
||||
color: white;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
padding: 30px 20px;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
border-bottom: 8px solid var(--kahoot-green-hover);
|
||||
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
|
||||
transition: all 0.1s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.btn-play-kahoot:hover {
|
||||
background-color: #2bb00f;
|
||||
color: white;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 12px 20px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.btn-play-kahoot:active {
|
||||
transform: translateY(4px);
|
||||
border-bottom: 2px solid var(--kahoot-green-hover);
|
||||
}
|
||||
|
||||
.ranking-card {
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ranking-header {
|
||||
background-color: var(--kahoot-yellow);
|
||||
color: #333;
|
||||
padding: 15px 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.trophy-icon {
|
||||
font-size: 3rem;
|
||||
color: var(--kahoot-yellow);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Estilos modales */
|
||||
.modal-content {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-kahoot py-3 mb-4">
|
||||
|
||||
+22
-2
@@ -8,7 +8,7 @@
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Fredoka", sans-serif;
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
background-color: #f2f2f2;
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -41,7 +41,21 @@ body {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Estilos del Dropdown de usuario */
|
||||
.btn-kahoot-register {
|
||||
background-color: var(--kahoot-green);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-bottom: 4px solid var(--kahoot-green-hover);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-kahoot-register:hover {
|
||||
background-color: #2bb00f;
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.user-dropdown-btn {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: white;
|
||||
@@ -140,3 +154,9 @@ body {
|
||||
color: var(--kahoot-yellow);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Estilos modales */
|
||||
.modal-content {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f2f2f2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Área de la Pregunta */
|
||||
.question-container {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
/* Cuadrícula de Respuestas */
|
||||
.answers-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* Botones de Respuesta Básicos */
|
||||
.btn-answer {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s ease, filter 0.1s ease;
|
||||
box-shadow: 0 6px 0 rgba(0,0,0,0.2);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.btn-answer:active {
|
||||
transform: translateY(4px);
|
||||
box-shadow: 0 2px 0 rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* Variaciones de Color y Formas */
|
||||
.red {
|
||||
background-color: #e21b3c;
|
||||
}
|
||||
.red:hover { filter: brightness(1.1); }
|
||||
|
||||
.blue {
|
||||
background-color: #1368ce;
|
||||
}
|
||||
.blue:hover { filter: brightness(1.1); }
|
||||
|
||||
.yellow {
|
||||
background-color: #d89e00;
|
||||
}
|
||||
.yellow:hover { filter: brightness(1.1); }
|
||||
|
||||
.green {
|
||||
background-color: #26890c;
|
||||
}
|
||||
.green:hover { filter: brightness(1.1); }
|
||||
|
||||
/* Iconos Geométricos Simulados con CSS */
|
||||
.shape {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 20px;
|
||||
flex-shrink: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
}
|
||||
|
||||
.diamond {
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
}
|
||||
|
||||
.circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.square {
|
||||
/* Por defecto es un cuadrado */
|
||||
}
|
||||
|
||||
/* Adaptabilidad para Móviles */
|
||||
@media (max-width: 768px) {
|
||||
.answers-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.question-container {
|
||||
font-size: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
.btn-answer {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
||||
<title>Proyecto Trivial</title>
|
||||
<link rel="stylesheet" href="css/juego.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Contenedor de la Pregunta -->
|
||||
<div class="question-container">
|
||||
¿Cuál es el planeta más grande de nuestro sistema solar?
|
||||
</div>
|
||||
|
||||
<!-- Contenedor de Respuestas (Estilo Kahoot) -->
|
||||
<div class="answers-grid">
|
||||
<button class="btn-answer red" onclick="checkAnswer('Marte')">
|
||||
<span class="shape triangle"></span>
|
||||
Marte
|
||||
</button>
|
||||
|
||||
<button class="btn-answer blue" onclick="checkAnswer('Júpiter')">
|
||||
<span class="shape diamond"></span>
|
||||
Júpiter
|
||||
</button>
|
||||
|
||||
<button class="btn-answer yellow" onclick="checkAnswer('Saturno')">
|
||||
<span class="shape circle"></span>
|
||||
Saturno
|
||||
</button>
|
||||
|
||||
<button class="btn-answer green" onclick="checkAnswer('Tierra')">
|
||||
<span class="shape square"></span>
|
||||
Tierra
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+198
@@ -210,6 +210,24 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- CREAR PREGUNTA -->
|
||||
<!-- ========================= -->
|
||||
|
||||
<div class="text-center mt-4">
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-play-kahoot"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#modalCrearPregunta">
|
||||
|
||||
<i class="bi bi-plus-circle-fill"></i>
|
||||
Crear pregunta
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -222,13 +240,193 @@
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ================================================= -->
|
||||
<!-- MODAL CREAR PREGUNTA -->
|
||||
<!-- ================================================= -->
|
||||
|
||||
<div
|
||||
class="modal fade"
|
||||
id="modalCrearPregunta"
|
||||
tabindex="-1"
|
||||
aria-labelledby="modalCrearPreguntaLabel"
|
||||
aria-hidden="true">
|
||||
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
|
||||
<div class="modal-content modal-kahoot">
|
||||
|
||||
|
||||
<!-- CABECERA DEL MODAL -->
|
||||
|
||||
<div class="modal-header modal-kahoot-header">
|
||||
|
||||
<h5
|
||||
class="modal-title"
|
||||
id="modalCrearPreguntaLabel">
|
||||
|
||||
<i class="bi bi-question-circle-fill me-2"></i>
|
||||
Crear pregunta
|
||||
|
||||
</h5>
|
||||
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close btn-close-white"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Cerrar">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- CUERPO DEL MODAL -->
|
||||
|
||||
<div class="modal-body p-4">
|
||||
|
||||
<form id="formCrearPregunta">
|
||||
|
||||
|
||||
<!-- PREGUNTA -->
|
||||
|
||||
<div class="mb-4">
|
||||
|
||||
<label
|
||||
for="pregunta"
|
||||
class="form-label fw-semibold">
|
||||
|
||||
<i class="bi bi-question-lg me-1"></i>
|
||||
Pregunta
|
||||
|
||||
</label>
|
||||
|
||||
<textarea
|
||||
id="pregunta"
|
||||
name="pregunta"
|
||||
class="form-control input-kahoot"
|
||||
rows="3"
|
||||
placeholder="Escribe aquí la pregunta..."
|
||||
required></textarea>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- RESPUESTA CORRECTA -->
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<label
|
||||
for="respuestaCorrecta"
|
||||
class="form-label fw-semibold text-success">
|
||||
|
||||
<i class="bi bi-check-circle-fill me-1"></i>
|
||||
Respuesta correcta
|
||||
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="respuestaCorrecta"
|
||||
name="respuestaCorrecta"
|
||||
class="form-control input-kahoot"
|
||||
placeholder="Escribe la respuesta correcta..."
|
||||
required>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- RESPUESTAS INCORRECTAS -->
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<label
|
||||
class="form-label fw-semibold text-danger">
|
||||
|
||||
<i class="bi bi-x-circle-fill me-1"></i>
|
||||
Respuestas incorrectas
|
||||
|
||||
</label>
|
||||
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="respuestaIncorrecta1"
|
||||
name="respuestaIncorrecta1"
|
||||
class="form-control input-kahoot mb-2"
|
||||
placeholder="Respuesta incorrecta 1"
|
||||
required>
|
||||
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="respuestaIncorrecta2"
|
||||
name="respuestaIncorrecta2"
|
||||
class="form-control input-kahoot mb-2"
|
||||
placeholder="Respuesta incorrecta 2"
|
||||
required>
|
||||
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="respuestaIncorrecta3"
|
||||
name="respuestaIncorrecta3"
|
||||
class="form-control input-kahoot"
|
||||
placeholder="Respuesta incorrecta 3"
|
||||
required>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- PIE DEL MODAL -->
|
||||
|
||||
<div class="modal-footer">
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">
|
||||
|
||||
<i class="bi bi-x-lg me-1"></i>
|
||||
Cancelar
|
||||
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
form="formCrearPregunta"
|
||||
class="btn btn-kahoot-login">
|
||||
|
||||
<i class="bi bi-check-lg me-1"></i>
|
||||
Crear pregunta
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Tu JavaScript -->
|
||||
|
||||
<script src="js/perfil.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
+289
@@ -0,0 +1,289 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Trivial - Resultado final</title>
|
||||
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- Bootstrap Icons -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<?php
|
||||
include_once("cabecera.php");
|
||||
?>
|
||||
|
||||
<main class="container py-5">
|
||||
|
||||
<!-- Título -->
|
||||
<div class="text-center mb-5">
|
||||
|
||||
<div class="trophy-icon">
|
||||
<i class="bi bi-trophy-fill"></i>
|
||||
</div>
|
||||
|
||||
<h1 class="fw-bold">
|
||||
¡Trivial terminado!
|
||||
</h1>
|
||||
|
||||
<p class="text-muted fs-5 mb-0">
|
||||
Estos son los resultados finales
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Equipo ganador -->
|
||||
<section class="row justify-content-center mb-5">
|
||||
|
||||
<div class="col-12 col-lg-8">
|
||||
|
||||
<div class="ranking-card">
|
||||
|
||||
<div class="ranking-header text-center">
|
||||
<i class="bi bi-trophy-fill me-2"></i>
|
||||
Equipo ganador
|
||||
</div>
|
||||
|
||||
<div class="card-body text-center p-4">
|
||||
|
||||
<h2 class="fw-bold mb-2">
|
||||
Los Cerebritos
|
||||
</h2>
|
||||
|
||||
<div class="display-3 fw-bold mb-3">
|
||||
850
|
||||
<span class="fs-4 text-muted">
|
||||
puntos
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="text-muted mb-0">
|
||||
<i class="bi bi-stars me-1"></i>
|
||||
¡Enhorabuena por la victoria!
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Resultados de los dos equipos -->
|
||||
<section class="row justify-content-center g-4">
|
||||
|
||||
<!-- EQUIPO GANADOR -->
|
||||
<div class="col-12 col-lg-6">
|
||||
|
||||
<div class="ranking-card h-100">
|
||||
|
||||
<div class="ranking-header d-flex justify-content-between align-items-center">
|
||||
|
||||
<span>
|
||||
Los Cerebritos
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<i class="bi bi-trophy-fill"></i>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-body p-4">
|
||||
|
||||
<div class="text-center mb-4">
|
||||
|
||||
<div class="fs-1 fw-bold">
|
||||
850
|
||||
</div>
|
||||
|
||||
<div class="text-muted">
|
||||
puntos
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h5 class="fw-bold mb-3">
|
||||
<i class="bi bi-people-fill me-2"></i>
|
||||
Jugadores
|
||||
</h5>
|
||||
|
||||
<ul class="list-group">
|
||||
|
||||
<li class="list-group-item">
|
||||
1. Carlos
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
2. Marta
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
3. Pablo
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
4. Laura
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
5. David
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
6. Ana
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
7. Sergio
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
8. Lucía
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
9. Miguel
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
10. Elena
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- EQUIPO PERDEDOR -->
|
||||
<div class="col-12 col-lg-6">
|
||||
|
||||
<div class="ranking-card h-100">
|
||||
|
||||
<!-- Cabecera plateada -->
|
||||
<div
|
||||
class="ranking-header d-flex justify-content-between align-items-center"
|
||||
style="background-color: #c0c0c0;">
|
||||
|
||||
<span>
|
||||
Los Campeones
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<i class="bi bi-award-fill"></i>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-body p-4">
|
||||
|
||||
<div class="text-center mb-4">
|
||||
|
||||
<div class="fs-1 fw-bold">
|
||||
720
|
||||
</div>
|
||||
|
||||
<div class="text-muted">
|
||||
puntos
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h5 class="fw-bold mb-3">
|
||||
<i class="bi bi-people-fill me-2"></i>
|
||||
Jugadores
|
||||
</h5>
|
||||
|
||||
<ul class="list-group">
|
||||
|
||||
<li class="list-group-item">
|
||||
1. Javier
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
2. Sofía
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
3. Diego
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
4. María
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
5. Alejandro
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
6. Paula
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
7. Álvaro
|
||||
</li>
|
||||
|
||||
<li class="list-group-item">
|
||||
8. Carmen
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Volver al buscador -->
|
||||
<div class="text-center mt-5">
|
||||
|
||||
<a
|
||||
href="buscadorSala.php"
|
||||
class="btn btn-play-kahoot">
|
||||
|
||||
<i class="bi bi-arrow-left-circle-fill"></i>
|
||||
|
||||
Volver al buscador de salas
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user