Update index (estilo Kahoot)

Se añade index.php actualizado.
2026-09-23 12:53:06 +02:00
parent 8caaeeaef0
commit 2cc13ce4ed
1 changed files with 51 additions and 3 deletions
@@ -1,11 +1,59 @@
+<?php
+session_start();
+// Usuario logueado (CAMBIAR A NULL PARA CERRAR SESIÓN)
+$_SESSION['usuario'] = 'Alexis'; 
+
+$isLoggedIn = isset($_SESSION['usuario']);
+$username = $isLoggedIn ? $_SESSION['usuario'] : '';
+
+
+include 'cabecera.php';
+?>
+
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es-ES">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Proyecto Trivial</title>
+    <title>Triviagmático</title>
 </head>
 <body>
-    
+
+<div class="container my-5">
+    <div class="row justify-content-center align-items-center g-4">
+        
+        <!-- Botón Jugar (solo se muestra si está logueado) -->
+        <?php if ($isLoggedIn): ?>
+            <div class="col-12 col-lg-5 col-xl-4">
+                <button type="button" class="btn btn-play-kahoot" id="btnJugar">
+                    <i class="fa-solid fa-play"></i>
+                    <span>¡JUGAR!</span>
+                </button>
+            </div>
+        <?php endif; ?>
+
+        <!-- Ranking -->
+        <div class="col-12 <?= $isLoggedIn ? 'col-lg-7 col-xl-8' : 'col-lg-8' ?>">
+            <div class="card ranking-card">
+                <div class="ranking-header">
+                    <h3 class="m-0"><i class="fa-solid fa-trophy me-2"></i> RANKING GLOBAL DE JUGADORES</h3>
+                </div>
+                <div class="card-body">
+                    <!-- Div datos de ranking -->
+                    <div id="ranking-container" class="ranking-placeholder text-center p-4">
+                        <i class="fa-solid fa-medal trophy-icon"></i>
+                        <h4 class="fw-bold text-secondary">Cargando clasificación...</h4>
+                        <p class="text-muted mb-0">Los mejores equipos y jugadores aparecerán aquí pronto.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+<!-- JS de Bootstrap -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+
 </body>
 </html>