Update dashboard.html

dashboard.html

@@ -92,6 +92,7 @@
             <div class="p-8">
                 <!-- Dashboard: Overview -->
                 <div id="dashboard-overview" class="dashboard-content">
+                    <!-- Stat Cards -->
                     <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">
@@ -126,37 +127,33 @@
                             <div class="text-sm text-green-400 mt-1">Vision 2030 Dominant</div>
                         </div>
                     </div>
+
+                    <!-- Visualizations Grid -->
                     <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                        <!-- Platform Comparison GIF -->
                         <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>
+                            <h3 class="text-xl font-bold mb-4" data-en="Platform & Mentions Analysis" data-ar="تحليل المنصات والإشارات">Platform & Mentions Analysis</h3>
+                            <div class="h-80 rounded-lg overflow-hidden">
+                                <img src="dashboard-platform-comparison.gif" alt="Platform Comparison Data" class="w-full h-full object-cover">
                             </div>
                         </div>
+                        <!-- Live Feed GIF -->
                         <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>
+                            <h3 class="text-xl font-bold mb-4" data-en="Live Media Feed" data-ar="التغذية المباشرة للإعلام">Live Media Feed</h3>
+                            <div class="h-80 rounded-lg overflow-hidden">
+                                <img src="dashboard-live-feed.gif" alt="Live Feed Data" class="w-full h-full object-cover">
+                            </div>
                         </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 class="glass-card p-6 rounded-2xl">
+                         <h3 class="text-xl font-bold mb-4" data-en="Image Virality & Geospatial Spread" data-ar="انتشار الصور والتوزيع الجغرافي">Image Virality & Geospatial Spread</h3>
+                         <div class="rounded-lg overflow-hidden">
+                            <img src="dashboard-image-virality.gif" alt="Image Virality Data" class="w-full h-auto object-contain">
+                         </div>
                     </div>
                 </div>
 
@@ -183,15 +180,13 @@
 
                 <!-- 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 class="glass-card p-6 rounded-2xl">
+                        <h3 class="text-xl font-bold mb-4" data-en="Content Topics & Sentiment Analysis" data-ar="مواضيع المحتوى وتحليل المشاعر">Content Topics & Sentiment Analysis</h3>
+                        <div class="rounded-lg overflow-hidden">
+                            <img src="dashboard-content-topics.gif" alt="Content Topics Analysis" class="w-full h-auto object-contain">
+                        </div>
+                    </div>
                 </div>
-
-            </div>
         </main>
     </div>