Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FlaviBot - Discord Music Bot</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #6366f1, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .feature-card { | |
| background: rgba(30, 41, 59, 0.5); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3); | |
| } | |
| .stats-card { | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2)); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-900/80 backdrop-blur-md sticky top-0 z-50 border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="/" class="flex-shrink-0"> | |
| <img src="https://flavibot.xyz/_ipx/s_150x30/images/brand.svg" alt="FlaviBot Logo" class="h-8"> | |
| </a> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="/commands" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Commands</a> | |
| <a href="/faq" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">FAQ</a> | |
| <a href="/team" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Team</a> | |
| <a href="/status" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Status</a> | |
| <a href="/top-music" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Top Songs</a> | |
| <a href="/radios" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Radios</a> | |
| <a href="/premium" class="text-indigo-400 hover:text-indigo-300 px-3 py-2 rounded-md text-sm font-medium transition-colors">Premium</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <!-- Mobile menu button --> | |
| <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none"> | |
| <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-gray-900/95"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="/commands" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Commands</a> | |
| <a href="/faq" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">FAQ</a> | |
| <a href="/team" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a> | |
| <a href="/status" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Status</a> | |
| <a href="/top-music" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Top Songs</a> | |
| <a href="/radios" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Radios</a> | |
| <a href="/premium" class="text-indigo-400 hover:text-indigo-300 block px-3 py-2 rounded-md text-base font-medium">Premium</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32"> | |
| <div class="relative z-10 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <span class="text-indigo-400 font-semibold text-lg mb-2 block">free high-quality</span> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> | |
| <span class="gradient-text">discord music bot</span> | |
| </h1> | |
| <p class="text-lg text-gray-300 mb-8 max-w-lg"> | |
| It supports Spotify, Apple Music, Tidal, SoundCloud, Deezer, direct links, Radio and more | |
| </p> | |
| <div class="flex flex-wrap gap-4 mb-8"> | |
| <div class="stats-card px-6 py-4 rounded-lg"> | |
| <div class="text-3xl font-bold text-indigo-300">0</div> | |
| <div class="text-gray-300 text-sm">Servers</div> | |
| </div> | |
| <div class="stats-card px-6 py-4 rounded-lg"> | |
| <div class="text-3xl font-bold text-indigo-300">0</div> | |
| <div class="text-gray-300 text-sm">Users</div> | |
| </div> | |
| <div class="stats-card px-6 py-4 rounded-lg"> | |
| <div class="text-3xl font-bold text-indigo-300">0</div> | |
| <div class="text-gray-300 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="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-full transition-colors inline-flex items-center"> | |
| Add to Discord | |
| <svg class="w-5 h-5 ml-2" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://flavibot.xyz/_ipx/s_500x333/images/home/music.svg" alt="Music System" class="w-full max-w-md"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-r from-transparent to-indigo-900/20 -z-10"></div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 bg-gray-900/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Music System --> | |
| <div class="feature-card p-8 rounded-xl"> | |
| <div class="w-16 h-16 bg-indigo-600/20 rounded-lg flex items-center justify-center mb-6"> | |
| <svg class="w-8 h-8 text-indigo-400" 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="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Music System</h3> | |
| <p class="text-gray-300 mb-4"> | |
| Listen to music with your friends directly on your Discord server with FlaviBot. | |
| </p> | |
| <img src="https://flavibot.xyz/_ipx/s_500x333/images/home/music.svg" alt="Music System" class="rounded-lg mt-4"> | |
| </div> | |
| <!-- Levels System --> | |
| <div class="feature-card p-8 rounded-xl"> | |
| <div class="w-16 h-16 bg-indigo-600/20 rounded-lg flex items-center justify-center mb-6"> | |
| <svg class="w-8 h-8 text-indigo-400" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Levels System</h3> | |
| <p class="text-gray-300 mb-4"> | |
| 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> | |
| <img src="https://flavibot.xyz/_ipx/s_500x333/images/home/levels.svg" alt="Levels System" class="rounded-lg mt-4"> | |
| </div> | |
| <!-- Multipurpose --> | |
| <div class="feature-card p-8 rounded-xl"> | |
| <div class="w-16 h-16 bg-indigo-600/20 rounded-lg flex items-center justify-center mb-6"> | |
| <svg class="w-8 h-8 text-indigo-400" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Multipurpose</h3> | |
| <p class="text-gray-300 mb-4"> | |
| Start an active and fun-filled server with FlaviBot and all its unique features | |
| </p> | |
| <img src="https://flavibot.xyz/_ipx/s_500x333/images/home/multipurpose.svg" alt="Multipurpose" class="rounded-lg mt-4"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-br from-indigo-900/30 to-purple-900/30"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 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-gray-300 mb-8 max-w-3xl mx-auto"> | |
| Enhance your Discord experience with premium quality music and features at no cost. | |
| </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="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-full transition-colors inline-flex items-center mx-auto"> | |
| Add to Discord | |
| <svg class="w-5 h-5 ml-2" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900/80 border-t border-gray-800 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">FlaviBot</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="/commands" class="text-gray-400 hover:text-white transition-colors">Commands</a></li> | |
| <li><a href="/faq" class="text-gray-400 hover:text-white transition-colors">FAQ</a></li> | |
| <li><a href="/team" class="text-gray-400 hover:text-white transition-colors">Team</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="/status" class="text-gray-400 hover:text-white transition-colors">Status</a></li> | |
| <li><a href="/top-music" class="text-gray-400 hover:text-white transition-colors">Top Songs</a></li> | |
| <li><a href="/radios" class="text-gray-400 hover:text-white transition-colors">Radios</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Premium</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="/premium" class="text-gray-400 hover:text-white transition-colors">Features</a></li> | |
| <li><a href="/premium#pricing" class="text-gray-400 hover:text-white transition-colors">Pricing</a></li> | |
| <li><a href="/premium#benefits" class="text-gray-400 hover:text-white transition-colors">Benefits</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Connect</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 0C5.373 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.723-4.042-1.608-4.042-1.608-.546-1.386-1.332-1.754-1.332-1.754-1.09-.744.083-.729.083-.729 1.205.086 1.838 1.236 1.838 1.236 1.07 1.835 2.807 1.305 3.492.998.108-.775.418-1.305.762-1.604-2.665-.305-5.467-1.332-5.467-5.93 0-1.312.47-2.382 1.236-3.22-.124-.304-.536-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.956-.266 1.983-.4 3.003-.404 1.02.004 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.655 1.652.243 2.872.118 3.176.77.838 1.235 1.908 1.235 3.22 0 4.61-2.805 5.621-5.476 5.919.43.372.824 1.102.824 2.222 0 1.604-.015 2.897-.015 3.29 0 .322.216.694.825.576C20.565 21.796 24 17.3 24 12c0-6.627-5.373-12-12-12z"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm6.927 17.558c-.24.44-.683.728-1.21.728-.507 0-.94-.288-1.187-.728-.36-.656-.665-1.407-.914-2.24-.416-1.417-.728-2.92-.728-4.498 0-1.58.312-3.082.728-4.498.25-.833.553-1.584.914-2.24.247-.44.68-.728 1.187-.728.527 0 .97.288 1.21.728.393.72.7 1.5.917 2.334.434 1.67.666 3.46.666 5.304 0 1.845-.232 3.635-.666 5.305-.216.834-.524 1.614-.917 2.334z"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-400 text-sm"> | |
| <p>© 2023 FlaviBot. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Animate stats counter | |
| const stats = document.querySelectorAll('.stats-card div:first-child'); | |
| const targetValues = [10000, 50000, 150]; // Example target values | |
| const animateCounters = () => { | |
| stats.forEach((stat, index) => { | |
| let current = 0; | |
| const target = targetValues[index]; | |
| const increment = target / 50; | |
| const timer = setInterval(() => { | |
| current += increment; | |
| if (current >= target) { | |
| clearInterval(timer); | |
| current = target; | |
| } | |
| stat.textContent = Math.floor(current).toLocaleString(); | |
| }, 20); | |
| }); | |
| }; | |
| // Start animation when stats are in view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateCounters(); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.5 }); | |
| const statsSection = document.querySelector('.stats-card'); | |
| if (statsSection) { | |
| observer.observe(statsSection); | |
| } | |
| </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/flavi-web" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |