jorge/triviagmatico
3
0
Fork 0
Code Issues 5 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add resultados

Browse Source
This commit is contained in:
Isaac
2026-09-24 10:05:45 +02:00
parent afbf66c073
commit c603a3c0ba
3 changed files with 434 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cabecera.php
+1 -162
View File
@@ -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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- Google Fonts para estilo Kahoot --> <!-- Google Fonts para estilo Kahoot -->
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap" rel="stylesheet"> <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> <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> </style>
<nav class="navbar navbar-expand-lg navbar-kahoot py-3 mb-4"> <nav class="navbar navbar-expand-lg navbar-kahoot py-3 mb-4">
css/index.css
+143 -123
View File
@@ -1,142 +1,162 @@
:root { :root {
--kahoot-purple: #46178f; --kahoot-purple: #46178f;
--kahoot-blue: #1368ce; --kahoot-blue: #1368ce;
--kahoot-red: #e21b3c; --kahoot-red: #e21b3c;
--kahoot-yellow: #ffa602; --kahoot-yellow: #ffa602;
--kahoot-green: #26890c; --kahoot-green: #26890c;
--kahoot-green-hover: #1f6f09; --kahoot-green-hover: #1f6f09;
} }
body { body {
font-family: "Fredoka", sans-serif; font-family: 'Fredoka', sans-serif;
background-color: #f2f2f2; background-color: #f2f2f2;
min-height: 100vh; min-height: 100vh;
} }
.navbar-kahoot { .navbar-kahoot {
background-color: var(--kahoot-purple); background-color: var(--kahoot-purple);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.15);
} }
.navbar-brand { .navbar-brand {
font-weight: 700; font-weight: 700;
font-size: 1.8rem; font-size: 1.8rem;
color: #fff !important; color: #fff !important;
letter-spacing: 1px; letter-spacing: 1px;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2); text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
} }
.btn-kahoot-login { .btn-kahoot-login {
background-color: var(--kahoot-blue); background-color: var(--kahoot-blue);
color: white; color: white;
font-weight: 600; font-weight: 600;
border: none; border: none;
border-bottom: 4px solid #0c4891; border-bottom: 4px solid #0c4891;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.btn-kahoot-login:hover { .btn-kahoot-login:hover {
background-color: #0f56ab; background-color: #0f56ab;
color: white; color: white;
transform: translateY(-2px); transform: translateY(-2px);
} }
/* Estilos del Dropdown de usuario */ .btn-kahoot-register {
.user-dropdown-btn { background-color: var(--kahoot-green);
background: rgba(255, 255, 255, 0.15); color: white;
color: white; font-weight: 600;
border: 2px solid rgba(255, 255, 255, 0.3); border: none;
border-radius: 50px; border-bottom: 4px solid var(--kahoot-green-hover);
padding: 8px 18px; transition: all 0.2s ease;
font-weight: 600; }
transition: all 0.2s ease;
}
.user-dropdown-btn:hover, .btn-kahoot-register:hover {
.user-dropdown-btn:focus, background-color: #2bb00f;
.user-dropdown-btn.show { color: white;
background: rgba(255, 255, 255, 0.3); transform: translateY(-2px);
color: white; }
border-color: #fff;
box-shadow: none;
}
.user-dropdown-menu { .user-dropdown-btn {
border-radius: 15px; background: rgba(255, 255, 255, 0.15);
border: none; color: white;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); border: 2px solid rgba(255, 255, 255, 0.3);
padding: 10px; border-radius: 50px;
min-width: 200px; padding: 8px 18px;
margin-top: 10px !important; font-weight: 600;
} transition: all 0.2s ease;
}
.user-dropdown-menu .dropdown-item { .user-dropdown-btn:hover,
border-radius: 10px; .user-dropdown-btn:focus,
font-weight: 600; .user-dropdown-btn.show {
padding: 10px 15px; background: rgba(255, 255, 255, 0.3);
transition: all 0.15s ease; color: white;
} border-color: #fff;
box-shadow: none;
}
.user-dropdown-menu .dropdown-item:hover { .user-dropdown-menu {
background-color: #f0eafb; border-radius: 15px;
color: var(--kahoot-purple); 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.logout-item { .user-dropdown-menu .dropdown-item {
color: var(--kahoot-red); border-radius: 10px;
} font-weight: 600;
padding: 10px 15px;
transition: all 0.15s ease;
}
.user-dropdown-menu .dropdown-item.logout-item:hover { .user-dropdown-menu .dropdown-item:hover {
background-color: #fde8ea; background-color: #f0eafb;
color: var(--kahoot-red); color: var(--kahoot-purple);
} }
.btn-play-kahoot { .user-dropdown-menu .dropdown-item.logout-item {
background-color: var(--kahoot-green); color: var(--kahoot-red);
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 { .user-dropdown-menu .dropdown-item.logout-item:hover {
background-color: #2bb00f; background-color: #fde8ea;
color: white; color: var(--kahoot-red);
transform: translateY(-3px); }
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
}
.btn-play-kahoot:active { .btn-play-kahoot {
transform: translateY(4px); background-color: var(--kahoot-green);
border-bottom: 2px solid var(--kahoot-green-hover); 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;
}
.ranking-card { .btn-play-kahoot:hover {
border-radius: 20px; background-color: #2bb00f;
border: none; color: white;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transform: translateY(-3px);
overflow: hidden; box-shadow: 0 12px 20px rgba(0,0,0,0.25);
} }
.ranking-header { .btn-play-kahoot:active {
background-color: var(--kahoot-yellow); transform: translateY(4px);
color: #333; border-bottom: 2px solid var(--kahoot-green-hover);
padding: 15px 20px; }
font-weight: 700;
}
.trophy-icon { .ranking-card {
font-size: 3rem; border-radius: 20px;
color: var(--kahoot-yellow); border: none;
margin-bottom: 10px; 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;
}
resultados.php
+289
View File
@@ -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>