mirror of
https://github.com/R0m1k3/noteflow.git
synced 2026-10-11 17:29:37 +02:00
Claude
6599348878
Les images dans les notes sont maintenant des miniatures qui s'agrandissent dans un modal en plein écran au clic. CSS - Miniatures: - .note-card-image: 140px hauteur (cartes pliées) - .note-image: 200px max-height (notes expandues, réduit de 300px) - Cursor pointer + hover effect (scale 1.02, opacity 0.9) - Indication visuelle qu'on peut cliquer Modal Image: - Fond noir semi-transparent (rgba(0,0,0,0.9)) - Image centrée, max 90vw x 90vh - Bouton fermeture (top-right, backdrop-filter) - z-index 400 (au-dessus de tout) - Animation fadeIn 0.2s Interactions: - Clic sur miniature → Modal avec image en taille réelle - Clic sur fond noir → Ferme le modal - Bouton X → Ferme le modal - Touche Escape → Ferme le modal - Délégation d'événements pour gérer les images après re-render - Désactive scroll pendant que modal ouvert JavaScript: - openImageModal(src): Ouvre modal + désactive scroll - closeImageModal(): Ferme modal + réactive scroll - Event listeners: click, escape, backdrop Bénéfices utilisateur: ✓ Notes plus compactes (images miniatures) ✓ Images consultables en haute qualité (modal) ✓ Navigation intuitive (clic pour agrandir) ✓ Fermeture rapide (X, Escape, backdrop) ✓ Pas de scroll accidentel pendant consultation Files: - public/css/components.css: Miniatures + hover effects - public/css/skeleton.css: Styles modal image - public/index.html: HTML modal image - public/js/complete-app.js: Gestion modal + event listeners