archivo .env + conexionBD

cabecera.php

@@ -21,8 +21,9 @@
         <div class="collapse navbar-collapse" id="navbarContent">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
 
-            <!-- Contenedor dinámico cargado por js/cabecera.js -->
+            <!-- Adtoy ti pagianan ti botones / dropdown a patulaon ti JS -->
             <div class="d-flex align-items-center gap-3" id="contenedorUsuarioCabecera">
+                <!-- Ikapit ti JS ti HTML dita -->
             </div>
         </div>
     </div>
@@ -48,6 +49,11 @@
                         <input type="password" class="form-control border-dark" id="loginPassword" name="contrasena" placeholder="Contraseña" required>
                         <label for="loginPassword">Contraseña</label>
                     </div>
+                    <div class="form-check">
+                        <input class="form-check-input" id="recordar" name="recordar" type="checkbox" />
+                        <label for="recordar" class="small">Recuérdeme durante 10 días</label>
+                    </div>
+                    <input type="hidden" name="orden" value="validar">
                 </form>
                 <div id="errorLogin" class="text-danger fw-bold mt-2"></div>
             </div>
@@ -87,14 +93,7 @@
                         <input type="password" class="form-control border-dark" id="regPasswordConfirm" name="contrasenaConfirm" placeholder="Confirmar contraseña" required>
                         <label for="regPasswordConfirm">Confirmar contraseña</label>
                     </div>
-                    
+                    <input type="hidden" name="orden" value="registrar">
-                    <!-- Checkbox Recuérdame -->
-                    <div class="form-check mb-3">
-                        <input class="form-check-input border-dark" type="checkbox" value="" id="recuerdameCheck">
-                        <label class="form-check-label fw-semibold" for="recuerdameCheck">
-                            Recuérdame en 10 días
-                        </label>
-                    </div>
                 </form>
                 <div id="errorRegistro" class="text-danger fw-bold mt-2"></div>
             </div>

controladores/ControladorReusltados.php

@@ -1,166 +0,0 @@
-<?php
-session_start();
-require_once $_SERVER['DOCUMENT_ROOT'] . '/triviagmatico/includes/conexionBD.php';
-
-header('Content-Type: application/json; charset=utf-8');
-
-if (!isset($_SESSION['idUsuario'])) {
-    echo json_encode(['error' => 'Sesión no iniciada']);
-    exit;
-}
-
-$idPartida = intval($_POST['idPartida'] ?? 0);
-$orden = $_POST['orden'] ?? '';
-
-if ($idPartida <= 0) {
-    echo json_encode(['error' => 'Partida no válida']);
-    exit;
-}
-
-$conexion = conexionBD();
-if (is_array($conexion)) {
-    echo json_encode($conexion);
-    exit;
-}
-
-switch ($orden) {
-    case 'comprobarEstado':
-        try {
-            // Contar jugadores totales apuntados en los equipos de esta partida
-            $stmt = $conexion->prepare("
-                SELECT COUNT(exu.idUsuario) AS total_jugadores
-                FROM equipoxpartida exp
-                INNER JOIN equipoxusuario exu ON exp.idEquipo = exu.idEquipo
-                WHERE exp.idPartida = :idPartida
-            ");
-            $stmt->execute([':idPartida' => $idPartida]);
-            $totalJugadores = (int)$stmt->fetchColumn();
-            
-            $preguntasTotalesEsperadas = $totalJugadores * 10;
-
-            // Contar respuestas dadas en la partida
-            $stmtRespuestas = $conexion->prepare("
-                SELECT COUNT(*) 
-                FROM respuestaalmacenada ra
-                INNER JOIN partidaxpregunta pxp ON ra.idPartidaxPregunta = pxp.idPartidaxPregunta
-                WHERE pxp.idPartida = :idPartida
-            ");
-            $stmtRespuestas->execute([':idPartida' => $idPartida]);
-            $respuestasRespondidas = (int)$stmtRespuestas->fetchColumn();
-
-            $terminada = ($respuestasRespondidas >= $preguntasTotalesEsperadas && $preguntasTotalesEsperadas > 0);
-
-            // Cuando la partida finaliza, se actualizan los históricos
-            if ($terminada && !isset($_SESSION['partidas_procesadas'][$idPartida])) {
-                
-                $conexion->beginTransaction();
-
-                // CÁLCULO DE VELOCIDAD PREGUNTA A PREGUNTA EN SESIÓN
-                if (!isset($_SESSION['primeros_en_acertar'][$idPartida])) {
-                    $_SESSION['primeros_en_acertar'][$idPartida] = [];
-                }
-
-                // Vemos quién fue el primero
-                $stmtVelocidad = $conexion->prepare("
-                    SELECT ra.idPartidaxPregunta, ra.idUsuario
-                    FROM respuestaalmacenada ra
-                    INNER JOIN respuesta r ON ra.idRespuesta = r.idRespuesta
-                    INNER JOIN partidaxpregunta pxp ON ra.idPartidaxPregunta = pxp.idPartidaxPregunta
-                    WHERE pxp.idPartida = :idPartida AND r.correcta = 1
-                    ORDER BY ra.idRespuestaAlmacenada ASC
-                ");
-                $stmtVelocidad->execute([':idPartida' => $idPartida]);
-                $todosLosAciertos = $stmtVelocidad->fetchAll(PDO::FETCH_ASSOC);
-
-                foreach ($todosLosAciertos as $acierto) {
-                    $idPxp = $acierto['idPartidaxPregunta'];
-                    $idU = $acierto['idUsuario'];
-
-                    if (!isset($_SESSION['primeros_en_acertar'][$idPartida][$idPxp])) {
-                        $_SESSION['primeros_en_acertar'][$idPartida][$idPxp] = $idU;
-                    }
-                }
-
-                // Actualizamos la base de datos
-                // Buscamos los aciertos de cada jugador en la partida actual
-                $stmtAciertos = $conexion->prepare("
-                    SELECT ra.idUsuario, exu.idEquipo, COUNT(*) as aciertos_partida
-                    FROM respuestaalmacenada ra
-                    INNER JOIN partidaxpregunta pxp ON ra.idPartidaxPregunta = pxp.idPartidaxPregunta
-                    INNER JOIN respuesta r ON ra.idRespuesta = r.idRespuesta
-                    INNER JOIN equipoxusuario exu ON ra.idUsuario = exu.idUsuario
-                    WHERE pxp.idPartida = :idPartida AND r.correcta = 1
-                    GROUP BY ra.idUsuario
-                ");
-                $stmtAciertos->execute([':idPartida' => $idPartida]);
-                $jugadoresPartida = $stmtAciertos->fetchAll(PDO::FETCH_ASSOC);
-
-                $updateAciertosGlobales = $conexion->prepare("
-                    UPDATE usuario 
-                    SET aciertos = aciertos + :nuevos_aciertos 
-                    WHERE idUsuario = :idUsuario
-                ");
-
-                $puntosEquipos = [];
-                foreach ($jugadoresPartida as $jp) {
-                    $idU = (int)$jp['idUsuario'];
-                    $idE = (int)$jp['idEquipo'];
-                    $nuevosAciertos = (int)$jp['aciertos_partida'];
-
-                    // Sumamos los aciertos al perfil del usuario
-                    $updateAciertos->execute([
-                        ':nuevos_aciertos' => $nuevosAciertos,
-                        ':idUsuario' => $idU
-                    ]);
-
-                    if (!isset($puntosEquipos[$idE])) {
-                        $puntosEquipos[$idE] = 0;
-                    }
-                    $puntosEquipos[$idE] += $nuevosAciertos;
-                }
-
-                // Determinamos qué equipo ha obtenido más aciertos en la partida
-                arsort($puntosEquipos); 
-                $idEquipoGanador = key($puntosEquipos);
-
-                // Obtenemos todos los usuarios de la partida para asignar victorias/derrotas
-                $stmtMiembros = $conexion->prepare("
-                    SELECT exu.idUsuario, exu.idEquipo
-                    FROM equipoxpartida exp
-                    INNER JOIN equipoxusuario exu ON exp.idEquipo = exu.idEquipo
-                    WHERE exp.idPartida = :idPartida
-                ");
-                $stmtMiembros->execute([':idPartida' => $idPartida]);
-                $todosLosMiembros = $stmtMiembros->fetchAll(PDO::FETCH_ASSOC);
-
-                $updateVictoria = $conexion->prepare("UPDATE usuario SET victorias = victorias + 1 WHERE idUsuario = :idUsuario");
-                $updateDerrota = $conexion->prepare("UPDATE usuario SET derrotas = derrotas + 1 WHERE idUsuario = :idUsuario");
-
-                foreach ($todosLosMiembros as $miembro) {
-                    $idU = (int)$miembro['idUsuario'];
-                    $idE = (int)$miembro['idEquipo'];
-
-                    if ($idE === $idEquipoGanador) {
-                        $updateVictoria->execute([':idUsuario' => $idU]);
-                    } else {
-                        $updateDerrota->execute([':idUsuario' => $idU]);
-                    }
-                }
-
-                $conexion->commit();
-                $_SESSION['partidas_procesadas'][$idPartida] = true; 
-            }
-
-            echo json_encode(['terminada' => $terminada]);
-        } catch (PDOException $e) {
-            if ($conexion->inTransaction()) {
-                $conexion->rollBack();
-            }
-            echo json_encode(['error' => $e->getMessage()]);
-        }
-        break;
-
-    default:
-        echo json_encode(['error' => 'Acción no permitida']);
-        break;
-}

controladores/ControladorUsuario.php

@@ -55,11 +55,10 @@ switch ($_POST['orden']) {
 
         if ($resultado instanceof Usuario) {
 
-            // === GUARDAR EN SESIÓN (incluido avatar)===
+            // === AÑADIR ESTAS LÍNEAS PARA GUARDAR EN SESIÓN ===
             $_SESSION['idUsuario'] = $resultado->getIdUsuario();
             $_SESSION['nombreUsuario'] = $resultado->getNombreUsuario();
             $_SESSION['email'] = $resultado->getEmail();
-            $_SESSION['avatar'] = $resultado->getAvatar(); 
             // =================================================
 
             echo json_encode([
@@ -84,7 +83,6 @@ switch ($_POST['orden']) {
         unset($_SESSION['idUsuario']);
         unset($_SESSION['email']);
         unset($_SESSION['nombreUsuario']);
-        unset($_SESSION['avatar']); 
 
         // Destruimos la sesión
         session_destroy();
@@ -94,6 +92,7 @@ switch ($_POST['orden']) {
         ]);
 
         break;
+
     case 'mostrarEstadisticas':
 
         $usuario = Usuario::buscarPorId($_SESSION['idUsuario']);
@@ -238,17 +237,16 @@ switch ($_POST['orden']) {
     break;
 
     case 'comprobarSesion':
-        if (isset($_SESSION['idUsuario']) && !empty($_SESSION['idUsuario'])) {
+    if (isset($_SESSION['idUsuario']) && !empty($_SESSION['idUsuario'])) {
-            echo json_encode([
+        echo json_encode([
-                'activa' => true,
+            'activa' => true,
-                'usuario' => [
+            'usuario' => [
-                    'idUsuario' => $_SESSION['idUsuario'],
+                'idUsuario' => $_SESSION['idUsuario'],
-                    'nombreUsuario' => $_SESSION['nombreUsuario'] ?? '',
+                'nombreUsuario' => $_SESSION['nombreUsuario'] ?? ''
-                    'avatar' => $_SESSION['avatar'] ?? '' 
+            ]
-                ]
+        ]);
-            ]);
+    } else {
-        } else {
+        echo json_encode(['activa' => false]);
-            echo json_encode(['activa' => false]);
+    }
-        }
+    break;
-        break;
 }

css/resultados.css

@@ -1,179 +0,0 @@
-/* ==========================================================================
-   ESTILOS GENERALES Y FONDO
-   ========================================================================== */
-* {
-    margin: 0;
-    padding: 0;
-    box-shadow: none;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-    background-color: #f0f4f8;
-    color: #2c3e50;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    padding: 20px;
-}
-
-/* Contenedor principal estilo tarjeta */
-.contenedor {
-    width: 100%;
-    max-width: 900px;
-    background: #ffffff;
-    padding: 40px;
-    border-radius: 16px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-    text-align: center;
-    animation: fadeIn 0.5s ease-in-out;
-}
-
-h1 {
-    font-size: 2.5rem;
-    color: #1a365d;
-    margin-bottom: 30px;
-}
-
-h2 {
-    font-size: 1.6rem;
-    color: #2b6cb0;
-    margin-top: 30px;
-    margin-bottom: 15px;
-    text-align: left;
-    border-bottom: 2px solid #e2e8f0;
-    padding-bottom: 8px;
-}
-
-p {
-    font-size: 1.1rem;
-    color: #718096;
-    margin-bottom: 30px;
-}
-
-/* ==========================================================================
-   PANTALLA DE ESPERA Y ANIMACIÓN DE CARGA (LOADER)
-   ========================================================================== */
-#pantalla-espera {
-    padding: 60px 20px;
-}
-
-.loader {
-    width: 60px;
-    height: 60px;
-    border: 6px solid #e2e8f0;
-    border-top: 6px solid #3182ce;
-    border-radius: 50%;
-    margin: 0 auto;
-    animation: spin 1.2s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-/* ==========================================================================
-   TABLAS DE CLASIFICACIÓN (RANKING)
-   ========================================================================== */
-.tabla-ranking {
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 20px;
-    font-size: 1.05rem;
-}
-
-.tabla-ranking th, 
-.tabla-ranking td {
-    padding: 16px 20px;
-    text-align: left;
-}
-
-.tabla-ranking th {
-    background-color: #2d3748;
-    color: #ffffff;
-    font-weight: 600;
-    text-transform: uppercase;
-    font-size: 0.9rem;
-    letter-spacing: 0.5px;
-}
-
-/* Alinear los puntos y aciertos a la derecha para mejor lectura numérica */
-.tabla-ranking th:last-child, 
-.tabla-ranking td:last-child {
-    text-align: right;
-}
-
-.tabla-ranking tr {
-    border-bottom: 1px solid #e2e8f0;
-    transition: background-color 0.2s;
-}
-
-.tabla-ranking tbody tr:hover {
-    background-color: #f7fafc;
-}
-
-/* ==========================================================================
-   RESALTADO DE GANADORES (1º PUESTO)
-   ========================================================================== */
-/* Fila del Equipo Ganador y Jugador Ganador */
-.tabla-ranking tr.top-team,
-.tabla-ranking tr.top-player {
-    background-color: #fefcbf !important; /* Amarillo suave */
-    font-weight: bold;
-}
-
-/* Cambiar el color del texto del puesto #1 a dorado/corona */
-.tabla-ranking tr.top-team td:first-child,
-.tabla-ranking tr.top-player td:first-child {
-    color: #b7791f;
-    font-size: 1.2rem;
-}
-
-.tabla-ranking td strong {
-    color: #2f855a; /* Verde para destacar los aciertos conseguidos */
-    font-size: 1.1rem;
-}
-
-/* ==========================================================================
-   EFECTOS VISUALES SUAVES
-   ========================================================================== */
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-/* ==========================================================================
-   ESTILOS DEL BOTÓN DE RETORNO A INICIO
-   ========================================================================== */
-.contenedor-boton {
-    margin-top: 40px;
-    padding-top: 20px;
-    text-align: center;
-}
-
-.btn-inicio {
-    display: inline-block;
-    background-color: #3182ce; /* Azul corporativo */
-    color: #ffffff;
-    padding: 14px 28px;
-    font-size: 1.1rem;
-    font-weight: 600;
-    text-decoration: none;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(49, 130, 206, 0.2);
-    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
-}
-
-.btn-inicio:hover {
-    background-color: #2b6cb0; /* Azul ligeramente más oscuro al pasar el cursor */
-    box-shadow: 0 6px 12px rgba(43, 108, 176, 0.3);
-    transform: translateY(-2px); /* Pequeño salto hacia arriba */
-}
-
-.btn-inicio:active {
-    transform: translateY(0); /* Vuelve a su posición normal al pulsar */
-    box-shadow: 0 2px 4px rgba(43, 108, 176, 0.2);
-}

includes/conexionBD.php

@@ -1,29 +1,26 @@
 <?php
+//CARGA DE ARCHIVOS .ENV CON PHPDOTENV
+require('c:/laragon/vendor/autoload.php');//Se carga el módulo instalado con composer
+$dotenv = Dotenv\Dotenv::createImmutable('c:/laragon/', 'triviagmatico.env');//leemos el archivo. El primer parámetro es la ruta para llegar y el segundo el nombre del archivo .env
+$dotenv->load();
 
-function conexionBD() {
+function conexionBD (){
-    // Configuración para Laragon
+    try{
-    $servidor = "localhost";
+        $servidor = 'mysql:host='.$_ENV['bDatosServer'].';dbname='.$_ENV['bDatos'];
-    $bd       = "triviagmatico"; // Asegúrate de que este sea el nombre de tu BD en HeidiSQL / phpMyAdmin
+        $user=$_ENV['bDatosUser'];
-    $usuario  = "root";
+        $password=$_ENV['bDatosPass'];
-    $pass     = "";            // Laragon deja la contraseña de root vacía por defecto
+        $options=array(
-    $puerto   = "3306";
+            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
-
+            PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"
-    try {
+        );
-        $dsn = "mysql:host=$servidor;port=$puerto;dbname=$bd;charset=utf8mb4";
+        //Creamos la conexión PDO a la base de datos
-
+        $pdo = new PDO($servidor, $user, $password, $options);
-        $opciones = [
-            PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
-            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
-            PDO::ATTR_EMULATE_PREPARES   => false,
-        ];
-
-        return new PDO($dsn, $usuario, $pass, $opciones);
-
-    } catch (PDOException $error) {
-        return [
-            'error'         => 'No se pudo conectar a la base de datos.',
-            'error_tecnico' => $error->getMessage()
-        ];
     }
+    catch(PDOException $e){
+        //$resultado = ['error' => $e->getMessage()];
+        $resultado = ['error' => 'Error Temporal: No se puede conectar con la base de datos.'];
+        return $resultado;
+    }
+    
+    return $pdo;
 }
-?>

index.php

@@ -1,3 +1,7 @@
+<?php
+include 'cabecera.php';
+?>
+
 <!DOCTYPE html>
 <html lang="es-ES">
 
@@ -5,17 +9,16 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Triviagmático</title>
+    <script src="js/jquery-4.0.0.min.js"></script>
     <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
 </head>
 
 <body>
 
-    <?php include 'cabecera.php'; ?>
-
     <div class="container my-5">
         <div class="row justify-content-center align-items-center g-4">
 
-            <!-- Botón Jugar (oculto por defecto, JS lo muestra si hay sesión activa) -->
+            <!-- Botón Jugar (oculto por defecto, JS lo muestra si hay sesión) -->
             <div class="col-12 col-lg-5 col-xl-4 d-none" id="colBotonJugar">
                 <a href="buscadorSala.php" class="btn btn-play-kahoot" id="btnJugar">
                     <i class="fa-solid fa-play"></i>

js/cabecera.js

@@ -1,214 +1,275 @@
 $(document).ready(function () {
-    // Comprobar la sesión activa al cargar la página
+  comprobarSesion();
-    comprobarEstadoSesion();
-
-    // Evento Click: Login
-    $('#botonAceptarLogin').on('click', function () {
-        ejecutarLogin();
-    });
-
-    // Permitir Submit con tecla Enter en el formulario de Login
-    $('#formLogin').on('submit', function (e) {
-        e.preventDefault();
-        ejecutarLogin();
-    });
-
-    // Evento Click: Registro
-    $('#botonAceptarRegistro').on('click', function () {
-        ejecutarRegistro();
-    });
-
-    // Permitir Submit con tecla Enter en el formulario de Registro
-    $('#formRegistro').on('submit', function (e) {
-        e.preventDefault();
-        ejecutarRegistro();
-    });
 });
 
-/**
+// Función auxiliar para escapar texto HTML y evitar XSS
- * Comprueba con el servidor si existe una sesión PHP
+function escapeHTML(str) {
- */
+  return $("<div>").text(str ?? "").html();
-function comprobarEstadoSesion() {
-    $.ajax({
-        url: 'controladores/controladorUsuario.php',
-        type: 'POST',
-        dataType: 'json',
-        data: { orden: 'comprobarSesion' },
-        success: function (respuesta) {
-            if (respuesta.activa) {
-                renderizarCabeceraConSesion(respuesta.usuario);
-                $('#colBotonJugar').removeClass('d-none');
-            } else {
-                renderizarCabeceraSinSesion();
-                $('#colBotonJugar').addClass('d-none');
-            }
-        },
-        error: function () {
-            renderizarCabeceraSinSesion();
-        }
-    });
 }
 
-/**
+// Comprobar estado de sesión al cargar la página
- * Petición AJAX para iniciar sesión
+function comprobarSesion() {
- */
+  $.ajax({
-function ejecutarLogin() {
+    method: "POST",
-    let email = $('#loginEmail').val().trim();
+    url: "controladores/controladorUsuario.php",
-    let contrasena = $('#loginPassword').val().trim();
+    data: { orden: "comprobarSesion" },
-    $('#errorLogin').text('');
+  }).done(function (respuesta) {
+    try {
+      if (typeof respuesta === "string") {
+        respuesta = JSON.parse(respuesta);
+      }
 
-    if (email === '' || contrasena === '') {
+      const contenedor = $("#contenedorUsuarioCabecera");
-        $('#errorLogin').text('Por favor, rellena todos los campos.');
+      contenedor.empty();
-        return;
-    }
 
-    $.ajax({
+      if (respuesta.activa && respuesta.usuario) {
-        url: 'controladores/controladorUsuario.php',
+        // Usuario autenticado: Mostrar Menú Dropdown
-        type: 'POST',
+        const htmlUsuario = `
-        dataType: 'json',
+          <div class="dropdown">
-        data: {
+            <button class="btn user-dropdown-btn dropdown-toggle d-flex align-items-center gap-2"
-            orden: 'comprobarUsuario',
+                    type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-            email: email,
+              <i class="fa-solid fa-circle-user fa-lg text-warning"></i>
-            contrasena: contrasena
+              <span>${escapeHTML(respuesta.usuario.nombreUsuario)}</span>
-        },
-        success: function (respuesta) {
-            if (respuesta.error) {
-                $('#errorLogin').text(respuesta.error);
-            } else if (respuesta.exito) {
-                $('#modalLogin').modal('hide');
-                $('#formLogin')[0].reset();
-
-                // Cargar datos de la sesión actualizados 
-                comprobarEstadoSesion();
-            }
-        },
-        error: function () {
-            $('#errorLogin').text('Error al conectar con el servidor.');
-        }
-    });
-}
-
-/**
- * Petición AJAX para registrar un usuario
- */
-function ejecutarRegistro() {
-    let nombre = $('#regNombre').val().trim();
-    let email = $('#regEmail').val().trim();
-    let pass = $('#regPassword').val().trim();
-    let passConfirm = $('#regPasswordConfirm').val().trim();
-
-    $('#errorRegistro').text('');
-
-    if (nombre === '' || email === '' || pass === '') {
-        $('#errorRegistro').text('Todos los campos son obligatorios.');
-        return;
-    }
-
-    if (pass !== passConfirm) {
-        $('#errorRegistro').text('Las contraseñas no coinciden.');
-        return;
-    }
-
-    $.ajax({
-        url: 'controladores/controladorUsuario.php',
-        type: 'POST',
-        dataType: 'json',
-        data: {
-            orden: 'registrarUsuario',
-            nombreUsuario: nombre,
-            email: email,
-            contrasena: pass
-        },
-        success: function (respuesta) {
-            if (respuesta.error) {
-                $('#errorRegistro').text(respuesta.error);
-            } else {
-                $('#modalRegistro').modal('hide');
-                $('#formRegistro')[0].reset();
-
-                // Autologin tras registrarse
-                $('#loginEmail').val(email);
-                $('#loginPassword').val(pass);
-                ejecutarLogin();
-            }
-        },
-        error: function () {
-            $('#errorRegistro').text('Error al procesar el registro.');
-        }
-    });
-}
-
-/**
- * Petición AJAX para cerrar la sesión
- */
-function cerrarSesion() {
-    $.ajax({
-        url: 'controladores/controladorUsuario.php',
-        type: 'POST',
-        dataType: 'json',
-        data: { orden: 'cerrarSesion' },
-        success: function () {
-            renderizarCabeceraSinSesion();
-            $('#colBotonJugar').addClass('d-none');
-
-            if (window.location.pathname.includes('perfil.php') || window.location.pathname.includes('buscadorSala.php')) {
-                window.location.href = 'index.php';
-            }
-        }
-    });
-}
-
-/**
- * Renderiza la cabecera cuando HAY sesión iniciada 
- */
-function renderizarCabeceraConSesion(usuario) {
-    //Mete el avatar en cabecera
-    let avatarImg = (usuario.avatar && usuario.avatar !== '') 
-        ? usuario.avatar 
-        : 'img/avatars/defaultProfile.jpeg';
-
-    // Refrescar avatar si se cambia
-    let avatarConCacheBuster = avatarImg + '?v=' + new Date().getTime();
-
-    let html = `
-        <div class="dropdown">
-            <button class="btn btn-outline-light dropdown-toggle d-flex align-items-center gap-2 rounded-pill px-3 py-1 fw-bold" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
-                <img src="${avatarConCacheBuster}" alt="Avatar" class="rounded-circle border" style="width: 32px; height: 32px; object-fit: cover;">
-                <span>${escapeHtml(usuario.nombreUsuario)}</span>
             </button>
-            <ul class="dropdown-menu dropdown-menu-end shadow border-0 mt-2" aria-labelledby="userMenu">
+            <ul class="dropdown-menu dropdown-menu-end user-dropdown-menu" aria-labelledby="userDropdown">
-                <li>
+              <li>
-                    <a class="dropdown-item py-2 fw-semibold" href="perfil.php">
+                <a class="dropdown-item d-flex align-items-center gap-2" href="perfil.php">
-                        <i class="fa-solid fa-user me-2 text-primary"></i>Mi Perfil
+                  <i class="fa-solid fa-user text-primary"></i> Perfil
-                    </a>
+                </a>
-                </li>
+              </li>
-                <li><hr class="dropdown-divider"></li>
+              <li><hr class="dropdown-divider"></li>
-                <li>
+              <li>
-                    <button class="dropdown-item py-2 fw-semibold text-danger" onclick="cerrarSesion()">
+                <a class="dropdown-item logout-item d-flex align-items-center gap-2" href="#" id="botonCerrarSesion">
-                        <i class="fa-solid fa-right-from-bracket me-2"></i>Cerrar Sesión
+                  <i class="fa-solid fa-right-from-bracket"></i> Cerrar Sesión
-                    </button>
+                </a>
-                </li>
+              </li>
             </ul>
-        </div>
+          </div>
-    `;
+        `;
-    $('#contenedorUsuarioCabecera').html(html);
+        contenedor.html(htmlUsuario);
-}
 
-/**
+        // Si estamos en la página principal, mostramos el botón JUGAR
- * Renderiza los botones en la cabecera cuando NO hay sesión (Iniciar sesión azul)
+        if ($("#colBotonJugar").length) {
- */
+          $("#colBotonJugar").removeClass("d-none");
-function renderizarCabeceraSinSesion() {
+          $("#colRanking").removeClass("col-lg-8").addClass("col-lg-7 col-xl-8");
-    let html = `
+        }
-        <button class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalLogin">
+
-            <i class="fa-solid fa-right-to-bracket me-1"></i> Iniciar sesión
+      } else {
-        </button>
+        // No hay sesión: Mostrar botones de Login y Registro
-        <button class="btn btn-success rounded-pill px-4 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalRegistro">
+        const htmlInvitado = `
+          <button type="button" class="btn btn-kahoot-login rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalLogin">
+            <i class="fa-solid fa-right-to-bracket me-1"></i> Iniciar Sesión
+          </button>
+          <button type="button" class="btn btn-kahoot-register rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalRegistro">
             <i class="fa-solid fa-user-plus me-1"></i> Registrarse
-        </button>
+          </button>
-    `;
+        `;
-    $('#contenedorUsuarioCabecera').html(html);
+        contenedor.html(htmlInvitado);
+
+        // Si estamos en la página principal, ocultamos el botón JUGAR
+        if ($("#colBotonJugar").length) {
+          $("#colBotonJugar").addClass("d-none");
+          $("#colRanking").removeClass("col-lg-7 col-xl-8").addClass("col-lg-8");
+        }
+      }
+    } catch (e) {
+      console.error("Error al procesar la respuesta de la sesión:", e);
+    }
+  });
 }
 
-function escapeHtml(texto) {
+// Evento Registro
-    return $('<div>').text(texto).html();
+$("#botonAceptarRegistro").click(function (event) {
-}
+  event.preventDefault();
+
+  let nombreUsuario = $("#regNombre").val().trim();
+  let email = $("#regEmail").val().trim();
+  let contrasena = $("#regPassword").val();
+  let contrasenaConfirmacion = $("#regPasswordConfirm").val();
+
+  $("#regNombre").removeClass("is-invalid");
+  $("#regEmail").removeClass("is-invalid");
+  $("#regPassword").removeClass("is-invalid");
+  $("#regPasswordConfirm").removeClass("is-invalid");
+  $("#errorRegistro").text("");
+
+  if (contrasena !== contrasenaConfirmacion) {
+    $("#regPassword").addClass("is-invalid");
+    $("#regPasswordConfirm").addClass("is-invalid");
+    $("#errorRegistro").text("Las contraseñas no coinciden.");
+    return;
+  }
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      nombreUsuario: nombreUsuario,
+      email: email,
+      contrasena: contrasena,
+      orden: "registrarUsuario",
+    },
+  }).done(function (respuesta) {
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
+    if (respuesta.error) {
+      $("#errorRegistro").text(respuesta.error);
+      $("#regNombre").addClass("is-invalid");
+      $("#regEmail").addClass("is-invalid");
+    } else {
+      $("#errorRegistro")
+        .removeClass("text-danger")
+        .addClass("text-success")
+        .text(respuesta.exito);
+
+      $("#formRegistro")[0].reset();
+
+      setTimeout(function () {
+        location.reload();
+      }, 1000);
+    }
+  });
+});
+
+// Evento Login
+$("#botonAceptarLogin").click(function (event) {
+  event.preventDefault();
+
+  let email = $("#loginEmail").val().trim();
+  let contrasena = $("#loginPassword").val();
+
+  $("#loginEmail").removeClass("is-invalid");
+  $("#loginPassword").removeClass("is-invalid");
+  $("#errorLogin").text("");
+
+  if (email === "" || contrasena === "") {
+    $("#errorLogin").text("Todos los campos son obligatorios.");
+    if (email === "") $("#loginEmail").addClass("is-invalid");
+    if (contrasena === "") $("#loginPassword").addClass("is-invalid");
+    return;
+  }
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      email: email,
+      contrasena: contrasena,
+      orden: "comprobarUsuario",
+    },
+  }).done(function (respuesta) {
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
+    if (respuesta.error) {
+      $("#loginEmail").addClass("is-invalid");
+      $("#loginPassword").addClass("is-invalid");
+      $("#errorLogin").text(respuesta.error);
+    } else {
+      location.reload();
+    }
+  });
+});
+
+// Evento Cerrar sesión (usa delegación de eventos por crearse dinámicamente)
+$(document).on("click", "#botonCerrarSesion", function (event) {
+  event.preventDefault();
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: { orden: "cerrarSesion" },
+  }).done(function (respuesta) {
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
+    if (respuesta.error) {
+      console.log(respuesta.error);
+    } else {
+      window.location.href = "index.php";
+    }
+  });
+});
+
+// Registro
+$("#botonAceptarRegistro").click(function (event) {
+  event.preventDefault();
+  let nombreUsuario = $("#regNombre").val().trim();
+  let email = $("#regEmail").val().trim();
+  let contrasena = $("#regPassword").val();
+  let contrasenaConfirmacion = $("#regPasswordConfirm").val();
+
+  $("#regNombre").removeClass("is-invalid");
+  $("#regEmail").removeClass("is-invalid");
+  $("#regPassword").removeClass("is-invalid");
+  $("#regPasswordConfirm").removeClass("is-invalid");
+  $("#errorRegistro").text("");
+
+  if (contrasena !== contrasenaConfirmacion) {
+    $("#regPassword").addClass("is-invalid");
+    $("#regPasswordConfirm").addClass("is-invalid");
+    $("#errorRegistro").text("Las contraseñas no coinciden.");
+    return;
+  }
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      nombreUsuario: nombreUsuario,
+      email: email,
+      contrasena: contrasena,
+      orden: "registrarUsuario",
+    },
+  }).done(function (respuesta) {
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
+    if (respuesta.error) {
+      $("#errorRegistro").text(respuesta.error);
+      $("#regNombre").addClass("is-invalid");
+      $("#regEmail").addClass("is-invalid");
+    } else {
+      $("#errorRegistro")
+        .removeClass("text-danger")
+        .addClass("text-success")
+        .text(respuesta.exito);
+
+      $("#formRegistro")[0].reset();
+
+      setTimeout(function () {
+        location.reload();
+      }, 1000);
+    }
+  });
+});
+
+// Login
+$("#botonAceptarLogin").click(function (event) {
+  event.preventDefault();
+
+  let email = $("#loginEmail").val().trim();
+  let contrasena = $("#loginPassword").val();
+
+  $("#loginEmail").removeClass("is-invalid");
+  $("#loginPassword").removeClass("is-invalid");
+  $("#errorLogin").text("");
+
+  if (email === "" || contrasena === "") {
+    $("#errorLogin").text("Todos los campos son obligatorios.");
+    if (email === "") $("#loginEmail").addClass("is-invalid");
+    if (contrasena === "") $("#loginPassword").addClass("is-invalid");
+    return;
+  }
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: { orden: "cerrarSesion" },
+  }).done(function (respuesta) {
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
+    if (respuesta.error) {
+      console.log(respuesta.error);
+    } else {
+      window.location.href = "index.php";
+    }
+  });
+});

js/perfil.js

@@ -26,10 +26,6 @@ $.ajax({
 function cambiarNombre() {
   let nuevoNombre = $("#nuevoNombre").val().trim();
 
-  if (nuevoNombre === "") {
-    return;
-  }
-
   $.ajax({
     method: "POST",
     url: "controladores/controladorUsuario.php",
@@ -46,13 +42,8 @@ function cambiarNombre() {
       // Actualizamos el nombre mostrado en la página
       $("#nombre").text(respuesta.nombreUsuario);
 
-      
+      // Limpiamos el input
       $("#nuevoNombre").val("");
-
-    
-      if (typeof comprobarEstadoSesion === "function") {
-        comprobarEstadoSesion();
-      }
     }
   });
 }
@@ -83,11 +74,14 @@ $("#inputFoto").change(function () {
   // Comprobamos que sea una imagen
   if (!archivo.type.startsWith("image/")) {
     alert("El archivo seleccionado no es una imagen.");
+
     $("#inputFoto").val("");
+
     return;
   }
 
   let datos = new FormData();
+
   datos.append("avatar", archivo);
   datos.append("orden", "cambiarAvatar");
 
@@ -103,23 +97,18 @@ $("#inputFoto").change(function () {
     if (respuesta.error) {
       alert(respuesta.error);
     } else {
-      // Actualizamos la imagen en la página de perfil sin recargar
+      // Actualizamos la imagen sin recargar la página
       $("#fotoPerfil").attr(
         "src",
-        respuesta.avatar + "?t=" + new Date().getTime()
+        respuesta.avatar + "?t=" + new Date().getTime(),
       );
-
-      // Actualizamos también el avatar superior en la cabecera 
-      if (typeof comprobarEstadoSesion === "function") {
-        comprobarEstadoSesion();
-      }
     }
   });
 });
 
 // =========================
 // RECOGER CATEGORIAS
-// =========================
+// ====
 
 $("#modalCrearPregunta").on("show.bs.modal", function () {
   const selectCategoria = $("#idCategoria");
@@ -152,14 +141,16 @@ $("#modalCrearPregunta").on("show.bs.modal", function () {
           $("<option>", {
             value: categoria.idCategoria,
             text: categoria.nombreCategoria,
-          })
+          }),
         );
       });
     },
 
     error: function (xhr, status, error) {
       console.error("Error al cargar las categorías:", error);
+
       console.error("Respuesta del servidor:", xhr.responseText);
+
       alert("No se han podido cargar las categorías.");
     },
   });
@@ -167,7 +158,7 @@ $("#modalCrearPregunta").on("show.bs.modal", function () {
 
 // =========================
 // CREAR PREGUNTA
-// =========================
+// ====
 
 $("#formCrearPregunta").on("submit", function (e) {
   e.preventDefault();
@@ -197,15 +188,24 @@ $("#formCrearPregunta").on("submit", function (e) {
 
   $.ajax({
     url: "controladores/controladorPregunta.php",
+
     type: "POST",
+
     dataType: "json",
+
     data: {
       orden: "crearPregunta",
+
       idCategoria: $("#idCategoria").val(),
+
       nombrePregunta: pregunta,
+
       respuestaCorrecta: respuestaCorrecta,
+
       respuestaIncorrecta1: respuestaIncorrecta1,
+
       respuestaIncorrecta2: respuestaIncorrecta2,
+
       respuestaIncorrecta3: respuestaIncorrecta3,
     },
 
@@ -214,8 +214,10 @@ $("#formCrearPregunta").on("submit", function (e) {
 
       if (respuesta.error) {
         alert(respuesta.error);
+
         boton.prop("disabled", false);
         boton.text("Crear pregunta");
+
         return;
       }
 
@@ -231,12 +233,17 @@ $("#formCrearPregunta").on("submit", function (e) {
         // Volvemos a activar el botón
         boton.prop("disabled", false);
         boton.text("Crear pregunta");
+
+        // Si tienes que actualizar la lista de preguntas:
+        // cargarPreguntas();
       }
     },
 
     error: function (xhr, status, error) {
       console.error("Error al crear la pregunta:", error);
+
       console.error("Respuesta del servidor:", xhr.responseText);
+
       alert("No se ha podido crear la pregunta.");
 
       boton.prop("disabled", false);

js/resultados.js

@@ -1,38 +0,0 @@
-$(document).ready(function () {
-    const idPartida = $("body").data("id-partida");
-    
-    comprobarEstadoPartida(idPartida);
-
-    const intervalo = setInterval(function () {
-        comprobarEstadoPartida(idPartida, intervalo);
-    }, 3000);
-});
-
-function comprobarEstadoPartida(idPartida, intervalo = null) {
-    $.ajax({
-        url: "controladores/ControladorResultados.php",
-        type: "POST",
-        dataType: "json",
-        data: { 
-            orden: "comprobarEstado", 
-            idPartida: idPartida 
-        },
-        success: function (respuesta) {
-            if (respuesta.error) {
-                console.error("Error:", respuesta.error);
-                return;
-            }
-
-            if (respuesta.terminada) {
-                if (intervalo !== null) clearInterval(intervalo);
-                
-                $("#pantalla-espera").fadeOut(400, function() {
-                    location.reload(); 
-                });
-            }
-        },
-        error: function () {
-            console.log("Error de comunicación con el controlador.");
-        }
-    });
-}

resultados.php

@@ -1,156 +1,291 @@
-<?php
-session_start();
-require_once $_SERVER['DOCUMENT_ROOT'] . '/triviagmatico/includes/conexionBD.php';
-
-$idPartida = intval($_GET['idPartida'] ?? 0);
-if ($idPartida <= 0) {
-    die("Partida no válida.");
-}
-
-$conexion = conexionBD();
-if (is_array($conexion)) {
-    die("Error de conexión a la base de datos.");
-}
-
-// Obtener listado de jugadores y sus equipos en esta partida
-$stmt = $conexion->prepare("
-    SELECT u.idUsuario, u.nombreUsuario, e.idEquipo, e.nombreEquipo
-    FROM equipoxpartida exp
-    INNER JOIN equipoxusuario exu ON exp.idEquipo = exu.idEquipo
-    INNER JOIN usuario u ON exu.idUsuario = u.idUsuario
-    INNER JOIN equipo e ON exu.idEquipo = e.idEquipo
-    WHERE exp.idPartida = :idPartida
-");
-$stmt->execute([':idPartida' => $idPartida]);
-$listaJugadoresRaw = $stmt->fetchAll(PDO::FETCH_ASSOC);
-
-$primerosEnAcertar = $_SESSION['primeros_en_acertar'][$idPartida] ?? [];
-
-$jugadoresFinales = [];
-$equiposFinales = [];
-
-// Respuestas de velocidad (+2 o +1)
-foreach ($listaJugadoresRaw as $jugador) {
-    $idU = (int)$jugador['idUsuario'];
-    $idE = (int)$jugador['idEquipo'];
-
-    $stmtRespuestas = $conexion->prepare("
-        SELECT ra.idPartidaxPregunta, r.correcta
-        FROM respuestaalmacenada ra
-        INNER JOIN respuesta r ON ra.idRespuesta = r.idRespuesta
-        INNER JOIN partidaxpregunta pxp ON ra.idPartidaxPregunta = pxp.idPartidaxPregunta
-        WHERE pxp.idPartida = :idPartida AND ra.idUsuario = :idUsuario
-    ");
-    $stmtRespuestas->execute([':idPartida' => $idPartida, ':idUsuario' => $idU]);
-    $respuestasUsuario = $stmtRespuestas->fetchAll(PDO::FETCH_ASSOC);
-
-    $aciertos = 0;
-    $puntosTotalesJugador = 0;
-
-    foreach ($respuestasUsuario as $resp) {
-        if ((int)$resp['correcta'] === 1) {
-            $aciertos++;
-            $idPxp = $resp['idPartidaxPregunta'];
-            
-            // Si el ID de usuario coincide con el primero guardado de esa pregunta se lleva 2 puntos
-            if (isset($primerosEnAcertar[$idPxp]) && $primerosEnAcertar[$idPxp] === $idU) {
-                $puntosTotalesJugador += 2;
-            } else {
-                $puntosTotalesJugador += 1;
-            }
-        }
-    }
-
-    $jugadoresFinales[] = [
-        'nombre' => $jugador['nombreUsuario'],
-        'equipo' => $jugador['nombreEquipo'],
-        'aciertos' => $aciertos,
-        'puntos' => $puntosTotalesJugador
-    ];
-
-    if (!isset($equiposFinales[$idE])) {
-        $equiposFinales[$idE] = [
-            'nombre' => $jugador['nombreEquipo'],
-            'puntos' => 0
-        ];
-    }
-    $equiposFinales[$idE]['puntos'] += $puntosTotalesJugador;
-}
-
-// Ordenar según la puntuación final de mayor a menor
-usort($jugadoresFinales, function($a, $b) { return $b['puntos'] <=> $a['puntos']; });
-usort($equiposFinales, function($a, $b) { return $b['puntos'] <=> $a['puntos']; });
-?>
-
 <!DOCTYPE html>
 <html lang="es">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Resultados - Trivial</title>
+
-    <link rel="stylesheet" href="css/resultados.css">
+    <title>Trivial - Resultado final</title>
-    <script src="https://jquery.com"></script>
+
+    <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
+
+    <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 data-id-partida="<?php echo $idPartida; ?>">
 
-    <div id="pantalla-espera" class="contenedor">
+<body>
-        <h2>⌛ Esperando a que todos los jugadores terminen...</h2>
-        <p>Calculando estadísticas de velocidad y actualizando perfiles históricos en el servidor.</p>
-        <div class="loader"></div>
-    </div>
 
-    <div id="pantalla-resultados" class="contenedor" style="display:none;">
+    <?php
-        <h1>🏆 Resultados de la Partida 🏆</h1>
+    include_once("cabecera.php");
+    ?>
 
-        <h2>Clasificación por Equipos</h2>
+    <main class="container py-5">
-        <table class="tabla-ranking">
-            <thead>
-                <tr>
-                    <th>Posición</th>
-                    <th>Equipo</th>
-                    <th>Puntos Totales</th>
-                </tr>
-            </thead>
-            <tbody>
-                <?php foreach ($equiposFinales as $index => $eq): ?>
-                <tr class="<?php echo $index === 0 ? 'top-team' : ''; ?>">
-                    <td>#<?php echo $index + 1; ?></td>
-                    <td><?php echo htmlspecialchars($eq['nombre']); ?></td>
-                    <td><strong><?php echo $eq['puntos']; ?> pts</strong></td>
-                </tr>
-                <?php endforeach; ?>
-            </tbody>
-        </table>
 
-        <h2>Rendimiento Individual</h2>
+        <!-- Título -->
-        <table class="tabla-ranking">
+        <div class="text-center mb-5">
-            <thead>
+
-                <tr>
+            <div class="trophy-icon">
-                    <th>Posición</th>
+                <i class="bi bi-trophy-fill"></i>
-                    <th>Jugador</th>
+            </div>
-                    <th>Equipo</th>
+
-                    <th>Aciertos</th>
+            <h1 class="fw-bold">
-                    <th>Puntos Logrados</th>
+                ¡Trivial terminado!
-                </tr>
+            </h1>
-            </thead>
+
-            <tbody>
+            <p class="text-muted fs-5 mb-0">
-                <?php foreach ($jugadoresFinales as $index => $jug): ?>
+                Estos son los resultados finales
-                <tr class="<?php echo $index === 0 ? 'top-player' : ''; ?>">
+            </p>
-                    <td>#<?php echo $index + 1; ?></td>
-                    <td><?php echo htmlspecialchars($jug['nombre']); ?></td>
-                    <td><?php echo htmlspecialchars($jug['equipo']); ?></td>
-                    <td><?php echo $jug['aciertos']; ?> / 10</td>
-                    <td><strong><?php echo $jug['puntos']; ?> pts</strong></td>
-                </tr>
-                <?php endforeach; ?>
-            </tbody>
-        </table>
 
-        <div class="contenedor-boton">
-            <a href="/triviagmatico/buscadorSala.php" class="btn-inicio">Volver al Inicio 🏠</a>
         </div>
-    </div>
 
-    <script src="js/resultados.js"></script>
+
+        <!-- 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>

triviagmatico.env

@@ -0,0 +1,6 @@
+bDatosServer="localhost"
+bDatos="triviagmatico"
+bDatosUser="root"
+bDatosPass=""
+urlBase="http://triviagmatico.test"
+dirBase="C:/laragon/www/triviagmatico"