Hugging Face's logo

Spaces:
fastpro
/
TRANSLATE
Running

App Files Community
joermd commited on
Commit
7b3e2bc
·
verified ·
1 Parent(s): fbe5640

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +429 -19
index.html CHANGED
@@ -1,19 +1,429 @@
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
+
8
+ <!-- External Libraries -->
9
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+
12
+ <!-- Custom Styles -->
13
+ <link rel="stylesheet" href="styles.css">
14
+
15
+ <!-- External Scripts -->
16
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
17
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
18
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
19
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
20
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.8.2/docx.js"></script>
21
+ </head>
22
+ <body class="bg-gray-50 transition-all duration-300" id="mainBody">
23
+ <!-- Dark Mode Toggle -->
24
+ <div class="fixed top-4 left-4 z-50">
25
+ <button id="darkModeToggle" class="bg-white dark:bg-gray-800 p-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-600">
26
+ <i class="fas fa-moon text-gray-600 dark:text-yellow-400 text-lg"></i>
27
+ </button>
28
+ </div>
29
+
30
+ <!-- Loading Overlay -->
31
+ <div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
32
+ <div class="bg-white dark:bg-gray-800 rounded-xl p-8 max-w-md mx-4 text-center">
33
+ <div class="animate-spin h-12 w-12 border-4 border-blue-600 rounded-full border-t-transparent mx-auto mb-4"></div>
34
+ <h3 class="text-lg font-bold mb-2">جاري المعالجة...</h3>
35
+ <p id="loadingMessage">يرجى الانتظار</p>
36
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-4">
37
+ <div id="globalProgressBar" class="bg-blue-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
38
+ </div>
39
+ </div>
40
+ </div>
41
+
42
+ <div class="min-h-screen pb-12">
43
+ <!-- Header Section -->
44
+ <header class="bg-gradient-to-r from-blue-600 to-indigo-800 dark:from-blue-800 dark:to-indigo-900 text-white py-10 mb-6 shadow-xl">
45
+ <div class="max-w-7xl mx-auto px-4">
46
+ <div class="flex items-center justify-center mb-6">
47
+ <div class="logo-container flex items-center">
48
+ <div class="logo pulse-animation"></div>
49
+ <div class="company-name text-2xl font-bold">شركة الريحان</div>
50
+ </div>
51
+ </div>
52
+ <h1 class="text-4xl sm:text-5xl font-bold text-center mb-4 animate-scale">المراجع الذكي</h1>
53
+ <p class="text-center text-xl text-blue-100 opacity-90">نظام متكامل لمقارنة وتحليل النصوص المترجمة بالذكاء الاصطناعي</p>
54
+
55
+ <!-- Features Overview -->
56
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
57
+ <div class="bg-white bg-opacity-10 rounded-lg p-4 text-center">
58
+ <i class="fas fa-robot text-3xl mb-2"></i>
59
+ <h3 class="font-bold">ذكاء اصطناعي متقدم</h3>
60
+ <p class="text-sm opacity-80">تحليل دقيق للنصوص والترجمات</p>
61
+ </div>
62
+ <div class="bg-white bg-opacity-10 rounded-lg p-4 text-center">
63
+ <i class="fas fa-file-alt text-3xl mb-2"></i>
64
+ <h3 class="font-bold">دعم متعدد الصيغ</h3>
65
+ <p class="text-sm opacity-80">PDF, Word, Excel, والصور</p>
66
+ </div>
67
+ <div class="bg-white bg-opacity-10 rounded-lg p-4 text-center">
68
+ <i class="fas fa-chart-line text-3xl mb-2"></i>
69
+ <h3 class="font-bold">تقارير مفصلة</h3>
70
+ <p class="text-sm opacity-80">تحليل شامل وتوصيات محددة</p>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </header>
75
+
76
+ <!-- Main Content -->
77
+ <main class="max-w-7xl mx-auto px-4">
78
+
79
+ <!-- File Upload Section - Enhanced -->
80
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border border-gray-100 dark:border-gray-700 hover:shadow-lg transition-all animate-scale mb-6 card-hover">
81
+ <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white flex items-center border-b pb-3 dark:border-gray-600">
82
+ <i class="fas fa-cloud-upload-alt text-blue-600 ml-2"></i> تحميل الملفات
83
+ </h2>
84
+
85
+ <!-- Enhanced File Type Selector -->
86
+ <div class="file-type-selector">
87
+ <h3 class="text-lg font-bold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
88
+ <i class="fas fa-cog text-blue-600 ml-2"></i> نوع الملف المُحمّل
89
+ </h3>
90
+ <div class="file-type-options">
91
+ <div class="file-type-option selected" data-type="normal">
92
+ <input type="radio" id="normalFile" name="fileType" value="normal" checked>
93
+ <label for="normalFile">
94
+ <i class="fas fa-file-alt"></i>
95
+ ملف عادي
96
+ </label>
97
+ </div>
98
+ <div class="file-type-option" data-type="official">
99
+ <input type="radio" id="officialFile" name="fileType" value="official">
100
+ <label for="officialFile">
101
+ <i class="fas fa-certificate"></i>
102
+ مستند رسمي
103
+ </label>
104
+ </div>
105
+ <div class="file-type-option" data-type="comparison">
106
+ <input type="radio" id="comparisonFile" name="fileType" value="comparison">
107
+ <label for="comparisonFile">
108
+ <i class="fas fa-balance-scale"></i>
109
+ مقارنة ثلاثية
110
+ </label>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- Enhanced Drag & Drop Area -->
116
+ <div id="dropZone" class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
117
+ <!-- Source File -->
118
+ <div class="upload-area" data-type="source">
119
+ <input type="file" id="sourceFile" accept=".docx,.pdf,.jpg,.jpeg,.png,.xlsx,.xls" class="hidden" multiple>
120
+ <div class="drop-content">
121
+ <i class="fas fa-file-upload text-5xl text-blue-500 mb-4"></i>
122
+ <span class="text-lg text-blue-600">ملف السورس</span>
123
+ <p class="text-sm text-gray-500 mt-2">اسحب الملفات هنا أو انقر للتحديد</p>
124
+ <div class="file-list mt-2"></div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Target File -->
129
+ <div class="upload-area" data-type="target">
130
+ <input type="file" id="targetFile" accept=".docx,.pdf,.jpg,.jpeg,.png,.xlsx,.xls" class="hidden" multiple>
131
+ <div class="drop-content">
132
+ <i class="fas fa-file-download text-5xl text-blue-500 mb-4"></i>
133
+ <span class="text-lg text-blue-600">ملف التارجت</span>
134
+ <p class="text-sm text-gray-500 mt-2">اسحب الملفات هنا أو انقر للتحديد</p>
135
+ <div class="file-list mt-2"></div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Reference File (for 3-way comparison) -->
140
+ <div class="upload-area hidden" data-type="reference" id="referenceUpload">
141
+ <input type="file" id="referenceFile" accept=".docx,.pdf,.jpg,.jpeg,.png,.xlsx,.xls" class="hidden" multiple>
142
+ <div class="drop-content">
143
+ <i class="fas fa-file-contract text-5xl text-blue-500 mb-4"></i>
144
+ <span class="text-lg text-blue-600">ملف المرجع</span>
145
+ <p class="text-sm text-gray-500 mt-2">اسحب الملفات هنا أو انقر للتحديد</p>
146
+ <div class="file-list mt-2"></div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Processing Status -->
152
+ <div id="processingStatus" class="hidden mt-6">
153
+ <div class="bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded-xl p-4">
154
+ <div class="flex items-center">
155
+ <div class="animate-spin h-6 w-6 border-4 border-blue-600 rounded-full border-t-transparent ml-3"></div>
156
+ <span id="statusText" class="dark:text-white">جاري معالجة الملف...</span>
157
+ </div>
158
+ <div class="progress mt-3">
159
+ <div id="progressBar" class="progress-bar" style="width: 0%"></div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- OCR and File Processing Results -->
165
+ <div id="fileResults" class="hidden mt-6">
166
+ <!-- Content will be populated by JavaScript -->
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Text Input Section - Enhanced -->
171
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border border-gray-100 dark:border-gray-700 hover:shadow-lg transition-all animate-scale mb-6 card-hover">
172
+ <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white flex items-center border-b pb-3 dark:border-gray-600">
173
+ <i class="fas fa-pen-alt text-blue-600 ml-2"></i> إدخال النصوص
174
+ </h2>
175
+
176
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
177
+ <!-- Source Text -->
178
+ <div class="text-input-group">
179
+ <label class="block text-lg font-bold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
180
+ <i class="fas fa-language text-blue-600 ml-2"></i> النص المصدر
181
+ </label>
182
+ <textarea id="sourceText" dir="rtl" class="enhanced-textarea" rows="8" placeholder="اكتب النص المصدر هنا..."></textarea>
183
+ <div class="text-stats">
184
+ <span>الكلمات: <span id="sourceWordCount">0</span></span>
185
+ <span>الأحرف: <span id="sourceCharCount">0</span></span>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Target Text -->
190
+ <div class="text-input-group">
191
+ <label class="block text-lg font-bold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
192
+ <i class="fas fa-language text-blue-600 ml-2"></i> النص الهدف
193
+ </label>
194
+ <textarea id="targetText" dir="ltr" class="enhanced-textarea" rows="8" placeholder="اكتب النص الهدف هنا..."></textarea>
195
+ <div class="text-stats">
196
+ <span>الكلمات: <span id="targetWordCount">0</span></span>
197
+ <span>الأحرف: <span id="targetCharCount">0</span></span>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Reference Text (for 3-way comparison) -->
202
+ <div class="text-input-group hidden" id="referenceTextGroup">
203
+ <label class="block text-lg font-bold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
204
+ <i class="fas fa-book text-blue-600 ml-2"></i> النص المرجعي
205
+ </label>
206
+ <textarea id="referenceText" dir="ltr" class="enhanced-textarea" rows="8" placeholder="اكتب النص المرجعي هنا..."></textarea>
207
+ <div class="text-stats">
208
+ <span>الكلمات: <span id="referenceWordCount">0</span></span>
209
+ <span>الأحرف: <span id="referenceCharCount">0</span></span>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Text Enhancement Options -->
215
+ <div class="mt-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
216
+ <h3 class="font-bold mb-3 text-gray-700 dark:text-gray-300">خيارات التحسين</h3>
217
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
218
+ <label class="flex items-center">
219
+ <input type="checkbox" id="autoCorrect" class="mr-2">
220
+ <span class="text-gray-700 dark:text-gray-300">التصحيح التلقائي</span>
221
+ </label>
222
+ <label class="flex items-center">
223
+ <input type="checkbox" id="terminologyCheck" class="mr-2">
224
+ <span class="text-gray-700 dark:text-gray-300">فحص المصطلحات</span>
225
+ </label>
226
+ <label class="flex items-center">
227
+ <input type="checkbox" id="educationalMode" class="mr-2">
228
+ <span class="text-gray-700 dark:text-gray-300">الوضع التعليمي</span>
229
+ </label>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Analysis Button - Enhanced -->
235
+ <div class="text-center mb-8">
236
+ <button id="analyzeBtn" class="enhanced-btn-primary px-12 py-4 text-xl">
237
+ <i class="fas fa-brain ml-2"></i>
238
+ <span>تحليل النصوص بالذكاء الاصطناعي</span>
239
+ </button>
240
+ </div>
241
+
242
+ <!-- Results Section - Enhanced -->
243
+ <div id="resultSection" class="hidden">
244
+ <!-- Analysis Summary Cards -->
245
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
246
+ <div class="summary-card bg-blue-50 dark:bg-blue-900 border-blue-200 dark:border-blue-700">
247
+ <div class="summary-icon bg-blue-500">
248
+ <i class="fas fa-chart-line"></i>
249
+ </div>
250
+ <div>
251
+ <div class="summary-number" id="totalErrors">0</div>
252
+ <div class="summary-label">إجمالي الاختلافات</div>
253
+ </div>
254
+ </div>
255
+
256
+ <div class="summary-card bg-yellow-50 dark:bg-yellow-900 border-yellow-200 dark:border-yellow-700">
257
+ <div class="summary-icon bg-yellow-500">
258
+ <i class="fas fa-hashtag"></i>
259
+ </div>
260
+ <div>
261
+ <div class="summary-number" id="numberErrors">0</div>
262
+ <div class="summary-label">أخطاء الأرقام</div>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="summary-card bg-red-50 dark:bg-red-900 border-red-200 dark:border-red-700">
267
+ <div class="summary-icon bg-red-500">
268
+ <i class="fas fa-exclamation-triangle"></i>
269
+ </div>
270
+ <div>
271
+ <div class="summary-number" id="meaningErrors">0</div>
272
+ <div class="summary-label">اختلافات المعنى</div>
273
+ </div>
274
+ </div>
275
+
276
+ <div class="summary-card bg-green-50 dark:bg-green-900 border-green-200 dark:border-green-700">
277
+ <div class="summary-icon bg-green-500">
278
+ <i class="fas fa-percentage"></i>
279
+ </div>
280
+ <div>
281
+ <div class="summary-number" id="accuracyScore">0%</div>
282
+ <div class="summary-label">دقة الترجمة</div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Error Filters -->
288
+ <div class="error-filters-container mb-6">
289
+ <h3 class="text-lg font-bold mb-3 text-gray-700 dark:text-gray-300">فلترة الأخطاء</h3>
290
+ <div class="error-filters">
291
+ <button class="error-filter active" data-filter="all">
292
+ <i class="fas fa-layer-group"></i> جميع الأخطاء
293
+ </button>
294
+ <button class="error-filter" data-filter="numbers">
295
+ <i class="fas fa-hashtag"></i> أخطاء الأرقام
296
+ </button>
297
+ <button class="error-filter" data-filter="missing">
298
+ <i class="fas fa-minus-circle"></i> نصوص مفقودة
299
+ </button>
300
+ <button class="error-filter" data-filter="meaning">
301
+ <i class="fas fa-exclamation-circle"></i> اختلافات المعنى
302
+ </button>
303
+ </div>
304
+ </div>
305
+
306
+ <!-- View Selector -->
307
+ <div class="view-selector mb-6">
308
+ <button class="view-btn active" data-view="classic">
309
+ <i class="fas fa-columns"></i> العرض الكلاسيكي
310
+ </button>
311
+ <button class="view-btn" data-view="segment">
312
+ <i class="fas fa-th-large"></i> العرض المقسم
313
+ </button>
314
+ <button class="view-btn" data-view="interactive">
315
+ <i class="fas fa-exchange-alt"></i> العرض التفاعلي
316
+ </button>
317
+ <button class="view-btn" data-view="threeway" id="threewayViewBtn" style="display: none;">
318
+ <i class="fas fa-balance-scale"></i> المقارنة الثلاثية
319
+ </button>
320
+ </div>
321
+
322
+ <!-- View Containers -->
323
+ <div id="classicView" class="view-container active">
324
+ <!-- Classic view content -->
325
+ </div>
326
+
327
+ <div id="segmentView" class="view-container">
328
+ <!-- Segment view content -->
329
+ </div>
330
+
331
+ <div id="interactiveView" class="view-container">
332
+ <!-- Interactive view content -->
333
+ </div>
334
+
335
+ <div id="threewayView" class="view-container">
336
+ <!-- Three-way comparison content -->
337
+ </div>
338
+ </div>
339
+
340
+ <!-- Export Options -->
341
+ <div id="exportSection" class="hidden mt-8">
342
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border border-gray-100 dark:border-gray-700">
343
+ <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">تصدير التقرير</h3>
344
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
345
+ <button id="exportPDF" class="export-btn bg-red-500 hover:bg-red-600">
346
+ <i class="fas fa-file-pdf"></i>
347
+ تصدير PDF
348
+ </button>
349
+ <button id="exportWord" class="export-btn bg-blue-500 hover:bg-blue-600">
350
+ <i class="fas fa-file-word"></i>
351
+ تصدير Word
352
+ </button>
353
+ <button id="exportExcel" class="export-btn bg-green-500 hover:bg-green-600">
354
+ <i class="fas fa-file-excel"></i>
355
+ تصدير Excel
356
+ </button>
357
+ <button id="exportJSON" class="export-btn bg-purple-500 hover:bg-purple-600">
358
+ <i class="fas fa-code"></i>
359
+ تصدير JSON
360
+ </button>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </main>
365
+
366
+ <!-- Educational Mode Panel -->
367
+ <div id="educationalPanel" class="fixed right-0 top-0 h-full w-80 bg-white dark:bg-gray-800 shadow-2xl transform translate-x-full transition-transform duration-300 z-40">
368
+ <div class="p-6 border-b dark:border-gray-700">
369
+ <div class="flex justify-between items-center">
370
+ <h3 class="text-lg font-bold text-gray-800 dark:text-white">الوضع التعليمي</h3>
371
+ <button id="closeEducationalPanel" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
372
+ <i class="fas fa-times text-xl"></i>
373
+ </button>
374
+ </div>
375
+ </div>
376
+ <div id="educationalContent" class="p-6 overflow-y-auto h-full">
377
+ <!-- Educational content will be populated by JavaScript -->
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Error Details Modal -->
382
+ <div id="errorModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
383
+ <div class="bg-white dark:bg-gray-800 rounded-xl max-w-2xl w-full mx-4 max-h-90vh overflow-hidden">
384
+ <div class="p-6 border-b dark:border-gray-700">
385
+ <div class="flex justify-between items-center">
386
+ <h3 id="errorModalTitle" class="text-xl font-bold text-gray-800 dark:text-white"></h3>
387
+ <button id="closeErrorModal" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
388
+ <i class="fas fa-times text-xl"></i>
389
+ </button>
390
+ </div>
391
+ </div>
392
+ <div id="errorModalContent" class="p-6 overflow-y-auto max-h-96">
393
+ <!-- Error details content -->
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Footer -->
399
+ <footer class="bg-gray-100 dark:bg-gray-800 border-t dark:border-gray-700 mt-12 py-8">
400
+ <div class="max-w-7xl mx-auto px-4 text-center">
401
+ <div class="flex flex-col md:flex-row justify-between items-center">
402
+ <div class="mb-4 md:mb-0">
403
+ <p class="text-gray-600 dark:text-gray-400">جميع الحقوق محفوظة © <span id="currentYear"></span> شركة فاست برو للبرمجيات والذكاء الاصطناعي</p>
404
+ </div>
405
+ <div class="flex space-x-4">
406
+ <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
407
+ <i class="fab fa-twitter text-xl"></i>
408
+ </a>
409
+ <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
410
+ <i class="fab fa-linkedin text-xl"></i>
411
+ </a>
412
+ <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
413
+ <i class="fab fa-github text-xl"></i>
414
+ </a>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </footer>
419
+ </div>
420
+
421
+ <!-- Custom Scripts -->
422
+ <script src="script.js"></script>
423
+
424
+ <script>
425
+ // Initialize current year
426
+ document.getElementById('currentYear').textContent = new Date().getFullYear();
427
+ </script>
428
+ </body>
429
+ </html>