new ui header and video add to modal
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:
@@ -247,27 +247,104 @@
|
||||
}
|
||||
|
||||
.header-scrolled {
|
||||
background-color: #1f2937; /* bg-gray-900 */
|
||||
padding: 1rem; /* p-4 */
|
||||
position: sticky;
|
||||
top: 0; /* Collé en haut de la page */
|
||||
z-index: 50; /* z-50 */
|
||||
max-width: 40rem; /* max-w-xl */
|
||||
border-radius: 9999px; /* rounded-full */
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-xl */
|
||||
transition: transform 0.3s ease, padding 0.3s ease; /* Transition douce pour la transformation et le padding */
|
||||
transform: scale(0.8); /* Réduction de la taille */
|
||||
left: 50%; /* Alignement horizontal au milieu */
|
||||
background-color: rgba(31, 41, 55, 0.8); /* bg-gray-900 avec légère transparence */
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 0.75rem 1.5rem; /* Ajustement du padding */
|
||||
position: fixed; /* fixed au lieu de sticky pour un meilleur contrôle */
|
||||
top: 1rem; /* Légèrement décollé du haut */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 50;
|
||||
max-width: 40rem;
|
||||
border-radius: 9999px;
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Transition avec effet de rebond */
|
||||
width: 100%; /* Initial width */
|
||||
}
|
||||
|
||||
.header-scrolled:hover {
|
||||
transform: translateX(-50%) scale(1); /* Agrandissement au survol */
|
||||
padding: 2rem; /* Agrandissement du padding au survol */
|
||||
transform: translateX(-50%) scale(1.05);
|
||||
padding: 1rem 2rem;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.header-scrolled.is-reducing {
|
||||
padding: 0.75rem 1.5rem; /* Ajoutez ici le padding réduit si différent */
|
||||
left: 50%; /* Placer au centre de la page */
|
||||
transform: translateX(-50%) scale(0.9); /* Réduction supplémentaire et centrage horizontal */
|
||||
transition: all 0.5s ease;
|
||||
width: 60%; /* Réduction de la largeur */
|
||||
max-width: none; /* Supprime la limite max-width */
|
||||
top: 1rem; /* Garder la position en haut */
|
||||
margin: 0 auto; /* Centre l'élément */
|
||||
position: fixed; /* Pour s'assurer que la position reste fixe */
|
||||
}
|
||||
|
||||
.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 */
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
width: 90%;
|
||||
max-width: 56rem; /* équivalent à max-w-4xl en Tailwind */
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* ratio 16:9 */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-container video,
|
||||
.video-container iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
margin: 2% auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
window.addEventListener('scroll', function() {
|
||||
var header = document.querySelector('.header-scrolled');
|
||||
if (window.scrollY > 100) { // Ajustez cette valeur selon vos besoins
|
||||
header.classList.add('is-reducing');
|
||||
} else {
|
||||
header.classList.remove('is-reducing');
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<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">
|
||||
@@ -299,17 +376,18 @@
|
||||
</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="home" class="firstpage py-24 px-4">
|
||||
<div class="container mx-auto text-center">
|
||||
<h1 class="text-reveal-container text-5xl font-bold mb-6 gradient-text" data-i18n="Raphael, votre bot Discord polyvalent">Raphael,
|
||||
votre bot Discord polyvalent</h1><br>
|
||||
<h1 class="text-5xl font-bold mb-6 gradient-text">Les commandes de Raphael</h1>
|
||||
<p class="text-xl mb-10 max-w-2xl mx-auto">Ici, vous trouverez des détails sur toutes les commandes disponibles.</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">
|
||||
@@ -333,11 +411,18 @@
|
||||
</section>
|
||||
|
||||
<div id="commandModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-content max-w-4xl w-full">
|
||||
<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>
|
||||
<div class="video-container aspect-video mb-4">
|
||||
<video id="modalVideo" class="w-full h-full object-cover" controls style="display: none;">
|
||||
<source src="" type="video/mp4">
|
||||
Votre navigateur ne supporte pas la balise vidéo.
|
||||
</video>
|
||||
<iframe id="youtubeVideo" class="w-full h-full" style="display: none;" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<button id="copyCommand" class="bg-blurple hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
|
||||
Copier la commande
|
||||
</button>
|
||||
@@ -353,26 +438,26 @@
|
||||
</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" }
|
||||
{ name: "about", description: "En savoir plus sur le bot et ses créateurs", usage: "/about", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
|
||||
{ name: "avatar", description: "Afficher l'avatar d'un utilisateur", usage: "/avatar @utilisateur", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
|
||||
{ name: "ban", description: "Bannir un membre", usage: "/ban @utilisateur raison", category: "moderation", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
|
||||
{ name: "clear", description: "Effacer un nombre spécifié de messages", usage: "/clear nombre", category: "moderation", video: "https://youtu.be/dQw4w9WgXcQ" },
|
||||
{ name: "config", description: "Configurer votre serveur", usage: "/config option valeur", category: "admin", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
|
||||
{ name: "embed", description: "Gérer les embeds", usage: "/embed action", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
|
||||
{ name: "emojiid", description: "Obtenir l'ID d'un emoji personnalisé", usage: "/emojiid :emoji:", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
|
||||
{ name: "help", description: "Afficher les commandes disponibles", usage: "/help [commande]", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
|
||||
{ name: "interaction", description: "Interagir avec quelqu'un en utilisant diverses actions", usage: "/interaction @utilisateur action", category: "fun", video: "https://youtu.be/dQw4w9WgXcQ" },
|
||||
{ name: "invite", description: "Obtenir le lien d'invitation du bot", usage: "/invite", category: "utility", video: "https://youtu.be/dQw4w9WgXcQ" },
|
||||
{ name: "joke", description: "Obtenir une blague aléatoire", usage: "/joke", category: "fun", video: "https://exemple.com/videos/joke.mp4" },
|
||||
{ name: "kick", description: "Expulser un membre", usage: "/kick @utilisateur raison", category: "moderation", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
|
||||
{ name: "mute", description: "Mettre un membre en sourdine", usage: "/mute @utilisateur durée raison", category: "moderation", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
|
||||
{ name: "ping", description: "Afficher la latence du bot", usage: "/ping", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
|
||||
{ name: "roleinfo", description: "Afficher les informations d'un rôle", usage: "/roleinfo @rôle", category: "utility", video: "https://youtu.be/dQw4w9WgXcQ" },
|
||||
{ name: "serverinfo", description: "Afficher les informations du serveur", usage: "/serverinfo", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
|
||||
{ name: "ticket", description: "Création de ticket", usage: "/ticket action", category: "utility", video: "https://exemple.com/videos/ticket.mp4" },
|
||||
{ name: "user", description: "Afficher l'avatar et les informations d'un utilisateur", usage: "/user @utilisateur", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
|
||||
{ name: "userinfo", description: "Afficher les informations d'un utilisateur", usage: "/userinfo @utilisateur", category: "utility", video: "https://youtu.be/dQw4w9WgXcQ" },
|
||||
{ name: "warn", description: "Gérer les avertissements", usage: "/warn @utilisateur raison", category: "moderation", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" }
|
||||
];
|
||||
|
||||
function displayCommands(filteredCommands) {
|
||||
@@ -405,10 +490,31 @@
|
||||
const modalDescription = document.getElementById('modalDescription');
|
||||
const modalUsage = document.getElementById('modalUsage');
|
||||
const copyButton = document.getElementById('copyCommand');
|
||||
const videoElement = document.getElementById('modalVideo');
|
||||
const youtubeElement = document.getElementById('youtubeVideo');
|
||||
|
||||
modalTitle.textContent = command.name;
|
||||
modalDescription.textContent = command.description;
|
||||
modalUsage.textContent = `Usage: ${command.usage}`;
|
||||
|
||||
if (command.video) {
|
||||
if (command.video.includes('youtube.com') || command.video.includes('youtu.be')) {
|
||||
// Vidéo YouTube
|
||||
videoElement.style.display = 'none';
|
||||
youtubeElement.style.display = 'block';
|
||||
youtubeElement.src = `https://www.youtube.com/embed/${getYouTubeId(command.video)}`;
|
||||
} else {
|
||||
// Vidéo locale ou autre
|
||||
youtubeElement.style.display = 'none';
|
||||
videoElement.style.display = 'block';
|
||||
videoElement.querySelector('source').src = command.video;
|
||||
videoElement.load();
|
||||
}
|
||||
} else {
|
||||
videoElement.style.display = 'none';
|
||||
youtubeElement.style.display = 'none';
|
||||
}
|
||||
|
||||
modal.style.display = 'block';
|
||||
|
||||
copyButton.onclick = () => {
|
||||
@@ -419,6 +525,12 @@
|
||||
};
|
||||
}
|
||||
|
||||
function getYouTubeId(url) {
|
||||
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
|
||||
const match = url.match(regExp);
|
||||
return (match && match[2].length === 11) ? match[2] : null;
|
||||
}
|
||||
|
||||
function showSuccessMessage() {
|
||||
const successMessage = document.getElementById('successMessage');
|
||||
successMessage.classList.add('show');
|
||||
|
||||
Reference in New Issue
Block a user