Hugging Face's logo

Spaces:
AhmedMostafaAttia
/
NABAD-RASD
Running

App Files Community
AhmedMostafaAttia commited on
Commit
cbfc874
·
verified ·
1 Parent(s): a0e57eb

Create dashboard.html

Browse files
Files changed (1) hide show
  1. dashboard.html +201 -0
dashboard.html ADDED
@@ -0,0 +1,201 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
96
+ <div class="glass-card p-6 rounded-2xl">
97
+ <div class="flex items-center justify-between">
98
+ <span class="text-sm text-brand-light" data-en="Global Mentions" data-ar="الإشارات العالمية">Global Mentions</span>
99
+ <i class="fas fa-newspaper text-brand-blue"></i>
100
+ </div>
101
+ <div class="text-4xl font-bold mt-2">2.4M</div>
102
+ <div class="text-sm text-green-400 mt-1">+15%</div>
103
+ </div>
104
+ <div class="glass-card p-6 rounded-2xl">
105
+ <div class="flex items-center justify-between">
106
+ <span class="text-sm text-brand-light" data-en="Positive Sentiment" data-ar="المشاعر الإيجابية">Positive Sentiment</span>
107
+ <i class="fas fa-smile text-brand-gold"></i>
108
+ </div>
109
+ <div class="text-4xl font-bold mt-2">94.7%</div>
110
+ <div class="text-sm text-green-400 mt-1">+1.2%</div>
111
+ </div>
112
+ <div class="glass-card p-6 rounded-2xl">
113
+ <div class="flex items-center justify-between">
114
+ <span class="text-sm text-brand-light" data-en="Countries Reached" data-ar="الدول التي تم الوصول إليها">Countries Reached</span>
115
+ <i class="fas fa-globe text-brand-blue"></i>
116
+ </div>
117
+ <div class="text-4xl font-bold mt-2">172</div>
118
+ <div class="text-sm text-green-400 mt-1">+3 New</div>
119
+ </div>
120
+ <div class="glass-card p-6 rounded-2xl">
121
+ <div class="flex items-center justify-between">
122
+ <span class="text-sm text-brand-light" data-en="Key Narratives" data-ar="السرديات الرئيسية">Key Narratives</span>
123
+ <i class="fas fa-book-open text-brand-gold"></i>
124
+ </div>
125
+ <div class="text-4xl font-bold mt-2">12</div>
126
+ <div class="text-sm text-green-400 mt-1">Vision 2030 Dominant</div>
127
+ </div>
128
+ </div>
129
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
130
+ <div class="lg:col-span-2 glass-card p-6 rounded-2xl">
131
+ <h3 class="text-xl font-bold mb-4" data-en="Mentions Over Time" data-ar="حجم الإشارات عبر الزمن">Mentions Over Time</h3>
132
+ <div class="h-80 bg-brand-dark/50 rounded-lg flex items-center justify-center">
133
+ <span class="text-brand-gray" data-en="Chart Placeholder" data-ar="مساحة للرسم البياني">Chart Placeholder</span>
134
+ </div>
135
+ </div>
136
+ <div class="glass-card p-6 rounded-2xl">
137
+ <h3 class="text-xl font-bold mb-4" data-en="Top Media Sources" data-ar="أبرز المصادر الإعلامية">Top Media Sources</h3>
138
+ <ul class="space-y-4">
139
+ <li class="flex justify-between items-center"><span>Reuters</span><span class="font-bold text-brand-blue">18.2K</span></li>
140
+ <li class="flex justify-between items-center"><span>Associated Press</span><span class="font-bold text-brand-blue">15.7K</span></li>
141
+ <li class="flex justify-between items-center"><span>Bloomberg</span><span class="font-bold text-brand-blue">12.1K</span></li>
142
+ <li class="flex justify-between items-center"><span>Al Jazeera</span><span class="font-bold text-brand-blue">9.8K</span></li>
143
+ <li class="flex justify-between items-center"><span>CNN</span><span class="font-bold text-brand-blue">7.2K</span></li>
144
+ </ul>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Dashboard: Geospatial -->
150
+ <div id="dashboard-geospatial" class="dashboard-content hidden">
151
+ <div class="glass-card p-6 rounded-2xl h-[75vh] flex flex-col">
152
+ <h3 class="text-xl font-bold mb-4" data-en="Global Media Sentiment Map" data-ar="خريطة المشاعر الإعلامية العالمية">Global Media Sentiment Map</h3>
153
+ <div class="flex-1 world-map-bg opacity-70 rounded-lg">
154
+ <!-- Simulated data points -->
155
+ <div class="absolute top-[30%] left-[25%]" title="USA: 92% Positive"><i class="fas fa-circle text-green-400 animate-pulse"></i></div>
156
+ <div class="absolute top-[40%] left-[50%]" title="Europe: 95% Positive"><i class="fas fa-circle text-green-400 animate-pulse"></i></div>
157
+ <div class="absolute top-[60%] left-[55%]" title="MENA: 98% Positive"><i class="fas fa-circle text-green-400 animate-pulse"></i></div>
158
+ <div class="absolute top-[45%] left-[80%]" title="East Asia: 88% Positive"><i class="fas fa-circle text-green-400 animate-pulse"></i></div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Dashboard: Mega Projects -->
164
+ <div id="dashboard-projects" class="dashboard-content hidden">
165
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
166
+ <div class="glass-card p-6 rounded-2xl text-center">
167
+ <h3 class="text-2xl font-bold">NEOM</h3>
168
+ <div class="text-5xl font-bold text-brand-blue my-4">1.2M</div>
169
+ <span class="text-brand-light" data-en="Total Mentions" data-ar="إجمالي الإشارات">Total Mentions</span>
170
+ </div>
171
+ <div class="glass-card p-6 rounded-2xl text-center">
172
+ <h3 class="text-2xl font-bold" data-en="Diriyah Gate" data-ar="بوابة الدرعية">Diriyah Gate</h3>
173
+ <div class="text-5xl font-bold text-brand-blue my-4">780K</div>
174
+ <span class="text-brand-light" data-en="Total Mentions" data-ar="إجمالي الإشارات">Total Mentions</span>
175
+ </div>
176
+ <div class="glass-card p-6 rounded-2xl text-center">
177
+ <h3 class="text-2xl font-bold" data-en="Red Sea Global" data-ar="البحر الأحمر">Red Sea Global</h3>
178
+ <div class="text-5xl font-bold text-brand-blue my-4">950K</div>
179
+ <span class="text-brand-light" data-en="Total Mentions" data-ar="إجمالي الإشارات">Total Mentions</span>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <!-- Dashboard: Content Deep-Dive -->
185
+ <div id="dashboard-content" class="dashboard-content hidden">
186
+ <h3 class="text-xl font-bold mb-4" data-en="Content analysis by topic" data-ar="تحليل المحتوى حسب الموضوع">Content analysis by topic</h3>
187
+ </div>
188
+
189
+ <!-- Dashboard: System Health -->
190
+ <div id="dashboard-system" class="dashboard-content hidden">
191
+ <h3 class="text-xl font-bold mb-4" data-en="AI and System Performance" data-ar="أداء الذكاء الاصطناعي والنظام">AI and System Performance</h3>
192
+ </div>
193
+
194
+ </div>
195
+ </main>
196
+ </div>
197
+
198
+ <script src="translations.js"></script>
199
+ <script src="script.js"></script>
200
+ </body>
201
+ </html>