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>نَبَض NABAD | منصة ذكاء الإعلام الوطني</title> | |
| <meta name="description" content="Nabad: The pulse of the nation's story. An advanced AI platform tracking Saudi Arabia's global media narrative and the impact of Vision 2030."> | |
| <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: { | |
| 'brand-dark': '#0D1B2A', | |
| 'brand-blue': '#3A86FF', | |
| 'brand-gold': '#FFBE0B', | |
| 'brand-light': '#E0E1DD', | |
| 'brand-gray': '#415A77', | |
| }, | |
| fontFamily: { | |
| 'tajawal': ['Tajawal', 'sans-serif'] | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-glow': 'pulse-glow 2s ease-in-out infinite', | |
| 'aurora': 'aurora 20s ease-in-out infinite alternate', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0px)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| 'pulse-glow': { | |
| '0%, 100%': { boxShadow: '0 0 20px rgba(58, 134, 255, 0.4)' }, | |
| '50%': { boxShadow: '0 0 35px rgba(58, 134, 255, 0.8)' }, | |
| }, | |
| aurora: { | |
| '0%': { backgroundPosition: '0% 50%' }, | |
| '100%': { backgroundPosition: '100% 50%' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background-color: #0D1B2A; | |
| color: #E0E1DD; | |
| } | |
| .glass-card { | |
| background: rgba(65, 90, 119, 0.2); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(224, 225, 221, 0.1); | |
| } | |
| .hero-aurora { | |
| background: linear-gradient(125deg, #0D1B2A, #3A86FF, #FFBE0B, #0D1B2A); | |
| background-size: 400% 400%; | |
| animation: aurora 20s ease-in-out infinite alternate; | |
| } | |
| .rtl { direction: rtl; } | |
| .ltr { direction: ltr; } | |
| .scroll-reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity 0.8s ease-out, transform 0.8s ease-out; | |
| } | |
| .scroll-reveal.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-tajawal"> | |
| <!-- Header --> | |
| <header class="fixed top-0 w-full z-50 bg-brand-dark/80 backdrop-blur-md border-b border-brand-gray/50"> | |
| <nav class="max-w-screen-xl mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-wave-square text-brand-blue text-3xl"></i> | |
| <h1 class="text-2xl font-bold text-white" data-en="NABAD" data-ar="نَبَض">NABAD</h1> | |
| </div> | |
| <div class="hidden lg:flex items-center space-x-8 text-lg"> | |
| <a href="#hero" class="hover:text-brand-blue transition-colors" data-en="Home" data-ar="الرئيسية">Home</a> | |
| <a href="#projects" class="hover:text-brand-blue transition-colors" data-en="Mega Projects" data-ar="المشاريع العملاقة">Mega Projects</a> | |
| <a href="#ai" class="hover:text-brand-blue transition-colors" data-en="AI Core" data-ar="قدرات الذكاء الاصطناعي">AI Core</a> | |
| <a href="dashboard.html" class="hover:text-brand-blue transition-colors" data-en="Live Dashboards" data-ar="لوحات التحكم المباشرة">Live Dashboards</a> | |
| <a href="video.html" class="hover:text-brand-blue transition-colors" data-en="Media Hub" data-ar="المركز الإعلامي">Media Hub</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="dashboard.html" class="px-6 py-2 bg-brand-blue text-white font-bold rounded-full hover:bg-opacity-80 transition-all hidden sm:block"> | |
| <span data-en="Explore" data-ar="استكشف">Explore</span> | |
| </a> | |
| <button onclick="toggleLanguage()" class="w-10 h-10 border-2 border-brand-gray rounded-full hover:border-brand-blue transition-colors"> | |
| <span id="lang-toggle">ع</span> | |
| </button> | |
| </div> | |
| </nav> | |
| </header> | |
| <main> | |
| <!-- Hero Section --> | |
| <section id="hero" class="relative min-h-screen flex items-center justify-center text-center overflow-hidden hero-aurora"> | |
| <div class="absolute inset-0 bg-brand-dark opacity-50"></div> | |
| <video autoplay muted loop playsinline class="absolute inset-0 w-full h-full object-cover opacity-20"> | |
| <source src="vision-2030-bg.mp4" type="video/mp4"> | |
| </video> | |
| <div class="relative z-10 max-w-4xl mx-auto px-6"> | |
| <div class="animate-float"> | |
| <div class="w-28 h-28 mx-auto mb-8 glass-card rounded-full flex items-center justify-center animate-pulse-glow"> | |
| <i class="fas fa-satellite-dish text-brand-blue text-5xl"></i> | |
| </div> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-extrabold text-white leading-tight mb-6" data-en="The Pulse of a Nation's Story" data-ar="نَبَض قصة وطن">The Pulse of a Nation's Story</h1> | |
| <p class="text-xl md:text-2xl text-brand-light opacity-90 max-w-3xl mx-auto mb-10" data-en="Harnessing advanced AI to track, analyze, and amplify the global narrative of Saudi Arabia's transformation." data-ar="تسخير الذكاء الاصطناعي المتقدم لتتبع وتحليل وتعظيم الصدى العالمي لقصة تحول المملكة العربية السعودية."> | |
| Harnessing advanced AI to track, analyze, and amplify the global narrative of Saudi Arabia's transformation. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-6 justify-center"> | |
| <a href="dashboard.html" class="px-8 py-4 bg-brand-blue text-white text-lg font-bold rounded-full hover:scale-105 transition-transform"> | |
| <i class="fas fa-chart-line mr-2"></i> | |
| <span data-en="Enter Live Dashboards" data-ar="الدخول للوحات التحكم المباشرة">Enter Live Dashboards</span> | |
| </a> | |
| <a href="video.html" class="px-8 py-4 glass-card text-white text-lg font-bold rounded-full hover:scale-105 transition-transform"> | |
| <i class="fas fa-play-circle mr-2"></i> | |
| <span data-en="Visit Media Hub" data-ar="زيارة المركز الإعلامي">Visit Media Hub</span> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mega Projects Section --> | |
| <section id="projects" class="py-24 bg-brand-dark"> | |
| <div class="max-w-screen-xl mx-auto px-6"> | |
| <div class="text-center mb-16 scroll-reveal"> | |
| <h2 class="text-4xl font-bold text-white mb-4" data-en="Chronicling the Future: Vision 2030" data-ar="تأريخ المستقبل: رؤية 2030">Chronicling the Future: Vision 2030</h2> | |
| <p class="text-lg text-brand-light max-w-3xl mx-auto" data-en="Monitoring the global media pulse of the Kingdom's groundbreaking mega-projects." data-ar="نرصد النبض الإعلامي العالمي لمشاريع المملكة العملاقة التي ترسم ملامح المستقبل."> | |
| Monitoring the global media pulse of the Kingdom's groundbreaking mega-projects. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- NEOM Card --> | |
| <div class="scroll-reveal group relative rounded-2xl overflow-hidden h-96"> | |
| <img src="project-neom.jpg" alt="NEOM" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <h3 class="text-3xl font-bold text-white" data-en="NEOM & The Line" data-ar="نيوم وذا لاين">NEOM & The Line</h3> | |
| <p class="text-brand-light opacity-90 mt-2" data-en="The land of the future, a new vision for civilization." data-ar="أرض المستقبل، ورؤية جديدة للحضارة.">The land of the future, a new vision for civilization.</p> | |
| </div> | |
| </div> | |
| <!-- Diriyah Gate Card --> | |
| <div class="scroll-reveal group relative rounded-2xl overflow-hidden h-96"> | |
| <img src="project-diriyah.jpg" alt="Diriyah Gate" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <h3 class="text-3xl font-bold text-white" data-en="Diriyah Gate" data-ar="بوابة الدرعية">Diriyah Gate</h3> | |
| <p class="text-brand-light opacity-90 mt-2" data-en="The Kingdom's historical and cultural heart, reborn." data-ar="قلب المملكة التاريخي والثقافي يولد من جديد.">The Kingdom's historical and cultural heart, reborn.</p> | |
| </div> | |
| </div> | |
| <!-- Red Sea Project Card --> | |
| <div class="scroll-reveal group relative rounded-2xl overflow-hidden h-96"> | |
| <img src="project-redsea.jpg" alt="Red Sea Project" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <h3 class="text-3xl font-bold text-white" data-en="Red Sea Global" data-ar="البحر الأحمر الدولية">Red Sea Global</h3> | |
| <p class="text-brand-light opacity-90 mt-2" data-en="Pioneering regenerative tourism on a global scale." data-ar="ريادة السياحة المتجددة على نطاق عالمي.">Pioneering regenerative tourism on a global scale.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Core Section --> | |
| <section id="ai" class="py-24 bg-brand-dark/50"> | |
| <div class="max-w-screen-xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center"> | |
| <div class="scroll-reveal"> | |
| <span class="text-brand-blue font-bold" data-en="NABAD AI CORE" data-ar="قلب نَبَض الذكي">NABAD AI CORE</span> | |
| <h2 class="text-4xl font-bold text-white mt-2 mb-6" data-en="Understanding the Narrative, in Real-Time" data-ar="فهم السرد الإعلامي، في الزمن الفعلي">Understanding the Narrative, in Real-Time</h2> | |
| <p class="text-lg text-brand-light mb-8" data-en="Our proprietary AI models go beyond keywords. They understand context, sentiment, and influence, providing unparalleled insights into how Saudi Arabia's story is being told and perceived globally." data-ar="نماذجنا الخاصة للذكاء الاصطناعي تتجاوز الكلمات المفتاحية. هي تفهم السياق، وتحلل المشاعر، وتقيس التأثير، لتقدم رؤى لا مثيل لها حول كيفية سرد قصة المملكة وتلقيها عالمياً."> | |
| Our proprietary AI models go beyond keywords. They understand context, sentiment, and influence, providing unparalleled insights into how Saudi Arabia's story is being told and perceived globally. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-brain text-2xl text-brand-blue"></i> | |
| <span class="text-xl" data-en="Contextual Sentiment Analysis" data-ar="تحليل المشاعر السياقي">Contextual Sentiment Analysis</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-project-diagram text-2xl text-brand-blue"></i> | |
| <span class="text-xl" data-en="Narrative Spread & Virality Tracking" data-ar="تتبع انتشار السرد والانتشار الفيروسي">Narrative Spread & Virality Tracking</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-shield-alt text-2xl text-brand-blue"></i> | |
| <span class="text-xl" data-en="Misinformation & Disinformation Detection" data-ar="كشف المعلومات المضللة والخاطئة">Misinformation & Disinformation Detection</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="scroll-reveal"> | |
| <div class="glass-card rounded-2xl p-8"> | |
| <h4 class="text-xl font-bold text-white mb-4" data-en="Live AI Analysis Simulation" data-ar="محاكاة لتحليل الذكاء الاصطناعي المباشر">Live AI Analysis Simulation</h4> | |
| <div class="bg-brand-dark rounded-lg p-4 mb-6 min-h-[150px]"> | |
| <p class="text-sm text-brand-light" data-en="<Article Text> Saudi Arabia's Vision 2030 is an ambitious blueprint for economic diversification, global engagement, and enhanced quality of life. Projects like NEOM are set to redefine urban living..." data-ar="<نص المقال> رؤية السعودية 2030 هي خارطة طريق طموحة للتنويع الاقتصادي، والانفتاح العالمي، وتحسين جودة الحياة. مشاريع مثل نيوم تستعد لإعادة تعريف الحياة الحضرية..."> | |
| <Article Text> Saudi Arabia's Vision 2030 is an ambitious blueprint for economic diversification, global engagement, and enhanced quality of life. Projects like NEOM are set to redefine urban living... | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 text-center"> | |
| <div> | |
| <div class="text-3xl font-bold text-green-400">96.8%</div> | |
| <div class="text-sm text-brand-light" data-en="Positive Sentiment" data-ar="مشاعر إيجابية">Positive Sentiment</div> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold text-yellow-400">1.2%</div> | |
| <div class="text-sm text-brand-light" data-en="Misinformation Risk" data-ar="خطر التضليل">Misinformation Risk</div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h5 class="font-bold text-white mb-2" data-en="Key Themes Detected:" data-ar="المواضيع الرئيسية المكتشفة:">Key Themes Detected:</h5> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-brand-blue/50 text-white text-xs px-3 py-1 rounded-full">Vision 2030</span> | |
| <span class="bg-brand-blue/50 text-white text-xs px-3 py-1 rounded-full">NEOM</span> | |
| <span class="bg-brand-blue/50 text-white text-xs px-3 py-1 rounded-full" data-en="Economy" data-ar="الاقتصاد">Economy</span> | |
| <span class="bg-brand-blue/50 text-white text-xs px-3 py-1 rounded-full" data-en="Future" data-ar="المستقبل">Future</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- National Pride Section --> | |
| <section id="anthem" class="py-24"> | |
| <div class="max-w-screen-xl mx-auto px-6 text-center"> | |
| <div class="scroll-reveal"> | |
| <h2 class="text-4xl font-bold text-white mb-4" data-en="The Soul of the Nation" data-ar="روح الوطن">The Soul of the Nation</h2> | |
| <p class="text-lg text-brand-light max-w-3xl mx-auto mb-12" data-en="A story of heritage, pride, and a future built on a glorious past." data-ar="قصة إرث، وفخر، ومستقبل يُبنى على ماضٍ مجيد."> | |
| A story of heritage, pride, and a future built on a glorious past. | |
| </p> | |
| <div class="aspect-video max-w-4xl mx-auto rounded-2xl overflow-hidden shadow-2xl shadow-brand-blue/20"> | |
| <iframe class="w-full h-full" src="https://www.youtube.com/embed/IzogBJpcEWg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="py-16 bg-brand-dark/70 border-t border-brand-gray/50"> | |
| <div class="max-w-screen-xl mx-auto px-6"> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8 text-center md:text-start"> | |
| <div> | |
| <div class="flex items-center justify-center md:justify-start space-x-4 mb-4"> | |
| <i class="fas fa-wave-square text-brand-blue text-3xl"></i> | |
| <h1 class="text-2xl font-bold text-white" data-en="NABAD" data-ar="نَبَض">NABAD</h1> | |
| </div> | |
| <p class="text-brand-light" data-en="The pulse of the nation's story." data-ar="نبض قصة وطن.">The pulse of the nation's story.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-bold text-white mb-4" data-en="Navigate" data-ar="تنقل">Navigate</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-brand-light hover:text-brand-blue transition-colors" data-en="Home" data-ar="الرئيسية">Home</a></li> | |
| <li><a href="dashboard.html" class="text-brand-light hover:text-brand-blue transition-colors" data-en="Dashboards" data-ar="لوحات التحكم">Dashboards</a></li> | |
| <li><a href="video.html" class="text-brand-light hover:text-brand-blue transition-colors" data-en="Media Hub" data-ar="المركز الإعلامي">Media Hub</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-bold text-white mb-4" data-en="Core Features" data-ar="الميزات الأساسية">Core Features</h4> | |
| <ul class="space-y-2"> | |
| <li><span class="text-brand-light" data-en="Geospatial Analysis" data-ar="التحليل الجغرافي">Geospatial Analysis</span></li> | |
| <li><span class="text-brand-light" data-en="Mega-Project Tracking" data-ar="تتبع المشاريع العملاقة">Mega-Project Tracking</span></li> | |
| <li><span class="text-brand-light" data-en="AI Sentiment Engine" data-ar="محرك المشاعر الذكي">AI Sentiment Engine</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-bold text-white mb-4" data-en="Connect" data-ar="تواصل">Connect</h4> | |
| <div class="flex justify-center md:justify-start space-x-4 text-2xl"> | |
| <a href="#" class="text-brand-light hover:text-brand-blue transition-colors"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-brand-light hover:text-brand-blue transition-colors"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-brand-light hover:text-brand-blue transition-colors"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-brand-gray/50 pt-8 text-center text-brand-light/70"> | |
| <p>© <span id="year"></span> NABAD National Media Intelligence Platform. All Rights Reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="translations.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |