Hugging Face's logo

Spaces:
Rayan545454
/
ccccc11
Running

App Files Community
Rayan545454 commited on
Commit
a0a3a92
·
verified ·
1 Parent(s): b981be3

ابغا صفحة اول دبلوم انجليزي و دبلوم امن السبرانية و دبلوم البرمجة و دبلوم التصميم - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +375 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ccccc11
3
- emoji: 🚀
4
- colorFrom: green
5
- colorTo: indigo
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: ccccc11
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
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,376 @@
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://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
13
+ <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap" rel="stylesheet">
14
+ <style>
15
+ body {
16
+ font-family: 'Tajawal', sans-serif;
17
+ }
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
20
+ }
21
+ .glass-effect {
22
+ backdrop-filter: blur(10px);
23
+ background: rgba(255, 255, 255, 0.1);
24
+ border: 1px solid rgba(255, 255, 255, 0.2);
25
+ }
26
+ .hover-scale {
27
+ transition: transform 0.3s ease;
28
+ }
29
+ .hover-scale:hover {
30
+ transform: translateY(-5px);
31
+ }
32
+ .diploma-card {
33
+ background: linear-gradient(145deg, #ffffff, #f0f0f0);
34
+ box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff;
35
+ }
36
+ .diploma-card:hover {
37
+ box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gray-50">
42
+ <!-- Hero Section -->
43
+ <section class="relative h-screen flex items-center justify-center overflow-hidden">
44
+ <div id="vanta-bg" class="absolute inset-0"></div>
45
+ <div class="relative z-10 text-center text-white px-4">
46
+ <h1 class="text-5xl md:text-7xl font-bold mb-6" data-aos="fade-up">
47
+ الأكاديمية التقنية
48
+ </h1>
49
+ <p class="text-xl md:text-2xl mb-8" data-aos="fade-up" data-aos-delay="200">
50
+ دبلومات مهنية في أحدث مجالات التكنولوجيا
51
+ </p>
52
+ <button onclick="scrollToDiplomas()"
53
+ class="bg-white text-purple-600 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition duration-300">
54
+ اكتشف برامجنا
55
+ </button>
56
+ </div>
57
+ </section>
58
+
59
+ <!-- Navigation -->
60
+ <nav class="fixed top-0 w-full z-50 glass-effect" id="navbar">
61
+ <div class="container mx-auto px-4 py-4">
62
+ <div class="flex justify-between items-center">
63
+ <div class="text-white font-bold text-xl">الأكاديمية التقنية</div>
64
+ <button class="text-white md:hidden" onclick="toggleMenu()">
65
+ <i data-feather="menu"></i>
66
+ </button>
67
+ <div class="hidden md:flex space-x-8 space-x-reverse">
68
+ <a href="#diplomas" class="text-white hover:text-gray-300">الدبلومات</a>
69
+ <a href="#features" class="text-white hover:text-gray-300">المميزات</a>
70
+ <a href="#contact" class="text-white hover:text-gray-300">تواصل معنا</a>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </nav>
75
+
76
+ <!-- Diplomas Section -->
77
+ <section id="diplomas" class="py-20 bg-gray-50">
78
+ <div class="container mx-auto px-4">
79
+ <h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">
80
+ برامج الدبلومات المهنية
81
+ </h2>
82
+
83
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
84
+ <!-- English Diploma -->
85
+ <div class="diploma-card rounded-2xl p-8 hover-scale" data-aos="fade-up" data-aos-delay="100">
86
+ <div class="text-center mb-6">
87
+ <div class="w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
88
+ <i data-feather="book-open" class="text-white w-10 h-10"></i>
89
+ </div>
90
+ <h3 class="text-2xl font-bold text-gray-800">دبلوم اللغة الإنجليزية المهنية</h3>
91
+ </div>
92
+ <ul class="text-gray-600 space-y-2 mb-6">
93
+ <li>• تطوير المهارات اللغوية الشاملة</li>
94
+ <li>• التركيز على اللغة التجارية والمهنية</li>
95
+ <li>• إعداد لاختبارات IELTS وTOEFL</li>
96
+ <li>• 6 مستويات تدريبية متقدمة</li>
97
+ </ul>
98
+ <div class="flex justify-between items-center">
99
+ <span class="text-2xl font-bold text-blue-600">6 أشهر</span>
100
+ <button onclick="showDetails('english')"
101
+ class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition">
102
+ التفاصيل
103
+ </button>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Cybersecurity Diploma -->
108
+ <div class="diploma-card rounded-2xl p-8 hover-scale" data-aos="fade-up" data-aos-delay="200">
109
+ <div class="text-center mb-6">
110
+ <div class="w-20 h-20 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
111
+ <i data-feather="shield" class="text-white w-10 h-10"></i>
112
+ </div>
113
+ <h3 class="text-2xl font-bold text-gray-800">دبلوم أمن السبرانية</h3>
114
+ </div>
115
+ <ul class="text-gray-600 space-y-2 mb-6">
116
+ <li>• أساسيات الأمن السيبراني</li>
117
+ <li>• اختبار الاختراق والتحقيق الجنائي الرقمي</li>
118
+ <li>• إدارة المخاطر والامتثال</li>
119
+ <li>• شهادات CEH وSecurity+</li>
120
+ </ul>
121
+ <div class="flex justify-between items-center">
122
+ <span class="text-2xl font-bold text-red-600">9 أشهر</span>
123
+ <button onclick="showDetails('cyber')"
124
+ class="bg-red-600 text-white px-6 py-2 rounded-full hover:bg-red-700 transition">
125
+ التفاصيل
126
+ </button>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Programming Diploma -->
131
+ <div class="diploma-card rounded-2xl p-8 hover-scale" data-aos="fade-up" data-aos-delay="300">
132
+ <div class="text-center mb-6">
133
+ <div class="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
134
+ <i data-feather="code" class="text-white w-10 h-10"></i>
135
+ </div>
136
+ <h3 class="text-2xl font-bold text-gray-800">دبلوم البرمجة وتطوير البرمجيات</h3>
137
+ </div>
138
+ <ul class="text-gray-600 space-y-2 mb-6">
139
+ <li>• تطوير الويب والتطبيقات</li>
140
+ <li>• Python وJavaScript وJava</li>
141
+ <li>• قواعد البيانات والـ APIs</li>
142
+ <li>• مشروع تخرج واقعي</li>
143
+ </ul>
144
+ <div class="flex justify-between items-center">
145
+ <span class="text-2xl font-bold text-green-600">12 شهر</span>
146
+ <button onclick="showDetails('programming')"
147
+ class="bg-green-600 text-white px-6 py-2 rounded-full hover:bg-green-700 transition">
148
+ التفاصيل
149
+ </button>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Design Diploma -->
154
+ <div class="diploma-card rounded-2xl p-8 hover-scale" data-aos="fade-up" data-aos-delay="400">
155
+ <div class="text-center mb-6">
156
+ <div class="w-20 h-20 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
157
+ <i data-feather="pen-tool" class="text-white w-10 h-10"></i>
158
+ </div>
159
+ <h3 class="text-2xl font-bold text-gray-800">دبلوم التصميم الجرافيكي</h3>
160
+ </div>
161
+ <ul class="text-gray-600 space-y-2 mb-6">
162
+ <li>• تصميم UI/UX للويب والموبايل</li>
163
+ <li>• Adobe Creative Suite كاملاً</li>
164
+ <li>• التصميم ثلاثي الأبعاد</li>
165
+ <li>• بناء ملف أعمال احترافي</li>
166
+ </ul>
167
+ <div class="flex justify-between items-center">
168
+ <span class="text-2xl font-bold text-purple-600">8 أشهر</span>
169
+ <button onclick="showDetails('design')"
170
+ class="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition">
171
+ التفاصيل
172
+ </button>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- Features Section -->
180
+ <section id="features" class="py-20 bg-white">
181
+ <div class="container mx-auto px-4">
182
+ <h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">
183
+ لماذا تختار الأكاديمية التقنية؟
184
+ </h2>
185
+
186
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
187
+ <div class="text-center" data-aos="fade-up" data-aos-delay="100">
188
+ <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
189
+ <i data-feather="award" class="text-white w-8 h-8"></i>
190
+ </div>
191
+ <h3 class="text-xl font-bold mb-2">شهادات معتمدة</h3>
192
+ <p class="text-gray-600">شهادات معتمدة دولياً من كبرى الجهات التعليمية</p>
193
+ </div>
194
+
195
+ <div class="text-center" data-aos="fade-up" data-aos-delay="200">
196
+ <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
197
+ <i data-feather="users" class="text-white w-8 h-8"></i>
198
+ </div>
199
+ <h3 class="text-xl font-bold mb-2">مدربون محترفون</h3>
200
+ <p class="text-gray-600">خبراء في مجالاتهم مع خبرة عملية واسعة</p>
201
+ </div>
202
+
203
+ <div class="text-center" data-aos="fade-up" data-aos-delay="300">
204
+ <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
205
+ <i data-feather="briefcase" class="text-white w-8 h-8"></i>
206
+ </div>
207
+ <h3 class="text-xl font-bold mb-2">فرص عمل مضمونة</h3>
208
+ <p class="text-gray-600">شراكات مع كبرى الشركات لضمان التوظيف</p>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- Contact Section -->
215
+ <section id="contact" class="py-20 gradient-bg">
216
+ <div class="container mx-auto px-4 text-center text-white">
217
+ <h2 class="text-4xl font-bold mb-8" data-aos="fade-up">
218
+ تواصل معنا
219
+ </h2>
220
+ <p class="text-xl mb-8" data-aos="fade-up" data-aos-delay="200">
221
+ هل لديك أسئلة؟ فريقنا جاهز للمساعدة
222
+ </p>
223
+ <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-8 md:space-x-reverse">
224
+ <a href="tel:+966500000000" class="flex items-center space-x-2 space-x-reverse text-xl">
225
+ <i data-feather="phone"></i>
226
+ <span>0500000000</span>
227
+ </a>
228
+ <a href="mailto:info@academy.com" class="flex items-center space-x-2 space-x-reverse text-xl">
229
+ <i data-feather="mail"></i>
230
+ <span>info@academy.com</span>
231
+ </a>
232
+ </div>
233
+ </div>
234
+ </section>
235
+
236
+ <!-- Modal -->
237
+ <div id="detailsModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
238
+ <div class="flex items-center justify-center min-h-screen p-4">
239
+ <div class="bg-white rounded-2xl p-8 max-w-2xl w-full">
240
+ <div class="flex justify-between items-center mb-4">
241
+ <h3 id="modalTitle" class="text-2xl font-bold"></h3>
242
+ <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
243
+ <i data-feather="x" class="w-6 h-6"></i>
244
+ </button>
245
+ </div>
246
+ <div id="modalContent" class="text-gray-600"></div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <script>
252
+ // Initialize Vanta.js background
253
+ VANTA.GLOBE({
254
+ el: "#vanta-bg",
255
+ mouseControls: true,
256
+ touchControls: true,
257
+ gyroControls: false,
258
+ minHeight: 200.00,
259
+ minWidth: 200.00,
260
+ scale: 1.00,
261
+ scaleMobile: 1.00,
262
+ color: 0x3f83f8,
263
+ color2: 0x6366f1,
264
+ size: 1.00,
265
+ backgroundColor: 0x1e1b4b
266
+ });
267
+
268
+ // Scroll to diplomas
269
+ function scrollToDiplomas() {
270
+ document.getElementById('diplomas').scrollIntoView({ behavior: 'smooth' });
271
+ }
272
+
273
+ // Navbar scroll effect
274
+ window.addEventListener('scroll', function() {
275
+ const navbar = document.getElementById('navbar');
276
+ if (window.scrollY > 100) {
277
+ navbar.classList.add('bg-purple-900');
278
+ navbar.classList.remove('glass-effect');
279
+ } else {
280
+ navbar.classList.remove('bg-purple-900');
281
+ navbar.classList.add('glass-effect');
282
+ }
283
+ });
284
+
285
+ // Mobile menu toggle
286
+ function toggleMenu() {
287
+ const menu = document.querySelector('nav .hidden');
288
+ menu.classList.toggle('hidden');
289
+ }
290
+
291
+ // Show diploma details
292
+ function showDetails(type) {
293
+ const modal = document.getElementById('detailsModal');
294
+ const title = document.getElementById('modalTitle');
295
+ const content = document.getElementById('modalContent');
296
+
297
+ const details = {
298
+ english: {
299
+ title: 'دبلوم اللغة الإنجليزية المهنية',
300
+ content: `
301
+ <p class="mb-4">برنامج متكامل لتطوير مهارات اللغة الإنجليزية المهنية يشمل:</p>
302
+ <ul class="space-y-2 mb-4">
303
+ <li>• 6 مستويات تدريبية من المبتدئ إلى المتقدم</li>
304
+ <li>• 120 ساعة تدريبية لكل مستوى</li>
305
+ <li>• محاضرات تفاعلية وجلسات نقاش</li>
306
+ <li>• اختبارات شهرية وتقييم مستمر</li>
307
+ <li>• شهادة معتمدة من الجمعية البريطانية</li>
308
+ </ul>
309
+ <p class="font-bold">الرسوم: 5000 ريال للمستوى الواحد</p>
310
+ `
311
+ },
312
+ cyber: {
313
+ title: 'دبلوم أمن السبرانية',
314
+ content: `
315
+ <p class="mb-4">برنامج متخصص في مجال الأمن السيبراني يغطي:</p>
316
+ <ul class="space-y-2 mb-4">
317
+ <li>• أساسيات الأمن السيبراني والتهديدات الرقمية</li>
318
+ <li>• اختبار الاختراق والتحقيق الجنائي الرقمي</li>
319
+ <li>• إدارة الحوادث الأمنية والاستجابة</li>
320
+ <li>• التشفير وأمن الشبكات</li>
321
+ <li>• إعداد لشهادات CEH وSecurity+ وCISSP</li>
322
+ </ul>
323
+ <p class="font-bold">الرسوم: 15000 ريال للبرنامج الكامل</p>
324
+ `
325
+ },
326
+ programming: {
327
+ title: 'دبلوم البرمجة وتطوير البرمجيات',
328
+ content: `
329
+ <p class="mb-4">برنامج شامل لتطوير البرمجيات يشمل:</p>
330
+ <ul class="space-y-2 mb-4">
331
+ <li>• أساسيات البرمجة بلغات متعددة</li>
332
+ <li>• تطوير الويب Frontend وBackend</li>
333
+ <li>• تطوير تطبيقات الموبايل</li>
334
+ <li>• قواعد البيانات وإدارة البيانات</li>
335
+ <li>• مشروع تخرج واقعي مع فريق عمل</li>
336
+ </ul>
337
+ <p class="font-bold">الرسوم: 20000 ريال للبرنامج الكامل</p>
338
+ `
339
+ },
340
+ design: {
341
+ title: 'دبلوم التصميم الجرافيكي',
342
+ content: `
343
+ <p class="mb-4">برنامج احترافي في التصميم الجرافيكي يشمل:</p>
344
+ <ul class="space-y-2 mb-4">
345
+ <li>• أساسيات التصميم ومبادئ التصميم الجرافيكي</li>
346
+ <li>• Adobe Photoshop وIllustrator وInDesign</li>
347
+ <li>• تصميم UI/UX للويب والموبايل</li>
348
+ <li>• التصميم ثلاثي الأبعاد والرسوم المتحركة</li>
349
+ <li>• بناء ملف أعمال احترافي للتوظيف</li>
350
+ </ul>
351
+ <p class="font-bold">الرسوم: 12000 ريال للبرنامج الكامل</p>
352
+ `
353
+ }
354
+ };
355
+
356
+ title.textContent = details[type].title;
357
+ content.innerHTML = details[type].content;
358
+ modal.classList.remove('hidden');
359
+ }
360
+
361
+ // Close modal
362
+ function closeModal() {
363
+ document.getElementById('detailsModal').classList.add('hidden');
364
+ }
365
+
366
+ // Initialize AOS
367
+ AOS.init({
368
+ duration: 1000,
369
+ once: true
370
+ });
371
+
372
+ // Initialize Feather icons
373
+ feather.replace();
374
+ </script>
375
+ </body>
376
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ ابغا صفحة اول دبلوم انجليزي و دبلوم امن السبرانية و دبلوم البرمجة و دبلوم التصميم