Spaces:
Running
Running
| <html lang="en" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SaudiPulse | News Radar</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.17.0/d3.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.9/datamaps.world.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#245953', | |
| secondary: '#408E91', | |
| accent: '#E49393', | |
| dark: '#1B1A17', | |
| light: '#F8F5F1' | |
| }, | |
| fontFamily: { | |
| arabic: ['Tajawal', 'sans-serif'], | |
| english: ['Poppins', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Tajawal:wght@400;500;700&display=swap'); | |
| body { | |
| font-family: 'Tajawal', 'Poppins', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #245953 0%, #408E91 50%, #E49393 100%); | |
| } | |
| .news-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .rtl { | |
| direction: rtl; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 rtl"> | |
| <!-- Vanta.js Globe Background --> | |
| <div id="vanta-globe" class="fixed top-0 left-0 w-full h-full z-0"></div> | |
| <!-- Main Content --> | |
| <div class="relative z-10 min-h-screen flex flex-col"> | |
| <!-- Navigation --> | |
| <nav class="bg-white/90 backdrop-blur-md shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="globe" class="text-primary h-8 w-8"></i> | |
| <span class="ml-2 text-xl font-bold text-primary">SaudiPulse</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-4 space-x-reverse"> | |
| <a href="#" class="text-primary px-3 py-2 rounded-md text-sm font-medium border-b-2 border-primary">الرئيسية</a> | |
| <a href="#dashboard" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">لوحة التحكم</a> | |
| <a href="#sentiment" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">تحليل المشاعر</a> | |
| <a href="#alerts" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">التنبيهات</a> | |
| <button class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-opacity-90 transition duration-200"> | |
| <i data-feather="user" class="w-4 h-4 inline mr-1"></i> تسجيل الدخول | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-primary focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <header class="gradient-bg text-white py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">رادار الأخبار السعودية حول العالم</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">نظام ذكي لرصد وتحليل الانطباع الإعلامي عن المملكة العربية السعودية في الوقت الفعلي</p> | |
| <div class="flex justify-center space-x-4 space-x-reverse"> | |
| <button class="bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition duration-200 flex items-center"> | |
| <i data-feather="play-circle" class="w-5 h-5 ml-2"></i> عرض العرض التوضيحي | |
| </button> | |
| <button class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition duration-200 flex items-center"> | |
| <i data-feather="info" class="w-5 h-5 ml-2"></i> المزيد عن النظام | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Stats Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 text-center"> | |
| <div class="bg-light p-6 rounded-xl shadow-sm"> | |
| <div class="text-3xl font-bold text-primary">12,457</div> | |
| <div class="text-gray-600 mt-2">خبر تم تحليله</div> | |
| <i data-feather="file-text" class="w-8 h-8 mx-auto mt-4 text-secondary"></i> | |
| </div> | |
| <div class="bg-light p-6 rounded-xl shadow-sm"> | |
| <div class="text-3xl font-bold text-primary">346</div> | |
| <div class="text-gray-600 mt-2">مصدر إخباري</div> | |
| <i data-feather="globe" class="w-8 h-8 mx-auto mt-4 text-secondary"></i> | |
| </div> | |
| <div class="bg-light p-6 rounded-xl shadow-sm"> | |
| <div class="text-3xl font-bold text-primary">83%</div> | |
| <div class="text-gray-600 mt-2">أخبار إيجابية</div> | |
| <i data-feather="thumbs-up" class="w-8 h-8 mx-auto mt-4 text-secondary"></i> | |
| </div> | |
| <div class="bg-light p-6 rounded-xl shadow-sm"> | |
| <div class="text-3xl font-bold text-primary">42</div> | |
| <div class="text-gray-600 mt-2">بلد مغطى</div> | |
| <i data-feather="map" class="w-8 h-8 mx-auto mt-4 text-secondary"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dashboard Preview --> | |
| <section id="dashboard" class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center text-dark mb-12">لوحة التحكم التفاعلية</h2> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-4 bg-primary text-white flex justify-between items-center"> | |
| <h3 class="text-xl font-medium">نظرة عامة على التغطية الإخبارية</h3> | |
| <div class="flex space-x-2 space-x-reverse"> | |
| <button class="p-1 rounded hover:bg-white/10"> | |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-1 rounded hover:bg-white/10"> | |
| <i data-feather="settings" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2"> | |
| <canvas id="trendChart" height="300"></canvas> | |
| </div> | |
| <div> | |
| <canvas id="sentimentChart" height="300"></canvas> | |
| </div> | |
| </div> | |
| <div class="mt-6 relative"> | |
| <div class="h-[400px] w-full rounded-lg overflow-hidden"> | |
| <div id="worldMap" class="h-full w-full"> | |
| <div class="absolute top-0 right-0 z-10 p-4 bg-white/80 rounded-bl-lg shadow-sm flex items-center space-x-2 space-x-reverse"> | |
| <div class="flex items-center"> | |
| <span class="w-3 h-3 rounded-full bg-green-500"></span> | |
| <span class="text-xs mr-1">إيجابي</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-3 h-3 rounded-full bg-red-500"></span> | |
| <span class="text-xs mr-1">سلبي</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-3 h-3 rounded-full bg-yellow-500"></span> | |
| <span class="text-xs mr-1">محايد</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sentiment Analysis --> | |
| <section id="sentiment" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center text-dark mb-12">تحليل الانطباع الإعلامي</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-primary mb-4">أحدث الأخبار المحللة</h3> | |
| <div class="space-y-4"> | |
| <div class="news-card bg-light p-4 rounded-lg transition duration-300 cursor-pointer"> | |
| <div class="flex justify-between items-start"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">إيجابي 87%</span> | |
| <span class="text-gray-500 text-sm">منذ 15 دقيقة</span> | |
| </div> | |
| <h4 class="font-medium mt-2">رؤية 2030 تحقق قفزة نوعية في الاستثمارات الأجنبية</h4> | |
| <p class="text-gray-600 text-sm mt-1 line-clamp-2">ذكرت وكالة بلومبيرج أن المملكة العربية السعودية شهدت زيادة بنسبة 35% في الاستثمارات الأجنبية المباشرة خلال الربع الأول من 2023...</p> | |
| <div class="flex items-center mt-3 text-sm text-gray-500"> | |
| <i data-feather="globe" class="w-4 h-4 mr-1"></i> | |
| <span>Bloomberg</span> | |
| </div> | |
| </div> | |
| <div class="news-card bg-light p-4 rounded-lg transition duration-300 cursor-pointer"> | |
| <div class="flex justify-between items-start"> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">سلبي 65%</span> | |
| <span class="text-gray-500 text-sm">منذ 42 دقيقة</span> | |
| </div> | |
| <h4 class="font-medium mt-2">تقرير: انتقادات دولية لسياسة السعودية في اليمن</h4> | |
| <p class="text-gray-600 text-sm mt-1 line-clamp-2">أصدرت منظمة العفو الدولية تقريراً تنتقد فيه التدخل السعودي في اليمن معتبرة أن العمليات العسكرية تسببت في أضرار...</p> | |
| <div class="flex items-center mt-3 text-sm text-gray-500"> | |
| <i data-feather="globe" class="w-4 h-4 mr-1"></i> | |
| <span>Amnesty International</span> | |
| </div> | |
| </div> | |
| <div class="news-card bg-light p-4 rounded-lg transition duration-300 cursor-pointer"> | |
| <div class="flex justify-between items-start"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">محايد 92%</span> | |
| <span class="text-gray-500 text-sm">منذ ساعة</span> | |
| </div> | |
| <h4 class="font-medium mt-2">وزير الطاقة السعودي يعلن عن تثبيت إنتاج النفط</h4> | |
| <p class="text-gray-600 text-sm mt-1 line-clamp-2">صرح وزير الطاقة السعودي الأمير عبدالعزيز بن سلمان أن المملكة ستثبت إنتاجها النفطي عند 10 ملايين برميل يومياً خلال...</p> | |
| <div class="flex items-center mt-3 text-sm text-gray-500"> | |
| <i data-feather="globe" class="w-4 h-4 mr-1"></i> | |
| <span>Reuters</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-primary mb-4">الكلمات المفتاحية الأكثر تداولاً</h3> | |
| <div class="bg-light p-6 rounded-lg h-full"> | |
| <div class="flex flex-wrap gap-2 justify-center"> | |
| <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">رؤية 2030</span> | |
| <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">NEOM</span> | |
| <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">الرياض</span> | |
| <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">النفط</span> | |
| <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">اليمن</span> | |
| <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">MBS</span> | |
| <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">الحج</span> | |
| <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">الاستثمار</span> | |
| <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">الطاقة</span> | |
| <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">السياحة</span> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-medium text-gray-700 mb-3">توزيع المشاعر حسب المصدر</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>وكالات الأنباء العالمية</span> | |
| <span>72% إيجابي</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 72%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>وسائل التواصل الاجتماعي</span> | |
| <span>58% إيجابي</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 58%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>المواقع الإقليمية</span> | |
| <span>65% إيجابي</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Real-time Alerts --> | |
| <section id="alerts" class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center text-dark mb-12">نظام التنبيهات الفورية</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-4 bg-accent text-white flex justify-between items-center"> | |
| <h3 class="text-xl font-medium">أحدث التنبيهات</h3> | |
| <button class="p-1 rounded hover:bg-white/10"> | |
| <i data-feather="bell" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 divide-y divide-gray-200"> | |
| <div class="py-3"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-red-100 p-2 rounded-full"> | |
| <i data-feather="alert-triangle" class="w-5 h-5 text-red-600"></i> | |
| </div> | |
| <div class="mr-3"> | |
| <p class="font-medium">ارتفاع مفاجئ في الأخبار السلبية</p> | |
| <p class="text-sm text-gray-600 mt-1">زيادة بنسبة 32% في الأخبار السلبية عن المملكة خلال الساعتين الماضيتين</p> | |
| <p class="text-xs text-gray-500 mt-1">منذ 15 دقيقة</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="py-3"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> | |
| <i data-feather="trending-up" class="w-5 h-5 text-blue-600"></i> | |
| </div> | |
| <div class="mr-3"> | |
| <p class="font-medium">ازدياد الحديث عن NEOM</p> | |
| <p class="text-sm text-gray-600 mt-1">ذكر اسم NEOM في 47 خبر خلال 24 ساعة الماضية</p> | |
| <p class="text-xs text-gray-500 mt-1">منذ ساعتين</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="py-3"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-yellow-100 p-2 rounded-full"> | |
| <i data-feather="user" class="w-5 h-5 text-yellow-600"></i> | |
| </div> | |
| <div class="mr-3"> | |
| <p class="font-medium">تركيز على شخصية الأمير محمد بن سلمان</p> | |
| <p class="text-sm text-gray-600 mt-1">ذكر اسم الأمير محمد بن سلمان في 12 خبر خلال الساعة الماضية</p> | |
| <p class="text-xs text-gray-500 mt-1">منذ 3 ساعات</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden h-full"> | |
| <div class="p-4 bg-primary text-white flex justify-between items-center"> | |
| <h3 class="text-xl font-medium">إعدادات التنبيهات</h3> | |
| <button class="p-1 rounded hover:bg-white/10"> | |
| <i data-feather="settings" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-medium">تنبيهات البريد الإلكتروني</p> | |
| <p class="text-sm text-gray-600">إرسال تنبيهات عبر البريد عند حدوث تغييرات مهمة</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-medium">تنبيهات الهاتف</p> | |
| <p class="text-sm text-gray-600">إرسال إشعارات إلى تطبيق الجوال</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div> | |
| </label> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">عتبة التنبيه للزيادة المفاجئة</label> | |
| <input type="range" min="0" max="100" value="30" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>0%</span> | |
| <span>30%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <button class="w-full bg-primary text-white py-2 rounded-lg font-medium hover:bg-opacity-90 transition duration-200 mt-4"> | |
| حفظ الإعدادات | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">جاهز لبدء مراقبة التغطية الإعلامية؟</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">سجل الآن واحصل على نسخة تجريبية مجانية لمدة 14 يومًا من نظام SaudiPulse</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4 space-x-reverse max-w-md mx-auto"> | |
| <input type="email" placeholder="بريدك الإلكتروني" class="px-4 py-3 rounded-lg flex-grow bg-white/20 placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white"> | |
| <button class="bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition duration-200"> | |
| بدء التجربة المجانية | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">SaudiPulse</h3> | |
| <p class="text-gray-400">نظام ذكي لرصد وتحليل الانطباع الإعلامي عن المملكة العربية السعودية في الوقت الفعلي</p> | |
| <div class="flex space-x-4 space-x-reverse mt-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">روابط سريعة</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">الرئيسية</a></li> | |
| <li><a href="#dashboard" class="text-gray-400 hover:text-white">لوحة التحكم</a></li> | |
| <li><a href="#sentiment" class="text-gray-400 hover:text-white">تحليل المشاعر</a></li> | |
| <li><a href="#alerts" class="text-gray-400 hover:text-white">التنبيهات</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">المصادر</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Reuters</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Bloomberg</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">SPA</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Al Arabiya</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">اتصل بنا</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center text-gray-400"> | |
| <i data-feather="mail" class="w-4 h-4 ml-2"></i> | |
| <span>info@saudipulse.com</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i data-feather="phone" class="w-4 h-4 ml-2"></i> | |
| <span>+966 12 345 6789</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i data-feather="map-pin" class="w-4 h-4 ml-2"></i> | |
| <span>الرياض، المملكة العربية السعودية</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm"> | |
| <p>© 2023 SaudiPulse. جميع الحقوق محفوظة.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js globe | |
| VANTA.GLOBE({ | |
| el: "#vanta-globe", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x245953, | |
| backgroundColor: 0xf8f5f1, | |
| size: 1.00 | |
| }); | |
| // Initialize charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Trend Chart | |
| const trendCtx = document.getElementById('trendChart').getContext('2d'); | |
| const trendChart = new Chart(trendCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو'], | |
| datasets: [ | |
| { | |
| label: 'أخبار إيجابية', | |
| data: [320, 450, 380, 520, 610, 730], | |
| borderColor: '#408E91', | |
| backgroundColor: 'rgba(64, 142, 145, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'أخبار سلبية', | |
| data: [80, 120, 95, 110, 140, 160], | |
| borderColor: '#E49393', | |
| backgroundColor: 'rgba(228, 147, 147, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| rtl: true | |
| }, | |
| title: { | |
| display: true, | |
| text: 'اتجاهات الأخبار الشهرية', | |
| font: { | |
| size: 16 | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| // Sentiment Chart | |
| const sentimentCtx = document.getElementById('sentimentChart').getContext('2d'); | |
| const sentimentChart = new Chart(sentimentCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['إيجابي', 'سلبي', 'محايد'], | |
| datasets: [{ | |
| data: [72, 15, 13], | |
| backgroundColor: [ | |
| '#408E91', | |
| '#E49393', | |
| '#F8B195' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| rtl: true | |
| }, | |
| title: { | |
| display: true, | |
| text: 'توزيع المشاعر', | |
| font: { | |
| size: 16 | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Initialize world map with more countries and dynamic data | |
| const mapData = { | |
| "SA": { fillKey: "positive", newsCount: 124, sentimentScore: 0.87 }, | |
| "US": { fillKey: "neutral", newsCount: 87, sentimentScore: 0.52 }, | |
| "GB": { fillKey: "positive", newsCount: 65, sentimentScore: 0.72 }, | |
| "FR": { fillKey: "neutral", newsCount: 42, sentimentScore: 0.48 }, | |
| "DE": { fillKey: "positive", newsCount: 38, sentimentScore: 0.68 }, | |
| "CN": { fillKey: "negative", newsCount: 56, sentimentScore: 0.34 }, | |
| "IN": { fillKey: "positive", newsCount: 29, sentimentScore: 0.65 }, | |
| "JP": { fillKey: "neutral", newsCount: 21, sentimentScore: 0.45 }, | |
| "RU": { fillKey: "negative", newsCount: 43, sentimentScore: 0.29 }, | |
| "BR": { fillKey: "positive", newsCount: 27, sentimentScore: 0.63 }, | |
| "CA": { fillKey: "neutral", newsCount: 35, sentimentScore: 0.55 }, | |
| "AU": { fillKey: "positive", newsCount: 31, sentimentScore: 0.71 }, | |
| "AE": { fillKey: "positive", newsCount: 48, sentimentScore: 0.78 }, | |
| "EG": { fillKey: "neutral", newsCount: 39, sentimentScore: 0.49 }, | |
| "TR": { fillKey: "negative", newsCount: 33, sentimentScore: 0.41 } | |
| }; | |
| const map = new Datamap({ | |
| element: document.getElementById('worldMap'), | |
| responsive: true, | |
| geographyConfig: { | |
| highlightOnHover: false, | |
| popupOnHover: true, | |
| borderColor: '#408E91', | |
| borderWidth: 0.5, | |
| highlightBorderWidth: 1, | |
| highlightBorderColor: '#245953', | |
| highlightFillColor: '#E49393', | |
| popupTemplate: function(geo, data) { | |
| if (!data) return; | |
| const sentiment = { | |
| positive: 'إيجابي', | |
| neutral: 'محايد', | |
| negative: 'سلبي' | |
| }[data.fillKey]; | |
| return `<div class="p-3 text-sm bg-white rounded-lg shadow-lg"> | |
| <div class="font-bold text-primary mb-2">${geo.properties.name}</div> | |
| <div class="mb-1">عدد الأخبار: <span class="font-medium">${data.newsCount}</span></div> | |
| <div class="mb-1">الانطباع: | |
| <span class="font-medium ${data.fillKey === 'positive' ? 'text-green-600' : data.fillKey === 'negative' ? 'text-red-600' : 'text-yellow-600'}"> | |
| ${sentiment} | |
| </span> | |
| </div> | |
| <div class="mb-1">نسبة المشاعر: <span class="font-medium">${Math.round(data.sentimentScore * 100)}%</span></div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-2"> | |
| <div class="h-2 rounded-full ${data.fillKey === 'positive' ? 'bg-green-500' : data.fillKey === 'negative' ? 'bg-red-500' : 'bg-yellow-500'}" | |
| style="width: ${Math.round(data.sentimentScore * 100)}%"></div> | |
| </div> | |
| </div>`; | |
| } | |
| }, | |
| fills: { | |
| positive: '#408E91', | |
| neutral: '#F8B195', | |
| negative: '#E49393', | |
| defaultFill: '#F8F5F1' | |
| }, | |
| bubblesConfig: { | |
| popupOnHover: true, | |
| highlightOnHover: true, | |
| highlightFillColor: '#245953', | |
| highlightBorderColor: '#fff', | |
| highlightBorderWidth: 2, | |
| fillOpacity: 0.8, | |
| borderWidth: 1, | |
| borderColor: '#fff', | |
| r: function(data) { | |
| return Math.min(Math.max(data.newsCount / 2, 5), 20); | |
| }, | |
| fillKey: 'fillKey', | |
| popupTemplate: function(geo, data) { | |
| return `<div class="p-3 text-sm bg-white rounded-lg shadow-lg"> | |
| <div class="font-bold">${geo.properties.name}</div> | |
| <div>عدد الأخبار: ${data.newsCount}</div> | |
| </div>`; | |
| } | |
| }, | |
| data: mapData, | |
| done: function(datamap) { | |
| datamap.svg.selectAll('.datamaps-bubble').attr('r', function(d) { | |
| return Math.min(Math.max(d.newsCount / 2, 5), 20); | |
| }); | |
| }, | |
| setProjection: function(element) { | |
| const projection = d3.geo.equirectangular() | |
| .center([50, 20]) | |
| .rotate([-10, 0]) | |
| .scale(600) | |
| .translate([element.offsetWidth / 2, element.offsetHeight / 2]); | |
| const path = d3.geo.path().projection(projection); | |
| return { path: path, projection: projection }; | |
| }, | |
| geographyConfig: { | |
| borderColor: '#408E91', | |
| borderWidth: 0.5, | |
| highlightBorderWidth: 1.5, | |
| highlightBorderColor: '#245953', | |
| highlightFillColor: '#E49393', | |
| popupOnHover: true | |
| } | |
| }); | |
| // Add bubbles to the map | |
| const bubbles = Object.keys(mapData).map(countryCode => { | |
| return { | |
| ...mapData[countryCode], | |
| name: countryCode, | |
| latitude: Datamap.latLngLookup(countryCode)[0], | |
| longitude: Datamap.latLngLookup(countryCode)[1] | |
| }; | |
| }); | |
| map.bubbles(bubbles, { | |
| popupTemplate: function(geo, data) { | |
| return `<div class="p-2 text-sm"> | |
| <div class="font-bold">${geo.properties.name}</div> | |
| <div>عدد الأخبار: ${data.newsCount}</div> | |
| </div>`; | |
| } | |
| }); | |
| window.addEventListener('resize', function() { | |
| map.resize(); | |
| map.bubbles(bubbles); | |
| }); | |
| // Feather Icons | |
| feather.replace(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |