Hugging Face's logo

Spaces:
Azdeen
/
saudipulse-radar-globe
Running

App Files Community
Azdeen commited on
Commit
6e0faba
·
verified ·
1 Parent(s): 6faa799

<!DOCTYPE html>

Browse files

<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SaudiPulse | News Radar</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#245953',
secondary: '#408E91',
accent: '#E49393',
dark: '#1B1A17',
light: '#F8F5F1'
},
fontFamily: {
arabic: ['Tajawal', 'sans-serif'],
english: ['Poppins', 'sans-serif']
}
}
}
}
</script>
<style>


@import
 url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Tajawal:wght@400;500;700&display=swap');

body {
font-family: 'Tajawal', 'Poppins', sans-serif;
}

.gradient-bg {
background: linear-gradient(135deg, #245953 0%, #408E91 50%, #E49393 100%);
}

.news-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.rtl {
direction: rtl;
}
</style>
</head>
<body class="bg-gray-50 rtl">
<!-- Vanta.js Globe Background -->
<div id="vanta-globe" class="fixed top-0 left-0 w-full h-full z-0"></div>

<!-- Main Content -->
<div class="relative z-10 min-h-screen flex flex-col">
<!-- Navigation -->
<nav class="bg-white/90 backdrop-blur-md shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i data-feather="globe" class="text-primary h-8 w-8"></i>
<span class="ml-2 text-xl font-bold text-primary">SaudiPulse</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-4 space-x-reverse">
<a href="#" class="text-primary px-3 py-2 rounded-md text-sm font-medium border-b-2 border-primary">الرئيسية</a>
<a href="#dashboard" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">لوحة التحكم</a>
<a href="#sentiment" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">تحليل المشاعر</a>
<a href="#alerts" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">التنبيهات</a>
<button class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-opacity-90 transition duration-200">
<i data-feather="user" class="w-4 h-4 inline mr-1"></i> تسجيل الدخول
</button>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-primary focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>

<!-- Hero Section -->
<header class="gradient-bg text-white py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">رادار الأخبار السعودية حول العالم</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">نظام ذكي لرصد وتحليل الانطباع الإعلامي عن المملكة العربية السعودية في الوقت الفعلي</p>
<div class="flex justify-center space-x-4 space-x-reverse">
<button class="bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition duration-200 flex items-center">
<i data-feather="play-circle" class="w-5 h-5 ml-2"></i> عرض العرض التوضيحي
</button>
<button class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition duration-200 flex items-center">
<i data-feather="info" class="w-5 h-5 ml-2"></i> المزيد عن النظام
</button>
</div>
</div>
</header>

<!-- Stats Section -->
<section class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 text-center">
<div class="bg-light p-6 rounded-xl shadow-sm">
<div class="text-3xl font-bold text-primary">12,457</div>
<div class="text-gray-600 mt-2">خبر تم تحليله</div>
<i data-feather="file-text" class="w-8 h-8 mx-auto mt-4 text-secondary"></i>
</div>
<div class="bg-light p-6 rounded-xl shadow-sm">
<div class="text-3xl font-bold text-primary">346</div>
<div class="text-gray-600 mt-2">مصدر إخباري</div>
<i data-feather="globe" class="w-8 h-8 mx-auto mt-4 text-secondary"></i>
</div>
<div class="bg-light p-6 rounded-xl shadow-sm">
<div class="text-3xl font-bold text-primary">83%</div>
<div class="text-gray-600 mt-2">أخبار إيجابية</div>
<i data-feather="thumbs-up" class="w-8 h-8 mx-auto mt-4 text-secondary"></i>
</div>
<div class="bg-light p-6 rounded-xl shadow-sm">
<div class="text-3xl font-bold text-primary">42</div>
<div class="text-gray-600 mt-2">بلد مغطى</div>
<i data-feather="map" class="w-8 h-8 mx-auto mt-4 text-secondary"></i>
</div>
</div>
</div>
</section>

<!-- Dashboard Preview -->
<section id="dashboard" class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center text-dark mb-12">لوحة التحكم التفاعلية</h2>
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="p-4 bg-primary text-white flex justify-between items-center">
<h3 class="text-xl font-medium">نظرة عامة على التغطية الإخبارية</h3>
<div class="flex space-x-2 space-x-reverse">
<button class="p-1 rounded hover:bg-white/10">
<i data-feather="refresh-cw" class="w-4 h-4"></i>
</button>
<button class="p-1 rounded hover:bg-white/10">
<i data-feather="settings" class="w-4 h-4"></i>
</button>
</div>
</div>
<div class="p-6">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2">
<canvas id="trendChart" height="300"></canvas>
</div>
<div>
<canvas id="sentimentChart" height="300"></canvas>
</div>
</div>
<div class="mt-6">
<canvas id="worldMap" height="400"></canvas>
</div>
</div>
</div>
</div>
</section>

<!-- Sentiment Analysis -->
<section id="sentiment" class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center text-dark mb-12">تحليل الانطباع الإعلامي</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-semibold text-primary mb-4">أحدث الأخبار المحللة</h3>
<div class="space-y-4">
<div class="news-card bg-light p-4 rounded-lg transition duration-300 cursor-pointer">
<div class="flex justify-between items-start">
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">إيجابي 87%</span>
<span class="text-gray-500 text-sm">منذ 15 دقيقة</span>
</div>
<h4 class="font-medium mt-2">رؤية 2030 تحقق قفزة نوعية في الاستثمارات الأجنبية</h4>
<p class="text-gray-600 text-sm mt-1 line-clamp-2">ذكرت وكالة بلومبيرج أن المملكة العربية ال�

Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +618 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Saudipulse Radar Globe
3
- emoji: 💻
4
- colorFrom: purple
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: SaudiPulse Radar Globe
3
+ colorFrom: gray
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,619 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SaudiPulse | News Radar</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
13
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.17.0/d3.min.js"></script>
14
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script>
15
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.9/datamaps.world.min.js"></script>
16
+ <script>
17
+ tailwind.config = {
18
+ theme: {
19
+ extend: {
20
+ colors: {
21
+ primary: '#245953',
22
+ secondary: '#408E91',
23
+ accent: '#E49393',
24
+ dark: '#1B1A17',
25
+ light: '#F8F5F1'
26
+ },
27
+ fontFamily: {
28
+ arabic: ['Tajawal', 'sans-serif'],
29
+ english: ['Poppins', 'sans-serif']
30
+ }
31
+ }
32
+ }
33
+ }
34
+ </script>
35
+ <style>
36
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Tajawal:wght@400;500;700&display=swap');
37
+
38
+ body {
39
+ font-family: 'Tajawal', 'Poppins', sans-serif;
40
+ }
41
+
42
+ .gradient-bg {
43
+ background: linear-gradient(135deg, #245953 0%, #408E91 50%, #E49393 100%);
44
+ }
45
+
46
+ .news-card:hover {
47
+ transform: translateY(-5px);
48
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
49
+ }
50
+
51
+ .rtl {
52
+ direction: rtl;
53
+ }
54
+ </style>
55
+ </head>
56
+ <body class="bg-gray-50 rtl">
57
+ <!-- Vanta.js Globe Background -->
58
+ <div id="vanta-globe" class="fixed top-0 left-0 w-full h-full z-0"></div>
59
+
60
+ <!-- Main Content -->
61
+ <div class="relative z-10 min-h-screen flex flex-col">
62
+ <!-- Navigation -->
63
+ <nav class="bg-white/90 backdrop-blur-md shadow-sm">
64
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
65
+ <div class="flex justify-between h-16">
66
+ <div class="flex items-center">
67
+ <div class="flex-shrink-0 flex items-center">
68
+ <i data-feather="globe" class="text-primary h-8 w-8"></i>
69
+ <span class="ml-2 text-xl font-bold text-primary">SaudiPulse</span>
70
+ </div>
71
+ </div>
72
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-4 space-x-reverse">
73
+ <a href="#" class="text-primary px-3 py-2 rounded-md text-sm font-medium border-b-2 border-primary">الرئيسية</a>
74
+ <a href="#dashboard" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">لوحة التحكم</a>
75
+ <a href="#sentiment" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">تحليل المشاعر</a>
76
+ <a href="#alerts" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">التنبيهات</a>
77
+ <button class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-opacity-90 transition duration-200">
78
+ <i data-feather="user" class="w-4 h-4 inline mr-1"></i> تسجيل الدخول
79
+ </button>
80
+ </div>
81
+ <div class="-mr-2 flex items-center md:hidden">
82
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-primary focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
83
+ <i data-feather="menu"></i>
84
+ </button>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </nav>
89
+
90
+ <!-- Hero Section -->
91
+ <header class="gradient-bg text-white py-20">
92
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
93
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">رادار الأخبار السعودية حول العالم</h1>
94
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">نظام ذكي لرصد وتحليل الانطباع الإعلامي عن المملكة العربية السعودية في الوقت الفعلي</p>
95
+ <div class="flex justify-center space-x-4 space-x-reverse">
96
+ <button class="bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition duration-200 flex items-center">
97
+ <i data-feather="play-circle" class="w-5 h-5 ml-2"></i> عرض العرض التوضيحي
98
+ </button>
99
+ <button class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition duration-200 flex items-center">
100
+ <i data-feather="info" class="w-5 h-5 ml-2"></i> المزيد عن النظام
101
+ </button>
102
+ </div>
103
+ </div>
104
+ </header>
105
+
106
+ <!-- Stats Section -->
107
+ <section class="py-12 bg-white">
108
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
109
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 text-center">
110
+ <div class="bg-light p-6 rounded-xl shadow-sm">
111
+ <div class="text-3xl font-bold text-primary">12,457</div>
112
+ <div class="text-gray-600 mt-2">خبر تم تحليله</div>
113
+ <i data-feather="file-text" class="w-8 h-8 mx-auto mt-4 text-secondary"></i>
114
+ </div>
115
+ <div class="bg-light p-6 rounded-xl shadow-sm">
116
+ <div class="text-3xl font-bold text-primary">346</div>
117
+ <div class="text-gray-600 mt-2">مصدر إخباري</div>
118
+ <i data-feather="globe" class="w-8 h-8 mx-auto mt-4 text-secondary"></i>
119
+ </div>
120
+ <div class="bg-light p-6 rounded-xl shadow-sm">
121
+ <div class="text-3xl font-bold text-primary">83%</div>
122
+ <div class="text-gray-600 mt-2">أخبار إيجابية</div>
123
+ <i data-feather="thumbs-up" class="w-8 h-8 mx-auto mt-4 text-secondary"></i>
124
+ </div>
125
+ <div class="bg-light p-6 rounded-xl shadow-sm">
126
+ <div class="text-3xl font-bold text-primary">42</div>
127
+ <div class="text-gray-600 mt-2">بلد مغطى</div>
128
+ <i data-feather="map" class="w-8 h-8 mx-auto mt-4 text-secondary"></i>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </section>
133
+
134
+ <!-- Dashboard Preview -->
135
+ <section id="dashboard" class="py-16 bg-gray-50">
136
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
137
+ <h2 class="text-3xl font-bold text-center text-dark mb-12">لوحة التحكم التفاعلية</h2>
138
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
139
+ <div class="p-4 bg-primary text-white flex justify-between items-center">
140
+ <h3 class="text-xl font-medium">نظرة عامة على التغطية الإخبارية</h3>
141
+ <div class="flex space-x-2 space-x-reverse">
142
+ <button class="p-1 rounded hover:bg-white/10">
143
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
144
+ </button>
145
+ <button class="p-1 rounded hover:bg-white/10">
146
+ <i data-feather="settings" class="w-4 h-4"></i>
147
+ </button>
148
+ </div>
149
+ </div>
150
+ <div class="p-6">
151
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
152
+ <div class="lg:col-span-2">
153
+ <canvas id="trendChart" height="300"></canvas>
154
+ </div>
155
+ <div>
156
+ <canvas id="sentimentChart" height="300"></canvas>
157
+ </div>
158
+ </div>
159
+ <div class="mt-6 relative">
160
+ <div class="h-[400px] w-full rounded-lg overflow-hidden">
161
+ <div id="worldMap" class="h-full w-full"></div>
162
+ </div>
163
+ <div class="absolute top-4 left-4 z-10 bg-white/80 backdrop-blur-sm p-2 rounded-lg shadow-sm">
164
+ <div class="flex items-center space-x-2 space-x-reverse">
165
+ <span class="w-3 h-3 rounded-full bg-green-500"></span>
166
+ <span class="text-sm">إيجابي</span>
167
+ <span class="w-3 h-3 rounded-full bg-red-500 ml-2"></span>
168
+ <span class="text-sm">سلبي</span>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- Sentiment Analysis -->
178
+ <section id="sentiment" class="py-16 bg-white">
179
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
180
+ <h2 class="text-3xl font-bold text-center text-dark mb-12">تحليل الانطباع الإعلامي</h2>
181
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
182
+ <div>
183
+ <h3 class="text-xl font-semibold text-primary mb-4">أحدث الأخبار المحللة</h3>
184
+ <div class="space-y-4">
185
+ <div class="news-card bg-light p-4 rounded-lg transition duration-300 cursor-pointer">
186
+ <div class="flex justify-between items-start">
187
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">إيجابي 87%</span>
188
+ <span class="text-gray-500 text-sm">منذ 15 دقيقة</span>
189
+ </div>
190
+ <h4 class="font-medium mt-2">رؤية 2030 تحقق قفزة نوعية في الاستثمارات الأجنبية</h4>
191
+ <p class="text-gray-600 text-sm mt-1 line-clamp-2">ذكرت وكالة بلومبيرج أن المملكة العربية السعودية شهدت زيادة بنسبة 35% في الاستثمارات الأجنبية المباشرة خلال الربع الأول من 2023...</p>
192
+ <div class="flex items-center mt-3 text-sm text-gray-500">
193
+ <i data-feather="globe" class="w-4 h-4 mr-1"></i>
194
+ <span>Bloomberg</span>
195
+ </div>
196
+ </div>
197
+ <div class="news-card bg-light p-4 rounded-lg transition duration-300 cursor-pointer">
198
+ <div class="flex justify-between items-start">
199
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">سلبي 65%</span>
200
+ <span class="text-gray-500 text-sm">منذ 42 دقيقة</span>
201
+ </div>
202
+ <h4 class="font-medium mt-2">تقرير: انتقادات دولية لسياسة السعودية في اليمن</h4>
203
+ <p class="text-gray-600 text-sm mt-1 line-clamp-2">أصدرت منظمة العفو الدولية تقريراً تنتقد فيه التدخل السعودي في اليمن معتبرة أن العمليات العسكرية تسببت في أضرار...</p>
204
+ <div class="flex items-center mt-3 text-sm text-gray-500">
205
+ <i data-feather="globe" class="w-4 h-4 mr-1"></i>
206
+ <span>Amnesty International</span>
207
+ </div>
208
+ </div>
209
+ <div class="news-card bg-light p-4 rounded-lg transition duration-300 cursor-pointer">
210
+ <div class="flex justify-between items-start">
211
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">محايد 92%</span>
212
+ <span class="text-gray-500 text-sm">منذ ساعة</span>
213
+ </div>
214
+ <h4 class="font-medium mt-2">وزير الطاقة السعودي يعلن عن تثبيت إنتاج النفط</h4>
215
+ <p class="text-gray-600 text-sm mt-1 line-clamp-2">صرح وزير الطاقة السعودي الأمير عبدالعزيز بن سلمان أن المملكة ستثبت إنتاجها النفطي عند 10 ملايين برميل يومياً خلال...</p>
216
+ <div class="flex items-center mt-3 text-sm text-gray-500">
217
+ <i data-feather="globe" class="w-4 h-4 mr-1"></i>
218
+ <span>Reuters</span>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ <div>
224
+ <h3 class="text-xl font-semibold text-primary mb-4">الكلمات المفتاحية الأكثر تداولاً</h3>
225
+ <div class="bg-light p-6 rounded-lg h-full">
226
+ <div class="flex flex-wrap gap-2 justify-center">
227
+ <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">رؤية 2030</span>
228
+ <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">NEOM</span>
229
+ <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">الرياض</span>
230
+ <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">النفط</span>
231
+ <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">اليمن</span>
232
+ <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">MBS</span>
233
+ <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">الحج</span>
234
+ <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">الاستثمار</span>
235
+ <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">الطاقة</span>
236
+ <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">السياحة</span>
237
+ </div>
238
+ <div class="mt-8">
239
+ <h4 class="font-medium text-gray-700 mb-3">توزيع المشاعر حسب المصدر</h4>
240
+ <div class="space-y-3">
241
+ <div>
242
+ <div class="flex justify-between text-sm mb-1">
243
+ <span>وكالات الأنباء العالمية</span>
244
+ <span>72% إيجابي</span>
245
+ </div>
246
+ <div class="w-full bg-gray-200 rounded-full h-2">
247
+ <div class="bg-green-500 h-2 rounded-full" style="width: 72%"></div>
248
+ </div>
249
+ </div>
250
+ <div>
251
+ <div class="flex justify-between text-sm mb-1">
252
+ <span>وسائل التواصل الاجتماعي</span>
253
+ <span>58% إيجابي</span>
254
+ </div>
255
+ <div class="w-full bg-gray-200 rounded-full h-2">
256
+ <div class="bg-green-500 h-2 rounded-full" style="width: 58%"></div>
257
+ </div>
258
+ </div>
259
+ <div>
260
+ <div class="flex justify-between text-sm mb-1">
261
+ <span>المواقع الإقليمية</span>
262
+ <span>65% إيجابي</span>
263
+ </div>
264
+ <div class="w-full bg-gray-200 rounded-full h-2">
265
+ <div class="bg-green-500 h-2 rounded-full" style="width: 65%"></div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </section>
275
+
276
+ <!-- Real-time Alerts -->
277
+ <section id="alerts" class="py-16 bg-gray-50">
278
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
279
+ <h2 class="text-3xl font-bold text-center text-dark mb-12">نظام التنبيهات الفورية</h2>
280
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
281
+ <div>
282
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
283
+ <div class="p-4 bg-accent text-white flex justify-between items-center">
284
+ <h3 class="text-xl font-medium">أحدث التنبيهات</h3>
285
+ <button class="p-1 rounded hover:bg-white/10">
286
+ <i data-feather="bell" class="w-5 h-5"></i>
287
+ </button>
288
+ </div>
289
+ <div class="p-4 divide-y divide-gray-200">
290
+ <div class="py-3">
291
+ <div class="flex items-start">
292
+ <div class="flex-shrink-0 bg-red-100 p-2 rounded-full">
293
+ <i data-feather="alert-triangle" class="w-5 h-5 text-red-600"></i>
294
+ </div>
295
+ <div class="mr-3">
296
+ <p class="font-medium">ار��فاع مفاجئ في الأخبار السلبية</p>
297
+ <p class="text-sm text-gray-600 mt-1">زيادة بنسبة 32% في الأخبار السلبية عن المملكة خلال الساعتين الماضيتين</p>
298
+ <p class="text-xs text-gray-500 mt-1">منذ 15 دقيقة</p>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ <div class="py-3">
303
+ <div class="flex items-start">
304
+ <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full">
305
+ <i data-feather="trending-up" class="w-5 h-5 text-blue-600"></i>
306
+ </div>
307
+ <div class="mr-3">
308
+ <p class="font-medium">ازدياد الحديث عن NEOM</p>
309
+ <p class="text-sm text-gray-600 mt-1">ذكر اسم NEOM في 47 خبر خلال 24 ساعة الماضية</p>
310
+ <p class="text-xs text-gray-500 mt-1">منذ ساعتين</p>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ <div class="py-3">
315
+ <div class="flex items-start">
316
+ <div class="flex-shrink-0 bg-yellow-100 p-2 rounded-full">
317
+ <i data-feather="user" class="w-5 h-5 text-yellow-600"></i>
318
+ </div>
319
+ <div class="mr-3">
320
+ <p class="font-medium">تركيز على شخصية الأمير محمد بن سلمان</p>
321
+ <p class="text-sm text-gray-600 mt-1">ذكر اسم الأمير محمد بن سلمان في 12 خبر خلال الساعة الماضية</p>
322
+ <p class="text-xs text-gray-500 mt-1">منذ 3 ساعات</p>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ <div>
330
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden h-full">
331
+ <div class="p-4 bg-primary text-white flex justify-between items-center">
332
+ <h3 class="text-xl font-medium">إعدادات التنبيهات</h3>
333
+ <button class="p-1 rounded hover:bg-white/10">
334
+ <i data-feather="settings" class="w-5 h-5"></i>
335
+ </button>
336
+ </div>
337
+ <div class="p-6">
338
+ <div class="space-y-4">
339
+ <div class="flex items-center justify-between">
340
+ <div>
341
+ <p class="font-medium">تنبيهات البريد الإلكتروني</p>
342
+ <p class="text-sm text-gray-600">إرسال تنبيهات عبر البريد عند حدوث تغييرات مهمة</p>
343
+ </div>
344
+ <label class="relative inline-flex items-center cursor-pointer">
345
+ <input type="checkbox" class="sr-only peer" checked>
346
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
347
+ </label>
348
+ </div>
349
+ <div class="flex items-center justify-between">
350
+ <div>
351
+ <p class="font-medium">تنبيهات الهاتف</p>
352
+ <p class="text-sm text-gray-600">إرسال إشعارات إلى تطبيق الجوال</p>
353
+ </div>
354
+ <label class="relative inline-flex items-center cursor-pointer">
355
+ <input type="checkbox" class="sr-only peer" checked>
356
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
357
+ </label>
358
+ </div>
359
+ <div class="pt-4 border-t border-gray-200">
360
+ <label class="block text-sm font-medium text-gray-700 mb-2">عتبة التنبيه للزيادة المفاجئة</label>
361
+ <input type="range" min="0" max="100" value="30" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
362
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
363
+ <span>0%</span>
364
+ <span>30%</span>
365
+ <span>100%</span>
366
+ </div>
367
+ </div>
368
+ <button class="w-full bg-primary text-white py-2 rounded-lg font-medium hover:bg-opacity-90 transition duration-200 mt-4">
369
+ حفظ الإعدادات
370
+ </button>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </section>
378
+
379
+ <!-- CTA Section -->
380
+ <section class="gradient-bg text-white py-16">
381
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
382
+ <h2 class="text-3xl font-bold mb-6">جاهز لبدء مراقبة التغطية الإعلامية؟</h2>
383
+ <p class="text-xl mb-8 max-w-3xl mx-auto">سجل الآن واحصل على نسخة تجريبية مجانية لمدة 14 يومًا من نظام SaudiPulse</p>
384
+ <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4 space-x-reverse max-w-md mx-auto">
385
+ <input type="email" placeholder="بريدك الإلكتروني" class="px-4 py-3 rounded-lg flex-grow bg-white/20 placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white">
386
+ <button class="bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition duration-200">
387
+ بدء التجربة المجانية
388
+ </button>
389
+ </div>
390
+ </div>
391
+ </section>
392
+
393
+ <!-- Footer -->
394
+ <footer class="bg-dark text-white py-12">
395
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
396
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
397
+ <div>
398
+ <h3 class="text-lg font-semibold mb-4">SaudiPulse</h3>
399
+ <p class="text-gray-400">نظام ذكي لرصد وتحليل الانطباع الإعلامي عن المملكة العربية السعودية في الوقت الفعلي</p>
400
+ <div class="flex space-x-4 space-x-reverse mt-4">
401
+ <a href="#" class="text-gray-400 hover:text-white">
402
+ <i data-feather="twitter"></i>
403
+ </a>
404
+ <a href="#" class="text-gray-400 hover:text-white">
405
+ <i data-feather="linkedin"></i>
406
+ </a>
407
+ <a href="#" class="text-gray-400 hover:text-white">
408
+ <i data-feather="facebook"></i>
409
+ </a>
410
+ </div>
411
+ </div>
412
+ <div>
413
+ <h3 class="text-lg font-semibold mb-4">روابط سريعة</h3>
414
+ <ul class="space-y-2">
415
+ <li><a href="#" class="text-gray-400 hover:text-white">الرئيسية</a></li>
416
+ <li><a href="#dashboard" class="text-gray-400 hover:text-white">لوحة التحكم</a></li>
417
+ <li><a href="#sentiment" class="text-gray-400 hover:text-white">تحليل المشاعر</a></li>
418
+ <li><a href="#alerts" class="text-gray-400 hover:text-white">التنبيهات</a></li>
419
+ </ul>
420
+ </div>
421
+ <div>
422
+ <h3 class="text-lg font-semibold mb-4">المصادر</h3>
423
+ <ul class="space-y-2">
424
+ <li><a href="#" class="text-gray-400 hover:text-white">Reuters</a></li>
425
+ <li><a href="#" class="text-gray-400 hover:text-white">Bloomberg</a></li>
426
+ <li><a href="#" class="text-gray-400 hover:text-white">SPA</a></li>
427
+ <li><a href="#" class="text-gray-400 hover:text-white">Al Arabiya</a></li>
428
+ </ul>
429
+ </div>
430
+ <div>
431
+ <h3 class="text-lg font-semibold mb-4">اتصل بنا</h3>
432
+ <ul class="space-y-2">
433
+ <li class="flex items-center text-gray-400">
434
+ <i data-feather="mail" class="w-4 h-4 ml-2"></i>
435
+ <span>info@saudipulse.com</span>
436
+ </li>
437
+ <li class="flex items-center text-gray-400">
438
+ <i data-feather="phone" class="w-4 h-4 ml-2"></i>
439
+ <span>+966 12 345 6789</span>
440
+ </li>
441
+ <li class="flex items-center text-gray-400">
442
+ <i data-feather="map-pin" class="w-4 h-4 ml-2"></i>
443
+ <span>الرياض، المملكة العربية السعودية</span>
444
+ </li>
445
+ </ul>
446
+ </div>
447
+ </div>
448
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm">
449
+ <p>© 2023 SaudiPulse. جميع الحقوق محفوظة.</p>
450
+ </div>
451
+ </div>
452
+ </footer>
453
+ </div>
454
+
455
+ <script>
456
+ // Initialize Vanta.js globe
457
+ VANTA.GLOBE({
458
+ el: "#vanta-globe",
459
+ mouseControls: true,
460
+ touchControls: true,
461
+ gyroControls: false,
462
+ minHeight: 200.00,
463
+ minWidth: 200.00,
464
+ scale: 1.00,
465
+ scaleMobile: 1.00,
466
+ color: 0x245953,
467
+ backgroundColor: 0xf8f5f1,
468
+ size: 1.00
469
+ });
470
+
471
+ // Initialize charts
472
+ document.addEventListener('DOMContentLoaded', function() {
473
+ // Trend Chart
474
+ const trendCtx = document.getElementById('trendChart').getContext('2d');
475
+ const trendChart = new Chart(trendCtx, {
476
+ type: 'line',
477
+ data: {
478
+ labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو'],
479
+ datasets: [
480
+ {
481
+ label: 'أخبار إيجابية',
482
+ data: [320, 450, 380, 520, 610, 730],
483
+ borderColor: '#408E91',
484
+ backgroundColor: 'rgba(64, 142, 145, 0.1)',
485
+ tension: 0.3,
486
+ fill: true
487
+ },
488
+ {
489
+ label: 'أخبار سلبية',
490
+ data: [80, 120, 95, 110, 140, 160],
491
+ borderColor: '#E49393',
492
+ backgroundColor: 'rgba(228, 147, 147, 0.1)',
493
+ tension: 0.3,
494
+ fill: true
495
+ }
496
+ ]
497
+ },
498
+ options: {
499
+ responsive: true,
500
+ plugins: {
501
+ legend: {
502
+ position: 'top',
503
+ rtl: true
504
+ },
505
+ title: {
506
+ display: true,
507
+ text: 'اتجاهات الأخبار الشهرية',
508
+ font: {
509
+ size: 16
510
+ }
511
+ }
512
+ },
513
+ scales: {
514
+ y: {
515
+ beginAtZero: true
516
+ }
517
+ }
518
+ }
519
+ });
520
+
521
+ // Sentiment Chart
522
+ const sentimentCtx = document.getElementById('sentimentChart').getContext('2d');
523
+ const sentimentChart = new Chart(sentimentCtx, {
524
+ type: 'doughnut',
525
+ data: {
526
+ labels: ['إيجابي', 'سلبي', 'محايد'],
527
+ datasets: [{
528
+ data: [72, 15, 13],
529
+ backgroundColor: [
530
+ '#408E91',
531
+ '#E49393',
532
+ '#F8B195'
533
+ ],
534
+ borderWidth: 1
535
+ }]
536
+ },
537
+ options: {
538
+ responsive: true,
539
+ plugins: {
540
+ legend: {
541
+ position: 'right',
542
+ rtl: true
543
+ },
544
+ title: {
545
+ display: true,
546
+ text: 'توزيع المشاعر',
547
+ font: {
548
+ size: 16
549
+ }
550
+ }
551
+ }
552
+ }
553
+ });
554
+ // Initialize world map
555
+ const mapData = {
556
+ "SA": { fillKey: "positive", newsCount: 124 },
557
+ "US": { fillKey: "neutral", newsCount: 87 },
558
+ "GB": { fillKey: "positive", newsCount: 65 },
559
+ "FR": { fillKey: "neutral", newsCount: 42 },
560
+ "DE": { fillKey: "positive", newsCount: 38 },
561
+ "CN": { fillKey: "negative", newsCount: 56 },
562
+ "IN": { fillKey: "positive", newsCount: 29 },
563
+ "JP": { fillKey: "neutral", newsCount: 21 }
564
+ };
565
+
566
+ const map = new Datamap({
567
+ element: document.getElementById('worldMap'),
568
+ responsive: true,
569
+ geographyConfig: {
570
+ highlightOnHover: false,
571
+ popupOnHover: true,
572
+ borderColor: '#408E91',
573
+ borderWidth: 0.5,
574
+ highlightBorderWidth: 1,
575
+ highlightBorderColor: '#245953',
576
+ highlightFillColor: '#E49393',
577
+ popupTemplate: function(geo, data) {
578
+ if (!data) return;
579
+ const sentiment = {
580
+ positive: 'إيجابي',
581
+ neutral: 'محايد',
582
+ negative: 'سلبي'
583
+ }[data.fillKey];
584
+
585
+ return `<div class="p-2 text-sm">
586
+ <div class="font-bold">${geo.properties.name}</div>
587
+ <div>عدد الأخبار: ${data.newsCount}</div>
588
+ <div>الانطباع: ${sentiment}</div>
589
+ </div>`;
590
+ }
591
+ },
592
+ fills: {
593
+ positive: '#408E91',
594
+ neutral: '#F8B195',
595
+ negative: '#E49393',
596
+ defaultFill: '#F8F5F1'
597
+ },
598
+ data: mapData,
599
+ setProjection: function(element) {
600
+ const projection = d3.geo.equirectangular()
601
+ .center([50, 20])
602
+ .rotate([-10, 0])
603
+ .scale(600)
604
+ .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
605
+ const path = d3.geo.path().projection(projection);
606
+ return { path: path, projection: projection };
607
+ }
608
+ });
609
+
610
+ window.addEventListener('resize', function() {
611
+ map.resize();
612
+ });
613
+
614
+ // Feather Icons
615
+ feather.replace();
616
+ });
617
+ </script>
618
+ </body>
619
  </html>