Update index.html

index.html

@@ -39,7 +39,6 @@
             font-weight: 600;
             text-transform: uppercase;
             margin-bottom: 15px;
-            letter-spacing: 0.05em;
         }
 
         .category-item {
@@ -85,10 +84,6 @@
             padding: 30px;
         }
 
-        .header {
-            margin-bottom: 30px;
-        }
-
         .header h1 {
             font-size: 2rem;
             margin-bottom: 10px;
@@ -116,7 +111,7 @@
             display: flex;
             align-items: center;
             gap: 15px;
-            margin-bottom: 25px;
+            margin: 30px 0 25px;
             padding-bottom: 15px;
             border-bottom: 2px solid #334155;
         }
@@ -129,7 +124,6 @@
             font-size: 1.75rem;
             color: #f1f5f9;
             text-transform: uppercase;
-            letter-spacing: 0.05em;
         }
 
         .playlist-grid {
@@ -158,41 +152,35 @@
         .playlist-thumbnail {
             width: 100%;
             height: 160px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             position: relative;
             overflow: hidden;
         }
 
-        .playlist-thumbnail img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-
         .play-overlay {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            width: 60px;
-            height: 60px;
-            background: rgba(0, 0, 0, 0.7);
+            width: 70px;
+            height: 70px;
+            background: rgba(255, 0, 0, 0.9);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: all 0.3s;
+            z-index: 10;
         }
 
         .playlist-card:hover .play-overlay {
-            background: rgba(255, 0, 0, 0.9);
-            transform: translate(-50%, -50%) scale(1.1);
+            transform: translate(-50%, -50%) scale(1.15);
+            box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
         }
 
         .play-overlay::after {
             content: '▶';
             color: white;
-            font-size: 24px;
+            font-size: 28px;
             margin-left: 4px;
         }
 
@@ -205,17 +193,17 @@
             color: white;
             padding: 4px 10px;
             border-radius: 4px;
-            font-size: 0.75rem;
+            font-size: 0.7rem;
             font-weight: 600;
             display: inline-block;
+            margin-bottom: 10px;
         }
 
         .playlist-title {
             color: #f1f5f9;
             font-weight: 600;
-            font-size: 1rem;
-            margin-bottom: 10px;
-            margin-top: 10px;
+            font-size: 1.05rem;
+            margin-bottom: 8px;
         }
 
         .playlist-meta {
@@ -223,7 +211,7 @@
             align-items: center;
             gap: 10px;
             font-size: 0.85rem;
-            color: #94a3b8;
+            color: #64748b;
         }
 
         .loading {
@@ -288,6 +276,23 @@
         let allData = null;
         let currentCategory = null;
 
+        const gradients = [
+            'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+            'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+            'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
+            'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
+            'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
+            'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
+            'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
+            'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
+            'linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%)'
+        ];
+
+        function getGradient(index) {
+            return gradients[index % gradients.length];
+        }
+
         async function loadData() {
             try {
                 const response = await fetch('playlists.json');
@@ -326,17 +331,9 @@
             
             content.innerHTML = '<div class="category-header"><span class="icon">' + category.icon + '</span><h2>' + category.name + '</h2></div><div class="playlist-grid">' + 
                 category.playlists.map((pl, index) => {
-                    const playlistId = extractPlaylistId(pl.url);
-                    const thumbnailUrl = 'https://img.youtube.com/vi/' + playlistId.substring(2, 13) + '/mqdefault.jpg';
-                    const fallbackUrl = 'https://via.placeholder.com/320x180/667eea/ffffff?text=' + encodeURIComponent(pl.title);
-                    return '<a href="' + pl.url + '" target="_blank" class="playlist-card"><div class="playlist-thumbnail"><img src="' + thumbnailUrl + '" alt="' + pl.title + '" onerror="this.src=\'' + fallbackUrl + '\'"><div class="play-overlay"></div></div><div class="playlist-info"><div class="youtube-badge">▶ YOUTUBE</div><div class="playlist-title">' + pl.title + '</div><div class="playlist-meta"><span>📅 ' + today + '</span></div></div></a>';
+                    return '<a href="' + pl.url + '" target="_blank" class="playlist-card"><div class="playlist-thumbnail" style="background: ' + getGradient(index) + ';"><div class="play-overlay"></div></div><div class="playlist-info"><div class="youtube-badge">▶ YOUTUBE</div><div class="playlist-title">' + pl.title + '</div><div class="playlist-meta"><span>📅 ' + today + '</span></div></div></a>';
                 }).join('') + '</div>';
         }
-        
-        function extractPlaylistId(url) {
-            const match = url.match(/[?&]list=([^&]+)/);
-            return match ? match[1] : '';
-        }
 
         document.addEventListener('DOMContentLoaded', () => {
             const searchBar = document.getElementById('searchBar');
@@ -364,11 +361,8 @@
                     content.innerHTML = '<div style="text-align: center; padding: 50px; color: #94a3b8;">No results found</div>';
                 } else {
                     content.innerHTML = '<div class="category-header"><span class="icon">🔍</span><h2>Search Results (' + results.length + ')</h2></div><div class="playlist-grid">' + 
-                        results.map(result => {
-                            const playlistId = extractPlaylistId(result.url);
-                            const thumbnailUrl = 'https://img.youtube.com/vi/' + playlistId.substring(2, 13) + '/mqdefault.jpg';
-                            const fallbackUrl = 'https://via.placeholder.com/320x180/667eea/ffffff?text=' + encodeURIComponent(result.title);
-                            return '<a href="' + result.url + '" target="_blank" class="playlist-card"><div class="playlist-thumbnail"><img src="' + thumbnailUrl + '" alt="' + result.title + '" onerror="this.src=\'' + fallbackUrl + '\'"><div class="play-overlay"></div></div><div class="playlist-info"><div class="youtube-badge">▶ YOUTUBE</div><div class="playlist-title">' + result.title + '</div><div class="playlist-meta"><span>' + result.category.icon + ' ' + result.category.name + '</span><span>📅 ' + today + '</span></div></div></a>';
+                        results.map((result, index) => {
+                            return '<a href="' + result.url + '" target="_blank" class="playlist-card"><div class="playlist-thumbnail" style="background: ' + getGradient(index) + ';"><div class="play-overlay"></div></div><div class="playlist-info"><div class="youtube-badge">▶ YOUTUBE</div><div class="playlist-title">' + result.title + '</div><div class="playlist-meta"><span>' + result.category.icon + ' ' + result.category.name + '</span><span>📅 ' + today + '</span></div></div></a>';
                         }).join('') + '</div>';
                 }
             });