mirror of
https://github.com/R0m1k3/noteflow.git
synced 2026-10-11 17:29:37 +02:00
Claude
820b0cfeda
## Corrections UX: - Fix coins arrondis en bas des notes étendues (overflow: hidden) - Remplacement prompt() par input inline pour ajout de tâches - Bouton "Ajouter" avec validation au clic ou touche Entrée - Expérience utilisateur fluide sans popups intrusifs ## Système de fichiers complet: ### Backend: - Création table note_files (id, note_id, filename, original_name, file_size, mime_type, created_at) - POST /api/notes/:id/files - Upload fichier (multer, 10MB max) - GET /api/notes/:id/files - Liste fichiers d'une note - GET /api/notes/files/:fileId/download - Téléchargement sécurisé - DELETE /api/notes/files/:fileId - Suppression fichier - Stockage dans public/uploads/files/ - Auto-création dossier si nécessaire ### Frontend: - Bouton "Ajouter un fichier" dans footer des notes - Input hidden fileInput pour sélection - Affichage liste fichiers avec icône, nom, taille - Boutons télécharger/supprimer par fichier - Fonction formatFileSize() pour affichage lisible - Event delegation pour tous les boutons fichiers - Confirmation avant suppression ### Intégration: - GET /api/notes charge maintenant files[] et files_count - renderInlineFiles() génère HTML des fichiers - downloadFile() ouvre download dans nouvel onglet - deleteFile() avec confirmation dialog - Reload automatique après upload/delete - Conservation état étendu après opérations ### CSS moderne: - .note-file-item avec hover effect - .note-file-icon, .note-file-info, .note-file-actions - Buttons download/delete avec transitions - Design cohérent avec reste de l'app - Truncate nom fichier avec ellipsis Tous types de fichiers acceptés (PDF, DOC, ZIP, etc.)
204 lines
9.9 KiB
HTML
204 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NoteFlow - Notes & Tasks</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
|
|
<!-- 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>
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-container">
|
|
<!-- Logo -->
|
|
<div class="logo">
|
|
<svg class="logo-icon" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="8" y="6" width="24" height="28" rx="2" fill="currentColor"/>
|
|
<rect x="10" y="8" width="20" height="24" rx="1" fill="white"/>
|
|
<line x1="13" y1="13" x2="27" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
<line x1="13" y1="18" x2="24" y2="18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
<line x1="13" y1="23" x2="27" y2="23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
<circle cx="15" cy="28" r="2" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
<path d="M 14 28 L 14.8 28.8 L 16.5 27" stroke="currentColor" stroke-width="1.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<span class="logo-text">NoteFlow</span>
|
|
</div>
|
|
|
|
<!-- Search -->
|
|
<div class="search-container">
|
|
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<path d="m21 21-4.35-4.35"></path>
|
|
</svg>
|
|
<input type="text" id="searchInput" placeholder="Rechercher des notes..." class="search-input">
|
|
<button id="searchClear" class="search-clear" style="display: none;">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- User -->
|
|
<div class="user-menu">
|
|
<button class="user-button" id="userInfo">
|
|
<svg class="user-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
<span id="userName">User</span>
|
|
<svg class="dropdown-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
</svg>
|
|
</button>
|
|
<div class="user-dropdown" id="userDropdown">
|
|
<button class="dropdown-item" id="adminBtn" style="display: none;">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path d="M12 1v6m0 6v6m5.657-13.657L14 9l-2.343-2.343M9 14l-3.657 3.657M1 12h6m6 0h6m-13.657 5.657L9 14l2.343 2.343M14 9l3.657-3.657"></path>
|
|
</svg>
|
|
Administration
|
|
</button>
|
|
<button class="dropdown-item" id="logoutBtn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
|
<polyline points="16 17 21 12 16 7"></polyline>
|
|
<line x1="21" y1="12" x2="9" y2="12"></line>
|
|
</svg>
|
|
Déconnexion
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<div class="content-container">
|
|
<!-- Notes Section -->
|
|
<div class="notes-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Notes</h2>
|
|
<div class="section-actions">
|
|
<div class="view-filters">
|
|
<button class="view-filter active" data-view="active">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
|
</svg>
|
|
Actives
|
|
</button>
|
|
<button class="view-filter" data-view="archived">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="21 8 21 21 3 21 3 8"></polyline>
|
|
<rect x="1" y="3" width="22" height="5"></rect>
|
|
<line x1="10" y1="12" x2="14" y2="12"></line>
|
|
</svg>
|
|
Archivées
|
|
</button>
|
|
</div>
|
|
<button class="btn-new-note" id="newNoteBtn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
Nouvelle note
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="notes-grid" id="notesGrid">
|
|
<!-- Notes will be inserted here dynamically -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Todo Box -->
|
|
<div class="todo-box">
|
|
<div class="todo-box-header">
|
|
<h2 class="todo-box-title">Quick Tasks</h2>
|
|
<span class="todo-counter" id="todoCounter">0 tâches</span>
|
|
</div>
|
|
|
|
<div class="todo-input-wrapper">
|
|
<input type="text" id="todoInput" class="todo-input" placeholder="Ajouter une tâche...">
|
|
<button id="addTodoBtn" class="btn-add-todo">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
</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-list" id="todoList">
|
|
<!-- Todos will be inserted here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 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">
|
|
<!-- Users will be inserted here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal de Confirmation -->
|
|
<div class="modal-backdrop" id="confirmModal" style="display: none;">
|
|
<div class="modal-content confirm-modal">
|
|
<div class="confirm-icon" id="confirmIcon">⚠️</div>
|
|
<h3 class="confirm-title" id="confirmTitle">Confirmer l'action</h3>
|
|
<p class="confirm-message" id="confirmMessage">Êtes-vous sûr de vouloir continuer ?</p>
|
|
<div class="confirm-actions">
|
|
<button class="btn-cancel" id="confirmCancel">Annuler</button>
|
|
<button class="btn-confirm" id="confirmOk">Confirmer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden file input -->
|
|
<input type="file" id="imageInput" accept="image/*" style="display: none;">
|
|
<input type="file" id="fileInput" style="display: none;">
|
|
|
|
<!-- JavaScript -->
|
|
<script src="/js/complete-app.js"></script>
|
|
</body>
|
|
</html>
|