From f16ca05a497adde29885abaffb97731f063bf4c0 Mon Sep 17 00:00:00 2001 From: Fernando Escobar Robles Date: Fri, 6 Jun 2025 21:35:38 -0600 Subject: [PATCH] mejoras vista atleta --- public/atleta.html | 36 +++++---- public/css/estiloAtletaSimulador.css | 107 +++++++++++++++++++++++++++ public/simulador.html | 64 ++++++++-------- 3 files changed, 153 insertions(+), 54 deletions(-) create mode 100644 public/css/estiloAtletaSimulador.css diff --git a/public/atleta.html b/public/atleta.html index 15db9f9..0d23480 100644 --- a/public/atleta.html +++ b/public/atleta.html @@ -2,47 +2,45 @@ - Atletas - + Panel del Atleta + + + + - + -
-

Equipos Disponibles

-

Esta es tu zona para consultar las competencias en las que te encuentras

- -
+
+

Equipos Disponibles

+

Consulta las competencias en las que estás asignado

+
diff --git a/public/css/estiloAtletaSimulador.css b/public/css/estiloAtletaSimulador.css new file mode 100644 index 0000000..5636285 --- /dev/null +++ b/public/css/estiloAtletaSimulador.css @@ -0,0 +1,107 @@ +body { + font-family: 'Inter', sans-serif; + background: #f2f4f8; + color: #212529; +} + +h2, h3 { + font-weight: 700; + color: #003366; +} + +p { + color: #6c757d; + font-weight: 400; +} + +/* Tarjetas estilo glass */ +.card { + background: rgba(255, 255, 255, 0.75); + border-radius: 18px; + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); + backdrop-filter: blur(8px); + border: 1px solid rgba(200, 200, 255, 0.1); + transition: transform 0.25s ease, box-shadow 0.25s ease; +} + +.card:hover { + transform: scale(1.015); + box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12); +} + +/* Botones refinados */ +.btn-outline-success, .btn-outline-primary { + border-radius: 30px; + padding: 6px 20px; + font-weight: 500; + letter-spacing: 0.4px; + transition: all 0.2s ease-in-out; +} + +.btn-outline-success:hover, .btn-outline-primary:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2); +} + +/* Línea de tiempo */ +#lineaTiempo .step { + border-radius: 50px; + background-color: #ffffff; + border: 1px solid #dee2e6; + padding: 6px 14px; + font-size: 0.9rem; + color: #003366; + box-shadow: 0 2px 6px rgba(0,0,0,0.04); + transition: all 0.2s ease-in-out; +} + +#lineaTiempo .step:hover { + background-color: #eaf4ff; + transform: scale(1.05); +} + +#lineaTiempo .step.active { + background-color: #b6e0ff; + font-weight: 600; +} + +/* Piscina */ +#piscinaContainer { + background: #eaf6ff; + border-radius: 16px; + padding: 20px; + box-shadow: inset 0 0 0 1px #cfe2f3; +} + +/* Audio player */ +#audioPlayer { + border-radius: 10px; + width: 100%; + max-width: 500px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); +} + +/* Ajustes generales de secciones */ +.container { + padding-top: 4rem; + padding-bottom: 4rem; +} + +.card-text { + font-size: 0.95rem; +} + +select.form-select { + padding: 6px 10px; + font-size: 0.9rem; +} + +/* Suavidad */ +.fade-in { + animation: fadeIn 0.4s ease-in-out; +} + +@keyframes fadeIn { + 0% { opacity: 0; transform: translateY(10px); } + 100% { opacity: 1; transform: translateY(0); } +} diff --git a/public/simulador.html b/public/simulador.html index a17fd69..96e9e5b 100644 --- a/public/simulador.html +++ b/public/simulador.html @@ -4,69 +4,63 @@ Simulador de Rutina + + + -
-

Cargando rutina...

-

- | - -

+
+

Cargando rutina...

+

+ + +

- -
- -
+
+ + +
-
-
-
- -
Línea de Tiempo
-
+
+
+
+
+
Línea de Tiempo
+
+
+