arthur/LazyBot
1
0
Fork 0
mirror of https://github.com/arthur-pbty/LazyBot.git synced 2026-06-03 15:07:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

finish css

Browse Source
This commit is contained in:
Arthur Puechberty
2026-01-15 22:14:42 +01:00
parent f8eae61818
commit 2164c13a04
5 changed files with 291 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/dashboard.css
+105
View File
@@ -0,0 +1,105 @@
:root {
--bg: #0f1115;
--bg-card: #161a22;
--text: #e6e6eb;
--muted: #9aa0b4;
--primary: #5865F2; /* couleur Discord */
--primary-hover: #4752c4;
--border: #23283a;
}
* {
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
margin: 0;
padding: 0;
}
/* BODY */
body {
background-color: var(--bg);
color: var(--text);
min-height: 100vh;
padding: 0 20px;
}
/* NAVBAR */
nav {
display: flex;
gap: 20px;
padding: 16px 24px;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
}
nav a {
color: var(--muted);
text-decoration: none;
font-weight: 500;
}
nav a:hover {
color: var(--text);
}
/* TITRES */
h1, h2 {
text-align: center;
margin-top: 30px;
}
h2 {
margin-bottom: 20px;
color: var(--muted);
}
/* AVATAR */
#avatar {
display: block;
margin: 20px auto;
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid var(--primary);
}
/* BOUTON INVITE */
#invite-link {
display: block;
width: fit-content;
margin: 20px auto;
padding: 12px 24px;
background: var(--primary);
color: white;
text-decoration: none;
border-radius: 10px;
font-weight: 600;
transition: background 0.2s ease, transform 0.1s ease;
}
#invite-link:hover {
background: var(--primary-hover);
transform: translateY(-1px);
}
/* LISTE DES GUILDS */
#guilds-list {
max-width: 600px;
margin: 0 auto 40px auto;
list-style: none;
}
#guilds-list li {
background: var(--bg-card);
border: 1px solid var(--border);
padding: 10px 15px;
margin: 5px 0;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease;
}
#guilds-list li:hover {
background: var(--primary);
color: white;
}
app/public/dashboard.html
+40 -5
View File
@@ -2,6 +2,9 @@
<html> <html>
<head> <head>
<title>Tableau de bord</title> <title>Tableau de bord</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/dashboard.css">
</head> </head>
<body> <body>
<nav> <nav>
@@ -13,7 +16,7 @@
<a id="invite-link" href="#">Ajouter le bot à votre serveur</a> <a id="invite-link" href="#">Ajouter le bot à votre serveur</a>
<h2>Mes serveurs :</h2> <h2>Mes serveurs qui ont le bot :</h2>
<ul id="guilds-list"></ul> <!-- Ici on va lister les guilds --> <ul id="guilds-list"></ul> <!-- Ici on va lister les guilds -->
<script> <script>
@@ -39,15 +42,47 @@
} else { } else {
guilds.forEach(g => { guilds.forEach(g => {
const li = document.createElement("li"); const li = document.createElement("li");
li.textContent = g.name; li.style.cursor = "pointer";
li.style.cursor = "pointer"; // change le curseur pour montrer que c'est cliquable li.style.padding = "8px";
li.style.padding = "5px";
li.style.border = "1px solid #ccc"; li.style.border = "1px solid #ccc";
li.style.margin = "5px 0"; li.style.margin = "5px 0";
li.style.display = "flex";
li.style.alignItems = "center";
li.style.gap = "10px";
li.style.borderRadius = "8px";
li.style.backgroundColor = "#161a22"; // fond sombre pour chaque item
li.style.transition = "background 0.2s";
li.addEventListener("click", () => { li.addEventListener("click", () => {
// Action quand on clique : exemple, redirection vers une page de configuration pour ce serveur
window.location.href = `/guild/${g.id}`; window.location.href = `/guild/${g.id}`;
}); });
li.addEventListener("mouseover", () => {
li.style.backgroundColor = "#5865F2"; // couleur Discord au hover
li.style.color = "white";
});
li.addEventListener("mouseout", () => {
li.style.backgroundColor = "#161a22";
li.style.color = "";
});
// Logo de la guild
if (g.icon) {
const img = document.createElement("img");
img.src = `https://cdn.discordapp.com/icons/${g.id}/${g.icon}.png`;
img.alt = `${g.name} logo`;
img.style.width = "40px";
img.style.height = "40px";
img.style.borderRadius = "50%";
li.appendChild(img);
}
// Nom de la guild
const span = document.createElement("span");
span.textContent = g.name;
li.appendChild(span);
list.appendChild(li); list.appendChild(li);
}); });
} }
app/public/guild.css
+142
View File
@@ -0,0 +1,142 @@
:root {
--bg: #0f1115;
--bg-card: #161a22;
--text: #e6e6eb;
--muted: #9aa0b4;
--primary: #5865F2;
--primary-hover: #4752c4;
--border: #23283a;
--input-bg: #1f222b;
--input-border: #2a2e3e;
}
/* RESET & BASE */
* {
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
background-color: var(--bg);
color: var(--text);
margin: 0;
padding: 20px;
min-height: 100vh;
}
/* NAVBAR */
nav {
display: flex;
gap: 20px;
padding: 16px 24px;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 30px;
}
nav a {
color: var(--muted);
text-decoration: none;
font-weight: 500;
}
nav a:hover {
color: var(--text);
}
/* TITRE PRINCIPAL */
h1 {
text-align: center;
margin-bottom: 30px;
}
/* FORMS */
form {
max-width: 700px;
margin: 0 auto 40px auto;
padding: 20px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
}
form label {
display: block;
margin-bottom: 15px;
font-weight: 500;
color: var(--text);
}
input[type="checkbox"] {
margin-right: 10px;
}
select,
textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid var(--input-border);
border-radius: 8px;
background-color: var(--input-bg);
color: var(--text);
font-size: 1rem;
resize: vertical;
}
textarea::placeholder {
color: var(--muted);
}
button[type="submit"] {
display: block;
padding: 12px 24px;
margin-top: 10px;
background: var(--primary);
color: white;
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
}
button[type="submit"]:hover {
background: var(--primary-hover);
transform: translateY(-1px);
}
/* PETIT TEXTE / VARIABLES */
small {
display: block;
margin-top: 10px;
color: var(--muted);
}
small ul {
margin-top: 5px;
padding-left: 20px;
}
small code {
background: var(--input-bg);
padding: 2px 5px;
border-radius: 4px;
font-family: monospace;
color: var(--text);
}
/* STATUS FORM */
#status-welcome-form,
#status-goodbye-form {
margin-top: 10px;
font-weight: 600;
}
/* RESPONSIVE */
@media (max-width: 768px) {
form {
padding: 15px;
}
}
app/public/guild.html
+3
View File
@@ -2,6 +2,9 @@
<html> <html>
<head> <head>
<title>Dashboard du serveur</title> <title>Dashboard du serveur</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/guild.css">
</head> </head>
<body> <body>
<nav> <nav>
app/public/index.html
+1 -1
View File
@@ -4,7 +4,7 @@
<title>LazyBot - Bot Discord</title> <title>LazyBot - Bot Discord</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="/index.css">
</head> </head>
<body> <body>
<nav> <nav>