mirror of
https://github.com/R0m1k3/noteflow.git
synced 2026-10-11 17:29:37 +02:00
Claude
7a716dc17a
Application web Dockerisée moderne avec: - Backend Node.js + Express + SQLite - Frontend HTML/CSS/JavaScript vanilla - Authentification JWT + bcrypt - Gestion des notes avec images et todos intégrés - Sidebar todos globaux avec filtres - Interface utilisateur fluide avec animations CSS - Administration des utilisateurs - Sécurité production-ready (Helmet, rate limiting, validation) - Configuration Docker complète - Documentation README détaillée Stack technique: - Node.js 20 Alpine - SQLite3 avec indexes optimisés - Multer pour upload d'images - Winston pour logging - Express-validator pour validation - Architecture modulaire (routes, middleware, config) Fonctionnalités: - Notes: CRUD complet, recherche, images, todos intégrés - Todos globaux: création, toggle, filtres, suppression - Auth: JWT 24h, bcrypt 12 rounds - Admin: gestion utilisateurs complète - UI: masonry grid, modal animations, responsive Configuration Docker: - Healthcheck intégré - Volumes persistants pour data et uploads - Network nginx_default pour reverse proxy - Variables d'environnement configurables Prêt pour déploiement avec: docker-compose up -d
54 lines
1.3 KiB
CSS
54 lines
1.3 KiB
CSS
/* Variables CSS globales */
|
|
|
|
:root {
|
|
/* Couleurs principales */
|
|
--color-background: #FAFBFC;
|
|
--color-card: #FFFFFF;
|
|
--color-sidebar: #F8F9FA;
|
|
--color-accent: #3B82F6;
|
|
--color-accent-hover: #2563EB;
|
|
--color-text-primary: #1F2937;
|
|
--color-text-secondary: #6B7280;
|
|
--color-border: #E5E7EB;
|
|
--color-success: #10B981;
|
|
--color-danger: #EF4444;
|
|
|
|
/* Typographie */
|
|
--font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
--font-size-xs: 12px;
|
|
--font-size-sm: 14px;
|
|
--font-size-base: 16px;
|
|
--font-size-lg: 18px;
|
|
--font-size-xl: 24px;
|
|
--font-size-2xl: 32px;
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 16px;
|
|
--spacing-lg: 24px;
|
|
--spacing-xl: 32px;
|
|
|
|
/* Border radius */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
|
|
/* Transitions */
|
|
--transition-fast: 0.15s ease;
|
|
--transition-base: 0.2s ease;
|
|
--transition-slow: 0.3s ease;
|
|
|
|
/* Dimensions */
|
|
--header-height: 60px;
|
|
--sidebar-width: 400px;
|
|
--note-card-width: 350px;
|
|
}
|