Spaces:
Running
Running
| // js/main.js | |
| // Scroll to top button | |
| const scrollTopBtn = document.getElementById('scrollTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| scrollTopBtn.classList.remove('opacity-0', 'invisible'); | |
| scrollTopBtn.classList.add('opacity-100', 'visible'); | |
| } else { | |
| scrollTopBtn.classList.remove('opacity-100', 'visible'); | |
| scrollTopBtn.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| scrollTopBtn.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Animation for stats when they come into view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-pulse-slow'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll('.card-hover').forEach(card => { | |
| observer.observe(card); | |
| }); | |
| /* css/main.css */ | |
| @layer utilities { | |
| .text-gradient { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 25px 50px -12px rgba(139, 92, 246, 0.25); | |
| } | |
| .feature-card:hover .feature-icon { | |
| transform: rotateY(180deg); | |
| background: linear-gradient(135deg, #8B5CF6, #4F46E5); | |
| } | |
| .stat-number { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .stat-number::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: linear-gradient(90deg, #8B5CF6, #4F46E5); | |
| border-radius: 2px; | |
| } | |
| } | |
| // js/tailwind-config.js | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#8B5CF6', | |
| secondary: '#4F46E5', | |
| dark: '#0F172A', | |
| darker: '#0B1120', | |
| light: '#F1F5F9', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FlaviBot - High-Quality Discord Music Bot</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#8B5CF6', | |
| secondary: '#4F46E5', | |
| dark: '#0F172A', | |
| darker: '#0B1120', | |
| light: '#F1F5F9', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style type="text/tailwindcss"> | |
| @layer utilities { | |
| .text-gradient { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 25px 50px -12px rgba(139, 92, 246, 0.25); | |
| } | |
| .feature-card:hover .feature-icon { | |
| transform: rotateY(180deg); | |
| background: linear-gradient(135deg, #8B5CF6, #4F46E5); | |
| } | |
| .stat-number { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .stat-number::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: linear-gradient(90deg, #8B5CF6, #4F46E5); | |
| border-radius: 2px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-darker text-light font-sans overflow-x-hidden"> | |
| <!-- Hero Section --> | |
| <header class="relative bg-gradient-to-br from-darker via-[#0B1120] to-[#1E293B] min-h-screen flex items-center overflow-hidden"> | |
| <!-- Animated Background Elements --> | |
| <div class="absolute inset-0 z-0"> | |
| <div class="absolute top-20 left-10 w-64 h-64 rounded-full bg-primary opacity-10 blur-3xl"></div> | |
| <div class="absolute bottom-40 right-20 w-72 h-72 rounded-full bg-secondary opacity-10 blur-3xl"></div> | |
| <div class="absolute top-1/2 left-1/3 w-80 h-80 rounded-full bg-purple-600 opacity-10 blur-3xl"></div> | |
| </div> | |
| <div class="container mx-auto px-4 py-20 relative z-10"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> | |
| <div class="text-center lg:text-left"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold mb-4"> | |
| <span class="block text-light/70 text-lg md:text-xl mb-2">free high-quality</span> | |
| <span class="text-gradient bg-gradient-to-r from-primary to-secondary">discord music bot</span> | |
| </h1> | |
| <p class="text-lg md:text-xl text-light/80 mb-8 max-w-xl mx-auto lg:mx-0"> | |
| It supports Spotify, Apple Music, Tidal, SoundCloud, Deezer, direct links, Radio and more | |
| </p> | |
| <div class="flex flex-wrap justify-center lg:justify-start gap-6 mb-12"> | |
| <div class="text-center"> | |
| <div class="stat-number text-3xl md:text-4xl font-bold mb-1">1,136,293</div> | |
| <div class="text-light/60 text-sm">Servers</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="stat-number text-3xl md:text-4xl font-bold mb-1">80,202,068</div> | |
| <div class="text-light/60 text-sm">Users</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="stat-number text-3xl md:text-4xl font-bold mb-1">90</div> | |
| <div class="text-light/60 text-sm">Commands</div> | |
| </div> | |
| </div> | |
| <a href="https://discord.com/oauth2/authorize?client_id=684773505157431347&response_type=code&permissions=3627412734&scope=applications.commands+bot&redirect_uri=https%3A%2F%2Fflavibot.xyz%2Fdashboard" | |
| class="inline-block bg-gradient-to-r from-primary to-secondary hover:from-purple-600 hover:to-indigo-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105 hover:shadow-xl shadow-primary/30"> | |
| Add to Discord <i class="ml-2 fas fa-arrow-right"></i> | |
| </a> | |
| </div> | |
| <div class="flex justify-center"> | |
| <div class="relative"> | |
| <div class="relative z-10 w-64 h-64 md:w-80 md:h-80 rounded-2xl overflow-hidden bg-gradient-to-br from-primary/20 to-secondary/20 backdrop-blur-lg border border-light/10 animate-float"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-music text-8xl text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="absolute -top-6 -right-6 w-32 h-32 rounded-full bg-secondary/30 blur-xl"></div> | |
| <div class="absolute -bottom-6 -left-6 w-40 h-40 rounded-full bg-primary/30 blur-xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Trusted By Section --> | |
| <section class="py-20 bg-dark"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-center mb-16">They trust us</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <!-- Trusted Item 1 --> | |
| <div class="bg-darker rounded-2xl p-6 text-center card-hover"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-user text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl">rick</h3> | |
| <p class="text-primary font-bold mt-2">110k</p> | |
| </div> | |
| <!-- Trusted Item 2 --> | |
| <div class="bg-darker rounded-2xl p-6 text-center card-hover"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-radio text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl">NGRadio</h3> | |
| <p class="text-primary font-bold mt-2">5k</p> | |
| </div> | |
| <!-- Trusted Item 3 --> | |
| <div class="bg-darker rounded-2xl p-6 text-center card-hover"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-record-vinyl text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl">LimeWire</h3> | |
| <p class="text-primary font-bold mt-2">50k</p> | |
| </div> | |
| <!-- Trusted Item 4 --> | |
| <div class="bg-darker rounded-2xl p-6 text-center card-hover"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-compact-disc text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl">COMPTON DHH</h3> | |
| <p class="text-primary font-bold mt-2">60k</p> | |
| </div> | |
| <!-- Trusted Item 5 --> | |
| <div class="bg-darker rounded-2xl p-6 text-center card-hover"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-star text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl">Woojin Cho</h3> | |
| <p class="text-primary font-bold mt-2">10k</p> | |
| </div> | |
| <!-- Trusted Item 6 --> | |
| <div class="bg-darker rounded-2xl p-6 text-center card-hover"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-microphone text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl">KAMETO</h3> | |
| <p class="text-primary font-bold mt-2">70k</p> | |
| </div> | |
| <!-- Trusted Item 7 --> | |
| <div class="bg-darker rounded-2xl p-6 text-center card-hover"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-users text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl">Roma Community.</h3> | |
| <p class="text-primary font-bold mt-2">20k</p> | |
| </div> | |
| <!-- Trusted Item 8 --> | |
| <div class="bg-darker rounded-2xl p-6 text-center card-hover"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-globe text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl">Phố Người Việt</h3> | |
| <p class="text-primary font-bold mt-2">90k</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 relative bg-gradient-to-b from-dark to-darker"> | |
| <div class="container mx-auto px-4"> | |
| <!-- Music System Feature --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mb-28"> | |
| <div class="order-1 lg:order-1"> | |
| <div class="relative"> | |
| <div class="bg-gradient-to-br from-primary/20 to-secondary/20 backdrop-blur-lg rounded-2xl overflow-hidden border border-light/10 w-full h-80 flex items-center justify-center"> | |
| <i class="fas fa-music text-8xl text-primary"></i> | |
| </div> | |
| <div class="absolute -top-5 -left-5 w-40 h-40 bg-primary/20 rounded-full blur-2xl z-0"></div> | |
| <div class="absolute -bottom-5 -right-5 w-40 h-40 bg-secondary/20 rounded-full blur-2xl z-0"></div> | |
| </div> | |
| </div> | |
| <div class="order-2 lg:order-2"> | |
| <div class="feature-card"> | |
| <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center mb-6 feature-icon transition-transform duration-500"> | |
| <i class="fas fa-headphones text-2xl text-primary"></i> | |
| </div> | |
| <h2 class="text-3xl font-bold mb-4">Music System</h2> | |
| <p class="text-lg text-light/80 mb-6"> | |
| Listen to music with your friends directly on your Discord server with FlaviBot. Experience crystal-clear audio quality with support for all major platforms. | |
| </p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-primary mt-1 mr-3"></i> | |
| <span>Spotify, Apple Music, Tidal, SoundCloud, Deezer</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-primary mt-1 mr-3"></i> | |
| <span>Direct links and radio stations supported</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-primary mt-1 mr-3"></i> | |
| <span>Advanced queue management and playlist support</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Leveling System Feature --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mb-28"> | |
| <div class="order-1 lg:order-2"> | |
| <div class="relative"> | |
| <div class="bg-gradient-to-br from-primary/20 to-secondary/20 backdrop-blur-lg rounded-2xl overflow-hidden border border-light/10 w-full h-80 flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-8xl text-primary"></i> | |
| </div> | |
| <div class="absolute -top-5 -right-5 w-40 h-40 bg-primary/20 rounded-full blur-2xl z-0"></div> | |
| <div class="absolute -bottom-5 -left-5 w-40 h-40 bg-secondary/20 rounded-full blur-2xl z-0"></div> | |
| </div> | |
| </div> | |
| <div class="order-2 lg:order-1"> | |
| <div class="feature-card"> | |
| <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center mb-6 feature-icon transition-transform duration-500"> | |
| <i class="fas fa-trophy text-2xl text-primary"></i> | |
| </div> | |
| <h2 class="text-3xl font-bold mb-4">Levels System</h2> | |
| <p class="text-lg text-light/80 mb-6"> | |
| Increase your server's activity with our leveling system, and earn rewards for leveling up. Your server has a dedicated page for ranking the members with the most experience. | |
| </p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-primary mt-1 mr-3"></i> | |
| <span>Customizable XP rates and rewards</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-primary mt-1 mr-3"></i> | |
| <span>Leaderboards and role rewards</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-primary mt-1 mr-3"></i> | |
| <span>Detailed statistics and activity tracking</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Multipurpose Feature --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> | |
| <div class="order-1 lg:order-1"> | |
| <div class="relative"> | |
| <div class="bg-gradient-to-br from-primary/20 to-secondary/20 backdrop-blur-lg rounded-2xl overflow-hidden border border-light/10 w-full h-80 flex items-center justify-center"> | |
| <i class="fas fa-cogs text-8xl text-primary"></i> | |
| </div> | |
| <div class="absolute -top-5 -left-5 w-40 h-40 bg-primary/20 rounded-full blur-2xl z-0"></div> | |
| <div class="absolute -bottom-5 -right-5 w-40 h-40 bg-secondary/20 rounded-full blur-2zl z-0"></div> | |
| </div> | |
| </div> | |
| <div class="order-2 lg:order-2"> | |
| <div class="feature-card"> | |
| <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center mb-6 feature-icon transition-transform duration-500"> | |
| <i class="fas fa-sliders-h text-2xl text-primary"></i> | |
| </div> | |
| <h2 class="text-3xl font-bold mb-4">Multipurpose</h2> | |
| <p class="text-lg text-light/80 mb-6"> | |
| Start an active and fun-filled server with FlaviBot and all its unique features. From moderation to entertainment, FlaviBot has everything you need. | |
| </p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-primary mt-1 mr-3"></i> | |
| <span>Custom commands and automated responses</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-primary mt-1 mr-3"></i> | |
| <span>Moderation tools and auto-moderation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-primary mt-1 mr-3"></i> | |
| <span>Fun games, giveaways, and interactive features</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-primary/10 to-secondary/10"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Customize your server for free with FlaviBot</h2> | |
| <p class="text-xl text-light/80 max-w-2xl mx-auto mb-10"> | |
| Join over 1.1 million servers already enjoying premium music and features | |
| </p> | |
| <a href="https://discord.com/oauth2/authorize?client_id=684773505157431347&response_type=code&permissions=3627412734&scope=applications.commands+bot&redirect_uri=https%3A%2F%2Fflavibot.xyz%2Fdashboard" | |
| class="inline-block bg-gradient-to-r from-primary to-secondary hover:from-purple-600 hover:to-indigo-700 text-white font-bold py-4 px-12 rounded-full text-xl transition-all transform hover:scale-105 hover:shadow-xl shadow-primary/30"> | |
| Add to Discord Now <i class="ml-3 fas fa-arrow-right"></i> | |
| </a> | |
| <div class="mt-8 flex justify-center space-x-4 text-light/60"> | |
| <i class="fab fa-spotify text-2xl hover:text-green-500 cursor-pointer"></i> | |
| <i class="fab fa-apple text-2xl hover:text-gray-300 cursor-pointer"></i> | |
| <i class="fab fa-soundcloud text-2xl hover:text-orange-500 cursor-pointer"></i> | |
| <i class="fas fa-music text-2xl hover:text-primary cursor-pointer"></i> | |
| <i class="fas fa-radio text-2xl hover:text-secondary cursor-pointer"></i> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h3 class="text-2xl font-bold text-gradient bg-gradient-to-r from-primary to-secondary">FlaviBot</h3> | |
| <p class="text-light/60 mt-2">Premium Discord Music Experience</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-light/60 hover:text-primary transition-colors"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| <a href="#" class="text-light/60 hover:text-blue-400 transition-colors"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-light/60 hover:text-purple-500 transition-colors"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-light/10 mt-8 pt-8 text-center text-light/60 text-sm"> | |
| © 2023 FlaviBot.xyz - All rights reserved. | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Scroll to top button --> | |
| <button id="scrollTop" class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script src="js/main.js"></script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AdminServerCEO/testbot-formusic" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |