Créez un tableau de bord personnel personnalisé dans un seul fichier HTML

Voici la traduction en français : Construire un tableau de bord personnel complet et fonctionnel dans un seul fichier HTML en utilisant HTML, CSS et JavaScript. CE QU'IL FAIT Un tableau de bord personnel qui vous montre tout ce qui compte, les tâches, le calendrier, les notes et les indicateurs clés, le tout sur une page propre et élégante. Considérez-le comme votre centre de commandement pour la journée. FONCTIONNALITÉS PRINCIPALES 1. Aperçu du tableau de bord (Vue principale) - Une vue propre et instantanée des tâches du jour, des événements à venir et des notes récentes - Un message d'accueil qui change selon l'heure de la journée (Bonjour / Bon après-midi / Bonsoir) - Des boutons d'ajout rapide pour les tâches, les événements et les notes - Une mise en page de type widgets avec des cartes réorganisables par glisser-déposer 2. Widget Tâches - Afficher les tâches du jour avec des cases à cocher pour marquer comme terminées - Regrouper les tâches par : Aujourd'hui, Cette semaine, Plus tard - Ajouter de nouvelles tâches avec un titre, une date d'échéance et une priorité (Haute/Moyenne/Basse) - Modifier ou supprimer des tâches - Indicateur visuel pour les tâches en retard 3. Widget Calendrier - Mini calendrier affichant le mois en cours - Mettre en évidence les dates avec des événements ou des tâches - Cliquer sur une date pour voir ce qui est planifié - Ajouter des événements avec un titre, une heure et une catégorie (Travail, Personnel, Anniversaire, Réunion) - Liste des événements à venir sous le calendrier 4. Widget Notes - Capture rapide pour les pensées et les idées - Afficher les notes récentes (5 dernières) avec horodatage - Cliquer sur une note pour la voir ou la modifier - Barre de recherche pour trouver des notes passées - Édition de texte enrichi : gras, italique, puces 5. Widget Indicateurs - Afficher 3 à 5 chiffres clés qui comptent pour vous (par exemple, tâches terminées aujourd'hui, jours avant une échéance, nombre total de notes) - Personnalisable, l'utilisateur peut choisir quels indicateurs afficher - Barres de progression visuelles simples ou compteurs 6. Personnalisation - Bascule mode clair / mode sombre - Choisir les couleurs primaires et d'accentuation à partir d'un sélecteur de couleurs - Afficher/masquer les widgets que vous n'utilisez pas - Réorganiser les widgets par glisser-déposer 7. Persistance des données - Toutes les données enregistrées dans localStorage - Les données persistent entre les sessions du navigateur - Exporter les données comme sauvegarde JSON - Importer des données à partir d'un fichier JSON MISE EN PAGE - Barre latérale gauche : Navigation (Tableau de bord, Tâches, Calendrier, Notes, Paramètres) avec icônes - Zone principale : La vue du tableau de bord avec les widgets - Barre supérieure : Nom de l'application, heure, date, icône de profil, bascule sombre/clair EXIGENCES TECHNIQUES - Un seul fichier HTML avec CSS et JavaScript intégrés - Responsive : fonctionne sur ordinateur de bureau et tablette - Animations et transitions fluides - Esthétique propre, moderne et minimaliste - Aucune dépendance externe (utiliser du JS vanilla) Construire un tableau de bord soigné et fonctionnel que quelqu'un voudrait réellement ouvrir chaque matin.