arthur/LazyBot
1
0
Fork 0
mirror of https://github.com/arthur-pbty/LazyBot.git synced 2026-06-03 23:36:37 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
1fcb1c2b88ad58adbef219d602318ed060a8dcc4
LazyBot/app/public/guild.html
T
Arthur Puechberty fac4b0c9e5 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.
2026-01-18 17:28:23 +01:00

2338 lines
114 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Configuration du serveur - LazyBot</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/guild.css">
</head>
<body>
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<a href="/" class="sidebar-brand">
<img id="bot-avatar" src="https://cdn.discordapp.com/embed/avatars/0.png" alt="LazyBot">
<span>LazyBot</span>
</a>
<div class="guild-info">
<img id="guild-icon" src="https://cdn.discordapp.com/embed/avatars/0.png" alt="Serveur">
<div class="guild-info-text">
<div id="guild-name" class="guild-info-name">Chargement...</div>
<div id="guild-id" class="guild-info-id"></div>
</div>
</div>
</div>
<nav class="sidebar-nav">
<!-- Accueil & Membres -->
<div class="nav-section">
<div class="nav-section-title">👥 Membres</div>
<a class="nav-item active" data-section="welcome">
<span class="nav-item-icon">👋</span>
Bienvenue
</a>
<a class="nav-item" data-section="goodbye">
<span class="nav-item-icon">👋</span>
Au revoir
</a>
<a class="nav-item" data-section="autorole">
<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">🎮 Progression</div>
<a class="nav-item" data-section="levels">
<span class="nav-item-icon">📈</span>
Niveaux
</a>
<a class="nav-item" data-section="economy">
<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
</a>
<a class="nav-item" data-section="counting">
<span class="nav-item-icon">🔢</span>
Comptage
</a>
<a class="nav-item" data-section="statschannels">
<span class="nav-item-icon">📊</span>
Salons de stats
</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="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>
</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>
<div class="sidebar-footer">
<a href="/dashboard">
<span>←</span> Retour au dashboard
</a>
</div>
</aside>
<!-- Main Content -->
<main class="main-content">
<!-- Top Header -->
<header class="top-header">
<div class="breadcrumb">
<a href="/dashboard">Dashboard</a>
<span class="breadcrumb-separator">/</span>
<span id="breadcrumb-guild" class="breadcrumb-current">Serveur</span>
</div>
<div class="header-user">
<img id="user-avatar" src="" alt="">
<span id="user-name"></span>
</div>
</header>
<!-- Content Area -->
<div class="content-area">
<!-- Section: Bienvenue -->
<section class="config-section active" id="section-welcome">
<div class="config-card">
<div class="config-card-header">
<div class="config-card-title">
<span class="icon">👋</span>
<h3>Message de bienvenue</h3>
</div>
<label class="toggle-switch">
<input type="checkbox" id="welcome-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="config-card-body">
<div class="form-group">
<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">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">
<div class="variables-box-title">Variables disponibles</div>
<div class="variables-list">
<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>
<div class="config-card-footer">
<div id="status-welcome-form" class="status-message"></div>
<button type="button" class="btn btn-primary" id="save-welcome">Sauvegarder</button>
</div>
</div>
</section>
<!-- Section: Au revoir -->
<section class="config-section" id="section-goodbye">
<div class="config-card">
<div class="config-card-header">
<div class="config-card-title">
<span class="icon">👋</span>
<h3>Message d'au revoir</h3>
</div>
<label class="toggle-switch">
<input type="checkbox" id="goodbye-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="config-card-body">
<div class="form-group">
<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">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">
<div class="variables-box-title">Variables disponibles</div>
<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>
<div class="config-card-footer">
<div id="status-goodbye-form" class="status-message"></div>
<button type="button" class="btn btn-primary" id="save-goodbye">Sauvegarder</button>
</div>
</div>
</section>
<!-- Section: Rôles automatiques -->
<section class="config-section" id="section-autorole">
<!-- Nouveaux membres -->
<div class="config-card">
<div class="config-card-header">
<div class="config-card-title">
<span class="icon">👤</span>
<h3>Rôle pour les nouveaux membres</h3>
</div>
<label class="toggle-switch">
<input type="checkbox" id="autorole-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="config-card-body">
<div class="form-group">
<label class="form-label">Rôle à attribuer</label>
<select class="form-select" id="autorole-role"></select>
</div>
</div>
<div class="config-card-footer">
<div id="status-autorole-form" class="status-message"></div>
<button type="button" class="btn btn-primary" id="save-autorole">Sauvegarder</button>
</div>
</div>
<!-- Vocal -->
<div class="config-card">
<div class="config-card-header">
<div class="config-card-title">
<span class="icon">🎤</span>
<h3>Rôle pour les membres en vocal</h3>
</div>
<label class="toggle-switch">
<input type="checkbox" id="autorole-vocal-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="config-card-body">
<div class="form-group">
<label class="form-label">Rôle à attribuer</label>
<select class="form-select" id="autorole-vocal-role"></select>
</div>
<div class="form-group">
<label class="form-label">Salons à exclure</label>
<span class="form-sublabel">Maintenez Ctrl pour sélectionner plusieurs salons</span>
<select class="form-select" id="autorole-vocal-exclude-channel" multiple size="5"></select>
</div>
</div>
<div class="config-card-footer">
<div id="status-autorole-vocal-form" class="status-message"></div>
<button type="button" class="btn btn-primary" id="save-autorole-vocal">Sauvegarder</button>
</div>
</div>
</section>
<!-- Section: Niveaux -->
<section class="config-section" id="section-levels">
<div class="config-card">
<div class="config-card-header">
<div class="config-card-title">
<span class="icon">📈</span>
<h3>Système de niveaux</h3>
</div>
<label class="toggle-switch">
<input type="checkbox" id="level-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="config-card-body">
<!-- Annonces -->
<div class="inline-toggle">
<div class="inline-toggle-label">
<span class="inline-toggle-title">Annonces de niveau</span>
<span class="inline-toggle-desc">Annoncer quand un membre monte de niveau</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="level-announcement-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="form-group">
<label class="form-label">Canal d'annonces</label>
<select class="form-select" id="level-announcements-channel"></select>
</div>
<div class="form-group">
<label class="form-label">Message d'annonce</label>
<textarea class="form-textarea" id="level-announcements-message" rows="3" placeholder="Félicitations {user}, tu es niveau {level} ! 🎉"></textarea>
</div>
<div class="variables-box">
<div class="variables-box-title">Variables disponibles</div>
<div class="variables-list">
<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>{level}</code> <span>→ niveau</span></span>
<span class="variable-tag"><code>{level-xp}</code> <span>→ XP du niveau</span></span>
</div>
</div>
<!-- Configuration XP -->
<div class="sub-section">
<h4 class="sub-section-title">⚙️ Configuration XP</h4>
<div class="form-row">
<div class="form-group">
<label class="form-label">Courbe d'XP</label>
<select class="form-select" id="level-xp-curve-type">
<option value="constante">Constante</option>
<option value="linear">Linéaire</option>
<option value="quadratic">Quadratique</option>
<option value="exponential">Exponentielle</option>
</select>
</div>
<div class="form-group">
<label class="form-label">XP premier niveau</label>
<input type="number" class="form-input" id="level-xp-multiplier" min="1" value="500">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Annonce tous les X niveaux</label>
<input type="number" class="form-input" id="level-announcement-every" min="1" value="1">
</div>
<div class="form-group">
<label class="form-label">Niveau maximum (0 = infini)</label>
<input type="number" class="form-input" id="level-max-level" min="0" value="0">
</div>
</div>
</div>
<!-- XP Messages -->
<div class="sub-section">
<h4 class="sub-section-title">💬 XP par messages</h4>
<div class="inline-toggle">
<div class="inline-toggle-label">
<span class="inline-toggle-title">Activer XP messages</span>
<span class="inline-toggle-desc">Gagner de l'XP en envoyant des messages</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="message-xp-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">XP minimum</label>
<input type="number" class="form-input" id="level-xp-per-message-min" min="1" value="15">
</div>
<div class="form-group">
<label class="form-label">XP maximum</label>
<input type="number" class="form-input" id="level-xp-per-message-max" min="1" value="25">
</div>
<div class="form-group">
<label class="form-label">Cooldown (sec)</label>
<input type="number" class="form-input" id="level-xp-cooldown" min="0" value="2">
</div>
</div>
</div>
<!-- XP Vocal -->
<div class="sub-section">
<h4 class="sub-section-title">🎤 XP en vocal</h4>
<div class="inline-toggle">
<div class="inline-toggle-label">
<span class="inline-toggle-title">Activer XP vocal</span>
<span class="inline-toggle-desc">Gagner de l'XP en étant en vocal</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="voice-xp-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">XP minimum / min</label>
<input type="number" class="form-input" id="level-xp-per-voice-min" min="1" value="10">
</div>
<div class="form-group">
<label class="form-label">XP maximum / min</label>
<input type="number" class="form-input" id="level-xp-per-voice-max" min="1" value="20">
</div>
</div>
</div>
<!-- Rôles/Salons avec/sans XP -->
<div class="sub-section">
<h4 class="sub-section-title">🎯 Restrictions</h4>
<div class="form-row">
<div class="form-group">
<label class="form-label">Rôles avec/sans XP</label>
<select class="form-select" id="level-role-with-or-without-xp-type">
<option value="with">Avec XP uniquement</option>
<option value="without">Sans XP</option>
</select>
<select class="form-select" id="level-role-with-or-without-xp" multiple size="4" style="margin-top: 8px;"></select>
</div>
<div class="form-group">
<label class="form-label">Salons avec/sans XP</label>
<select class="form-select" id="level-channel-with-or-without-xp-type">
<option value="with">Avec XP uniquement</option>
<option value="without">Sans XP</option>
</select>
<select class="form-select" id="level-channel-with-or-without-xp" multiple size="4" style="margin-top: 8px;"></select>
</div>
</div>
</div>
</div>
<div class="config-card-footer">
<div id="status-level-form" class="status-message"></div>
<button type="button" class="btn btn-primary" id="save-level">Sauvegarder</button>
</div>
</div>
</section>
<!-- Section: Économie -->
<section class="config-section" id="section-economy">
<div class="config-card">
<div class="config-card-header">
<div class="config-card-title">
<span class="icon">💰</span>
<h3>Système d'économie</h3>
</div>
<label class="toggle-switch">
<input type="checkbox" id="economy-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="config-card-body">
<!-- Config de base -->
<div class="form-row">
<div class="form-group">
<label class="form-label">Nom de la monnaie</label>
<input type="text" class="form-input" id="economy-currency-name" value="coins">
</div>
<div class="form-group">
<label class="form-label">Symbole</label>
<input type="text" class="form-input" id="economy-currency-symbol" value="💰" maxlength="10">
</div>
<div class="form-group">
<label class="form-label">Solde de départ</label>
<input type="number" class="form-input" id="economy-starting-balance" min="0" value="0">
</div>
</div>
<!-- Daily -->
<div class="sub-section">
<h4 class="sub-section-title">📅 Récompense quotidienne</h4>
<div class="inline-toggle">
<div class="inline-toggle-label">
<span class="inline-toggle-title">Commande /daily</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="economy-daily-enabled" checked>
<span class="toggle-slider"></span>
</label>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Montant</label>
<input type="number" class="form-input" id="economy-daily-amount" min="1" value="100">
</div>
<div class="form-group">
<label class="form-label">Cooldown (heures)</label>
<input type="number" class="form-input" id="economy-daily-cooldown" min="1" value="24">
</div>
</div>
</div>
<!-- Work -->
<div class="sub-section">
<h4 class="sub-section-title">💼 Travail</h4>
<div class="inline-toggle">
<div class="inline-toggle-label">
<span class="inline-toggle-title">Commande /work</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="economy-work-enabled" checked>
<span class="toggle-slider"></span>
</label>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Gain min</label>
<input type="number" class="form-input" id="economy-work-min" min="1" value="50">
</div>
<div class="form-group">
<label class="form-label">Gain max</label>
<input type="number" class="form-input" id="economy-work-max" min="1" value="150">
</div>
<div class="form-group">
<label class="form-label">Cooldown (min)</label>
<input type="number" class="form-input" id="economy-work-cooldown" min="1" value="60">
</div>
</div>
</div>
<!-- Crime -->
<div class="sub-section">
<h4 class="sub-section-title">🔫 Crime</h4>
<div class="inline-toggle">
<div class="inline-toggle-label">
<span class="inline-toggle-title">Commande /crime</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="economy-crime-enabled" checked>
<span class="toggle-slider"></span>
</label>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Gain min</label>
<input type="number" class="form-input" id="economy-crime-min" min="1" value="100">
</div>
<div class="form-group">
<label class="form-label">Gain max</label>
<input type="number" class="form-input" id="economy-crime-max" min="1" value="500">
</div>
<div class="form-group">
<label class="form-label">Cooldown (min)</label>
<input type="number" class="form-input" id="economy-crime-cooldown" min="1" value="120">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Taux de réussite (%)</label>
<input type="number" class="form-input" id="economy-crime-success" min="1" max="100" value="50">
</div>
<div class="form-group">
<label class="form-label">Amende échec (% solde)</label>
<input type="number" class="form-input" id="economy-crime-fine" min="0" max="100" value="30">
</div>
</div>
</div>
<!-- Steal -->
<div class="sub-section">
<h4 class="sub-section-title">🕵️ Vol</h4>
<div class="inline-toggle">
<div class="inline-toggle-label">
<span class="inline-toggle-title">Commande /steal</span>
<span class="inline-toggle-desc">Voler d'autres joueurs</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="economy-steal-enabled" checked>
<span class="toggle-slider"></span>
</label>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Taux de réussite (%)</label>
<input type="number" class="form-input" id="economy-steal-success" min="1" max="100" value="40">
</div>
<div class="form-group">
<label class="form-label">% max volable</label>
<input type="number" class="form-input" id="economy-steal-max-percent" min="1" max="100" value="50">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Amende échec (%)</label>
<input type="number" class="form-input" id="economy-steal-fine" min="0" max="100" value="25">
</div>
<div class="form-group">
<label class="form-label">Cooldown (min)</label>
<input type="number" class="form-input" id="economy-steal-cooldown" min="1" value="180">
</div>
</div>
</div>
<!-- Message Money -->
<div class="sub-section">
<h4 class="sub-section-title">💬 Argent par message</h4>
<div class="inline-toggle">
<div class="inline-toggle-label">
<span class="inline-toggle-title">Gagner de l'argent en envoyant des messages</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="economy-message-money-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Gain min</label>
<input type="number" class="form-input" id="economy-message-money-min" min="1" value="1">
</div>
<div class="form-group">
<label class="form-label">Gain max</label>
<input type="number" class="form-input" id="economy-message-money-max" min="1" value="5">
</div>
<div class="form-group">
<label class="form-label">Cooldown (sec)</label>
<input type="number" class="form-input" id="economy-message-money-cooldown" min="1" value="60">
</div>
</div>
</div>
<!-- Voice Money -->
<div class="sub-section">
<h4 class="sub-section-title">🎤 Argent en vocal</h4>
<div class="inline-toggle">
<div class="inline-toggle-label">
<span class="inline-toggle-title">Gagner de l'argent en étant en vocal</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="economy-voice-money-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Gain min</label>
<input type="number" class="form-input" id="economy-voice-money-min" min="1" value="5">
</div>
<div class="form-group">
<label class="form-label">Gain max</label>
<input type="number" class="form-input" id="economy-voice-money-max" min="1" value="15">
</div>
<div class="form-group">
<label class="form-label">Intervalle (min)</label>
<input type="number" class="form-input" id="economy-voice-money-interval" min="1" value="5">
</div>
</div>
</div>
</div>
<div class="config-card-footer">
<div id="status-economy-form" class="status-message"></div>
<button type="button" class="btn btn-primary" id="save-economy">Sauvegarder</button>
</div>
</div>
</section>
<!-- Section: Salons vocaux temporaires -->
<section class="config-section" id="section-privateroom">
<div class="config-card">
<div class="config-card-header">
<div class="config-card-title">
<span class="icon">🔊</span>
<h3>Salons vocaux temporaires</h3>
</div>
<label class="toggle-switch">
<input type="checkbox" id="privateroom-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="config-card-body">
<div class="info-box">
<strong>💡 Comment ça marche ?</strong><br>
Quand un membre rejoint le salon "créateur", un nouveau salon vocal est automatiquement créé pour lui.
Le salon est supprimé quand il devient vide.
</div>
<div class="form-group">
<label class="form-label">Salon créateur</label>
<span class="form-sublabel">Le salon vocal que les membres rejoignent pour créer leur salon</span>
<select class="form-select" id="privateroom-creator-channel"></select>
</div>
<div class="form-group">
<label class="form-label">Catégorie des salons créés</label>
<span class="form-sublabel">Les salons temporaires seront créés dans cette catégorie</span>
<select class="form-select" id="privateroom-category"></select>
</div>
<div class="form-group">
<label class="form-label">Format du nom du salon</label>
<input type="text" class="form-input" id="privateroom-name-format" value="🔊 Salon de {user}" placeholder="🔊 Salon de {user}">
</div>
<div class="variables-box">
<div class="variables-box-title">Variables disponibles</div>
<div class="variables-list">
<span class="variable-tag"><code>{user}</code> <span>→ nom d'utilisateur</span></span>
<span class="variable-tag"><code>{displayname}</code> <span>→ pseudo serveur</span></span>
</div>
</div>
</div>
<div class="config-card-footer">
<div id="status-privateroom-form" class="status-message"></div>
<button type="button" class="btn btn-primary" id="save-privateroom">Sauvegarder</button>
</div>
</div>
</section>
<!-- Section: Comptage -->
<section class="config-section" id="section-counting">
<div class="config-card">
<div class="config-card-header">
<div class="config-card-title">
<span class="icon">🔢</span>
<h3>Système de comptage</h3>
</div>
<label class="toggle-switch">
<input type="checkbox" id="counting-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="config-card-body">
<div class="info-box">
<strong>💡 Comment ça marche ?</strong><br>
Les membres comptent à l'infini dans le salon dédié. Un membre ne peut pas compter deux fois de suite,
ils doivent alterner. Si quelqu'un se trompe, le compteur repart à 0 !
</div>
<div class="form-group">
<label class="form-label">Salon de comptage</label>
<span class="form-sublabel">Le salon textuel où les membres peuvent compter</span>
<select class="form-select" id="counting-channel"></select>
</div>
<div class="form-group">
<label class="form-label">Compteur actuel</label>
<input type="number" class="form-input" id="counting-current" disabled value="0">
<span class="form-sublabel">Utilisez les commandes /counting-set, /counting-add, /counting-remove pour modifier</span>
</div>
</div>
<div class="config-card-footer">
<div id="status-counting-form" class="status-message"></div>
<button type="button" class="btn btn-primary" id="save-counting">Sauvegarder</button>
</div>
</div>
</section>
<!-- Section: Salons de statistiques -->
<section class="config-section" id="section-statschannels">
<div class="config-card">
<div class="config-card-header">
<div class="config-card-title">
<span class="icon">📊</span>
<h3>Salons de statistiques</h3>
</div>
</div>
<div class="config-card-body">
<div class="info-box">
<strong>💡 Comment ça marche ?</strong><br>
Créez des salons vocaux dont le nom affiche des statistiques du serveur en temps réel.
Les noms sont mis à jour automatiquement toutes les 5 minutes.
</div>
<!-- Formulaire d'ajout -->
<div class="sub-section">
<h4 class="sub-section-title">➕ Ajouter un salon de stats</h4>
<div class="form-group">
<label class="form-label">Salon vocal</label>
<select class="form-select" id="stats-channel-select"></select>
</div>
<div class="form-group">
<label class="form-label">Type de statistique</label>
<select class="form-select" id="stats-type-select">
<option value="members">👥 Membres (total)</option>
<option value="humans">👤 Membres (sans bots)</option>
<option value="bots">🤖 Bots</option>
<option value="online">🟢 Membres en ligne</option>
<option value="voice">🎤 Membres en vocal</option>
<option value="roles">🎭 Nombre de rôles</option>
<option value="channels">📺 Nombre de salons</option>
<option value="boosts">🚀 Boosts</option>
<option value="boost_level">💎 Niveau de boost</option>
<option value="role_members">🏷️ Membres avec un rôle</option>
</select>
</div>
<div class="form-group" id="stats-role-group" style="display: none;">
<label class="form-label">Rôle à compter</label>
<select class="form-select" id="stats-role-select"></select>
</div>
<div class="form-group">
<label class="form-label">Format du nom</label>
<input type="text" class="form-input" id="stats-format-input" value="📊 Membres: {stat}" placeholder="📊 Membres: {stat}">
</div>
<div class="variables-box">
<div class="variables-box-title">Variables disponibles</div>
<div class="variables-list">
<span class="variable-tag"><code>{stat}</code> <span>→ valeur de la statistique</span></span>
</div>
</div>
<button type="button" class="btn btn-primary" id="add-stats-channel" style="margin-top: var(--spacing-md);">
➕ Ajouter le salon
</button>
</div>
<!-- Liste des salons configurés -->
<div class="sub-section">
<h4 class="sub-section-title">📋 Salons configurés</h4>
<div id="stats-channels-list">
<p class="text-muted">Aucun salon configuré.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ===== SCHEDULED MESSAGES ===== -->
<section class="config-section" id="section-scheduledmessages">
<div class="config-card">
<div class="config-card-header">
<div>
<h2 class="config-card-title">⏰ Messages Programmés</h2>
<p class="config-card-subtitle">Programmez l'envoi automatique de messages dans vos salons</p>
</div>
</div>
<div class="config-card-body">
<!-- Formulaire d'ajout -->
<div class="sub-section" id="scheduled-form-section">
<h4 class="sub-section-title" id="scheduled-form-title">➕ Nouveau message programmé</h4>
<input type="hidden" id="scheduled-edit-id" value="">
<div class="form-group">
<label class="form-label">📺 Salon</label>
<select class="form-select" id="scheduled-channel-select">
<option value="">-- Sélectionner un salon --</option>
</select>
</div>
<div class="form-group">
<label class="form-label">💬 Contenu du message</label>
<textarea class="form-textarea" id="scheduled-message-content" rows="3" placeholder="Le contenu de votre message..."></textarea>
</div>
<!-- Embed optionnel -->
<div class="form-group">
<label class="form-label">
<input type="checkbox" id="scheduled-embed-enabled">
📦 Utiliser un embed
</label>
</div>
<div id="scheduled-embed-options" style="display: none;">
<div class="form-row">
<div class="form-group">
<label class="form-label">Titre de l'embed</label>
<input type="text" class="form-input" id="scheduled-embed-title" placeholder="Titre...">
</div>
<div class="form-group">
<label class="form-label">Couleur</label>
<input type="color" class="form-input" id="scheduled-embed-color" value="#5865F2" style="height: 40px;">
</div>
</div>
<div class="form-group">
<label class="form-label">Description de l'embed</label>
<textarea class="form-textarea" id="scheduled-embed-description" rows="3" placeholder="Description..."></textarea>
</div>
</div>
<!-- Type de planification -->
<div class="form-group">
<label class="form-label">📅 Type de planification</label>
<select class="form-select" id="scheduled-type">
<option value="weekly">Jours et heures spécifiques</option>
<option value="interval">Intervalle régulier</option>
</select>
</div>
<!-- Options pour planification hebdomadaire -->
<div id="scheduled-weekly-options">
<div class="form-group">
<label class="form-label">📆 Jours de la semaine</label>
<div class="checkbox-group" id="scheduled-days">
<label class="checkbox-item"><input type="checkbox" value="1"> Lun</label>
<label class="checkbox-item"><input type="checkbox" value="2"> Mar</label>
<label class="checkbox-item"><input type="checkbox" value="3"> Mer</label>
<label class="checkbox-item"><input type="checkbox" value="4"> Jeu</label>
<label class="checkbox-item"><input type="checkbox" value="5"> Ven</label>
<label class="checkbox-item"><input type="checkbox" value="6"> Sam</label>
<label class="checkbox-item"><input type="checkbox" value="0"> Dim</label>
</div>
</div>
<div class="form-group">
<label class="form-label">🕐 Heures d'envoi</label>
<div class="times-input-container">
<select class="form-select" id="scheduled-hour-select" style="width: 80px;">
<option value="">HH</option>
</select>
<span style="font-size: 1.2rem; color: var(--text-primary);">:</span>
<select class="form-select" id="scheduled-minute-select" style="width: 80px;">
<option value="">MM</option>
</select>
<button type="button" class="btn btn-sm btn-secondary" id="scheduled-add-time">+ Ajouter</button>
</div>
<div class="times-list" id="scheduled-times-list"></div>
</div>
</div>
<!-- Options pour intervalle -->
<div id="scheduled-interval-options" style="display: none;">
<div class="form-row">
<div class="form-group">
<label class="form-label">Toutes les</label>
<input type="number" class="form-input" id="scheduled-interval-value" min="1" value="60">
</div>
<div class="form-group">
<label class="form-label">Unité</label>
<select class="form-select" id="scheduled-interval-unit">
<option value="minutes">Minutes</option>
<option value="hours">Heures</option>
</select>
</div>
</div>
</div>
<!-- Options d'envoi -->
<div class="form-group">
<label class="form-label">⚙️ Options d'envoi</label>
<div class="checkbox-group-vertical">
<label class="checkbox-item">
<input type="checkbox" id="scheduled-force-send" checked>
Envoyer même si le salon est inactif
</label>
<label class="checkbox-item">
<input type="checkbox" id="scheduled-delete-previous">
Supprimer le message précédent
</label>
<label class="checkbox-item">
<input type="checkbox" id="scheduled-enabled" checked>
Activer ce message programmé
</label>
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-primary" id="scheduled-save-btn">
💾 Enregistrer
</button>
<button type="button" class="btn btn-secondary" id="scheduled-cancel-btn" style="display: none;">
❌ Annuler
</button>
</div>
</div>
<!-- Liste des messages programmés -->
<div class="sub-section">
<h4 class="sub-section-title">📋 Messages programmés</h4>
<div id="scheduled-messages-list">
<p class="text-muted">Aucun message programmé.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Envoyer un message -->
<section class="config-section" id="section-sendmessage">
<div class="config-card">
<div class="config-card-header">
<div>
<h2 class="config-card-title">✉️ Envoyer un message</h2>
<p class="config-card-subtitle">Envoyez un message dans un salon de votre serveur</p>
</div>
</div>
<div class="config-card-body">
<div class="form-group">
<label class="form-label">📺 Salon</label>
<select class="form-select" id="sendmsg-channel-select">
<option value="">-- Sélectionner un salon --</option>
</select>
</div>
<div class="form-group">
<label class="form-label">💬 Contenu du message</label>
<textarea class="form-textarea" id="sendmsg-content" rows="4" placeholder="Le contenu de votre message..."></textarea>
</div>
<!-- Embed optionnel -->
<div class="form-group">
<label class="form-label">
<input type="checkbox" id="sendmsg-embed-enabled">
📦 Ajouter un embed
</label>
</div>
<div id="sendmsg-embed-options" style="display: none;">
<div class="form-row">
<div class="form-group">
<label class="form-label">Titre</label>
<input type="text" class="form-input" id="sendmsg-embed-title" placeholder="Titre de l'embed...">
</div>
<div class="form-group">
<label class="form-label">Couleur</label>
<input type="color" class="form-input" id="sendmsg-embed-color" value="#5865F2" style="height: 40px;">
</div>
</div>
<div class="form-group">
<label class="form-label">Description</label>
<textarea class="form-textarea" id="sendmsg-embed-description" rows="4" placeholder="Description de l'embed..."></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">URL de l'auteur</label>
<input type="text" class="form-input" id="sendmsg-embed-author-url" placeholder="https://...">
</div>
<div class="form-group">
<label class="form-label">Nom de l'auteur</label>
<input type="text" class="form-input" id="sendmsg-embed-author-name" placeholder="Nom...">
</div>
<div class="form-group">
<label class="form-label">Icône de l'auteur (URL)</label>
<input type="text" class="form-input" id="sendmsg-embed-author-icon" placeholder="https://...">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">🖼️ Image (URL)</label>
<input type="text" class="form-input" id="sendmsg-embed-image" placeholder="https://...">
</div>
<div class="form-group">
<label class="form-label">📎 Miniature (URL)</label>
<input type="text" class="form-input" id="sendmsg-embed-thumbnail" placeholder="https://...">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Texte du footer</label>
<input type="text" class="form-input" id="sendmsg-embed-footer-text" placeholder="Footer...">
</div>
<div class="form-group">
<label class="form-label">Icône du footer (URL)</label>
<input type="text" class="form-input" id="sendmsg-embed-footer-icon" placeholder="https://...">
</div>
</div>
<div class="form-group">
<label class="form-label">
<input type="checkbox" id="sendmsg-embed-timestamp">
Ajouter un timestamp (date/heure actuelle)
</label>
</div>
<!-- Champs (Fields) -->
<div class="form-group">
<label class="form-label">📝 Champs (Fields)</label>
<div id="sendmsg-fields-container"></div>
<button type="button" class="btn btn-sm btn-secondary" id="sendmsg-add-field">+ Ajouter un champ</button>
</div>
</div>
<!-- Aperçu -->
<div class="form-group">
<label class="form-label">👁️ Aperçu</label>
<div id="sendmsg-preview" class="message-preview">
<p class="text-muted">L'aperçu apparaîtra ici...</p>
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-primary" id="sendmsg-send-btn">
📤 Envoyer le message
</button>
</div>
<!-- Historique -->
<div class="sub-section" style="margin-top: 2rem;">
<h4 class="sub-section-title">📋 Derniers messages envoyés</h4>
<div id="sendmsg-history">
<p class="text-muted">Aucun message envoyé récemment.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Apparence du bot -->
<section class="config-section" id="section-botappearance">
<div class="config-card">
<div class="config-card-header">
<div>
<h2 class="config-card-title">🤖 Apparence du bot</h2>
<p class="config-card-subtitle">Personnalisez le pseudo du bot sur ce serveur</p>
</div>
</div>
<div class="config-card-body">
<!-- Aperçu actuel -->
<div class="form-group">
<label class="form-label">👁️ Aperçu actuel</label>
<div class="bot-preview-card" id="bot-preview">
<img id="bot-preview-avatar" src="https://cdn.discordapp.com/embed/avatars/0.png" alt="Avatar">
<div class="bot-preview-info">
<div class="bot-preview-name" id="bot-preview-name">Chargement...</div>
<div class="bot-preview-tag">BOT</div>
</div>
</div>
</div>
<!-- Pseudo sur le serveur -->
<div class="sub-section">
<h4 class="sub-section-title">📝 Pseudo sur ce serveur</h4>
<p class="text-muted" style="margin-bottom: 1rem;">Le pseudo du bot sera visible uniquement sur ce serveur.</p>
<div class="form-group">
<label class="form-label">Nouveau pseudo</label>
<input type="text" class="form-input" id="bot-nickname" placeholder="Laissez vide pour utiliser le nom par défaut" maxlength="32">
</div>
<div class="form-actions">
<button type="button" class="btn btn-primary" id="bot-nickname-save">
💾 Sauvegarder le pseudo
</button>
<button type="button" class="btn btn-secondary" id="bot-nickname-reset">
🔄 Réinitialiser
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Logs -->
<section class="config-section" id="section-logs">
<div class="config-card">
<div class="config-card-header">
<div class="config-card-title">
<span class="icon">📜</span>
<h3>Système de Logs</h3>
</div>
<label class="toggle-switch">
<input type="checkbox" id="logs-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="config-card-body">
<p class="text-muted" style="margin-bottom: 1.5rem;">
Activez les logs pour suivre toutes les actions sur votre serveur. Le bot créera automatiquement les salons de logs dans une catégorie dédiée.
</p>
<!-- Catégorie existante ou nouvelle -->
<div class="form-group">
<label class="form-label">📁 Catégorie pour les logs</label>
<select class="form-select" id="logs-category">
<option value="">📜 Créer une nouvelle catégorie "LOGS"</option>
</select>
<small class="text-muted">Sélectionnez une catégorie existante ou laissez vide pour en créer une nouvelle automatiquement.</small>
</div>
<!-- Types de logs -->
<div class="form-group">
<label class="form-label">🔧 Types de logs à activer</label>
<p class="text-muted" style="margin-bottom: 1rem;">Sélectionnez les types de logs que vous souhaitez activer. Un salon sera créé pour chaque type activé.</p>
<div class="logs-types-grid" id="logs-types-container">
<!-- Généré dynamiquement par JS -->
</div>
</div>
<!-- Aperçu des salons -->
<div class="form-group" id="logs-preview-container" style="display: none;">
<label class="form-label">👁️ Salons de logs</label>
<div class="logs-channels-preview" id="logs-channels-preview">
<!-- Généré dynamiquement -->
</div>
</div>
</div>
<div class="config-card-footer">
<div id="status-logs-form" class="status-message"></div>
<div class="btn-group">
<button type="button" class="btn btn-danger" id="logs-delete-btn" style="display: none;">
🗑️ Supprimer tous les salons
</button>
<button type="button" class="btn btn-primary" id="logs-save-btn">
💾 Sauvegarder
</button>
</div>
</div>
</div>
</section>
<!-- Section: Anti-Raid -->
<section class="config-section" id="section-antiraid">
<div class="config-card">
<div class="config-card-header">
<div class="config-card-title">
<span class="icon">🛡️</span>
<h3>Système Anti-Raid</h3>
</div>
<label class="toggle-switch">
<input type="checkbox" id="antiraid-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="config-card-body">
<p class="text-muted" style="margin-bottom: 1.5rem;">
Protégez votre serveur contre les raids, le spam et les comportements malveillants. Configurez chaque module individuellement.
</p>
<!-- Salon de logs anti-raid -->
<div class="form-group">
<label class="form-label">📜 Salon de logs Anti-Raid</label>
<select class="form-select" id="antiraid-log-channel">
<option value="">Aucun (pas de logs)</option>
</select>
<small class="text-muted">Les actions de l'anti-raid seront envoyées dans ce salon.</small>
</div>
<!-- Modules Anti-Raid -->
<div class="antiraid-modules">
<!-- Anti-Link -->
<div class="antiraid-module" id="module-antilink">
<div class="antiraid-module-header">
<div class="antiraid-module-title">
<span class="antiraid-icon">🔗</span>
<span>Anti-Link</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="antilink-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="antiraid-module-body">
<p class="text-muted">Bloque les liens externes. Vous pouvez autoriser certains domaines.</p>
<div class="form-row">
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="antilink-action">
<option value="delete">Supprimer le message</option>
<option value="warn">Avertir l'utilisateur</option>
<option value="mute">Mute temporaire</option>
<option value="kick">Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
<div class="form-group">
<label class="form-label">✅ Domaines autorisés</label>
<input type="text" class="form-input" id="antilink-whitelist" placeholder="youtube.com, twitter.com">
<small class="text-muted">Séparés par des virgules</small>
</div>
</div>
<div class="form-group">
<label class="form-label">💬 Message d'avertissement</label>
<input type="text" class="form-input" id="antilink-warn-message" placeholder="⚠️ Les liens ne sont pas autorisés ici." value="⚠️ Les liens ne sont pas autorisés ici.">
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">🚫 Salons exclus</label>
<select class="form-select multi-select" id="antilink-exclude-channels" multiple></select>
</div>
<div class="form-group">
<label class="form-label">👑 Rôles exclus</label>
<select class="form-select multi-select" id="antilink-exclude-roles" multiple></select>
</div>
</div>
</div>
</div>
<!-- Anti-Invite -->
<div class="antiraid-module" id="module-antiinvite">
<div class="antiraid-module-header">
<div class="antiraid-module-title">
<span class="antiraid-icon">📨</span>
<span>Anti-Invite</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="antiinvite-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="antiraid-module-body">
<p class="text-muted">Bloque les invitations Discord d'autres serveurs.</p>
<div class="form-row">
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="antiinvite-action">
<option value="delete">Supprimer le message</option>
<option value="warn">Avertir l'utilisateur</option>
<option value="mute">Mute temporaire</option>
<option value="kick">Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
<div class="form-group">
<label class="form-label" style="display: flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" id="antiinvite-allow-own">
Autoriser les invites de ce serveur
</label>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">🚫 Salons exclus</label>
<select class="form-select multi-select" id="antiinvite-exclude-channels" multiple></select>
</div>
<div class="form-group">
<label class="form-label">👑 Rôles exclus</label>
<select class="form-select multi-select" id="antiinvite-exclude-roles" multiple></select>
</div>
</div>
</div>
</div>
<!-- Anti-Spam -->
<div class="antiraid-module" id="module-antispam">
<div class="antiraid-module-header">
<div class="antiraid-module-title">
<span class="antiraid-icon">⚡</span>
<span>Anti-Spam</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="antispam-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="antiraid-module-body">
<p class="text-muted">Détecte les utilisateurs qui envoient trop de messages rapidement.</p>
<div class="form-row">
<div class="form-group">
<label class="form-label">📊 Messages max</label>
<input type="number" class="form-input" id="antispam-max-messages" min="3" max="20" value="5">
</div>
<div class="form-group">
<label class="form-label">⏱️ Intervalle (secondes)</label>
<input type="number" class="form-input" id="antispam-interval" min="1" max="30" value="5">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="antispam-action">
<option value="delete">Supprimer les messages</option>
<option value="mute" selected>Mute temporaire</option>
<option value="kick">Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
<div class="form-group">
<label class="form-label">🔇 Durée du mute (minutes)</label>
<input type="number" class="form-input" id="antispam-mute-duration" min="1" max="1440" value="10">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">🚫 Salons exclus</label>
<select class="form-select multi-select" id="antispam-exclude-channels" multiple></select>
</div>
<div class="form-group">
<label class="form-label">👑 Rôles exclus</label>
<select class="form-select multi-select" id="antispam-exclude-roles" multiple></select>
</div>
</div>
</div>
</div>
<!-- Anti-Duplicate -->
<div class="antiraid-module" id="module-antidupe">
<div class="antiraid-module-header">
<div class="antiraid-module-title">
<span class="antiraid-icon">📋</span>
<span>Anti-Duplicate</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="antidupe-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="antiraid-module-body">
<p class="text-muted">Bloque les utilisateurs qui répètent le même message.</p>
<div class="form-row">
<div class="form-group">
<label class="form-label">🔄 Répétitions max</label>
<input type="number" class="form-input" id="antidupe-max" min="2" max="10" value="3">
</div>
<div class="form-group">
<label class="form-label">⏱️ Intervalle (secondes)</label>
<input type="number" class="form-input" id="antidupe-interval" min="5" max="120" value="30">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="antidupe-action">
<option value="delete" selected>Supprimer le message</option>
<option value="warn">Avertir l'utilisateur</option>
<option value="mute">Mute temporaire</option>
<option value="kick">Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">🚫 Salons exclus</label>
<select class="form-select multi-select" id="antidupe-exclude-channels" multiple></select>
</div>
<div class="form-group">
<label class="form-label">👑 Rôles exclus</label>
<select class="form-select multi-select" id="antidupe-exclude-roles" multiple></select>
</div>
</div>
</div>
</div>
<!-- Anti-Mention -->
<div class="antiraid-module" id="module-antimention">
<div class="antiraid-module-header">
<div class="antiraid-module-title">
<span class="antiraid-icon">📢</span>
<span>Anti-Mass Mention</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="antimention-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="antiraid-module-body">
<p class="text-muted">Bloque les messages avec trop de mentions.</p>
<div class="form-row">
<div class="form-group">
<label class="form-label">📊 Mentions max</label>
<input type="number" class="form-input" id="antimention-max" min="2" max="30" value="5">
</div>
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="antimention-action">
<option value="delete" selected>Supprimer le message</option>
<option value="warn">Avertir l'utilisateur</option>
<option value="mute">Mute temporaire</option>
<option value="kick">Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">🚫 Salons exclus</label>
<select class="form-select multi-select" id="antimention-exclude-channels" multiple></select>
</div>
<div class="form-group">
<label class="form-label">👑 Rôles exclus</label>
<select class="form-select multi-select" id="antimention-exclude-roles" multiple></select>
</div>
</div>
</div>
</div>
<!-- Anti-Emoji -->
<div class="antiraid-module" id="module-antiemoji">
<div class="antiraid-module-header">
<div class="antiraid-module-title">
<span class="antiraid-icon">😀</span>
<span>Anti-Emoji Spam</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="antiemoji-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="antiraid-module-body">
<p class="text-muted">Bloque les messages avec trop d'emojis.</p>
<div class="form-row">
<div class="form-group">
<label class="form-label">😀 Emojis max</label>
<input type="number" class="form-input" id="antiemoji-max" min="3" max="50" value="10">
</div>
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="antiemoji-action">
<option value="delete" selected>Supprimer le message</option>
<option value="warn">Avertir l'utilisateur</option>
<option value="mute">Mute temporaire</option>
<option value="kick">Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">🚫 Salons exclus</label>
<select class="form-select multi-select" id="antiemoji-exclude-channels" multiple></select>
</div>
<div class="form-group">
<label class="form-label">👑 Rôles exclus</label>
<select class="form-select multi-select" id="antiemoji-exclude-roles" multiple></select>
</div>
</div>
</div>
</div>
<!-- Anti-Caps -->
<div class="antiraid-module" id="module-anticaps">
<div class="antiraid-module-header">
<div class="antiraid-module-title">
<span class="antiraid-icon">🔠</span>
<span>Anti-Caps</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="anticaps-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="antiraid-module-body">
<p class="text-muted">Bloque les messages avec trop de MAJUSCULES.</p>
<div class="form-row">
<div class="form-group">
<label class="form-label">📊 % de majuscules max</label>
<input type="number" class="form-input" id="anticaps-max-percent" min="30" max="100" value="70">
</div>
<div class="form-group">
<label class="form-label">📏 Longueur min (caractères)</label>
<input type="number" class="form-input" id="anticaps-min-length" min="5" max="50" value="10">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="anticaps-action">
<option value="delete" selected>Supprimer le message</option>
<option value="warn">Avertir l'utilisateur</option>
<option value="mute">Mute temporaire</option>
<option value="kick">Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">🚫 Salons exclus</label>
<select class="form-select multi-select" id="anticaps-exclude-channels" multiple></select>
</div>
<div class="form-group">
<label class="form-label">👑 Rôles exclus</label>
<select class="form-select multi-select" id="anticaps-exclude-roles" multiple></select>
</div>
</div>
</div>
</div>
<!-- Anti-Newline -->
<div class="antiraid-module" id="module-antinewline">
<div class="antiraid-module-header">
<div class="antiraid-module-title">
<span class="antiraid-icon">📄</span>
<span>Anti-Newline Spam</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="antinewline-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="antiraid-module-body">
<p class="text-muted">Bloque les messages avec trop de sauts de ligne.</p>
<div class="form-row">
<div class="form-group">
<label class="form-label">📊 Lignes max</label>
<input type="number" class="form-input" id="antinewline-max" min="5" max="50" value="15">
</div>
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="antinewline-action">
<option value="delete" selected>Supprimer le message</option>
<option value="warn">Avertir l'utilisateur</option>
<option value="mute">Mute temporaire</option>
<option value="kick">Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">🚫 Salons exclus</label>
<select class="form-select multi-select" id="antinewline-exclude-channels" multiple></select>
</div>
<div class="form-group">
<label class="form-label">👑 Rôles exclus</label>
<select class="form-select multi-select" id="antinewline-exclude-roles" multiple></select>
</div>
</div>
</div>
</div>
<!-- Anti-Bot Join -->
<div class="antiraid-module" id="module-antibot">
<div class="antiraid-module-header">
<div class="antiraid-module-title">
<span class="antiraid-icon">🤖</span>
<span>Anti-Bot / Compte suspect</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="antibot-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="antiraid-module-body">
<p class="text-muted">Détecte les comptes suspects (nouveaux comptes, sans avatar, noms suspects).</p>
<div class="form-row">
<div class="form-group">
<label class="form-label">📅 Âge min du compte (jours)</label>
<input type="number" class="form-input" id="antibot-min-age" min="0" max="365" value="7">
<small class="text-muted">0 = désactivé</small>
</div>
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="antibot-action">
<option value="warn">Avertir (log uniquement)</option>
<option value="kick" selected>Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label">🔍 Critères de détection</label>
<div class="checkbox-group">
<label class="checkbox-label">
<input type="checkbox" id="antibot-no-avatar">
Compte sans avatar personnalisé
</label>
<label class="checkbox-label">
<input type="checkbox" id="antibot-suspicious-name">
Nom suspect (pattern de bot type "user1234")
</label>
</div>
</div>
</div>
</div>
<!-- Anti-Mass Join -->
<div class="antiraid-module" id="module-antimassj">
<div class="antiraid-module-header">
<div class="antiraid-module-title">
<span class="antiraid-icon">👥</span>
<span>Anti-Mass Join (Raid)</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="antimassj-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="antiraid-module-body">
<p class="text-muted">Détecte quand trop de membres rejoignent en peu de temps (raid).</p>
<div class="form-row">
<div class="form-group">
<label class="form-label">👥 Membres max</label>
<input type="number" class="form-input" id="antimassj-max" min="3" max="50" value="10">
</div>
<div class="form-group">
<label class="form-label">⏱️ Intervalle (secondes)</label>
<input type="number" class="form-input" id="antimassj-interval" min="5" max="120" value="10">
</div>
</div>
<div class="form-group">
<label class="form-label">⚡ Action sur les nouveaux membres pendant le raid</label>
<select class="form-select" id="antimassj-action">
<option value="warn">Log uniquement</option>
<option value="kick" selected>Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
</div>
</div>
<!-- Anti-Badwords -->
<div class="antiraid-module" id="module-antibadwords">
<div class="antiraid-module-header">
<div class="antiraid-module-title">
<span class="antiraid-icon">🤬</span>
<span>Anti-Gros Mots</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="antibadwords-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="antiraid-module-body">
<p class="text-muted">Bloque les messages contenant des insultes ou gros mots.</p>
<div class="form-group">
<label class="form-label">📝 Liste des mots interdits</label>
<textarea class="form-input" id="antibadwords-words" rows="3" placeholder="Entrez les mots interdits, un par ligne ou séparés par des virgules"></textarea>
<small class="text-muted">Le système détecte aussi les variantes avec caractères spéciaux (ex: m3rde)</small>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="antibadwords-action">
<option value="delete" selected>Supprimer le message</option>
<option value="warn">Avertir l'utilisateur</option>
<option value="mute">Mute temporaire</option>
<option value="kick">Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
<div class="form-group">
<label class="form-label">💬 Message d'avertissement</label>
<input type="text" class="form-input" id="antibadwords-warn-message" placeholder="⚠️ Les insultes ne sont pas autorisées." value="⚠️ Les insultes et gros mots ne sont pas autorisés.">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">🚫 Salons exclus</label>
<select class="form-select multi-select" id="antibadwords-exclude-channels" multiple></select>
</div>
<div class="form-group">
<label class="form-label">👑 Rôles exclus</label>
<select class="form-select multi-select" id="antibadwords-exclude-roles" multiple></select>
</div>
</div>
</div>
</div>
</div>
<!-- Section Sanctions automatiques -->
<div class="config-card" style="margin-top: 1.5rem;">
<div class="config-card-header">
<div class="config-card-title">
<span class="icon">⚠️</span>
<h3>Sanctions automatiques (Warns)</h3>
</div>
<label class="toggle-switch">
<input type="checkbox" id="warnings-enabled">
<span class="toggle-slider"></span>
</label>
</div>
<div class="config-card-body">
<p class="text-muted" style="margin-bottom: 1.5rem;">
Configurez les sanctions automatiques en fonction du nombre d'avertissements.
</p>
<div class="warnings-config">
<!-- Warn 1 -->
<div class="warning-level">
<div class="warning-level-header">
<span class="warning-badge">1 Warn</span>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="warn1-action">
<option value="none" selected>Aucune</option>
<option value="mute">Mute</option>
<option value="kick">Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
<div class="form-group">
<label class="form-label">⏱️ Durée (minutes)</label>
<input type="number" class="form-input" id="warn1-duration" min="1" max="10080" value="10">
</div>
</div>
</div>
<!-- Warn 2 -->
<div class="warning-level">
<div class="warning-level-header">
<span class="warning-badge">2 Warns</span>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="warn2-action">
<option value="none" selected>Aucune</option>
<option value="mute">Mute</option>
<option value="kick">Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
<div class="form-group">
<label class="form-label">⏱️ Durée (minutes)</label>
<input type="number" class="form-input" id="warn2-duration" min="1" max="10080" value="30">
</div>
</div>
</div>
<!-- Warn 3 -->
<div class="warning-level">
<div class="warning-level-header">
<span class="warning-badge">3 Warns</span>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="warn3-action">
<option value="none">Aucune</option>
<option value="mute" selected>Mute</option>
<option value="kick">Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
<div class="form-group">
<label class="form-label">⏱️ Durée (minutes)</label>
<input type="number" class="form-input" id="warn3-duration" min="1" max="10080" value="60">
</div>
</div>
</div>
<!-- Warn 4 -->
<div class="warning-level">
<div class="warning-level-header">
<span class="warning-badge">4 Warns</span>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="warn4-action">
<option value="none">Aucune</option>
<option value="mute">Mute</option>
<option value="kick" selected>Expulser</option>
<option value="ban">Bannir</option>
</select>
</div>
<div class="form-group">
<label class="form-label">⏱️ Durée (minutes)</label>
<input type="number" class="form-input" id="warn4-duration" min="1" max="10080" value="0" disabled>
</div>
</div>
</div>
<!-- Warn 5+ -->
<div class="warning-level">
<div class="warning-level-header">
<span class="warning-badge warning-badge-danger">5+ Warns</span>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">⚡ Action</label>
<select class="form-select" id="warn5-action">
<option value="none">Aucune</option>
<option value="mute">Mute</option>
<option value="kick">Expulser</option>
<option value="ban" selected>Bannir</option>
</select>
</div>
<div class="form-group">
<label class="form-label">⏱️ Durée (minutes)</label>
<input type="number" class="form-input" id="warn5-duration" min="1" max="10080" value="0" disabled>
</div>
</div>
</div>
</div>
<!-- Options supplémentaires -->
<div class="form-group" style="margin-top: 1.5rem;">
<label class="form-label">⚙️ Options</label>
<div class="checkbox-group">
<label class="checkbox-label">
<input type="checkbox" id="warnings-decay-enabled">
Expiration des warns après un certain temps
</label>
</div>
</div>
<div class="form-row" id="warnings-decay-options" style="display: none;">
<div class="form-group">
<label class="form-label">📅 Expiration après (jours)</label>
<input type="number" class="form-input" id="warnings-decay-days" min="1" max="365" value="30">
</div>
</div>
<div class="form-group">
<label class="form-label">📜 Salon de notifications</label>
<select class="form-select" id="warnings-notify-channel">
<option value="">Aucun (pas de notification)</option>
</select>
<small class="text-muted">Les sanctions automatiques seront notifiées dans ce salon.</small>
</div>
<div class="config-card-footer" style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color);">
<div id="status-warnings-form" class="status-message"></div>
<button type="button" class="btn btn-primary" id="warnings-save-btn">
💾 Sauvegarder les sanctions
</button>
</div>
</div>
</div>
</div>
<div class="config-card-footer">
<div id="status-antiraid-form" class="status-message"></div>
<button type="button" class="btn btn-primary" id="antiraid-save-btn">
💾 Sauvegarder
</button>
</div>
</div>
</section>
<!-- Section Role Panels -->
<section id="section-rolepanels" class="config-section">
<div class="config-card">
<div class="config-card-header">
<div class="config-card-title">
<span class="icon">🎭</span>
<h2>Rôles par boutons</h2>
</div>
</div>
<div class="config-card-body">
<p class="text-muted">
Créez des panneaux de rôles interactifs. Les utilisateurs pourront cliquer sur des boutons pour obtenir ou retirer des rôles.
</p>
<!-- Liste des panels -->
<div id="role-panels-list" class="panels-list">
<div class="loading-message">Chargement des panels...</div>
</div>
<!-- Bouton pour créer un nouveau panel -->
<button type="button" class="btn btn-primary" id="create-panel-btn" style="margin-top: 1rem;">
➕ Créer un nouveau panel
</button>
</div>
</div>
<!-- Modal création/édition de panel -->
<div id="panel-modal" class="modal" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<h3 id="panel-modal-title">Créer un panel</h3>
<button class="modal-close" id="close-panel-modal">&times;</button>
</div>
<div class="modal-body">
<input type="hidden" id="edit-panel-id">
<div class="form-group">
<label class="form-label">📝 Nom du panel (identifiant unique)</label>
<input type="text" class="form-input" id="panel-name" placeholder="ex: couleurs, jeux, notifications">
</div>
<div class="form-group">
<label class="form-label">📁 Salon</label>
<select class="form-select" id="panel-channel"></select>
</div>
<div class="form-group">
<label class="form-label">🏷️ Titre de l'embed</label>
<input type="text" class="form-input" id="panel-title" placeholder="🎭 Choisissez vos rôles">
</div>
<div class="form-group">
<label class="form-label">📄 Description</label>
<textarea class="form-input" id="panel-description" rows="3" placeholder="Cliquez sur les boutons ci-dessous pour obtenir vos rôles."></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">🎨 Couleur</label>
<input type="color" class="form-input" id="panel-color" value="#5865F2">
</div>
<div class="form-group">
<label class="form-label">⚙️ Mode</label>
<select class="form-select" id="panel-mode">
<option value="toggle">Toggle (ajouter/retirer)</option>
<option value="add">Ajouter uniquement</option>
</select>
</div>
</div>
<div class="form-group">
<div class="checkbox-group">
<label class="checkbox-label">
<input type="checkbox" id="panel-exclusive">
Rôles exclusifs (un seul à la fois)
</label>
</div>
</div>
<div class="form-group">
<label class="form-label">🔒 Rôle requis (optionnel)</label>
<select class="form-select" id="panel-required-role">
<option value="">Aucun</option>
</select>
<small class="text-muted">Seuls les membres avec ce rôle pourront utiliser ce panel.</small>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">🖼️ Image URL (optionnel)</label>
<input type="text" class="form-input" id="panel-image" placeholder="https://...">
</div>
<div class="form-group">
<label class="form-label">🔲 Thumbnail URL (optionnel)</label>
<input type="text" class="form-input" id="panel-thumbnail" placeholder="https://...">
</div>
</div>
</div>
<div class="modal-footer">
<div id="status-panel-form" class="status-message"></div>
<button type="button" class="btn btn-secondary" id="cancel-panel-btn">Annuler</button>
<button type="button" class="btn btn-primary" id="save-panel-btn">💾 Sauvegarder</button>
</div>
</div>
</div>
<!-- Modal édition des boutons -->
<div id="buttons-modal" class="modal" style="display: none;">
<div class="modal-content modal-lg">
<div class="modal-header">
<h3 id="buttons-modal-title">Boutons du panel</h3>
<button class="modal-close" id="close-buttons-modal">&times;</button>
</div>
<div class="modal-body">
<input type="hidden" id="buttons-panel-id">
<!-- Liste des boutons existants -->
<div id="panel-buttons-list" class="buttons-list"></div>
<!-- Formulaire d'ajout de bouton -->
<div class="add-button-form" style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color);">
<h4>➕ Ajouter un bouton</h4>
<div class="form-row">
<div class="form-group">
<label class="form-label">🎭 Rôle</label>
<select class="form-select" id="new-button-role"></select>
</div>
<div class="form-group">
<label class="form-label">🏷️ Label</label>
<input type="text" class="form-input" id="new-button-label" placeholder="Mon rôle">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">😀 Emoji (optionnel)</label>
<input type="text" class="form-input" id="new-button-emoji" placeholder="🎮">
</div>
<div class="form-group">
<label class="form-label">🎨 Style</label>
<select class="form-select" id="new-button-style">
<option value="primary">Bleu (Primary)</option>
<option value="secondary">Gris (Secondary)</option>
<option value="success">Vert (Success)</option>
<option value="danger">Rouge (Danger)</option>
</select>
</div>
</div>
<button type="button" class="btn btn-success" id="add-button-btn">➕ Ajouter le bouton</button>
</div>
</div>
<div class="modal-footer">
<div id="status-buttons-form" class="status-message"></div>
<button type="button" class="btn btn-primary" id="publish-panel-btn">🚀 Publier / Actualiser le panel</button>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- Mobile Toggle Button -->
<button class="mobile-toggle" id="mobile-toggle">☰</button>
<script src="/guild/guildBase.js"></script>
<script src="/guild/navigation.js"></script>
<script src="/guild/welcomeForm.js"></script>
<script src="/guild/goodbyeForm.js"></script>
<script src="/guild/autoroleNewUserForm.js"></script>
<script src="/guild/autoroleVocalForm.js"></script>
<script src="/guild/levelForm.js"></script>
<script src="/guild/economyForm.js"></script>
<script src="/guild/privateroomForm.js"></script>
<script src="/guild/countingForm.js"></script>
<script src="/guild/statsChannelsForm.js"></script>
<script src="/guild/scheduledMessagesForm.js"></script>
<script src="/guild/sendMessageForm.js"></script>
<script src="/guild/botAppearanceForm.js"></script>
<script src="/guild/logsForm.js"></script>
<script src="/guild/antiraidForm.js"></script>
<script src="/guild/rolePanelsForm.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink