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 data-en="News Analysis | Rasd Intelligence Platform" data-ar="تحليل خبر | منصة رصد الذكية">تحليل خبر | منصة رصد الذكية</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: { 'saudi-green': '#006C35', 'saudi-gold': '#C9A646', 'saudi-dark': '#1A2E44' }, | |
| fontFamily: { 'tajawal': ['Tajawal', 'sans-serif'] } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { font-family: 'Tajawal', sans-serif; background-color: #f4f7f6; } | |
| .gradient-bg { background: linear-gradient(135deg, #006C35 0%, #004d26 100%); } | |
| .gold-gradient { background: linear-gradient(135deg, #C9A646 0%, #b8941e 100%); } | |
| .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); } | |
| .rtl { direction: rtl; } .ltr { direction: ltr; } | |
| </style> | |
| </head> | |
| <body class="font-tajawal min-h-screen"> | |
| <!-- Header --> | |
| <header class="sticky top-0 w-full bg-white/95 backdrop-blur-md z-50 shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-16"> | |
| <div class="flex items-center space-x-4"> | |
| <img src="./spa-logo-white.png" alt="SPA Logo" class="h-8" loading="lazy"> | |
| <div class="text-3xl font-bold text-saudi-green" data-en="Rasd" data-ar="رصد">رصد</div> | |
| </div> | |
| <button onclick="toggleLanguage()" class="flex items-center space-x-2 px-3 py-2 rounded-lg border-2 border-saudi-green text-saudi-green hover:bg-saudi-green hover:text-white transition-all"> | |
| <i class="fas fa-globe"></i> | |
| <span id="lang-toggle">العربية</span> | |
| </button> | |
| </div> | |
| </header> | |
| <main> | |
| <!-- SECTION 1: Platform Description --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-saudi-dark mb-6" data-en="Welcome to Rasd: The Intelligent Media Analytics Platform" data-ar="مرحبًا بك في رصد: منصة التحليلات الإعلامية الذكية">Welcome to Rasd: The Intelligent Media Analytics Platform</h1> | |
| <p class="text-xl text-gray-700 leading-relaxed max-w-4xl mx-auto" data-en="Rasd is an integrated smart platform that employs artificial intelligence to analyze the media impact of SPA news. We track the spread of news and images, detect paraphrasing, analyze sentiment, and provide data-driven insights to enhance the agency's role as a primary source of information." data-ar="'رصد' هي منصة ذكية ومتكاملة توظف تقنيات الذكاء الاصطناعي لتحليل الأثر الإعلامي لأخبار وكالة الأنباء السعودية. نقوم بتتبع انتشار الأخبار والصور، اكتشاف إعادة الصياغة، تحليل المشاعر، وتقديم رؤى قائمة على البيانات لتعزيز دور الوكالة كمصدر رئيسي للمعلومة."> | |
| Rasd is an integrated smart platform that employs artificial intelligence to analyze the media impact of SPA news. We track the spread of news and images, detect paraphrasing, analyze sentiment, and provide data-driven insights to enhance the agency's role as a primary source of information. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- SECTION 2: The News Prototype --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="bg-white/10 backdrop-blur-sm rounded-3xl p-8"> | |
| <div class="grid lg:grid-cols-3 gap-8 items-center text-left"> | |
| <div class="lg:col-span-1"> | |
| <img src="./news.png" alt="AI Healthcare Initiative" class="w-full h-auto object-cover rounded-2xl shadow-lg" loading="lazy"> | |
| </div> | |
| <div class="lg:col-span-2"> | |
| <div class="mb-4"> | |
| <span class="bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold" data-en="BREAKING NEWS" data-ar="خبر عاجل">BREAKING NEWS</span> | |
| </div> | |
| <h2 class="text-3xl font-bold mb-4" data-en="Saudi Arabia Launches Revolutionary AI Healthcare Initiative" data-ar="المملكة تطلق مبادرة ثورية للذكاء الاصطناعي في الرعاية الصحية">Saudi Arabia Launches Revolutionary AI Healthcare Initiative</h2> | |
| <p class="opacity-90 leading-relaxed" data-en="The Kingdom announces a groundbreaking $5 billion investment in AI-powered healthcare systems, aimed at revolutionizing medical services across all regions and enhancing patient care through cutting-edge technology. This initiative positions Saudi Arabia as a leader in innovative health solutions." data-ar="تعلن المملكة عن استثمار رائد بقيمة 5 مليارات دولار في أنظمة الرعاية الصحية المدعومة بالذكاء الاصطناعي، بهدف إحداث ثورة في الخدمات الطبية في جميع المناطق وتعزيز رعاية المرضى من خلال التكنولوجيا المتطورة. هذه المبادرة تضع المملكة في صدارة حلول الرعاية الصحية المبتكرة."> | |
| The Kingdom announces a groundbreaking $5 billion investment in AI-powered healthcare systems, aimed at revolutionizing medical services across all regions and enhancing patient care through cutting-edge technology. This initiative positions Saudi Arabia as a leader in innovative health solutions. | |
| </p> | |
| <!-- Mini Dashboard for THIS News --> | |
| <div class="mt-8 p-6 bg-white/20 rounded-2xl shadow-inner"> | |
| <h3 class="text-xl font-bold mb-4" data-en="Quick Impact Snapshot for this News" data-ar="نظرة سريعة على تأثير هذا الخبر">Quick Impact Snapshot for this News</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center"> | |
| <div> | |
| <p class="text-3xl font-bold text-saudi-gold" data-en="94.3%" data-ar="94.3%">94.3%</p> | |
| <p class="text-sm opacity-80" data-en="Positive Sentiment" data-ar="مشاعر إيجابية">Positive Sentiment</p> | |
| </div> | |
| <div> | |
| <p class="text-3xl font-bold text-saudi-gold" data-en="2.8M+" data-ar="2.8 مليون+">2.8M+</p> | |
| <p class="text-sm opacity-80" data-en="Global Reach" data-ar="وصول عالمي">Global Reach</p> | |
| </div> | |
| <div> | |
| <p class="text-3xl font-bold text-saudi-gold" data-en="89 Countries" data-ar="89 دولة">89 Countries</p> | |
| <p class="text-sm opacity-80" data-en="Media Coverage" data-ar="تغطية إعلامية">Media Coverage</p> | |
| </div> | |
| </div> | |
| <p class="text-sm opacity-90 mt-6 text-center" data-en="The detailed intelligence dashboards, accessible via the button below, provide in-depth analysis specific to this news story." data-ar="لوحات التحليل الذكية المفصلة، المتوفرة عبر الزر أدناه، تقدم تحليلاً معمقًا خاصًا بهذا الخبر تحديداً.">The detailed intelligence dashboards, accessible via the button below, provide in-depth analysis specific to this news story.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SECTION 3: Explore All Dashboards Button --> | |
| <section class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <a href="full-dashboard.html" class="inline-flex items-center space-x-3 px-8 py-4 gold-gradient text-saudi-dark font-bold rounded-full hover:scale-105 transition-transform text-lg shadow-lg"> | |
| <i class="fas fa-chart-pie"></i> | |
| <span data-en="Explore All Intelligence Dashboards" data-ar="استكشف جميع لوحات الذكاء">Explore All Intelligence Dashboards</span> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- SECTION 4: Global Trends with Plot --> | |
| <section class="py-20 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-saudi-dark text-center mb-6" data-en="Global Trends: Current Hot Topics" data-ar="الاتجاهات العالمية: المواضيع الرائجة حالياً">Global Trends: Current Hot Topics</h2> | |
| <p class="text-lg text-gray-600 text-center mb-12" data-en="Monitor trending topics and view their global impact across different regions and media platforms, providing insights into public interest." data-ar="راقب المواضيع الرائجة وشاهد مدى تأثيرها العالمي عبر المناطق والمنصات الإعلامية المختلفة، مما يوفر رؤى قيمة حول اهتمام الجمهور.">Monitor trending topics and view their global impact across different regions and media platforms, providing insights into public interest.</p> | |
| <div class="bg-white p-8 rounded-3xl shadow-lg"> | |
| <div class="space-y-6"> | |
| <div class="grid grid-cols-4 items-center gap-4"> | |
| <span class="font-bold text-saudi-dark text-right" data-en="AI in Healthcare" data-ar="الذكاء الاصطناعي بالصحة">AI in Healthcare</span> | |
| <div class="col-span-3 bg-gray-200 rounded-full h-6"> | |
| <div class="bg-saudi-green h-6 rounded-full text-white text-sm flex items-center px-3" style="width: 92%;" data-en="Trending Up" data-ar="في صعود">Trending Up</div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-4 items-center gap-4"> | |
| <span class="font-bold text-saudi-dark text-right" data-en="Vision 2030" data-ar="رؤية 2030">Vision 2030</span> | |
| <div class="col-span-3 bg-gray-200 rounded-full h-6"> | |
| <div class="bg-saudi-gold h-6 rounded-full text-saudi-dark text-sm flex items-center px-3" style="width: 85%;" data-en="High Engagement" data-ar="تفاعل عالي">High Engagement</div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-4 items-center gap-4"> | |
| <span class="font-bold text-saudi-dark text-right" data-en="Digital Health" data-ar="الصحة الرقمية">Digital Health</span> | |
| <div class="col-span-3 bg-gray-200 rounded-full h-6"> | |
| <div class="bg-blue-500 h-6 rounded-full text-white text-sm flex items-center px-3" style="width: 78%;" data-en="Stable Growth" data-ar="نمو مستقر">Stable Growth</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SECTION 5: Search for a Specific News Impact --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold text-saudi-dark mb-4" data-en="Search for a Specific News Impact" data-ar="ابحث عن تأثير خبر معين">Search for a Specific News Impact</h2> | |
| <p class="text-lg text-gray-600 mb-8 leading-relaxed" data-en="Enter any news headline, keywords, or topics to instantly analyze their global media impact, track their spread across different platforms, and access comprehensive analytical dashboards with detailed insights and metrics." data-ar="أدخل أي عنوان إخباري أو كلمات مفتاحية أو مواضيع لتحليل تأثيرها الإعلامي العالمي فورًا، وتتبع انتشارها عبر المنصات المختلفة، والوصول إلى لوحات تحليلية شاملة مع رؤى ومقاييس مفصلة.">Enter any news headline, keywords, or topics to instantly analyze their global media impact, track their spread across different platforms, and access comprehensive analytical dashboards with detailed insights and metrics.</p> | |
| <div class="flex flex-col sm:flex-row gap-4 max-w-2xl mx-auto"> | |
| <input type="text" class="w-full px-5 py-4 border border-gray-300 rounded-full focus:border-saudi-green focus:outline-none focus:ring-2 focus:ring-saudi-green/50" data-en-placeholder="Enter news headline here..." data-ar-placeholder="أدخل عنوان الخبر هنا..." placeholder="Enter news headline here..."> | |
| <button class="px-8 py-4 gradient-bg text-white font-bold rounded-full hover:opacity-90 transition-opacity"> | |
| <i class="fas fa-search mr-2"></i> | |
| <span data-en="Analyze Impact" data-ar="تحليل التأثير">Analyze Impact</span> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="gradient-bg text-white py-10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <p class="opacity-80" data-en="Rasd Intelligence Platform © 2025" data-ar="منصة رصد الذكية © 2025">Rasd Intelligence Platform © 2025</p> | |
| </div> | |
| </footer> | |
| <script> | |
| let currentLanguage = 'en'; | |
| function toggleLanguage() { | |
| currentLanguage = currentLanguage === 'en' ? 'ar' : 'en'; | |
| updatePageLanguage(); | |
| } | |
| function updatePageLanguage() { | |
| const isArabic = currentLanguage === 'ar'; | |
| const htmlEl = document.getElementById('html'); | |
| htmlEl.setAttribute('lang', currentLanguage); | |
| htmlEl.setAttribute('dir', isArabic ? 'rtl' : 'ltr'); | |
| document.body.classList.toggle('rtl', isArabic); | |
| document.body.classList.toggle('ltr', !isArabic); | |
| document.getElementById('lang-toggle').textContent = isArabic ? 'English' : 'العربية'; | |
| // Update text content for elements with data-en attributes | |
| document.querySelectorAll('[data-en]').forEach(el => { | |
| const text = el.getAttribute(`data-${currentLanguage}`); | |
| if (text) { | |
| el.textContent = text; | |
| } | |
| }); | |
| // Update placeholder text for input fields | |
| document.querySelectorAll('[data-en-placeholder]').forEach(el => { | |
| const placeholderText = el.getAttribute(`data-${currentLanguage}-placeholder`); | |
| if (placeholderText) { | |
| el.placeholder = placeholderText; | |
| } | |
| }); | |
| // Update title element separately | |
| document.querySelectorAll('title[data-en]').forEach(el => { | |
| const text = el.getAttribute(`data-${currentLanguage}`); | |
| if (text) { | |
| el.textContent = text; | |
| } | |
| }); | |
| } | |
| document.addEventListener('DOMContentLoaded', updatePageLanguage); | |
| </script> | |
| </body> | |
| </html> |