Hugging Face's logo

Spaces:
Zhypier
/
undefined
Running

App Files Community
undefined / index.html
Zhypier's picture
Zhypier
the search is till not fucntioning and make the ui black like amoled
739010f verified
Raw
History Blame Contribute Delete
23 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SingSync - Your Ultimate Karaoke Hub</title>
 <link rel="icon" type="image/x-icon" href="https://static.photos/music/200x200/1">
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://unpkg.com/feather-icons"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
 <script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 primary: '#FF5F7E',
 secondary: '#6E44FF',
 dark: '#1A1A2E',
 light: '#F5F5F5'
 }
 }
 }
 }
 </script>
 <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-color: #000000 !important;
 }
 .bg-dark, .bg-gray-800, .bg-gray-700, .bg-gray-900 {
 background-color: #000000 !important;
 border-color: #222222 !important;
 }
 .text-light {
 color: #ffffff !important;
 }
 .text-gray-400 {
 color: #666666 !important;
 }
 .text-gray-500 {
 color: #777777 !important;
 }
.video-wrapper {
 aspect-ratio: 16/9;
 }
 .queue-item:hover {
 transform: translateX(5px);
 }
 .search-result:hover {
 transform: scale(1.02);
 }
 </style>
</head>
<body class="bg-dark text-light min-h-screen">
 <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div>
<!-- Header -->
 <header class="bg-dark bg-opacity-80 backdrop-blur-md sticky top-0 z-50 border-b border-primary border-opacity-20">
 <div class="container mx-auto px-4 py-3 flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i data-feather="mic" class="text-primary w-8 h-8"></i>
 <h1 class="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">SingSync</h1>
 </div>
 <div class="flex space-x-4">
 <button class="px-4 py-2 rounded-full bg-primary hover:bg-primary/90 transition flex items-center space-x-2">
 <i data-feather="user" class="w-4 h-4"></i>
 <span>Sign In</span>
 </button>
 <button class="px-4 py-2 rounded-full bg-secondary hover:bg-secondary/90 transition flex items-center space-x-2">
 <i data-feather="plus" class="w-4 h-4"></i>
 <span>Create Room</span>
 </button>
 </div>
 </div>
 </header>
<main class="container mx-auto px-4 py-8">
 <!-- Hero Section -->
 <section class="text-center mb-12">
 <h2 class="text-4xl md:text-5xl font-bold mb-4">Sing Your Heart Out</h2>
 <p class="text-lg text-gray-300 max-w-2xl mx-auto">Discover millions of karaoke tracks, create playlists, and queue up your favorites with friends.</p>
 <!-- Search Bar -->
 <div class="max-w-2xl mx-auto mt-8 relative">
 <form id="searchForm" class="relative">
 <input type="text" placeholder="Search for songs, artists, or lyrics..."
class="w-full px-6 py-4 rounded-full bg-gray-900 border border-gray-700 focus:border-primary focus:ring-2 focus:ring-primary/50 outline-none transition">
 <button type="submit" class="absolute right-2 top-2 bg-primary p-2 rounded-full hover:bg-primary/90 transition">
 <i data-feather="search" class="w-5 h-5"></i>
 </button>
 </form>
 <div id="searchResults" class="absolute z-50 w-full mt-2 bg-gray-900 rounded-xl shadow-lg border border-gray-700 hidden max-h-96 overflow-y-auto"></div>
 </div>
</section>
<!-- Main Content -->
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
 <!-- Left Column - Now Playing -->
 <div class="lg:col-span-2 space-y-8">
 <!-- Now Playing -->
 <div class="bg-dark bg-opacity-60 backdrop-blur-md rounded-xl p-6 border border-gray-700 shadow-lg">
 <h3 class="text-xl font-semibold mb-4 flex items-center space-x-2">
 <i data-feather="play" class="text-primary w-5 h-5"></i>
 <span>Now Playing</span>
 </h3>
 <div class="video-wrapper bg-black rounded-lg overflow-hidden mb-4 relative pb-[56.25%]">
 <iframe class="absolute top-0 left-0 w-full h-full"
src="https://www.youtube.com/embed/fJ9rUzIMcZQ?autoplay=0&controls=1"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
 </div>
<div class="flex justify-between items-center">
 <div>
 <h4 class="text-xl font-bold">Bohemian Rhapsody</h4>
 <p class="text-gray-400">Queen</p>
 </div>
 <div class="flex space-x-3">
 <button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition">
 <i data-feather="skip-back" class="w-5 h-5"></i>
 </button>
 <button class="p-3 rounded-full bg-primary hover:bg-primary/90 transition">
 <i data-feather="pause" class="w-6 h-6"></i>
 </button>
 <button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition">
 <i data-feather="skip-forward" class="w-5 h-5"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Queue -->
 <div class="bg-dark bg-opacity-60 backdrop-blur-md rounded-xl p-6 border border-gray-700 shadow-lg">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-semibold flex items-center space-x-2">
 <i data-feather="list" class="text-secondary w-5 h-5"></i>
 <span>Queue</span>
 </h3>
 <button class="text-sm bg-secondary px-3 py-1 rounded-full hover:bg-secondary/90 transition">
 Clear All
 </button>
 </div>
 <div class="space-y-2 max-h-96 overflow-y-auto pr-2">
 <!-- Queue Items -->
 <div class="queue-item flex items-center justify-between p-3 bg-gray-800 rounded-lg hover:bg-gray-700 transition cursor-pointer">
 <div class="flex items-center space-x-3">
 <img src="https://static.photos/music/200x200/2" alt="Song Cover" class="w-12 h-12 rounded">
 <div>
 <h4 class="font-medium">Sweet Child O' Mine</h4>
 <p class="text-sm text-gray-400">Guns N' Roses</p>
 </div>
 </div>
 <div class="flex items-center space-x-2">
 <span class="text-sm text-gray-400">3:56</span>
 <button class="text-gray-400 hover:text-primary">
 <i data-feather="x" class="w-4 h-4"></i>
 </button>
 </div>
 </div>
 <div class="queue-item flex items-center justify-between p-3 bg-gray-800 rounded-lg hover:bg-gray-700 transition cursor-pointer">
 <div class="flex items-center space-x-3">
 <img src="https://static.photos/music/200x200/3" alt="Song Cover" class="w-12 h-12 rounded">
 <div>
 <h4 class="font-medium">Billie Jean</h4>
 <p class="text-sm text-gray-400">Michael Jackson</p>
 </div>
 </div>
 <div class="flex items-center space-x-2">
 <span class="text-sm text-gray-400">4:54</span>
 <button class="text-gray-400 hover:text-primary">
 <i data-feather="x" class="w-4 h-4"></i>
 </button>
 </div>
 </div>
 <div class="queue-item flex items-center justify-between p-3 bg-gray-800 rounded-lg hover:bg-gray-700 transition cursor-pointer">
 <div class="flex items-center space-x-3">
 <img src="https://static.photos/music/200x200/4" alt="Song Cover" class="w-12 h-12 rounded">
 <div>
 <h4 class="font-medium">Livin' on a Prayer</h4>
 <p class="text-sm text-gray-400">Bon Jovi</p>
 </div>
 </div>
 <div class="flex items-center space-x-2">
 <span class="text-sm text-gray-400">4:09</span>
 <button class="text-gray-400 hover:text-primary">
 <i data-feather="x" class="w-4 h-4"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Right Column - Playlists and Search Results -->
 <div class="space-y-8">
 <!-- Playlists -->
 <div class="bg-dark bg-opacity-60 backdrop-blur-md rounded-xl p-6 border border-gray-700 shadow-lg">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-semibold flex items-center space-x-2">
 <i data-feather="folder" class="text-primary w-5 h-5"></i>
 <span>Your Playlists</span>
 </h3>
 <button class="p-1 rounded-full bg-primary hover:bg-primary/90 transition">
 <i data-feather="plus" class="w-4 h-4"></i>
 </button>
 </div>
 <div class="space-y-3">
 <div class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-700 transition cursor-pointer">
 <img src="https://static.photos/music/200x200/5" alt="Playlist Cover" class="w-12 h-12 rounded">
 <div>
 <h4 class="font-medium">80s Rock Anthems</h4>
 <p class="text-sm text-gray-400">24 songs</p>
 </div>
 </div>
 <div class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-700 transition cursor-pointer">
 <img src="https://static.photos/music/200x200/6" alt="Playlist Cover" class="w-12 h-12 rounded">
 <div>
 <h4 class="font-medium">Pop Divas</h4>
 <p class="text-sm text-gray-400">18 songs</p>
 </div>
 </div>
 <div class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-700 transition cursor-pointer">
 <img src="https://static.photos/music/200x200/7" alt="Playlist Cover" class="w-12 h-12 rounded">
 <div>
 <h4 class="font-medium">Karaoke Classics</h4>
 <p class="text-sm text-gray-400">32 songs</p>
 </div>
 </div>
 </div>
 </div>
 <!-- Genre/Language Filters -->
 <div class="bg-dark bg-opacity-60 backdrop-blur-md rounded-xl p-6 border border-gray-700 shadow-lg mb-6">
 <h3 class="text-xl font-semibold mb-4 flex items-center space-x-2">
 <i data-feather="filter" class="text-secondary w-5 h-5"></i>
 <span>Filters</span>
 </h3>
 <div class="flex flex-wrap gap-2">
 <button class="px-3 py-1 rounded-full bg-gray-700 hover:bg-primary/20 border border-primary/30 transition text-sm">All</button>
 <button class="px-3 py-1 rounded-full bg-gray-700 hover:bg-primary/20 border border-primary/30 transition text-sm">Pop</button>
 <button class="px-3 py-1 rounded-full bg-gray-700 hover:bg-primary/20 border border-primary/30 transition text-sm">Rock</button>
 <button class="px-3 py-1 rounded-full bg-gray-700 hover:bg-primary/20 border border-primary/30 transition text-sm">Hip-Hop</button>
 <button class="px-3 py-1 rounded-full bg-gray-700 hover:bg-primary/20 border border-primary/30 transition text-sm">R&B</button>
 <button class="px-3 py-1 rounded-full bg-gray-700 hover:bg-primary/20 border border-primary/30 transition text-sm">Country</button>
 <button class="px-3 py-1 rounded-full bg-gray-700 hover:bg-primary/20 border border-primary/30 transition text-sm">EDM</button>
 <button class="px-3 py-1 rounded-full bg-gray-700 hover:bg-primary/20 border border-primary/30 transition text-sm">Jazz</button>
 <button class="px-3 py-1 rounded-full bg-gray-700 hover:bg-primary/20 border border-primary/30 transition text-sm">English</button>
 <button class="px-3 py-1 rounded-full bg-gray-700 hover:bg-primary/20 border border-primary/30 transition text-sm">Spanish</button>
 <button class="px-3 py-1 rounded-full bg-gray-700 hover:bg-primary/20 border border-primary/30 transition text-sm">Korean</button>
 <button class="px-3 py-1 rounded-full bg-gray-700 hover:bg-primary/20 border border-primary/30 transition text-sm">Japanese</button>
 </div>
 </div>
<!-- Search Results -->
 <div class="bg-dark bg-opacity-60 backdrop-blur-md rounded-xl p-6 border border-gray-700 shadow-lg">
<h3 class="text-xl font-semibold mb-4 flex items-center space-x-2">
 <i data-feather="search" class="text-secondary w-5 h-5"></i>
 <span>Popular Now</span>
 </h3>
 <div class="space-y-4">
 <div class="search-result flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-700 transition cursor-pointer">
 <img src="https://static.photos/music/200x200/8" alt="Song Cover" class="w-12 h-12 rounded">
 <div class="flex-1">
 <h4 class="font-medium">Blinding Lights</h4>
 <p class="text-sm text-gray-400">The Weeknd</p>
 </div>
 <button class="p-2 rounded-full bg-secondary hover:bg-secondary/90 transition">
 <i data-feather="plus" class="w-4 h-4"></i>
 </button>
 </div>
 <div class="search-result flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-700 transition cursor-pointer">
 <img src="https://static.photos/music/200x200/9" alt="Song Cover" class="w-12 h-12 rounded">
 <div class="flex-1">
 <h4 class="font-medium">Levitating</h4>
 <p class="text-sm text-gray-400">Dua Lipa</p>
 </div>
 <button class="p-2 rounded-full bg-secondary hover:bg-secondary/90 transition">
 <i data-feather="plus" class="w-4 h-4"></i>
 </button>
 </div>
 <div class="search-result flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-700 transition cursor-pointer">
 <img src="https://static.photos/music/200x200/10" alt="Song Cover" class="w-12 h-12 rounded">
 <div class="flex-1">
 <h4 class="font-medium">Stay</h4>
 <p class="text-sm text-gray-400">The Kid LAROI, Justin Bieber</p>
 </div>
 <button class="p-2 rounded-full bg-secondary hover:bg-secondary/90 transition">
 <i data-feather="plus" class="w-4 h-4"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </main>
<footer class="bg-dark bg-opacity-80 backdrop-blur-md border-t border-gray-700 mt-12">
 <div class="container mx-auto px-4 py-6">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="flex items-center space-x-2 mb-4 md:mb-0">
 <i data-feather="mic" class="text-primary w-6 h-6"></i>
 <span class="font-bold">SingSync</span>
 </div>
 <div class="flex space-x-6">
 <a href="#" class="hover:text-primary transition">About</a>
 <a href="#" class="hover:text-primary transition">Features</a>
 <a href="#" class="hover:text-primary transition">Pricing</a>
 <a href="#" class="hover:text-primary transition">Contact</a>
 </div>
 <div class="flex space-x-4 mt-4 md:mt-0">
 <a href="#" class="p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition">
 <i data-feather="facebook" class="w-4 h-4"></i>
 </a>
 <a href="#" class="p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition">
 <i data-feather="twitter" class="w-4 h-4"></i>
 </a>
 <a href="#" class="p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition">
 <i data-feather="instagram" class="w-4 h-4"></i>
 </a>
 </div>
 </div>
 <div class="text-center text-sm text-gray-500 mt-6">
 © 2023 SingSync. All rights reserved. Made with ❤️ for karaoke lovers.
 </div>
 </div>
 </footer>
 <script>
 // Search functionality
 document.getElementById('searchForm').addEventListener('submit', async function(e) {
 e.preventDefault();
 const query = this.querySelector('input').value.trim();
 if (!query) return;
 const resultsContainer = document.getElementById('searchResults');
 try {
 // Show loading state
 resultsContainer.innerHTML = `
 <div class="p-4 text-center text-gray-400">
 <i data-feather="loader" class="w-6 h-6 animate-spin mx-auto"></i>
 <p class="mt-2">Searching...</p>
 </div>`;
 feather.replace();
 resultsContainer.classList.remove('hidden');
 // Fetch from actual API
 const response = await fetch(`https://itunes.apple.com/search?term=${encodeURIComponent(query)}&media=music&limit=5`);
 const data = await response.json();
if (data.results && data.results.length > 0) {
 resultsContainer.innerHTML = data.results.map(song => `
 <div class="search-result flex items-center p-3 hover:bg-gray-900 transition cursor-pointer border-b border-gray-800 last:border-0">
 <img src="${song.artworkUrl100.replace('100x100', '200x200')}" alt="${song.trackName}" class="w-12 h-12 rounded">
 <div class="ml-3 flex-1">
 <h4 class="font-medium">${song.trackName}</h4>
 <p class="text-sm text-gray-400">${song.artistName}</p>
 </div>
 <span class="text-sm text-gray-500 mr-3">${Math.floor(song.trackTimeMillis/60000)}:${String(Math.floor((song.trackTimeMillis%60000)/1000)).padStart(2, '0')}</span>
 <button class="p-2 rounded-full bg-secondary hover:bg-secondary/90 transition" onclick="addToQueue('${song.trackId}')">
 <i data-feather="plus" class="w-4 h-4"></i>
 </button>
 </div>
 `).join('');
// Filter mock results based on query
 const filteredResults = mockResults.filter(song =>
song.title.toLowerCase().includes(query.toLowerCase()) ||
song.artist.toLowerCase().includes(query.toLowerCase())
 );
 if (filteredResults.length === 0) {
 resultsContainer.innerHTML = `
 <div class="p-4 text-center text-gray-400">
 <i data-feather="frown" class="w-6 h-6 mx-auto"></i>
 <p class="mt-2">No results found for "${query}"</p>
 </div>`;
 } else {
 resultsContainer.innerHTML = filteredResults.map(song => `
 <div class="search-result flex items-center p-3 hover:bg-gray-800 transition cursor-pointer border-b border-gray-800 last:border-0">
 <img src="${song.cover}" alt="${song.title}" class="w-12 h-12 rounded">
 <div class="ml-3 flex-1">
 <h4 class="font-medium">${song.title}</h4>
 <p class="text-sm text-gray-400">${song.artist}</p>
 </div>
 <span class="text-sm text-gray-500 mr-3">${song.duration}</span>
 <button class="p-2 rounded-full bg-secondary hover:bg-secondary/90 transition">
 <i data-feather="plus" class="w-4 h-4"></i>
 </button>
 </div>
 `).join('');
 }
 feather.replace();
 } catch (error) {
 resultsContainer.innerHTML = `
 <div class="p-4 text-center text-red-400">
 <i data-feather="alert-circle" class="w-6 h-6 mx-auto"></i>
 <p class="mt-2">Error searching. Please try again.</p>
 </div>`;
 feather.replace();
 }
 });
 // Close results when clicking outside
 document.addEventListener('click', function(e) {
 if (!document.getElementById('searchForm').contains(e.target)) {
 document.getElementById('searchResults').classList.add('hidden');
 }
 });
 // Mobile responsive adjustments
function handleResize() {
 if (window.innerWidth < 768) {
 document.querySelector('.grid').classList.remove('lg:grid-cols-3');
 document.querySelector('.grid').classList.add('grid-cols-1');
 document.querySelector('.lg\\:col-span-2').classList.remove('lg:col-span-2');
 } else {
 document.querySelector('.grid').classList.add('lg:grid-cols-3');
 document.querySelector('.grid').classList.remove('grid-cols-1');
 document.querySelector('.lg\\:col-span-2').classList.add('lg:col-span-2');
 }
 }
 window.addEventListener('resize', handleResize);
 handleResize();
 // Initialize Vanta.js background - Black Waves
 VANTA.WAVES({
 el: "#vanta-bg",
 mouseControls: true,
 touchControls: true,
 gyroControls: false,
 minHeight: 200.00,
 minWidth: 200.00,
 scale: 1.00,
 scaleMobile: 1.00,
 color: 0x0,
 shininess: 100.00,
 waveHeight: 10.00,
 waveSpeed: 0.50,
 zoom: 0.65
 });
// Initialize animations
 document.addEventListener('DOMContentLoaded', () => {
 // Simple fade-in animation for elements
 anime({
 targets: 'header, section, .bg-dark',
 opacity: [0, 1],
 duration: 800,
 easing: 'easeInOutQuad',
 delay: anime.stagger(100)
 });
 });
 </script>
 <script>
 feather.replace();
// Dark mode toggle (example - could be expanded)
 document.addEventListener('keydown', function(e) {
 if (e.ctrlKey && e.key === 'd') {
 document.body.classList.toggle('bg-black');
 }
 });
 </script>
</body>
</html>