Hugging Face's logo

Spaces:
TEMEW
/
beat-adder
Running

App Files Community
beat-adder / index.html
TEMEW's picture
TEMEW
Add 3 files
8ad5fb0 verified
Raw History Blame Contribute Delete
15.8 kB
<!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>