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; } | |
| .dashboard-mini { background: white; border-radius: 20px; padding: 1.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.3s ease; } | |
| .dashboard-mini:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(0,0,0,0.12); } | |
| .dashboard-preview-mini { width: 100%; height: 200px; border-radius: 15px; margin-bottom: 1rem; overflow: hidden; position: relative; } | |
| .dashboard-preview-mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; } | |
| .pulse-animation { animation: pulse 2s infinite; } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-tajawal min-h-screen"> | |
| <!-- ======================= HEADER SECTION ======================= --> | |
| <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> | |
| <!-- ======================= PLATFORM DESCRIPTION SECTION ======================= --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-5xl md:text-6xl font-bold text-saudi-dark mb-8" data-en="Analyze News Impact with AI Intelligence" data-ar="حلل تأثير الأخبار بذكاء اصطناعي متطور">Analyze News Impact with AI Intelligence</h1> | |
| <p class="text-2xl text-gray-700 leading-relaxed max-w-5xl mx-auto mb-12" data-en="Rasd is a powerful AI platform that instantly analyzes how your news spreads across the world. Simply enter any news headline and discover its global impact, audience reactions, viral potential, and much more through intelligent dashboards." data-ar="رصد منصة ذكية قوية تحلل فورياً كيف تنتشر أخبارك حول العالم. ببساطة أدخل أي عنوان إخباري واكتشف تأثيره العالمي وردود أفعال الجمهور وإمكانية انتشاره الفيروسي والمزيد من خلال لوحات ذكية متطورة."> | |
| Rasd is a powerful AI platform that instantly analyzes how your news spreads across the world. Simply enter any news headline and discover its global impact, audience reactions, viral potential, and much more through intelligent dashboards. | |
| </p> | |
| <div class="flex justify-center space-x-8 text-lg text-gray-600"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-globe-americas text-saudi-green mr-2"></i> | |
| <span data-en="Global Tracking" data-ar="تتبع عالمي">Global Tracking</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-brain text-saudi-green mr-2"></i> | |
| <span data-en="AI Analysis" data-ar="تحليل ذكي">AI Analysis</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-chart-line text-saudi-green mr-2"></i> | |
| <span data-en="Real-time Insights" data-ar="رؤى فورية">Real-time Insights</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ======================= FEATURED NEWS SECTION ======================= --> | |
| <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"> | |
| <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-4 py-2 rounded-full text-sm font-bold pulse-animation" 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 text-lg mb-6" 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." 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. | |
| </p> | |
| <!-- Enhanced Impact Stats --> | |
| <div class="bg-white/20 rounded-2xl p-6 backdrop-blur-sm"> | |
| <h3 class="text-xl font-bold mb-6 text-center" data-en="Live Impact Analysis for This News" data-ar="تحليل التأثير المباشر لهذا الخبر">Live Impact Analysis for This News</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="text-center bg-white/10 rounded-xl p-4"> | |
| <div class="text-4xl font-bold text-saudi-gold mb-2" data-en="94.3%" data-ar="94.3%">94.3%</div> | |
| <div class="text-sm font-semibold opacity-90" data-en="Positive Sentiment" data-ar="مشاعر إيجابية">Positive Sentiment</div> | |
| <div class="text-xs opacity-70 mt-1" data-en="Public Reaction" data-ar="ردود الأفعال">Public Reaction</div> | |
| </div> | |
| <div class="text-center bg-white/10 rounded-xl p-4"> | |
| <div class="text-4xl font-bold text-saudi-gold mb-2" data-en="2.8M+" data-ar="2.8 مليون+">2.8M+</div> | |
| <div class="text-sm font-semibold opacity-90" data-en="Global Reach" data-ar="وصول عالمي">Global Reach</div> | |
| <div class="text-xs opacity-70 mt-1" data-en="People Reached" data-ar="الأشخاص المتأثرين">People Reached</div> | |
| </div> | |
| <div class="text-center bg-white/10 rounded-xl p-4"> | |
| <div class="text-4xl font-bold text-saudi-gold mb-2" data-en="89" data-ar="89">89</div> | |
| <div class="text-sm font-semibold opacity-90" data-en="Countries" data-ar="دولة">Countries</div> | |
| <div class="text-xs opacity-70 mt-1" data-en="Media Coverage" data-ar="تغطية إعلامية">Media Coverage</div> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-center"> | |
| <p class="text-sm opacity-90" data-en="Updated every 30 seconds • View detailed analysis below" data-ar="يتم التحديث كل 30 ثانية • اعرض التحليل المفصل أدناه">Updated every 30 seconds • View detailed analysis below</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ======================= FEATURED DASHBOARDS SECTION ======================= --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold text-saudi-dark mb-4" data-en="Explore Key Intelligence Dashboards" data-ar="استكشف لوحات الذكاء الأساسية">Explore Key Intelligence Dashboards</h2> | |
| <p class="text-xl text-gray-600 max-w-4xl mx-auto" data-en="Get instant insights with our AI-powered analysis tools. Each dashboard provides deep intelligence about different aspects of news impact and audience engagement." data-ar="احصل على رؤى فورية بأدوات التحليل المدعومة بالذكاء الاصطناعي. كل لوحة تحكم توفر ذكاءً عميقاً حول جوانب مختلفة من تأثير الأخبار وتفاعل الجمهور.">Get instant insights with our AI-powered analysis tools. Each dashboard provides deep intelligence about different aspects of news impact and audience engagement.</p> | |
| </div> | |
| <div class="grid lg:grid-cols-2 xl:grid-cols-4 gap-8 mb-16"> | |
| <!-- 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" 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> | |
| </div> | |
| <!-- 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" 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> | |
| </div> | |
| <!-- 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" 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> | |
| </div> | |
| <!-- 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" 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> | |
| </div> | |
| </div> | |
| <!-- Enhanced CTA Button --> | |
| <div class="text-center"> | |
| <a href="full-dashboard.html" class="inline-flex items-center space-x-4 px-12 py-6 gold-gradient text-saudi-dark font-bold rounded-full hover:scale-105 transition-all duration-300 text-xl shadow-2xl"> | |
| <i class="fas fa-chart-pie text-2xl"></i> | |
| <span data-en="Explore All 17 Intelligence Dashboards" data-ar="استكشف جميع لوحات الذكاء الـ17">Explore All 17 Intelligence Dashboards</span> | |
| <i class="fas fa-arrow-right"></i> | |
| </a> | |
| <p class="mt-4 text-gray-600" data-en="Unlock the full power of AI-driven news analysis" data-ar="اكتشف القوة الكاملة للتحليل الإخباري المدعوم بالذكاء الاصطناعي">Unlock the full power of AI-driven news analysis</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ======================= GLOBAL TRENDS SECTION ======================= --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold text-saudi-dark mb-4" data-en="Global Trends: What's Trending Now" data-ar="الاتجاهات العالمية: ما يتصدر الآن">Global Trends: What's Trending Now</h2> | |
| <p class="text-xl text-gray-600 max-w-4xl mx-auto" data-en="Monitor trending topics worldwide and see their global impact across different regions and media platforms in real-time." data-ar="راقب المواضيع الرائجة عالمياً وشاهد مدى تأثيرها العالمي عبر المناطق والمنصات الإعلامية المختلفة في الوقت الفعلي.">Monitor trending topics worldwide and see their global impact across different regions and media platforms in real-time.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-3xl shadow-lg border border-gray-100"> | |
| <div class="space-y-8"> | |
| <div class="grid grid-cols-4 items-center gap-6"> | |
| <span class="text-xl font-bold text-saudi-dark" data-en="AI in Healthcare" data-ar="الذكاء الاصطناعي بالصحة">AI in Healthcare</span> | |
| <div class="col-span-2 bg-gray-200 rounded-full h-8"> | |
| <div class="bg-gradient-to-r from-saudi-green to-green-400 h-8 rounded-full text-white text-sm flex items-center px-4 font-semibold" style="width: 92%;" data-en="Trending Up ↗" data-ar="في صعود ↗">Trending Up ↗</div> | |
| </div> | |
| <div class="text-right text-saudi-green font-bold text-lg">92%</div> | |
| </div> | |
| <div class="grid grid-cols-4 items-center gap-6"> | |
| <span class="text-xl font-bold text-saudi-dark" data-en="Vision 2030" data-ar="رؤية 2030">Vision 2030</span> | |
| <div class="col-span-2 bg-gray-200 rounded-full h-8"> | |
| <div class="bg-gradient-to-r from-saudi-gold to-yellow-400 h-8 rounded-full text-saudi-dark text-sm flex items-center px-4 font-semibold" style="width: 85%;" data-en="High Engagement 🔥" data-ar="تفاعل عالي 🔥">High Engagement 🔥</div> | |
| </div> | |
| <div class="text-right text-saudi-gold font-bold text-lg">85%</div> | |
| </div> | |
| <div class="grid grid-cols-4 items-center gap-6"> | |
| <span class="text-xl font-bold text-saudi-dark" data-en="Digital Health" data-ar="الصحة الرقمية">Digital Health</span> | |
| <div class="col-span-2 bg-gray-200 rounded-full h-8"> | |
| <div class="bg-gradient-to-r from-blue-500 to-blue-400 h-8 rounded-full text-white text-sm flex items-center px-4 font-semibold" style="width: 78%;" data-en="Stable Growth →" data-ar="نمو مستقر →">Stable Growth →</div> | |
| </div> | |
| <div class="text-right text-blue-500 font-bold text-lg">78%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ======================= ENHANCED SEARCH SECTION ======================= --> | |
| <section class="py-20 bg-gradient-to-br from-gray-50 to-gray-100"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-4xl font-bold text-saudi-dark mb-6" data-en="Analyze Any News with AI Power" data-ar="حلل أي خبر بقوة الذكاء الاصطناعي">Analyze Any News with AI Power</h2> | |
| <p class="text-xl text-gray-600 mb-12 leading-relaxed" data-en="Enter any news headline, upload an image, or use voice search to instantly analyze its global media impact, track spread across platforms, and get comprehensive insights with detailed metrics and predictions." data-ar="أدخل أي عنوان إخباري أو ارفع صورة أو استخدم البحث الصوتي لتحليل تأثيره الإعلامي العالمي فوراً وتتبع انتشاره عبر المنصات والحصول على رؤى شاملة مع مقاييس وتنبؤات مفصلة.">Enter any news headline, upload an image, or use voice search to instantly analyze its global media impact, track spread across platforms, and get comprehensive insights with detailed metrics and predictions.</p> | |
| <div class="bg-white rounded-3xl p-8 shadow-2xl border border-gray-200 max-w-3xl mx-auto"> | |
| <div class="flex items-center space-x-4 mb-6"> | |
| <div class="flex-1 relative"> | |
| <input type="text" class="w-full px-6 py-5 pr-16 border-2 border-gray-300 rounded-2xl text-lg focus:border-saudi-green focus:outline-none focus:ring-4 focus:ring-saudi-green/20 transition-all" data-en-placeholder="Type news headline, keywords, or paste URL..." data-ar-placeholder="اكتب عنوان الخبر أو كلمات مفتاحية أو الصق رابط..." placeholder="Type news headline, keywords, or paste URL..."> | |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 p-2 text-gray-400 hover:text-saudi-green transition-colors"> | |
| <i class="fas fa-search text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Search Options --> | |
| <div class="flex justify-center space-x-6 mb-8"> | |
| <button class="flex items-center space-x-2 px-6 py-3 bg-gray-100 hover:bg-saudi-green hover:text-white rounded-2xl transition-all duration-300 border-2 border-transparent hover:border-saudi-green"> | |
| <i class="fas fa-microphone text-lg"></i> | |
| <span class="font-semibold" data-en="Voice Search" data-ar="بحث صوتي">Voice Search</span> | |
| </button> | |
| <button class="flex items-center space-x-2 px-6 py-3 bg-gray-100 hover:bg-saudi-green hover:text-white rounded-2xl transition-all duration-300 border-2 border-transparent hover:border-saudi-green"> | |
| <i class="fas fa-camera text-lg"></i> | |
| <span class="font-semibold" data-en="Image Search" data-ar="بحث بالصور">Image Search</span> | |
| </button> | |
| <button class="flex items-center space-x-2 px-6 py-3 bg-gray-100 hover:bg-saudi-green hover:text-white rounded-2xl transition-all duration-300 border-2 border-transparent hover:border-saudi-green"> | |
| <i class="fas fa-link text-lg"></i> | |
| <span class="font-semibold" data-en="URL Analysis" data-ar="تحليل الروابط">URL Analysis</span> | |
| </button> | |
| </div> | |
| <button class="w-full px-8 py-5 gradient-bg text-white font-bold rounded-2xl hover:scale-105 transition-all duration-300 text-xl shadow-lg"> | |
| <i class="fas fa-analytics mr-3"></i> | |
| <span data-en="Analyze Impact Now" data-ar="حلل التأثير الآن">Analyze Impact Now</span> | |
| </button> | |
| <div class="mt-6 text-sm text-gray-500"> | |
| <p data-en="✨ Powered by advanced AI • Real-time analysis • Global coverage" data-ar="✨ مدعوم بذكاء اصطناعي متقدم • تحليل فوري • تغطية عالمية">✨ Powered by advanced AI • Real-time analysis • Global coverage</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- ======================= FOOTER SECTION ======================= --> | |
| <footer class="gradient-bg text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <p class="text-lg opacity-90" data-en="Rasd Intelligence Platform © 2025 • Empowering Media with AI" data-ar="منصة رصد الذكية © 2025 • تمكين الإعلام بالذكاء الاصطناعي">Rasd Intelligence Platform © 2025 • Empowering Media with AI</p> | |
| </div> | |
| </footer> | |
| <!-- ======================= JAVASCRIPT SECTION ======================= --> | |
| <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 all text content | |
| document.querySelectorAll('[data-en]').forEach(el => { | |
| const text = el.getAttribute(`data-${currentLanguage}`); | |
| if (text) { | |
| el.textContent = text; | |
| } | |
| }); | |
| // Update placeholder text | |
| document.querySelectorAll('[data-en-placeholder]').forEach(el => { | |
| const placeholderText = el.getAttribute(`data-${currentLanguage}-placeholder`); | |
| if (placeholderText) { | |
| el.placeholder = placeholderText; | |
| } | |
| }); | |
| // Update title element | |
| document.querySelectorAll('title[data-en]').forEach(el => { | |
| const text = el.getAttribute(`data-${currentLanguage}`); | |
| if (text) { | |
| el.textContent = text; | |
| } | |
| }); | |
| } | |
| document.addEventListener('DOMContentLoaded', updatePageLanguage); | |
| // Voice search functionality | |
| function startVoiceSearch() { | |
| if ('webkitSpeechRecognition' in window) { | |
| const recognition = new webkitSpeechRecognition(); | |
| recognition.lang = currentLanguage === 'ar' ? 'ar-SA' : 'en-US'; | |
| recognition.start(); | |
| recognition.onresult = function(event) { | |
| const transcript = event.results[0][0].transcript; | |
| document.querySelector('input[type="text"]').value = transcript; | |
| }; | |
| } | |
| } | |
| // Image search functionality | |
| function startImageSearch() { | |
| const input = document.createElement('input'); | |
| input.type = 'file'; | |
| input.accept = 'image/*'; | |
| input.onchange = function(event) { | |
| const file = event.target.files[0]; | |
| if (file) { | |
| // Here you would typically upload and analyze the image | |
| console.log('Image selected:', file.name); | |
| } | |
| }; | |
| input.click(); | |
| } | |
| </script> | |
| </body> | |
| </html> |