chore: Update Google Fonts import in legal.ejs and feathures.ejs
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@@ -20,11 +21,11 @@
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Wittgenstein:ital,wght@0,400..900;1,400..900&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background: rgb(2,0,36);
|
||||
background: rgb(2, 0, 36);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@@ -32,7 +33,7 @@
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
background-image: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
|
||||
background-image: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
|
||||
}
|
||||
|
||||
.glass {
|
||||
@@ -76,7 +77,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@@ -108,9 +109,17 @@
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.success-message {
|
||||
@@ -130,13 +139,23 @@
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {opacity: 0;}
|
||||
to {opacity: 1;}
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {opacity: 1;}
|
||||
to {opacity: 0;}
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.category-button {
|
||||
@@ -214,8 +233,9 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(88, 101, 242, 0.3); /* Less aggressive color */
|
||||
font-size: 0.8rem; /* Reduced size */ color: white;
|
||||
background-color: rgba(88, 101, 242, 0.3);
|
||||
font-size: 0.8rem;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
@@ -227,237 +247,247 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-dark text-gray-200">
|
||||
<header class="bg-gray-900 p-4 sticky top-0 z-50 glass">
|
||||
<div class="container mx-auto flex justify-between items-center">
|
||||
<h1 class="text-2xl font-bold gradient-text">Julianum</h1>
|
||||
<nav class="hidden md:flex space-x-4">
|
||||
<a href="/" class="hover:text-primary transition-colors">Accueil</a>
|
||||
<a href="/bot/feathures" class="hover:text-primary transition-colors">Fonctionnalités</a>
|
||||
<a href="/bot/commands" class="hover:text-primary transition-colors">Commandes</a>
|
||||
</nav>
|
||||
<button id="drawer-button" class="md:hidden text-white focus:outline-none">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="drawer-overlay" class="drawer-overlay"></div>
|
||||
<div id="drawer" class="drawer">
|
||||
<div class="drawer-content">
|
||||
<span id="drawer-close" class="drawer-close">×</span>
|
||||
<nav class="flex flex-col space-y-4">
|
||||
<a href="/" class="hover:text-primary transition-colors">Accueil</a>
|
||||
<a href="/bot/feathures" class="hover:text-primary transition-colors">Fonctionnalités</a>
|
||||
<a href="/bot/commands" class="hover:text-primary transition-colors">Commandes</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="home" class="py-24 px-4">
|
||||
<div class="container mx-auto text-center">
|
||||
<h1 class="text-5xl font-bold mb-6 gradient-text">Raphael, votre bot Discord polyvalent</h1>
|
||||
<p class="text-xl mb-10 max-w-2xl mx-auto">Gérez et modérez votre serveur Discord avec des commandes administratives puissantes</p>
|
||||
<a href="https://discord.com/oauth2/authorize?client_id=1232794371213230201" class="discord-button inline-block">
|
||||
Inviter Raphael
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="commands" class="py-24 px-4">
|
||||
<div class="container mx-auto">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center gradient-text">Commandes</h2>
|
||||
<div class="mb-8">
|
||||
<input type="text" id="searchInput" placeholder="Rechercher une commande..." class="w-full p-2 rounded bg-gray-700 text-white">
|
||||
<header class="bg-gray-900 p-4 sticky top-0 z-50 glass">
|
||||
<div class="container mx-auto flex justify-between items-center">
|
||||
<h1 class="text-2xl font-bold gradient-text">Julianum</h1>
|
||||
<nav class="hidden md:flex space-x-4">
|
||||
<a href="/" class="hover:text-primary transition-colors">Accueil</a>
|
||||
<a href="/bot/feathures" class="hover:text-primary transition-colors">Fonctionnalités</a>
|
||||
<a href="/bot/commands" class="hover:text-primary transition-colors">Commandes</a>
|
||||
</nav>
|
||||
<button id="drawer-button" class="md:hidden text-white focus:outline-none">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 6h16M4 12h16m-7 6h7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-8 flex flex-wrap justify-center gap-4">
|
||||
<button class="category-button glass px-4 py-2 rounded-full active" data-category="all">🔍 Toutes</button>
|
||||
<button class="category-button glass px-4 py-2 rounded-full" data-category="moderation">🛡️ Modération</button>
|
||||
<button class="category-button glass px-4 py-2 rounded-full" data-category="utility">🔧 Utilitaire</button>
|
||||
<button class="category-button glass px-4 py-2 rounded-full" data-category="fun">🎉 Fun</button>
|
||||
<button class="category-button glass px-4 py-2 rounded-full" data-category="admin">👑 Administration</button>
|
||||
</div>
|
||||
<div id="commandList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
</header>
|
||||
|
||||
<div id="drawer-overlay" class="drawer-overlay"></div>
|
||||
<div id="drawer" class="drawer">
|
||||
<div class="drawer-content">
|
||||
<span id="drawer-close" class="drawer-close">×</span>
|
||||
<nav class="flex flex-col space-y-4">
|
||||
<a href="/" class="hover:text-primary transition-colors">Accueil</a>
|
||||
<a href="/bot/feathures" class="hover:text-primary transition-colors">Fonctionnalités</a>
|
||||
<a href="/bot/commands" class="hover:text-primary transition-colors">Commandes</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="commandModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2 id="modalTitle" class="text-2xl font-bold mb-4"></h2>
|
||||
<p id="modalDescription" class="mb-4"></p>
|
||||
<p id="modalUsage" class="mb-4"></p>
|
||||
<button id="copyCommand" class="bg-blurple hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
|
||||
Copier la commande
|
||||
</button>
|
||||
<section id="home" class="py-24 px-4">
|
||||
<div class="container mx-auto text-center">
|
||||
<h1 class="text-5xl font-bold mb-6 gradient-text">Raphael, votre bot Discord polyvalent</h1>
|
||||
<p class="text-xl mb-10 max-w-2xl mx-auto">Gérez et modérez votre serveur Discord avec des commandes
|
||||
administratives puissantes</p>
|
||||
<a href="https://discord.com/oauth2/authorize?client_id=1232794371213230201"
|
||||
class="discord-button inline-block">
|
||||
Inviter Raphael
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="commands" class="py-24 px-4">
|
||||
<div class="container mx-auto">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center gradient-text">Commandes</h2>
|
||||
<div class="mb-8">
|
||||
<input type="text" id="searchInput" placeholder="Rechercher une commande..."
|
||||
class="w-full p-2 rounded bg-gray-700 text-white">
|
||||
</div>
|
||||
<div class="mb-8 flex flex-wrap justify-center gap-4">
|
||||
<button class="category-button glass px-4 py-2 rounded-full active" data-category="all">🔍 Toutes</button>
|
||||
<button class="category-button glass px-4 py-2 rounded-full" data-category="moderation">🛡️
|
||||
Modération</button>
|
||||
<button class="category-button glass px-4 py-2 rounded-full" data-category="utility">🔧 Utilitaire</button>
|
||||
<button class="category-button glass px-4 py-2 rounded-full" data-category="fun">🎉 Fun</button>
|
||||
<button class="category-button glass px-4 py-2 rounded-full" data-category="admin">👑
|
||||
Administration</button>
|
||||
</div>
|
||||
<div id="commandList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="commandModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2 id="modalTitle" class="text-2xl font-bold mb-4"></h2>
|
||||
<p id="modalDescription" class="mb-4"></p>
|
||||
<p id="modalUsage" class="mb-4"></p>
|
||||
<button id="copyCommand" class="bg-blurple hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
|
||||
Copier la commande
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="successMessage" class="success-message">
|
||||
Commande copiée avec succès !
|
||||
</div>
|
||||
<div id="successMessage" class="success-message">
|
||||
Commande copiée avec succès !
|
||||
</div>
|
||||
|
||||
<footer class="py-12 px-4 bg-gray-900 text-center">
|
||||
<p>© 2024 Julianum. Tous droits réservés.</p>
|
||||
</footer>
|
||||
<script>
|
||||
function saveSelectedCategory(category) {
|
||||
localStorage.setItem('selectedCategory', category);
|
||||
}
|
||||
<footer class="py-12 px-4 bg-gray-900 text-center">
|
||||
<p>© 2024 Julianum. Tous droits réservés.</p>
|
||||
</footer>
|
||||
<script>
|
||||
const commands = [
|
||||
{ name: "about", description: "En savoir plus sur le bot et ses créateurs", usage: "/about", category: "utility" },
|
||||
{ name: "avatar", description: "Afficher l'avatar d'un utilisateur", usage: "/avatar @utilisateur", category: "utility" },
|
||||
{ name: "ban", description: "Bannir un membre", usage: "/ban @utilisateur raison", category: "moderation" },
|
||||
{ name: "clear", description: "Effacer un nombre spécifié de messages", usage: "/clear nombre", category: "moderation" },
|
||||
{ name: "config", description: "Configurer votre serveur", usage: "/config option valeur", category: "admin" },
|
||||
{ name: "embed", description: "Gérer les embeds", usage: "/embed action", category: "utility" },
|
||||
{ name: "emojiid", description: "Obtenir l'ID d'un emoji personnalisé", usage: "/emojiid :emoji:", category: "utility" },
|
||||
{ name: "help", description: "Afficher les commandes disponibles", usage: "/help [commande]", category: "utility" },
|
||||
{ name: "interaction", description: "Interagir avec quelqu'un en utilisant diverses actions", usage: "/interaction @utilisateur action", category: "fun" },
|
||||
{ name: "invite", description: "Obtenir le lien d'invitation du bot", usage: "/invite", category: "utility" },
|
||||
{ name: "joke", description: "Obtenir une blague aléatoire", usage: "/joke", category: "fun" },
|
||||
{ name: "kick", description: "Expulser un membre", usage: "/kick @utilisateur raison", category: "moderation" },
|
||||
{ name: "mute", description: "Mettre un membre en sourdine", usage: "/mute @utilisateur durée raison", category: "moderation" },
|
||||
{ name: "ping", description: "Afficher la latence du bot", usage: "/ping", category: "utility" },
|
||||
{ name: "roleinfo", description: "Afficher les informations d'un rôle", usage: "/roleinfo @rôle", category: "utility" },
|
||||
{ name: "serverinfo", description: "Afficher les informations du serveur", usage: "/serverinfo", category: "utility" },
|
||||
{ name: "ticket", description: "Création de ticket", usage: "/ticket action", category: "utility" },
|
||||
{ name: "user", description: "Afficher l'avatar et les informations d'un utilisateur", usage: "/user @utilisateur", category: "utility" },
|
||||
{ name: "userinfo", description: "Afficher les informations d'un utilisateur", usage: "/userinfo @utilisateur", category: "utility" },
|
||||
{ name: "warn", description: "Gérer les avertissements", usage: "/warn @utilisateur raison", category: "moderation" }
|
||||
];
|
||||
|
||||
function getSelectedCategory() {
|
||||
return localStorage.getItem('selectedCategory') || 'all';
|
||||
}
|
||||
|
||||
function applySelectedCategory() {
|
||||
const savedCategory = getSelectedCategory();
|
||||
categoryButtons.forEach(button => {
|
||||
if (button.dataset.category === savedCategory) {
|
||||
button.classList.add('active');
|
||||
} else {
|
||||
button.classList.remove('active');
|
||||
}
|
||||
});
|
||||
filterCommands();
|
||||
}
|
||||
|
||||
const commands = [
|
||||
{ name: "about", description: "En savoir plus sur le bot et ses créateurs", usage: "/about", category: "utility" },
|
||||
{ name: "avatar", description: "Afficher l'avatar d'un utilisateur", usage: "/avatar @utilisateur", category: "utility" },
|
||||
{ name: "ban", description: "Bannir un membre", usage: "/ban @utilisateur raison", category: "moderation" },
|
||||
{ name: "clear", description: "Effacer un nombre spécifié de messages", usage: "/clear nombre", category: "moderation" },
|
||||
{ name: "config", description: "Configurer votre serveur", usage: "/config option valeur", category: "admin" },
|
||||
{ name: "embed", description: "Gérer les embeds", usage: "/embed action", category: "utility" },
|
||||
{ name: "emojiid", description: "Obtenir l'ID d'un emoji personnalisé", usage: "/emojiid :emoji:", category: "utility" },
|
||||
{ name: "help", description: "Afficher les commandes disponibles", usage: "/help [commande]", category: "utility" },
|
||||
{ name: "interaction", description: "Interagir avec quelqu'un en utilisant diverses actions", usage: "/interaction @utilisateur action", category: "fun" },
|
||||
{ name: "invite", description: "Obtenir le lien d'invitation du bot", usage: "/invite", category: "utility" },
|
||||
{ name: "joke", description: "Obtenir une blague aléatoire", usage: "/joke", category: "fun" },
|
||||
{ name: "kick", description: "Expulser un membre", usage: "/kick @utilisateur raison", category: "moderation" },
|
||||
{ name: "mute", description: "Mettre un membre en sourdine", usage: "/mute @utilisateur durée raison", category: "moderation" },
|
||||
{ name: "ping", description: "Afficher la latence du bot", usage: "/ping", category: "utility" },
|
||||
{ name: "roleinfo", description: "Afficher les informations d'un rôle", usage: "/roleinfo @rôle", category: "utility" },
|
||||
{ name: "serverinfo", description: "Afficher les informations du serveur", usage: "/serverinfo", category: "utility" },
|
||||
{ name: "ticket", description: "Création de ticket", usage: "/ticket action", category: "utility" },
|
||||
{ name: "user", description: "Afficher l'avatar et les informations d'un utilisateur", usage: "/user @utilisateur", category: "utility" },
|
||||
{ name: "userinfo", description: "Afficher les informations d'un utilisateur", usage: "/userinfo @utilisateur", category: "utility" },
|
||||
{ name: "warn", description: "Gérer les avertissements", usage: "/warn @utilisateur raison", category: "moderation" }
|
||||
];
|
||||
|
||||
function displayCommands(filteredCommands) {
|
||||
const commandList = document.getElementById('commandList');
|
||||
commandList.innerHTML = '';
|
||||
filteredCommands.forEach(command => {
|
||||
const commandCard = document.createElement('div');
|
||||
commandCard.className = 'glass p-4 rounded-lg command-card';
|
||||
commandCard.innerHTML = `
|
||||
<span class="font-bold">${getEmojiForCategory(command.category)}</span>: ${command.name}
|
||||
`;
|
||||
commandCard.addEventListener('click', () => openModal(command));
|
||||
commandList.appendChild(commandCard);
|
||||
});
|
||||
}
|
||||
|
||||
function getEmojiForCategory(category) {
|
||||
const emojis = {
|
||||
moderation: '🛡️',
|
||||
utility: '🔧',
|
||||
fun: '🎉',
|
||||
admin: '👑'
|
||||
};
|
||||
return emojis[category] || '❓';
|
||||
}
|
||||
|
||||
function openModal(command) {
|
||||
const modal = document.getElementById('commandModal');
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const modalDescription = document.getElementById('modalDescription');
|
||||
const modalUsage = document.getElementById('modalUsage');
|
||||
const copyButton = document.getElementById('copyCommand');
|
||||
|
||||
modalTitle.textContent = command.name;
|
||||
modalDescription.textContent = command.description;
|
||||
modalUsage.textContent = `Usage: ${command.usage}`;
|
||||
modal.style.display = 'block';
|
||||
|
||||
copyButton.onclick = () => {
|
||||
navigator.clipboard.writeText(command.usage);
|
||||
copyButton.classList.add('copy-animation');
|
||||
setTimeout(() => copyButton.classList.remove('copy-animation'), 500);
|
||||
showSuccessMessage();
|
||||
};
|
||||
}
|
||||
|
||||
function showSuccessMessage() {
|
||||
const successMessage = document.getElementById('successMessage');
|
||||
successMessage.classList.add('show');
|
||||
setTimeout(() => {
|
||||
successMessage.classList.remove('show');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
document.querySelector('.close').onclick = () => {
|
||||
document.getElementById('commandModal').style.display = 'none';
|
||||
};
|
||||
|
||||
window.onclick = (event) => {
|
||||
const modal = document.getElementById('commandModal');
|
||||
if (event.target == modal) {
|
||||
modal.style.display = 'none';
|
||||
function displayCommands(filteredCommands) {
|
||||
const commandList = document.getElementById('commandList');
|
||||
commandList.innerHTML = '';
|
||||
filteredCommands.forEach(command => {
|
||||
const commandCard = document.createElement('div');
|
||||
commandCard.className = 'glass p-4 rounded-lg command-card';
|
||||
commandCard.innerHTML = `
|
||||
<span class="font-bold">${getEmojiForCategory(command.category)}</span>: ${command.name}
|
||||
`;
|
||||
commandCard.addEventListener('click', () => openModal(command));
|
||||
commandList.appendChild(commandCard);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const categoryButtons = document.querySelectorAll('.category-button');
|
||||
function getEmojiForCategory(category) {
|
||||
const emojis = {
|
||||
moderation: '🛡️',
|
||||
utility: '🔧',
|
||||
fun: '🎉',
|
||||
admin: '👑'
|
||||
};
|
||||
return emojis[category] || '❓';
|
||||
}
|
||||
|
||||
function filterCommands() {
|
||||
const searchTerm = searchInput.value.toLowerCase();
|
||||
const activeCategory = document.querySelector('.category-button.active').dataset.category;
|
||||
const filteredCommands = commands.filter(command =>
|
||||
command.name.toLowerCase().includes(searchTerm) &&
|
||||
(activeCategory === 'all' || command.category === activeCategory)
|
||||
);
|
||||
displayCommands(filteredCommands);
|
||||
}
|
||||
function openModal(command) {
|
||||
const modal = document.getElementById('commandModal');
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const modalDescription = document.getElementById('modalDescription');
|
||||
const modalUsage = document.getElementById('modalUsage');
|
||||
const copyButton = document.getElementById('copyCommand');
|
||||
|
||||
searchInput.addEventListener('input', filterCommands);
|
||||
modalTitle.textContent = command.name;
|
||||
modalDescription.textContent = command.description;
|
||||
modalUsage.textContent = `Usage: ${command.usage}`;
|
||||
modal.style.display = 'block';
|
||||
|
||||
categoryButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
categoryButtons.forEach(btn => btn.classList.remove('active'));
|
||||
button.classList.add('active');
|
||||
saveSelectedCategory(button.dataset.category);
|
||||
copyButton.onclick = () => {
|
||||
navigator.clipboard.writeText(command.usage);
|
||||
copyButton.classList.add('copy-animation');
|
||||
setTimeout(() => copyButton.classList.remove('copy-animation'), 500);
|
||||
showSuccessMessage();
|
||||
};
|
||||
}
|
||||
|
||||
function showSuccessMessage() {
|
||||
const successMessage = document.getElementById('successMessage');
|
||||
successMessage.classList.add('show');
|
||||
setTimeout(() => {
|
||||
successMessage.classList.remove('show');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
document.querySelector('.close').onclick = () => {
|
||||
document.getElementById('commandModal').style.display = 'none';
|
||||
};
|
||||
|
||||
window.onclick = (event) => {
|
||||
const modal = document.getElementById('commandModal');
|
||||
if (event.target == modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const categoryButtons = document.querySelectorAll('.category-button');
|
||||
|
||||
function filterCommands() {
|
||||
const searchTerm = searchInput.value.toLowerCase();
|
||||
const activeCategory = document.querySelector('.category-button.active').dataset.category;
|
||||
const filteredCommands = commands.filter(command =>
|
||||
command.name.toLowerCase().includes(searchTerm) &&
|
||||
(activeCategory === 'all' || command.category === activeCategory)
|
||||
);
|
||||
displayCommands(filteredCommands);
|
||||
}
|
||||
|
||||
searchInput.addEventListener('input', filterCommands);
|
||||
|
||||
categoryButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
categoryButtons.forEach(btn => btn.classList.remove('active'));
|
||||
button.classList.add('active');
|
||||
saveSelectedCategory(button.dataset.category);
|
||||
filterCommands();
|
||||
});
|
||||
});
|
||||
|
||||
function saveSelectedCategory(category) {
|
||||
localStorage.setItem('selectedCategory', category);
|
||||
}
|
||||
|
||||
function getSelectedCategory() {
|
||||
return localStorage.getItem('selectedCategory') || 'all';
|
||||
}
|
||||
|
||||
function applySelectedCategory() {
|
||||
const savedCategory = getSelectedCategory();
|
||||
categoryButtons.forEach(button => {
|
||||
if (button.dataset.category === savedCategory) {
|
||||
button.classList.add('active');
|
||||
} else {
|
||||
button.classList.remove('active');
|
||||
}
|
||||
});
|
||||
filterCommands();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', applySelectedCategory);
|
||||
|
||||
displayCommands(commands);
|
||||
|
||||
const drawerButton = document.getElementById('drawer-button');
|
||||
const drawer = document.getElementById('drawer');
|
||||
const drawerOverlay = document.getElementById('drawer-overlay');
|
||||
const drawerClose = document.getElementById('drawer-close');
|
||||
|
||||
function toggleDrawer() {
|
||||
drawer.classList.toggle('active');
|
||||
drawerOverlay.classList.toggle('active');
|
||||
}
|
||||
|
||||
drawerButton.addEventListener('click', toggleDrawer);
|
||||
drawerClose.addEventListener('click', toggleDrawer);
|
||||
drawerOverlay.addEventListener('click', toggleDrawer);
|
||||
|
||||
document.querySelectorAll('.command-card').forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
const command = card.getAttribute('data-command');
|
||||
alert(`Vous avez cliqué sur la commande : ${command}. Ici, vous pouvez ajouter plus d'informations sur cette commande.`);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', applySelectedCategory);
|
||||
|
||||
displayCommands(commands);
|
||||
|
||||
const drawerButton = document.getElementById('drawer-button');
|
||||
const drawer = document.getElementById('drawer');
|
||||
const drawerOverlay = document.getElementById('drawer-overlay');
|
||||
const drawerClose = document.getElementById('drawer-close');
|
||||
|
||||
function toggleDrawer() {
|
||||
drawer.classList.toggle('active');
|
||||
drawerOverlay.classList.toggle('active');
|
||||
}
|
||||
|
||||
drawerButton.addEventListener('click', toggleDrawer);
|
||||
drawerClose.addEventListener('click', toggleDrawer);
|
||||
drawerOverlay.addEventListener('click', toggleDrawer);
|
||||
|
||||
document.querySelectorAll('.command-card').forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
const command = card.getAttribute('data-command');
|
||||
alert(`Vous avez cliqué sur la commande : ${command}. Ici, vous pouvez ajouter plus d'informations sur cette commande.`);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user