feat: Enhance goodbye and welcome forms with new message types and image options

- Added support for different message types (text, embed, both) in goodbye and welcome forms.
- Implemented embed options including title, description, color, thumbnail, and footer for both forms.
- Introduced image options with gradient selection, title, subtitle, and member count display for goodbye and welcome messages.
- Updated API routes to handle new configuration parameters for saving and retrieving goodbye and welcome settings.
- Created a new function to generate welcome images with customizable gradients and text.

app/public/guild.css

@@ -1528,3 +1528,81 @@ body {
   padding: var(--spacing-lg);
 }
 
+/* ===== Gradient Picker ===== */
+.gradient-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-xs);
+}
+
+.gradient-option {
+  width: 50px;
+  height: 50px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  border: 3px solid transparent;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.gradient-option:hover {
+  transform: scale(1.1);
+  box-shadow: var(--shadow-md);
+}
+
+.gradient-option.selected {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px var(--primary), var(--shadow-md);
+}
+
+.gradient-option.selected::after {
+  content: '✓';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+/* ===== Image Preview ===== */
+.image-preview {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  min-height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.image-preview img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-sm);
+}
+
+.preview-placeholder {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* ===== Color Input ===== */
+.form-color {
+  height: 45px;
+  padding: 5px;
+  cursor: pointer;
+}
+
+.form-color::-webkit-color-swatch-wrapper {
+  padding: 2px;
+}
+
+.form-color::-webkit-color-swatch {
+  border: none;
+  border-radius: var(--radius-sm);
+}

app/public/guild.html

@@ -24,8 +24,9 @@
       </div>
       
       <nav class="sidebar-nav">
+        <!-- Accueil & Membres -->
         <div class="nav-section">
-          <div class="nav-section-title">Configuration</div>
+          <div class="nav-section-title">👥 Membres</div>
           <a class="nav-item active" data-section="welcome">
             <span class="nav-item-icon">👋</span>
             Bienvenue
@@ -38,10 +39,15 @@
             <span class="nav-item-icon">🎭</span>
             Rôles automatiques
           </a>
+          <a class="nav-item" data-section="rolepanels">
+            <span class="nav-item-icon">🏷️</span>
+            Rôles par boutons
+          </a>
         </div>
         
+        <!-- Progression -->
         <div class="nav-section">
-          <div class="nav-section-title">Systèmes</div>
+          <div class="nav-section-title">🎮 Progression</div>
           <a class="nav-item" data-section="levels">
             <span class="nav-item-icon">📈</span>
             Niveaux
@@ -50,6 +56,11 @@
             <span class="nav-item-icon">💰</span>
             Économie
           </a>
+        </div>
+
+        <!-- Fonctionnalités -->
+        <div class="nav-section">
+          <div class="nav-section-title">⚡ Fonctionnalités</div>
           <a class="nav-item" data-section="privateroom">
             <span class="nav-item-icon">🔊</span>
             Salons temporaires
@@ -62,29 +73,40 @@
             <span class="nav-item-icon">📊</span>
             Salons de stats
           </a>
-          <a class="nav-item" data-section="scheduledmessages">
-            <span class="nav-item-icon">⏰</span>
-            Messages programmés
-          </a>
+        </div>
+
+        <!-- Communication -->
+        <div class="nav-section">
+          <div class="nav-section-title">💬 Communication</div>
           <a class="nav-item" data-section="sendmessage">
             <span class="nav-item-icon">✉️</span>
             Envoyer un message
           </a>
-          <a class="nav-item" data-section="botappearance">
-            <span class="nav-item-icon">🤖</span>
-            Apparence du bot
+          <a class="nav-item" data-section="scheduledmessages">
+            <span class="nav-item-icon">⏰</span>
+            Messages programmés
+          </a>
+        </div>
+
+        <!-- Modération & Sécurité -->
+        <div class="nav-section">
+          <div class="nav-section-title">🛡️ Sécurité</div>
+          <a class="nav-item" data-section="antiraid">
+            <span class="nav-item-icon">⚔️</span>
+            Anti-Raid
           </a>
           <a class="nav-item" data-section="logs">
             <span class="nav-item-icon">📜</span>
             Logs
           </a>
-          <a class="nav-item" data-section="antiraid">
-            <span class="nav-item-icon">🛡️</span>
-            Anti-Raid
-          </a>
-          <a class="nav-item" data-section="rolepanels">
-            <span class="nav-item-icon">🎭</span>
-            Rôles par boutons
+        </div>
+
+        <!-- Personnalisation -->
+        <div class="nav-section">
+          <div class="nav-section-title">🎨 Personnalisation</div>
+          <a class="nav-item" data-section="botappearance">
+            <span class="nav-item-icon">🤖</span>
+            Apparence du bot
           </a>
         </div>
       </nav>
@@ -132,10 +154,123 @@
                 <label class="form-label">Canal de bienvenue</label>
                 <select class="form-select" id="welcome-channel"></select>
               </div>
-              
+
+              <!-- Type de message -->
               <div class="form-group">
-                <label class="form-label">Message</label>
-                <textarea class="form-textarea" id="welcome-message" rows="4" placeholder="Ex: Bienvenue {user} sur {server} 🎉"></textarea>
+                <label class="form-label">Type de message</label>
+                <select class="form-select" id="welcome-message-type">
+                  <option value="text">📝 Texte simple</option>
+                  <option value="embed" selected>📦 Embed</option>
+                  <option value="both">📝📦 Texte + Embed</option>
+                </select>
+              </div>
+
+              <!-- Message texte -->
+              <div class="form-group" id="welcome-text-group">
+                <label class="form-label">Message texte</label>
+                <textarea class="form-textarea" id="welcome-message" rows="3" placeholder="Ex: Bienvenue {mention} sur {server} 🎉"></textarea>
+              </div>
+
+              <!-- Configuration Embed -->
+              <div class="sub-section" id="welcome-embed-section">
+                <h4 class="sub-section-title">📦 Configuration de l'embed</h4>
+                
+                <div class="form-row">
+                  <div class="form-group">
+                    <label class="form-label">Titre de l'embed</label>
+                    <input type="text" class="form-input" id="welcome-embed-title" placeholder="👋 Bienvenue !">
+                  </div>
+                  <div class="form-group">
+                    <label class="form-label">Couleur</label>
+                    <input type="color" class="form-input form-color" id="welcome-embed-color" value="#57F287">
+                  </div>
+                </div>
+
+                <div class="form-group">
+                  <label class="form-label">Description de l'embed</label>
+                  <textarea class="form-textarea" id="welcome-embed-description" rows="3" placeholder="Bienvenue {mention} sur **{server}** ! 🎉"></textarea>
+                </div>
+
+                <div class="form-group">
+                  <label class="form-label">Footer (pied de page)</label>
+                  <input type="text" class="form-input" id="welcome-embed-footer" placeholder="Laissez vide pour le nom du serveur">
+                </div>
+
+                <div class="inline-toggle">
+                  <div class="inline-toggle-label">
+                    <span class="inline-toggle-title">Afficher l'avatar</span>
+                    <span class="inline-toggle-desc">Afficher l'avatar du membre dans l'embed</span>
+                  </div>
+                  <label class="toggle-switch">
+                    <input type="checkbox" id="welcome-embed-thumbnail" checked>
+                    <span class="toggle-slider"></span>
+                  </label>
+                </div>
+              </div>
+
+              <!-- Image générée -->
+              <div class="sub-section">
+                <h4 class="sub-section-title">🖼️ Image de bienvenue</h4>
+                
+                <div class="inline-toggle">
+                  <div class="inline-toggle-label">
+                    <span class="inline-toggle-title">Générer une image</span>
+                    <span class="inline-toggle-desc">Créer une belle image personnalisée</span>
+                  </div>
+                  <label class="toggle-switch">
+                    <input type="checkbox" id="welcome-image-enabled">
+                    <span class="toggle-slider"></span>
+                  </label>
+                </div>
+
+                <div id="welcome-image-options" style="display: none;">
+                  <div class="form-group">
+                    <label class="form-label">Style de dégradé</label>
+                    <div class="gradient-picker" id="welcome-gradient-picker">
+                      <div class="gradient-option selected" data-gradient="purple" style="background: linear-gradient(135deg, #667eea, #764ba2);" title="Violet"></div>
+                      <div class="gradient-option" data-gradient="blue" style="background: linear-gradient(135deg, #4facfe, #00f2fe);" title="Bleu"></div>
+                      <div class="gradient-option" data-gradient="green" style="background: linear-gradient(135deg, #11998e, #38ef7d);" title="Vert"></div>
+                      <div class="gradient-option" data-gradient="red" style="background: linear-gradient(135deg, #ff416c, #ff4b2b);" title="Rouge"></div>
+                      <div class="gradient-option" data-gradient="orange" style="background: linear-gradient(135deg, #f12711, #f5af19);" title="Orange"></div>
+                      <div class="gradient-option" data-gradient="pink" style="background: linear-gradient(135deg, #ee0979, #ff6a00);" title="Rose"></div>
+                      <div class="gradient-option" data-gradient="dark" style="background: linear-gradient(135deg, #232526, #414345);" title="Sombre"></div>
+                      <div class="gradient-option" data-gradient="sunset" style="background: linear-gradient(135deg, #fa709a, #fee140);" title="Coucher de soleil"></div>
+                      <div class="gradient-option" data-gradient="ocean" style="background: linear-gradient(135deg, #2193b0, #6dd5ed);" title="Océan"></div>
+                      <div class="gradient-option" data-gradient="forest" style="background: linear-gradient(135deg, #134e5e, #71b280);" title="Forêt"></div>
+                    </div>
+                    <input type="hidden" id="welcome-image-gradient" value="purple">
+                  </div>
+
+                  <div class="form-row">
+                    <div class="form-group">
+                      <label class="form-label">Titre personnalisé</label>
+                      <input type="text" class="form-input" id="welcome-image-title" placeholder="Bienvenue">
+                    </div>
+                    <div class="form-group">
+                      <label class="form-label">Sous-titre personnalisé</label>
+                      <input type="text" class="form-input" id="welcome-image-subtitle" placeholder="sur le serveur Discord">
+                    </div>
+                  </div>
+
+                  <div class="inline-toggle">
+                    <div class="inline-toggle-label">
+                      <span class="inline-toggle-title">Afficher le nombre de membres</span>
+                      <span class="inline-toggle-desc">Affiche "Tu es le Xème membre !"</span>
+                    </div>
+                    <label class="toggle-switch">
+                      <input type="checkbox" id="welcome-image-member-count" checked>
+                      <span class="toggle-slider"></span>
+                    </label>
+                  </div>
+
+                  <!-- Aperçu de l'image -->
+                  <div class="form-group">
+                    <label class="form-label">👁️ Aperçu de l'image</label>
+                    <div class="image-preview" id="welcome-image-preview">
+                      <div class="preview-placeholder">L'aperçu s'affichera ici</div>
+                    </div>
+                  </div>
+                </div>
               </div>
               
               <div class="variables-box">
@@ -144,6 +279,7 @@
                   <span class="variable-tag"><code>{user}</code> <span>→ nom</span></span>
                   <span class="variable-tag"><code>{mention}</code> <span>→ mention</span></span>
                   <span class="variable-tag"><code>{server}</code> <span>→ serveur</span></span>
+                  <span class="variable-tag"><code>{membercount}</code> <span>→ nombre de membres</span></span>
                 </div>
               </div>
             </div>
@@ -172,10 +308,123 @@
                 <label class="form-label">Canal d'au revoir</label>
                 <select class="form-select" id="goodbye-channel"></select>
               </div>
-              
+
+              <!-- Type de message -->
               <div class="form-group">
-                <label class="form-label">Message</label>
-                <textarea class="form-textarea" id="goodbye-message" rows="4" placeholder="Ex: Au revoir {user}, on espère te revoir sur {server} 👋"></textarea>
+                <label class="form-label">Type de message</label>
+                <select class="form-select" id="goodbye-message-type">
+                  <option value="text">📝 Texte simple</option>
+                  <option value="embed" selected>📦 Embed</option>
+                  <option value="both">📝📦 Texte + Embed</option>
+                </select>
+              </div>
+
+              <!-- Message texte -->
+              <div class="form-group" id="goodbye-text-group">
+                <label class="form-label">Message texte</label>
+                <textarea class="form-textarea" id="goodbye-message" rows="3" placeholder="Ex: Au revoir {user}, on espère te revoir sur {server} 👋"></textarea>
+              </div>
+
+              <!-- Configuration Embed -->
+              <div class="sub-section" id="goodbye-embed-section">
+                <h4 class="sub-section-title">📦 Configuration de l'embed</h4>
+                
+                <div class="form-row">
+                  <div class="form-group">
+                    <label class="form-label">Titre de l'embed</label>
+                    <input type="text" class="form-input" id="goodbye-embed-title" placeholder="👋 Au revoir...">
+                  </div>
+                  <div class="form-group">
+                    <label class="form-label">Couleur</label>
+                    <input type="color" class="form-input form-color" id="goodbye-embed-color" value="#ED4245">
+                  </div>
+                </div>
+
+                <div class="form-group">
+                  <label class="form-label">Description de l'embed</label>
+                  <textarea class="form-textarea" id="goodbye-embed-description" rows="3" placeholder="**{user}** a quitté le serveur. À bientôt ! 👋"></textarea>
+                </div>
+
+                <div class="form-group">
+                  <label class="form-label">Footer (pied de page)</label>
+                  <input type="text" class="form-input" id="goodbye-embed-footer" placeholder="Laissez vide pour le nom du serveur">
+                </div>
+
+                <div class="inline-toggle">
+                  <div class="inline-toggle-label">
+                    <span class="inline-toggle-title">Afficher l'avatar</span>
+                    <span class="inline-toggle-desc">Afficher l'avatar du membre dans l'embed</span>
+                  </div>
+                  <label class="toggle-switch">
+                    <input type="checkbox" id="goodbye-embed-thumbnail" checked>
+                    <span class="toggle-slider"></span>
+                  </label>
+                </div>
+              </div>
+
+              <!-- Image générée -->
+              <div class="sub-section">
+                <h4 class="sub-section-title">🖼️ Image d'au revoir</h4>
+                
+                <div class="inline-toggle">
+                  <div class="inline-toggle-label">
+                    <span class="inline-toggle-title">Générer une image</span>
+                    <span class="inline-toggle-desc">Créer une belle image personnalisée</span>
+                  </div>
+                  <label class="toggle-switch">
+                    <input type="checkbox" id="goodbye-image-enabled">
+                    <span class="toggle-slider"></span>
+                  </label>
+                </div>
+
+                <div id="goodbye-image-options" style="display: none;">
+                  <div class="form-group">
+                    <label class="form-label">Style de dégradé</label>
+                    <div class="gradient-picker" id="goodbye-gradient-picker">
+                      <div class="gradient-option" data-gradient="purple" style="background: linear-gradient(135deg, #667eea, #764ba2);" title="Violet"></div>
+                      <div class="gradient-option" data-gradient="blue" style="background: linear-gradient(135deg, #4facfe, #00f2fe);" title="Bleu"></div>
+                      <div class="gradient-option" data-gradient="green" style="background: linear-gradient(135deg, #11998e, #38ef7d);" title="Vert"></div>
+                      <div class="gradient-option selected" data-gradient="red" style="background: linear-gradient(135deg, #ff416c, #ff4b2b);" title="Rouge"></div>
+                      <div class="gradient-option" data-gradient="orange" style="background: linear-gradient(135deg, #f12711, #f5af19);" title="Orange"></div>
+                      <div class="gradient-option" data-gradient="pink" style="background: linear-gradient(135deg, #ee0979, #ff6a00);" title="Rose"></div>
+                      <div class="gradient-option" data-gradient="dark" style="background: linear-gradient(135deg, #232526, #414345);" title="Sombre"></div>
+                      <div class="gradient-option" data-gradient="sunset" style="background: linear-gradient(135deg, #fa709a, #fee140);" title="Coucher de soleil"></div>
+                      <div class="gradient-option" data-gradient="ocean" style="background: linear-gradient(135deg, #2193b0, #6dd5ed);" title="Océan"></div>
+                      <div class="gradient-option" data-gradient="forest" style="background: linear-gradient(135deg, #134e5e, #71b280);" title="Forêt"></div>
+                    </div>
+                    <input type="hidden" id="goodbye-image-gradient" value="red">
+                  </div>
+
+                  <div class="form-row">
+                    <div class="form-group">
+                      <label class="form-label">Titre personnalisé</label>
+                      <input type="text" class="form-input" id="goodbye-image-title" placeholder="Au revoir">
+                    </div>
+                    <div class="form-group">
+                      <label class="form-label">Sous-titre personnalisé</label>
+                      <input type="text" class="form-input" id="goodbye-image-subtitle" placeholder="a quitté le serveur">
+                    </div>
+                  </div>
+
+                  <div class="inline-toggle">
+                    <div class="inline-toggle-label">
+                      <span class="inline-toggle-title">Afficher le nombre de membres</span>
+                      <span class="inline-toggle-desc">Affiche "Il reste X membres"</span>
+                    </div>
+                    <label class="toggle-switch">
+                      <input type="checkbox" id="goodbye-image-member-count" checked>
+                      <span class="toggle-slider"></span>
+                    </label>
+                  </div>
+
+                  <!-- Aperçu de l'image -->
+                  <div class="form-group">
+                    <label class="form-label">👁️ Aperçu de l'image</label>
+                    <div class="image-preview" id="goodbye-image-preview">
+                      <div class="preview-placeholder">L'aperçu s'affichera ici</div>
+                    </div>
+                  </div>
+                </div>
               </div>
               
               <div class="variables-box">
@@ -183,6 +432,7 @@
                 <div class="variables-list">
                   <span class="variable-tag"><code>{user}</code> <span>→ nom</span></span>
                   <span class="variable-tag"><code>{server}</code> <span>→ serveur</span></span>
+                  <span class="variable-tag"><code>{membercount}</code> <span>→ nombre de membres</span></span>
                 </div>
               </div>
             </div>

app/public/guild/goodbyeForm.js

@@ -1,18 +1,158 @@
+// ========== GOODBYE FORM ==========
 const goodbyeEnabled = document.getElementById("goodbye-enabled");
 const goodbyeChannel = document.getElementById("goodbye-channel");
 const goodbyeMessage = document.getElementById("goodbye-message");
+const goodbyeMessageType = document.getElementById("goodbye-message-type");
+const goodbyeEmbedTitle = document.getElementById("goodbye-embed-title");
+const goodbyeEmbedDescription = document.getElementById("goodbye-embed-description");
+const goodbyeEmbedColor = document.getElementById("goodbye-embed-color");
+const goodbyeEmbedThumbnail = document.getElementById("goodbye-embed-thumbnail");
+const goodbyeEmbedFooter = document.getElementById("goodbye-embed-footer");
+const goodbyeImageEnabled = document.getElementById("goodbye-image-enabled");
+const goodbyeImageGradient = document.getElementById("goodbye-image-gradient");
+const goodbyeImageTitle = document.getElementById("goodbye-image-title");
+const goodbyeImageSubtitle = document.getElementById("goodbye-image-subtitle");
+const goodbyeImageMemberCount = document.getElementById("goodbye-image-member-count");
 const saveGoodbye = document.getElementById("save-goodbye");
 
-// Message par défaut
-const defaultGoodbyeMessage = "Au revoir **{user}**, on espère te revoir sur **{server}** ! 👋";
+const goodbyeTextGroup = document.getElementById("goodbye-text-group");
+const goodbyeEmbedSection = document.getElementById("goodbye-embed-section");
+const goodbyeImageOptions = document.getElementById("goodbye-image-options");
+const goodbyeGradientPicker = document.getElementById("goodbye-gradient-picker");
+const goodbyeImagePreview = document.getElementById("goodbye-image-preview");
+
+// Afficher/masquer les sections selon le type de message
+function updateGoodbyeVisibility() {
+  const type = goodbyeMessageType.value;
+  
+  // Text group visible si text ou both
+  goodbyeTextGroup.style.display = (type === 'text' || type === 'both') ? 'block' : 'none';
+  
+  // Embed section visible si embed ou both
+  goodbyeEmbedSection.style.display = (type === 'embed' || type === 'both') ? 'block' : 'none';
+}
+
+// Gestion du gradient picker
+if (goodbyeGradientPicker) {
+  goodbyeGradientPicker.addEventListener('click', (e) => {
+    const option = e.target.closest('.gradient-option');
+    if (!option) return;
+    
+    goodbyeGradientPicker.querySelectorAll('.gradient-option').forEach(opt => opt.classList.remove('selected'));
+    option.classList.add('selected');
+    goodbyeImageGradient.value = option.dataset.gradient;
+    updateGoodbyePreview();
+  });
+}
+
+// Afficher/masquer les options d'image
+if (goodbyeImageEnabled) {
+  goodbyeImageEnabled.addEventListener('change', () => {
+    goodbyeImageOptions.style.display = goodbyeImageEnabled.checked ? 'block' : 'none';
+    if (goodbyeImageEnabled.checked) {
+      updateGoodbyePreview();
+    }
+  });
+}
+
+// Mise à jour de l'aperçu de l'image
+function updateGoodbyePreview() {
+  if (!goodbyeImagePreview) return;
+  
+  const gradient = goodbyeImageGradient.value || 'red';
+  const title = goodbyeImageTitle.value || 'Au revoir';
+  const subtitle = goodbyeImageSubtitle.value || 'a quitté le serveur';
+  
+  // Utiliser les mêmes fonctions que welcome (définies globalement)
+  const colors = typeof getGradientColors === 'function' ? getGradientColors(gradient) : ['#ff416c', '#ff4b2b'];
+  
+  // Créer un aperçu simplifié avec CSS
+  goodbyeImagePreview.innerHTML = `
+    <div class="preview-card" style="
+      width: 100%;
+      max-width: 500px;
+      height: 150px;
+      border-radius: 12px;
+      background: linear-gradient(135deg, ${colors[0]}, ${colors[1]});
+      display: flex;
+      align-items: center;
+      padding: 20px;
+      gap: 20px;
+      color: white;
+      font-family: Arial, sans-serif;
+    ">
+      <div style="
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        background: rgba(255,255,255,0.3);
+        border: 3px solid white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+      ">👤</div>
+      <div style="flex: 1;">
+        <div style="font-size: 24px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">${escapeHtmlGoodbye(title)}</div>
+        <div style="font-size: 14px; opacity: 0.9;">${escapeHtmlGoodbye(subtitle)}</div>
+        <div style="font-size: 16px; font-style: italic; margin-top: 8px;">NomServeur</div>
+        <div style="font-size: 14px; font-weight: bold; opacity: 0.8; margin-top: 4px;">Utilisateur</div>
+      </div>
+    </div>
+  `;
+}
+
+function escapeHtmlGoodbye(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+// Event listeners pour la mise à jour de l'aperçu
+if (goodbyeImageTitle) goodbyeImageTitle.addEventListener('input', updateGoodbyePreview);
+if (goodbyeImageSubtitle) goodbyeImageSubtitle.addEventListener('input', updateGoodbyePreview);
+
+if (goodbyeMessageType) {
+  goodbyeMessageType.addEventListener('change', updateGoodbyeVisibility);
+}
 
 // Charger la config
 fetch(`/api/bot/get-goodbye-config/${guildId}`)
   .then(res => res.json())
   .then(cfg => {
     goodbyeEnabled.checked = cfg.enabled;
-    goodbyeChannel.value = cfg.channelId;
-    goodbyeMessage.value = cfg.message || defaultGoodbyeMessage;
+    goodbyeChannel.value = cfg.channelId || '';
+    goodbyeMessage.value = cfg.message || '';
+    goodbyeMessageType.value = cfg.messageType || 'embed';
+    goodbyeEmbedTitle.value = cfg.embedTitle || '';
+    goodbyeEmbedDescription.value = cfg.embedDescription || '';
+    goodbyeEmbedColor.value = cfg.embedColor || '#ED4245';
+    goodbyeEmbedThumbnail.checked = cfg.embedThumbnail !== false;
+    goodbyeEmbedFooter.value = cfg.embedFooter || '';
+    goodbyeImageEnabled.checked = cfg.imageEnabled || false;
+    goodbyeImageGradient.value = cfg.imageGradient || 'red';
+    goodbyeImageTitle.value = cfg.imageTitle || '';
+    goodbyeImageSubtitle.value = cfg.imageSubtitle || '';
+    goodbyeImageMemberCount.checked = cfg.imageShowMemberCount !== false;
+    
+    // Update visibility
+    updateGoodbyeVisibility();
+    
+    // Update gradient picker selection
+    if (goodbyeGradientPicker) {
+      goodbyeGradientPicker.querySelectorAll('.gradient-option').forEach(opt => {
+        opt.classList.toggle('selected', opt.dataset.gradient === cfg.imageGradient);
+      });
+    }
+    
+    // Show image options if enabled
+    if (goodbyeImageOptions) {
+      goodbyeImageOptions.style.display = cfg.imageEnabled ? 'block' : 'none';
+    }
+    
+    if (cfg.imageEnabled) {
+      updateGoodbyePreview();
+    }
   });
 
 // Sauvegarder
@@ -28,7 +168,18 @@ saveGoodbye.addEventListener("click", async () => {
         guildId,
         goodbyeEnabled: goodbyeEnabled.checked,
         channelId: goodbyeChannel.value,
-        goodbyeMessage: goodbyeMessage.value
+        goodbyeMessage: goodbyeMessage.value,
+        messageType: goodbyeMessageType.value,
+        embedTitle: goodbyeEmbedTitle.value,
+        embedDescription: goodbyeEmbedDescription.value,
+        embedColor: goodbyeEmbedColor.value,
+        embedThumbnail: goodbyeEmbedThumbnail.checked,
+        embedFooter: goodbyeEmbedFooter.value,
+        imageEnabled: goodbyeImageEnabled.checked,
+        imageGradient: goodbyeImageGradient.value,
+        imageTitle: goodbyeImageTitle.value,
+        imageSubtitle: goodbyeImageSubtitle.value,
+        imageShowMemberCount: goodbyeImageMemberCount.checked
       })
     });
 
@@ -45,3 +196,6 @@ saveGoodbye.addEventListener("click", async () => {
   saveGoodbye.disabled = false;
   saveGoodbye.textContent = "Sauvegarder";
 });
+
+// Initialisation
+updateGoodbyeVisibility();

app/public/guild/welcomeForm.js

@@ -1,18 +1,171 @@
+// ========== WELCOME FORM ==========
 const welcomeEnabled = document.getElementById("welcome-enabled");
 const welcomeChannel = document.getElementById("welcome-channel");
 const welcomeMessage = document.getElementById("welcome-message");
+const welcomeMessageType = document.getElementById("welcome-message-type");
+const welcomeEmbedTitle = document.getElementById("welcome-embed-title");
+const welcomeEmbedDescription = document.getElementById("welcome-embed-description");
+const welcomeEmbedColor = document.getElementById("welcome-embed-color");
+const welcomeEmbedThumbnail = document.getElementById("welcome-embed-thumbnail");
+const welcomeEmbedFooter = document.getElementById("welcome-embed-footer");
+const welcomeImageEnabled = document.getElementById("welcome-image-enabled");
+const welcomeImageGradient = document.getElementById("welcome-image-gradient");
+const welcomeImageTitle = document.getElementById("welcome-image-title");
+const welcomeImageSubtitle = document.getElementById("welcome-image-subtitle");
+const welcomeImageMemberCount = document.getElementById("welcome-image-member-count");
 const saveWelcome = document.getElementById("save-welcome");
 
-// Message par défaut
-const defaultWelcomeMessage = "Bienvenue {mention} sur **{server}** ! 🎉";
+const welcomeTextGroup = document.getElementById("welcome-text-group");
+const welcomeEmbedSection = document.getElementById("welcome-embed-section");
+const welcomeImageOptions = document.getElementById("welcome-image-options");
+const welcomeGradientPicker = document.getElementById("welcome-gradient-picker");
+const welcomeImagePreview = document.getElementById("welcome-image-preview");
+
+// Afficher/masquer les sections selon le type de message
+function updateWelcomeVisibility() {
+  const type = welcomeMessageType.value;
+  
+  // Text group visible si text ou both
+  welcomeTextGroup.style.display = (type === 'text' || type === 'both') ? 'block' : 'none';
+  
+  // Embed section visible si embed ou both
+  welcomeEmbedSection.style.display = (type === 'embed' || type === 'both') ? 'block' : 'none';
+}
+
+// Gestion du gradient picker
+if (welcomeGradientPicker) {
+  welcomeGradientPicker.addEventListener('click', (e) => {
+    const option = e.target.closest('.gradient-option');
+    if (!option) return;
+    
+    welcomeGradientPicker.querySelectorAll('.gradient-option').forEach(opt => opt.classList.remove('selected'));
+    option.classList.add('selected');
+    welcomeImageGradient.value = option.dataset.gradient;
+    updateWelcomePreview();
+  });
+}
+
+// Afficher/masquer les options d'image
+if (welcomeImageEnabled) {
+  welcomeImageEnabled.addEventListener('change', () => {
+    welcomeImageOptions.style.display = welcomeImageEnabled.checked ? 'block' : 'none';
+    if (welcomeImageEnabled.checked) {
+      updateWelcomePreview();
+    }
+  });
+}
+
+// Mise à jour de l'aperçu de l'image
+function updateWelcomePreview() {
+  if (!welcomeImagePreview) return;
+  
+  const gradient = welcomeImageGradient.value || 'purple';
+  const title = welcomeImageTitle.value || 'Bienvenue';
+  const subtitle = welcomeImageSubtitle.value || 'sur le serveur Discord';
+  
+  // Créer un aperçu simplifié avec CSS
+  welcomeImagePreview.innerHTML = `
+    <div class="preview-card" style="
+      width: 100%;
+      max-width: 500px;
+      height: 150px;
+      border-radius: 12px;
+      background: linear-gradient(135deg, ${getGradientColors(gradient)[0]}, ${getGradientColors(gradient)[1]});
+      display: flex;
+      align-items: center;
+      padding: 20px;
+      gap: 20px;
+      color: white;
+      font-family: Arial, sans-serif;
+    ">
+      <div style="
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        background: rgba(255,255,255,0.3);
+        border: 3px solid white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+      ">👤</div>
+      <div style="flex: 1;">
+        <div style="font-size: 24px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">${escapeHtml(title)}</div>
+        <div style="font-size: 14px; opacity: 0.9;">${escapeHtml(subtitle)}</div>
+        <div style="font-size: 16px; font-style: italic; margin-top: 8px;">NomServeur</div>
+        <div style="font-size: 14px; font-weight: bold; opacity: 0.8; margin-top: 4px;">Utilisateur</div>
+      </div>
+    </div>
+  `;
+}
+
+function getGradientColors(gradient) {
+  const gradients = {
+    purple: ['#667eea', '#764ba2'],
+    blue: ['#4facfe', '#00f2fe'],
+    green: ['#11998e', '#38ef7d'],
+    red: ['#ff416c', '#ff4b2b'],
+    orange: ['#f12711', '#f5af19'],
+    pink: ['#ee0979', '#ff6a00'],
+    dark: ['#232526', '#414345'],
+    sunset: ['#fa709a', '#fee140'],
+    ocean: ['#2193b0', '#6dd5ed'],
+    forest: ['#134e5e', '#71b280']
+  };
+  return gradients[gradient] || gradients.purple;
+}
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+// Event listeners pour la mise à jour de l'aperçu
+if (welcomeImageTitle) welcomeImageTitle.addEventListener('input', updateWelcomePreview);
+if (welcomeImageSubtitle) welcomeImageSubtitle.addEventListener('input', updateWelcomePreview);
+
+if (welcomeMessageType) {
+  welcomeMessageType.addEventListener('change', updateWelcomeVisibility);
+}
 
 // Charger la config
 fetch(`/api/bot/get-welcome-config/${guildId}`)
   .then(res => res.json())
   .then(cfg => {
     welcomeEnabled.checked = cfg.enabled;
-    welcomeChannel.value = cfg.channelId;
-    welcomeMessage.value = cfg.message || defaultWelcomeMessage;
+    welcomeChannel.value = cfg.channelId || '';
+    welcomeMessage.value = cfg.message || '';
+    welcomeMessageType.value = cfg.messageType || 'embed';
+    welcomeEmbedTitle.value = cfg.embedTitle || '';
+    welcomeEmbedDescription.value = cfg.embedDescription || '';
+    welcomeEmbedColor.value = cfg.embedColor || '#57F287';
+    welcomeEmbedThumbnail.checked = cfg.embedThumbnail !== false;
+    welcomeEmbedFooter.value = cfg.embedFooter || '';
+    welcomeImageEnabled.checked = cfg.imageEnabled || false;
+    welcomeImageGradient.value = cfg.imageGradient || 'purple';
+    welcomeImageTitle.value = cfg.imageTitle || '';
+    welcomeImageSubtitle.value = cfg.imageSubtitle || '';
+    welcomeImageMemberCount.checked = cfg.imageShowMemberCount !== false;
+    
+    // Update visibility
+    updateWelcomeVisibility();
+    
+    // Update gradient picker selection
+    if (welcomeGradientPicker) {
+      welcomeGradientPicker.querySelectorAll('.gradient-option').forEach(opt => {
+        opt.classList.toggle('selected', opt.dataset.gradient === cfg.imageGradient);
+      });
+    }
+    
+    // Show image options if enabled
+    if (welcomeImageOptions) {
+      welcomeImageOptions.style.display = cfg.imageEnabled ? 'block' : 'none';
+    }
+    
+    if (cfg.imageEnabled) {
+      updateWelcomePreview();
+    }
   });
 
 // Sauvegarder
@@ -28,7 +181,18 @@ saveWelcome.addEventListener("click", async () => {
         guildId,
         welcomeEnabled: welcomeEnabled.checked,
         channelId: welcomeChannel.value,
-        welcomeMessage: welcomeMessage.value
+        welcomeMessage: welcomeMessage.value,
+        messageType: welcomeMessageType.value,
+        embedTitle: welcomeEmbedTitle.value,
+        embedDescription: welcomeEmbedDescription.value,
+        embedColor: welcomeEmbedColor.value,
+        embedThumbnail: welcomeEmbedThumbnail.checked,
+        embedFooter: welcomeEmbedFooter.value,
+        imageEnabled: welcomeImageEnabled.checked,
+        imageGradient: welcomeImageGradient.value,
+        imageTitle: welcomeImageTitle.value,
+        imageSubtitle: welcomeImageSubtitle.value,
+        imageShowMemberCount: welcomeImageMemberCount.checked
       })
     });
 
@@ -45,3 +209,6 @@ saveWelcome.addEventListener("click", async () => {
   saveWelcome.disabled = false;
   saveWelcome.textContent = "Sauvegarder";
 });
+
+// Initialisation
+updateWelcomeVisibility();