Update scripts/ui.js

scripts/ui.js

@@ -1,11 +1,45 @@
+// scripts/ui.js
+
+// --- Sample Data for Listings ---
+const streamingData = [{title:"The Grand Adventure",type:"Movie",genre:"Adventure, Comedy",platform:"Netflix",rating:"4.8",year:"2022",description:"A hilarious journey across continents with unexpected twists.",broadcastTime:"2023-12-10T19:30:00"},{title:"Dark Secrets",type:"TV Series",genre:"Drama, Thriller",platform:"HBO Max",rating:"4.7",year:"2021",description:"A small town's dark past resurfaces with shocking revelations.",broadcastTime:"2023-12-12T21:00:00"},{title:"Space Explorers",type:"Documentary",genre:"Science, Space",platform:"Disney+",rating:"4.9",year:"2023",description:"The latest discoveries from the frontiers of space exploration.",broadcastTime:"2023-12-14T18:00:00"}];
+const rssFeedData = [{title:"New Episode: The Grand Adventure",source:"Netflix",time:"5 hours ago",excerpt:"The comedy adventure movie is now the most-watched title on Netflix this week."}, {title:"Breaking: New streaming partnership",source:"Streaming News",time:"1 day ago",excerpt:"Major platforms announce new content sharing agreement."}];
+
+const getElement = (id) => document.getElementById(id);
+
+function showNotification(title, message) {
+    const container = getElement('notification');
+    if (!container) return;
+    container.className = 'notification show';
+    container.innerHTML = `<div class="flex items-center"><i class="fas fa-bell text-yellow-300 mr-3"></i><div><p class="font-semibold">${title}</p><p class="text-sm">${message}</p></div></div>`;
+    setTimeout(() => { container.classList.remove('show'); }, 3000);
+}
+
+function loadRSSFeed() {
+    const container = getElement('rss-feed');
+    if (!container) return;
+    container.innerHTML = '';
+    rssFeedData.forEach(item => {
+        const feedItem = document.createElement('div');
+        feedItem.className = 'rss-item bg-gray-50 p-3 rounded-lg';
+        feedItem.innerHTML = `<h4 class="font-medium text-sm mb-1">${item.title}</h4><div class="flex items-center text-xs text-gray-500 mb-2"><span>${item.source}</span><span class="mx-2">•</span><span>${item.time}</span></div><p class="text-xs text-gray-700">${item.excerpt}</p>`;
+        container.appendChild(feedItem);
+    });
+}
+
+function loadRecommendations() {
+    const container = getElement('recommendations-container');
+    if (!container) return;
+    container.innerHTML = '';
+    streamingData.forEach(item => {
+        const card = document.createElement('div');
+        card.className = 'stream-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 fade-in p-4';
+        card.innerHTML = `<div class="mb-3"><div class="flex justify-between items-start"><h3 class="font-bold text-base">${item.title}</h3><span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full flex items-center"><i class="fas fa-star text-yellow-500 mr-1 text-xs"></i> ${item.rating}</span></div><p class="text-gray-600 text-xs mb-1">${item.type} • ${item.genre} • ${item.year}</p><div class="text-xs text-indigo-600 mb-2">${item.platform}</div></div><p class="text-gray-700 text-sm mb-4">${item.description}</p><div class="flex justify-between items-center"><button class="save-btn text-indigo-600 hover:text-indigo-800 text-xs font-medium"><i class="far fa-bookmark mr-1"></i> Save</button><a href="#" target="_blank" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-full text-xs font-medium transition"><i class="fas fa-play mr-1"></i> Watch</a></div>`;
+        card.querySelector('.save-btn').addEventListener('click', () => showNotification('Reminder Set!', `We'll notify you when "${item.title}" is about to broadcast.`));
+        container.appendChild(card);
+    });
+}
+
 export function initUI() {
-    const productionButton = document.getElementById('production-button');
-    const productionPanel = document.getElementById('production-panel');
-
-    if (productionButton && productionPanel) {
-        productionButton.addEventListener('click', () => {
-            // This toggles the 'open' class which is defined in your main.css
-            productionPanel.classList.toggle('open');
-        });
-    }
+    loadRSSFeed();
+    loadRecommendations();
 }