Hugging Face's logo

Spaces:
Aynursusuz
/
playlist_data
Running

App Files Community
Aynursusuz commited on
Commit
65ec2b9
·
verified ·
1 Parent(s): 7463653

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +83 -153
index.html CHANGED
@@ -1,5 +1,5 @@
1
  <!DOCTYPE html>
2
- <html lang="tr">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -23,7 +23,6 @@
23
  min-height: 100vh;
24
  }
25
 
26
- /* Sidebar */
27
  .sidebar {
28
  width: 250px;
29
  background: #1e293b;
@@ -80,7 +79,6 @@
80
  background: rgba(255,255,255,0.2);
81
  }
82
 
83
- /* Main Content */
84
  .main-content {
85
  flex: 1;
86
  margin-left: 250px;
@@ -114,7 +112,6 @@
114
  border-color: #3b82f6;
115
  }
116
 
117
- /* Category Header */
118
  .category-header {
119
  display: flex;
120
  align-items: center;
@@ -135,7 +132,6 @@
135
  letter-spacing: 0.05em;
136
  }
137
 
138
- /* Playlist Grid */
139
  .playlist-grid {
140
  display: grid;
141
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -146,22 +142,62 @@
146
  background: #1e293b;
147
  border: 1px solid #334155;
148
  border-radius: 12px;
149
- padding: 20px;
150
  transition: all 0.3s;
151
- position: relative;
 
 
152
  }
153
 
154
  .playlist-card:hover {
155
  border-color: #3b82f6;
156
- transform: translateY(-2px);
157
- box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
 
 
 
 
 
 
 
 
158
  }
159
 
160
- .playlist-header {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
161
  display: flex;
162
  align-items: center;
163
- gap: 8px;
164
- margin-bottom: 15px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
165
  }
166
 
167
  .youtube-badge {
@@ -171,79 +207,32 @@
171
  border-radius: 4px;
172
  font-size: 0.75rem;
173
  font-weight: 600;
174
- display: flex;
175
- align-items: center;
176
- gap: 5px;
177
  }
178
 
179
  .playlist-title {
180
  color: #f1f5f9;
181
  font-weight: 600;
182
- font-size: 1.1rem;
183
  margin-bottom: 10px;
 
184
  }
185
 
186
  .playlist-meta {
187
  display: flex;
188
  align-items: center;
189
- gap: 15px;
190
  font-size: 0.85rem;
191
  color: #94a3b8;
192
- margin-bottom: 15px;
193
- }
194
-
195
- .playlist-actions {
196
- display: flex;
197
- gap: 10px;
198
- }
199
-
200
- .btn {
201
- padding: 8px 16px;
202
- border-radius: 6px;
203
- border: none;
204
- cursor: pointer;
205
- font-size: 0.875rem;
206
- font-weight: 500;
207
- transition: all 0.2s;
208
- display: flex;
209
- align-items: center;
210
- gap: 6px;
211
- }
212
-
213
- .btn-primary {
214
- background: #3b82f6;
215
- color: white;
216
- }
217
-
218
- .btn-primary:hover {
219
- background: #2563eb;
220
- }
221
-
222
- .btn-success {
223
- background: #10b981;
224
- color: white;
225
- }
226
-
227
- .btn-success:hover {
228
- background: #059669;
229
- }
230
-
231
- .btn-danger {
232
- background: #ef4444;
233
- color: white;
234
- }
235
-
236
- .btn-danger:hover {
237
- background: #dc2626;
238
  }
239
 
240
  .loading {
241
  text-align: center;
242
  padding: 100px;
243
  color: #94a3b8;
 
244
  }
245
 
246
- /* Responsive */
247
  @media (max-width: 768px) {
248
  .sidebar {
249
  width: 200px;
@@ -280,13 +269,11 @@
280
  </head>
281
  <body>
282
  <div class="container">
283
- <!-- Sidebar -->
284
  <div class="sidebar">
285
  <h3>Categories</h3>
286
  <div id="categoryList"></div>
287
  </div>
288
 
289
- <!-- Main Content -->
290
  <div class="main-content">
291
  <div class="header">
292
  <h1 id="mainTitle">Playlist Portal</h1>
@@ -314,81 +301,43 @@
314
  showCategory(allData.categories[0].id);
315
  }
316
  } catch (error) {
317
- document.getElementById('content').innerHTML = `
318
- <div style="text-align: center; padding: 50px; color: #ef4444;">
319
- <h2>⚠️ Error Loading Data</h2>
320
- <p>${error.message}</p>
321
- </div>
322
- `;
323
  }
324
  }
325
 
326
  function renderCategories() {
327
  const categoryList = document.getElementById('categoryList');
328
- categoryList.innerHTML = allData.categories.map(cat => `
329
- <div class="category-item" onclick="showCategory('${cat.id}')" data-category="${cat.id}">
330
- <div class="category-name">
331
- <span>${cat.icon}</span>
332
- <span>${cat.name}</span>
333
- </div>
334
- <span class="category-count">${cat.playlists.length}</span>
335
- </div>
336
- `).join('');
337
  }
338
 
339
  function showCategory(categoryId) {
340
  currentCategory = categoryId;
341
  const category = allData.categories.find(c => c.id === categoryId);
342
-
343
- // Update active state
344
  document.querySelectorAll('.category-item').forEach(item => {
345
  item.classList.remove('active');
346
- if (item.dataset.category === categoryId) {
347
- item.classList.add('active');
348
- }
349
  });
350
 
351
- // Render playlists
352
  const content = document.getElementById('content');
353
- content.innerHTML = `
354
- <div class="category-header">
355
- <span class="icon">${category.icon}</span>
356
- <h2>${category.name}</h2>
357
- </div>
358
- <div class="playlist-grid">
359
- ${category.playlists.map((playlist, index) => `
360
- <div class="playlist-card">
361
- <div class="playlist-header">
362
- <div class="youtube-badge">
363
- ▶ YOUTUBE
364
- </div>
365
- </div>
366
- <div class="playlist-title">${playlist.title}</div>
367
- <div class="playlist-meta">
368
- <span>🕐 5d ago</span>
369
- <span>📅 Oct 14, 2025</span>
370
- </div>
371
- <div class="playlist-actions">
372
- <a href="${playlist.url}" target="_blank" class="btn btn-primary">
373
- ▶ Watch
374
- </a>
375
- <button class="btn btn-success" onclick="copyLink('${playlist.url}')">
376
- 🔗 Copy
377
- </button>
378
- </div>
379
- </div>
380
- `).join('')}
381
- </div>
382
- `;
383
- }
384
-
385
- function copyLink(url) {
386
- navigator.clipboard.writeText(url).then(() => {
387
- alert('Link copied to clipboard!');
388
- });
389
  }
390
 
391
- // Search functionality
392
  document.addEventListener('DOMContentLoaded', () => {
393
  const searchBar = document.getElementById('searchBar');
394
  searchBar.addEventListener('input', (e) => {
@@ -408,38 +357,19 @@
408
  });
409
 
410
  const content = document.getElementById('content');
 
 
 
411
  if (results.length === 0) {
412
  content.innerHTML = '<div style="text-align: center; padding: 50px; color: #94a3b8;">No results found</div>';
413
  } else {
414
- content.innerHTML = `
415
- <div class="category-header">
416
- <span class="icon">🔍</span>
417
- <h2>Search Results (${results.length})</h2>
418
- </div>
419
- <div class="playlist-grid">
420
- ${results.map(result => `
421
- <div class="playlist-card">
422
- <div class="playlist-header">
423
- <div class="youtube-badge">
424
- ▶ YOUTUBE
425
- </div>
426
- </div>
427
- <div class="playlist-title">${result.title}</div>
428
- <div class="playlist-meta">
429
- <span>${result.category.icon} ${result.category.name}</span>
430
- </div>
431
- <div class="playlist-actions">
432
- <a href="${result.url}" target="_blank" class="btn btn-primary">
433
- ▶ Watch
434
- </a>
435
- <button class="btn btn-success" onclick="copyLink('${result.url}')">
436
- 🔗 Copy
437
- </button>
438
- </div>
439
- </div>
440
- `).join('')}
441
- </div>
442
- `;
443
  }
444
  });
445
  });
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
23
  min-height: 100vh;
24
  }
25
 
 
26
  .sidebar {
27
  width: 250px;
28
  background: #1e293b;
 
79
  background: rgba(255,255,255,0.2);
80
  }
81
 
 
82
  .main-content {
83
  flex: 1;
84
  margin-left: 250px;
 
112
  border-color: #3b82f6;
113
  }
114
 
 
115
  .category-header {
116
  display: flex;
117
  align-items: center;
 
132
  letter-spacing: 0.05em;
133
  }
134
 
 
135
  .playlist-grid {
136
  display: grid;
137
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 
142
  background: #1e293b;
143
  border: 1px solid #334155;
144
  border-radius: 12px;
145
+ overflow: hidden;
146
  transition: all 0.3s;
147
+ cursor: pointer;
148
+ text-decoration: none;
149
+ display: block;
150
  }
151
 
152
  .playlist-card:hover {
153
  border-color: #3b82f6;
154
+ transform: translateY(-5px);
155
+ box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
156
+ }
157
+
158
+ .playlist-thumbnail {
159
+ width: 100%;
160
+ height: 160px;
161
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
162
+ position: relative;
163
+ overflow: hidden;
164
  }
165
 
166
+ .playlist-thumbnail img {
167
+ width: 100%;
168
+ height: 100%;
169
+ object-fit: cover;
170
+ }
171
+
172
+ .play-overlay {
173
+ position: absolute;
174
+ top: 50%;
175
+ left: 50%;
176
+ transform: translate(-50%, -50%);
177
+ width: 60px;
178
+ height: 60px;
179
+ background: rgba(0, 0, 0, 0.7);
180
+ border-radius: 50%;
181
  display: flex;
182
  align-items: center;
183
+ justify-content: center;
184
+ transition: all 0.3s;
185
+ }
186
+
187
+ .playlist-card:hover .play-overlay {
188
+ background: rgba(255, 0, 0, 0.9);
189
+ transform: translate(-50%, -50%) scale(1.1);
190
+ }
191
+
192
+ .play-overlay::after {
193
+ content: '▶';
194
+ color: white;
195
+ font-size: 24px;
196
+ margin-left: 4px;
197
+ }
198
+
199
+ .playlist-info {
200
+ padding: 20px;
201
  }
202
 
203
  .youtube-badge {
 
207
  border-radius: 4px;
208
  font-size: 0.75rem;
209
  font-weight: 600;
210
+ display: inline-block;
 
 
211
  }
212
 
213
  .playlist-title {
214
  color: #f1f5f9;
215
  font-weight: 600;
216
+ font-size: 1rem;
217
  margin-bottom: 10px;
218
+ margin-top: 10px;
219
  }
220
 
221
  .playlist-meta {
222
  display: flex;
223
  align-items: center;
224
+ gap: 10px;
225
  font-size: 0.85rem;
226
  color: #94a3b8;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
227
  }
228
 
229
  .loading {
230
  text-align: center;
231
  padding: 100px;
232
  color: #94a3b8;
233
+ font-size: 1.5rem;
234
  }
235
 
 
236
  @media (max-width: 768px) {
237
  .sidebar {
238
  width: 200px;
 
269
  </head>
270
  <body>
271
  <div class="container">
 
272
  <div class="sidebar">
273
  <h3>Categories</h3>
274
  <div id="categoryList"></div>
275
  </div>
276
 
 
277
  <div class="main-content">
278
  <div class="header">
279
  <h1 id="mainTitle">Playlist Portal</h1>
 
301
  showCategory(allData.categories[0].id);
302
  }
303
  } catch (error) {
304
+ document.getElementById('content').innerHTML = '<div style="color:#ef4444;padding:50px;">Error loading data: ' + error.message + '</div>';
 
 
 
 
 
305
  }
306
  }
307
 
308
  function renderCategories() {
309
  const categoryList = document.getElementById('categoryList');
310
+ categoryList.innerHTML = allData.categories.map(cat =>
311
+ '<div class="category-item" onclick="showCategory(\'' + cat.id + '\')" data-category="' + cat.id + '"><div class="category-name"><span>' + cat.icon + '</span><span>' + cat.name + '</span></div><span class="category-count">' + cat.playlists.length + '</span></div>'
312
+ ).join('');
 
 
 
 
 
 
313
  }
314
 
315
  function showCategory(categoryId) {
316
  currentCategory = categoryId;
317
  const category = allData.categories.find(c => c.id === categoryId);
 
 
318
  document.querySelectorAll('.category-item').forEach(item => {
319
  item.classList.remove('active');
320
+ if (item.dataset.category === categoryId) item.classList.add('active');
 
 
321
  });
322
 
 
323
  const content = document.getElementById('content');
324
+ const now = new Date();
325
+ const today = now.toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' });
326
+
327
+ content.innerHTML = '<div class="category-header"><span class="icon">' + category.icon + '</span><h2>' + category.name + '</h2></div><div class="playlist-grid">' +
328
+ category.playlists.map((pl, index) => {
329
+ const playlistId = extractPlaylistId(pl.url);
330
+ const thumbnailUrl = 'https://i.ytimg.com/vi_webp/' + playlistId + '/mqdefault.webp';
331
+ const fallbackUrl = 'https://via.placeholder.com/320x180/667eea/ffffff?text=' + encodeURIComponent(pl.title);
332
+ 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>';
333
+ }).join('') + '</div>';
334
+ }
335
+
336
+ function extractPlaylistId(url) {
337
+ const match = url.match(/[?&]list=([^&]+)/);
338
+ return match ? match[1] : '';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
339
  }
340
 
 
341
  document.addEventListener('DOMContentLoaded', () => {
342
  const searchBar = document.getElementById('searchBar');
343
  searchBar.addEventListener('input', (e) => {
 
357
  });
358
 
359
  const content = document.getElementById('content');
360
+ const now = new Date();
361
+ const today = now.toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' });
362
+
363
  if (results.length === 0) {
364
  content.innerHTML = '<div style="text-align: center; padding: 50px; color: #94a3b8;">No results found</div>';
365
  } else {
366
+ content.innerHTML = '<div class="category-header"><span class="icon">🔍</span><h2>Search Results (' + results.length + ')</h2></div><div class="playlist-grid">' +
367
+ results.map(result => {
368
+ const playlistId = extractPlaylistId(result.url);
369
+ const thumbnailUrl = 'https://i.ytimg.com/vi_webp/' + playlistId + '/mqdefault.webp';
370
+ const fallbackUrl = 'https://via.placeholder.com/320x180/667eea/ffffff?text=' + encodeURIComponent(result.title);
371
+ 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>';
372
+ }).join('') + '</div>';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
373
  }
374
  });
375
  });