From 7d7f5484854d70a038884d4402b4444f77675bc7 Mon Sep 17 00:00:00 2001
From: Bouziane Malik <bouzianemalik01@gmail.com>
Date: Sat, 2 May 2026 18:20:22 +0200
Subject: [PATCH] Update README.md

---
 README.md | 176 ++++++++++++++++--------------------------------------
 1 file changed, 52 insertions(+), 124 deletions(-)

diff --git a/README.md b/README.md
index 71a9e0f..a5bde22 100644
--- a/README.md
+++ b/README.md
@@ -1,53 +1,52 @@
-Football Stats API
-Description
-Football Stats API est une application desktop développée avec Electron permettant de gérer des données liées au football.
+<div style="font-family: sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: auto;">
 
-Elle permet d'administrer des joueurs, des équipes, des tournois et de suivre leurs statistiques respectives.
+  <h1 style="color: #2c3e50; border-bottom: 2px solid #2c3e50; padding-bottom: 10px;">⚽ Football Stats API</h1>
 
-Les données sont stockées localement grâce au localStorage, ce qui permet de conserver les informations même après la fermeture de l’application.
+  <section>
+    <h2 style="color: #2980b9;">📝 Description</h2>
+    <p>
+      <strong>Football Stats API</strong> est une application desktop développée avec <strong>Electron</strong> permettant de gérer des données liées au football.  
+      Elle permet d'administrer des joueurs, des équipes, des tournois et leurs statistiques.
+    </p>
+    <p>
+      Les données sont stockées localement via <code>localStorage</code>, garantissant la persistance même après fermeture de l’application.
+    </p>
+  </section>
 
-Technologies utilisées
-HTML / CSS
+  <hr>
 
-JavaScript
+  <section>
+    <h2 style="color: #2980b9;">🛠 Technologies utilisées</h2>
+    <ul>
+      <li>HTML / CSS</li>
+      <li>JavaScript</li>
+      <li>Electron (Desktop)</li>
+      <li>localStorage (Stockage local)</li>
+      <li>JSON (Format de données)</li>
+    </ul>
+  </section>
 
-Electron (Framework pour application desktop)
+  <hr>
 
-localStorage (Stockage local navigateur)
+  <section>
+    <h2 style="color: #2980b9;">🏗 Architecture</h2>
+    <h3>🖥️ Frontend (Juba)</h3>
+    <ul>
+      <li>Affichage et gestion de l'interface utilisateur.</li>
+      <li>Formulaires de saisie pour les joueurs et matchs.</li>
+    </ul>
+    <h3>⚙️ Backend Local (Malik)</h3>
+    <ul>
+      <li>Logique de calcul des statistiques.</li>
+      <li>Gestion du CRUD et synchronisation JSON.</li>
+    </ul>
+  </section>
 
-JSON (Format d'échange de données)
+  <hr>
 
-Architecture du projet
-Frontend
-L’interface utilisateur permet de :
-
-Afficher et filtrer les joueurs.
-
-Gérer les compositions d'équipes.
-
-Créer et configurer des tournois.
-
-Modifier les statistiques en temps réel.
-
-Logique (Backend local)
-La logique est entièrement gérée en JavaScript :
-
-Gestion du CRUD (Create, Read, Update, Delete) pour les entités.
-
-Synchronisation des données avec le stockage.
-
-Mise à jour dynamique de l’interface (Manipulation du DOM).
-
-Gestion des joueurs
-Fonctionnalités
-Ajouter un joueur.
-
-Supprimer un joueur.
-
-Modifier les statistiques individuelles (buts, passes, fautes).
-
-Structure d’un joueur
-JSON
+  <section>
+    <h2 style="color: #2980b9;">👤 Structure d'un Joueur</h2>
+<pre style="background: #f4f4f4; padding: 10px; border-radius: 5px;">
 {
   "id": 0,
   "name": "",
@@ -55,89 +54,18 @@ JSON
   "assists": 0,
   "fouls": 0
 }
-Gestion des équipes
-Fonctionnalités
-Créer une équipe.
+</pre>
+  </section>
 
-Ajouter des joueurs à une équipe.
+  <hr>
 
-Retirer des joueurs d'une équipe.
+  <section>
+    <h2 style="color: #2980b9;">🚀 Lancement</h2>
+    <p><code>npm install</code> &amp;&amp; <code>npm start</code></p>
+  </section>
 
-Supprimer une équipe.
+  <footer style="margin-top: 20px; font-size: 0.9em; color: #7f8c8d;">
+    <p><em>Note : Ce projet simule un backend via JavaScript et localStorage.</em></p>
+  </footer>
 
-Structure d’une équipe
-JSON
-{
-  "id": 0,
-  "name": "",
-  "players": []
-}
-Gestion des tournois
-Fonctionnalités
-Créer un tournoi.
-
-Ajouter des équipes participantes.
-
-Générer et gérer des matchs.
-
-Afficher les résultats et classements.
-
-Structure d’un tournoi
-JSON
-{
-  "id": 0,
-  "name": "",
-  "teams": [],
-  "matches": []
-}
-Structure d’un match
-JSON
-{
-  "team1": 0,
-  "team2": 0,
-  "score1": 0,
-  "score2": 0
-}
-Stockage des données
-Le cycle de vie des données repose sur le localStorage :
-
-Sérialisation : Conversion des objets JS en chaîne JSON.
-
-Sauvegarde : Stockage persistant dans le moteur de recherche intégré.
-
-Récupération : Rechargement automatique des données au lancement de l'application.
-
-Lancement du projet
-Installation
-npm install
-
-Lancement
-npm start
-
-Fonctionnement global
-L’utilisateur interagit avec l’interface.
-
-Les fonctions JavaScript sont exécutées.
-
-Les données sont mises à jour dans des tableaux d'objets.
-
-Les données sont sauvegardées dans le localStorage.
-
-L’interface est mise à jour automatiquement pour refléter les changements.
-
-Répartition du projet
-Frontend : Juba
-
-Backend (Logique JavaScript) : Malik
-
-Remarque
-Le projet ne repose pas sur une API serveur distante. Il simule un backend via la logique JavaScript et le stockage local.
-
-Améliorations possibles
-Intégration d'une base de données réelle (MongoDB / Firebase).
-
-Développement d'une API REST avec Node.js.
-
-Système d'authentification utilisateur.
-
-Statistiques avancées avec des graphiques dynamiques.
\ No newline at end of file
+</div>
\ No newline at end of file