Hugging Face's logo

Spaces:
Rayan545454
/
amar5555
Running

App Files Community
Rayan545454 commited on
Commit
bd2e51c
·
verified ·
1 Parent(s): 46870c5

برامج امان السبرانية بالكود كامل - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +357 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Amar5555
3
- emoji: 🐠
4
- colorFrom: blue
5
- colorTo: gray
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: amar5555
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,358 @@
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="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>برامج الأمان السبرانية - الحماية الشاملة</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
14
+ <style>
15
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');
16
+ body {
17
+ font-family: 'Tajawal', sans-serif;
18
+ }
19
+ .cyber-gradient {
20
+ background: linear-gradient(135deg, #0c0c1d 0%, #1a1a3a 50%, #0f3057 100%);
21
+ }
22
+ .cyber-card {
23
+ background: rgba(255, 255, 255, 0.05);
24
+ backdrop-filter: blur(10px);
25
+ border: 1px solid rgba(255, 255, 255, 0.1);
26
+ border-radius: 16px;
27
+ }
28
+ .glow-text {
29
+ text-shadow: 0 0 10px rgba(0, 255, 255, 0.7),
30
+ 0 0 20px rgba(0, 255, 255, 0.5),
31
+ 0 0 30px rgba(0, 255, 255, 0.3);
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-900 text-white overflow-x-hidden">
36
+ <!-- Hero Section with Vanta.js -->
37
+ <div id="vanta-bg" class="min-h-screen flex items-center justify-center cyber-gradient">
38
+ <div class="container mx-auto px-4 text-center z-10">
39
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 glow-text" data-aos="fade-down" data-aos-duration="1500">
40
+ برامج الأمان السبرانية
41
+ </h1>
42
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
43
+ حماية متقدمة وشاملة لبياناتك الرقمية ضد التهديدات الإلكترونية باستخدام أحدث التقنيات الذكية
44
+ </p>
45
+ <div class="flex flex-col sm:flex-row gap-4 justify-center" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="600">
46
+ <button class="bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105">
47
+ ابدأ التجربة المجانية
48
+ </button>
49
+ <button class="bg-transparent border-2 border-cyan-500 text-cyan-300 hover:bg-cyan-900 font-bold py-3 px-8 rounded-lg transition duration-300">
50
+ تعرف أكثر
51
+ </button>
52
+ </div>
53
+ </div>
54
+ </div>
55
+
56
+ <!-- Features Section -->
57
+ <section class="py-20 px-4">
58
+ <div class="container mx-auto">
59
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16" data-aos="fade-up">ميزاتنا المتطورة</h2>
60
+
61
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
62
+ <!-- Feature 1 -->
63
+ <div class="cyber-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="100">
64
+ <div class="text-cyan-400 mb-4">
65
+ <i data-feather="shield" class="w-12 h-12"></i>
66
+ </div>
67
+ <h3 class="text-xl font-bold mb-3">حماية من الفيروسات</h3>
68
+ <p class="text-gray-300">نظام متقدم للكشف عن الفيروسات والبرمجيات الخبيثة ومنعها من إلحاق الضرر بجهازك.</p>
69
+ </div>
70
+
71
+ <!-- Feature 2 -->
72
+ <div class="cyber-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="200">
73
+ <div class="text-cyan-400 mb-4">
74
+ <i data-feather="lock" class="w-12 h-12"></i>
75
+ </div>
76
+ <h3 class="text-xl font-bold mb-3">جدار ناري ذكي</h3>
77
+ <p class="text-gray-300">جدار ناري متطور يراقب ويسيطر على حركة المرور الشبكية الواردة والصادرة بناءً على قواعد أمان م��ددة.</p>
78
+ </div>
79
+
80
+ <!-- Feature 3 -->
81
+ <div class="cyber-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="300">
82
+ <div class="text-cyan-400 mb-4">
83
+ <i data-feather="eye" class="w-12 h-12"></i>
84
+ </div>
85
+ <h3 class="text-xl font-bold mb-3">مراقبة التهديدات</h3>
86
+ <p class="text-gray-300">نظام مراقبة مستمر لاكتشاف التهديدات الإلكترونية والاستجابة لها في الوقت الفعلي.</p>
87
+ </div>
88
+
89
+ <!-- Feature 4 -->
90
+ <div class="cyber-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="400">
91
+ <div class="text-cyan-400 mb-4">
92
+ <i data-feather="database" class="w-12 h-12"></i>
93
+ </div>
94
+ <h3 class="text-xl font-bold mb-3">نسخ احتياطي آمن</h3>
95
+ <p class="text-gray-300">خدمة نسخ احتياطي تلقائي لبياناتك في خوادم مشفرة وآمنة للحماية من الفقدان.</p>
96
+ </div>
97
+
98
+ <!-- Feature 5 -->
99
+ <div class="cyber-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="500">
100
+ <div class="text-cyan-400 mb-4">
101
+ <i data-feather="users" class="w-12 h-12"></i>
102
+ </div>
103
+ <h3 class="text-xl font-bold mb-3">حماية الخصوصية</h3>
104
+ <p class="text-gray-300">أدوات متقدمة لحماية خصوصيتك على الإنترنت ومنع التتبع غير المرغوب فيه.</p>
105
+ </div>
106
+
107
+ <!-- Feature 6 -->
108
+ <div class="cyber-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="600">
109
+ <div class="text-cyan-400 mb-4">
110
+ <i data-feather="smartphone" class="w-12 h-12"></i>
111
+ </div>
112
+ <h3 class="text-xl font-bold mb-3">حماية متعددة الأجهزة</h3>
113
+ <p class="text-gray-300">حماية شاملة لجميع أجهزتك (كمبيوتر، هاتف، لوحي) بخطة واحدة وبسيطة.</p>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- Pricing Section -->
120
+ <section class="py-20 px-4 bg-gray-800">
121
+ <div class="container mx-auto">
122
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-4" data-aos="fade-up">خطط الأسعار</h2>
123
+ <p class="text-xl text-center text-gray-300 mb-16 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
124
+ اختر الخطة التي تناسب احتياجاتك مع حماية شاملة بأسعار تنافسية
125
+ </p>
126
+
127
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
128
+ <!-- Basic Plan -->
129
+ <div class="cyber-card p-8 rounded-xl text-center" data-aos="fade-up" data-aos-delay="300">
130
+ <h3 class="text-2xl font-bold mb-4">الخطة الأساسية</h3>
131
+ <div class="text-4xl font-bold text-cyan-400 mb-6">49 ريال/شهر</div>
132
+ <ul class="space-y-4 mb-8">
133
+ <li class="flex items-center">
134
+ <i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i>
135
+ حماية من الفيروسات
136
+ </li>
137
+ <li class="flex items-center">
138
+ <i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i>
139
+ جدار ناري أساسي
140
+ </li>
141
+ <li class="flex items-center">
142
+ <i data-feather="x" class="w-5 h-5 text-red-500 ml-2"></i>
143
+ مراقبة التهديدات المتقدمة
144
+ </li>
145
+ <li class="flex items-center">
146
+ <i data-feather="x" class="w-5 h-5 text-red-500 ml-2"></i>
147
+ نسخ احتياطي
148
+ </li>
149
+ </ul>
150
+ <button class="w-full bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-lg transition duration-300">
151
+ اختر الخطة
152
+ </button>
153
+ </div>
154
+
155
+ <!-- Pro Plan -->
156
+ <div class="cyber-card p-8 rounded-xl text-center border-2 border-cyan-500 transform scale-105" data-aos="fade-up" data-aos-delay="400">
157
+ <div class="bg-cyan-900 text-cyan-200 py-1 px-4 rounded-full text-sm font-bold inline-block mb-4">
158
+ الأكثر شعبية
159
+ </div>
160
+ <h3 class="text-2xl font-bold mb-4">الخطة المتقدمة</h3>
161
+ <div class="text-4xl font-bold text-cyan-400 mb-6">89 ريال/شهر</div>
162
+ <ul class="space-y-4 mb-8">
163
+ <li class="flex items-center">
164
+ <i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i>
165
+ حماية متقدمة من الفيروسات
166
+ </li>
167
+ <li class="flex items-center">
168
+ <i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i>
169
+ جدار ناري ذكي
170
+ </li>
171
+ <li class="flex items-center">
172
+ <i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i>
173
+ مراقبة التهديدات المتقدمة
174
+ </li>
175
+ <li class="flex items-center">
176
+ <i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i>
177
+ نسخ احتياطي (50GB)
178
+ </li>
179
+ </ul>
180
+ <button class="w-full bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-3 rounded-lg transition duration-300 transform hover:scale-105">
181
+ اختر الخطة
182
+ </button>
183
+ </div>
184
+
185
+ <!-- Enterprise Plan -->
186
+ <div class="cyber-card p-8 rounded-xl text-center" data-aos="fade-up" data-aos-delay="500">
187
+ <h3 class="text-2xl font-bold mb-4">الخطة المؤسسية</h3>
188
+ <div class="text-4xl font-bold text-cyan-400 mb-6">149 ريال/شهر</div>
189
+ <ul class="space-y-4 mb-8">
190
+ <li class="flex items-center">
191
+ <i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i>
192
+ حماية شاملة من الفيروسات
193
+ </li>
194
+ <li class="flex items-center">
195
+ <i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i>
196
+ جدار ناري متقدم
197
+ </li>
198
+ <li class="flex items-center">
199
+ <i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i>
200
+ مراقبة تهديدات 24/7
201
+ </li>
202
+ <li class="flex items-center">
203
+ <i data-feather="check" class="w-5 h-5 text-green-500 ml-2"></i>
204
+ نسخ احتياطي غير محدود
205
+ </li>
206
+ </ul>
207
+ <button class="w-full bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-lg transition duration-300">
208
+ اختر الخطة
209
+ </button>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </section>
214
+
215
+ <!-- Testimonials Section -->
216
+ <section class="py-20 px-4">
217
+ <div class="container mx-auto">
218
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16" data-aos="fade-up">آراء عملائنا</h2>
219
+
220
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
221
+ <!-- Testimonial 1 -->
222
+ <div class="cyber-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="100">
223
+ <div class="flex items-center mb-4">
224
+ <div class="w-12 h-12 rounded-full bg-cyan-900 flex items-center justify-center text-cyan-400 font-bold text-xl">م</div>
225
+ <div class="mr-4">
226
+ <h4 class="font-bold">محمد السعدي</h4>
227
+ <p class="text-cyan-400 text-sm">مدير تقنية المعلومات</p>
228
+ </div>
229
+ </div>
230
+ <p class="text-gray-300">"برنامج الحماية سهل الاستخدام وفعال بشكل مذهل. وفر لشركتنا حقيقية من الهجمات الإلكترونية."</p>
231
+ </div>
232
+
233
+ <!-- Testimonial 2 -->
234
+ <div class="cyber-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="200">
235
+ <div class="flex items-center mb-4">
236
+ <div class="w-12 h-12 rounded-full bg-cyan-900 flex items-center justify-center text-cyan-400 font-bold text-xl">س</div>
237
+ <div class="mr-4">
238
+ <h4 class="font-bold">سارة العبدالله</h4>
239
+ <p class="text-cyan-400 text-sm">مصممة جرافيك</p>
240
+ </div>
241
+ </div>
242
+ <p class="text-gray-300">"كنت قلقة على بياناتي ومشاريعي المهمة، ولكن بعد استخدام هذا البرنامج أشعر بأمان تام."</p>
243
+ </div>
244
+
245
+ <!-- Testimonial 3 -->
246
+ <div class="cyber-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="300">
247
+ <div class="flex items-center mb-4">
248
+ <div class="w-12 h-12 rounded-full bg-cyan-900 flex items-center justify-center text-cyan-400 font-bold text-xl">ع</div>
249
+ <div class="mr-4">
250
+ <h4 class="font-bold">عبدالله الرشيد</h4>
251
+ <p class="text-cyan-400 text-sm">مطور ويب</p>
252
+ </div>
253
+ </div>
254
+ <p class="text-gray-300">"الحماية المتعددة الأجهزة ميزة رائعة، أستطيع حماية كل أجهزتي بخطة واحدة وبسعر معقول."</p>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </section>
259
+
260
+ <!-- CTA Section -->
261
+ <section class="py-20 px-4 cyber-gradient">
262
+ <div class="container mx-auto text-center">
263
+ <h2 class="text-3xl md:text-4xl font-bold mb-6" data-aos="fade-up">جاهز لحماية بياناتك؟</h2>
264
+ <p class="text-xl mb-10 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
265
+ انضم إلى آلاف العملاء الراضين عن حمايتنا السبرانية المتطورة
266
+ </p>
267
+ <div class="flex flex-col sm:flex-row gap-4 justify-center" data-aos="zoom-in" data-aos-delay="400">
268
+ <button class="bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105">
269
+ ابدأ الآن مجانًا
270
+ </button>
271
+ <button class="bg-transparent border-2 border-cyan-500 text-cyan-300 hover:bg-cyan-900 font-bold py-3 px-8 rounded-lg transition duration-300">
272
+ تواصل معنا
273
+ </button>
274
+ </div>
275
+ </div>
276
+ </section>
277
+
278
+ <!-- Footer -->
279
+ <footer class="py-12 px-4 bg-gray-800">
280
+ <div class="container mx-auto">
281
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
282
+ <div>
283
+ <h3 class="text-xl font-bold mb-4">برامج الأمان السبرانية</h3>
284
+ <p class="text-gray-400">نوفر حلول أمنية متكاملة لحماية بياناتك من التهديدات الإلكترونية باستخدام أحدث التقنيات.</p>
285
+ </div>
286
+
287
+ <div>
288
+ <h4 class="text-lg font-bold mb-4">الروابط السريعة</h4>
289
+ <ul class="space-y-2">
290
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">الرئيسية</a></li>
291
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">الميزات</a></li>
292
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">الأسعار</a></li>
293
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">عننا</a></li>
294
+ </ul>
295
+ </div>
296
+
297
+ <div>
298
+ <h4 class="text-lg font-bold mb-4">الدعم</h4>
299
+ <ul class="space-y-2">
300
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">الأسئلة الشائعة</a></li>
301
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">الدعم الفني</a></li>
302
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">الاتصال بنا</a></li>
303
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">الشروط والأحكام</a></li>
304
+ </ul>
305
+ </div>
306
+
307
+ <div>
308
+ <h4 class="text-lg font-bold mb-4">تابعنا</h4>
309
+ <div class="flex space-x-4">
310
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition">
311
+ <i data-feather="facebook" class="w-6 h-6"></i>
312
+ </a>
313
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition">
314
+ <i data-feather="twitter" class="w-6 h-6"></i>
315
+ </a>
316
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition">
317
+ <i data-feather="instagram" class="w-6 h-6"></i>
318
+ </a>
319
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition">
320
+ <i data-feather="linkedin" class="w-6 h-6"></i>
321
+ </a>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
327
+ <p>© 2023 برامج الأمان السبرانية. جميع الحقوق محفوظة.</p>
328
+ </div>
329
+ </div>
330
+ </footer>
331
+
332
+ <script>
333
+ // Initialize AOS
334
+ AOS.init({
335
+ duration: 1000,
336
+ once: true,
337
+ offset: 100
338
+ });
339
+
340
+ // Initialize Feather Icons
341
+ feather.replace();
342
+
343
+ // Initialize Vanta.js
344
+ VANTA.GLOBE({
345
+ el: "#vanta-bg",
346
+ mouseControls: true,
347
+ touchControls: true,
348
+ gyroControls: false,
349
+ minHeight: 200.00,
350
+ minWidth: 200.00,
351
+ scale: 1.00,
352
+ scaleMobile: 1.00,
353
+ color: 0x00ffff,
354
+ backgroundColor: 0x0c0c1d
355
+ });
356
+ </script>
357
+ </body>
358
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ برامج امان السبرانية بالكود كامل