Hugging Face's logo

Spaces:
AhmedMostafaAttia
/
Final-Rasd
Running

App Files Community
Final-Rasd
File size: 15,306 Bytes 
4737275
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
 
<!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>رصد | منصة ذكاء الإعلام لوكالة الأنباء السعودية</title>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&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: {
                        'spa-green': '#006C35',
                        'spa-gold': '#C9A646',
                        'spa-dark': '#1A2E44',
                        'spa-light-gray': '#f8f9fa',
                    },
                    fontFamily: { 'tajawal': ['Tajawal', 'sans-serif'] }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'tajawal', sans-serif; }
        .rtl { direction: rtl; }
        .ltr { direction: ltr; }
        .gradient-text { background: linear-gradient(to right, #006C35, #C9A646); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    </style>
</head>
<body class="bg-white text-spa-dark">

    <!-- Header -->
    <header class="fixed top-0 w-full bg-white/80 backdrop-blur-md z-50 border-b">
        <nav class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
            <a href="index.html" class="flex items-center space-x-3">
                <img src="spa-logo.png" alt="SPA Logo" class="h-10">
                <span class="text-2xl font-bold text-spa-green" data-en="Rasd" data-ar="رصد">Rasd</span>
            </a>
            <div class="hidden lg:flex items-center space-x-8">
                <a href="#features" class="hover:text-spa-green transition-colors" data-en="Core Features" data-ar="الخصائص الأساسية">Core Features</a>
                <a href="certification.html" class="hover:text-spa-green transition-colors" data-en="Image Certification" data-ar="تصديق الصور">Image Certification</a>
                <a href="dashboard.html" class="hover:text-spa-green transition-colors" data-en="Live Dashboard" data-ar="لوحة التحكم">Live Dashboard</a>
            </div>
            <div class="flex items-center space-x-4">
                <a href="dashboard.html" class="px-6 py-2 bg-spa-green text-white font-bold rounded-full hover:bg-opacity-90 transition-all" data-en="Enter Command Center" data-ar="دخول مركز القيادة">Enter Command Center</a>
                <button onclick="toggleLanguage()" id="lang-toggle-btn" class="w-10 h-10 border-2 border-spa-green rounded-full text-spa-green font-bold hover:bg-spa-green hover:text-white transition-colors">ع</button>
            </div>
        </nav>
    </header>

    <main>
        <!-- Hero Section -->
        <section class="pt-32 pb-20 bg-spa-light-gray">
            <div class="max-w-7xl mx-auto px-6 text-center">
                <img src="vision-2030-logo.png" alt="Vision 2030" class="h-16 mx-auto mb-6">
                <h1 class="text-5xl md:text-7xl font-extrabold mb-6">
                    <span class="gradient-text" data-en="The Command Center for" data-ar="مركز القيادة لـ">The Command Center for</span><br>
                    <span data-en="Saudi Arabia's Global Narrative" data-ar="السرد الإعلامي العالمي للسعودية">Saudi Arabia's Global Narrative</span>
                </h1>
                <p class="text-xl max-w-3xl mx-auto text-gray-600 mb-10" data-en="An integrated AI platform by the Saudi Press Agency to monitor, analyze, and understand the impact of our news and images across the globe." data-ar="منصة ذكاء اصطناعي متكاملة من وكالة الأنباء السعودية لرصد وتحليل وفهم تأثير أخبارنا وصورنا في جميع أنحاء العالم.">
                    An integrated AI platform by the Saudi Press Agency to monitor, analyze, and understand the impact of our news and images across the globe.
                </p>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
                    <div class="bg-white p-6 rounded-lg shadow-md">
                        <div class="text-4xl font-bold text-spa-green counter" data-target="25780">0</div>
                        <p class="text-gray-500" data-en="Articles Processed Today" data-ar="مقالة تمت معالجتها اليوم">Articles Processed Today</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow-md">
                        <div class="text-4xl font-bold text-spa-green counter" data-target="4250">0</div>
                        <p class="text-gray-500" data-en="Rephrasings Detected" data-ar="إعادة صياغة مكتشفة">Rephrasings Detected</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow-md">
                        <div class="text-4xl font-bold text-spa-green counter" data-target="8945">0</div>
                        <p class="text-gray-500" data-en="Images Certified" data-ar="صورة مصدقة">Images Certified</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow-md">
                        <div class="text-4xl font-bold text-spa-green counter" data-target="180">0</div>
                        <p class="text-gray-500" data-en="Countries Monitored" data-ar="دولة تحت المراقبة">Countries Monitored</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Core Features Section -->
        <section id="features" class="py-24">
            <div class="max-w-7xl mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-4xl font-bold mb-4" data-en="Core Platform Capabilities" data-ar="القدرات الأساسية للمنصة">Core Platform Capabilities</h2>
                    <p class="text-lg text-gray-600 max-w-3xl mx-auto" data-en="Leveraging state-of-the-art AI to provide a 360-degree view of SPA's media impact." data-ar="نستفيد من أحدث تقنيات الذكاء الاصطناعي لتقديم رؤية شاملة 360 درجة للتأثير الإعلامي لوكالة الأنباء السعودية.">
                        Leveraging state-of-the-art AI to provide a 360-degree view of SPA's media impact.
                    </p>
                </div>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- Feature 1 -->
                    <div class="bg-spa-light-gray p-8 rounded-lg">
                        <i class="fas fa-sitemap text-3xl text-spa-green mb-4"></i>
                        <h3 class="text-2xl font-bold mb-3" data-en="News & Rephrasing Analysis" data-ar="تحليل الأخبار وإعادة الصياغة">News & Rephrasing Analysis</h3>
                        <p class="text-gray-600" data-en="Utilizes advanced NLP to detect rephrased, translated, and clustered news stories, tracking the true reach of SPA content." data-ar="يستخدم معالجة اللغة الطبيعية المتقدمة لاكتشاف الأخبار المعاد صياغتها والمترجمة والمجمعة، وتتبع الوصول الحقيقي لمحتوى واس.">
                            Utilizes advanced NLP to detect rephrased, translated, and clustered news stories, tracking the true reach of SPA content.
                        </p>
                    </div>
                    <!-- Feature 2 -->
                    <div class="bg-spa-light-gray p-8 rounded-lg">
                        <i class="fas fa-camera-retro text-3xl text-spa-green mb-4"></i>
                        <h3 class="text-2xl font-bold mb-3" data-en="Computer Vision Image Tracking" data-ar="تتبع الصور بالرؤية الحاسوبية">Computer Vision Image Tracking</h3>
                        <p class="text-gray-600" data-en="Monitors image reuse across platforms, even with edits like cropping or filters, and creates a chronological spread timeline." data-ar="يراقب إعادة استخدام الصور عبر المنصات، حتى مع التعديلات مثل القص أو الفلاتر، وينشئ سجلاً زمنياً لانتشارها.">
                            Monitors image reuse across platforms, even with edits like cropping or filters, and creates a chronological spread timeline.
                        </p>
                    </div>
                    <!-- Feature 3 -->
                    <div class="bg-spa-light-gray p-8 rounded-lg">
                        <i class="fas fa-users text-3xl text-spa-green mb-4"></i>
                        <h3 class="text-2xl font-bold mb-3" data-en="Audience Engagement Analysis" data-ar="تحليل التفاعل الجماهيري">Audience Engagement Analysis</h3>
                        <p class="text-gray-600" data-en="Analyzes sentiment from comments and interactions to classify engagement as positive, negative, or neutral, identifying key discussion topics." data-ar="يحلل المشاعر من التعليقات والتفاعلات لتصنيفها كإيجابية أو سلبية أو محايدة، وتحديد مواضيع النقاش الرئيسية.">
                            Analyzes sentiment from comments and interactions to classify engagement as positive, negative, or neutral, identifying key discussion topics.
                        </p>
                    </div>
                    <!-- Feature 4 -->
                    <div class="bg-spa-light-gray p-8 rounded-lg">
                        <i class="fas fa-chart-pie text-3xl text-spa-green mb-4"></i>
                        <h3 class="text-2xl font-bold mb-3" data-en="Interactive Dashboards" data-ar="لوحات تحكم تفاعلية">Interactive Dashboards</h3>
                        <p class="text-gray-600" data-en="Visualizes local/international spread, top sharing platforms, and media impact metrics over time with automated alerts." data-ar="تعرض الانتشار المحلي/الدولي، وأبرز المنصات المشاركة، ومقاييس التأثير الإعلامي عبر الزمن مع تنبيهات آلية.">
                           Visualizes local/international spread, top sharing platforms, and media impact metrics over time with automated alerts.
                        </p>
                    </div>
                    <!-- Feature 5 -->
                    <div class="bg-spa-light-gray p-8 rounded-lg">
                        <i class="fas fa-brain text-3xl text-spa-green mb-4"></i>
                        <h3 class="text-2xl font-bold mb-3" data-en="Predictive Analytics" data-ar="التحليلات التنبؤية">Predictive Analytics</h3>
                        <p class="text-gray-600" data-en="Forecasts news virality, suggests optimal publishing times, and provides editors with data-driven recommendations." data-ar="تتنبأ بانتشار الأخبار، وتقترح الأوقات المثلى للنشر، وتقدم للمحررين توصيات مدعومة بالبيانات.">
                            Forecasts news virality, suggests optimal publishing times, and provides editors with data-driven recommendations.
                        </p>
                    </div>
                     <!-- Feature 6 -->
                    <div class="bg-spa-light-gray p-8 rounded-lg">
                        <i class="fas fa-check-circle text-3xl text-spa-green mb-4"></i>
                        <h3 class="text-2xl font-bold mb-3" data-en="Global Preferences" data-ar="التفضيلات العالمية">Global Preferences</h3>
                        <p class="text-gray-600" data-en="Identifies which topics and news categories from SPA resonate most with international audiences, shaping future content strategy." data-ar="تحدد المواضيع والفئات الإخبارية من واس التي تلقى صدى أكبر لدى الجماهير العالمية، مما يساهم في تشكيل استراتيجية المحتوى المستقبلية.">
                           Identifies which topics and news categories from SPA resonate most with international audiences, shaping future content strategy.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Image Certification Teaser -->
        <section class="py-24 bg-spa-dark text-white">
            <div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <span class="text-spa-gold font-bold" data-en="A NEW STANDARD OF TRUST" data-ar="معيار جديد للثقة">A NEW STANDARD OF TRUST</span>
                    <h2 class="text-4xl font-bold my-4" data-en="SPA Digital Image Certification" data-ar="خدمة التصديق الرقمي لصور واس">SPA Digital Image Certification</h2>
                    <p class="text-lg text-gray-300 mb-8" data-en="Introducing a pioneering service to digitally sign and certify every image published by SPA. We provide an unbreakable guarantee of authenticity, protecting our intellectual property and combating misinformation." data-ar="نقدم خدمة رائدة للتوقيع والتصديق الرقمي على كل صورة تنشرها واس. نوفر ضمانًا غير قابل للكسر للأصالة، حمايةً لملكيتنا الفكرية ومكافحةً للمعلومات المضللة.">
                        Introducing a pioneering service to digitally sign and certify every image published by SPA. We provide an unbreakable guarantee of authenticity, protecting our intellectual property and combating misinformation.
                    </p>
                    <a href="certification.html" class="px-8 py-3 bg-spa-gold text-spa-dark font-bold rounded-full hover:opacity-90 transition-opacity" data-en="Learn How It Works" data-ar="اعرف كيف تعمل">Learn How It Works</a>
                </div>
                <div>
                    <img src="certification-promo.png" alt="Digital Certification" class="rounded-lg">
                </div>
            </div>
        </section>

    </main>

    <!-- Footer -->
    <footer class="py-16 bg-spa-light-gray border-t">
        <div class="max-w-7xl mx-auto px-6 text-center text-gray-600">
            <img src="spa-logo.png" alt="SPA Logo" class="h-12 mx-auto mb-4">
            <p class="mb-4" data-en="Rasd Platform is a proprietary technology of the Saudi Press Agency." data-ar="منصة رصد هي تقنية مملوكة لوكالة الأنباء السعودية.">Rasd Platform is a proprietary technology of the Saudi Press Agency.</p>
            <p>&copy; <span id="footer-year"></span> Saudi Press Agency. All Rights Reserved.</p>
        </div>
    </footer>
    
    <script src="translations.js"></script>
    <script src="script.js"></script>

</body>
</html>