Spaces:
Running
Running
| <html lang="en" dir="ltr" id="html"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dashboards | NABAD</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'brand-dark': '#0D1B2A', | |
| 'brand-blue': '#3A86FF', | |
| 'brand-gold': '#FFBE0B', | |
| 'brand-light': '#E0E1DD', | |
| 'brand-gray': '#415A77', | |
| }, | |
| fontFamily: { | |
| 'tajawal': ['Tajawal', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { font-family: 'Tajawal', sans-serif; background-color: #0D1B2A; color: #E0E1DD; } | |
| .glass-card { background: rgba(65, 90, 119, 0.2); backdrop-filter: blur(12px); border: 1px solid rgba(224, 225, 221, 0.1); } | |
| .sidebar-link.active { background-color: #3A86FF; color: white; } | |
| .sidebar-link:not(.active):hover { background-color: #415A77; } | |
| .rtl { direction: rtl; } | |
| .ltr { direction: ltr; } | |
| .world-map-bg { background-image: url('world-map.svg'); background-size: contain; background-position: center; background-repeat: no-repeat; } | |
| </style> | |
| </head> | |
| <body class="font-tajawal"> | |
| <div class="flex h-screen bg-brand-dark"> | |
| <!-- Sidebar --> | |
| <aside class="w-64 flex-shrink-0 bg-brand-dark/50 border-r border-brand-gray/50 flex flex-col"> | |
| <div class="h-20 flex items-center justify-center border-b border-brand-gray/50 space-x-3"> | |
| <i class="fas fa-wave-square text-brand-blue text-2xl"></i> | |
| <h1 class="text-xl font-bold text-white" data-en="NABAD" data-ar="نَبَض">NABAD</h1> | |
| </div> | |
| <nav class="flex-1 p-4 space-y-2"> | |
| <a href="#" class="sidebar-link active flex items-center p-3 rounded-lg transition-colors" data-dashboard="overview"> | |
| <i class="fas fa-tachometer-alt w-6 text-center"></i> | |
| <span class="ml-4" data-en="Overview" data-ar="نظرة عامة">Overview</span> | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors" data-dashboard="geospatial"> | |
| <i class="fas fa-globe-americas w-6 text-center"></i> | |
| <span class="ml-4" data-en="Geospatial" data-ar="التحليل الجغرافي">Geospatial</span> | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors" data-dashboard="projects"> | |
| <i class="fas fa-building w-6 text-center"></i> | |
| <span class="ml-4" data-en="Mega Projects" data-ar="المشاريع الكبرى">Mega Projects</span> | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors" data-dashboard="content"> | |
| <i class="fas fa-file-alt w-6 text-center"></i> | |
| <span class="ml-4" data-en="Content Deep-Dive" data-ar="تحليل المحتوى">Content Deep-Dive</span> | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors" data-dashboard="system"> | |
| <i class="fas fa-cogs w-6 text-center"></i> | |
| <span class="ml-4" data-en="System Health" data-ar="أداء النظام">System Health</span> | |
| </a> | |
| </nav> | |
| <div class="p-4 border-t border-brand-gray/50"> | |
| <a href="index.html" class="flex items-center p-3 text-brand-light hover:text-white transition-colors"> | |
| <i class="fas fa-sign-out-alt w-6 text-center"></i> | |
| <span class="ml-4" data-en="Back to Home" data-ar="العودة للرئيسية">Back to Home</span> | |
| </a> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="flex-1 overflow-y-auto"> | |
| <header class="h-20 flex items-center justify-between px-8 bg-brand-dark/30 border-b border-brand-gray/50"> | |
| <h2 id="dashboard-title" class="text-2xl font-bold text-white">Dashboard Overview</h2> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2 text-green-400"> | |
| <i class="fas fa-circle animate-pulse text-xs"></i> | |
| <span class="text-sm font-medium" data-en="LIVE" data-ar="مباشر">LIVE</span> | |
| </div> | |
| <button onclick="toggleLanguage()" class="w-10 h-10 border-2 border-brand-gray rounded-full hover:border-brand-blue transition-colors"> | |
| <span id="lang-toggle-dash">ع</span> | |
| </button> | |
| </div> | |
| </header> | |
| <div class="p-8"> | |
| <!-- Dashboard: Overview --> | |
| <div id="dashboard-overview" class="dashboard-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="glass-card p-6 rounded-2xl"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-brand-light" data-en="Global Mentions" data-ar="الإشارات العالمية">Global Mentions</span> | |
| <i class="fas fa-newspaper text-brand-blue"></i> | |
| </div> | |
| <div class="text-4xl font-bold mt-2">2.4M</div> | |
| <div class="text-sm text-green-400 mt-1">+15%</div> | |
| </div> | |
| <div class="glass-card p-6 rounded-2xl"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-brand-light" data-en="Positive Sentiment" data-ar="المشاعر الإيجابية">Positive Sentiment</span> | |
| <i class="fas fa-smile text-brand-gold"></i> | |
| </div> | |
| <div class="text-4xl font-bold mt-2">94.7%</div> | |
| <div class="text-sm text-green-400 mt-1">+1.2%</div> | |
| </div> | |
| <div class="glass-card p-6 rounded-2xl"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-brand-light" data-en="Countries Reached" data-ar="الدول التي تم الوصول إليها">Countries Reached</span> | |
| <i class="fas fa-globe text-brand-blue"></i> | |
| </div> | |
| <div class="text-4xl font-bold mt-2">172</div> | |
| <div class="text-sm text-green-400 mt-1">+3 New</div> | |
| </div> | |
| <div class="glass-card p-6 rounded-2xl"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-brand-light" data-en="Key Narratives" data-ar="السرديات الرئيسية">Key Narratives</span> | |
| <i class="fas fa-book-open text-brand-gold"></i> | |
| </div> | |
| <div class="text-4xl font-bold mt-2">12</div> | |
| <div class="text-sm text-green-400 mt-1">Vision 2030 Dominant</div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2 glass-card p-6 rounded-2xl"> | |
| <h3 class="text-xl font-bold mb-4" data-en="Mentions Over Time" data-ar="حجم الإشارات عبر الزمن">Mentions Over Time</h3> | |
| <div class="h-80 bg-brand-dark/50 rounded-lg flex items-center justify-center"> | |
| <span class="text-brand-gray" data-en="Chart Placeholder" data-ar="مساحة للرسم البياني">Chart Placeholder</span> | |
| </div> | |
| </div> | |
| <div class="glass-card p-6 rounded-2xl"> | |
| <h3 class="text-xl font-bold mb-4" data-en="Top Media Sources" data-ar="أبرز المصادر الإعلامية">Top Media Sources</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex justify-between items-center"><span>Reuters</span><span class="font-bold text-brand-blue">18.2K</span></li> | |
| <li class="flex justify-between items-center"><span>Associated Press</span><span class="font-bold text-brand-blue">15.7K</span></li> | |
| <li class="flex justify-between items-center"><span>Bloomberg</span><span class="font-bold text-brand-blue">12.1K</span></li> | |
| <li class="flex justify-between items-center"><span>Al Jazeera</span><span class="font-bold text-brand-blue">9.8K</span></li> | |
| <li class="flex justify-between items-center"><span>CNN</span><span class="font-bold text-brand-blue">7.2K</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dashboard: Geospatial --> | |
| <div id="dashboard-geospatial" class="dashboard-content hidden"> | |
| <div class="glass-card p-6 rounded-2xl h-[75vh] flex flex-col"> | |
| <h3 class="text-xl font-bold mb-4" data-en="Global Media Sentiment Map" data-ar="خريطة المشاعر الإعلامية العالمية">Global Media Sentiment Map</h3> | |
| <div class="flex-1 world-map-bg opacity-70 rounded-lg"> | |
| <!-- Simulated data points --> | |
| <div class="absolute top-[30%] left-[25%]" title="USA: 92% Positive"><i class="fas fa-circle text-green-400 animate-pulse"></i></div> | |
| <div class="absolute top-[40%] left-[50%]" title="Europe: 95% Positive"><i class="fas fa-circle text-green-400 animate-pulse"></i></div> | |
| <div class="absolute top-[60%] left-[55%]" title="MENA: 98% Positive"><i class="fas fa-circle text-green-400 animate-pulse"></i></div> | |
| <div class="absolute top-[45%] left-[80%]" title="East Asia: 88% Positive"><i class="fas fa-circle text-green-400 animate-pulse"></i></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dashboard: Mega Projects --> | |
| <div id="dashboard-projects" class="dashboard-content hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="glass-card p-6 rounded-2xl text-center"> | |
| <h3 class="text-2xl font-bold">NEOM</h3> | |
| <div class="text-5xl font-bold text-brand-blue my-4">1.2M</div> | |
| <span class="text-brand-light" data-en="Total Mentions" data-ar="إجمالي الإشارات">Total Mentions</span> | |
| </div> | |
| <div class="glass-card p-6 rounded-2xl text-center"> | |
| <h3 class="text-2xl font-bold" data-en="Diriyah Gate" data-ar="بوابة الدرعية">Diriyah Gate</h3> | |
| <div class="text-5xl font-bold text-brand-blue my-4">780K</div> | |
| <span class="text-brand-light" data-en="Total Mentions" data-ar="إجمالي الإشارات">Total Mentions</span> | |
| </div> | |
| <div class="glass-card p-6 rounded-2xl text-center"> | |
| <h3 class="text-2xl font-bold" data-en="Red Sea Global" data-ar="البحر الأحمر">Red Sea Global</h3> | |
| <div class="text-5xl font-bold text-brand-blue my-4">950K</div> | |
| <span class="text-brand-light" data-en="Total Mentions" data-ar="إجمالي الإشارات">Total Mentions</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dashboard: Content Deep-Dive --> | |
| <div id="dashboard-content" class="dashboard-content hidden"> | |
| <h3 class="text-xl font-bold mb-4" data-en="Content analysis by topic" data-ar="تحليل المحتوى حسب الموضوع">Content analysis by topic</h3> | |
| </div> | |
| <!-- Dashboard: System Health --> | |
| <div id="dashboard-system" class="dashboard-content hidden"> | |
| <h3 class="text-xl font-bold mb-4" data-en="AI and System Performance" data-ar="أداء الذكاء الاصطناعي والنظام">AI and System Performance</h3> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="translations.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |