Create script.js

script.js

@@ -0,0 +1,215 @@
+// NABAD - script.js
+
+// --- GLOBAL STATE ---
+let currentLanguage = localStorage.getItem('nabadLanguage') || 'ar';
+
+// --- INITIALIZATION ---
+document.addEventListener('DOMContentLoaded', () => {
+    console.log("🚀 NABAD Platform Initialized");
+    initializeLanguage();
+    setupEventListeners();
+
+    if (document.getElementById('year')) {
+        document.getElementById('year').textContent = new Date().getFullYear();
+    }
+    
+    // Page specific initializations
+    if (window.location.pathname.includes('dashboard.html')) {
+        initDashboards();
+    } else if (window.location.pathname.includes('video.html')) {
+        initVideoLibrary();
+    } else {
+        initHomePage();
+    }
+});
+
+// --- EVENT LISTENERS SETUP ---
+function setupEventListeners() {
+    // Language toggles
+    document.querySelectorAll('button[onclick="toggleLanguage()"]').forEach(btn => {
+        btn.addEventListener('click', toggleLanguage);
+    });
+
+    // Smooth scrolling for homepage links
+    if (!window.location.pathname.includes('dashboard.html') && !window.location.pathname.includes('video.html')) {
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+    }
+}
+
+// --- LANGUAGE MANAGEMENT ---
+function initializeLanguage() {
+    const htmlEl = document.getElementById('html');
+    if (currentLanguage === 'ar') {
+        htmlEl.setAttribute('lang', 'ar');
+        htmlEl.setAttribute('dir', 'rtl');
+        htmlEl.classList.add('rtl');
+        htmlEl.classList.remove('ltr');
+    } else {
+        htmlEl.setAttribute('lang', 'en');
+        htmlEl.setAttribute('dir', 'ltr');
+        htmlEl.classList.add('ltr');
+        htmlEl.classList.remove('rtl');
+    }
+    updateLanguageUI();
+    updateTextContent();
+}
+
+function toggleLanguage() {
+    currentLanguage = currentLanguage === 'en' ? 'ar' : 'en';
+    localStorage.setItem('nabadLanguage', currentLanguage);
+    initializeLanguage();
+}
+
+function updateLanguageUI() {
+    if (document.getElementById('lang-toggle')) {
+        document.getElementById('lang-toggle').textContent = currentLanguage === 'en' ? 'ع' : 'En';
+    }
+    if (document.getElementById('lang-toggle-dash')) {
+        document.getElementById('lang-toggle-dash').textContent = currentLanguage === 'en' ? 'ع' : 'En';
+    }
+    
+    // Handle placeholder text for search input
+    const searchInput = document.getElementById('video-search');
+    if (searchInput) {
+        const placeholderText = currentLanguage === 'ar' ? 'ابحث في الفيديوهات...' : 'Search videos...';
+        searchInput.setAttribute('placeholder', placeholderText);
+    }
+}
+
+function updateTextContent() {
+    if (!translations) return;
+    const trans = translations[currentLanguage];
+    document.querySelectorAll('[data-en]').forEach(el => {
+        const keyEn = el.getAttribute('data-en');
+        const keyAr = el.getAttribute('data-ar');
+        if (currentLanguage === 'ar' && keyAr) {
+            el.textContent = keyAr;
+        } else {
+            el.textContent = keyEn;
+        }
+    });
+
+    // Update dashboard title separately as it's not a static element
+    if (window.location.pathname.includes('dashboard.html')) {
+        const activeDashboard = document.querySelector('.sidebar-link.active');
+        if (activeDashboard) {
+            updateDashboardTitle(activeDashboard);
+        }
+    }
+}
+
+// --- HOME PAGE SPECIFIC ---
+function initHomePage() {
+    // Scroll reveal animation
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('visible');
+            }
+        });
+    }, { threshold: 0.1 });
+
+    document.querySelectorAll('.scroll-reveal').forEach(el => {
+        observer.observe(el);
+    });
+}
+
+
+// --- DASHBOARD PAGE SPECIFIC ---
+function initDashboards() {
+    const sidebarLinks = document.querySelectorAll('.sidebar-link');
+    sidebarLinks.forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            
+            sidebarLinks.forEach(l => l.classList.remove('active'));
+            link.classList.add('active');
+
+            const dashboardId = link.getAttribute('data-dashboard');
+            document.querySelectorAll('.dashboard-content').forEach(content => {
+                content.classList.add('hidden');
+            });
+            document.getElementById(`dashboard-${dashboardId}`).classList.remove('hidden');
+            updateDashboardTitle(link);
+        });
+    });
+    // Set initial title
+    updateDashboardTitle(document.querySelector('.sidebar-link.active'));
+}
+
+function updateDashboardTitle(activeLink) {
+    const titleEl = document.getElementById('dashboard-title');
+    if (titleEl && activeLink) {
+        const titleText = activeLink.querySelector('span').textContent;
+        const dashboardText = currentLanguage === 'ar' ? 'لوحة تحكم: ' : 'Dashboard: ';
+        titleEl.textContent = dashboardText + titleText;
+    }
+}
+
+
+// --- VIDEO LIBRARY SPECIFIC ---
+const ALL_VIDEOS = [
+    { id: 'dfrPtS4MSlw', title_en: "Vision 2030: A Reality Unfolding", title_ar: "رؤية 2030: واقع يتحقق", category: 'vision2030' },
+    { id: 'IzogBJpcEWg', title_en: "Saudi National Anthem", title_ar: "النشيد الوطني السعودي", category: 'pride' },
+    { id: '35g7UMVbfPc', title_en: "Rasd Platform Demo", title_ar: "عرض منصة رصد", category: 'technology' },
+    { id: 'kDqTPT1SQbU', title_en: "Saudi Tourism Impact", title_ar: "تأثير السياحة السعودية", category: 'vision2030' },
+    { id: 'h-KM2Z0YxtQ', title_en: "The Future of AI in KSA", title_ar: "مستقبل الذكاء الاصطناعي بالمملكة", category: 'technology' },
+    // You can add more videos here
+];
+
+function initVideoLibrary() {
+    const grid = document.getElementById('video-grid');
+    const searchInput = document.getElementById('video-search');
+    const filterBtns = document.querySelectorAll('.filter-btn');
+
+    function renderVideos(videos) {
+        if (!grid) return;
+        grid.innerHTML = '';
+        videos.forEach(video => {
+            const title = currentLanguage === 'ar' ? video.title_ar : video.title_en;
+            const card = document.createElement('div');
+            card.className = 'video-card glass-card rounded-2xl overflow-hidden';
+            card.innerHTML = `
+                <div class="aspect-video">
+                    <iframe class="w-full h-full" src="https://www.youtube.com/embed/${video.id}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                </div>
+                <div class="p-4">
+                    <h3 class="font-bold text-white truncate">${title}</h3>
+                </div>
+            `;
+            grid.appendChild(card);
+        });
+    }
+
+    function filterAndSearch() {
+        const searchTerm = searchInput.value.toLowerCase();
+        const activeFilter = document.querySelector('.filter-btn.active').dataset.filter;
+
+        const filteredVideos = ALL_VIDEOS.filter(video => {
+            const matchesFilter = activeFilter === 'all' || video.category === activeFilter;
+            const matchesSearch = video.title_en.toLowerCase().includes(searchTerm) || video.title_ar.toLowerCase().includes(searchTerm);
+            return matchesFilter && matchesSearch;
+        });
+        
+        renderVideos(filteredVideos);
+    }
+    
+    searchInput.addEventListener('input', filterAndSearch);
+
+    filterBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            filterBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            filterAndSearch();
+        });
+    });
+
+    renderVideos(ALL_VIDEOS);
+}