mirror of
https://github.com/arthur-pbty/LazyBot.git
synced 2026-06-03 15:07:29 +02:00
Arthur Puechberty
156 lines
5.3 KiB
HTML
156 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<title>Dashboard - LazyBot</title>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="stylesheet" href="/dashboard.css">
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav class="navbar">
|
||
<div class="navbar-container">
|
||
<a href="/" class="navbar-brand">
|
||
<img id="bot-avatar" src="https://cdn.discordapp.com/embed/avatars/0.png" alt="LazyBot">
|
||
<span>LazyBot</span>
|
||
</a>
|
||
<div class="navbar-nav">
|
||
<a href="/" class="navbar-link">Accueil</a>
|
||
<a href="/dashboard" class="navbar-link">Dashboard</a>
|
||
<div class="navbar-actions">
|
||
<div class="navbar-user">
|
||
<img id="nav-avatar" src="" alt="Avatar">
|
||
<span id="nav-username"></span>
|
||
</div>
|
||
<a href="/auth/logout" class="btn btn-secondary btn-sm">Déconnexion</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Dashboard Content -->
|
||
<div class="dashboard-container">
|
||
<!-- Dashboard Header -->
|
||
<div class="dashboard-header">
|
||
<div class="user-info">
|
||
<img id="user-avatar" class="user-avatar" src="" alt="Avatar">
|
||
<div class="user-details">
|
||
<h1 id="greeting">Chargement...</h1>
|
||
<p>Sélectionnez un serveur pour le configurer</p>
|
||
</div>
|
||
</div>
|
||
<a id="invite-link" href="#" class="btn btn-primary">
|
||
➕ Ajouter le bot à un serveur
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Guilds Section -->
|
||
<h2 class="section-title">🏠 Mes serveurs</h2>
|
||
|
||
<div id="guilds-container">
|
||
<div class="loading">
|
||
<div class="spinner"></div>
|
||
<p>Chargement des serveurs...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Charger les infos du bot
|
||
fetch("/api/bot-info")
|
||
.then(res => res.json())
|
||
.then(bot => {
|
||
document.getElementById("bot-avatar").src = `https://cdn.discordapp.com/avatars/${bot.id}/${bot.avatar}.png`;
|
||
})
|
||
.catch(() => {});
|
||
|
||
// Charger les infos utilisateur
|
||
fetch("/api/user")
|
||
.then(res => {
|
||
if (!res.ok) throw new Error("Non connecté");
|
||
return res.json();
|
||
})
|
||
.then(user => {
|
||
const avatarUrl = `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`;
|
||
document.getElementById("greeting").textContent = `Bienvenue, ${user.username} !`;
|
||
document.getElementById("user-avatar").src = avatarUrl;
|
||
document.getElementById("nav-avatar").src = avatarUrl;
|
||
document.getElementById("nav-username").textContent = user.username;
|
||
})
|
||
.catch(() => {
|
||
window.location.href = "/auth/login";
|
||
});
|
||
|
||
// Charger les guilds
|
||
fetch("/api/guilds")
|
||
.then(res => res.json())
|
||
.then(guilds => {
|
||
const container = document.getElementById("guilds-container");
|
||
|
||
if (guilds.length === 0) {
|
||
container.innerHTML = `
|
||
<div class="empty-state">
|
||
<div class="empty-state-icon">🤖</div>
|
||
<h3>Aucun serveur trouvé</h3>
|
||
<p>Ajoutez LazyBot à un serveur pour commencer à le configurer.</p>
|
||
<a id="invite-empty" href="#" class="btn btn-primary">Ajouter à un serveur</a>
|
||
</div>
|
||
`;
|
||
// Récupérer le lien pour le bouton empty state
|
||
fetch("/invite-bot")
|
||
.then(res => res.json())
|
||
.then(data => {
|
||
const btn = document.getElementById("invite-empty");
|
||
if (btn) btn.href = data.url;
|
||
});
|
||
} else {
|
||
container.innerHTML = '<div class="guilds-grid"></div>';
|
||
const grid = container.querySelector('.guilds-grid');
|
||
|
||
guilds.forEach(g => {
|
||
const card = document.createElement("div");
|
||
card.className = "guild-card";
|
||
card.onclick = () => window.location.href = `/guild/${g.id}`;
|
||
|
||
const iconUrl = g.icon
|
||
? `https://cdn.discordapp.com/icons/${g.id}/${g.icon}.png`
|
||
: `https://cdn.discordapp.com/embed/avatars/0.png`;
|
||
|
||
card.innerHTML = `
|
||
<div class="guild-card-header"></div>
|
||
<img class="guild-card-avatar" src="${iconUrl}" alt="${g.name}">
|
||
<div class="guild-card-body">
|
||
<h3 class="guild-card-name">${g.name}</h3>
|
||
<p class="guild-card-info">Cliquez pour configurer</p>
|
||
</div>
|
||
<div class="guild-card-footer">
|
||
<span class="btn btn-sm btn-primary">Configurer →</span>
|
||
</div>
|
||
`;
|
||
|
||
grid.appendChild(card);
|
||
});
|
||
}
|
||
})
|
||
.catch(() => {
|
||
document.getElementById("guilds-container").innerHTML = `
|
||
<div class="empty-state">
|
||
<div class="empty-state-icon">❌</div>
|
||
<h3>Erreur de chargement</h3>
|
||
<p>Impossible de récupérer la liste des serveurs.</p>
|
||
<button class="btn btn-primary" onclick="location.reload()">Réessayer</button>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
// Lien d'invitation
|
||
fetch("/invite-bot")
|
||
.then(res => res.json())
|
||
.then(data => {
|
||
document.getElementById("invite-link").href = data.url;
|
||
})
|
||
.catch(() => console.log("Impossible de récupérer le lien du bot."));
|
||
</script>
|
||
</body>
|
||
</html>
|