Spaces:

AhmedMostafaAttia
/

NABAD-RASD

Running

App Files Files Community

AhmedMostafaAttia commited on Sep 20, 2025

Commit

a0e57eb

verified ·

1 Parent(s): 6c2e7ed

Update index.html

Browse files

Files changed (1) hide show

index.html +294 -19

index.html CHANGED Viewed

@@ -1,19 +1,294 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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 هي خارطة طريق طموحة للتنويع الاقتصادي، والانفتاح العالمي، وتحسين جودة الحياة. مشاريع مثل نيوم تستعد لإعادة تعريف الحياة الحضرية...">
+                                &lt;Article Text&gt; 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>&copy; <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>