Blame for index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BeatMatch - Song Detection & Music Mixer</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">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: white;
            min-height: 100vh;
        }
        
        .waveform {
            background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.1) 100%);
            height: 4px;
            border-radius: 2px;
            position: relative;
            overflow: hidden;
        }
        
        .waveform::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, #4f46e5 0%, #a855f7 50%, #ec4899 100%);
            transform: translateX(-100%);
            animation: waveform 2s infinite linear;
        }
        
        @keyframes waveform {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        .music-note {
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body class="relative overflow-x-hidden">
    <!-- App Header -->
    <header class="sticky top-0 z-10 bg-gradient-to-r from-indigo-900 to-purple-900 p-4 shadow-lg">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fas fa-music text-2xl text-pink-400"></i>
                <h1 class="text-xl font-bold">BeatMatch</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button class="p-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 transition">
                    <i class="fas fa-search"></i>
                </button>
                <button class="p-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 transition">
                    <i class="fas fa-user"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="pb-24">
        <!-- Song Detection Section -->
        <section class="p-6">
            <div class="bg-gradient-to-br from-purple-900 to-indigo-900 rounded-2xl p-6 shadow-xl">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold">Detect Songs</h2>
                    <i class="fas fa-wifi text-blue-300"></i>
                </div>
                
                <div class="text-center py-8">
                    <div class="relative mx-auto w-40 h-40 mb-6">
                        <div class="absolute inset-0 rounded-full bg-indigo-800 opacity-30 pulse"></div>
                        <div class="absolute inset-4 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center">
                            <i class="fas fa-music text-4xl text-white music-note"></i>
                        </div>
                    </div>
                    
                    <p class="text-sm text-gray-300 mb-6">Play or hum a song to detect it</p>
                    
                    <button id="detectBtn" class="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition transform hover:scale-105">
                        <i class="fas fa-microphone mr-2"></i> Detect Song
                    </button>
                </div>
                
                <div id="detectionResult" class="hidden mt-6 bg-black bg-opacity-30 rounded-xl p-4">
                    <div class="flex items-center space-x-4">
                        <img src="https://via.placeholder.com/60" alt="Album Cover" class="w-14 h-14 rounded-lg">
                        <div class="flex-1">
                            <h3 class="font-medium">Detected Song</h3>
                            <p class="text-sm text-gray-300">Artist Name</p>
                        </div>
                        <button class="p-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 transition">
                            <i class="fas fa-ellipsis-h"></i>
                        </button>
                    </div>
                    
                    <div class="mt-4">
                        <div class="waveform mb-2"></div>
                        <div class="flex items-center justify-between text-xs text-gray-400">
                            <span>0:00</span>
                            <span>3:45</span>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-center space-x-8 mt-6">
                        <button class="p-3 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 transition">
                            <i class="fas fa-backward"></i>
                        </button>
                        <button class="p-4 rounded-full bg-pink-500 hover:bg-pink-600 transition transform hover:scale-110">
                            <i class="fas fa-play"></i>
                        </button>
                        <button class="p-3 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 transition">
                            <i class="fas fa-forward"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- Add Music Section -->
        <section class="px-6">
            <h2 class="text-lg font-semibold mb-4">Add Music to This Song</h2>
            
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-gradient-to-br from-blue-900 to-indigo-900 rounded-xl p-4 shadow">
                    <div class="flex items-center justify-center h-16 w-16 bg-blue-800 bg-opacity-50 rounded-lg mb-3">
                        <i class="fas fa-drum text-2xl text-blue-300"></i>
                    </div>
                    <h3 class="font-medium">Beats</h3>
                    <p class="text-xs text-gray-400 mt-1">Add drum patterns</p>
                    <button class="mt-3 text-xs bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded-full transition">
                        Add
                    </button>
                </div>
                
                <div class="bg-gradient-to-br from-purple-900 to-pink-900 rounded-xl p-4 shadow">
                    <div class="flex items-center justify-center h-16 w-16 bg-pink-800 bg-opacity-50 rounded-lg mb-3">
                        <i class="fas fa-guitar text-2xl text-pink-300"></i>
                    </div>
                    <h3 class="font-medium">Bassline</h3>
                    <p class="text-xs text-gray-400 mt-1">Enhance low end</p>
                    <button class="mt-3 text-xs bg-pink-600 hover:bg-pink-700 text-white py-1 px-3 rounded-full transition">
                        Add
                    </button>
                </div>
                
                <div class="bg-gradient-to-br from-yellow-900 to-orange-900 rounded-xl p-4 shadow">
                    <div class="flex items-center justify-center h-16 w-16 bg-orange-800 bg-opacity-50 rounded-lg mb-3">
                        <i class="fas fa-sliders-h text-2xl text-orange-300"></i>
                    </div>
                    <h3 class="font-medium">Effects</h3>
                    <p class="text-xs text-gray-400 mt-1">Reverb, delay, etc.</p>
                    <button class="mt-3 text-xs bg-orange-600 hover:bg-orange-700 text-white py-1 px-3 rounded-full transition">
                        Add
                    </button>
                </div>
                
                <div class="bg-gradient-to-br from-green-900 to-teal-900 rounded-xl p-4 shadow">
                    <div class="flex items-center justify-center h-16 w-16 bg-teal-800 bg-opacity-50 rounded-lg mb-3">
                        <i class="fas fa-robot text-2xl text-teal-300"></i>
                    </div>
                    <h3 class="font-medium">AI Enhance</h3>
                    <p class="text-xs text-gray-400 mt-1">Auto-improve track</p>
                    <button class="mt-3 text-xs bg-teal-600 hover:bg-teal-700 text-white py-1 px-3 rounded-full transition">
                        Add
                    </button>
                </div>
            </div>
        </section>

        <!-- Recent Detections -->
        <section class="mt-8 px-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold">Recent Detections</h2>
                <button class="text-sm text-gray-400 hover:text-white transition">See All</button>
            </div>
            
            <div class="space-y-3">
                <div class="flex items-center space-x-3 bg-white bg-opacity-5 hover:bg-opacity-10 rounded-xl p-3 transition">
                    <img src="https://via.placeholder.com/50" alt="Album Cover" class="w-12 h-12 rounded-lg">
                    <div class="flex-1">
                        <h3 class="font-medium">Song Title 1</h3>
                        <p class="text-xs text-gray-400">Artist Name</p>
                    </div>
                    <button class="p-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 transition">
                        <i class="fas fa-ellipsis-h"></i>
                    </button>
                </div>
                
                <div class="flex items-center space-x-3 bg-white bg-opacity-5 hover:bg-opacity-10 rounded-xl p-3 transition">
                    <img src="https://via.placeholder.com/50" alt="Album Cover" class="w-12 h-12 rounded-lg">
                    <div class="flex-1">
                        <h3 class="font-medium">Song Title 2</h3>
                        <p class="text-xs text-gray-400">Artist Name</p>
                    </div>
                    <button class="p-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 transition">
                        <i class="fas fa-ellipsis-h"></i>
                    </button>
                </div>
                
                <div class="flex items-center space-x-3 bg-white bg-opacity-5 hover:bg-opacity-10 rounded-xl p-3 transition">
                    <img src="https://via.placeholder.com/50" alt="Album Cover" class="w-12 h-12 rounded-lg">
                    <div class="flex-1">
                        <h3 class="font-medium">Song Title 3</h3>
                        <p class="text-xs text-gray-400">Artist Name</p>
                    </div>
                    <button class="p-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 transition">
                        <i class="fas fa-ellipsis-h"></i>
                    </button>
                </div>
            </div>
        </section>
    </main>

    <!-- Bottom Navigation -->
    <nav class="fixed bottom-0 left-0 right-0 bg-gradient-to-t from-gray-900 to-gray-800 border-t border-gray-700 p-2">
        <div class="flex justify-around items-center">
            <button class="flex flex-col items-center p-2 text-pink-500">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">Home</span>
            </button>
            <button class="flex flex-col items-center p-2 text-gray-400 hover:text-white transition">
                <i class="fas fa-compass text-xl"></i>
                <span class="text-xs mt-1">Discover</span>
            </button>
            <button class="flex flex-col items-center p-2 text-gray-400 hover:text-white transition">
                <i class="fas fa-music text-xl"></i>
                <span class="text-xs mt-1">Library</span>
            </button>
            <button class="flex flex-col items-center p-2 text-gray-400 hover:text-white transition">
                <i class="fas fa-cog text-xl"></i>
                <span class="text-xs mt-1">Settings</span>
            </button>
        </div>
    </nav>

    <script>
        // Song detection functionality
        document.getElementById('detectBtn').addEventListener('click', function() {
            const detectBtn = this;
            const resultSection = document.getElementById('detectionResult');
            
            // Show loading state
            detectBtn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Listening...';
            detectBtn.classList.add('opacity-75');
            detectBtn.disabled = true;
            
            // Simulate song detection after 3 seconds
            setTimeout(() => {
                detectBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Song Detected';
                detectBtn.classList.remove('bg-gradient-to-r', 'from-pink-500', 'to-purple-600', 'hover:from-pink-600', 'hover:to-purple-700');
                detectBtn.classList.add('bg-green-500', 'hover:bg-green-600');
                
                // Show result section
                resultSection.classList.remove('hidden');
                resultSection.classList.add('animate__animated', 'animate__fadeIn');
                
                // Reset button after 5 seconds
                setTimeout(() => {
                    detectBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i> Detect Song';
                    detectBtn.classList.remove('bg-green-500', 'hover:bg-green-600', 'opacity-75');
                    detectBtn.classList.add('bg-gradient-to-r', 'from-pink-500', 'to-purple-600', 'hover:from-pink-600', 'hover:to-purple-700');
                    detectBtn.disabled = false;
                }, 5000);
            }, 3000);
        });
        
        // Simulate music player functionality
        const playButtons = document.querySelectorAll('[class*="fa-play"]');
        playButtons.forEach(button => {
            button.addEventListener('click', function() {
                const icon = this;
                if (icon.classList.contains('fa-play')) {
                    icon.classList.remove('fa-play');
                    icon.classList.add('fa-pause');
                } else {
                    icon.classList.remove('fa-pause');
                    icon.classList.add('fa-play');
                }
            });
        });
    </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=TEMEW/beat-adder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>