Hugging Face's logo

Spaces:
AhmedMostafaAttia
/
NABAD-RASD
Running

App Files Community
AhmedMostafaAttia commited on
Commit
18f561f
·
verified ·
1 Parent(s): e930c39

Rename dashboard.html to full-dashboard.html

Browse files
Files changed (2) hide show
  1. dashboard.html +0 -196
  2. full-dashboard.html +228 -0
dashboard.html DELETED
@@ -1,196 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" dir="ltr" id="html">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Dashboards | NABAD</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap" rel="stylesheet">
8
- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
9
- <script src="https://cdn.tailwindcss.com"></script>
10
- <script>
11
- tailwind.config = {
12
- theme: {
13
- extend: {
14
- colors: {
15
- 'brand-dark': '#0D1B2A',
16
- 'brand-blue': '#3A86FF',
17
- 'brand-gold': '#FFBE0B',
18
- 'brand-light': '#E0E1DD',
19
- 'brand-gray': '#415A77',
20
- },
21
- fontFamily: {
22
- 'tajawal': ['Tajawal', 'sans-serif']
23
- }
24
- }
25
- }
26
- }
27
- </script>
28
- <style>
29
- body { font-family: 'Tajawal', sans-serif; background-color: #0D1B2A; color: #E0E1DD; }
30
- .glass-card { background: rgba(65, 90, 119, 0.2); backdrop-filter: blur(12px); border: 1px solid rgba(224, 225, 221, 0.1); }
31
- .sidebar-link.active { background-color: #3A86FF; color: white; }
32
- .sidebar-link:not(.active):hover { background-color: #415A77; }
33
- .rtl { direction: rtl; }
34
- .ltr { direction: ltr; }
35
- .world-map-bg { background-image: url('world-map.svg'); background-size: contain; background-position: center; background-repeat: no-repeat; }
36
- </style>
37
- </head>
38
- <body class="font-tajawal">
39
-
40
- <div class="flex h-screen bg-brand-dark">
41
- <!-- Sidebar -->
42
- <aside class="w-64 flex-shrink-0 bg-brand-dark/50 border-r border-brand-gray/50 flex flex-col">
43
- <div class="h-20 flex items-center justify-center border-b border-brand-gray/50 space-x-3">
44
- <i class="fas fa-wave-square text-brand-blue text-2xl"></i>
45
- <h1 class="text-xl font-bold text-white" data-en="NABAD" data-ar="نَبَض">NABAD</h1>
46
- </div>
47
- <nav class="flex-1 p-4 space-y-2">
48
- <a href="#" class="sidebar-link active flex items-center p-3 rounded-lg transition-colors" data-dashboard="overview">
49
- <i class="fas fa-tachometer-alt w-6 text-center"></i>
50
- <span class="ml-4" data-en="Overview" data-ar="نظرة عامة">Overview</span>
51
- </a>
52
- <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors" data-dashboard="geospatial">
53
- <i class="fas fa-globe-americas w-6 text-center"></i>
54
- <span class="ml-4" data-en="Geospatial" data-ar="التحليل الجغرافي">Geospatial</span>
55
- </a>
56
- <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors" data-dashboard="projects">
57
- <i class="fas fa-building w-6 text-center"></i>
58
- <span class="ml-4" data-en="Mega Projects" data-ar="المشاريع الكبرى">Mega Projects</span>
59
- </a>
60
- <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors" data-dashboard="content">
61
- <i class="fas fa-file-alt w-6 text-center"></i>
62
- <span class="ml-4" data-en="Content Deep-Dive" data-ar="تحليل المحتوى">Content Deep-Dive</span>
63
- </a>
64
- <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors" data-dashboard="system">
65
- <i class="fas fa-cogs w-6 text-center"></i>
66
- <span class="ml-4" data-en="System Health" data-ar="أداء النظام">System Health</span>
67
- </a>
68
- </nav>
69
- <div class="p-4 border-t border-brand-gray/50">
70
- <a href="index.html" class="flex items-center p-3 text-brand-light hover:text-white transition-colors">
71
- <i class="fas fa-sign-out-alt w-6 text-center"></i>
72
- <span class="ml-4" data-en="Back to Home" data-ar="العودة للرئيسية">Back to Home</span>
73
- </a>
74
- </div>
75
- </aside>
76
-
77
- <!-- Main Content -->
78
- <main class="flex-1 overflow-y-auto">
79
- <header class="h-20 flex items-center justify-between px-8 bg-brand-dark/30 border-b border-brand-gray/50">
80
- <h2 id="dashboard-title" class="text-2xl font-bold text-white">Dashboard Overview</h2>
81
- <div class="flex items-center space-x-4">
82
- <div class="flex items-center space-x-2 text-green-400">
83
- <i class="fas fa-circle animate-pulse text-xs"></i>
84
- <span class="text-sm font-medium" data-en="LIVE" data-ar="مباشر">LIVE</span>
85
- </div>
86
- <button onclick="toggleLanguage()" class="w-10 h-10 border-2 border-brand-gray rounded-full hover:border-brand-blue transition-colors">
87
- <span id="lang-toggle-dash">ع</span>
88
- </button>
89
- </div>
90
- </header>
91
-
92
- <div class="p-8">
93
- <!-- Dashboard: Overview -->
94
- <div id="dashboard-overview" class="dashboard-content">
95
- <!-- Stat Cards -->
96
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
97
- <div class="glass-card p-6 rounded-2xl">
98
- <div class="flex items-center justify-between">
99
- <span class="text-sm text-brand-light" data-en="Global Mentions" data-ar="الإشارات العالمية">Global Mentions</span>
100
- <i class="fas fa-newspaper text-brand-blue"></i>
101
- </div>
102
- <div class="text-4xl font-bold mt-2">2.4M</div>
103
- <div class="text-sm text-green-400 mt-1">+15%</div>
104
- </div>
105
- <div class="glass-card p-6 rounded-2xl">
106
- <div class="flex items-center justify-between">
107
- <span class="text-sm text-brand-light" data-en="Positive Sentiment" data-ar="المشاعر الإيجابية">Positive Sentiment</span>
108
- <i class="fas fa-smile text-brand-gold"></i>
109
- </div>
110
- <div class="text-4xl font-bold mt-2">94.7%</div>
111
- <div class="text-sm text-green-400 mt-1">+1.2%</div>
112
- </div>
113
- <div class="glass-card p-6 rounded-2xl">
114
- <div class="flex items-center justify-between">
115
- <span class="text-sm text-brand-light" data-en="Countries Reached" data-ar="الدول التي تم الوصول إليها">Countries Reached</span>
116
- <i class="fas fa-globe text-brand-blue"></i>
117
- </div>
118
- <div class="text-4xl font-bold mt-2">172</div>
119
- <div class="text-sm text-green-400 mt-1">+3 New</div>
120
- </div>
121
- <div class="glass-card p-6 rounded-2xl">
122
- <div class="flex items-center justify-between">
123
- <span class="text-sm text-brand-light" data-en="Key Narratives" data-ar="السرديات الرئيسية">Key Narratives</span>
124
- <i class="fas fa-book-open text-brand-gold"></i>
125
- </div>
126
- <div class="text-4xl font-bold mt-2">12</div>
127
- <div class="text-sm text-green-400 mt-1">Vision 2030 Dominant</div>
128
- </div>
129
- </div>
130
-
131
- <!-- Visualizations Grid -->
132
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
133
- <!-- Platform Comparison GIF -->
134
- <div class="lg:col-span-2 glass-card p-6 rounded-2xl">
135
- <h3 class="text-xl font-bold mb-4" data-en="Platform & Mentions Analysis" data-ar="تحليل المنصات والإشارات">Platform & Mentions Analysis</h3>
136
- <div class="h-80 rounded-lg overflow-hidden">
137
- <img src="dashboard-platform-comparison.gif" alt="Platform Comparison Data" class="w-full h-full object-cover">
138
- </div>
139
- </div>
140
- <!-- Live Feed GIF -->
141
- <div class="glass-card p-6 rounded-2xl">
142
- <h3 class="text-xl font-bold mb-4" data-en="Live Media Feed" data-ar="التغذية المباشرة للإعلام">Live Media Feed</h3>
143
- <div class="h-80 rounded-lg overflow-hidden">
144
- <img src="dashboard-live-feed.gif" alt="Live Feed Data" class="w-full h-full object-cover">
145
- </div>
146
- </div>
147
- </div>
148
- </div>
149
-
150
- <!-- Dashboard: Geospatial -->
151
- <div id="dashboard-geospatial" class="dashboard-content hidden">
152
- <div class="glass-card p-6 rounded-2xl">
153
- <h3 class="text-xl font-bold mb-4" data-en="Image Virality & Geospatial Spread" data-ar="انتشار الصور والتوزيع الجغرافي">Image Virality & Geospatial Spread</h3>
154
- <div class="rounded-lg overflow-hidden">
155
- <img src="dashboard-image-virality.gif" alt="Image Virality Data" class="w-full h-auto object-contain">
156
- </div>
157
- </div>
158
- </div>
159
-
160
- <!-- Dashboard: Mega Projects -->
161
- <div id="dashboard-projects" class="dashboard-content hidden">
162
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
163
- <div class="glass-card p-6 rounded-2xl text-center">
164
- <h3 class="text-2xl font-bold">NEOM</h3>
165
- <div class="text-5xl font-bold text-brand-blue my-4">1.2M</div>
166
- <span class="text-brand-light" data-en="Total Mentions" data-ar="إجمالي الإشارات">Total Mentions</span>
167
- </div>
168
- <div class="glass-card p-6 rounded-2xl text-center">
169
- <h3 class="text-2xl font-bold" data-en="Diriyah Gate" data-ar="بوابة الدرعية">Diriyah Gate</h3>
170
- <div class="text-5xl font-bold text-brand-blue my-4">780K</div>
171
- <span class="text-brand-light" data-en="Total Mentions" data-ar="إجمالي الإشارات">Total Mentions</span>
172
- </div>
173
- <div class="glass-card p-6 rounded-2xl text-center">
174
- <h3 class="text-2xl font-bold" data-en="Red Sea Global" data-ar="البحر الأحمر">Red Sea Global</h3>
175
- <div class="text-5xl font-bold text-brand-blue my-4">950K</div>
176
- <span class="text-brand-light" data-en="Total Mentions" data-ar="إجمالي الإشارات">Total Mentions</span>
177
- </div>
178
- </div>
179
- </div>
180
-
181
- <!-- Dashboard: Content Deep-Dive -->
182
- <div id="dashboard-content" class="dashboard-content hidden">
183
- <div class="glass-card p-6 rounded-2xl">
184
- <h3 class="text-xl font-bold mb-4" data-en="Content Topics & Sentiment Analysis" data-ar="مواضيع المحتوى وتحليل المشاعر">Content Topics & Sentiment Analysis</h3>
185
- <div class="rounded-lg overflow-hidden">
186
- <img src="dashboard-content-topics.gif" alt="Content Topics Analysis" class="w-full h-auto object-contain">
187
- </div>
188
- </div>
189
- </div>
190
- </main>
191
- </div>
192
-
193
- <script src="translations.js"></script>
194
- <script src="script.js"></script>
195
- </body>
196
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
full-dashboard.html ADDED
@@ -0,0 +1,228 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" dir="ltr" id="html">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title data-en="All Dashboards | Rasd Intelligence Platform" data-ar="جميع لوحات الذكاء | منصة رصد الذكية">All Dashboards | Rasd Intelligence Platform</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap" rel="stylesheet">
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: { 'saudi-green': '#006C35', 'saudi-gold': '#C9A646', 'saudi-dark': '#1A2E44' },
15
+ fontFamily: { 'tajawal': ['Tajawal', 'sans-serif'] }
16
+ }
17
+ }
18
+ }
19
+ </script>
20
+ <style>
21
+ body { font-family: 'Tajawal', sans-serif; background-color: #f8f9fa; }
22
+ .gradient-bg { background: linear-gradient(135deg, #006C35 0%, #004d26 100%); }
23
+ .rtl { direction: rtl; } .ltr { direction: ltr; }
24
+ .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem; }
25
+ .dashboard-card { background: white; border-radius: 20px; padding: 1.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
26
+ .dashboard-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
27
+ .dashboard-preview { width: 100%; height: 250px; border-radius: 15px; margin-bottom: 1rem; overflow: hidden; position: relative; }
28
+ .dashboard-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
29
+ .dashboard-placeholder {
30
+ width: 100%; height: 100%;
31
+ background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
32
+ display: flex; align-items: center; justify-content: center;
33
+ color: #999; font-size: 14px; border-radius: 15px;
34
+ position: absolute; top: 0; left: 0; z-index: 1;
35
+ }
36
+ .dashboard-preview img[data-loaded="true"] + .dashboard-placeholder { display: none; }
37
+ </style>
38
+ </head>
39
+ <body class="font-tajawal">
40
+
41
+ <!-- Header -->
42
+ <header class="gradient-bg text-white shadow-lg">
43
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between">
44
+ <div>
45
+ <h1 class="text-3xl font-bold" data-en="All Intelligence Dashboards" data-ar="جميع لوحات الذكاء">All Intelligence Dashboards</h1>
46
+ <p class="opacity-80" data-en="Explore specialized modules for deep analysis" data-ar="استكشف الوحدات المتخصصة للتحليل العميق">Explore specialized modules for deep analysis</p>
47
+ </div>
48
+ <div class="flex items-center space-x-4">
49
+ <button onclick="toggleLanguage()" class="flex items-center space-x-2 px-3 py-2 rounded-lg border-2 border-saudi-gold text-saudi-gold hover:bg-saudi-gold hover:text-saudi-dark transition-all">
50
+ <i class="fas fa-globe"></i>
51
+ <span id="lang-toggle">العربية</span>
52
+ </button>
53
+ <a href="index.html" class="px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg transition-all">
54
+ <i class="fas fa-arrow-left mr-2"></i>
55
+ <span data-en="Back to News Analysis" data-ar="العودة لتحليل الخبر">Back to News Analysis</span>
56
+ </a>
57
+ </div>
58
+ </div>
59
+ </header>
60
+
61
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
62
+ <div class="dashboard-grid">
63
+
64
+ <!-- Card 1: Real-time News Feed -->
65
+ <div class="dashboard-card">
66
+ <div class="dashboard-preview">
67
+ <img src="./dashboard-realtime-feed.gif" alt="Real-time Feed" loading="lazy" onload="this.setAttribute('data-loaded', 'true')">
68
+ <div class="dashboard-placeholder" data-en="Real-time News Feed" data-ar="التغذية الإخبارية المباشرة">Real-time News Feed</div>
69
+ </div>
70
+ <h4 class="text-xl font-bold text-saudi-dark" data-en="Real-time News Feed" data-ar="التغذية الإخبارية المباشرة">Real-time News Feed</h4>
71
+ <p class="text-gray-600 mt-2 text-base leading-relaxed" data-en="Provides a live, minute-by-minute feed of where your news is being published globally, enabling rapid response and tracking of its spread." data-ar="توفر تغذية حية دقيقة بدقيقة لأماكن نشر أخبارك عالميًا، مما يتيح الاستجابة السريعة وتتبع انتشارها لحظة بلحظة.">Provides a live, minute-by-minute feed of where your news is being published globally, enabling rapid response and tracking of its spread.</p>
72
+ </div>
73
+
74
+ <!-- Card 2: Global Impact Summary -->
75
+ <div class="dashboard-card">
76
+ <div class="dashboard-preview">
77
+ <img src="./dashboard-global-summary.gif" alt="Global Summary" loading="lazy" onload="this.setAttribute('data-loaded', 'true')">
78
+ <div class="dashboard-placeholder" data-en="Global Impact Summary" data-ar="ملخص التأثير العالمي">Global Impact Summary</div>
79
+ </div>
80
+ <h4 class="text-xl font-bold text-saudi-dark" data-en="Global Impact Summary" data-ar="ملخص التأثير العالمي">Global Impact Summary</h4>
81
+ <p class="text-gray-600 mt-2 text-base leading-relaxed" data-en="A high-level overview of news reach, showing the number of countries and media outlets covering the story for a quick impact assessment." data-ar="نظرة عامة شاملة على مدى وصول الأخبار، تعرض عدد الدول والمنافذ الإعلامية التي تغطي القصة لتقييم سريع وموجز للتأثير الكلي.">A high-level overview of news reach, showing the number of countries and media outlets covering the story for a quick impact assessment.</p>
82
+ </div>
83
+
84
+ <!-- Card 3: News Content Analysis -->
85
+ <div class="dashboard-card">
86
+ <div class="dashboard-preview">
87
+ <img src="./dashboard-news.gif" alt="News Analysis" loading="lazy" onload="this.setAttribute('data-loaded', 'true')">
88
+ <div class="dashboard-placeholder" data-en="News Content Analysis" data-ar="تحليل محتوى الأخبار">News Content Analysis</div>
89
+ </div>
90
+ <h4 class="text-xl font-bold text-saudi-dark" data-en="News Content Analysis" data-ar="تحليل محتوى الأخبار">News Content Analysis</h4>
91
+ <p class="text-gray-600 mt-2 text-base leading-relaxed" data-en="Uses NLP to detect paraphrased or translated versions of your news, ensuring you track all forms of your content across the web." data-ar="تستخدم معالجة اللغات الطبيعية (NLP) لاكتشاف النسخ المعاد صياغتها أو المترجمة من أخبارك، لضمان تتبع جميع أشكال المحتوى الخاص بك عبر الويب.">Uses NLP to detect paraphrased or translated versions of your news, ensuring you track all forms of your content across the web.</p>
92
+ </div>
93
+
94
+ <!-- Card 4: Automated Reports -->
95
+ <div class="dashboard-card">
96
+ <div class="dashboard-preview">
97
+ <img src="./dashboard-reports.gif" alt="Reports" loading="lazy" onload="this.setAttribute('data-loaded', 'true')">
98
+ <div class="dashboard-placeholder" data-en="Automated Reports" data-ar="التقارير التلقائية">Automated Reports</div>
99
+ </div>
100
+ <h4 class="text-xl font-bold text-saudi-dark" data-en="Automated Reports" data-ar="التقارير التلقائية">Automated Reports</h4>
101
+ <p class="text-gray-600 mt-2 text-base leading-relaxed" data-en="Generates comprehensive performance reports automatically, saving time and providing key insights for management and stakeholders." data-ar="تنشئ تقارير أداء شاملة وتلقائية، مما يوفر الوقت ويقدم رؤى أساسية للإدارة وأصحاب المصلحة لاتخاذ قرارات مستنيرة.">Generates comprehensive performance reports automatically, saving time and providing key insights for management and stakeholders.</p>
102
+ </div>
103
+
104
+ <!-- Card 5: Sentiment Analysis -->
105
+ <div class="dashboard-card">
106
+ <div class="dashboard-preview">
107
+ <img src="./dashboard-sentiment.gif" alt="Sentiment Analysis" loading="lazy" onload="this.setAttribute('data-loaded', 'true')">
108
+ <div class="dashboard-placeholder" data-en="Sentiment Analysis" data-ar="تحليل المشاعر">Sentiment Analysis</div>
109
+ </div>
110
+ <h4 class="text-xl font-bold text-saudi-dark" data-en="Sentiment Analysis" data-ar="تحليل المشاعر">Sentiment Analysis</h4>
111
+ <p class="text-gray-600 mt-2 text-base leading-relaxed" data-en="Analyzes public comments and reactions to classify the overall sentiment (positive, negative, neutral) towards the news content, aiding in public perception management." data-ar="تحلل تعليقات وردود أفعال الجمهور لتصنيف المشاعر العامة (إيجابية، سلبية، محايدة) تجاه المحتوى الإخباري بدقة عالية، مما يساعد في إدارة الانطباع العام.">Analyzes public comments and reactions to classify the overall sentiment (positive, negative, neutral) towards the news content, aiding in public perception management.</p>
112
+ </div>
113
+
114
+ <!-- Card 6: Topic Intelligence -->
115
+ <div class="dashboard-card">
116
+ <div class="dashboard-preview">
117
+ <img src="./dashboard-topic-analysis.gif" alt="Topic Analysis" loading="lazy" onload="this.setAttribute('data-loaded', 'true')">
118
+ <div class="dashboard-placeholder" data-en="Topic Intelligence" data-ar="ذكاء المواضيع">Topic Intelligence</div>
119
+ </div>
120
+ <h4 class="text-xl font-bold text-saudi-dark" data-en="Topic Intelligence" data-ar="ذكاء المواضيع">Topic Intelligence</h4>
121
+ <p class="text-gray-600 mt-2 text-base leading-relaxed" data-en="Identifies the main topics and themes being discussed in relation to your news, revealing the core of the public conversation and trending subjects." data-ar="تحدد المواضيع والمحاور الرئيسية التي تتم مناقشتها فيما يتعلق بأخبارك، مما يكشف عن جوهر المحادثة العامة واتجاهاتها والمواضيع الرائجة.">Identifies the main topics and themes being discussed in relation to your news, revealing the core of the public conversation and trending subjects.</p>
122
+ </div>
123
+
124
+ <!-- Card 7: Predictive Analytics -->
125
+ <div class="dashboard-card">
126
+ <div class="dashboard-preview">
127
+ <img src="./dashboard-prediction.gif" alt="Prediction" loading="lazy" onload="this.setAttribute('data-loaded', 'true')">
128
+ <div class="dashboard-placeholder" data-en="Predictive Analytics" data-ar="التحليلات التنبؤية">Predictive Analytics</div>
129
+ </div>
130
+ <h4 class="text-xl font-bold text-saudi-dark" data-en="Predictive Analytics" data-ar="التحليلات التنبؤية">Predictive Analytics</h4>
131
+ <p class="text-gray-600 mt-2 text-base leading-relaxed" data-en="Forecasts which news stories are likely to go viral, allowing for proactive content strategy and effective resource allocation based on future trends." data-ar="تتنبأ بالأخبار التي من المحتمل أن تنتشر بشكل واسع، مما يسمح باستراتيجية محتوى استباقية وتخصيص الموارد بشكل فعال بناءً على الاتجاهات المستقبلية.">Forecasts which news stories are likely to go viral, allowing for proactive content strategy and effective resource allocation based on future trends.</p>
132
+ </div>
133
+
134
+ <!-- Card 8: Influencers Impact -->
135
+ <div class="dashboard-card">
136
+ <div class="dashboard-preview">
137
+ <img src="./dashboard-influencers.gif" alt="Influencers" loading="lazy" onload="this.setAttribute('data-loaded', 'true')">
138
+ <div class="dashboard-placeholder" data-en="Influencers Impact" data-ar="تأثير المؤثرين">Influencers Impact</div>
139
+ </div>
140
+ <h4 class="text-xl font-bold text-saudi-dark" data-en="Influencers Impact" data-ar="تأثير المؤثرين">Influencers Impact</h4>
141
+ <p class="text-gray-600 mt-2 text-base leading-relaxed" data-en="Identifies key opinion leaders and influencers who are amplifying your news and precisely measures their impact on reach and public discourse." data-ar="تحدد قادة الرأي والمؤثرين الرئيسيين الذين يساهمون في نشر أخبارك وتقيس بدقة مدى تأثيرهم على الوصول والانتشار والخطاب العام.">Identifies key opinion leaders and influencers who are amplifying your news and precisely measures their impact on reach and public discourse.</p>
142
+ </div>
143
+
144
+ <!-- Card 9: Viral Content Tracker -->
145
+ <div class="dashboard-card">
146
+ <div class="dashboard-preview">
147
+ <img src="./dashboard-virality.gif" alt="Virality" loading="lazy" onload="this.setAttribute('data-loaded', 'true')">
148
+ <div class="dashboard-placeholder" data-en="Viral Content Tracker" data-ar="متتبع المحتوى الفيروسي">Viral Content Tracker</div>
149
+ </div>
150
+ <h4 class="text-xl font-bold text-saudi-dark" data-en="Viral Content Tracker" data-ar="متتبع المحتوى الفيروسي">Viral Content Tracker</h4>
151
+ <p class="text-gray-600 mt-2 text-base leading-relaxed" data-en="Detects news stories that are spreading exceptionally fast, providing deep insights into the mechanics and patterns of virality to understand why content becomes popular." data-ar="يكتشف الأخبار التي تنتشر بسرعة استثنائية، ويقدم رؤى عميقة حول آليات وأنماط الانتشار الفيروسي لفهم أسباب شعبية المحتوى.">Detects news stories that are spreading exceptionally fast, providing deep insights into the mechanics and patterns of virality to understand why content becomes popular.</p>
152
+ </div>
153
+
154
+ <!-- Card 10: Image Tracking -->
155
+ <div class="dashboard-card">
156
+ <div class="dashboard-preview">
157
+ <img src="./dashboard-image-tracking.gif" alt="Image Tracking" loading="lazy" onload="this.setAttribute('data-loaded', 'true')">
158
+ <div class="dashboard-placeholder" data-en="Image Tracking" data-ar="تتبع الصور">Image Tracking</div>
159
+ </div>
160
+ <h4 class="text-xl font-bold text-saudi-dark" data-en="Image Tracking" data-ar="تتبع الصور">Image Tracking</h4>
161
+ <p class="text-gray-600 mt-2 text-base leading-relaxed" data-en="Uses Computer Vision to find where your photos are being reused across the web, even if they are cropped, edited, or altered, ensuring full control over visual content." data-ar="تستخدم رؤية الحاسوب للعثور على أماكن إعادة استخدام صورك عبر الويب، حتى لو تم قصها أو تعديلها أو تغيير ألوانها، لضمان التحكم الكامل بالمحتوى البصري.">Uses Computer Vision to find where your photos are being reused across the web, even if they are cropped, edited, or altered, ensuring full control over visual content.</p>
162
+ </div>
163
+
164
+ </div>
165
+ </main>
166
+
167
+ <script>
168
+ let currentLanguage = 'en';
169
+ function toggleLanguage() {
170
+ currentLanguage = currentLanguage === 'en' ? 'ar' : 'en';
171
+ updatePageLanguage();
172
+ }
173
+ function updatePageLanguage() {
174
+ const isArabic = currentLanguage === 'ar';
175
+ const htmlEl = document.getElementById('html');
176
+
177
+ htmlEl.setAttribute('lang', currentLanguage);
178
+ htmlEl.setAttribute('dir', isArabic ? 'rtl' : 'ltr');
179
+ document.body.classList.toggle('rtl', isArabic);
180
+ document.body.classList.toggle('ltr', !isArabic);
181
+
182
+ document.getElementById('lang-toggle').textContent = isArabic ? 'English' : 'العربية';
183
+ document.querySelectorAll('[data-en]').forEach(el => {
184
+ const text = el.getAttribute(`data-${currentLanguage}`);
185
+ if (text) {
186
+ el.textContent = text;
187
+ }
188
+ });
189
+ document.querySelectorAll('title[data-en]').forEach(el => {
190
+ const text = el.getAttribute(`data-${currentLanguage}`);
191
+ if (text) {
192
+ el.textContent = text;
193
+ }
194
+ });
195
+ document.querySelectorAll('.dashboard-placeholder[data-en]').forEach(el => {
196
+ const text = el.getAttribute(`data-${currentLanguage}`);
197
+ if (text) {
198
+ el.textContent = text;
199
+ }
200
+ });
201
+ }
202
+
203
+ // Initialize page on load
204
+ document.addEventListener('DOMContentLoaded', function() {
205
+ updatePageLanguage();
206
+
207
+ // Add additional error handling for images
208
+ document.querySelectorAll('.dashboard-preview img').forEach(img => {
209
+ img.addEventListener('error', function() {
210
+ this.style.display = 'none';
211
+ const placeholder = this.nextElementSibling;
212
+ if (placeholder) {
213
+ placeholder.style.display = 'flex';
214
+ }
215
+ });
216
+
217
+ img.addEventListener('load', function() {
218
+ this.setAttribute('data-loaded', 'true');
219
+ const placeholder = this.nextElementSibling;
220
+ if (placeholder) {
221
+ placeholder.style.display = 'none';
222
+ }
223
+ });
224
+ });
225
+ });
226
+ </script>
227
+ </body>
228
+ </html>