<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vulpes - Enhance Your Discord Experience</title>
    <meta name="description" content="Vulpes is a multipurpose all-in-one bot that provides a wide range of user-focused commands for an enhanced Discord Experience.">
    <meta name="keywords" content="Discord bot, multipurpose bot, Vulpes, Discord experience, mini-games, image generator, user commands, Vulpes Discord, Vulpes bot">
    <meta name="author" content="Vulpes Management Team">
    <meta property="og:title" content="Vulpes - Enhance Your Discord Experience">
    <meta property="og:description" content="Vulpes is a multipurpose all-in-one bot that provides a wide range of user-focused commands for an enhanced Discord Experience.">
    <meta property="og:image" content="https://vulpesdb.github.io/data/profile/avatar/brand-3.png">
    <meta property="og:url" content="https://vulpesdb.github.io/">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Vulpes - Enhance Your Discord Experience">
    <meta name="twitter:description" content="Vulpes is a multipurpose all-in-one bot that provides a wide range of user-focused commands for an enhanced Discord Experience.">
    <meta name="twitter:image" content="https://vulpesdb.github.io/data/profile/avatar/brand-3.png">
    <link rel="icon" href="/icon.png">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #131314;
            font-family: 'Lato', sans-serif;
        }
        .logo {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-bottom: 10px;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
            animation: pulse 2s infinite ease-in-out;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
            }
        }
        
        ::-webkit-scrollbar {
            width: 10px;
            background-color: #131314;
        }
        
        ::-webkit-scrollbar-track {
            background-color: #131314;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            transition: background-color 0.3s ease;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background-color: rgba(255, 255, 255, 0.3);
        }
        
        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.2) #131314;
        }

        .authorize-btn {
            border: 2px solid white;
            color: white;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s ease;
        }

        .authorize-btn:hover {
            background: rgba(255,255,255,0.1);
        }

        .authorize-btn i {
            font-size: 1.2em;
        }

        .terms-privacy {
            margin-top: 5px;
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.5);
        }

        .terms-privacy a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .terms-privacy a:hover {
            color: white;
            text-decoration: underline;
        }

        .server-count {
            color: white;
            font-size: 2xl;
            font-weight: bold;
            margin-top: 20px;
            text-align: center;
        }

        .server-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 20px;
            max-width: 1000px;
            width: 100%;
        }

        .server-box {
            background: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
            border-radius: 20px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
        }

        .server-box::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .server-box:hover::before {
            opacity: 1;
        }

        .server-box:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        }

        .server-box img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-bottom: 15px;
            border: 3px solid rgba(255,255,255,0.2);
            object-fit: cover;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .server-box:hover img {
            transform: scale(1.1);
            box-shadow: 0 0 15px rgba(255,255,255,0.3);
        }

        .server-box h3 {
            font-size: 1rem;
            font-weight: bold;
            color: white;
            margin-bottom: 5px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .server-box p {
            font-size: 0.875rem;
            color: rgba(255,255,255,0.6);
        }

        .more-users {
            color: rgba(255,255,255,0.5);
            font-size: 0.875rem;
            margin-top: 10px;
            text-align: center;
            width: 100%;
        }

        .feature-label {
            background-color: white;
            color: black;
            padding: 5px 15px;
            border-radius: 50px;
            font-weight: bold;
            margin-top: 20px;
            transition: all 0.3s ease;
        }

        .feature-label:hover {
            background-color: rgba(255,255,255,0.8);
            transform: scale(1.05);
        }

        .feature-video {
            width: 1238px;
            height: 696.4px;
            object-fit: cover;
            border-radius: 15px;
            margin-top: 15px;
            transition: all 0.3s ease;
        }

        .feature-video:hover {
            transform: scale(1.02);
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
        }

        .mini-games-text {
            font-size: 2rem;
            font-weight: bold;
            margin-top: 10px;
        }
        .flex img {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .flex img:hover {
            transform: scale(1.05);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
        }
        .magic-wand-btn {
        background: linear-gradient(145deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
        border: 2px solid rgba(255,255,255,0.3);
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 0 10px rgba(255,255,255,0.2);
        animation: magicGlow 2s infinite alternate;
        }

        .magic-wand-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(255,255,255,0.4);
        }

        .magic-wand-btn i {
            font-size: 1.2em;
            color: white;
        }

        @keyframes magicGlow {
            0% {
                box-shadow: 0 0 10px rgba(255,255,255,0.2);
            }
            100% {
                box-shadow: 0 0 25px rgba(255,255,255,0.5);
            }
        }
        footer {
            background-color: rgba(255, 255, 255, 0.05);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding: 40px 0;
            margin-top: 50px;
            width: 100%;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .footer-logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .footer-logo img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .footer-sections {
            display: flex;
            gap: 50px;
        }

        .footer-section {
            color: rgba(255, 255, 255, 0.7);
        }

        .footer-section h4 {
            font-weight: bold;
            margin-bottom: 15px;
            color: white;
        }

        .footer-section a {
            display: block;
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            margin-bottom: 10px;
            transition: color 0.3s ease;
        }

        .footer-section a:hover {
            color: white;
        }

        .footer-bottom {
            text-align: center;
            margin-top: 20px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.8rem;
        }

        .animate-up {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }

        .animate-up.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .animate-zoom-in {
            opacity: 0;
            transform: scale(0.9);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }

        .animate-zoom-in.is-visible {
            opacity: 1;
            transform: scale(1);
        }
        .animate-slide-in-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }

        .animate-slide-in-left.is-visible {
            opacity: 1;
            transform: translateX(0);
        }
        .animate-slide-in-right {
            opacity: 0;
            transform: translateX(50px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }

        .animate-slide-in-right.is-visible {
            opacity: 1;
            transform: translateX(0);
        }
    </style>
</head>
<body class="flex flex-col items-center min-h-screen text-white pt-16 px-4">
    <div class="flex flex-col items-center w-full">
        <img 
            src="https://vulpesdb.github.io/data/profile/avatar/brand-3.png" 
            alt="Vulpes Logo" 
            class="logo animate-zoom-in"
        >
        <h1 class="text-4xl text-center font-bold animate-up">
            Enhance Your Discord Experience
        </h1>
        <p class="text-xl text-gray-500 mt-2 text-center animate-up">
            • Assistant •
        </p>
        <button onclick="openAuthorizationWindow()" class="authorize-btn text-white px-5 py-2 rounded-full mt-3 font-semibold text-sm animate-up">
            <i class="fab fa-discord"></i> Authorize the bot
        </button>
        <div class="terms-privacy animate-up">
            <a href="/terms">Terms</a> — <a href="/privacy">Privacy</a>
        </div>
        <div class="server-count text-3xl font-bold mt-6 animate-up">
            Trusted by more than 80 servers!
        </div>
        <div id="serverGrid" class="server-grid animate-up">
        </div>
        <div class="more-users animate-up">
            And more than 180 users
        </div>
        <div class="feature-label animate-up">
            Feature
        </div>
        <div class="text-center mt-2 mini-games-text animate-up">
            Play Mini-Games Right on Discord
        </div>
        <video class="feature-video" autoplay loop muted>
            <source src="https://vulpesdb.github.io/data/videos/vhKP2r4.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="feature-label flex items-center gap-2 animate-up">
            <i class="fas fa-image"></i> Image Generator
        </div>
        <div class="text-center mt-2 text-2xl font-bold animate-up">
            Made with Vulpes
        </div>
        <div class="flex justify-center space-x-4 mt-4 animate-up">
            <img src="https://vulpesdb.github.io/data/images/3150/1.webp" alt="Generated Image 1" class="w-[269px] h-[269px] object-cover rounded-lg">
            <img src="https://vulpesdb.github.io/data/images/3150/2.webp" alt="Generated Image 2" class="w-[269px] h-[269px] object-cover rounded-lg">
            <img src="https://vulpesdb.github.io/data/images/3150/3.webp" alt="Generated Image 3" class="w-[269px] h-[269px] object-cover rounded-lg">
            <img src="https://vulpesdb.github.io/data/images/3150/4.webp" alt="Generated Image 4" class="w-[269px] h-[269px] object-cover rounded-lg">
            <img src="https://vulpesdb.github.io/data/images/3150/5.webp" alt="Generated Image 5" class="w-[269px] h-[269px] object-cover rounded-lg">
        </div>
        <div class="text-center mt-[3px] text-gray-500 text-sm animate-up">
            With FLUX.1-schnell Module
        </div>
        <div class="text-center mt-4 animate-up">
            <button onclick="openMagicWandLink()" class="magic-wand-btn flex items-center justify-center gap-2 mx-auto px-4 py-2 rounded-full text-white font-semibold">
                <i class="fas fa-magic"></i> Make Your Own
            </button>
        </div>
        <div class="text-center mt-8 animate-up">
            <h2 class="text-5xl font-bold text-white">
                Let's Start Improving Your Discord Experience
            </h2>
            <div class="flex justify-center space-x-4 mt-4">
                <button onclick="window.open('/installcd', '_blank')" class="authorize-btn text-white px-6 py-2 rounded-full font-semibold text-sm animate-slide-in-left">
                    <i class="fas fa-user-plus"></i> Authorize
                </button>
                <button onclick="window.open('/invite', '_blank')" class="authorize-btn text-white px-6 py-2 rounded-full font-semibold text-sm animate-slide-in-right">
                    <i class="fas fa-plus"></i> Invite
                </button>
            </div>
        </div>
    </div>

    <footer class="animate-up">
        <div class="footer-content">
            <div class="footer-logo">
                <img src="https://vulpesy.vercel.app/icon.png" alt="Vulpes Logo">
                <div>
                    <h3 class="text-white font-bold">Vulpes</h3>
                    <p class="text-sm text-gray-400">A multipurpose all-in-one bot designed for user-focused commands</p>
                </div>
            </div>
            <div class="footer-sections">
                <div class="footer-section">
                    <h4>Vulpes</h4>
                    <a href="/support" target="_blank">Support Server</a>
                    <a href="/invite" target="_blank">Invite</a>
                    <a href="/installcd" target="_blank">Authorize</a>
                </div>
                <div class="footer-section">
                    <h4>Legal</h4>
                    <a href="/terms" target="_blank">Terms of Service</a>
                    <a href="/privacy" target="_blank">Privacy Policy</a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            © <script>document.write(new Date().getFullYear())</script> Vulpes Management Team. All rights reserved.
        </div>
    </footer>

    <script>
        function openMagicWandLink() {
            window.open('https://discord.com/oauth2/authorize?client_id=1207724790635561001', '_blank');
        }
    </script>

    <script>
            window.onbeforeunload = function () {
        window.scrollTo(0, 0);
    }
    </script>

    <script>
        function openAuthorizationWindow() {
            const width = 800;
            const height = 600;
            const left = (window.screen.width / 2) - (width / 2);
            const top = (window.screen.height / 2) - (height / 2);
    
            window.open(
                'https://vulpesy.vercel.app/installcd', 
                'VulpesAuthorization', 
                `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes,status=yes`
            );
        }
    
        async function fetchServers() {
            const serverGrid = document.getElementById('serverGrid');
            
            try {
                const response = await fetch('https://gist.githubusercontent.com/anoxle/2094ae17e1e4e3f046a0930618539bac/raw/');
                const servers = await response.json();
    
                servers.forEach(server => {
                    const serverBox = document.createElement('div');
                    serverBox.classList.add('server-box', 'animate-zoom-in');
                    serverBox.innerHTML = `
                        <img src="${server.icon_url}" alt="${server.name}">
                        <h3>${server.name}</h3>
                        <p>${server.member_count.toLocaleString()} Members</p>
                    `;
                    serverGrid.appendChild(serverBox);
                });
            } catch (error) {
                console.error('Error fetching servers:', error);
                const sampleServers = [
                    {
                        name: "Community 1",
                        icon_url: "https://via.placeholder.com/80",
                        member_count: 69
                    },
                    {
                        name: "Community 2",
                        icon_url: "https://via.placeholder.com/80",
                        member_count: 69
                    },
                    {
                        name: "Community 3",
                        icon_url: "https://via.placeholder.com/80",
                        member_count: 69
                    }
                ];
    
                sampleServers.forEach(server => {
                    const serverBox = document.createElement('div');
                    serverBox.classList.add('server-box');
                    serverBox.innerHTML = `
                        <img src="${server.icon_url}" alt="${server.name}">
                        <h3>${server.name}</h3>
                        <p>${server.member_count.toLocaleString()} Members</p>
                    `;
                    serverGrid.appendChild(serverBox);
                });
            }
        }
    
        fetchServers();
    </script>
    <script>
        function isElementInViewport(el) {
            const rect = el.getBoundingClientRect();
            return (
                rect.top >= 0 &&
                rect.left >= 0 &&
                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
        }
    </script>
    <script>
        function handleIntersection(entries, observer) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('is-visible');
                    observer.unobserve(entry.target);
                }
            });
        }

        function setupIntersectionObserver() {
            const options = {
                root: null, 
                rootMargin: '0px', 
                threshold: 0.1 
            };

            const observer = new IntersectionObserver(handleIntersection, options);
            const animatedElements = document.querySelectorAll('.animate-up, .animate-zoom-in, .animate-slide-in-left, .animate-slide-in-right');

            animatedElements.forEach(el => {
                observer.observe(el);
            });
        }

        window.addEventListener('load', setupIntersectionObserver);
    </script>
</body>
</html>