From 20f7e080a848ee48e5ba4b3a9343139a38073f5b Mon Sep 17 00:00:00 2001
From: Arthur Puechberty <arthur.puechberty@outlook.com>
Date: Fri, 16 Jan 2026 00:47:11 +0100
Subject: [PATCH] add readme & refonte css

---
 README.md                |  47 +++++++++
 app/public/dashboard.css | 146 +++++++++++++++++-----------
 app/public/guild.css     | 204 ++++++++++++++-------------------------
 app/public/index.css     | 139 +++++++++++++++-----------
 app/public/index.html    |  14 ++-
 5 files changed, 305 insertions(+), 245 deletions(-)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..ba1adda
--- /dev/null
+++ b/README.md
@@ -0,0 +1,47 @@
+# LazyBot - Discord Bot 
+
+Bot Discord configurable via un dashboard web pour gérer :
+- Rôles automatiques (`autorole-newuser` et `autorole-vocal`)
+- Messages de bienvenue et d’au revoir
+- Sélection de salons vocaux à exclure
+- Multi-serveurs avec contrôle admin
+
+---
+
+## Installation
+
+1. Cloner le projet :  
+```bash
+git clone <URL_DU_REPO>
+cd mon-bot-discord
+````
+
+3. Créer un fichier `.env` :
+
+```env
+TOKEN=VOTRE_TOKEN_BOT
+CLIENT_ID=VOTRE_CLIENT_ID
+CLIENT_SECRET=VOTRE_CLIENT_SECRET
+REDIRECT_URI=http://localhost:3000/auth/discord/callback
+SESSION_SECRET=un_secret_aleatoire
+PORT=3000
+DB_PATH=database.sqlite
+```
+
+4. Lancer le serveur :
+
+```bash
+docker compose up -d --build
+```
+
+* Serveur web : `http://localhost:3000`
+* Le bot se connecte automatiquement aux serveurs où il est invité.
+
+---
+
+## Fonctionnalités clés
+
+* Autoroles pour nouveaux membres et salons vocaux
+* Messages de bienvenue et d’au revoir personnalisables
+* Dashboard web pour configurer facilement chaque serveur
+* Pré-sélection automatique options anciennement remplit
\ No newline at end of file
diff --git a/app/public/dashboard.css b/app/public/dashboard.css
index 900ab9e..6a2b6e0 100644
--- a/app/public/dashboard.css
+++ b/app/public/dashboard.css
@@ -1,105 +1,137 @@
-:root {
-  --bg: #0f1115;
-  --bg-card: #161a22;
-  --text: #e6e6eb;
-  --muted: #9aa0b4;
-  --primary: #5865F2; /* couleur Discord */
-  --primary-hover: #4752c4;
-  --border: #23283a;
-}
-
+/* ===== Reset minimal ===== */
 * {
-  box-sizing: border-box;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
-/* BODY */
 body {
-  background-color: var(--bg);
-  color: var(--text);
-  min-height: 100vh;
-  padding: 0 20px;
+  background-color: #1e1f29; /* fond sombre type Discord */
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
 }
 
-/* NAVBAR */
+/* ===== Navigation ===== */
 nav {
+  width: 100%;
+  max-width: 800px;
   display: flex;
-  gap: 20px;
-  padding: 16px 24px;
-  background: var(--bg-card);
-  border-bottom: 1px solid var(--border);
+  justify-content: flex-start;
+  background-color: #2f3136;
+  padding: 10px 20px;
+  border-radius: 10px;
+  margin-bottom: 30px;
 }
 
 nav a {
-  color: var(--muted);
+  color: #ffffff;
   text-decoration: none;
   font-weight: 500;
+  transition: color 0.2s;
 }
 
 nav a:hover {
-  color: var(--text);
+  color: #5865f2;
 }
 
-/* TITRES */
+/* ===== Titres ===== */
 h1, h2 {
   text-align: center;
-  margin-top: 30px;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin-bottom: 15px;
 }
 
 h2 {
-  margin-bottom: 20px;
-  color: var(--muted);
+  font-size: 1.8rem;
+  margin: 25px 0 10px 0;
+  border-bottom: 2px solid #5865f2;
+  display: inline-block;
+  padding-bottom: 5px;
 }
 
-/* AVATAR */
+/* ===== Avatar ===== */
 #avatar {
-  display: block;
-  margin: 20px auto;
-  width: 120px;
-  height: 120px;
+  width: 80px;
+  height: 80px;
   border-radius: 50%;
-  border: 3px solid var(--primary);
+  margin: 10px 0 20px 0;
+  border: 2px solid #5865f2;
 }
 
-/* BOUTON INVITE */
+/* ===== Bouton d'invitation ===== */
 #invite-link {
-  display: block;
-  width: fit-content;
-  margin: 20px auto;
-  padding: 12px 24px;
-  background: var(--primary);
+  display: inline-block;
+  background-color: #5865f2;
   color: white;
+  padding: 10px 20px;
+  border-radius: 8px;
   text-decoration: none;
-  border-radius: 10px;
   font-weight: 600;
-  transition: background 0.2s ease, transform 0.1s ease;
+  margin-bottom: 30px;
+  transition: background 0.2s;
 }
 
 #invite-link:hover {
-  background: var(--primary-hover);
-  transform: translateY(-1px);
+  background-color: #4752c4;
 }
 
-/* LISTE DES GUILDS */
-#guilds-list {
-  max-width: 600px;
-  margin: 0 auto 40px auto;
+/* ===== Liste des guilds ===== */
+ul#guilds-list {
   list-style: none;
+  width: 100%;
+  max-width: 800px;
+  padding: 0;
 }
 
-#guilds-list li {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
+ul#guilds-list li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   padding: 10px 15px;
-  margin: 5px 0;
-  border-radius: 8px;
+  margin-bottom: 10px;
+  border-radius: 10px;
+  background-color: #161a22;
   cursor: pointer;
-  transition: background 0.2s ease;
+  transition: background 0.2s, color 0.2s;
 }
 
-#guilds-list li:hover {
-  background: var(--primary);
+ul#guilds-list li:hover {
+  background-color: #5865f2;
   color: white;
-}
\ No newline at end of file
+}
+
+ul#guilds-list li img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 600px) {
+  body {
+    padding: 10px;
+  }
+
+  nav {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+
+  ul#guilds-list li {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  ul#guilds-list li img {
+    margin-bottom: 5px;
+  }
+}
diff --git a/app/public/guild.css b/app/public/guild.css
index f5f356b..a621926 100644
--- a/app/public/guild.css
+++ b/app/public/guild.css
@@ -1,199 +1,143 @@
-:root {
-  --bg: #0f1115;
-  --bg-card: #161a22;
-  --text: #e6e6eb;
-  --muted: #9aa0b4;
-  --primary: #5865F2;
-  --primary-hover: #4752c4;
-  --border: #23283a;
-  --input-bg: #1f222b;
-  --input-border: #2a2e3e;
-}
-
-/* RESET & BASE */
+/* ===== Reset minimal ===== */
 * {
+  margin: 0;
+  padding: 0;
   box-sizing: border-box;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
 body {
-  background-color: var(--bg);
-  color: var(--text);
-  margin: 0;
+  background-color: #1e1f29; /* fond sombre type Discord */
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 20px;
-  min-height: 100vh;
 }
 
-/* NAVBAR */
+/* ===== Navigation ===== */
 nav {
+  width: 100%;
+  max-width: 900px;
   display: flex;
-  gap: 20px;
-  padding: 16px 24px;
-  background: var(--bg-card);
-  border-bottom: 1px solid var(--border);
-  border-radius: 8px;
+  justify-content: flex-start;
+  background-color: #2f3136;
+  padding: 10px 20px;
+  border-radius: 10px;
   margin-bottom: 30px;
 }
 
 nav a {
-  color: var(--muted);
+  color: #ffffff;
   text-decoration: none;
   font-weight: 500;
+  margin-right: 15px;
+  transition: color 0.2s;
 }
 
 nav a:hover {
-  color: var(--text);
+  color: #5865f2;
 }
 
-/* TITRE PRINCIPAL */
+/* ===== Titres ===== */
 h1 {
   text-align: center;
-  margin-bottom: 30px;
+  font-size: 2.5rem;
+  margin-bottom: 20px;
 }
 
-/* FORMS */
+h2 {
+  font-size: 1.8rem;
+  margin: 25px 0 10px 0;
+  border-bottom: 2px solid #5865f2;
+  display: inline-block;
+  padding-bottom: 5px;
+  text-align: center;
+}
+
+/* ===== Formulaires ===== */
 form {
-  max-width: 700px;
-  margin: 0 auto 40px auto;
+  background-color: #2f3136;
   padding: 20px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
   border-radius: 12px;
+  margin-bottom: 30px;
+  width: 100%;
+  max-width: 700px;
 }
 
 form label {
   display: block;
   margin-bottom: 15px;
   font-weight: 500;
-  color: var(--text);
 }
 
-input[type="checkbox"] {
+form input[type="checkbox"] {
   margin-right: 10px;
 }
 
-select,
-textarea {
+form select,
+form textarea {
   width: 100%;
-  padding: 10px;
+  padding: 8px;
+  border-radius: 6px;
+  border: 1px solid #5865f2;
+  background-color: #161a22;
+  color: #ffffff;
   margin-top: 5px;
-  border: 1px solid var(--input-border);
-  border-radius: 8px;
-  background-color: var(--input-bg);
-  color: var(--text);
   font-size: 1rem;
+}
+
+form textarea {
   resize: vertical;
 }
 
-textarea::placeholder {
-  color: var(--muted);
-}
-
-button[type="submit"] {
-  display: block;
-  padding: 12px 24px;
-  margin-top: 10px;
-  background: var(--primary);
+form button {
+  background-color: #5865f2;
   color: white;
+  padding: 10px 20px;
   border: none;
-  border-radius: 10px;
+  border-radius: 8px;
   font-weight: 600;
   cursor: pointer;
-  transition: background 0.2s ease, transform 0.1s ease;
+  transition: background 0.2s;
 }
 
-button[type="submit"]:hover {
-  background: var(--primary-hover);
-  transform: translateY(-1px);
+form button:hover {
+  background-color: #4752c4;
 }
 
-/* PETIT TEXTE / VARIABLES */
-small {
+form small {
   display: block;
   margin-top: 10px;
-  color: var(--muted);
+  font-size: 0.85rem;
+  color: #b9bbbe;
 }
 
-small ul {
+form small ul {
+  list-style: disc inside;
   margin-top: 5px;
-  padding-left: 20px;
 }
 
-small code {
-  background: var(--input-bg);
-  padding: 2px 5px;
-  border-radius: 4px;
-  font-family: monospace;
-  color: var(--text);
-}
-
-/* STATUS FORM */
 #status-welcome-form,
-#status-goodbye-form {
+#status-goodbye-form,
+#status-autorole-form,
+#status-autorole-vocal-form {
   margin-top: 10px;
   font-weight: 600;
 }
 
-/* RESPONSIVE */
-@media (max-width: 768px) {
+/* ===== Select multiple pour vocal ===== */
+select[multiple] {
+  height: auto;
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 600px) {
+  body {
+    padding: 10px;
+  }
+
   form {
     padding: 15px;
   }
 }
-
-#autorole-vocal-exclude-channel {
-  background-color: #0f1115;
-  color: #e5e7eb;
-
-  border: 1px solid #2a2f3a;
-  border-radius: 8px;
-
-  padding: 8px;
-  font-size: 14px;
-
-  min-width: 240px;
-
-  outline: none;
-}
-
-/* options */
-#autorole-vocal-exclude-channel option {
-  background-color: #0f1115;
-  color: #e5e7eb;
-  padding: 6px;
-}
-
-/* hover */
-#autorole-vocal-exclude-channel option:hover {
-  background-color: #1f2937;
-}
-
-/* sélection */
-#autorole-vocal-exclude-channel option:checked {
-  background-color: #2563eb; /* bleu */
-  color: #ffffff;
-}
-
-/* focus */
-#autorole-vocal-exclude-channel:focus {
-  border-color: #2563eb;
-  box-shadow: 0 0 0 1px #2563eb;
-}
-
-/* scrollbar (Chrome / Edge) */
-#autorole-vocal-exclude-channel::-webkit-scrollbar {
-  width: 8px;
-}
-
-#autorole-vocal-exclude-channel::-webkit-scrollbar-track {
-  background: #0f1115;
-}
-
-#autorole-vocal-exclude-channel::-webkit-scrollbar-thumb {
-  background: #2a2f3a;
-  border-radius: 4px;
-}
-
-#autorole-vocal-exclude-channel::-webkit-scrollbar-thumb:hover {
-  background: #3b4252;
-}
diff --git a/app/public/index.css b/app/public/index.css
index f5339b1..61baa70 100644
--- a/app/public/index.css
+++ b/app/public/index.css
@@ -1,103 +1,130 @@
-:root {
-  --bg: #0f1115;
-  --bg-card: #161a22;
-  --text: #e6e6eb;
-  --muted: #9aa0b4;
-  --primary: #5865F2; /* couleur Discord */
-  --primary-hover: #4752c4;
-  --border: #23283a;
-}
-
+/* ===== Reset minimal ===== */
 * {
+  margin: 0;
+  padding: 0;
   box-sizing: border-box;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
 body {
-  margin: 0;
-  background-color: var(--bg);
-  color: var(--text);
-  min-height: 100vh;
+  background-color: #1e1f29; /* fond sombre type Discord */
+  color: #ffffff;
+  line-height: 1.6;
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* centre horizontalement */
+  justify-content: flex-start; /* commencer depuis le haut */
+  padding: 20px;
 }
 
-/* NAVBAR */
+/* ===== Navigation ===== */
 nav {
   display: flex;
-  gap: 20px;
-  padding: 16px 24px;
-  background: var(--bg-card);
-  border-bottom: 1px solid var(--border);
+  justify-content: space-between;
+  align-items: center;
+  background-color: #2f3136;
+  padding: 10px 20px;
+  border-radius: 10px;
+  margin-bottom: 30px;
+  width: 100%;
+  max-width: 800px; /* limite largeur nav */
 }
 
 nav a {
-  color: var(--muted);
+  color: #ffffff;
   text-decoration: none;
+  margin-right: 15px;
   font-weight: 500;
+  transition: color 0.2s;
 }
 
 nav a:hover {
-  color: var(--text);
+  color: #5865f2;
 }
 
-#profile {
-  margin-left: auto;
+#profil {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
-#avatar {
-  width: 32px;
-  height: 32px;
+#profil img {
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
 }
 
-#username {
-  color: var(--text);
-  font-weight: 500;
-}
-
 #logout {
-  color: var(--muted);
-  text-decoration: none;
+  background-color: #5865f2;
+  color: white;
+  padding: 5px 12px;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  transition: background 0.2s;
 }
 
 #logout:hover {
-  color: var(--text);
+  background-color: #4752c4;
+}
+
+/* ===== Titres ===== */
+h1, h2 {
+  text-align: center; /* centre le texte */
 }
 
-/* CONTENU */
 h1 {
-  margin: 40px 0 10px;
-  text-align: center;
   font-size: 3rem;
+  margin-bottom: 20px;
+  color: #ffffff;
 }
 
 h2 {
-  margin-top: 40px;
-  text-align: center;
+  font-size: 1.8rem;
+  margin: 25px 0 10px 0;
+  color: #ffffff;
+  border-bottom: 2px solid #5865f2;
+  display: inline-block;
+  padding-bottom: 5px;
 }
 
-p {
-  text-align: center;
-  color: var(--muted);
-}
-
-/* BOUTON INVITE */
+/* ===== Bouton d'invitation ===== */
 #invite-link {
-  display: block;
-  width: fit-content;
-  margin: 30px auto;
-  padding: 14px 26px;
-  background: var(--primary);
+  display: inline-block;
+  background-color: #5865f2;
   color: white;
+  padding: 10px 20px;
+  border-radius: 8px;
   text-decoration: none;
-  border-radius: 10px;
   font-weight: 600;
-  transition: background 0.2s ease, transform 0.1s ease;
+  transition: background 0.2s;
+  margin-bottom: 20px;
 }
 
 #invite-link:hover {
-  background: var(--primary-hover);
-  transform: translateY(-1px);
-}
\ No newline at end of file
+  background-color: #4752c4;
+}
+
+/* ===== Listes ===== */
+ul {
+  list-style: disc inside;
+  margin: 10px 0 20px 0;
+  max-width: 700px;
+  text-align: left;
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 600px) {
+  nav {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+
+  #profil {
+    gap: 5px;
+  }
+}
diff --git a/app/public/index.html b/app/public/index.html
index 24bda2f..78ff8e8 100644
--- a/app/public/index.html
+++ b/app/public/index.html
@@ -18,9 +18,19 @@
   </nav>
   <h1>LazyBot</h1>
   <a id="invite-link" href="#">Ajouter à Discord</a>
-
+  <br><br>
   <h2>Ajout du bot</h2>
-  <p>Message de bienvenue et d'au revoir personnalisables.</p>
+  <ul>
+    <li>Ajoutez le bot à votre serveur Discord en cliquant sur le lien ci-dessus.</li>
+    <li>Utilisez le tableau de bord pour configurer les paramètres du bot sur vos serveurs.</li>
+    <li>Profitez des fonctionnalités offertes par LazyBot pour améliorer votre expérience Discord !</li>
+  </ul>
+
+  <h2>Fonctionnalités</h2>
+  <ul>
+    <li>Messages de bienvenue et d'au revoir personnalisables</li>
+    <li>Rôles automatiques pour les nouveaux membres et les utilisateurs en vocal</li>
+    <li>Et bien plus encore...</li>
 </body>
 <script>
   fetch("/invite-bot")