feat: app completa recordaLexia (fases 1-5)
App web familiar de rutinas visuales para niños con TDAH: muestra cada día el material del cole y las rutinas de tarde, con gamificación por monedas y tienda de recompensas. Multi-niño y bilingüe ES/CA. Uso doméstico/homelab. Backend (Spring Boot 3.5 / Java 21 / Gradle): - Dominio por capas, PostgreSQL + Liquibase, datos semilla. - API REST con DTOs: /today, toggle con monedas y bonos de bloque/día, monedero, tienda/canje, ajustes y CRUD del panel de padres. - Seguridad ligera por PIN (BCrypt + sesion en memoria), sin Keycloak. - Tests JUnit: generacion del dia, monedas/bonos con reversion, canje, seguridad. Frontend (Angular 19, standalone + signals): - Perfiles, Home (Tablero y Foco), Tienda y panel de padres (5 pestañas). - Tipografia OpenDyslexic conmutable (accesibilidad), i18n ES/CA, TTS y sonido. - Tokens de diseño fieles al handoff (paleta, animaciones, monedas voladoras). Empaquetado: - Docker multi-stage + docker-compose (PostgreSQL + backend + Nginx). - Decisiones de arquitectura documentadas en docs/adr.
This commit is contained in:
Jaume Garriga Maestre
147
frontend/src/styles.scss
Normal file
147
frontend/src/styles.scss
Normal file
@@ -0,0 +1,147 @@
|
||||
// Estilos globales de recordaLexia.
|
||||
// Las @font-face (OpenDyslexic/Fredoka/Nunito) se cargan desde @fontsource vía
|
||||
// angular.json. Tokens en styles/_theme.scss; animaciones en styles/_animations.scss.
|
||||
@use 'styles/theme';
|
||||
@use 'styles/animations';
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
color: var(--text-strong);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
// Fondo calmado del handoff: color base + dos gradientes radiales suaves.
|
||||
background-color: var(--bg);
|
||||
background-image:
|
||||
radial-gradient(1100px 700px at 12% -10%, #fbf4e9 0%, transparent 55%),
|
||||
radial-gradient(1000px 700px at 110% 120%, #e2f0ec 0%, transparent 55%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
// Dos "blobs" orgánicos difuminados de fondo (sin DOM extra, vía pseudo-elementos).
|
||||
// Decorativos y detrás del contenido; no capturan toques.
|
||||
body::before,
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
body::before {
|
||||
top: -120px;
|
||||
left: -100px;
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
border-radius: 48% 52% 60% 40% / 55% 45% 60% 45%;
|
||||
background: #fcebd3;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
body::after {
|
||||
bottom: -140px;
|
||||
right: -90px;
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
border-radius: 60% 40% 45% 55% / 50% 55% 45% 50%;
|
||||
background: #d7ece5;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
// El contenido de la app va por encima de los blobs.
|
||||
app-root {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Tipografía base.
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--font-display);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
// --- Helpers del panel de padres (formularios de administración) ---
|
||||
.adm-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-1);
|
||||
border-radius: var(--radius-card);
|
||||
padding: var(--space-5);
|
||||
box-shadow: var(--shadow-card);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.adm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
|
||||
.adm-input {
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
padding: 10px 14px;
|
||||
border: 2px solid var(--border-2);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface);
|
||||
color: var(--text-strong);
|
||||
min-width: 0;
|
||||
}
|
||||
.adm-input--sm { width: 70px; text-align: center; }
|
||||
.adm-btn {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
border: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 10px 18px;
|
||||
min-height: 44px;
|
||||
background: var(--accent-blue);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.adm-btn:active { transform: scale(0.97); }
|
||||
.adm-btn:disabled { opacity: 0.4; cursor: default; }
|
||||
.adm-del {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
color: var(--accent-pink);
|
||||
font-size: 1.2rem;
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.adm-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.adm-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: 12px 14px;
|
||||
background: var(--surface-soft);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.adm-item__grow { flex: 1; }
|
||||
.adm-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--surface-softer);
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-1);
|
||||
}
|
||||
.adm-empty { color: var(--text-3); padding: var(--space-4); text-align: center; }
|
||||
.adm-label { font-weight: 600; color: var(--text-1); }
|
||||
Reference in New Issue
Block a user