MindUp est une application web moderne et responsive conçue pour aider les utilisateurs à gérer leur stress, leur surcharge mentale et améliorer leur bien-être mental grâce à des outils interactifs et un support expert.
- Feres Adouani
- Hsouna Sellami
- Sana Laridhi
- Mohamed Aziz Hammami
- Abderrahmen Nasri
- Saladin Khalfaoui
Interface d'accueil moderne avec présentation des fonctionnalités principales.
Tableau Kanban interactif pour organiser vos tâches en colonnes (À Faire, En Cours, Terminé).
Gestion de vos tâches quotidiennes avec système de suivi.
Calendrier hebdomadaire pour planifier et organiser votre semaine.
Minuteur Pomodoro pour améliorer votre concentration et productivité.
Assistant conversationnel intelligent pour vous accompagner.
Chat en direct avec des experts certifiés pour obtenir de l'aide professionnelle.
Plateforme de soutien communautaire pour échanger avec d'autres utilisateurs.
Enregistrez et suivez votre humeur quotidienne pour mieux comprendre vos émotions.
Tableaux de bord détaillés pour suivre votre progression et vos statistiques.
- HTML5 - Structure des pages
- CSS3 / SCSS - Styles et design responsive
- JavaScript - Interactivité et logique métier
- Tailwind CSS - Framework CSS utilitaire
- Material Icons - Bibliothèque d'icônes
Projet/
├── index.html # Page d'accueil
├── kanban.html # Tableau Kanban
├── daily-task.html # Tâches quotidiennes
├── agenda.html # Agenda intelligent
├── focusmode.html # Mode Focus (Pomodoro)
├── chat.html # Chat avec l'IA
├── ExpertConvo.html # Discussion avec expert
├── ExpertAccu.html # Page d'accueil expert
├── FriendSup.html # Soutien d'amis
├── mood.html # Suivi de l'humeur
├── progress.html # Page de progression
├── progress_details.html # Détails de progression
├── header.html # En-tête partagé
├── footer.html # Pied de page partagé
├── components.js # Chargement des composants
├── style.css # CSS compilé
├── scss/ # Fichiers SCSS sources
│ ├── style.scss # Fichier principal
│ ├── _variables.scss # Variables
│ ├── _header.scss # Styles header
│ ├── _footer.scss # Styles footer
│ ├── _responsive.scss # Media queries
│ └── pages/ # Styles spécifiques aux pages
├── images/ # Images et ressources
└── Screenshot/ # Captures d'écran de l'application
- Un serveur web local (ex: Live Server, XAMPP, ou serveur Python)
- Navigateur web moderne (Chrome, Firefox, Edge, Safari)
- Clonez ou téléchargez le projet
- Ouvrez le dossier dans votre éditeur de code
- Installez les dépendances (si nécessaire) :
npm install -g sass
Pour compiler les fichiers SCSS en CSS :
sass scss/style.scss style.cssOu en mode watch (recompilation automatique) :
sass --watch scss/style.scss:style.css- Ouvrez
index.htmldans votre navigateur - Ou utilisez un serveur local :
# Avec Python python -m http.server 8000 # Avec Node.js (http-server) npx http-server
L'application est entièrement responsive et s'adapte à tous les types d'écrans :
- Desktop : Navigation complète avec menu déroulant
- Tablette : Layout adapté avec sidebar
- Mobile : Menu hamburger avec sidebar latérale
L'application utilise un design system cohérent basé sur Material Design avec :
- Couleurs principales : Teal, Cyan, Mint
- Typographie : Poppins (titres), Roboto (corps)
- Composants : Boutons, cartes, formulaires stylisés
- Animations : Transitions fluides et effets hover
- Composants réutilisables : Header et Footer chargés dynamiquement
- Navigation responsive : Menu burger sur mobile
- SCSS modulaire : Organisation par composants et pages
- Variables CSS : Système de couleurs et espacements centralisés
- Tous les textes sont en français
- L'application utilise des composants partagés pour maintenir la cohérence
- Les styles sont organisés de manière modulaire pour faciliter la maintenance
Ce projet est développé dans le cadre d'un projet académique.
Développé avec ❤️ par l'équipe MindUp