Absolument ! Voici une version mise à jour du README qui intègre la description du projet tel qu'il a été soumis, tout en ajoutant une section détaillant les améliorations que tu as apportées pour créer la version master.
Epitalk est un projet web interactif conçu pour centraliser et simplifier l'accès aux informations concernant Epitech. Développé en quatre jours dans le cadre de la SAS Posture Pro, ce projet intègre trois fonctionnalités clés : une page d'accueil avec un système d'authentification, un chatbot intelligent pour répondre aux questions des étudiants, et un générateur de carte étudiante.
Ce document présente d'abord la version soumise le 2 Octobre 2025 dans la branche submitted-version, puis détaille les améliorations apportées dans la branche master.
- Dawid : Responsable de la page d'accueil, incluant les formulaires d'inscription et de connexion.
- Sofian : Développeur du chatbot interactif et créateur du design system du projet.
- Muhammad : Concepteur du générateur de carte étudiante.
- Interface d'accueil moderne (
Home.html) servant de portail principal vers les autres fonctionnalités de l'application. - Système d'inscription complet avec validation des champs (prénom, email, mot de passe) et stockage des données en
sessionStorage. - Popup de connexion interactif pour une expérience utilisateur fluide, avec validation des identifiants et gestion des erreurs.
- Navigation claire et intuitive vers le chatbot et le générateur de carte étudiante.
- Arbre de décision détaillé (
scripts.js) couvrant plus de 50 sujets sur Epitech et la Web@cadémie. - Interface de chat dynamique (
index.html) où les questions et les réponses sont générées en temps réel pour simuler une conversation. - Navigation par boutons permettant une exploration simple et guidée des différentes thématiques.
- Option de réinitialisation pour permettre à l'utilisateur de revenir au début de la conversation.
- Formulaire de saisie complet (
register.html) pour collecter les informations de l'étudiant. - Génération automatique d'un numéro de carte étudiant unique à 10 chiffres.
- Affichage dynamique des informations sur une maquette de carte étudiante réaliste (
identity.html). - Stockage des données en
sessionStoragepour assurer la communication entre le formulaire et la page d'affichage.
Après la présentation initiale, la branche master a été entièrement restructurée par Sofian pour améliorer la qualité, la cohérence et la maintenabilité du code.
- Structure de Fichiers Unifiée : Le projet a été réorganisé avec une structure de dossiers claire (
/,/pages,/src), séparant la page d'accueil, les sous-pages et les assets. - CSS Centralisé : Un fichier
style.cssunique a été créé à la racine pour héberger le Design System. Les styles spécifiques, comme ceux du chatbot, ont été conservés dans des fichiers séparés mais allégés, tandis que les styles redondants ont été supprimés. - Nommage Cohérent : Les classes CSS (
.buttonBlue,.buttonWhite,.input) et les ID JavaScript ont été standardisés sur toutes les pages pour plus de clarté.
- Application Stricte du Design System : L'ensemble des pages a été retravaillé pour utiliser systématiquement les composants définis dans le
style.cssglobal, garantissant une parfaite cohérence visuelle. - Amélioration de l'Accessibilité : Des balises
<label>ont été ajoutées à tous les champs de formulaires (inscription et génération de carte) pour améliorer l'expérience utilisateur et l'accessibilité. - Navigation Unifiée : La barre de navigation et le footer sont désormais identiques sur toutes les pages, offrant une expérience de navigation plus prévisible.
- Gestion des Assets : Les images, logos et icônes ont été centralisés et réorganisés dans un dossier
/srcstructuré pour une meilleure gestion. - Suppression des Fichiers Redondants : Les fichiers CSS et les assets dupliqués dans les différentes branches ont été supprimés au profit de la structure centralisée.
- Mise à jour des Liens : Tous les chemins de fichiers (CSS, JS, images) ont été mis à jour pour refléter la nouvelle arborescence du projet.
La branche master est ainsi une version plus propre, plus maintenable et plus professionnelle du projet initial, prête pour d'éventuelles évolutions futures.