<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Julianum - Présentation de Raphael</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#7289DA',
                        secondary: '#99AAB5',
                        dark: '#23272A',
                        blurple: '#5865F2',
                    }
                }
            }
        }
    </script>
    <style>
        @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);
            color: #ffffff;
        }

        .gradient-text {
            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%);
        }

        .glass {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .discord-button {
            background-color: #5865F2;
            color: white;
            padding: 10px 20px;
            border-radius: 28px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .discord-button:hover {
            background-color: #4752C4;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(88, 101, 242, 0.4);
        }

        .command-card {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .command-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #23272A;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            border-radius: 10px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #fff;
            text-decoration: none;
            cursor: pointer;
        }

        .copy-animation {
            animation: pulse 0.5s;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        .success-message {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            border-radius: 4px;
            display: none;
        }

        .success-message.show {
            display: block;
            animation: fadeIn 0.5s, fadeOut 0.5s 2.5s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        .category-button {
            transition: all 0.3s ease;
        }

        .category-button:hover {
            transform: translateY(-2px);
        }

        .category-button.active {
            background-color: #5865F2;
        }

        /* Styles pour le drawer */
        .drawer {
            position: fixed;
            top: 0;
            right: -300px;
            width: 300px;
            height: 100vh;
            background-color: rgba(31, 41, 55, 0.95);
            transition: right 0.3s ease-in-out;
            z-index: 1000;
            overflow-y: auto;
        }

        .drawer.active {
            right: 0;
        }

        .drawer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 999;
        }

        .drawer-overlay.active {
            display: block;
        }

        .drawer-content {
            padding: 2rem;
        }

        .drawer-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 1.5rem;
            cursor: pointer;
        }

        .drawer a {
            display: block;
            padding: 0.5rem 0;
            color: white;
            text-decoration: none;
            font-size: 1.2rem;
        }

        .command-card {
            position: relative;
            cursor: pointer;
        }

        .command-card::after {
            content: "Cliquez pour plus d'infos";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(88, 101, 242, 0.3);
            font-size: 0.8rem;
            color: white;
            padding: 0.5rem;
            text-align: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .command-card:hover::after {
            opacity: 0.8;
        }

        .header-scrolled {
            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.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">
            <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">&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="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">
            <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 max-w-4xl w-full">
            <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>
            <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>
        </div>
    </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>&copy; 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", 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) {
            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');
            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 = () => {
                navigator.clipboard.writeText(command.usage);
                copyButton.classList.add('copy-animation');
                setTimeout(() => copyButton.classList.remove('copy-animation'), 500);
                showSuccessMessage();
            };
        }

        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');
            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.`);
            });
        });

        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 100) { // Commence à changer après 100px de défilement
                header.classList.add('header-scrolled');
            } else {
                header.classList.remove('header-scrolled');
            }
        });
    </script>
</body>

</html>

