add perfil

2026-09-23 13:58:05 +02:00
parent 4cb4faff1b
commit 835b8e332b
3 changed files with 686 additions and 0 deletions
@@ -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>