Hugging Face's logo

Spaces:
gghjgff
/
jgvcvccv
Running

App Files Community
gghjgff commited on
Commit
fac4643
·
verified ·
1 Parent(s): 6ca0631

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +667 -379
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI Assistant - مساعد الذكاء الاصطناعي</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
@@ -11,461 +11,749 @@
11
 
12
  body {
13
  font-family: 'Tajawal', sans-serif;
14
- background-color: #f5f7fa;
 
15
  }
16
 
17
- .chat-container {
18
- height: calc(100vh - 160px);
19
  }
20
 
21
- .message-ai {
22
- background-color: #ffffff;
23
- border-radius: 18px 18px 0 18px;
24
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
25
  }
26
 
27
- .message-user {
28
- background-color: #4f46e5;
29
- color: white;
30
- border-radius: 18px 18px 18px 0;
31
  }
32
 
33
- .typing-indicator span {
34
- display: inline-block;
35
- width: 8px;
36
- height: 8px;
37
- background-color: #9ca3af;
38
- border-radius: 50%;
39
- margin-right: 4px;
40
- animation: bounce 1.5s infinite ease-in-out;
41
  }
42
 
43
- .typing-indicator span:nth-child(2) {
44
- animation-delay: 0.2s;
45
  }
46
 
47
- .typing-indicator span:nth-child(3) {
48
- animation-delay: 0.4s;
49
  }
50
 
51
- @keyframes bounce {
52
- 0%, 60%, 100% { transform: translateY(0); }
53
- 30% { transform: translateY(-5px); }
 
54
  }
55
 
56
- .gradient-bg {
57
- background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
 
58
  }
59
 
60
- .code-block {
61
- background-color: #1e293b;
62
- color: #f8fafc;
63
- border-radius: 8px;
64
- font-family: 'Courier New', Courier, monospace;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  }
66
 
67
- .pulse-animation {
68
- animation: pulse 2s infinite;
 
69
  }
70
 
71
- @keyframes pulse {
72
- 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
73
- 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
74
- 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
75
  }
76
  </style>
77
  </head>
78
- <body class="bg-gray-50">
79
  <!-- شريط التنقل العلوي -->
80
- <nav class="gradient-bg text-white shadow-lg">
81
- <div class="container mx-auto px-4 py-3 flex justify-between items-center">
82
- <div class="flex items-center space-x-2">
83
- <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center pulse-animation">
84
- <i class="fas fa-robot text-purple-600 text-xl"></i>
85
  </div>
86
- <h1 class="text-xl font-bold">AI Assistant</h1>
87
  </div>
88
- <div class="flex items-center space-x-4">
89
- <button class="px-4 py-2 bg-white text-purple-600 rounded-full font-medium hover:bg-gray-100 transition">
90
- <i class="fas fa-user mr-2"></i> تسجيل الدخول
 
 
 
 
 
 
 
 
 
91
  </button>
92
- <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition">
93
- <i class="fas fa-cog"></i>
94
  </button>
95
  </div>
96
  </div>
97
  </nav>
98
 
99
- <!-- المحتوى الرئيسي -->
100
- <div class="container mx-auto px-4 py-6">
101
- <div class="flex flex-col lg:flex-row gap-6">
102
- <!-- الشريط الجانبي -->
103
- <div class="w-full lg:w-1/4 bg-white rounded-xl shadow-md p-4">
104
- <div class="mb-6">
105
- <h2 class="text-lg font-bold text-gray-800 mb-2">محادثاتي</h2>
106
- <div class="space-y-2">
107
- <button class="w-full text-right px-3 py-2 bg-purple-50 text-purple-700 rounded-lg font-medium">
108
- تصميم موقع جديد
109
- </button>
110
- <button class="w-full text-right px-3 py-2 hover:bg-gray-100 rounded-lg transition">
111
- مساعدة في كود جافاسكريبت
112
- </button>
113
- <button class="w-full text-right px-3 py-2 hover:bg-gray-100 rounded-lg transition">
114
- أفكار لمشروع تخرج
115
- </button>
116
- </div>
 
 
 
 
 
 
 
 
117
  </div>
118
-
119
- <div class="mb-6">
120
- <h2 class="text-lg font-bold text-gray-800 mb-2">أدوات سريعة</h2>
121
- <div class="grid grid-cols-2 gap-2">
122
- <button class="px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm transition">
123
- <i class="fas fa-code mr-1"></i> مولد الأكواد
124
- </button>
125
- <button class="px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm transition">
126
- <i class="fas fa-palette mr-1"></i> مصمم الألوان
127
- </button>
128
- <button class="px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm transition">
129
- <i class="fas fa-mobile-alt mr-1"></i> معاينة الجهاز
130
- </button>
131
- <button class="px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm transition">
132
- <i class="fas fa-image mr-1"></i> مولد الصور
133
- </button>
134
- </div>
135
  </div>
136
-
137
- <div class="p-4 bg-gray-50 rounded-lg">
138
- <h3 class="font-bold text-gray-800 mb-2">المساعدة الفورية</h3>
139
- <p class="text-sm text-gray-600 mb-3">هل تحتاج مساعدة سريعة؟ جرب هذه الأسئلة الجاهزة:</p>
140
- <ul class="space-y-2 text-sm">
141
- <li class="flex items-start">
142
- <span class="text-purple-600 mr-2">•</span>
143
- <span class="hover:text-purple-600 cursor-pointer transition">كيف أصمم موقع تجارة إلكترونية؟</span>
144
- </li>
145
- <li class="flex items-start">
146
- <span class="text-purple-600 mr-2">•</span>
147
- <span class="hover:text-purple-600 cursor-pointer transition">أعطني كود لزر متحرك</span>
148
- </li>
149
- <li class="flex items-start">
150
- <span class="text-purple-600 mr-2">•</span>
151
- <span class="hover:text-purple-600 cursor-pointer transition">ما هي أفضل مكتبات CSS؟</span>
152
- </li>
153
- </ul>
154
  </div>
155
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
156
 
157
- <!-- منطقة الدردشة -->
158
- <div class="flex-1 bg-white rounded-xl shadow-md overflow-hidden">
159
- <!-- شريط عنوان المحادثة -->
160
- <div class="border-b border-gray-200 p-4 bg-gray-50">
161
- <div class="flex items-center justify-between">
162
- <div class="flex items-center space-x-2">
163
- <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
164
- <i class="fas fa-robot text-purple-600"></i>
165
- </div>
166
- <h2 class="font-bold text-gray-800">مساعد الذكاء الاصطناعي</h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  </div>
168
- <div class="flex items-center space-x-2">
169
- <button class="p-2 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-full transition">
170
- <i class="fas fa-share-alt"></i>
171
- </button>
172
- <button class="p-2 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-full transition">
173
- <i class="fas fa-ellipsis-h"></i>
174
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
175
  </div>
176
  </div>
177
  </div>
178
-
179
- <!-- المحادثة -->
180
- <div class="chat-container overflow-y-auto p-4 space-y-4" id="chat-messages">
181
- <!-- رسالة من الذكاء الاصطناعي -->
182
- <div class="flex justify-start">
183
- <div class="max-w-3/4 message-ai p-4 relative">
184
- <div class="flex items-start mb-2">
185
- <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-2">
186
- <i class="fas fa-robot text-purple-600"></i>
187
- </div>
188
- <span class="font-bold text-purple-600">المساعد الذكي</span>
189
- </div>
190
- <p class="text-gray-800">مرحباً بك! أنا مساعدك الذكي الذي يمكنه مساعدتك في تصميم المواقع وكتابة الأكواد البرمجية. كيف يمكنني مساعدتك اليوم؟</p>
191
- <div class="absolute -bottom-2 right-0 w-4 h-4 bg-white transform rotate-45"></div>
192
  </div>
193
  </div>
194
 
195
- <!-- رسالة من المستخدم -->
196
- <div class="flex justify-end">
197
- <div class="max-w-3/4 message-user p-4 relative">
198
- <div class="flex items-center justify-end mb-2">
199
- <span class="font-bold text-white opacity-90 mr-2">أنت</span>
200
- <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
201
- <i class="fas fa-user text-white"></i>
202
- </div>
203
- </div>
204
- <p>أحتاج مساعدة في تصميم موقع باستخدام HTML و CSS</p>
205
- <div class="absolute -bottom-2 left-0 w-4 h-4 bg-indigo-600 transform rotate-45"></div>
206
  </div>
207
  </div>
208
 
209
- <!-- رسالة من الذكاء الاصطناعي مع كود -->
210
- <div class="flex justify-start">
211
- <div class="max-w-3/4 message-ai p-4 relative">
212
- <div class="flex items-start mb-2">
213
- <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-2">
214
- <i class="fas fa-robot text-purple-600"></i>
215
- </div>
216
- <span class="font-bold text-purple-600">المساعد الذكي</span>
217
- </div>
218
- <p class="text-gray-800 mb-3">بالطبع! إليك نموذج أساسي لموقع باستخدام HTML و CSS مع TailwindCSS:</p>
219
-
220
- <div class="code-block p-4 mb-3 overflow-x-auto">
221
- <pre class="text-sm">
222
- &lt;!DOCTYPE html&gt;
223
- &lt;html lang="ar" dir="rtl"&gt;
224
- &lt;head&gt;
225
- &lt;meta charset="UTF-8"&gt;
226
- &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
227
- &lt;title&gt;موقعي&lt;/title&gt;
228
- &lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt;
229
- &lt;/head&gt;
230
- &lt;body class="bg-gray-100 font-sans"&gt;
231
- &lt;header class="bg-blue-600 text-white p-4 shadow-md"&gt;
232
- &lt;div class="container mx-auto"&gt;
233
- &lt;h1 class="text-2xl font-bold"&gt;مرحباً بكم في موقعي&lt;/h1&gt;
234
- &lt;/div&gt;
235
- &lt;/header&gt;
236
-
237
- &lt;main class="container mx-auto p-4"&gt;
238
- &lt;section class="bg-white p-6 rounded-lg shadow-md mb-6"&gt;
239
- &lt;h2 class="text-xl font-bold mb-4"&gt;محتوى رئيسي&lt;/h2&gt;
240
- &lt;p&gt;هذا مثال لمحتوى الموقع. يمكنك تعديله كما تريد.&lt;/p&gt;
241
- &lt;/section&gt;
242
- &lt;/main&gt;
243
-
244
- &lt;footer class="bg-gray-800 text-white p-4 mt-6"&gt;
245
- &lt;div class="container mx-auto text-center"&gt;
246
- &lt;p&gt;جميع الحقوق محفوظة &copy; 2023&lt;/p&gt;
247
- &lt;/div&gt;
248
- &lt;/footer&gt;
249
- &lt;/body&gt;
250
- &lt;/html&gt;</pre>
251
- </div>
252
-
253
- <p class="text-gray-800">هل تريد أي تعديلات معينة على هذا النموذج؟ أو لديك متطلبات أخرى لأخذها في الاعتبار؟</p>
254
- <div class="absolute -bottom-2 right-0 w-4 h-4 bg-white transform rotate-45"></div>
255
  </div>
256
  </div>
257
 
258
- <!-- مؤشر الكتابة -->
259
- <div class="flex justify-start hidden" id="typing-indicator">
260
- <div class="max-w-3/4 message-ai p-4 relative">
261
- <div class="flex items-start">
262
- <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-2">
263
- <i class="fas fa-robot text-purple-600"></i>
264
- </div>
265
- <div class="typing-indicator flex items-center h-8">
266
- <span></span>
267
- <span></span>
268
- <span></span>
269
- </div>
270
- </div>
271
- <div class="absolute -bottom-2 right-0 w-4 h-4 bg-white transform rotate-45"></div>
272
  </div>
273
  </div>
274
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
275
 
276
- <!-- منطقة إدخال الرسائل -->
277
- <div class="border-t border-gray-200 p-4 bg-gray-50">
278
- <div class="flex items-center space-x-2">
279
- <button class="p-2 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-full transition">
280
- <i class="fas fa-paperclip"></i>
281
- </button>
282
- <button class="p-2 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-full transition">
283
- <i class="fas fa-code"></i>
284
- </button>
285
- <div class="flex-1 relative">
286
- <textarea
287
- id="message-input"
288
- class="w-full border border-gray-300 rounded-full py-3 px-4 pr-12 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none"
289
- rows="1"
290
- placeholder="اكتب رسالتك هنا..."
291
- ></textarea>
292
- <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-purple-600 transition">
293
- <i class="far fa-smile"></i>
294
- </button>
295
- </div>
296
- <button
297
- id="send-button"
298
- class="p-3 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition"
299
- >
300
- <i class="fas fa-paper-plane"></i>
301
- </button>
 
 
 
 
 
 
 
 
302
  </div>
303
- <div class="mt-2 text-xs text-gray-500 text-center">
304
- المساعد الذكي قد يقدم معلومات غير دقيقة أحياناً. يرجى مراجعة الأكواد قبل استخدامها.
 
 
 
 
 
 
 
 
 
 
 
 
305
  </div>
306
  </div>
307
  </div>
308
  </div>
309
- </div>
 
 
 
 
 
 
310
 
311
- <script>
312
- document.addEventListener('DOMContentLoaded', function() {
313
- const messageInput = document.getElementById('message-input');
314
- const sendButton = document.getElementById('send-button');
315
- const chatMessages = document.getElementById('chat-messages');
316
- const typingIndicator = document.getElementById('typing-indicator');
 
 
 
 
 
 
 
 
317
 
318
- // ضبط ارتفاع منطقة الإدخال تلقائياً
319
- messageInput.addEventListener('input', function() {
320
- this.style.height = 'auto';
321
- this.style.height = (this.scrollHeight) + 'px';
322
- });
 
 
323
 
324
- // إرسال الرسالة عند الضغط على زر الإرسال
325
- sendButton.addEventListener('click', sendMessage);
 
 
 
 
 
326
 
327
- // إرسال الرسالة عند الضغط على Enter
328
- messageInput.addEventListener('keypress', function(e) {
329
- if (e.key === 'Enter' && !e.shiftKey) {
330
- e.preventDefault();
331
- sendMessage();
332
- }
333
- });
 
 
 
 
 
 
 
 
 
334
 
335
- function sendMessage() {
336
- const message = messageInput.value.trim();
337
- if (message === '') return;
338
-
339
- // إضافة رسالة المستخدم إلى الدردشة
340
- addUserMessage(message);
341
- messageInput.value = '';
342
- messageInput.style.height = 'auto';
 
 
 
 
 
 
343
 
344
- // عرض مؤشر الكتابة
345
- typingIndicator.classList.remove('hidden');
346
- chatMessages.scrollTop = chatMessages.scrollHeight;
 
 
 
 
 
 
 
 
 
 
347
 
348
- // محاكاة رد الذكاء الاصطناعي بعد تأخير
349
- setTimeout(() => {
350
- typingIndicator.classList.add('hidden');
351
- addAiMessage(generateAiResponse(message));
352
- }, 1500 + Math.random() * 2000);
353
- }
354
-
355
- function addUserMessage(message) {
356
- const messageElement = document.createElement('div');
357
- messageElement.className = 'flex justify-end';
358
- messageElement.innerHTML = `
359
- <div class="max-w-3/4 message-user p-4 relative">
360
- <div class="flex items-center justify-end mb-2">
361
- <span class="font-bold text-white opacity-90 mr-2">أنت</span>
362
- <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
363
- <i class="fas fa-user text-white"></i>
364
- </div>
365
- </div>
366
- <p>${message}</p>
367
- <div class="absolute -bottom-2 left-0 w-4 h-4 bg-indigo-600 transform rotate-45"></div>
368
  </div>
369
- `;
370
- chatMessages.appendChild(messageElement);
371
- chatMessages.scrollTop = chatMessages.scrollHeight;
372
- }
 
 
 
 
 
 
 
 
 
 
 
 
373
 
374
- function addAiMessage(message) {
375
- const messageElement = document.createElement('div');
376
- messageElement.className = 'flex justify-start';
377
- messageElement.innerHTML = `
378
- <div class="max-w-3/4 message-ai p-4 relative">
379
- <div class="flex items-start mb-2">
380
- <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-2">
381
- <i class="fas fa-robot text-purple-600"></i>
382
- </div>
383
- <span class="font-bold text-purple-600">المساعد الذكي</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
384
  </div>
385
- ${message}
386
- <div class="absolute -bottom-2 right-0 w-4 h-4 bg-white transform rotate-45"></div>
387
  </div>
388
- `;
389
- chatMessages.appendChild(messageElement);
390
- chatMessages.scrollTop = chatMessages.scrollHeight;
391
- }
392
-
393
- function generateAiResponse(userMessage) {
394
- // محاكاة ردود الذكاء الاصطناعي بناءً على رسالة المستخدم
395
- const lowerMessage = userMessage.toLowerCase();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
396
 
397
- if (lowerMessage.includes('html') || lowerMessage.includes('css') || lowerMessage.includes('تصميم')) {
398
- return `
399
- <p class="text-gray-800 mb-3">لتصميم موقع احترافي، أنصحك باستخدام TailwindCSS كما في المثال السابق. إليك بعض النصائح الإضافية:</p>
400
- <ul class="list-disc list-inside text-gray-800 mb-3 space-y-1">
401
- <li>استخدم نظام grid لتصميم متجاوب</li>
402
- <li>اختر ألوان متناسقة باستخدام أدوات مثل coolors.co</li>
403
- <li>احرص على تجربة المستخدم وسهولة التنقل</li>
404
- </ul>
405
- <p class="text-gray-800">هل تريد مساعدة في جزء معين من التصميم؟</p>
406
- `;
407
- } else if (lowerMessage.includes('جافاسكريبت') || lowerMessage.includes('javascript')) {
408
- return `
409
- <p class="text-gray-800 mb-3">بالطبع! إليك مثال على دالة جافاسكريبت بسيطة:</p>
410
- <div class="code-block p-4 mb-3 overflow-x-auto">
411
- <pre class="text-sm">
412
- // دالة لتحية المستخدم
413
- function greetUser(name) {
414
- const hour = new Date().getHours();
415
- let greeting;
416
-
417
- if (hour < 12) {
418
- greeting = 'صباح الخير';
419
- } else if (hour < 18) {
420
- greeting = 'مساء الخير';
421
- } else {
422
- greeting = 'مساء الخير';
423
- }
424
-
425
- return \`\${greeting}، \${name}!\`;
426
- }
427
 
428
- console.log(greetUser('محمد'));</pre>
429
- </div>
430
- <p class="text-gray-800">هل لديك أي استفسارات أخرى حول جافاسكريبت؟</p>
431
- `;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
432
  } else {
433
- return `
434
- <p class="text-gray-800">شكراً لسؤالك! يمكنني مساعدتك في مواضيع متعددة مثل:</p>
435
- <div class="grid grid-cols-2 gap-2 mt-3">
436
- <button class="quick-reply-btn px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm transition">
437
- تصميم مواقع الويب
438
- </button>
439
- <button class="quick-reply-btn px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm transition">
440
- برمجة جافاسكريبت
441
- </button>
442
- <button class="quick-reply-btn px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm transition">
443
- إطارات عمل CSS
444
- </button>
445
- <button class="quick-reply-btn px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm transition">
446
- نصائح SEO
447
- </button>
448
- </div>
449
- `;
450
  }
451
- }
452
-
453
- // إضافة ردود سريعة عند النقر
454
- document.addEventListener('click', function(e) {
455
- if (e.target.classList.contains('quick-reply-btn')) {
456
- const replyText = e.target.textContent.trim();
457
- addUserMessage(replyText);
458
-
459
- typingIndicator.classList.remove('hidden');
460
- chatMessages.scrollTop = chatMessages.scrollHeight;
461
-
462
- setTimeout(() => {
463
- typingIndicator.classList.add('hidden');
464
- addAiMessage(generateAiResponse(replyText));
465
- }, 1500 + Math.random() * 2000);
466
  }
467
- });
468
- });
 
 
 
469
  </script>
470
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=gghjgff/jgvcvccv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
471
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Hackers Academy | أكاديمية الهاكرز</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
 
11
 
12
  body {
13
  font-family: 'Tajawal', sans-serif;
14
+ background-color: #0a0a0a;
15
+ color: #e5e7eb;
16
  }
17
 
18
+ .hacker-bg {
19
+ background: linear-gradient(135deg, #0d0d0d 0%, #111827 100%);
20
  }
21
 
22
+ .hacker-card {
23
+ background-color: #1f2937;
24
+ border: 1px solid #374151;
25
+ transition: all 0.3s ease;
26
  }
27
 
28
+ .hacker-card:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 10px 25px rgba(16, 185, 129, 0.1);
31
+ border-color: #10b981;
32
  }
33
 
34
+ .hacker-primary {
35
+ color: #10b981;
 
 
 
 
 
 
36
  }
37
 
38
+ .hacker-secondary {
39
+ color: #3b82f6;
40
  }
41
 
42
+ .glow-text {
43
+ text-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
44
  }
45
 
46
+ .terminal {
47
+ background-color: #111827;
48
+ border: 1px solid #10b981;
49
+ font-family: 'Courier New', Courier, monospace;
50
  }
51
 
52
+ .command::before {
53
+ content: "> ";
54
+ color: #10b981;
55
  }
56
 
57
+ .blink-cursor::after {
58
+ content: "|";
59
+ animation: blink 1s infinite;
60
+ color: #10b981;
61
+ }
62
+
63
+ @keyframes blink {
64
+ 0%, 100% { opacity: 1; }
65
+ 50% { opacity: 0; }
66
+ }
67
+
68
+ .matrix-bg {
69
+ position: relative;
70
+ overflow: hidden;
71
+ }
72
+
73
+ .matrix-bg::before {
74
+ content: "";
75
+ position: absolute;
76
+ top: 0;
77
+ left: 0;
78
+ right: 0;
79
+ bottom: 0;
80
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="20" font-family="Courier" font-size="12" fill="rgba(16,185,129,0.1)">0 1 0 1 0 1 0 1 0 1</text><text x="5" y="35" font-family="Courier" font-size="12" fill="rgba(16,185,129,0.1)">1 0 1 0 1 0 1 0 1 0</text><text x="15" y="50" font-family="Courier" font-size="12" fill="rgba(16,185,129,0.1)">0 1 0 1 0 1 0 1 0 1</text><text x="10" y="65" font-family="Courier" font-size="12" fill="rgba(16,185,129,0.1)">1 0 1 0 1 0 1 0 1 0</text><text x="5" y="80" font-family="Courier" font-size="12" fill="rgba(16,185,129,0.1)">0 1 0 1 0 1 0 1 0 1</text><text x="15" y="95" font-family="Courier" font-size="12" fill="rgba(16,185,129,0.1)">1 0 1 0 1 0 1 0 1 0</text></svg>');
81
+ opacity: 0.1;
82
+ z-index: 0;
83
+ }
84
+
85
+ .tab-content {
86
+ display: none;
87
+ }
88
+
89
+ .tab-content.active {
90
+ display: block;
91
  }
92
 
93
+ .nav-tab {
94
+ border-bottom: 3px solid transparent;
95
+ transition: all 0.3s;
96
  }
97
 
98
+ .nav-tab:hover, .nav-tab.active {
99
+ border-bottom-color: #10b981;
100
+ color: #10b981;
 
101
  }
102
  </style>
103
  </head>
104
+ <body class="matrix-bg">
105
  <!-- شريط التنقل العلوي -->
106
+ <nav class="hacker-bg border-b border-gray-800 py-4 sticky top-0 z-50">
107
+ <div class="container mx-auto px-4 flex justify-between items-center">
108
+ <div class="flex items-center space-x-3">
109
+ <div class="w-10 h-10 bg-green-900 rounded-full flex items-center justify-center">
110
+ <i class="fas fa-terminal hacker-primary"></i>
111
  </div>
112
+ <h1 class="text-xl font-bold hacker-primary glow-text">Hackers<span class="hacker-secondary">Academy</span></h1>
113
  </div>
114
+
115
+ <div class="hidden md:flex items-center space-x-6">
116
+ <a href="#courses" class="text-gray-300 hover:text-green-400 transition">الدورات</a>
117
+ <a href="#tools" class="text-gray-300 hover:text-green-400 transition">الأدوات</a>
118
+ <a href="#commands" class="text-gray-300 hover:text-green-400 transition">الأوامر</a>
119
+ <a href="#resources" class="text-gray-300 hover:text-green-400 transition">المصادر</a>
120
+ <a href="#about" class="text-gray-300 hover:text-green-400 transition">عن الأكاديمية</a>
121
+ </div>
122
+
123
+ <div class="flex items-center space-x-3">
124
+ <button class="px-4 py-2 bg-green-800 hover:bg-green-700 text-white rounded-md font-medium transition">
125
+ <i class="fas fa-user-secret mr-2"></i> تسجيل الدخول
126
  </button>
127
+ <button class="md:hidden text-gray-300 hover:text-green-400">
128
+ <i class="fas fa-bars text-xl"></i>
129
  </button>
130
  </div>
131
  </div>
132
  </nav>
133
 
134
+ <!-- الهيرو -->
135
+ <header class="hacker-bg py-20">
136
+ <div class="container mx-auto px-4 text-center">
137
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 hacker-primary glow-text">أكاديمية <span class="hacker-secondary">الهاكرز</span></h1>
138
+ <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-8">
139
+ تعلم الأمن السيبراني، الاختراق الأخلاقي، وتأمين الأنظمة من الصفر إلى الاحتراف
140
+ </p>
141
+ <div class="flex flex-wrap justify-center gap-4">
142
+ <button class="px-6 py-3 bg-green-700 hover:bg-green-600 text-white rounded-md font-bold transition flex items-center">
143
+ <i class="fas fa-play mr-2"></i> ابدأ التعلم الآن
144
+ </button>
145
+ <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-md font-bold transition flex items-center">
146
+ <i class="fas fa-eye mr-2"></i> عرض الدورات
147
+ </button>
148
+ </div>
149
+ </div>
150
+ </header>
151
+
152
+ <!-- محاكي الطرفية -->
153
+ <section class="container mx-auto px-4 my-16">
154
+ <div class="terminal rounded-lg overflow-hidden max-w-4xl mx-auto">
155
+ <div class="bg-gray-900 px-4 py-3 flex items-center">
156
+ <div class="flex space-x-2 mr-3">
157
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
158
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
159
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
160
  </div>
161
+ <div class="text-sm text-gray-400">terminal@hackers-academy:~</div>
162
+ </div>
163
+ <div class="p-4">
164
+ <div class="mb-3">
165
+ <p class="text-green-400">Welcome to Hackers Academy Terminal</p>
166
+ <p class="text-gray-400">Type 'help' to see available commands</p>
 
 
 
 
 
 
 
 
 
 
 
167
  </div>
168
+ <div class="mb-3 flex items-baseline">
169
+ <span class="text-green-400 mr-2">$</span>
170
+ <p class="command">help</p>
171
+ </div>
172
+ <div class="mb-3 text-gray-300">
173
+ <p>Available commands:</p>
174
+ <p class="ml-4">- courses: List all hacking courses</p>
175
+ <p class="ml-4">- tools: Show hacking tools</p>
176
+ <p class="ml-4">- commands: List useful commands</p>
177
+ <p class="ml-4">- clear: Clear terminal</p>
178
+ </div>
179
+ <div class="flex items-baseline">
180
+ <span class="text-green-400 mr-2">$</span>
181
+ <p class="command blink-cursor">_</p>
 
 
 
 
182
  </div>
183
  </div>
184
+ </div>
185
+ </section>
186
+
187
+ <!-- الدورات -->
188
+ <section id="courses" class="container mx-auto px-4 my-16">
189
+ <h2 class="text-3xl font-bold mb-8 text-center hacker-primary">
190
+ <i class="fas fa-graduation-cap mr-2"></i> دوراتنا التعليمية
191
+ </h2>
192
+
193
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
194
+ <!-- دورة 1 -->
195
+ <div class="hacker-card rounded-lg p-6">
196
+ <div class="w-16 h-16 bg-green-900 rounded-full flex items-center justify-center mb-4 mx-auto">
197
+ <i class="fas fa-lock text-2xl hacker-primary"></i>
198
+ </div>
199
+ <h3 class="text-xl font-bold mb-3 text-center hacker-primary">الأمن السيبراني الأساسي</h3>
200
+ <p class="text-gray-400 mb-4 text-center">
201
+ تعلم أساسيات الأمن السيبراني وحماية الأنظمة من الهجمات
202
+ </p>
203
+ <ul class="space-y-2 mb-4">
204
+ <li class="flex items-center">
205
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
206
+ <span>مقدمة في الأمن السيبراني</span>
207
+ </li>
208
+ <li class="flex items-center">
209
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
210
+ <span>أنواع الهجمات الإلكترونية</span>
211
+ </li>
212
+ <li class="flex items-center">
213
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
214
+ <span>أدوات الحماية الأساسية</span>
215
+ </li>
216
+ </ul>
217
+ <button class="w-full py-2 bg-green-800 hover:bg-green-700 rounded-md transition">
218
+ ابدأ الدورة
219
+ </button>
220
+ </div>
221
+
222
+ <!-- دورة 2 -->
223
+ <div class="hacker-card rounded-lg p-6">
224
+ <div class="w-16 h-16 bg-blue-900 rounded-full flex items-center justify-center mb-4 mx-auto">
225
+ <i class="fas fa-user-secret text-2xl hacker-secondary"></i>
226
+ </div>
227
+ <h3 class="text-xl font-bold mb-3 text-center hacker-secondary">الاختراق الأخلاقي</h3>
228
+ <p class="text-gray-400 mb-4 text-center">
229
+ تعلم اختبار الاختراق واكتشاف الثغرات الأمنية كخبير
230
+ </p>
231
+ <ul class="space-y-2 mb-4">
232
+ <li class="flex items-center">
233
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
234
+ <span>أساسيات الاختراق الأخلاقي</span>
235
+ </li>
236
+ <li class="flex items-center">
237
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
238
+ <span>استخدام Kali Linux</span>
239
+ </li>
240
+ <li class="flex items-center">
241
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
242
+ <span>اختبار الاختراق العملي</span>
243
+ </li>
244
+ </ul>
245
+ <button class="w-full py-2 bg-blue-800 hover:bg-blue-700 rounded-md transition">
246
+ ابدأ الدورة
247
+ </button>
248
+ </div>
249
 
250
+ <!-- دورة 3 -->
251
+ <div class="hacker-card rounded-lg p-6">
252
+ <div class="w-16 h-16 bg-purple-900 rounded-full flex items-center justify-center mb-4 mx-auto">
253
+ <i class="fas fa-network-wired text-2xl text-purple-400"></i>
254
+ </div>
255
+ <h3 class="text-xl font-bold mb-3 text-center text-purple-400">أمن الشبكات</h3>
256
+ <p class="text-gray-400 mb-4 text-center">
257
+ احترف تأمين الشبكات واكتشاف الثغرات الشبكية
258
+ </p>
259
+ <ul class="space-y-2 mb-4">
260
+ <li class="flex items-center">
261
+ <i class="fas fa-check-circle text-purple-500 mr-2"></i>
262
+ <span>أساسيات أمن الشبكات</span>
263
+ </li>
264
+ <li class="flex items-center">
265
+ <i class="fas fa-check-circle text-purple-500 mr-2"></i>
266
+ <span>تحليل حركة الشبكة</span>
267
+ </li>
268
+ <li class="flex items-center">
269
+ <i class="fas fa-check-circle text-purple-500 mr-2"></i>
270
+ <span>أدوات أمن الشبكات</span>
271
+ </li>
272
+ </ul>
273
+ <button class="w-full py-2 bg-purple-800 hover:bg-purple-700 rounded-md transition">
274
+ ابدأ الدورة
275
+ </button>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="text-center mt-10">
280
+ <button class="px-6 py-3 border border-green-600 text-green-400 hover:bg-green-900 rounded-md font-bold transition">
281
+ عرض جميع الدورات <i class="fas fa-arrow-left ml-2"></i>
282
+ </button>
283
+ </div>
284
+ </section>
285
+
286
+ <!-- الأدوات -->
287
+ <section id="tools" class="hacker-bg py-16 my-16 border-t border-b border-gray-800">
288
+ <div class="container mx-auto px-4">
289
+ <h2 class="text-3xl font-bold mb-8 text-center hacker-primary">
290
+ <i class="fas fa-tools mr-2"></i> أدوات الهاكرز
291
+ </h2>
292
+
293
+ <div class="flex flex-wrap justify-center mb-8 border-b border-gray-700">
294
+ <button class="nav-tab px-6 py-3 font-medium active" data-tab="pentesting">اختبار الاختراق</button>
295
+ <button class="nav-tab px-6 py-3 font-medium" data-tab="forensics">التحقيق الجنائي</button>
296
+ <button class="nav-tab px-6 py-3 font-medium" data-tab="network">أمن الشبكات</button>
297
+ <button class="nav-tab px-6 py-3 font-medium" data-tab="web">أمن الويب</button>
298
+ </div>
299
+
300
+ <div class="tab-content active" id="pentesting">
301
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
302
+ <!-- أداة 1 -->
303
+ <div class="hacker-card rounded-lg p-4 flex items-start">
304
+ <div class="bg-green-900 p-3 rounded-md mr-3">
305
+ <i class="fas fa-skull text-green-400"></i>
306
+ </div>
307
+ <div>
308
+ <h3 class="font-bold hacker-primary">Kali Linux</h3>
309
+ <p class="text-sm text-gray-400">توزيعة لينكس مخصصة لاختبار الاختراق</p>
310
  </div>
311
+ </div>
312
+
313
+ <!-- أداة 2 -->
314
+ <div class="hacker-card rounded-lg p-4 flex items-start">
315
+ <div class="bg-blue-900 p-3 rounded-md mr-3">
316
+ <i class="fas fa-bug text-blue-400"></i>
317
+ </div>
318
+ <div>
319
+ <h3 class="font-bold hacker-secondary">Metasploit</h3>
320
+ <p class="text-sm text-gray-400">إطار عمل لاختبار الاختراق وتطوير الثغرات</p>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- أداة 3 -->
325
+ <div class="hacker-card rounded-lg p-4 flex items-start">
326
+ <div class="bg-purple-900 p-3 rounded-md mr-3">
327
+ <i class="fas fa-wifi text-purple-400"></i>
328
+ </div>
329
+ <div>
330
+ <h3 class="font-bold text-purple-400">Aircrack-ng</h3>
331
+ <p class="text-sm text-gray-400">أداة لاختبار أمان الشبكات اللاسلكية</p>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- أداة 4 -->
336
+ <div class="hacker-card rounded-lg p-4 flex items-start">
337
+ <div class="bg-yellow-900 p-3 rounded-md mr-3">
338
+ <i class="fas fa-key text-yellow-400"></i>
339
+ </div>
340
+ <div>
341
+ <h3 class="font-bold text-yellow-400">John the Ripper</h3>
342
+ <p class="text-sm text-gray-400">أداة لكسر كلمات المرور</p>
343
  </div>
344
  </div>
345
  </div>
346
+ </div>
347
+
348
+ <div class="tab-content" id="forensics">
349
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
350
+ <!-- أداة 1 -->
351
+ <div class="hacker-card rounded-lg p-4 flex items-start">
352
+ <div class="bg-green-900 p-3 rounded-md mr-3">
353
+ <i class="fas fa-hdd text-green-400"></i>
354
+ </div>
355
+ <div>
356
+ <h3 class="font-bold hacker-primary">Autopsy</h3>
357
+ <p class="text-sm text-gray-400">منصة للتحقيق الجنائي الرقمي</p>
 
 
358
  </div>
359
  </div>
360
 
361
+ <!-- أداة 2 -->
362
+ <div class="hacker-card rounded-lg p-4 flex items-start">
363
+ <div class="bg-blue-900 p-3 rounded-md mr-3">
364
+ <i class="fas fa-memory text-blue-400"></i>
365
+ </div>
366
+ <div>
367
+ <h3 class="font-bold hacker-secondary">Volatility</h3>
368
+ <p class="text-sm text-gray-400">أداة لتحليل ذاكرة النظام</p>
 
 
 
369
  </div>
370
  </div>
371
 
372
+ <!-- أداة 3 -->
373
+ <div class="hacker-card rounded-lg p-4 flex items-start">
374
+ <div class="bg-purple-900 p-3 rounded-md mr-3">
375
+ <i class="fas fa-file-alt text-purple-400"></i>
376
+ </div>
377
+ <div>
378
+ <h3 class="font-bold text-purple-400">Sleuth Kit</h3>
379
+ <p class="text-sm text-gray-400">أدوات للتحقيق في أنظمة الملفات</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
380
  </div>
381
  </div>
382
 
383
+ <!-- أداة 4 -->
384
+ <div class="hacker-card rounded-lg p-4 flex items-start">
385
+ <div class="bg-yellow-900 p-3 rounded-md mr-3">
386
+ <i class="fas fa-network-wired text-yellow-400"></i>
387
+ </div>
388
+ <div>
389
+ <h3 class="font-bold text-yellow-400">Wireshark</h3>
390
+ <p class="text-sm text-gray-400">أداة لتحليل حركة الشبكة</p>
 
 
 
 
 
 
391
  </div>
392
  </div>
393
  </div>
394
+ </div>
395
+
396
+ <div class="text-center mt-10">
397
+ <button class="px-6 py-3 border border-green-600 text-green-400 hover:bg-green-900 rounded-md font-bold transition">
398
+ عرض جميع الأدوات <i class="fas fa-arrow-left ml-2"></i>
399
+ </button>
400
+ </div>
401
+ </div>
402
+ </section>
403
+
404
+ <!-- الأوامر -->
405
+ <section id="commands" class="container mx-auto px-4 my-16">
406
+ <h2 class="text-3xl font-bold mb-8 text-center hacker-primary">
407
+ <i class="fas fa-terminal mr-2"></i> أوامر مهمة
408
+ </h2>
409
+
410
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
411
+ <!-- لينكس -->
412
+ <div class="hacker-card rounded-lg p-6">
413
+ <div class="flex items-center mb-4">
414
+ <i class="fab fa-linux text-3xl hacker-primary mr-3"></i>
415
+ <h3 class="text-xl font-bold hacker-primary">أوامر لينكس</h3>
416
+ </div>
417
 
418
+ <div class="space-y-4">
419
+ <div>
420
+ <p class="command">nmap -sV 192.168.1.1</p>
421
+ <p class="text-gray-400 text-sm mt-1">مسح المنافذ المفتوحة والخدمات على عنوان IP</p>
422
+ </div>
423
+
424
+ <div>
425
+ <p class="command">aircrack-ng -w wordlist.txt capture.cap</p>
426
+ <p class="text-gray-400 text-sm mt-1">اختراق شبكة واي فاي باستخدام قائمة كلمات مرور</p>
427
+ </div>
428
+
429
+ <div>
430
+ <p class="command">sqlmap -u "http://example.com?id=1" --dbs</p>
431
+ <p class="text-gray-400 text-sm mt-1">اختبار موقع لثغرات SQL injection</p>
432
+ </div>
433
+
434
+ <div>
435
+ <p class="command">hydra -l user -P passlist.txt ssh://192.168.1.1</p>
436
+ <p class="text-gray-400 text-sm mt-1">هجوم brute force على خدمة SSH</p>
437
+ </div>
438
+ </div>
439
+ </div>
440
+
441
+ <!-- ويندوز -->
442
+ <div class="hacker-card rounded-lg p-6">
443
+ <div class="flex items-center mb-4">
444
+ <i class="fab fa-windows text-3xl hacker-secondary mr-3"></i>
445
+ <h3 class="text-xl font-bold hacker-secondary">أوامر ويندوز</h3>
446
+ </div>
447
+
448
+ <div class="space-y-4">
449
+ <div>
450
+ <p class="command">netstat -ano</p>
451
+ <p class="text-gray-400 text-sm mt-1">عرض جميع الاتصالات الشبكية والمنافذ المفتوحة</p>
452
  </div>
453
+
454
+ <div>
455
+ <p class="command">ipconfig /all</p>
456
+ <p class="text-gray-400 text-sm mt-1">عرض معلومات تكوين الشبكة</p>
457
+ </div>
458
+
459
+ <div>
460
+ <p class="command">tasklist /svc</p>
461
+ <p class="text-gray-400 text-sm mt-1">عرض جميع العمليات الجارية والخدمات</p>
462
+ </div>
463
+
464
+ <div>
465
+ <p class="command">systeminfo</p>
466
+ <p class="text-gray-400 text-sm mt-1">عرض معلومات مفصلة عن النظام</p>
467
  </div>
468
  </div>
469
  </div>
470
  </div>
471
+
472
+ <div class="text-center mt-10">
473
+ <button class="px-6 py-3 border border-green-600 text-green-400 hover:bg-green-900 rounded-md font-bold transition">
474
+ عرض جميع الأوامر <i class="fas fa-arrow-left ml-2"></i>
475
+ </button>
476
+ </div>
477
+ </section>
478
 
479
+ <!-- معرض الصور -->
480
+ <section class="container mx-auto px-4 my-16">
481
+ <h2 class="text-3xl font-bold mb-8 text-center hacker-primary">
482
+ <i class="fas fa-images mr-2"></i> معرض الهاكرز
483
+ </h2>
484
+
485
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
486
+ <div class="hacker-card rounded-lg overflow-hidden">
487
+ <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
488
+ alt="Hacker image" class="w-full h-40 object-cover">
489
+ <div class="p-3">
490
+ <p class="text-sm hacker-primary">غرفة عمليات الهاكرز</p>
491
+ </div>
492
+ </div>
493
 
494
+ <div class="hacker-card rounded-lg overflow-hidden">
495
+ <img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
496
+ alt="Hacker image" class="w-full h-40 object-cover">
497
+ <div class="p-3">
498
+ <p class="text-sm hacker-secondary">أكواد برمجية</p>
499
+ </div>
500
+ </div>
501
 
502
+ <div class="hacker-card rounded-lg overflow-hidden">
503
+ <img src="https://images.unsplash.com/photo-1517430816045-df4b7de11d1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
504
+ alt="Hacker image" class="w-full h-40 object-cover">
505
+ <div class="p-3">
506
+ <p class="text-sm text-purple-400">شاشة طرفية</p>
507
+ </div>
508
+ </div>
509
 
510
+ <div class="hacker-card rounded-lg overflow-hidden">
511
+ <img src="https://images.unsplash.com/photo-1535378917046-79ae16b96a0d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
512
+ alt="Hacker image" class="w-full h-40 object-cover">
513
+ <div class="p-3">
514
+ <p class="text-sm text-yellow-400">خادم بيانات</p>
515
+ </div>
516
+ </div>
517
+ </div>
518
+ </section>
519
+
520
+ <!-- المصادر -->
521
+ <section id="resources" class="hacker-bg py-16 my-16 border-t border-b border-gray-800">
522
+ <div class="container mx-auto px-4">
523
+ <h2 class="text-3xl font-bold mb-8 text-center hacker-primary">
524
+ <i class="fas fa-book mr-2"></i> مصادر التعلم
525
+ </h2>
526
 
527
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
528
+ <!-- كتاب 1 -->
529
+ <div class="hacker-card rounded-lg p-6">
530
+ <div class="bg-green-900 p-4 rounded-md mb-4 text-center">
531
+ <i class="fas fa-book-open text-4xl hacker-primary"></i>
532
+ </div>
533
+ <h3 class="text-xl font-bold mb-2 text-center hacker-primary">الاختراق الأخلاقي</h3>
534
+ <p class="text-gray-400 text-center mb-4">
535
+ دليل شامل لتعلم الاختراق الأخلاقي من الصفر إلى الاحتراف
536
+ </p>
537
+ <button class="w-full py-2 bg-green-800 hover:bg-green-700 rounded-md transition">
538
+ تحميل الكتاب
539
+ </button>
540
+ </div>
541
 
542
+ <!-- كتاب 2 -->
543
+ <div class="hacker-card rounded-lg p-6">
544
+ <div class="bg-blue-900 p-4 rounded-md mb-4 text-center">
545
+ <i class="fas fa-shield-alt text-4xl hacker-secondary"></i>
546
+ </div>
547
+ <h3 class="text-xl font-bold mb-2 text-center hacker-secondary">أمن المعلومات</h3>
548
+ <p class="text-gray-400 text-center mb-4">
549
+ أساسيات أمن المعلومات وحماية الأنظمة من الهجمات الإلكترونية
550
+ </p>
551
+ <button class="w-full py-2 bg-blue-800 hover:bg-blue-700 rounded-md transition">
552
+ تحميل الكتاب
553
+ </button>
554
+ </div>
555
 
556
+ <!-- كتاب 3 -->
557
+ <div class="hacker-card rounded-lg p-6">
558
+ <div class="bg-purple-900 p-4 rounded-md mb-4 text-center">
559
+ <i class="fas fa-network-wired text-4xl text-purple-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
560
  </div>
561
+ <h3 class="text-xl font-bold mb-2 text-center text-purple-400">أمن الشبكات</h3>
562
+ <p class="text-gray-400 text-center mb-4">
563
+ تأمين البنية التحتية للشبكات واكتشاف الثغرات الأمنية
564
+ </p>
565
+ <button class="w-full py-2 bg-purple-800 hover:bg-purple-700 rounded-md transition">
566
+ تحميل الكتاب
567
+ </button>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ </section>
572
+
573
+ <!-- عن الأكاديمية -->
574
+ <section id="about" class="container mx-auto px-4 my-16">
575
+ <div class="hacker-card rounded-lg p-8">
576
+ <h2 class="text-3xl font-bold mb-6 text-center hacker-primary">عن أكاديمية الهاكرز</h2>
577
 
578
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
579
+ <div>
580
+ <p class="text-gray-300 mb-4">
581
+ أكاديمية الهاكرز هي منصة تعليمية رائدة في مجال الأمن السيبراني والاختراق الأخلاقي، نقدم دورات متخصصة وشاملة لتعليم المهارات اللازمة في هذا المجال الحيوي.
582
+ </p>
583
+ <p class="text-gray-300 mb-4">
584
+ مهمتنا هي تخريج محترفين في مجال الأمن السيبراني قادرين على حماية الأنظمة والشبكات من الهجمات الإلكترونية، وتأمين البيانات الحساسة.
585
+ </p>
586
+ <p class="text-gray-300">
587
+ نؤمن بأن التعليم الأخلاقي هو الأساس لبناء مجتمع رقمي آمن، لذلك نركز على الجانب الأخلاقي والقانوني في جميع دوراتنا.
588
+ </p>
589
+ </div>
590
+
591
+ <div class="bg-gray-800 rounded-lg p-6">
592
+ <h3 class="text-xl font-bold mb-4 hacker-secondary">إحصائيات الأكاديمية</h3>
593
+
594
+ <div class="grid grid-cols-2 gap-4">
595
+ <div class="bg-gray-900 rounded-lg p-4 text-center">
596
+ <div class="text-3xl font-bold hacker-primary mb-1">500+</div>
597
+ <div class="text-gray-400 text-sm">طالب مسجل</div>
598
+ </div>
599
+
600
+ <div class="bg-gray-900 rounded-lg p-4 text-center">
601
+ <div class="text-3xl font-bold hacker-secondary mb-1">30+</div>
602
+ <div class="text-gray-400 text-sm">دورة تدريبية</div>
603
+ </div>
604
+
605
+ <div class="bg-gray-900 rounded-lg p-4 text-center">
606
+ <div class="text-3xl font-bold text-purple-400 mb-1">50+</div>
607
+ <div class="text-gray-400 text-sm">أداة تعليمية</div>
608
+ </div>
609
+
610
+ <div class="bg-gray-900 rounded-lg p-4 text-center">
611
+ <div class="text-3xl font-bold text-yellow-400 mb-1">100%</div>
612
+ <div class="text-gray-400 text-sm">رضا العملاء</div>
613
  </div>
 
 
614
  </div>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </section>
619
+
620
+ <!-- تذييل الصفحة -->
621
+ <footer class="hacker-bg border-t border-gray-800 py-12">
622
+ <div class="container mx-auto px-4">
623
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
624
+ <div>
625
+ <h3 class="text-lg font-bold mb-4 hacker-primary">Hackers Academy</h3>
626
+ <p class="text-gray-400">
627
+ أكاديمية متخصصة في تعليم الأمن السيبراني والاختراق الأخلاقي منذ 2015.
628
+ </p>
629
+ </div>
630
+
631
+ <div>
632
+ <h3 class="text-lg font-bold mb-4 hacker-secondary">روابط سريعة</h3>
633
+ <ul class="space-y-2 text-gray-400">
634
+ <li><a href="#" class="hover:text-green-400 transition">الدورات</a></li>
635
+ <li><a href="#" class="hover:text-green-400 transition">الأدوات</a></li>
636
+ <li><a href="#" class="hover:text-green-400 transition">المصادر</a></li>
637
+ <li><a href="#" class="hover:text-green-400 transition">المدونة</a></li>
638
+ </ul>
639
+ </div>
640
+
641
+ <div>
642
+ <h3 class="text-lg font-bold mb-4 text-purple-400">تواصل معنا</h3>
643
+ <ul class="space-y-2 text-gray-400">
644
+ <li class="flex items-center">
645
+ <i class="fas fa-envelope mr-2"></i> contact@hackers.edu
646
+ </li>
647
+ <li class="flex items-center">
648
+ <i class="fas fa-phone mr-2"></i> +966 12 345 6789
649
+ </li>
650
+ <li class="flex items-center">
651
+ <i class="fas fa-map-marker-alt mr-2"></i> الرياض، السعودية
652
+ </li>
653
+ </ul>
654
+ </div>
655
 
656
+ <div>
657
+ <h3 class="text-lg font-bold mb-4 text-yellow-400">تابعنا</h3>
658
+ <div class="flex space-x-4">
659
+ <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-green-800 rounded-full flex items-center justify-center transition">
660
+ <i class="fab fa-twitter"></i>
661
+ </a>
662
+ <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-800 rounded-full flex items-center justify-center transition">
663
+ <i class="fab fa-facebook-f"></i>
664
+ </a>
665
+ <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-purple-800 rounded-full flex items-center justify-center transition">
666
+ <i class="fab fa-instagram"></i>
667
+ </a>
668
+ <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-red-800 rounded-full flex items-center justify-center transition">
669
+ <i class="fab fa-youtube"></i>
670
+ </a>
671
+ </div>
672
+ </div>
673
+ </div>
674
+
675
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
676
+ <p>© 2023 Hackers Academy. جميع الحقوق محفوظة.</p>
677
+ </div>
678
+ </div>
679
+ </footer>
 
 
 
 
 
 
680
 
681
+ <script>
682
+ // تنقل بين التبويبات
683
+ document.querySelectorAll('.nav-tab').forEach(tab => {
684
+ tab.addEventListener('click', () => {
685
+ // إزالة النشط من جميع التبويبات
686
+ document.querySelectorAll('.nav-tab').forEach(t => {
687
+ t.classList.remove('active');
688
+ });
689
+
690
+ // إضافة النشط للتبويب المحدد
691
+ tab.classList.add('active');
692
+
693
+ // إخفاء جميع المحتويات
694
+ document.querySelectorAll('.tab-content').forEach(content => {
695
+ content.classList.remove('active');
696
+ });
697
+
698
+ // إظهار المحتوى المحدد
699
+ const tabId = tab.getAttribute('data-tab');
700
+ document.getElementById(tabId).classList.add('active');
701
+ });
702
+ });
703
+
704
+ // تأثير التمرير السلس
705
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
706
+ anchor.addEventListener('click', function (e) {
707
+ e.preventDefault();
708
+
709
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
710
+ behavior: 'smooth'
711
+ });
712
+ });
713
+ });
714
+
715
+ // تأثير الكتابة في الطرفية
716
+ const commands = [
717
+ "nmap -sS -A 192.168.1.1",
718
+ "msfconsole -q",
719
+ "sqlmap -u 'http://example.com?id=1' --dbs",
720
+ "aircrack-ng -w rockyou.txt capture.cap"
721
+ ];
722
+
723
+ let currentCommand = 0;
724
+ let charIndex = 0;
725
+ let isDeleting = false;
726
+ const typingElement = document.querySelector('.blink-cursor');
727
+
728
+ function typeCommand() {
729
+ const command = commands[currentCommand];
730
+
731
+ if (isDeleting) {
732
+ typingElement.textContent = "> " + command.substring(0, charIndex - 1);
733
+ charIndex--;
734
+
735
+ if (charIndex === 0) {
736
+ isDeleting = false;
737
+ currentCommand = (currentCommand + 1) % commands.length;
738
+ setTimeout(typeCommand, 500);
739
  } else {
740
+ setTimeout(typeCommand, 50);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
741
  }
742
+ } else {
743
+ typingElement.textContent = "> " + command.substring(0, charIndex + 1);
744
+ charIndex++;
745
+
746
+ if (charIndex === command.length) {
747
+ isDeleting = true;
748
+ setTimeout(typeCommand, 2000);
749
+ } else {
750
+ setTimeout(typeCommand, 100);
 
 
 
 
 
 
751
  }
752
+ }
753
+ }
754
+
755
+ // بدء تأثير الكتابة بعد تحميل الصفحة
756
+ setTimeout(typeCommand, 1000);
757
  </script>
758
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=gghjgff/jgvcvccv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
759
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- صنع موقع ذكاء الاصطناعي يقوم رد ع مستخدمين و يناء الهم مواقع و كواد اريد تربط بيك و يرد عليهم نفس نا ترد انت و يكون شات و فخم موقع و تصميم جبار
 
 
1
+ صنع موقع ذكاء الاصطناعي يقوم رد ع مستخدمين و يناء الهم مواقع و كواد اريد تربط بيك و يرد عليهم نفس نا ترد انت و يكون شات و فخم موقع و تصميم جبار
2
+ اريد موقع تعليم عن الهكرز و شرح كامل و تضيف دورس و الاوامر و الاظوات و. ملشي و واجه هكرز و صور