diff --git a/css/perfil.css b/css/perfil.css new file mode 100644 index 0000000..f04d14f --- /dev/null +++ b/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; + } + +} diff --git a/js/perfil.js b/js/perfil.js new file mode 100644 index 0000000..edfca78 --- /dev/null +++ b/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; + + } + + } +); diff --git a/perfil.php b/perfil.php new file mode 100644 index 0000000..2f138e3 --- /dev/null +++ b/perfil.php @@ -0,0 +1,209 @@ + + + + + + + + Perfil + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + +
+ 👤 Mi perfil +
+ + +
+ +
+ + + + + + +
+ + + +

+ tuNombre +

+ + + + + + +
+ + Foto de perfil + + + + + + + + + + + +
+ + + + + + +
+ + + + + + + +
+ + + + + + +
+ +
+ +
+ + + + + + +
+ +
+ +

+ 📊 Estadísticas +

+ + +
+ + 🏆   Victorias: + + + 0 + + +
+ + +
+ + ❌   Derrotas: + + + 0 + + +
+ + +
+ + 🎯   Aciertos: + + + 0 + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + + + + + \ No newline at end of file