Spaces:

Aynursusuz
/

playlist_data

Running

App Files Files Community

Aynursusuz commited on Oct 21, 2025

Commit

83bac6a

verified ·

1 Parent(s): ee6cd2a

Update index.html

Browse files

Files changed (1) hide show

index.html +120 -94

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Playlist Portal</title>
     <style>
         * {
             margin: 0;
@@ -49,14 +49,15 @@
         }
         .logo {
-            font-size: 1.5rem;
-            font-weight: 700;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
             margin-bottom: 40px;
-            letter-spacing: -0.5px;
         }
         .sidebar h3 {
@@ -113,27 +114,11 @@
         .main-content {
             flex: 1;
             margin-left: 280px;
-            padding: 48px 64px;
         }
         .header {
-            margin-bottom: 48px;
-        }
-        .header h1 {
-            font-size: 3rem;
-            margin-bottom: 12px;
-            font-weight: 700;
-            letter-spacing: -1.5px;
-            background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .header p {
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 1.1rem;
         }
         .search-bar {
@@ -146,7 +131,7 @@
             max-width: 500px;
             color: #ffffff;
             font-size: 0.95rem;
-            margin-top: 24px;
             transition: all 0.3s ease;
         }
@@ -181,7 +166,7 @@
         .playlist-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
             gap: 24px;
         }
@@ -206,26 +191,36 @@
         .playlist-thumbnail {
             width: 100%;
-            height: 180px;
             position: relative;
             overflow: hidden;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         }
-        .thumbnail-pattern {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background:
-                linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
-                linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
-                linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
-                linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
-            background-size: 20px 20px;
-            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-            opacity: 0.3;
         }
         .thumbnail-overlay {
@@ -234,44 +229,40 @@
             left: 0;
             right: 0;
             bottom: 0;
             display: flex;
             align-items: center;
             justify-content: center;
-            background: rgba(0, 0, 0, 0.2);
-            transition: all 0.3s ease;
         }
         .playlist-card:hover .thumbnail-overlay {
-            background: rgba(0, 0, 0, 0.4);
         }
-        .play-button {
-            width: 64px;
-            height: 64px;
             background: rgba(255, 255, 255, 0.95);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
         }
-        .playlist-card:hover .play-button {
-            transform: scale(1.15);
             background: white;
-            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
-        }
-        .play-button::after {
-            content: '▶';
-            color: #1a1a1a;
-            font-size: 20px;
-            margin-left: 3px;
         }
         .playlist-info {
-            padding: 24px;
         }
         .platform-badge {
@@ -287,7 +278,6 @@
             text-transform: uppercase;
             letter-spacing: 0.5px;
             margin-bottom: 12px;
-            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
         }
         .playlist-title {
@@ -334,13 +324,14 @@
             color: rgba(255, 255, 255, 0.6);
         }
-        /* Gradient variations for thumbnails */
-        .gradient-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
-        .gradient-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
-        .gradient-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
-        .gradient-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
-        .gradient-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
-        .gradient-6 { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }
         @media (max-width: 1024px) {
             .main-content {
@@ -361,10 +352,6 @@
                 margin-left: 240px;
                 padding: 24px;
             }
-            .header h1 {
-                font-size: 2rem;
-            }
         }
         @media (max-width: 640px) {
@@ -388,25 +375,19 @@
             .playlist-grid {
                 grid-template-columns: 1fr;
             }
-            .header h1 {
-                font-size: 1.75rem;
-            }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="sidebar">
-            <div class="logo">📚 Portal</div>
             <h3>Categories</h3>
             <div id="categoryList"></div>
         </div>
         <div class="main-content">
             <div class="header">
-                <h1 id="mainTitle">Playlist Portal</h1>
-                <p id="subtitle">Curated educational content</p>
                 <input type="text" class="search-bar" id="searchBar" placeholder="Search playlists...">
             </div>
@@ -417,11 +398,28 @@
     <script>
         let allData = null;
         let currentCategory = null;
-        const gradientClasses = ['gradient-1', 'gradient-2', 'gradient-3', 'gradient-4', 'gradient-5', 'gradient-6'];
-        function getGradientClass(index) {
-            return gradientClasses[index % gradientClasses.length];
         }
         async function loadData() {
@@ -430,8 +428,6 @@
                 if (!response.ok) throw new Error('Failed to load data');
                 allData = await response.json();
-                document.getElementById('mainTitle').textContent = allData.title;
-                document.getElementById('subtitle').textContent = allData.subtitle;
                 renderCategories();
                 if (allData.categories.length > 0) {
@@ -449,7 +445,11 @@
             ).join('');
         }
-        function showCategory(categoryId) {
             currentCategory = categoryId;
             const category = allData.categories.find(c => c.id === categoryId);
             document.querySelectorAll('.category-item').forEach(item => {
@@ -459,15 +459,28 @@
             const content = document.getElementById('content');
             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) => {
-                    return '<a href="' + pl.url + '" target="_blank" class="playlist-card"><div class="playlist-thumbnail ' + getGradientClass(index) + '"><div class="thumbnail-pattern"></div><div class="thumbnail-overlay"><div class="play-button"></div></div></div><div class="playlist-info"><div class="platform-badge"><span>▶</span> YouTube</div><div class="playlist-title">' + pl.title + '</div><div class="playlist-meta"><div class="meta-item"><span>📂</span><span>' + category.name + '</span></div></div></div></a>';
-                }).join('') + '</div>';
         }
         document.addEventListener('DOMContentLoaded', () => {
             const searchBar = document.getElementById('searchBar');
-            searchBar.addEventListener('input', (e) => {
                 const searchTerm = e.target.value.toLowerCase();
                 if (!searchTerm) {
                     if (currentCategory) showCategory(currentCategory);
@@ -488,10 +501,23 @@
                 if (results.length === 0) {
                     content.innerHTML = '<div class="empty-state"><h3>No results found</h3><p>Try searching with different keywords</p></div>';
                 } else {
                     content.innerHTML = '<div class="category-header"><span class="icon">🔍</span><h2>Search Results</h2></div><div class="playlist-grid">' +
-                        results.map((result, index) => {
-                            return '<a href="' + result.url + '" target="_blank" class="playlist-card"><div class="playlist-thumbnail ' + getGradientClass(index) + '"><div class="thumbnail-pattern"></div><div class="thumbnail-overlay"><div class="play-button"></div></div></div><div class="playlist-info"><div class="platform-badge"><span>▶</span> YouTube</div><div class="playlist-title">' + result.title + '</div><div class="playlist-meta"><div class="meta-item"><span>' + result.category.icon + '</span><span>' + result.category.name + '</span></div></div></div></a>';
-                        }).join('') + '</div>';
                 }
             });
         });

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VYVO - Playlist Portal</title>
     <style>
         * {
             margin: 0;
         }
         .logo {
+            font-size: 2rem;
+            font-weight: 800;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
             margin-bottom: 40px;
+            letter-spacing: 2px;
+            text-transform: uppercase;
         }
         .sidebar h3 {
         .main-content {
             flex: 1;
             margin-left: 280px;
+            padding: 40px 64px;
         }
         .header {
+            margin-bottom: 32px;
         }
         .search-bar {
             max-width: 500px;
             color: #ffffff;
             font-size: 0.95rem;
+            margin-bottom: 40px;
             transition: all 0.3s ease;
         }
         .playlist-grid {
             display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
             gap: 24px;
         }
         .playlist-thumbnail {
             width: 100%;
+            height: 200px;
             position: relative;
             overflow: hidden;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+        }
+        .thumbnail-image {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 0.4s ease;
+        }
+        .playlist-card:hover .thumbnail-image {
+            transform: scale(1.05);
+        }
+        .thumbnail-placeholder {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         }
+        .thumbnail-placeholder svg {
+            width: 80px;
+            height: 80px;
+            opacity: 0.4;
         }
         .thumbnail-overlay {
             left: 0;
             right: 0;
             bottom: 0;
+            background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
             display: flex;
             align-items: center;
             justify-content: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
         }
         .playlist-card:hover .thumbnail-overlay {
+            opacity: 1;
         }
+        .open-button {
+            padding: 12px 32px;
             background: rgba(255, 255, 255, 0.95);
+            color: #1a1a1a;
+            border: none;
+            border-radius: 8px;
+            font-weight: 600;
+            font-size: 0.9rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
         }
+        .open-button:hover {
             background: white;
+            transform: scale(1.05);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
         }
         .playlist-info {
+            padding: 20px;
         }
         .platform-badge {
             text-transform: uppercase;
             letter-spacing: 0.5px;
             margin-bottom: 12px;
         }
         .playlist-title {
             color: rgba(255, 255, 255, 0.6);
         }
+        .skeleton {
+            animation: pulse 1.5s ease-in-out infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
         @media (max-width: 1024px) {
             .main-content {
                 margin-left: 240px;
                 padding: 24px;
             }
         }
         @media (max-width: 640px) {
             .playlist-grid {
                 grid-template-columns: 1fr;
             }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="sidebar">
+            <div class="logo">VYVO</div>
             <h3>Categories</h3>
             <div id="categoryList"></div>
         </div>
         <div class="main-content">
             <div class="header">
                 <input type="text" class="search-bar" id="searchBar" placeholder="Search playlists...">
             </div>
     <script>
         let allData = null;
         let currentCategory = null;
+        const thumbnailCache = {};
+        async function getPlaylistThumbnail(playlistUrl) {
+            if (thumbnailCache[playlistUrl]) {
+                return thumbnailCache[playlistUrl];
+            }
+            try {
+                const playlistId = playlistUrl.split('list=')[1];
+                if (!playlistId) return null;
+                // YouTube oEmbed API kullanarak thumbnail al
+                const response = await fetch(`https://www.youtube.com/oembed?url=${encodeURIComponent(playlistUrl)}&format=json`);
+                const data = await response.json();
+                const thumbnail = data.thumbnail_url || null;
+                thumbnailCache[playlistUrl] = thumbnail;
+                return thumbnail;
+            } catch (error) {
+                console.error('Thumbnail fetch error:', error);
+                return null;
+            }
         }
         async function loadData() {
                 if (!response.ok) throw new Error('Failed to load data');
                 allData = await response.json();
                 renderCategories();
                 if (allData.categories.length > 0) {
             ).join('');
         }
+        function createSkeletonCard() {
+            return '<div class="playlist-card"><div class="playlist-thumbnail skeleton"></div><div class="playlist-info"><div class="platform-badge">▶ YouTube</div><div class="playlist-title">Loading...</div></div></div>';
+        }
+        async function showCategory(categoryId) {
             currentCategory = categoryId;
             const category = allData.categories.find(c => c.id === categoryId);
             document.querySelectorAll('.category-item').forEach(item => {
             const content = document.getElementById('content');
+            // İlk olarak skeleton göster
+            content.innerHTML = '<div class="category-header"><span class="icon">' + category.icon + '</span><h2>' + category.name + '</h2></div><div class="playlist-grid">' +
+                category.playlists.map(() => createSkeletonCard()).join('') + '</div>';
+            // Thumbnail'leri yükle
+            const playlistCards = await Promise.all(category.playlists.map(async (pl) => {
+                const thumbnail = await getPlaylistThumbnail(pl.url);
+                return '<a href="' + pl.url + '" target="_blank" class="playlist-card"><div class="playlist-thumbnail">' +
+                    (thumbnail
+                        ? '<img src="' + thumbnail + '" alt="' + pl.title + '" class="thumbnail-image">'
+                        : '<div class="thumbnail-placeholder"><svg fill="currentColor" viewBox="0 0 24 24"><path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg></div>') +
+                    '<div class="thumbnail-overlay"><button class="open-button">Open</button></div></div><div class="playlist-info"><div class="platform-badge">▶ YouTube</div><div class="playlist-title">' + pl.title + '</div><div class="playlist-meta"><div class="meta-item"><span>📂</span><span>' + category.name + '</span></div></div></div></a>';
+            }));
             content.innerHTML = '<div class="category-header"><span class="icon">' + category.icon + '</span><h2>' + category.name + '</h2></div><div class="playlist-grid">' +
+                playlistCards.join('') + '</div>';
         }
         document.addEventListener('DOMContentLoaded', () => {
             const searchBar = document.getElementById('searchBar');
+            searchBar.addEventListener('input', async (e) => {
                 const searchTerm = e.target.value.toLowerCase();
                 if (!searchTerm) {
                     if (currentCategory) showCategory(currentCategory);
                 if (results.length === 0) {
                     content.innerHTML = '<div class="empty-state"><h3>No results found</h3><p>Try searching with different keywords</p></div>';
                 } else {
+                    // Skeleton göster
+                    content.innerHTML = '<div class="category-header"><span class="icon">🔍</span><h2>Search Results</h2></div><div class="playlist-grid">' +
+                        results.map(() => createSkeletonCard()).join('') + '</div>';
+                    // Thumbnail'leri yükle
+                    const searchCards = await Promise.all(results.map(async (result) => {
+                        const thumbnail = await getPlaylistThumbnail(result.url);
+                        return '<a href="' + result.url + '" target="_blank" class="playlist-card"><div class="playlist-thumbnail">' +
+                            (thumbnail
+                                ? '<img src="' + thumbnail + '" alt="' + result.title + '" class="thumbnail-image">'
+                                : '<div class="thumbnail-placeholder"><svg fill="currentColor" viewBox="0 0 24 24"><path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg></div>') +
+                            '<div class="thumbnail-overlay"><button class="open-button">Open</button></div></div><div class="playlist-info"><div class="platform-badge">▶ YouTube</div><div class="playlist-title">' + result.title + '</div><div class="playlist-meta"><div class="meta-item"><span>' + result.category.icon + '</span><span>' + result.category.name + '</span></div></div></div></a>';
+                    }));
                     content.innerHTML = '<div class="category-header"><span class="icon">🔍</span><h2>Search Results</h2></div><div class="playlist-grid">' +
+                        searchCards.join('') + '</div>';
                 }
             });
         });