the search is till not fucntioning and make the ui black like amoled

index.html

@@ -27,8 +27,22 @@
       @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;
       }
-      .video-wrapper {
+      .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 {
@@ -318,8 +332,7 @@
         if (!query) return;
 
         const resultsContainer = document.getElementById('searchResults');
-        
-        try {
+      try {
           // Show loading state
           resultsContainer.innerHTML = `
             <div class="p-4 text-center text-gray-400">
@@ -329,17 +342,25 @@
           feather.replace();
           resultsContainer.classList.remove('hidden');
 
-          // Fetch from API (mock response for example)
-          // In a real app, you would fetch from your backend or music API
-          const mockResults = [
-            { id: 1, title: "Dark Paradise", artist: "Lana Del Rey", duration: "3:42", cover: "https://static.photos/music/200x200/11" },
-            { id: 2, title: "Midnight City", artist: "M83", duration: "4:03", cover: "https://static.photos/music/200x200/12" },
-            { id: 3, title: "Nightcall", artist: "Kavinsky", duration: "4:18", cover: "https://static.photos/music/200x200/13" },
-            { id: 4, title: "Black Out Days", artist: "Phantogram", duration: "3:47", cover: "https://static.photos/music/200x200/14" },
-            { id: 5, title: "Bury a Friend", artist: "Billie Eilish", duration: "3:13", cover: "https://static.photos/music/200x200/15" }
-          ];
-
-          // Filter mock results based on query
+          // 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())
@@ -399,10 +420,9 @@ function handleResize() {
 
       window.addEventListener('resize', handleResize);
       handleResize();
-
-      // Initialize Vanta.js background
+      // Initialize Vanta.js background - Black Waves
       VANTA.WAVES({
-el: "#vanta-bg",
+        el: "#vanta-bg",
         mouseControls: true,
         touchControls: true,
         gyroControls: false,
@@ -410,14 +430,13 @@ el: "#vanta-bg",
         minWidth: 200.00,
         scale: 1.00,
         scaleMobile: 1.00,
-        color: 0x6e44ff,
-        shininess: 77.00,
-        waveHeight: 20.00,
-        waveSpeed: 0.80,
+        color: 0x0,
+        shininess: 100.00,
+        waveHeight: 10.00,
+        waveSpeed: 0.50,
         zoom: 0.65
       });
-
-      // Initialize animations
+// Initialize animations
       document.addEventListener('DOMContentLoaded', () => {
         // Simple fade-in animation for elements
         anime({