404

Page not found

\n ← Back to DigiLocalsTV\n \n \n `, 404);\n});\n\nexport default app;",[],[152,170],[152],{"_104":179,"_95":99,"_153":180,"_155":-5,"_156":138,"_157":181,"_158":22,"_106":182,"_100":183,"_161":184,"_163":185,"_164":22,"_165":-5,"_166":186,"_98":187},"6624842c-3e99-11f0-aaa2-76b3cceeab13","b87c1790-3e98-11f0-a0cf-76b3cceeab13",7,["D",1748748901295],3,"http","\n\n\n \n \n DigiLocalsTV News Channel\n \n \n \n\n\n

\n \n \n\n \n

\n \n

Select a channel to start watching

Choose from our live news channels on the right

\n \n \n

\n No channel selected\n

\n \n \n \n \n

\n\n \n

\n \n \n

\n \n\n \n\n \n\n \n\n \n\n \n\n \n

\n\n \n \n

\n\n \n\n",[],[99],{"_104":189,"_95":190,"_153":191,"_155":-5,"_156":138,"_157":192,"_158":159,"_106":193,"_100":32,"_161":173,"_163":72,"_164":22,"_165":-5,"_166":194,"_98":195},"f900b542-3e97-11f0-a5e8-76b3cceeab13","main.tsx","f900b60a-3e97-11f0-a5e8-76b3cceeab13",1,["D",1748748288698],[],[190],{"_104":197,"_95":198,"_153":199,"_155":-5,"_156":138,"_157":200,"_158":22,"_106":201,"_100":202,"_161":173,"_163":203,"_164":22,"_165":-5,"_166":204,"_98":205},"8bb4d318-3e99-11f0-bf01-76b3cceeab13","script.js","ed7edf40-3e98-11f0-86eb-76b3cceeab13",15,["D",1748748964310],6,"// TV Channel Web App JavaScript\nclass TVChannelApp {\n constructor() {\n this.currentChannel = null;\n this.lastChannelData = null;\n this.videoPlayer = document.getElementById('videoPlayer');\n this.currentChannelName = document.getElementById('currentChannelName');\n this.channelButtons = document.querySelectorAll('.channel-btn');\n this.stopBtn = document.getElementById('stopBtn');\n this.resumeBtn = document.getElementById('resumeBtn');\n this.muteBtn = document.getElementById('muteBtn');\n this.fullscreenBtn = document.getElementById('fullscreenBtn');\n \n this.init();\n }\n\n init() {\n this.setupChannelButtons();\n this.setupControlButtons();\n this.addKeyboardShortcuts();\n this.animateChannelButtons();\n }\n\n setupChannelButtons() {\n this.channelButtons.forEach((button, index) => {\n // Add animation delay for staggered entrance\n button.style.animationDelay = `${index * 0.1}s`;\n \n button.addEventListener('click', () => {\n const streamUrl = button.dataset.streamUrl;\n const channelName = button.dataset.channelName;\n this.switchChannel(streamUrl, channelName, button);\n });\n\n // Add hover sound effect (optional)\n button.addEventListener('mouseenter', () => {\n this.playHoverSound();\n });\n });\n }\n\n switchChannel(streamUrl, channelName, buttonElement) {\n // Remove active class from all buttons\n this.channelButtons.forEach(btn => btn.classList.remove('active'));\n \n // Add active class to clicked button\n buttonElement.classList.add('active');\n \n // Convert YouTube URL to embed format\n const embedUrl = this.convertToEmbedUrl(streamUrl);\n \n // Create iframe for video\n const iframe = document.createElement('iframe');\n iframe.src = embedUrl;\n iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';\n iframe.allowFullscreen = true;\n iframe.style.width = '100%';\n iframe.style.height = '100%';\n iframe.style.border = 'none';\n \n // Clear video player and add new iframe\n this.videoPlayer.innerHTML = '';\n this.videoPlayer.appendChild(iframe);\n \n // Update current channel display\n this.currentChannelName.textContent = channelName;\n this.currentChannel = channelName;\n \n // Add loading animation\n this.showLoadingAnimation();\n \n // Update page title\n document.title = `${channelName} - DigiLocalsTV News Channel`;\n \n // Store current channel data for resume functionality\n this.lastChannelData = {\n streamUrl,\n channelName,\n buttonElement\n };\n \n // Show stop button, hide resume button\n this.stopBtn.style.display = 'block';\n this.resumeBtn.style.display = 'none';\n \n // Store last watched channel in localStorage\n localStorage.setItem('lastChannel', JSON.stringify({\n streamUrl,\n channelName,\n buttonIndex: Array.from(this.channelButtons).indexOf(buttonElement)\n }));\n \n // Trigger channel change animation\n this.animateChannelChange();\n }\n\n convertToEmbedUrl(youtubeUrl) {\n // Extract video ID from various YouTube URL formats\n let videoId = '';\n \n if (youtubeUrl.includes('youtu.be/')) {\n videoId = youtubeUrl.split('youtu.be/')[1].split('?')[0];\n } else if (youtubeUrl.includes('youtube.com/watch?v=')) {\n videoId = youtubeUrl.split('v=')[1].split('&')[0];\n } else if (youtubeUrl.includes('youtube.com/embed/')) {\n videoId = youtubeUrl.split('embed/')[1].split('?')[0];\n }\n \n // Return embed URL with autoplay and other parameters\n return `https://www.youtube.com/embed/${videoId}?autoplay=1&mute=0&controls=1&rel=0&modestbranding=1`;\n }\n\n stopTV() {\n // Clear video player and show placeholder\n this.videoPlayer.innerHTML = `\n

\n \n

TV Stopped

Click \"Resume\" to continue watching the last channel

\n `;\n \n // Remove active class from all buttons\n this.channelButtons.forEach(btn => btn.classList.remove('active'));\n \n // Update current channel display\n this.currentChannelName.textContent = 'TV Stopped';\n this.currentChannel = null;\n \n // Show resume button, hide stop button\n this.stopBtn.style.display = 'none';\n this.resumeBtn.style.display = 'block';\n \n // Update page title\n document.title = 'DigiLocalsTV News Channel - Stopped';\n \n this.showNotification('TV stopped. Click Resume to continue watching.');\n }\n\n resumeTV() {\n if (this.lastChannelData) {\n // Resume the last watched channel\n this.switchChannel(\n this.lastChannelData.streamUrl,\n this.lastChannelData.channelName,\n this.lastChannelData.buttonElement\n );\n this.showNotification(`Resumed: ${this.lastChannelData.channelName}`);\n } else {\n // Try to restore from localStorage\n const lastChannel = localStorage.getItem('lastChannel');\n if (lastChannel) {\n try {\n const channelData = JSON.parse(lastChannel);\n const button = this.channelButtons[channelData.buttonIndex];\n if (button) {\n button.click();\n this.showNotification(`Resumed: ${channelData.channelName}`);\n }\n } catch (e) {\n this.showNotification('No previous channel to resume');\n }\n } else {\n this.showNotification('No previous channel to resume');\n }\n }\n }\n\n setupControlButtons() {\n // Stop button functionality\n this.stopBtn.addEventListener('click', () => {\n this.stopTV();\n });\n\n // Resume button functionality\n this.resumeBtn.addEventListener('click', () => {\n this.resumeTV();\n });\n\n // Mute button functionality\n this.muteBtn.addEventListener('click', () => {\n this.toggleMute();\n });\n\n // Fullscreen button functionality\n this.fullscreenBtn.addEventListener('click', () => {\n this.toggleFullscreen();\n });\n }\n\n toggleMute() {\n const iframe = this.videoPlayer.querySelector('iframe');\n if (iframe) {\n // Note: Direct mute control of YouTube iframe is limited due to security restrictions\n // This is more of a UI feedback\n const icon = this.muteBtn.querySelector('i');\n if (icon.classList.contains('fa-volume-up')) {\n icon.classList.remove('fa-volume-up');\n icon.classList.add('fa-volume-mute');\n this.showNotification('Muted (Note: Use YouTube player controls for audio)');\n } else {\n icon.classList.remove('fa-volume-mute');\n icon.classList.add('fa-volume-up');\n this.showNotification('Unmuted');\n }\n }\n }\n\n toggleFullscreen() {\n const iframe = this.videoPlayer.querySelector('iframe');\n if (iframe) {\n if (document.fullscreenElement) {\n document.exitFullscreen();\n } else {\n this.videoPlayer.requestFullscreen().catch(err => {\n console.log('Fullscreen not supported:', err);\n this.showNotification('Fullscreen not supported on this device');\n });\n }\n }\n }\n\n addKeyboardShortcuts() {\n document.addEventListener('keydown', (e) => {\n switch(e.key) {\n case 'f':\n case 'F':\n if (this.currentChannel) {\n this.toggleFullscreen();\n }\n break;\n case 'm':\n case 'M':\n if (this.currentChannel) {\n this.toggleMute();\n }\n break;\n case 'Escape':\n if (document.fullscreenElement) {\n document.exitFullscreen();\n }\n break;\n case 's':\n case 'S':\n this.stopTV();\n break;\n case 'r':\n case 'R':\n if (this.resumeBtn.style.display !== 'none') {\n this.resumeTV();\n }\n break;\n case '1':\n case '2':\n case '3':\n case '4':\n case '5':\n case '6':\n case '7':\n const channelIndex = parseInt(e.key) - 1;\n if (this.channelButtons[channelIndex]) {\n this.channelButtons[channelIndex].click();\n }\n break;\n }\n });\n }\n\n animateChannelButtons() {\n // Staggered animation for channel buttons\n this.channelButtons.forEach((button, index) => {\n setTimeout(() => {\n button.style.opacity = '1';\n button.style.transform = 'translateX(0)';\n }, index * 100);\n });\n }\n\n animateChannelChange() {\n // Add a subtle animation when changing channels\n this.videoPlayer.style.transform = 'scale(0.98)';\n setTimeout(() => {\n this.videoPlayer.style.transform = 'scale(1)';\n }, 200);\n }\n\n showLoadingAnimation() {\n // Show loading indicator\n const loadingDiv = document.createElement('div');\n loadingDiv.className = 'loading-overlay';\n loadingDiv.innerHTML = `\n

\n \n

Loading channel...

\n `;\n \n // Add loading styles\n loadingDiv.style.cssText = `\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n border-radius: 12px;\n `;\n \n const spinner = loadingDiv.querySelector('.loading-spinner');\n spinner.style.cssText = `\n text-align: center;\n color: #4ecdc4;\n `;\n \n spinner.querySelector('i').style.cssText = `\n font-size: 2rem;\n margin-bottom: 1rem;\n display: block;\n `;\n \n this.videoPlayer.appendChild(loadingDiv);\n \n // Remove loading after 3 seconds\n setTimeout(() => {\n if (loadingDiv.parentNode) {\n loadingDiv.remove();\n }\n }, 3000);\n }\n\n showNotification(message) {\n // Create notification element\n const notification = document.createElement('div');\n notification.className = 'notification';\n notification.textContent = message;\n notification.style.cssText = `\n position: fixed;\n top: 100px;\n right: 20px;\n background: rgba(78, 205, 196, 0.9);\n color: white;\n padding: 1rem 1.5rem;\n border-radius: 8px;\n z-index: 1000;\n font-weight: 500;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n transform: translateX(100%);\n transition: transform 0.3s ease;\n `;\n \n document.body.appendChild(notification);\n \n // Animate in\n setTimeout(() => {\n notification.style.transform = 'translateX(0)';\n }, 100);\n \n // Remove after 3 seconds\n setTimeout(() => {\n notification.style.transform = 'translateX(100%)';\n setTimeout(() => {\n if (notification.parentNode) {\n notification.remove();\n }\n }, 300);\n }, 3000);\n }\n\n playHoverSound() {\n // Optional: Add subtle hover sound effect\n // This would require audio files, so it's commented out\n // const audio = new Audio('/sounds/hover.mp3');\n // audio.volume = 0.1;\n // audio.play().catch(() => {}); // Ignore errors\n }\n\n restoreLastChannel() {\n // Restore last watched channel from localStorage\n const lastChannel = localStorage.getItem('lastChannel');\n if (lastChannel) {\n try {\n const channelData = JSON.parse(lastChannel);\n const button = this.channelButtons[channelData.buttonIndex];\n if (button) {\n // Auto-load last channel after 2 seconds\n setTimeout(() => {\n button.click();\n this.showNotification(`Restored: ${channelData.channelName}`);\n }, 2000);\n }\n } catch (e) {\n console.log('Could not restore last channel:', e);\n }\n }\n }\n}\n\n// Initialize the app when DOM is loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n const app = new TVChannelApp();\n \n // Optional: Restore last watched channel\n // app.restoreLastChannel();\n \n // Add some welcome animations\n setTimeout(() => {\n const header = document.querySelector('.header');\n header.style.transform = 'translateY(0)';\n header.style.opacity = '1';\n }, 500);\n \n // Show keyboard shortcuts hint\n setTimeout(() => {\n console.log('🎮 Keyboard Shortcuts:');\n console.log('• Press 1-7 to switch channels');\n console.log('• Press S to stop TV');\n console.log('• Press R to resume last channel');\n console.log('• Press F for fullscreen');\n console.log('• Press M to toggle mute indicator');\n console.log('• Press ESC to exit fullscreen');\n }, 1000);\n});\n\n// Handle fullscreen changes\ndocument.addEventListener('fullscreenchange', () => {\n const fullscreenBtn = document.getElementById('fullscreenBtn');\n const icon = fullscreenBtn.querySelector('i');\n \n if (document.fullscreenElement) {\n icon.classList.remove('fa-expand');\n icon.classList.add('fa-compress');\n } else {\n icon.classList.remove('fa-compress');\n icon.classList.add('fa-expand');\n }\n});\n\n// Handle page visibility changes (pause/resume when tab is hidden/visible)\ndocument.addEventListener('visibilitychange', () => {\n const iframe = document.querySelector('#videoPlayer iframe');\n if (iframe) {\n if (document.hidden) {\n // Page is hidden - could implement pause logic here\n console.log('Page hidden - video continues playing');\n } else {\n // Page is visible again\n console.log('Page visible - video continues playing');\n }\n }\n});\n\n// Add some CSS animations dynamically\nconst style = document.createElement('style');\nstyle.textContent = `\n .header {\n transform: translateY(-100%);\n opacity: 0;\n transition: all 0.5s ease;\n }\n \n .channel-btn {\n opacity: 0;\n transform: translateX(-20px);\n transition: all 0.3s ease;\n }\n \n @keyframes channelGlow {\n 0%, 100% { box-shadow: 0 0 5px rgba(78, 205, 196, 0.3); }\n 50% { box-shadow: 0 0 20px rgba(78, 205, 196, 0.6); }\n }\n \n .channel-btn.active {\n animation: channelGlow 2s infinite;\n }\n`;\ndocument.head.appendChild(style);",[],[198],{"_104":207,"_95":208,"_153":209,"_155":-5,"_156":138,"_157":210,"_158":22,"_106":211,"_100":212,"_161":213,"_163":214,"_164":22,"_165":-5,"_166":215,"_98":216},"72c59c3e-3e99-11f0-b235-76b3cceeab13","style.css","d1c755ac-3e98-11f0-957a-76b3cceeab13",9,["D",1748748922486],2,"file","/* Reset and Base Styles */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);\n color: #ffffff;\n min-height: 100vh;\n overflow-x: hidden;\n}\n\n.app-container {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n}\n\n/* Header Styles */\n.header {\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n padding: 1rem 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n top: 0;\n z-index: 100;\n}\n\n.logo {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.logo i {\n font-size: 2rem;\n color: #ff6b6b;\n text-shadow: 0 0 20px rgba(255, 107, 107, 0.5);\n}\n\n.logo h1 {\n font-size: 1.5rem;\n font-weight: 700;\n background: linear-gradient(45deg, #ff6b6b, #4ecdc4);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.live-indicator {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n background: rgba(255, 107, 107, 0.2);\n padding: 0.5rem 1rem;\n border-radius: 25px;\n border: 1px solid rgba(255, 107, 107, 0.3);\n font-weight: 600;\n font-size: 0.9rem;\n}\n\n.live-dot {\n width: 8px;\n height: 8px;\n background: #ff6b6b;\n border-radius: 50%;\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.7; transform: scale(1.2); }\n}\n\n/* Main Content Layout */\n.main-content {\n display: flex;\n flex: 1;\n gap: 1rem;\n padding: 1rem;\n max-width: 1400px;\n margin: 0 auto;\n width: 100%;\n}\n\n/* Video Container */\n.video-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.video-player {\n background: #000;\n border-radius: 12px;\n overflow: hidden;\n position: relative;\n aspect-ratio: 16/9;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.video-player iframe {\n width: 100%;\n height: 100%;\n border: none;\n}\n\n.placeholder {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n text-align: center;\n background: linear-gradient(45deg, #1a1a2e, #16213e);\n}\n\n.placeholder i {\n font-size: 4rem;\n color: #4ecdc4;\n margin-bottom: 1rem;\n opacity: 0.7;\n}\n\n.placeholder h2 {\n font-size: 1.5rem;\n margin-bottom: 0.5rem;\n color: #ffffff;\n}\n\n.placeholder p {\n color: #a0a0a0;\n font-size: 1rem;\n}\n\n/* Video Controls */\n.video-controls {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n padding: 1rem;\n border-radius: 12px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.current-channel {\n font-weight: 600;\n color: #4ecdc4;\n font-size: 1.1rem;\n}\n\n.control-buttons {\n display: flex;\n gap: 0.5rem;\n}\n\n.control-btn {\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.2);\n color: #ffffff;\n padding: 0.75rem;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 1rem;\n}\n\n.control-btn:hover {\n background: rgba(255, 255, 255, 0.2);\n transform: translateY(-2px);\n}\n\n/* Channel Sidebar */\n.channel-sidebar {\n width: 350px;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(10px);\n border-radius: 12px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n overflow: hidden;\n height: fit-content;\n max-height: calc(100vh - 200px);\n display: flex;\n flex-direction: column;\n}\n\n.sidebar-header {\n background: rgba(255, 107, 107, 0.1);\n padding: 1.5rem;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.sidebar-header h3 {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 1.2rem;\n font-weight: 600;\n color: #ffffff;\n}\n\n.sidebar-header i {\n color: #ff6b6b;\n}\n\n.channel-buttons {\n overflow-y: auto;\n flex: 1;\n padding: 0.5rem;\n}\n\n.channel-buttons::-webkit-scrollbar {\n width: 6px;\n}\n\n.channel-buttons::-webkit-scrollbar-track {\n background: rgba(255, 255, 255, 0.1);\n border-radius: 3px;\n}\n\n.channel-buttons::-webkit-scrollbar-thumb {\n background: rgba(255, 107, 107, 0.5);\n border-radius: 3px;\n}\n\n/* Channel Button Styles */\n.channel-btn {\n width: 100%;\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 12px;\n padding: 1rem;\n margin-bottom: 0.5rem;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n gap: 1rem;\n text-align: left;\n color: #ffffff;\n position: relative;\n overflow: hidden;\n}\n\n.channel-btn:hover {\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(78, 205, 196, 0.5);\n transform: translateX(5px);\n box-shadow: 0 5px 15px rgba(78, 205, 196, 0.2);\n}\n\n.channel-btn.active {\n background: linear-gradient(45deg, rgba(255, 107, 107, 0.2), rgba(78, 205, 196, 0.2));\n border-color: #4ecdc4;\n box-shadow: 0 0 20px rgba(78, 205, 196, 0.3);\n}\n\n.channel-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(45deg, #ff6b6b, #4ecdc4);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.2rem;\n color: #ffffff;\n flex-shrink: 0;\n}\n\n.channel-info {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.channel-name {\n font-weight: 600;\n font-size: 0.95rem;\n color: #ffffff;\n}\n\n.channel-desc {\n font-size: 0.8rem;\n color: #a0a0a0;\n}\n\n.live-badge {\n background: #ff6b6b;\n color: #ffffff;\n padding: 0.25rem 0.5rem;\n border-radius: 4px;\n font-size: 0.7rem;\n font-weight: 600;\n flex-shrink: 0;\n animation: pulse 2s infinite;\n}\n\n/* Footer */\n.footer {\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n padding: 1.5rem 2rem;\n text-align: center;\n color: #a0a0a0;\n font-size: 0.9rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.creator-info {\n color: #4ecdc4;\n font-weight: 500;\n}\n\n.creator-name {\n color: #ff6b6b;\n font-weight: 600;\n text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);\n}\n\n.disclaimer {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n font-size: 0.8rem;\n color: #888;\n margin-top: 0.5rem;\n padding-top: 0.5rem;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.disclaimer i {\n color: #ff6b6b;\n}\n\n/* Responsive Design */\n@media (max-width: 1024px) {\n .main-content {\n flex-direction: column;\n }\n \n .channel-sidebar {\n width: 100%;\n max-height: 300px;\n order: -1;\n }\n \n .channel-buttons {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 0.5rem;\n max-height: 200px;\n }\n}\n\n@media (max-width: 768px) {\n .header {\n padding: 1rem;\n flex-direction: column;\n gap: 1rem;\n text-align: center;\n }\n \n .logo h1 {\n font-size: 1.2rem;\n }\n \n .main-content {\n padding: 0.5rem;\n }\n \n .channel-buttons {\n grid-template-columns: 1fr;\n }\n \n .channel-btn {\n padding: 0.75rem;\n }\n \n .video-controls {\n flex-direction: column;\n gap: 1rem;\n text-align: center;\n }\n \n .footer {\n padding: 1rem;\n }\n \n .footer-content {\n gap: 0.75rem;\n }\n \n .disclaimer {\n flex-direction: column;\n text-align: center;\n gap: 0.25rem;\n }\n}\n\n/* Loading Animation */\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.channel-btn {\n animation: fadeIn 0.5s ease forwards;\n}\n\n/* Smooth Transitions */\n* {\n transition: all 0.3s ease;\n}\n\n/* Focus States for Accessibility */\n.channel-btn:focus,\n.control-btn:focus {\n outline: 2px solid #4ecdc4;\n outline-offset: 2px;\n}\n\n/* Custom Scrollbar for Webkit Browsers */\n::-webkit-scrollbar {\n width: 8px;\n}\n\n::-webkit-scrollbar-track {\n background: rgba(255, 255, 255, 0.1);\n border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb {\n background: linear-gradient(45deg, #ff6b6b, #4ecdc4);\n border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: linear-gradient(45deg, #ff5252, #26a69a);\n}",[],[208],"files",[150,168,178,188,196,206],"counts",{"_221":32,"_222":192,"_223":32,"_224":225},"pulls","branches","forks","envVars",{"_226":32,"_227":32},"count","emptyCount","contents",[],{"_104":179,"_95":99,"_153":180,"_155":-5,"_156":138,"_157":181,"_158":22,"_106":231,"_100":183,"_161":184,"_163":185,"_164":22,"_165":-5,"_98":232},["D",1748748901295],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":241,"_148":246,"_217":265,"_213":266,"_228":268,"_269":-5,"_270":-5,"_271":-5,"_272":-5,"_273":274},{"_104":105,"_95":96,"_106":242,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":243,"_132":244,"_135":245,"_147":22},["D",1748748288687],{"_93":94,"_130":131},{"_93":94,"_134":131,"_14":114},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[247,253,256,259,262],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":101,"_158":159,"_106":160,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":248,"_98":252},[249],{"_104":169,"_95":170,"_153":171,"_155":154,"_156":138,"_157":101,"_158":22,"_106":172,"_100":32,"_161":173,"_163":174,"_164":22,"_165":-5,"_166":250,"_98":251},[],[152,170],[152],{"_104":179,"_95":99,"_153":180,"_155":-5,"_156":138,"_157":181,"_158":22,"_106":182,"_100":183,"_161":184,"_163":185,"_164":22,"_165":-5,"_166":254,"_98":255},[],[99],{"_104":189,"_95":190,"_153":191,"_155":-5,"_156":138,"_157":192,"_158":159,"_106":193,"_100":32,"_161":173,"_163":72,"_164":22,"_165":-5,"_166":257,"_98":258},[],[190],{"_104":197,"_95":198,"_153":199,"_155":-5,"_156":138,"_157":200,"_158":22,"_106":201,"_100":202,"_161":173,"_163":203,"_164":22,"_165":-5,"_166":260,"_98":261},[],[198],{"_104":207,"_95":208,"_153":209,"_155":-5,"_156":138,"_157":210,"_158":22,"_106":211,"_100":212,"_161":213,"_163":214,"_164":22,"_165":-5,"_166":263,"_98":264},[],[208],[247,249,253,256,259,262],{"_104":179,"_95":99,"_153":180,"_155":-5,"_156":138,"_157":181,"_158":22,"_106":231,"_100":183,"_161":184,"_163":185,"_164":22,"_165":-5,"_98":267},[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

digilocaltv

untitled-4124