alfy
21b509c6ba
Struttura progetto: - Backend mock Python (FastAPI) con API per gestione varchi - Frontend React + TypeScript + Vite + Tailwind CSS - Documentazione e piani di sviluppo Backend (backend-mock/): - API REST: /info-room, /login-validate, /anagrafica, /entry-request - Dati mock: 7 utenti, validatore (999999/focolari) - CORS abilitato, docs OpenAPI automatiche - Configurazione pipenv per ambiente virtuale Frontend (frontend/): - State machine completa per flusso accesso varco - Hook useRFIDScanner per lettura badge (pattern singolo) - Componenti UI: Logo, Button, Input, Modal, UserCard, Timer - Schermate: Loading, Login, ActiveGate, Success/Error Modal - Design system con colori Focolari - Ottimizzato per tablet touch Documentazione (ai-prompts/): - Welcome guide per futuri agenti - Piano sviluppo backend e frontend con checklist DA COMPLETARE: - Hook RFID multi-pattern (US/IT/altri layout tastiera) - Pagina /debug per diagnostica in loco - Logging console strutturato
155 lines
2.9 KiB
CSS
155 lines
2.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ============================================
|
|
FOCOLARI VOTING SYSTEM - Design Tokens
|
|
============================================ */
|
|
|
|
@theme {
|
|
/* Colori Istituzionali */
|
|
--color-focolare-blue: #0072CE;
|
|
--color-focolare-blue-dark: #005BA1;
|
|
--color-focolare-blue-light: #3D9BE0;
|
|
|
|
--color-focolare-orange: #F5A623;
|
|
--color-focolare-orange-dark: #D4891C;
|
|
--color-focolare-orange-light: #FFB84D;
|
|
|
|
--color-focolare-yellow: #FFD700;
|
|
--color-focolare-yellow-dark: #CCA300;
|
|
--color-focolare-yellow-light: #FFE44D;
|
|
|
|
/* Stati */
|
|
--color-success: #22C55E;
|
|
--color-success-dark: #16A34A;
|
|
--color-error: #EF4444;
|
|
--color-error-dark: #DC2626;
|
|
--color-warning: #F59E0B;
|
|
}
|
|
|
|
/* ============================================
|
|
Global Styles
|
|
============================================ */
|
|
|
|
l:root {
|
|
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
color-scheme: light;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
|
}
|
|
|
|
#root {
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ============================================
|
|
Tablet-Optimized Touch Styles
|
|
============================================ */
|
|
|
|
button,
|
|
.touch-target {
|
|
min-height: 48px;
|
|
min-width: 48px;
|
|
touch-action: manipulation;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
input {
|
|
font-size: 16px; /* Previene zoom su iOS */
|
|
}
|
|
|
|
/* ============================================
|
|
Animazioni
|
|
============================================ */
|
|
|
|
@keyframes pulse-glow {
|
|
0%, 100% {
|
|
box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 40px rgba(34, 197, 94, 0.8);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-error {
|
|
0%, 100% {
|
|
box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 40px rgba(239, 68, 68, 0.8);
|
|
}
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 50%, 100% {
|
|
opacity: 1;
|
|
}
|
|
25%, 75% {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
@keyframes slide-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-pulse-glow {
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-pulse-error {
|
|
animation: pulse-error 1s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-blink {
|
|
animation: blink 1.5s step-start infinite;
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slide-up 0.3s ease-out;
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fade-in 0.3s ease-out;
|
|
}
|
|
|
|
/* ============================================
|
|
Utility Classes
|
|
============================================ */
|
|
|
|
.text-shadow {
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|