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
130 lines
2.3 KiB
CSS
130 lines
2.3 KiB
CSS
/* Layout principal de l'application */
|
|
|
|
body {
|
|
font-family: var(--font-family);
|
|
background: var(--color-background);
|
|
color: var(--color-text-primary);
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: var(--header-height);
|
|
background: var(--color-card);
|
|
border-bottom: 1px solid var(--color-border);
|
|
z-index: 100;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.header-content {
|
|
height: 100%;
|
|
max-width: 100%;
|
|
padding: 0 var(--spacing-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.header-logo h1 {
|
|
font-size: var(--font-size-xl);
|
|
font-weight: bold;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.header-search {
|
|
flex: 1;
|
|
max-width: 600px;
|
|
position: relative;
|
|
}
|
|
|
|
.header-user {
|
|
position: relative;
|
|
}
|
|
|
|
/* Main container */
|
|
.main-container {
|
|
display: flex;
|
|
margin-top: var(--header-height);
|
|
min-height: calc(100vh - var(--header-height));
|
|
}
|
|
|
|
/* Notes area */
|
|
.notes-area {
|
|
flex: 1;
|
|
padding: var(--spacing-xl);
|
|
overflow-y: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.notes-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(var(--note-card-width), 1fr));
|
|
gap: var(--spacing-lg);
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Todo sidebar */
|
|
.todo-sidebar {
|
|
position: sticky;
|
|
top: var(--header-height);
|
|
right: 0;
|
|
width: var(--sidebar-width);
|
|
height: calc(100vh - var(--header-height));
|
|
background: var(--color-sidebar);
|
|
border-left: 1px solid var(--color-border);
|
|
padding: var(--spacing-lg);
|
|
overflow-y: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1024px) {
|
|
.notes-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
}
|
|
|
|
.todo-sidebar {
|
|
width: 320px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.main-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header-content {
|
|
padding: 0 var(--spacing-md);
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.header-logo h1 {
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
.header-search {
|
|
max-width: 400px;
|
|
}
|
|
|
|
.notes-area {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.notes-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.todo-sidebar {
|
|
position: static;
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 400px;
|
|
}
|
|
}
|