Update index.html

index.html

@@ -134,7 +134,28 @@
                     <!-- Dashboard 1: Real-time Feed -->
                     <div class="dashboard-mini">
                         <div class="dashboard-preview-mini">
-                            <img src="https://huggingface.co/spaces/AhmedMostafaAttia/rasd-was-demo/resolve/main/dashboard-realtime-feed.gif" alt="Real-time Feed" loading="lazy">
+                            <img src="https://huggingface.co/spaces/AhmedMostafaAttia/rasd-was-demo/resolve/main/dashboard-realtime-feed.gif" alt="Real-time Feed" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
+                            <!-- Fallback Chart -->
+                            <div class="w-full h-full bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl flex items-center justify-center relative" style="display:none;">
+                                <div class="absolute inset-4">
+                                    <!-- Live Feed Animation -->
+                                    <div class="space-y-2">
+                                        <div class="flex items-center space-x-2">
+                                            <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                                            <div class="h-2 bg-blue-300 rounded w-3/4"></div>
+                                        </div>
+                                        <div class="flex items-center space-x-2">
+                                            <div class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
+                                            <div class="h-2 bg-blue-300 rounded w-1/2"></div>
+                                        </div>
+                                        <div class="flex items-center space-x-2">
+                                            <div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
+                                            <div class="h-2 bg-blue-300 rounded w-2/3"></div>
+                                        </div>
+                                    </div>
+                                    <div class="absolute bottom-2 right-2 text-xs text-blue-600 font-semibold">LIVE</div>
+                                </div>
+                            </div>
                         </div>
                         <h4 class="text-xl font-bold text-saudi-dark mb-3" data-en="Real-time News Feed" data-ar="التغذية الإخبارية المباشرة">Real-time News Feed</h4>
                         <p class="text-gray-600 text-sm leading-relaxed" data-en="Watch your news spread live across the globe. See exactly where and when your content is being published, shared, and discussed in real-time." data-ar="راقب انتشار أخبارك مباشرة حول العالم. شاهد بالضبط أين ومتى يتم نشر ومشاركة ومناقشة محتواك في الوقت الفعلي.">Watch your news spread live across the globe. See exactly where and when your content is being published, shared, and discussed in real-time.</p>
@@ -143,7 +164,27 @@
                     <!-- Dashboard 2: Sentiment Analysis -->
                     <div class="dashboard-mini">
                         <div class="dashboard-preview-mini">
-                            <img src="https://huggingface.co/spaces/AhmedMostafaAttia/rasd-was-demo/resolve/main/dashboard-sentiment.gif" alt="Sentiment Analysis" loading="lazy">
+                            <img src="https://huggingface.co/spaces/AhmedMostafaAttia/rasd-was-demo/resolve/main/dashboard-sentiment.gif" alt="Sentiment Analysis" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
+                            <!-- Fallback Chart -->
+                            <div class="w-full h-full bg-gradient-to-br from-green-50 to-green-100 rounded-2xl flex items-center justify-center relative" style="display:none;">
+                                <div class="absolute inset-4">
+                                    <!-- Sentiment Pie Chart -->
+                                    <svg viewBox="0 0 100 100" class="w-full h-full">
+                                        <!-- Positive (green) - 70% -->
+                                        <circle cx="50" cy="50" r="30" fill="none" stroke="#22c55e" stroke-width="12" stroke-dasharray="66 100" transform="rotate(-90 50 50)"/>
+                                        <!-- Neutral (yellow) - 20% -->
+                                        <circle cx="50" cy="50" r="30" fill="none" stroke="#eab308" stroke-width="12" stroke-dasharray="19 100" stroke-dashoffset="-66" transform="rotate(-90 50 50)"/>
+                                        <!-- Negative (red) - 10% -->
+                                        <circle cx="50" cy="50" r="30" fill="none" stroke="#ef4444" stroke-width="12" stroke-dasharray="9 100" stroke-dashoffset="-85" transform="rotate(-90 50 50)"/>
+                                    </svg>
+                                    <div class="absolute inset-0 flex items-center justify-center">
+                                        <div class="text-center">
+                                            <div class="text-2xl font-bold text-green-600">94%</div>
+                                            <div class="text-xs text-green-700">Positive</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                         <h4 class="text-xl font-bold text-saudi-dark mb-3" data-en="Sentiment Analysis" data-ar="تحليل المشاعر">Sentiment Analysis</h4>
                         <p class="text-gray-600 text-sm leading-relaxed" data-en="Understand public reaction instantly. Our AI analyzes thousands of comments and reactions to show whether people feel positive, negative, or neutral about your news." data-ar="افهم ردود أفعال الجمهور فورياً. ذكاؤنا الاصطناعي يحلل آلاف التعليقات والتفاعلات لإظهار ما إذا كان الناس يشعرون بالإيجابية أو السلبية أو الحياد تجاه أخبارك.">Understand public reaction instantly. Our AI analyzes thousands of comments and reactions to show whether people feel positive, negative, or neutral about your news.</p>
@@ -152,7 +193,26 @@
                     <!-- Dashboard 3: Global Impact -->
                     <div class="dashboard-mini">
                         <div class="dashboard-preview-mini">
-                            <img src="https://huggingface.co/spaces/AhmedMostafaAttia/rasd-was-demo/resolve/main/dashboard-global-summary.gif" alt="Global Impact" loading="lazy">
+                            <img src="https://huggingface.co/spaces/AhmedMostafaAttia/rasd-was-demo/resolve/main/dashboard-global-summary.gif" alt="Global Impact" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
+                            <!-- Fallback Chart -->
+                            <div class="w-full h-full bg-gradient-to-br from-purple-50 to-purple-100 rounded-2xl flex items-center justify-center relative" style="display:none;">
+                                <div class="absolute inset-4">
+                                    <!-- World Map Simulation -->
+                                    <div class="relative h-full">
+                                        <!-- Continents representation -->
+                                        <div class="absolute top-6 left-4 w-8 h-4 bg-purple-400 rounded-sm opacity-80"></div>
+                                        <div class="absolute top-8 right-6 w-12 h-6 bg-purple-500 rounded-sm opacity-70"></div>
+                                        <div class="absolute bottom-8 left-8 w-10 h-8 bg-purple-300 rounded-sm opacity-90"></div>
+                                        <div class="absolute bottom-6 right-4 w-6 h-6 bg-purple-600 rounded-sm opacity-60"></div>
+                                        <!-- Activity dots -->
+                                        <div class="absolute top-8 left-6 w-2 h-2 bg-yellow-400 rounded-full animate-ping"></div>
+                                        <div class="absolute top-12 right-8 w-2 h-2 bg-red-400 rounded-full animate-ping"></div>
+                                        <div class="absolute bottom-12 left-12 w-2 h-2 bg-green-400 rounded-full animate-ping"></div>
+                                        <!-- Stats -->
+                                        <div class="absolute bottom-2 left-2 text-xs text-purple-700 font-bold">89 Countries</div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                         <h4 class="text-xl font-bold text-saudi-dark mb-3" data-en="Global Impact Summary" data-ar="ملخص التأثير العالمي">Global Impact Summary</h4>
                         <p class="text-gray-600 text-sm leading-relaxed" data-en="Get the big picture at a glance. See how many countries, media outlets, and people your news has reached with beautiful interactive maps and charts." data-ar="احصل على الصورة الكبيرة بنظرة واحدة. شاهد كم دولة ومنفذ إعلامي وشخص وصلت إليه أخبارك من خلال خرائط ومخططات تفاعلية جميلة.">Get the big picture at a glance. See how many countries, media outlets, and people your news has reached with beautiful interactive maps and charts.</p>
@@ -161,7 +221,28 @@
                     <!-- Dashboard 4: Viral Prediction -->
                     <div class="dashboard-mini">
                         <div class="dashboard-preview-mini">
-                            <img src="https://huggingface.co/spaces/AhmedMostafaAttia/rasd-was-demo/resolve/main/dashboard-prediction.gif" alt="Viral Prediction" loading="lazy">
+                            <img src="https://huggingface.co/spaces/AhmedMostafaAttia/rasd-was-demo/resolve/main/dashboard-prediction.gif" alt="Viral Prediction" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
+                            <!-- Fallback Chart -->
+                            <div class="w-full h-full bg-gradient-to-br from-orange-50 to-orange-100 rounded-2xl flex items-center justify-center relative" style="display:none;">
+                                <div class="absolute inset-4">
+                                    <!-- Trend Line Chart -->
+                                    <svg viewBox="0 0 100 80" class="w-full h-full">
+                                        <!-- Grid lines -->
+                                        <line x1="10" y1="70" x2="90" y2="70" stroke="#fed7aa" stroke-width="0.5"/>
+                                        <line x1="10" y1="50" x2="90" y2="50" stroke="#fed7aa" stroke-width="0.5"/>
+                                        <line x1="10" y1="30" x2="90" y2="30" stroke="#fed7aa" stroke-width="0.5"/>
+                                        <!-- Trend line -->
+                                        <path d="M 15 65 Q 30 60 45 45 T 85 25" stroke="#f97316" stroke-width="3" fill="none"/>
+                                        <!-- Data points -->
+                                        <circle cx="15" cy="65" r="2" fill="#ea580c"/>
+                                        <circle cx="30" cy="55" r="2" fill="#ea580c"/>
+                                        <circle cx="45" cy="45" r="2" fill="#ea580c"/>
+                                        <circle cx="60" cy="35" r="2" fill="#ea580c"/>
+                                        <circle cx="85" cy="25" r="2" fill="#ea580c"/>
+                                    </svg>
+                                    <div class="absolute bottom-2 right-2 text-xs text-orange-600 font-bold">87% Accuracy</div>
+                                </div>
+                            </div>
                         </div>
                         <h4 class="text-xl font-bold text-saudi-dark mb-3" data-en="Viral Prediction Engine" data-ar="محرك التنبؤ بالانتشار">Viral Prediction Engine</h4>
                         <p class="text-gray-600 text-sm leading-relaxed" data-en="Know which stories will go viral before they do. Our AI predicts viral potential so you can prepare your strategy and allocate resources effectively." data-ar="اعرف أي القصص ستنتشر بشكل فيروسي قبل حدوث ذلك. ذكاؤنا الاصطناعي يتنبأ بالإمكانات الفيروسية لتتمكن من إعداد استراتيجيتك وتخصيص الموارد بفعالية.">Know which stories will go viral before they do. Our AI predicts viral potential so you can prepare your strategy and allocate resources effectively.</p>