Dinawo/Julianum
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Update Google Fonts import in legal.ejs and feathures.ejs
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
.dinawo
2024-07-07 03:09:00 +02:00
parent 597a0fa739
commit 9345f2c8ec
5 changed files with 465 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/src/photo-1714548213565-9d241b6809d6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 513 KiB

490
views/commands.ejs
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<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">
@@ -20,11 +21,11 @@
} }
</script> </script>
<style> <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 { body {
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
background: rgb(2,0,36); background: rgb(2, 0, 36);
color: #ffffff; color: #ffffff;
} }
@@ -32,7 +33,7 @@
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
color: transparent; 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 { .glass {
@@ -76,7 +77,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
background-color: rgba(0,0,0,0.4); background-color: rgba(0, 0, 0, 0.4);
} }
.modal-content { .modal-content {
@@ -108,9 +109,17 @@
} }
@keyframes pulse { @keyframes pulse {
0% { transform: scale(1); } 0% {
50% { transform: scale(1.1); } transform: scale(1);
100% { transform: scale(1); } }
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
} }
.success-message { .success-message {
@@ -130,13 +139,23 @@
} }
@keyframes fadeIn { @keyframes fadeIn {
from {opacity: 0;} from {
to {opacity: 1;} opacity: 0;
}
to {
opacity: 1;
}
} }
@keyframes fadeOut { @keyframes fadeOut {
from {opacity: 1;} from {
to {opacity: 0;} opacity: 1;
}
to {
opacity: 0;
}
} }
.category-button { .category-button {
@@ -214,8 +233,9 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: rgba(88, 101, 242, 0.3); /* Less aggressive color */ background-color: rgba(88, 101, 242, 0.3);
font-size: 0.8rem; /* Reduced size */ color: white; font-size: 0.8rem;
color: white;
padding: 0.5rem; padding: 0.5rem;
text-align: center; text-align: center;
opacity: 0; opacity: 0;
@@ -227,237 +247,247 @@
} }
</style> </style>
</head> </head>
<body class="bg-dark text-gray-200"> <body class="bg-dark text-gray-200">
<header class="bg-gray-900 p-4 sticky top-0 z-50 glass"> <header class="bg-gray-900 p-4 sticky top-0 z-50 glass">
<div class="container mx-auto flex justify-between items-center"> <div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold gradient-text">Julianum</h1> <h1 class="text-2xl font-bold gradient-text">Julianum</h1>
<nav class="hidden md:flex space-x-4"> <nav class="hidden md:flex space-x-4">
<a href="/" class="hover:text-primary transition-colors">Accueil</a> <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/feathures" class="hover:text-primary transition-colors">Fonctionnalités</a>
<a href="/bot/commands" class="hover:text-primary transition-colors">Commandes</a> <a href="/bot/commands" class="hover:text-primary transition-colors">Commandes</a>
</nav> </nav>
<button id="drawer-button" class="md:hidden text-white focus:outline-none"> <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"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path> xmlns="http://www.w3.org/2000/svg">
</svg> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
</button> d="M4 6h16M4 12h16m-7 6h7"></path>
</div> </svg>
</header> </button>
<div id="drawer-overlay" class="drawer-overlay"></div>
<div id="drawer" class="drawer">
<div class="drawer-content">
<span id="drawer-close" class="drawer-close">&times;</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">
</div> </div>
<div class="mb-8 flex flex-wrap justify-center gap-4"> </header>
<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> <div id="drawer-overlay" class="drawer-overlay"></div>
<button class="category-button glass px-4 py-2 rounded-full" data-category="utility">🔧 Utilitaire</button> <div id="drawer" class="drawer">
<button class="category-button glass px-4 py-2 rounded-full" data-category="fun">🎉 Fun</button> <div class="drawer-content">
<button class="category-button glass px-4 py-2 rounded-full" data-category="admin">👑 Administration</button> <span id="drawer-close" class="drawer-close">&times;</span>
</div> <nav class="flex flex-col space-y-4">
<div id="commandList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <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>
</div> </div>
</section>
<div id="commandModal" class="modal"> <section id="home" class="py-24 px-4">
<div class="modal-content"> <div class="container mx-auto text-center">
<span class="close">&times;</span> <h1 class="text-5xl font-bold mb-6 gradient-text">Raphael, votre bot Discord polyvalent</h1>
<h2 id="modalTitle" class="text-2xl font-bold mb-4"></h2> <p class="text-xl mb-10 max-w-2xl mx-auto">Gérez et modérez votre serveur Discord avec des commandes
<p id="modalDescription" class="mb-4"></p> administratives puissantes</p>
<p id="modalUsage" class="mb-4"></p> <a href="https://discord.com/oauth2/authorize?client_id=1232794371213230201"
<button id="copyCommand" class="bg-blurple hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"> class="discord-button inline-block">
Copier la commande Inviter Raphael
</button> </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">&times;</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>
<div id="successMessage" class="success-message"> <div id="successMessage" class="success-message">
Commande copiée avec succès ! Commande copiée avec succès !
</div> </div>
<footer class="py-12 px-4 bg-gray-900 text-center"> <footer class="py-12 px-4 bg-gray-900 text-center">
<p>&copy; 2024 Julianum. Tous droits réservés.</p> <p>&copy; 2024 Julianum. Tous droits réservés.</p>
</footer> </footer>
<script> <script>
function saveSelectedCategory(category) { const commands = [
localStorage.setItem('selectedCategory', category); { 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() { function displayCommands(filteredCommands) {
return localStorage.getItem('selectedCategory') || 'all'; const commandList = document.getElementById('commandList');
} commandList.innerHTML = '';
filteredCommands.forEach(command => {
function applySelectedCategory() { const commandCard = document.createElement('div');
const savedCategory = getSelectedCategory(); commandCard.className = 'glass p-4 rounded-lg command-card';
categoryButtons.forEach(button => { commandCard.innerHTML = `
if (button.dataset.category === savedCategory) { <span class="font-bold">${getEmojiForCategory(command.category)}</span>: ${command.name}
button.classList.add('active'); `;
} else { commandCard.addEventListener('click', () => openModal(command));
button.classList.remove('active'); commandList.appendChild(commandCard);
} });
});
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';
} }
};
const searchInput = document.getElementById('searchInput'); function getEmojiForCategory(category) {
const categoryButtons = document.querySelectorAll('.category-button'); const emojis = {
moderation: '🛡️',
utility: '🔧',
fun: '🎉',
admin: '👑'
};
return emojis[category] || '❓';
}
function filterCommands() { function openModal(command) {
const searchTerm = searchInput.value.toLowerCase(); const modal = document.getElementById('commandModal');
const activeCategory = document.querySelector('.category-button.active').dataset.category; const modalTitle = document.getElementById('modalTitle');
const filteredCommands = commands.filter(command => const modalDescription = document.getElementById('modalDescription');
command.name.toLowerCase().includes(searchTerm) && const modalUsage = document.getElementById('modalUsage');
(activeCategory === 'all' || command.category === activeCategory) const copyButton = document.getElementById('copyCommand');
);
displayCommands(filteredCommands);
}
searchInput.addEventListener('input', filterCommands); modalTitle.textContent = command.name;
modalDescription.textContent = command.description;
modalUsage.textContent = `Usage: ${command.usage}`;
modal.style.display = 'block';
categoryButtons.forEach(button => { copyButton.onclick = () => {
button.addEventListener('click', () => { navigator.clipboard.writeText(command.usage);
categoryButtons.forEach(btn => btn.classList.remove('active')); copyButton.classList.add('copy-animation');
button.classList.add('active'); setTimeout(() => copyButton.classList.remove('copy-animation'), 500);
saveSelectedCategory(button.dataset.category); 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(); 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.`);
});
}); });
}); </script>
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>
</body> </body>
</html>
</html>

2
views/feathures.ejs
View File

@@ -23,7 +23,7 @@
} }
</script> </script>
<style> <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 { body {
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;

245
views/index.ejs
View File

@@ -23,11 +23,11 @@
} }
</script> </script>
<style> <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 { body {
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
background: rgb(2,0,36); background: rgb(2, 0, 36);
color: #ffffff; color: #ffffff;
} }
@@ -35,7 +35,7 @@
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
color: transparent; 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 { .glass {
@@ -69,13 +69,13 @@
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
} }
#features, #commands { #features,
#commands {
display: block !important; display: block !important;
visibility: visible !important; visibility: visible !important;
opacity: 1 !important; opacity: 1 !important;
} }
/* Styles pour le drawer */
.drawer { .drawer {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -126,6 +126,69 @@
text-decoration: none; text-decoration: none;
font-size: 1.2rem; font-size: 1.2rem;
} }
.firstpage {
position: relative; /* Nécessaire pour le positionnement du pseudo-élément */
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.firstpage::before {
content: ""; /* Nécessaire pour que le pseudo-élément soit généré */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('/public/src/photo-1714548213565-9d241b6809d6.png');
background-size: cover; /* Assure que l'image de fond couvre tout l'espace disponible */
filter: brightness(50%); /* Applique le filtre uniquement à l'image de fond */
z-index: -1; /* S'assure que le pseudo-élément reste en arrière-plan */
}
.featurepage {
position: relative; /* Nécessaire pour le positionnement du pseudo-élément */
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.text-reveal-container {
position: relative;
display: inline-block;
overflow: hidden;
color: transparent; /* Maintient le texte transparent */
}
.text-reveal-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5) 50%, transparent); /* Utilise un dégradé plus subtil */
transform: translateX(-100%);
animation: revealText 3s ease forwards, sparkle 1.5s ease-in-out 0.5s infinite alternate;
}
@keyframes revealText {
to {
transform: translateX(100%);
}
}
@keyframes sparkle {
0%, 100% {
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5) 50%, transparent);
}
50% {
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8) 50%, transparent);
}
}
</style> </style>
</head> </head>
@@ -134,13 +197,19 @@
<div class="container mx-auto flex justify-between items-center"> <div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold gradient-text">Julianum</h1> <h1 class="text-2xl font-bold gradient-text">Julianum</h1>
<nav class="hidden md:flex space-x-4"> <nav class="hidden md:flex space-x-4">
<a href="/" class="hover:text-primary transition-colors">Accueil</a> <a href="/" class="hover:text-primary transition-colors" data-i18n="Accueil">Accueil</a>
<a href="/bot/feathures" class="hover:text-primary transition-colors">Fonctionnalités</a> <a href="/bot/feathures" class="hover:text-primary transition-colors" data-i18n="Fonctionnalités">Fonctionnalités</a>
<a href="/bot/commands" class="hover:text-primary transition-colors">Commandes</a> <a href="/bot/commands" class="hover:text-primary transition-colors" data-i18n="Commandes">Commandes</a>
</nav> </nav>
<select id="languageSelector" class="bg-gray-700 text-white px-2 py-1 rounded">
<option value="fr">Français</option>
<option value="en">English</option>
</select>
<button id="drawer-button" class="md:hidden text-white focus:outline-none"> <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"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path> 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> </svg>
</button> </button>
</div> </div>
@@ -158,71 +227,82 @@
</div> </div>
</div> </div>
<section id="home" class="py-24 px-4"> <section id="home" class="firstpage py-24 px-4">
<div class="container mx-auto text-center"> <div class="container mx-auto text-center">
<h1 class="text-5xl font-bold mb-6 gradient-text">Raphael, votre bot Discord polyvalent</h1> <h1 class="text-reveal-container text-5xl font-bold mb-6 gradient-text" data-i18n="Raphael, votre bot Discord polyvalent">Raphael,
<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> votre bot Discord polyvalent</h1>
<a href="https://discord.com/oauth2/authorize?client_id=1232794371213230201" class="discord-button inline-block"> <p class="text-xl mb-10 max-w-2xl mx-auto"
data-i18n="Gérez et modérez votre serveur Discord avec des commandes administratives puissantes">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"
data-i18n="Inviter Raphael">
Inviter Raphael Inviter Raphael
</a> </a>
</div> </div>
</section> </section>
<section id="features" class="py-24 px-4 bg-gray-900"> <section id="features" class="featurepage py-24 px-4 bg-gray-900">
<div class="container mx-auto"> <div class="container mx-auto">
<h2 class="text-4xl font-bold mb-12 text-center gradient-text">Fonctionnalités de Raphael</h2> <h2 class="text-4xl font-bold mb-12 text-center gradient-text" data-i18n="Fonctionnalités de Raphael">Fonctionnalités
de Raphael</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="glass p-6 rounded-lg shadow-lg feature-card"> <div class="glass p-6 rounded-lg shadow-lg feature-card">
<div class="text-4xl mb-4">🛠️</div> <div class="text-4xl mb-4">🛠️</div>
<h3 class="text-xl font-semibold mb-2">Modération avancée</h3> <h3 class="text-xl font-semibold mb-2" data-i18n="Modération avancée">Modération avancée</h3>
<p>Bannissez, expulsez, et gérez efficacement votre serveur.</p> <p data-i18n="Bannissez, expulsez, et gérez efficacement votre serveur.">Bannissez, expulsez, et gérez
efficacement votre serveur.</p>
</div> </div>
<div class="glass p-6 rounded-lg shadow-lg feature-card"> <div class="glass p-6 rounded-lg shadow-lg feature-card">
<div class="text-4xl mb-4">📊</div> <div class="text-4xl mb-4">📊</div>
<h3 class="text-xl font-semibold mb-2">Statistiques détaillées</h3> <h3 class="text-xl font-semibold mb-2" data-i18n="Statistiques détaillées">Statistiques détaillées</h3>
<p>Obtenez des informations précises sur votre bot et vos utilisateurs.</p> <p data-i18n="Obtenez des informations précises sur votre bot et vos utilisateurs.">Obtenez des
informations précises sur votre bot et vos utilisateurs.</p>
</div> </div>
<div class="glass p-6 rounded-lg shadow-lg feature-card"> <div class="glass p-6 rounded-lg shadow-lg feature-card">
<div class="text-4xl mb-4">🪄</div> <div class="text-4xl mb-4">🪄</div>
<h3 class="text-xl font-semibold mb-2">Outils pratiques</h3> <h3 class="text-xl font-semibold mb-2" data-i18n="Outils pratiques">Outils pratiques</h3>
<p>Nettoyez les messages, gérez les invitations, et bien plus encore.</p> <p data-i18n="Nettoyez les messages, gérez les invitations, et bien plus encore.">Nettoyez les
messages, gérez les invitations, et bien plus encore.</p>
</div> </div>
</div> </div>
<div class="text-center mt-10"> <div class="text-center mt-10">
<button id="showAllFeatures" class="text-primary hover:underline">Voir toutes les fonctionnalités</button> <button id="showAllFeatures" class="text-primary hover:underline" data-i18n="Voir toutes les fonctionnalités">Voir toutes les fonctionnalités</button>
</div> </div>
</div> </div>
</section> </section>
<section id="commands" class="py-24 px-4"> <section id="commands" class="py-24 px-4 bg-gray-800">
<div class="container mx-auto"> <div class="container mx-auto">
<h2 class="text-4xl font-bold mb-12 text-center gradient-text">Commandes principales</h2> <h2 class="text-4xl font-bold mb-12 text-center gradient-text" data-i18n="Commandes principales">Commandes
principales</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all"> <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">ban</span>: 🛠️ Bannir un membre <span class="font-bold">ban</span>: 🛠️ <span data-i18n="Bannir un membre">Bannir un membre</span>
</div> </div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all"> <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">kick</span>: 🚪 Expulser un membre <span class="font-bold">kick</span>: 🚪 <span data-i18n="Expulser un membre">Expulser un membre</span>
</div> </div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all"> <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">purge</span>: 🧹 Nettoyer le chat <span class="font-bold">purge</span>: 🧹 <span data-i18n="Nettoyer le chat">Nettoyer le chat</span>
</div> </div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all"> <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">stats</span>: 📊 Voir les statistiques du bot <span class="font-bold">stats</span>: 📊 <span data-i18n="Voir les statistiques du bot">Voir les
statistiques du bot</span>
</div> </div>
<div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all"> <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
<span class="font-bold">invite</span>: 🪄 Obtenir le lien d'invitation du bot <span class="font-bold">invite</span>: 🪄 <span data-i18n="Obtenir le lien d'invitation du bot">Obtenir
le lien d'invitation du bot</span>
</div> </div>
</div> </div>
<div class="text-center mt-10"> <div class="text-center mt-10">
<button id="showAllCommands" class="text-primary hover:underline">Voir toutes les commandes</button> <button id="showAllCommands" class="text-primary hover:underline" data-i18n="Voir toutes les commandes">Voir toutes les commandes</button>
</div> </div>
</div> </div>
</section> </section>
<footer class="py-12 px-4 bg-gray-900 text-center"> <footer class="py-12 px-4 bg-gray-900 text-center">
<p>&copy; 2024 Myaxrin Labs. Tous droits réservés.</p><br> <p data-i18n="© 2024 Myaxrin Labs. Tous droits réservés.">&copy; 2024 Myaxrin Labs. Tous droits réservés.</p><br>
<a href="/legal" class="discord-button inline-block"> <a href="/legal" class="discord-button inline-block" data-i18n="Documents légaux">
Documents légaux Documents légaux
</a> </a>
</footer> </footer>
@@ -242,14 +322,14 @@
drawerClose.addEventListener('click', toggleDrawer); drawerClose.addEventListener('click', toggleDrawer);
drawerOverlay.addEventListener('click', toggleDrawer); drawerOverlay.addEventListener('click', toggleDrawer);
document.getElementById('showAllFeatures').addEventListener('click', function() { document.getElementById('showAllFeatures').addEventListener('click', function () {
window.location.href = '/bot/feathures'; window.location.href = '/bot/feathures';
}); });
document.getElementById('showAllCommands').addEventListener('click', function() { document.getElementById('showAllCommands').addEventListener('click', function () {
window.location.href = '/bot/commands'; window.location.href = '/bot/commands';
}); });
// JavaScript pour l'animation GSAP
gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollTrigger);
gsap.from(".feature-card", { gsap.from(".feature-card", {
@@ -258,12 +338,93 @@
stagger: 0.2, stagger: 0.2,
duration: 1, duration: 1,
scrollTrigger: { scrollTrigger: {
trigger: ".feature-card", trigger: ".feature-section", // Utilisez la section englobante comme déclencheur au lieu d'une carte individuelle
start: "top 80%", start: "top center", // Ajustez ces valeurs pour déclencher l'animation plus tôt ou plus tard
end: "bottom 60%", end: "bottom 100%",
scrub: true scrub: true,
} }
}); });
const translations = {
"fr": {
"Julianum - Présentation de Raphael": "Julianum - Présentation de Raphael",
"Accueil": "Accueil",
"Fonctionnalités": "Fonctionnalités",
"Commandes": "Commandes",
"Raphael, votre bot Discord polyvalent": "Raphael, votre bot Discord polyvalent",
"Gérez et modérez votre serveur Discord avec des commandes administratives puissantes": "Gérez et modérez votre serveur Discord avec des commandes administratives puissantes",
"Inviter Raphael": "Inviter Raphael",
"Fonctionnalités de Raphael": "Fonctionnalités de Raphael",
"Modération avancée": "Modération avancée",
"Bannissez, expulsez, et gérez efficacement votre serveur.": "Bannissez, expulsez, et gérez efficacement votre serveur.",
"Statistiques détaillées": "Statistiques détaillées",
"Obtenez des informations précises sur votre bot et vos utilisateurs.": "Obtenez des informations précises sur votre bot et vos utilisateurs.",
"Outils pratiques": "Outils pratiques",
"Nettoyez les messages, gérez les invitations, et bien plus encore.": "Nettoyez les messages, gérez les invitations, et bien plus encore.",
"Voir toutes les fonctionnalités": "Voir toutes les fonctionnalités",
"Commandes principales": "Commandes principales",
"Bannir un membre": "Bannir un membre",
"Expulser un membre": "Expulser un membre",
"Nettoyer le chat": "Nettoyer le chat",
"Voir les statistiques du bot": "Voir les statistiques du bot",
"Obtenir le lien d'invitation du bot": "Obtenir le lien d'invitation du bot",
"Voir toutes les commandes": "Voir toutes les commandes",
"© 2024 Myaxrin Labs. Tous droits réservés.": "© 2024 Myaxrin Labs. Tous droits réservés.",
"Documents légaux": "Documents légaux"
},
"en": {
"Julianum - Présentation de Raphael": "Julianum - Introduction to Raphael",
"Accueil": "Home",
"Fonctionnalités": "Features",
"Commandes": "Commands",
"Raphael, votre bot Discord polyvalent": "Raphael, your versatile Discord bot",
"Gérez et modérez votre serveur Discord avec des commandes administratives puissantes": "Manage and moderate your Discord server with powerful administrative commands",
"Inviter Raphael": "Invite Raphael",
"Fonctionnalités de Raphael": "Raphael's Features",
"Modération avancée": "Advanced Moderation",
"Bannissez, expulsez, et gérez efficacement votre serveur.": "Ban, kick, and manage your server efficiently.",
"Statistiques détaillées": "Detailed Statistics",
"Obtenez des informations précises sur votre bot et vos utilisateurs.": "Get precise information about your bot and users.",
"Outils pratiques": "Useful Tools",
"Nettoyez les messages, gérez les invitations, et bien plus encore.": "Clean messages, manage invites, and much more.",
"Voir toutes les fonctionnalités": "See all features",
"Commandes principales": "Main Commands",
"Bannir un membre": "Ban a member",
"Expulser un membre": "Kick a member",
"Nettoyer le chat": "Purge the chat",
"Voir les statistiques du bot": "See bot statistics",
"Obtenir le lien d'invitation du bot": "Get the bot invite link",
"Voir toutes les commandes": "See all commands",
"© 2024 Myaxrin Labs. Tous droits réservés.": "© 2024 Myaxrin Labs. All rights reserved.",
"Documents légaux": "Legal Documents"
}
};
const languageSelector = document.getElementById('languageSelector');
const elementsToTranslate = document.querySelectorAll('[data-i18n]');
// Function to apply translations
function applyTranslations(selectedLanguage) {
elementsToTranslate.forEach(el => {
const translationKey = el.getAttribute('data-i18n');
el.textContent = translations[selectedLanguage][translationKey];
});
document.title = translations[selectedLanguage][document.title];
}
// Check for stored language preference on page load
document.addEventListener('DOMContentLoaded', () => {
const storedLanguage = localStorage.getItem('language') || 'fr'; // Default to French if no preference
languageSelector.value = storedLanguage;
applyTranslations(storedLanguage);
});
// Update language preference and translations on language selector change
languageSelector.addEventListener('change', (e) => {
const selectedLanguage = e.target.value;
localStorage.setItem('language', selectedLanguage); // Store language preference
applyTranslations(selectedLanguage);
});
</script> </script>
</body> </body>

2
views/legal.ejs
View File

@@ -23,7 +23,7 @@
} }
</script> </script>
<style> <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 { body {
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;