Création complète de l'application NoteFlow - Notes & Todo List

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

public/index.html

@@ -3,14 +3,150 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Notes & Todos</title>
-    <link rel="stylesheet" href="/css/styles.css">
+    <title>NoteFlow - Notes & Todo</title>
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="/css/reset.css">
+    <link rel="stylesheet" href="/css/variables.css">
+    <link rel="stylesheet" href="/css/layout.css">
+    <link rel="stylesheet" href="/css/components.css">
+    <link rel="stylesheet" href="/css/animations.css">
 </head>
 <body>
-    <div id="root"></div>
-    <script src="/js/auth.js"></script>
-    <script src="/js/notes.js"></script>
-    <script src="/js/admin.js"></script>
-    <script src="/js/app.js"></script>
+    <!-- Header fixe -->
+    <header class="header">
+        <div class="header-content">
+            <div class="header-logo">
+                <h1>📝 NoteFlow</h1>
+            </div>
+
+            <div class="header-search">
+                <input type="text" id="searchInput" placeholder="Rechercher des notes..." class="search-input">
+                <button id="searchClear" class="search-clear" style="display: none;">✕</button>
+            </div>
+
+            <div class="header-user">
+                <div class="user-info" id="userInfo">
+                    <span class="user-avatar">👤</span>
+                    <span class="user-name" id="userName">User</span>
+                    <span class="user-dropdown-icon">▼</span>
+                </div>
+                <div class="user-dropdown" id="userDropdown">
+                    <button class="dropdown-item" id="adminBtn" style="display: none;">⚙️ Administration</button>
+                    <button class="dropdown-item" id="logoutBtn">🚪 Déconnexion</button>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- Container principal -->
+    <div class="main-container">
+        <!-- Zone des notes (70%) -->
+        <main class="notes-area">
+            <div class="notes-grid" id="notesGrid">
+                <!-- Les cards de notes seront insérées ici dynamiquement -->
+            </div>
+
+            <button class="fab" id="newNoteBtn" title="Nouvelle note">+</button>
+        </main>
+
+        <!-- Sidebar Todo (30%) -->
+        <aside class="todo-sidebar">
+            <h2 class="sidebar-title">Quick Tasks</h2>
+
+            <div class="todo-input-container">
+                <input type="text" id="todoInput" class="todo-input" placeholder="Ajouter une tâche...">
+                <button id="addTodoBtn" class="todo-add-btn">+</button>
+            </div>
+
+            <div class="todo-filters">
+                <button class="filter-btn active" data-filter="all">Toutes</button>
+                <button class="filter-btn" data-filter="active">Actives</button>
+                <button class="filter-btn" data-filter="completed">Terminées</button>
+            </div>
+
+            <div class="todo-counter">
+                <span id="todoCounter">0 tâches restantes</span>
+            </div>
+
+            <div class="todo-list" id="todoList">
+                <!-- Les todos seront insérées ici dynamiquement -->
+            </div>
+        </aside>
+    </div>
+
+    <!-- Modal Note -->
+    <div class="modal-backdrop" id="noteModal" style="display: none;">
+        <div class="modal-content note-modal">
+            <div class="modal-header">
+                <button class="modal-close" id="closeModal">✕</button>
+                <button class="modal-delete" id="deleteNote">🗑️</button>
+            </div>
+
+            <input type="text" id="noteTitle" class="note-title-input" placeholder="Titre de la note">
+
+            <div class="note-divider"></div>
+
+            <textarea id="noteContent" class="note-content-textarea" placeholder="Contenu de la note..."></textarea>
+
+            <div id="noteImageContainer" class="note-image-container" style="display: none;">
+                <img id="noteImage" class="note-image" alt="Image de la note">
+                <button class="note-image-remove" id="removeImage">✕</button>
+            </div>
+
+            <div class="note-todos-section">
+                <h3 class="note-section-title">Todos dans cette note</h3>
+                <div id="noteTodosList" class="note-todos-list">
+                    <!-- Les todos de la note seront insérés ici -->
+                </div>
+                <button class="note-add-todo-btn" id="addNoteTodo">+ Ajouter un todo</button>
+            </div>
+
+            <div class="note-divider"></div>
+
+            <div class="modal-actions">
+                <button class="action-btn" id="addImageBtn">📷 Ajouter une image</button>
+                <input type="file" id="imageInput" accept="image/*" style="display: none;">
+            </div>
+
+            <div class="modal-footer">
+                <span id="noteMetadata" class="note-metadata"></span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal Admin -->
+    <div class="modal-backdrop" id="adminModal" style="display: none;">
+        <div class="modal-content admin-modal">
+            <div class="modal-header">
+                <h2>Administration des utilisateurs</h2>
+                <button class="modal-close" id="closeAdminModal">✕</button>
+            </div>
+
+            <div class="admin-actions">
+                <button class="action-btn" id="createUserBtn">+ Créer un utilisateur</button>
+            </div>
+
+            <div class="users-table-container">
+                <table class="users-table" id="usersTable">
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>Nom d'utilisateur</th>
+                            <th>Admin</th>
+                            <th>Créé le</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="usersTableBody">
+                        <!-- Les utilisateurs seront insérés ici -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <!-- JavaScript -->
+    <script src="/js/complete-app.js"></script>
 </body>
 </html>