Merge branch 'frontend' of https://git.desarrolloalcala.com/jorge/triviagmatico into frontend

css/perfil.css

@@ -0,0 +1,403 @@
+/* ========================================= */
+/* PERFIL */
+/* ========================================= */
+
+.perfil-container {
+    width: 100%;
+    max-width: 1050px;
+
+    margin: 0 auto;
+
+    padding: 40px 20px;
+}
+
+
+/* ========================================= */
+/* TARJETA DEL PERFIL */
+/* ========================================= */
+
+.perfil-card {
+    background-color: #fff;
+
+    border-radius: 20px;
+
+    box-shadow:
+        0 8px 20px rgba(0, 0, 0, 0.08);
+
+    overflow: hidden;
+}
+
+
+/* ========================================= */
+/* CABECERA DEL PERFIL */
+/* ========================================= */
+
+.perfil-header {
+    background-color: var(--kahoot-purple);
+
+    color: white;
+
+    padding: 20px;
+
+    text-align: center;
+
+    font-size: 2rem;
+
+    font-weight: 700;
+
+    text-shadow:
+        2px 2px 0 rgba(0, 0, 0, 0.2);
+}
+
+
+/* ========================================= */
+/* CONTENIDO */
+/* ========================================= */
+
+.perfil-content {
+    padding: 45px;
+}
+
+
+/* ========================================= */
+/* NOMBRE */
+/* ========================================= */
+
+.nombre {
+    color: var(--kahoot-purple);
+
+    font-size: 2.5rem;
+
+    font-weight: 700;
+
+    margin-bottom: 25px;
+}
+
+
+/* ========================================= */
+/* FOTO */
+/* ========================================= */
+
+.foto-container {
+    position: relative;
+
+    display: inline-block;
+}
+
+
+.avatar {
+    width: 180px;
+    height: 180px;
+
+    object-fit: cover;
+
+    border: 6px solid white;
+
+    box-shadow:
+        0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+
+/* ========================================= */
+/* BOTÓN CAMBIAR FOTO */
+/* ========================================= */
+
+.btn-foto {
+    position: absolute;
+
+    right: -5px;
+    bottom: 5px;
+
+    width: 52px;
+    height: 52px;
+
+    border: none;
+
+    border-radius: 50%;
+
+    background-color: var(--kahoot-blue);
+
+    color: white;
+
+    border-bottom: 5px solid #0c4891;
+
+    font-size: 24px;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    cursor: pointer;
+
+    transition: all 0.2s ease;
+}
+
+
+.btn-foto:hover {
+    background-color: #0f56ab;
+
+    color: white;
+
+    transform: translateY(-3px);
+
+    box-shadow:
+        0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+
+.btn-foto:active {
+    transform: translateY(3px);
+
+    border-bottom: 2px solid #0c4891;
+}
+
+
+/* ========================================= */
+/* FORMULARIO NOMBRE */
+/* ========================================= */
+
+.formulario-nombre {
+    background-color: #f2f2f2;
+
+    border-radius: 20px;
+
+    padding: 20px;
+
+    max-width: 400px;
+
+    margin: 25px auto 0;
+
+    box-shadow:
+        0 5px 12px rgba(0, 0, 0, 0.08);
+}
+
+
+.formulario-nombre label {
+    color: var(--kahoot-purple);
+
+    font-weight: 600;
+}
+
+
+/* ========================================= */
+/* INPUT */
+/* ========================================= */
+
+.formulario-nombre .form-control {
+    border-radius: 12px;
+
+    padding: 11px 15px;
+
+    border: 2px solid #ddd;
+}
+
+
+.formulario-nombre .form-control:focus {
+    border-color: var(--kahoot-blue);
+
+    box-shadow:
+        0 0 0 3px rgba(19, 104, 206, 0.15);
+}
+
+
+/* ========================================= */
+/* BOTÓN CAMBIAR NOMBRE */
+/* ========================================= */
+
+.btn-perfil-cambiar {
+    background-color: var(--kahoot-green);
+
+    color: white;
+
+    font-weight: 700;
+
+    border: none;
+
+    border-bottom: 5px solid var(--kahoot-green-hover);
+
+    border-radius: 12px;
+
+    padding: 10px 18px;
+
+    transition: all 0.15s ease;
+}
+
+
+.btn-perfil-cambiar:hover {
+    background-color: #2bb00f;
+
+    color: white;
+
+    transform: translateY(-2px);
+}
+
+
+.btn-perfil-cambiar:active {
+    transform: translateY(3px);
+
+    border-bottom-width: 2px;
+}
+
+
+/* ========================================= */
+/* BOTÓN BORRAR */
+/* ========================================= */
+
+.btn-perfil-borrar {
+    background-color: var(--kahoot-red);
+
+    color: white;
+
+    font-weight: 700;
+
+    border: none;
+
+    border-bottom: 5px solid #a9142d;
+
+    border-radius: 12px;
+
+    padding: 10px 18px;
+
+    transition: all 0.15s ease;
+}
+
+
+.btn-perfil-borrar:hover {
+    background-color: #c91635;
+
+    color: white;
+
+    transform: translateY(-2px);
+}
+
+
+.btn-perfil-borrar:active {
+    transform: translateY(3px);
+
+    border-bottom-width: 2px;
+}
+
+
+/* ========================================= */
+/* ESTADÍSTICAS */
+/* ========================================= */
+
+.estadisticas {
+    background-color: var(--kahoot-purple);
+
+    color: white;
+
+    border-radius: 20px;
+
+    padding: 30px;
+
+    min-height: 350px;
+
+    box-shadow:
+        0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+
+.estadisticas h2 {
+    font-size: 2rem;
+
+    font-weight: 700;
+
+    text-align: center;
+
+    margin-bottom: 30px;
+
+    text-shadow:
+        2px 2px 0 rgba(0, 0, 0, 0.2);
+}
+
+
+/* ========================================= */
+/* ESTADÍSTICAS INDIVIDUALES */
+/* ========================================= */
+
+.estadistica {
+    display: flex;
+
+    justify-content: space-between;
+
+    align-items: center;
+
+    border-radius: 12px;
+
+    padding: 15px;
+
+    margin-bottom: 15px;
+
+    font-size: 1.2rem;
+
+    font-weight: 600;
+
+    box-shadow:
+        0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+
+.estadistica-victorias {
+    background-color: var(--kahoot-green);
+}
+
+
+.estadistica-derrotas {
+    background-color: var(--kahoot-red);
+}
+
+
+.estadistica-aciertos {
+    background-color: var(--kahoot-yellow);
+
+    color: #333;
+}
+
+
+/* ========================================= */
+/* RESPONSIVE */
+/* ========================================= */
+
+@media (max-width: 768px) {
+
+    .perfil-container {
+        padding: 25px 15px;
+    }
+
+
+    .perfil-content {
+        padding: 30px 20px;
+    }
+
+
+    .nombre {
+        font-size: 2rem;
+    }
+
+
+    .avatar {
+        width: 150px;
+        height: 150px;
+    }
+
+
+    .estadisticas {
+        margin-top: 10px;
+    }
+
+
+    .formulario-nombre {
+        max-width: 100%;
+    }
+
+
+    .btn-perfil-cambiar,
+    .btn-perfil-borrar {
+        padding: 9px 12px;
+
+        font-size: 0.9rem;
+    }
+
+}

js/perfil.js

@@ -0,0 +1,74 @@
+// =========================
+// CAMBIAR NOMBRE
+// =========================
+
+function cambiarNombre() {
+
+    const input = document.getElementById("nuevoNombre");
+    const nombre = document.getElementById("nombre");
+
+    const nuevoNombre = input.value.trim();
+
+    if (nuevoNombre !== "") {
+
+        nombre.textContent = nuevoNombre;
+
+        input.value = "";
+    }
+}
+
+
+// =========================
+// BORRAR NOMBRE
+// =========================
+
+function borrarNombre() {
+
+    document.getElementById("nuevoNombre").value = "";
+
+}
+
+
+// =========================
+// ABRIR SELECTOR DE IMAGEN
+// =========================
+
+function seleccionarFoto() {
+
+    document.getElementById("inputFoto").click();
+
+}
+
+
+// =========================
+// CAMBIAR FOTO
+// =========================
+
+document.getElementById("inputFoto").addEventListener(
+    "change",
+    function(event) {
+
+        const archivo = event.target.files[0];
+
+        if (archivo) {
+
+            // Comprobamos que sea una imagen
+            if (!archivo.type.startsWith("image/")) {
+
+                alert("Por favor, selecciona una imagen.");
+
+                return;
+            }
+
+
+            // Creamos una URL temporal
+            const imagenURL = URL.createObjectURL(archivo);
+
+
+            // Cambiamos la foto
+            document.getElementById("fotoPerfil").src = imagenURL;
+
+        }
+
+    }
+);

perfil.php

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Perfil</title>
+
+    <!-- Bootstrap -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+        rel="stylesheet">
+
+    <!-- Google Font: Fredoka -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+    <link
+        href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap"
+        rel="stylesheet">
+
+    <!-- Tu CSS -->
+    <link rel="stylesheet" href="css/index.css">
+    <link rel="stylesheet" href="css/perfil.css">
+
+</head>
+
+
+<body>
+    <?php
+    include_once 'cabecera.php';
+    ?>
+
+    <div class="perfil-container">
+
+        <div class="perfil-card">
+
+            <!-- ========================= -->
+            <!-- CABECERA -->
+            <!-- ========================= -->
+
+            <div class="perfil-header">
+                👤 Mi perfil
+            </div>
+
+
+            <div class="perfil-content">
+
+                <div class="row align-items-center g-5">
+
+
+                    <!-- ========================= -->
+                    <!-- PERFIL -->
+                    <!-- ========================= -->
+
+                    <div class="col-md-6 text-center">
+
+                        <!-- Nombre -->
+
+                        <h1 id="nombre" class="nombre">
+                            tuNombre
+                        </h1>
+
+
+                        <!-- ========================= -->
+                        <!-- FOTO DE PERFIL -->
+                        <!-- ========================= -->
+
+                        <div class="foto-container">
+
+                            <img
+                                id="fotoPerfil"
+                                src="https://i.pravatar.cc/300?img=47"
+                                alt="Foto de perfil"
+                                class="avatar rounded-circle">
+
+
+                            <!-- Botón lápiz -->
+
+                            <button
+                                type="button"
+                                class="btn-foto"
+                                onclick="seleccionarFoto()"
+                                title="Cambiar foto de perfil">
+                                ✏️
+                            </button>
+
+
+                            <!-- Input oculto -->
+
+                            <input
+                                type="file"
+                                id="inputFoto"
+                                accept="image/*"
+                                hidden>
+
+                        </div>
+
+
+                        <!-- ========================= -->
+                        <!-- CAMBIAR NOMBRE -->
+                        <!-- ========================= -->
+
+                        <div class="formulario-nombre">
+
+                            <label
+                                for="nuevoNombre"
+                                class="form-label">
+                                Cambia tu nombre
+                            </label>
+
+
+                            <input
+                                type="text"
+                                id="nuevoNombre"
+                                class="form-control mb-3"
+                                placeholder="Escribe tu nuevo nombre">
+
+
+                            <div class="d-flex justify-content-center gap-2">
+
+                                <button
+                                    type="button"
+                                    class="btn-perfil-cambiar"
+                                    onclick="cambiarNombre()">
+                                    ✔ Cambiar nombre
+                                </button>
+
+
+                                <button
+                                    type="button"
+                                    class="btn-perfil-borrar"
+                                    onclick="borrarNombre()">
+                                    ✖ Borrar
+                                </button>
+
+                            </div>
+
+                        </div>
+
+                    </div>
+
+
+                    <!-- ========================= -->
+                    <!-- ESTADÍSTICAS -->
+                    <!-- ========================= -->
+
+                    <div class="col-md-6">
+
+                        <div class="estadisticas">
+
+                            <h2>
+                                📊 Estadísticas
+                            </h2>
+
+
+                            <div class="estadistica estadistica-victorias">
+
+                                🏆 &nbsp; Victorias:
+
+                                <strong>
+                                    0
+                                </strong>
+
+                            </div>
+
+
+                            <div class="estadistica estadistica-derrotas">
+
+                                ❌ &nbsp; Derrotas:
+
+                                <strong>
+                                    0
+                                </strong>
+
+                            </div>
+
+
+                            <div class="estadistica estadistica-aciertos">
+
+                                🎯 &nbsp; Aciertos:
+
+                                <strong>
+                                    0
+                                </strong>
+
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <script
+        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
+    </script>
+    <script src="js/perfil.js"></script>
+
+</body>
+
+</html>