Hugging Face's logo

Spaces:
asranko45
/
molakhas
Running

App Files Community
asranko45 commited on
Commit
244d5e2
·
verified ·
1 Parent(s): bd5672b

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +984 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Molakhas
3
- emoji: 🐠
4
- colorFrom: yellow
5
- colorTo: green
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: molakhas
3
+ emoji: 🐳
4
+ colorFrom: red
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,984 @@
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
+ <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>
10
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
11
+
12
+ body {
13
+ font-family: 'Tajawal', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .rtl {
18
+ direction: rtl;
19
+ }
20
+
21
+ .ltr {
22
+ direction: ltr;
23
+ }
24
+
25
+ .gradient-bg {
26
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
27
+ }
28
+
29
+ .book-card:hover {
30
+ transform: translateY(-5px);
31
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
32
+ }
33
+
34
+ .loading-dots:after {
35
+ content: " .";
36
+ animation: dots 1.5s steps(5, end) infinite;
37
+ }
38
+
39
+ @keyframes dots {
40
+ 0%, 20% {
41
+ color: rgba(0,0,0,0);
42
+ text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
43
+ }
44
+ 40% {
45
+ color: currentColor;
46
+ text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
47
+ }
48
+ 60% {
49
+ text-shadow: .25em 0 0 currentColor, .5em 0 0 rgba(0,0,0,0);
50
+ }
51
+ 80%, 100% {
52
+ text-shadow: .25em 0 0 currentColor, .5em 0 0 currentColor;
53
+ }
54
+ }
55
+
56
+ .file-upload {
57
+ border: 2px dashed #cbd5e1;
58
+ transition: all 0.3s ease;
59
+ }
60
+
61
+ .file-upload:hover {
62
+ border-color: #818cf8;
63
+ background-color: #f8fafc;
64
+ }
65
+
66
+ .file-upload.dragover {
67
+ border-color: #4f46e5;
68
+ background-color: #e0e7ff;
69
+ }
70
+
71
+ .flip-card {
72
+ perspective: 1000px;
73
+ }
74
+
75
+ .flip-card-inner {
76
+ transition: transform 0.6s;
77
+ transform-style: preserve-3d;
78
+ }
79
+
80
+ .flip-card:hover .flip-card-inner {
81
+ transform: rotateY(180deg);
82
+ }
83
+
84
+ .flip-card-front, .flip-card-back {
85
+ backface-visibility: hidden;
86
+ }
87
+
88
+ .flip-card-back {
89
+ transform: rotateY(180deg);
90
+ }
91
+ </style>
92
+ </head>
93
+ <body class="rtl bg-gray-50 text-gray-800">
94
+ <!-- شريط التنقل -->
95
+ <nav class="gradient-bg text-white shadow-lg">
96
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
97
+ <div class="flex items-center space-x-2 space-x-reverse">
98
+ <i class="fas fa-book-open text-2xl"></i>
99
+ <h1 class="text-xl font-bold">كتابي</h1>
100
+ </div>
101
+ <div class="hidden md:flex space-x-6 space-x-reverse">
102
+ <a href="#" class="hover:text-gray-200">الرئيسية</a>
103
+ <a href="#" class="hover:text-gray-200">المكتبة</a>
104
+ <a href="#" class="hover:text-gray-200">التلخيصات</a>
105
+ <a href="#" class="hover:text-gray-200">المساعدة</a>
106
+ </div>
107
+ <div class="flex items-center space-x-3 space-x-reverse">
108
+ <button id="loginBtn" class="hidden md:block bg-white text-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition">
109
+ تسجيل الدخول
110
+ </button>
111
+ <button class="md:hidden text-white" id="mobileMenuBtn">
112
+ <i class="fas fa-bars text-xl"></i>
113
+ </button>
114
+ </div>
115
+ </div>
116
+ </nav>
117
+
118
+ <!-- القسم الرئيسي -->
119
+ <main>
120
+ <!-- قسم الترحيب -->
121
+ <section class="gradient-bg text-white py-16">
122
+ <div class="container mx-auto px-4 text-center">
123
+ <h2 class="text-3xl md:text-5xl font-bold mb-6">حوّل أي كتاب إلى ملخص ذكي في دقائق</h2>
124
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">استخدم الذكاء الاصطناعي المتقدم من جيمني 1.5 برو لتلخيص الكتب، تحليل المحتوى، وإنشاء بطاقات تعليمية بسهولة</p>
125
+ <div class="flex flex-col md:flex-row justify-center gap-4">
126
+ <button id="startBtn" class="bg-white text-indigo-600 px-8 py-3 rounded-full font-bold text-lg hover:bg-gray-100 transition flex items-center justify-center">
127
+ ابدأ الآن <i class="fas fa-arrow-left ml-2"></i>
128
+ </button>
129
+ <button id="demoBtn" class="bg-indigo-700 text-white px-8 py-3 rounded-full font-bold text-lg hover:bg-indigo-800 transition flex items-center justify-center">
130
+ شاهد مثال <i class="fas fa-eye ml-2"></i>
131
+ </button>
132
+ </div>
133
+ </div>
134
+ </section>
135
+
136
+ <!-- قسم رفع الملف -->
137
+ <section id="uploadSection" class="container mx-auto px-4 py-12 hidden">
138
+ <div class="bg-white rounded-xl shadow-lg p-6 max-w-4xl mx-auto">
139
+ <div class="flex justify-between items-center mb-6">
140
+ <h3 class="text-2xl font-bold text-gray-800">رفع كتاب جديد</h3>
141
+ <button id="closeUpload" class="text-gray-500 hover:text-gray-700">
142
+ <i class="fas fa-times text-xl"></i>
143
+ </button>
144
+ </div>
145
+
146
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
147
+ <!-- خيارات الرفع -->
148
+ <div>
149
+ <div id="fileUpload" class="file-upload rounded-xl p-8 text-center cursor-pointer mb-6">
150
+ <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4"></i>
151
+ <p class="text-lg font-medium mb-2">اسحب وأسقط ملف هنا</p>
152
+ <p class="text-gray-500 mb-4">أو انقر لاختيار ملف</p>
153
+ <p class="text-sm text-gray-400">يدعم: PDF, DOCX, TXT (حتى 20MB)</p>
154
+ <input type="file" id="fileInput" class="hidden" accept=".pdf,.docx,.txt">
155
+ </div>
156
+
157
+ <div class="text-center">
158
+ <p class="text-gray-500 mb-4">أو</p>
159
+
160
+ <div class="relative mb-4">
161
+ <input type="text" id="urlInput" placeholder="أدخل رابط مباشر للكتاب" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
162
+ <button id="fetchUrl" class="absolute left-3 top-3 bg-indigo-100 text-indigo-600 px-3 py-1 rounded-md hover:bg-indigo-200">
163
+ جلب
164
+ </button>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- إعدادات التلخيص -->
170
+ <div>
171
+ <h4 class="text-lg font-semibold mb-4">إعدادات التلخيص</h4>
172
+
173
+ <div class="mb-4">
174
+ <label class="block text-gray-700 mb-2">لغة الكتاب الأصلية</label>
175
+ <select id="sourceLanguage" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
176
+ <option value="auto">تلقائي</option>
177
+ <option value="ar">العربية</option>
178
+ <option value="en">الإنجليزية</option>
179
+ <option value="fr">الفرنسية</option>
180
+ <option value="de">الألمانية</option>
181
+ </select>
182
+ </div>
183
+
184
+ <div class="mb-4">
185
+ <label class="block text-gray-700 mb-2">لغة الملخص المطلوبة</label>
186
+ <select id="targetLanguage" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
187
+ <option value="ar">العربية</option>
188
+ <option value="en">الإنجليزية</option>
189
+ <option value="fr">الفرنسية</option>
190
+ <option value="de">الألمانية</option>
191
+ </select>
192
+ </div>
193
+
194
+ <div class="mb-4">
195
+ <label class="block text-gray-700 mb-2">نوع التلخيص</label>
196
+ <select id="summaryType" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
197
+ <option value="brief">ملخص مختصر (نقاط رئيسية)</option>
198
+ <option value="detailed">ملخص مفصل (فقرات)</option>
199
+ <option value="critical">تحليل نقدي</option>
200
+ <option value="flashcards">بطاقات تعليمية (Flashcards)</option>
201
+ </select>
202
+ </div>
203
+
204
+ <div class="mb-4">
205
+ <label class="block text-gray-700 mb-2">أسلوب الكتابة</label>
206
+ <select id="writingStyle" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
207
+ <option value="academic">أكاديمي</option>
208
+ <option value="narrative">قصصي</option>
209
+ <option value="journalistic">صحفي</option>
210
+ <option value="simple">بسيط</option>
211
+ </select>
212
+ </div>
213
+
214
+ <div class="flex items-center mb-4">
215
+ <input type="checkbox" id="includeQuotes" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
216
+ <label for="includeQuotes" class="mr-2 block text-gray-700">تضمين اقتباسات مهمة</label>
217
+ </div>
218
+
219
+ <div class="flex items-center mb-4">
220
+ <input type="checkbox" id="sentimentAnalysis" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
221
+ <label for="sentimentAnalysis" class="mr-2 block text-gray-700">تحليل المشاعر</label>
222
+ </div>
223
+
224
+ <button id="summarizeBtn" class="w-full gradient-bg text-white py-3 rounded-lg font-bold hover:opacity-90 transition flex items-center justify-center">
225
+ <i class="fas fa-magic ml-2"></i> أنشئ الملخص
226
+ </button>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </section>
231
+
232
+ <!-- قسم التلخيص الناتج -->
233
+ <section id="resultSection" class="container mx-auto px-4 py-12 hidden">
234
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-6xl mx-auto">
235
+ <!-- شريط التحكم بالنتيجة -->
236
+ <div class="bg-gray-50 px-6 py-4 border-b border-gray-200 flex justify-between items-center">
237
+ <div>
238
+ <h3 class="text-xl font-bold text-gray-800">ملخص كتاب: <span id="bookTitle">العنوان غير معروف</span></h3>
239
+ <p class="text-gray-500 text-sm">تم الإنشاء في <span id="summaryDate">اليوم</span></p>
240
+ </div>
241
+ <div class="flex space-x-3 space-x-reverse">
242
+ <button id="downloadPdf" class="text-gray-500 hover:text-indigo-600 p-2 rounded-full hover:bg-gray-100">
243
+ <i class="fas fa-download"></i>
244
+ </button>
245
+ <button id="printSummary" class="text-gray-500 hover:text-indigo-600 p-2 rounded-full hover:bg-gray-100">
246
+ <i class="fas fa-print"></i>
247
+ </button>
248
+ <button id="shareSummary" class="text-gray-500 hover:text-indigo-600 p-2 rounded-full hover:bg-gray-100">
249
+ <i class="fas fa-share-alt"></i>
250
+ </button>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- محتوى الملخص -->
255
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-0">
256
+ <!-- لوحة التحكم -->
257
+ <div class="bg-gray-50 p-6 border-r border-gray-200">
258
+ <div class="mb-6">
259
+ <h4 class="font-semibold mb-3">خيارات الملخص</h4>
260
+ <div class="space-y-3">
261
+ <button id="mainSummaryBtn" class="w-full text-right px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg font-medium">
262
+ الملخص الرئيسي
263
+ </button>
264
+ <button id="keyPointsBtn" class="w-full text-right px-4 py-2 hover:bg-gray-100 rounded-lg font-medium">
265
+ النقاط الرئيسية
266
+ </button>
267
+ <button id="charactersBtn" class="w-full text-right px-4 py-2 hover:bg-gray-100 rounded-lg font-medium">
268
+ الشخصيات الرئيسية
269
+ </button>
270
+ <button id="quotesBtn" class="w-full text-right px-4 py-2 hover:bg-gray-100 rounded-lg font-medium">
271
+ الاقتباسات المهمة
272
+ </button>
273
+ <button id="flashcardsBtn" class="w-full text-right px-4 py-2 hover:bg-gray-100 rounded-lg font-medium">
274
+ بطاقات تعليمية
275
+ </button>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="mb-6">
280
+ <h4 class="font-semibold mb-3">تصدير الملخص</h4>
281
+ <div class="grid grid-cols-2 gap-2">
282
+ <button id="exportPdf" class="flex items-center justify-center px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
283
+ <i class="fas fa-file-pdf text-red-500 mr-1"></i> PDF
284
+ </button>
285
+ <button id="exportDocx" class="flex items-center justify-center px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
286
+ <i class="fas fa-file-word text-blue-500 mr-1"></i> DOCX
287
+ </button>
288
+ <button id="exportTxt" class="flex items-center justify-center px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
289
+ <i class="fas fa-file-alt text-gray-500 mr-1"></i> TXT
290
+ </button>
291
+ <button id="exportEpub" class="flex items-center justify-center px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
292
+ <i class="fas fa-file-export text-green-500 mr-1"></i> EPUB
293
+ </button>
294
+ </div>
295
+ </div>
296
+
297
+ <div id="sentimentAnalysisSection">
298
+ <h4 class="font-semibold mb-3">تحليل المشاعر</h4>
299
+ <div class="bg-white p-4 rounded-lg shadow-sm">
300
+ <div class="flex items-center justify-between mb-2">
301
+ <span class="text-sm font-medium">إيجابي</span>
302
+ <span class="text-sm font-bold text-green-500" id="positiveSentiment">68%</span>
303
+ </div>
304
+ <div class="w-full bg-gray-200 rounded-full h-2">
305
+ <div class="bg-green-500 h-2 rounded-full" id="positiveBar" style="width: 68%"></div>
306
+ </div>
307
+
308
+ <div class="flex items-center justify-between mb-2 mt-3">
309
+ <span class="text-sm font-medium">محايد</span>
310
+ <span class="text-sm font-bold text-yellow-500" id="neutralSentiment">25%</span>
311
+ </div>
312
+ <div class="w-full bg-gray-200 rounded-full h-2">
313
+ <div class="bg-yellow-500 h-2 rounded-full" id="neutralBar" style="width: 25%"></div>
314
+ </div>
315
+
316
+ <div class="flex items-center justify-between mb-2 mt-3">
317
+ <span class="text-sm font-medium">سلبي</span>
318
+ <span class="text-sm font-bold text-red-500" id="negativeSentiment">7%</span>
319
+ </div>
320
+ <div class="w-full bg-gray-200 rounded-full h-2">
321
+ <div class="bg-red-500 h-2 rounded-full" id="negativeBar" style="width: 7%"></div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- محتوى الملخص -->
328
+ <div class="col-span-2 p-6">
329
+ <div class="prose max-w-none" id="summaryContent">
330
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">ملخص الكتاب</h3>
331
+ <p class="mb-4">هذا الملخص تم إنشاؤه باستخدام الذكاء الاصطناعي لتوفير أهم النقاط والأفكار الرئيسية في الكتاب. يمكنك تعديل خيارات التلخيص من اللوحة الجانبية للحصول على نتائج مختلفة.</p>
332
+
333
+ <div class="bg-indigo-50 border-l-4 border-indigo-500 p-4 mb-6">
334
+ <p class="text-indigo-700 font-medium">جاري معالجة الكتاب وتلخيص المحتوى، الرجاء الانتظار...</p>
335
+ </div>
336
+
337
+ <div id="loadingAnimation" class="text-center py-8">
338
+ <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500 mb-4"></div>
339
+ <p class="text-gray-600 loading-dots">جاري إنشاء الملخص</p>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </section>
346
+
347
+ <!-- قسم المميزات -->
348
+ <section class="bg-white py-16">
349
+ <div class="container mx-auto px-4">
350
+ <h2 class="text-3xl font-bold text-center mb-12">كيف يعمل كتابي؟</h2>
351
+
352
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
353
+ <div class="bg-gray-50 p-6 rounded-xl text-center">
354
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
355
+ <i class="fas fa-upload text-indigo-600 text-2xl"></i>
356
+ </div>
357
+ <h3 class="text-xl font-semibold mb-3">رفع الكتاب</h3>
358
+ <p class="text-gray-600">قم برفع كتابك بصيغة PDF، DOCX أو TXT، أو أدخل رابط مباشر للكتاب على الإنترنت.</p>
359
+ </div>
360
+
361
+ <div class="bg-gray-50 p-6 rounded-xl text-center">
362
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
363
+ <i class="fas fa-cog text-indigo-600 text-2xl"></i>
364
+ </div>
365
+ <h3 class="text-xl font-semibold mb-3">تخصيص الملخص</h3>
366
+ <p class="text-gray-600">اختر لغة الملخص، مستوى التفصيل، أسلوب الكتابة، والميزات الإضافية التي تريدها.</p>
367
+ </div>
368
+
369
+ <div class="bg-gray-50 p-6 rounded-xl text-center">
370
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
371
+ <i class="fas fa-file-alt text-indigo-600 text-2xl"></i>
372
+ </div>
373
+ <h3 class="text-xl font-semibold mb-3">احصل على النتيجة</h3>
374
+ <p class="text-gray-600">استلم ملخصك الذكي مع نقاط رئيسية، اقتباسات، تحليل مشاعر، وبطاقات تعليمية جاهزة.</p>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </section>
379
+
380
+ <!-- قسم الاستخدامات -->
381
+ <section class="bg-gray-50 py-16">
382
+ <div class="container mx-auto px-4">
383
+ <h2 class="text-3xl font-bold text-center mb-12">لماذا تستخدم كتابي؟</h2>
384
+
385
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
386
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
387
+ <i class="fas fa-user-graduate text-indigo-600 text-2xl mb-3"></i>
388
+ <h3 class="text-lg font-semibold mb-2">للطلاب</h3>
389
+ <p class="text-gray-600">وفر الوقت في الدراسة واحصل على ملخصات دقيقة للمقررات والكتب الأكاديمية.</p>
390
+ </div>
391
+
392
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
393
+ <i class="fas fa-book-reader text-indigo-600 text-2xl mb-3"></i>
394
+ <h3 class="text-lg font-semibold mb-2">للمهتمين بالقراءة</h3>
395
+ <p class="text-gray-600">اقرأ ملخصات سريعة قبل شراء الكتب أو لتذكر محتوى الكتب التي قرأتها سابقاً.</p>
396
+ </div>
397
+
398
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
399
+ <i class="fas fa-briefcase text-indigo-600 text-2xl mb-3"></i>
400
+ <h3 class="text-lg font-semibold mb-2">للمحترفين</h3>
401
+ <p class="text-gray-600">احصل على نقاط رئيسية من الكتب المهنية والتقارير الطويلة في دقائق.</p>
402
+ </div>
403
+
404
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
405
+ <i class="fas fa-pen-fancy text-indigo-600 text-2xl mb-3"></i>
406
+ <h3 class="text-lg font-semibold mb-2">للكتّاب والباحثين</h3>
407
+ <p class="text-gray-600">حلل الكتب والمراجع بسرعة وأنشئ ملخصات بحثية دقيقة.</p>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </section>
412
+
413
+ <!-- قسم الذكاء الاصطناعي -->
414
+ <section class="bg-white py-16">
415
+ <div class="container mx-auto px-4">
416
+ <h2 class="text-3xl font-bold text-center mb-12">قوة جيمني 1.5 برو</h2>
417
+
418
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
419
+ <div>
420
+ <h3 class="text-2xl font-semibold mb-4">أحدث تقنيات الذكاء الاصطناعي من جوجل</h3>
421
+ <p class="text-gray-600 mb-6">يستخدم كتابي نموذج جيمني 1.5 برو المتقدم من جوجل لتقديم أفضل تجربة تلخيص للكتب. هذا النموذج قادر على فهم السياق، تحليل النصوص المعقدة، وإنتاج ملخصات دقيقة وذكية.</p>
422
+
423
+ <div class="space-y-4">
424
+ <div class="flex items-start">
425
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
426
+ <i class="fas fa-brain text-indigo-600"></i>
427
+ </div>
428
+ <div>
429
+ <h4 class="font-semibold">فهم عميق للمحتوى</h4>
430
+ <p class="text-gray-500 text-sm">القدرة على فهم وتحليل الكتب الطويلة والمعقدة</p>
431
+ </div>
432
+ </div>
433
+
434
+ <div class="flex items-start">
435
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
436
+ <i class="fas fa-language text-indigo-600"></i>
437
+ </div>
438
+ <div>
439
+ <h4 class="font-semibold">دعم متعدد اللغات</h4>
440
+ <p class="text-gray-500 text-sm">تلخيص وترجمة بين عشرات اللغات بدقة عالية</p>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="flex items-start">
445
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
446
+ <i class="fas fa-lightbulb text-indigo-600"></i>
447
+ </div>
448
+ <div>
449
+ <h4 class="font-semibold">تحليل ذكي</h4>
450
+ <p class="text-gray-500 text-sm">استخراج الأفكار الرئيسية، المشاعر، والعلاقات بين المفاهيم</p>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+
456
+ <div class="flip-card">
457
+ <div class="flip-card-inner bg-gray-50 rounded-xl p-6 h-64">
458
+ <div class="flip-card-front flex flex-col items-center justify-center h-full">
459
+ <img src="https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg" alt="Gemini Logo" class="w-32 mb-4">
460
+ <h3 class="text-xl font-bold text-indigo-600">جيمني 1.5 برو</h3>
461
+ <p class="text-gray-500">أحدث نموذج ذكاء اصطناعي من جوجل</p>
462
+ </div>
463
+ <div class="flip-card-back flex flex-col items-center justify-center h-full">
464
+ <h3 class="text-xl font-bold mb-3">مميزات جيمني 1.5</h3>
465
+ <ul class="list-disc pr-6 text-gray-600 text-sm space-y-1">
466
+ <li>سياق طويل يصل إلى 1 مليون توكن</li>
467
+ <li>دقة عالية في فهم النصوص المعقدة</li>
468
+ <li>القدرة على تحليل ملفات متعددة التنسيقات</li>
469
+ <li>استنتاجات منطقية وذكية</li>
470
+ <li>أداء سريع وفعال</li>
471
+ </ul>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </section>
478
+ </main>
479
+
480
+ <!-- تذييل الصفحة -->
481
+ <footer class="bg-gray-800 text-white py-12">
482
+ <div class="container mx-auto px-4">
483
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
484
+ <div>
485
+ <h3 class="text-xl font-bold mb-4 flex items-center">
486
+ <i class="fas fa-book-open mr-2"></i> كتابي
487
+ </h3>
488
+ <p class="text-gray-400">منصة ذكية لتلخيص الكتب باستخدام أحدث تقنيات الذكاء الاصطناعي.</p>
489
+ </div>
490
+
491
+ <div>
492
+ <h4 class="font-semibold mb-4">روابط سريعة</h4>
493
+ <ul class="space-y-2">
494
+ <li><a href="#" class="text-gray-400 hover:text-white">الرئيسية</a></li>
495
+ <li><a href="#" class="text-gray-400 hover:text-white">المكتبة</a></li>
496
+ <li><a href="#" class="text-gray-400 hover:text-white">التلخيصات</a></li>
497
+ <li><a href="#" class="text-gray-400 hover:text-white">الأسعار</a></li>
498
+ </ul>
499
+ </div>
500
+
501
+ <div>
502
+ <h4 class="font-semibold mb-4">الدعم</h4>
503
+ <ul class="space-y-2">
504
+ <li><a href="#" class="text-gray-400 hover:text-white">المساعدة</a></li>
505
+ <li><a href="#" class="text-gray-400 hover:text-white">الأسئلة الشائعة</a></li>
506
+ <li><a href="#" class="text-gray-400 hover:text-white">اتصل بنا</a></li>
507
+ <li><a href="#" class="text-gray-400 hover:text-white">الشروط والأحكام</a></li>
508
+ </ul>
509
+ </div>
510
+
511
+ <div>
512
+ <h4 class="font-semibold mb-4">تابعنا</h4>
513
+ <div class="flex space-x-4 space-x-reverse">
514
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-600">
515
+ <i class="fab fa-twitter"></i>
516
+ </a>
517
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-600">
518
+ <i class="fab fa-facebook-f"></i>
519
+ </a>
520
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-600">
521
+ <i class="fab fa-instagram"></i>
522
+ </a>
523
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-600">
524
+ <i class="fab fa-linkedin-in"></i>
525
+ </a>
526
+ </div>
527
+
528
+ <div class="mt-6">
529
+ <p class="text-gray-400 mb-2">اشترك في النشرة البريدية</p>
530
+ <div class="flex">
531
+ <input type="email" placeholder="بريدك الإلكتروني" class="px-4 py-2 bg-gray-700 text-white rounded-r-lg focus:outline-none w-full">
532
+ <button class="bg-indigo-600 px-4 py-2 rounded-l-lg hover:bg-indigo-700">
533
+ <i class="fas fa-paper-plane"></i>
534
+ </button>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </div>
539
+
540
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
541
+ <p>© 2023 كتابي. جميع الحقوق محفوظة.</p>
542
+ </div>
543
+ </div>
544
+ </footer>
545
+
546
+ <script>
547
+ // معالجة أحداث الواجهة
548
+ document.addEventListener('DOMContentLoaded', function() {
549
+ // عناصر الواجهة
550
+ const startBtn = document.getElementById('startBtn');
551
+ const demoBtn = document.getElementById('demoBtn');
552
+ const uploadSection = document.getElementById('uploadSection');
553
+ const closeUpload = document.getElementById('closeUpload');
554
+ const fileUpload = document.getElementById('fileUpload');
555
+ const fileInput = document.getElementById('fileInput');
556
+ const summarizeBtn = document.getElementById('summarizeBtn');
557
+ const resultSection = document.getElementById('resultSection');
558
+ const urlInput = document.getElementById('urlInput');
559
+ const fetchUrl = document.getElementById('fetchUrl');
560
+ const bookTitle = document.getElementById('bookTitle');
561
+ const summaryDate = document.getElementById('summaryDate');
562
+ const summaryContent = document.getElementById('summaryContent');
563
+ const loadingAnimation = document.getElementById('loadingAnimation');
564
+ const sentimentAnalysisSection = document.getElementById('sentimentAnalysisSection');
565
+
566
+ // تار��خ اليوم
567
+ const today = new Date();
568
+ summaryDate.textContent = today.toLocaleDateString('ar-EG');
569
+
570
+ // فتح قسم الرفع
571
+ startBtn.addEventListener('click', function() {
572
+ uploadSection.classList.remove('hidden');
573
+ window.scrollTo({
574
+ top: uploadSection.offsetTop - 20,
575
+ behavior: 'smooth'
576
+ });
577
+ });
578
+
579
+ // عرض مثال توضيحي
580
+ demoBtn.addEventListener('click', function() {
581
+ uploadSection.classList.add('hidden');
582
+ resultSection.classList.remove('hidden');
583
+ bookTitle.textContent = "العادات الذرية - جيمس كلير";
584
+
585
+ // التمرير إلى قسم النتائج
586
+ window.scrollTo({
587
+ top: resultSection.offsetTop - 20,
588
+ behavior: 'smooth'
589
+ });
590
+
591
+ // عرض مثال توضيحي
592
+ showDemoSummary();
593
+ });
594
+
595
+ // إغلاق قسم الرفع
596
+ closeUpload.addEventListener('click', function() {
597
+ uploadSection.classList.add('hidden');
598
+ });
599
+
600
+ // معالجة سحب وإسقاط الملف
601
+ fileUpload.addEventListener('dragover', function(e) {
602
+ e.preventDefault();
603
+ this.classList.add('dragover');
604
+ });
605
+
606
+ fileUpload.addEventListener('dragleave', function() {
607
+ this.classList.remove('dragover');
608
+ });
609
+
610
+ fileUpload.addEventListener('drop', function(e) {
611
+ e.preventDefault();
612
+ this.classList.remove('dragover');
613
+
614
+ if (e.dataTransfer.files.length) {
615
+ fileInput.files = e.dataTransfer.files;
616
+ updateFileInfo(e.dataTransfer.files[0]);
617
+ }
618
+ });
619
+
620
+ fileUpload.addEventListener('click', function() {
621
+ fileInput.click();
622
+ });
623
+
624
+ fileInput.addEventListener('change', function() {
625
+ if (this.files.length) {
626
+ updateFileInfo(this.files[0]);
627
+ }
628
+ });
629
+
630
+ function updateFileInfo(file) {
631
+ const fileInfo = document.createElement('div');
632
+ fileInfo.className = 'mt-4 p-4 bg-green-50 text-green-800 rounded-lg';
633
+ fileInfo.innerHTML = `
634
+ <div class="flex items-center">
635
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
636
+ <span class="font-medium">تم اختيار الملف:</span>
637
+ <span class="mr-2">${file.name}</span>
638
+ <span class="text-sm text-green-600">(${(file.size / (1024 * 1024)).toFixed(2)} MB)</span>
639
+ </div>
640
+ `;
641
+
642
+ // إزالة أي معلومات ملف سابقة
643
+ const oldFileInfo = fileUpload.querySelector('.mt-4');
644
+ if (oldFileInfo) {
645
+ fileUpload.removeChild(oldFileInfo);
646
+ }
647
+
648
+ fileUpload.appendChild(fileInfo);
649
+ }
650
+
651
+ // معالجة طلب التلخيص
652
+ summarizeBtn.addEventListener('click', function() {
653
+ const file = fileInput.files[0];
654
+ const url = urlInput.value.trim();
655
+
656
+ if (!file && !url) {
657
+ alert('الرجاء رفع ملف أو إدخال رابط صحيح');
658
+ return;
659
+ }
660
+
661
+ // جمع إعدادات التلخيص
662
+ const options = {
663
+ sourceLanguage: document.getElementById('sourceLanguage').value,
664
+ targetLanguage: document.getElementById('targetLanguage').value,
665
+ summaryType: document.getElementById('summaryType').value,
666
+ writingStyle: document.getElementById('writingStyle').value,
667
+ includeQuotes: document.getElementById('includeQuotes').checked,
668
+ sentimentAnalysis: document.getElementById('sentimentAnalysis').checked
669
+ };
670
+
671
+ // عرض رسالة تحميل
672
+ uploadSection.classList.add('hidden');
673
+ resultSection.classList.remove('hidden');
674
+
675
+ // تعيين عنوان الكتاب
676
+ if (file) {
677
+ bookTitle.textContent = file.name.replace(/\.[^/.]+$/, ""); // إزالة الامتداد
678
+ } else {
679
+ bookTitle.textContent = url;
680
+ }
681
+
682
+ // التمرير إلى قسم النتائج
683
+ window.scrollTo({
684
+ top: resultSection.offsetTop - 20,
685
+ behavior: 'smooth'
686
+ });
687
+
688
+ // إخفاء تحليل المشاعر إذا لم يتم اختياره
689
+ if (!options.sentimentAnalysis) {
690
+ sentimentAnalysisSection.classList.add('hidden');
691
+ } else {
692
+ sentimentAnalysisSection.classList.remove('hidden');
693
+ }
694
+
695
+ // الاتصال مع API جيمني 1.5 برو
696
+ generateSummary(file, url, options);
697
+ });
698
+
699
+ // دالة الاتصال مع جيمني 1.5 برو
700
+ async function generateSummary(file, url, options) {
701
+ try {
702
+ // في الواقع، هذا سيكون اتصالاً مع API جيمني 1.5 برو
703
+ // هنا نستخدم محاكاة للاتصال
704
+
705
+ // عرض رسالة التحميل
706
+ summaryContent.innerHTML = `
707
+ <div class="bg-indigo-50 border-l-4 border-indigo-500 p-4 mb-6">
708
+ <p class="text-indigo-700 font-medium">جاري معالجة الكتاب وتلخيص المحتوى، الرجاء الانتظار...</p>
709
+ </div>
710
+
711
+ <div id="loadingAnimation" class="text-center py-8">
712
+ <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500 mb-4"></div>
713
+ <p class="text-gray-600 loading-dots">جاري إنشاء الملخص</p>
714
+ </div>
715
+ `;
716
+
717
+ // محاكاة وقت المعالجة
718
+ await new Promise(resolve => setTimeout(resolve, 3000));
719
+
720
+ // عرض النتيجة (في الواقع سيتم الحصول عليها من API)
721
+ showSummaryResult(options);
722
+
723
+ } catch (error) {
724
+ console.error('Error generating summary:', error);
725
+ summaryContent.innerHTML = `
726
+ <div class="bg-red-50 border-l-4 border-red-500 p-4">
727
+ <p class="text-red-700 font-medium">حدث خطأ أثناء إنشاء الملخص. الرجاء المحاولة مرة أخرى.</p>
728
+ </div>
729
+ `;
730
+ }
731
+ }
732
+
733
+ // عرض نتيجة الملخص
734
+ function showSummaryResult(options) {
735
+ // هذه بيانات وهمية، في الواقع سيتم الحصول عليها من API جيمني 1.5 برو
736
+ const summaries = {
737
+ brief: {
738
+ title: "ملخص مختصر",
739
+ content: `
740
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">ملخص مختصر للكتاب</h3>
741
+
742
+ <div class="mb-6">
743
+ <h4 class="text-xl font-semibold mb-3 text-indigo-600">النقاط الرئيسية</h4>
744
+ <ul class="list-disc pr-6 space-y-2">
745
+ <li>النقطة الأولى من الملخص المختصر التي توضح الفكرة الأساسية</li>
746
+ <li>النقطة الثانية التي تشرح مفهومًا رئيسيًا في الكتاب</li>
747
+ <li>النقطة الثالثة التي تلخص الاستنتاجات الرئيسية</li>
748
+ <li>النقطة الرابعة التي تذكر التطبيقات العملية</li>
749
+ </ul>
750
+ </div>
751
+ `
752
+ },
753
+ detailed: {
754
+ title: "ملخص مفصل",
755
+ content: `
756
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">ملخص مفصل للكتاب</h3>
757
+
758
+ <div class="mb-6">
759
+ <h4 class="text-xl font-semibold mb-3 text-indigo-600">نظرة عامة</h4>
760
+ <p class="mb-4">هذا قسم من الملخص المفصل الذي يقدم نظرة شاملة على محتوى الكتاب. هنا يتم شرح الأفكار الرئيسية بتفصيل أكثر مع ربط المفاهيم ببعضها البعض.</p>
761
+
762
+ <p class="mb-4">الفقرة الثانية من الملخص المفصل التي توسع في شرح أحد الموضوعات المهمة في الكتاب. يمكن أن تتضمن هذه الفقرة أمثلة أو توضيحات إضافية تساعد في فهم المادة بشكل أفضل.</p>
763
+ </div>
764
+
765
+ <div class="mb-6">
766
+ <h4 class="text-xl font-semibold mb-3 text-indigo-600">التحليل التفصيلي</h4>
767
+ <p class="mb-4">هنا يتم تقديم تحليل أكثر عمقًا لأجزاء معينة من الكتاب. يمكن أن يتضمن هذا القسم نقاشًا للنظريات المقدمة أو المقارنة بين المفاهيم المختلفة.</p>
768
+ </div>
769
+ `
770
+ },
771
+ critical: {
772
+ title: "تحليل نقدي",
773
+ content: `
774
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">تحليل نقدي للكتاب</h3>
775
+
776
+ <div class="mb-6">
777
+ <h4 class="text-xl font-semibold mb-3 text-indigo-600">نقاط القوة</h4>
778
+ <ul class="list-disc pr-6 space-y-2">
779
+ <li>توضيح جيد للمفاهيم الأساسية وأمثلة عملية</li>
780
+ <li>تنظيم منطقي للمحتوى وتدرج في شرح الأفكار</li>
781
+ <li>استشهادات داعمة وأبحاث حديثة</li>
782
+ </ul>
783
+ </div>
784
+
785
+ <div class="mb-6">
786
+ <h4 class="text-xl font-semibold mb-3 text-indigo-600">نقاط الضعف</h4>
787
+ <ul class="list-disc pr-6 space-y-2">
788
+ <li>عدم تغطية بعض الجوانب المهمة للموضوع</li>
789
+ <li>اعتماد كبير على أمثلة محدودة قد لا تنطبق على جميع الحالات</li>
790
+ </ul>
791
+ </div>
792
+
793
+ <div class="mb-6">
794
+ <h4 class="text-xl font-semibold mb-3 text-indigo-600">التقييم العام</h4>
795
+ <p class="mb-4">هذا الكتاب يقدم نظرة قيمة للموضوع ولكن هناك بعض الجوانب التي تحتاج إلى مزيد من التغطية. بشكل عام، يعتبر مصدرًا مفيدًا للمبتدئين في المجال.</p>
796
+ </div>
797
+ `
798
+ },
799
+ flashcards: {
800
+ title: "بطاقات تعليمية",
801
+ content: `
802
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">بطاقات تعليمية للكتاب</h3>
803
+
804
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
805
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
806
+ <h5 class="font-bold mb-2">ما هو المفهوم الرئيسي للكتاب؟</h5>
807
+ <p class="text-gray-600">المفهوم الرئيسي هو أن التغييرات الصغيرة والمستمرة تؤدي إلى نتائج كبيرة مع مرور الوقت، وهو ما يعرف بقاعدة الـ1%.</p>
808
+ </div>
809
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
810
+ <h5 class="font-bold mb-2">كيف يمكن تطبيق مبدأ التراكم؟</h5>
811
+ <p class="text-gray-600">عن طريق تحديد عادات صغيرة يومية والالتزام بها، حيث تتراكم هذه العادات لتحدث فرقًا كبيرًا على المدى الطويل.</p>
812
+ </div>
813
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
814
+ <h5 class="font-bold mb-2">ما هي تقنية تكديس العادات؟</h5>
815
+ <p class="text-gray-600">هي ربط عادة جديدة بعادة موجودة بالفعل، مثل ممارسة تمارين الإطالة بعد تنظيف الأسنان كل صباح.</p>
816
+ </div>
817
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
818
+ <h5 class="font-bold mb-2">ما هو دور البيئة في تشكيل العادات؟</h5>
819
+ <p class="text-gray-600">البيئة تلعب دورًا أساسيًا في تشكيل العادات، حيث أن تغيير البيئة يمكن أن يجعل العادات الجديدة أسهل والقديمة أصعب.</p>
820
+ </div>
821
+ </div>
822
+ `
823
+ }
824
+ };
825
+
826
+ // عرض الملخص حسب النوع المختار
827
+ let summary = summaries[options.summaryType] || summaries.brief;
828
+
829
+ // إضافة الاقتباسات إذا تم اختيارها
830
+ if (options.includeQuotes) {
831
+ summary.content += `
832
+ <div class="mt-6">
833
+ <h4 class="text-xl font-semibold mb-3 text-indigo-600">أبرز الاقتباسات</h4>
834
+ <div class="space-y-4">
835
+ <blockquote class="border-r-4 border-indigo-500 pr-4 bg-indigo-50 p-4 rounded">
836
+ <p class="italic">"هذا اقتباس مهم من الكتاب يوضح أحد المفاهيم الأساسية."</p>
837
+ </blockquote>
838
+ <blockquote class="border-r-4 border-indigo-500 pr-4 bg-indigo-50 p-4 rounded">
839
+ <p class="italic">"اقتباس آخر يعكس فلسفة الكاتب أو فكرة رئيسية في الكتاب."</p>
840
+ </blockquote>
841
+ </div>
842
+ </div>
843
+ `;
844
+ }
845
+
846
+ // تحديث واجهة المستخدم بالملخص
847
+ summaryContent.innerHTML = summary.content;
848
+
849
+ // تحديث تحليل المشاعر إذا تم اختياره
850
+ if (options.sentimentAnalysis) {
851
+ // هذه بيانات وهمية، في الواقع سيتم الحصول عليها من API
852
+ document.getElementById('positiveSentiment').textContent = "72%";
853
+ document.getElementById('positiveBar').style.width = "72%";
854
+ document.getElementById('neutralSentiment').textContent = "20%";
855
+ document.getElementById('neutralBar').style.width = "20%";
856
+ document.getElementById('negativeSentiment').textContent = "8%";
857
+ document.getElementById('negativeBar').style.width = "8%";
858
+ }
859
+ }
860
+
861
+ // عرض مثال توضيحي
862
+ function showDemoSummary() {
863
+ summaryContent.innerHTML = `
864
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">ملخص كتاب "العادات الذرية"</h3>
865
+
866
+ <div class="mb-6">
867
+ <h4 class="text-xl font-semibold mb-3 text-indigo-600">نظرة عامة</h4>
868
+ <p class="mb-4">يستكشف كتاب "العادات الذرية" كيفية بناء عادات جيدة وكسر العادات السيئة من خلال تغييرات صغيرة ومتراكمة. يؤكد المؤلف جيمس كلير على أن النجاح ليس نتيجة تغييرات جذرية، بل نتيجة قرارات يومية صغيرة.</p>
869
+ </div>
870
+
871
+ <div class="mb-6">
872
+ <h4 class="text-xl font-semibold mb-3 text-indigo-600">النقاط الرئيسية</h4>
873
+ <ul class="list-disc pr-6 space-y-2">
874
+ <li>قاعدة الـ1%: التحسينات الصغيرة اليومية تتراكم مع الوقت لتحقيق نتائج كبيرة</li>
875
+ <li>نظام العادات الأربع: جعلها واضحة، جذابة، سهلة، ومرضية</li>
876
+ <li>تأثير البيئة على العادات أكثر مما نعتقد</li>
877
+ <li>أهمية تحديد الهوية في تغيير العادات</li>
878
+ <li>استخدام تقنية "تكديس العادات" لربط عادات جديدة بعادات موجودة</li>
879
+ </ul>
880
+ </div>
881
+
882
+ <div class="mb-6">
883
+ <h4 class="text-xl font-semibold mb-3 text-indigo-600">أفضل الاقتباسات</h4>
884
+ <div class="space-y-4">
885
+ <blockquote class="border-r-4 border-indigo-500 pr-4 bg-indigo-50 p-4 rounded">
886
+ <p class="italic">"أنت لا ترقى إلى مستوى أهدافك، بل تنحدر إلى مستوى أنظمتك."</p>
887
+ </blockquote>
888
+ <blockquote class="border-r-4 border-indigo-500 pr-4 bg-indigo-50 p-4 rounded">
889
+ <p class="italic">"كل فعل تقوم به هو تصويت للشخص الذي تريد أن تصبح عليه."</p>
890
+ </blockquote>
891
+ </div>
892
+ </div>
893
+
894
+ <div>
895
+ <h4 class="text-xl font-semibold mb-3 text-indigo-600">بطاقات تعليمية</h4>
896
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
897
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
898
+ <h5 class="font-bold mb-2">ما هي قاعدة الـ1%؟</h5>
899
+ <p class="text-gray-600">فكرة أن التحسينات الصغيرة بنسبة 1% يومياً تتراكم مع الوقت لتحقيق نتائج كبيرة، حيث أن 1% تحسن يومي يؤدي إلى تحسن 37 ضعفاً في سنة واحدة.</p>
900
+ </div>
901
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
902
+ <h5 class="font-bold mb-2">ما هي تقنية تكديس العادات؟</h5>
903
+ <p class="text-gray-600">ربط عادة جديدة بعادة موجودة بالفعل، مثل "بعد أن أغسل أسناني بالفرشاة (عادة موجودة)، سأقرأ صفحة من كتاب (عادة جديدة)".</p>
904
+ </div>
905
+ </div>
906
+ </div>
907
+ `;
908
+
909
+ // تحديث تحليل المشاعر
910
+ document.getElementById('positiveSentiment').textContent = "68%";
911
+ document.getElementById('positiveBar').style.width = "68%";
912
+ document.getElementById('neutralSentiment').textContent = "25%";
913
+ document.getElementById('neutralBar').style.width = "25%";
914
+ document.getElementById('negativeSentiment').textContent = "7%";
915
+ document.getElementById('negativeBar').style.width = "7%";
916
+ }
917
+
918
+ // معالجة جلب الرابط
919
+ fetchUrl.addEventListener('click', function() {
920
+ const url = urlInput.value.trim();
921
+ if (url === '') {
922
+ alert('الرجاء إدخال رابط صحيح');
923
+ return;
924
+ }
925
+
926
+ // هنا سيكون الاتصال مع API لتحليل الرابط
927
+ alert('جاري جلب محتوى الرابط، الرجاء الانتظار...');
928
+ });
929
+
930
+ // معالجة أحداث الأزرار الجانبية
931
+ document.getElementById('mainSummaryBtn').addEventListener('click', function() {
932
+ // في الواقع، هذا سيحمل الملخص الرئيسي من البيانات المخزنة
933
+ alert('سيتم عرض الملخص الرئيسي');
934
+ });
935
+
936
+ document.getElementById('keyPointsBtn').addEventListener('click', function() {
937
+ alert('سيتم عرض النقاط الرئيسية');
938
+ });
939
+
940
+ document.getElementById('charactersBtn').addEventListener('click', function() {
941
+ alert('سيتم عرض الشخصيات الرئيسية');
942
+ });
943
+
944
+ document.getElementById('quotesBtn').addEventListener('click', function() {
945
+ alert('سيتم عرض الاقتباسات المهمة');
946
+ });
947
+
948
+ document.getElementById('flashcardsBtn').addEventListener('click', function() {
949
+ alert('سيتم عرض بطاقات التعلم');
950
+ });
951
+
952
+ // معالجة أحداث التصدير
953
+ document.getElementById('exportPdf').addEventListener('click', function() {
954
+ alert('سيتم تصدير الملخص بصيغة PDF');
955
+ });
956
+
957
+ document.getElementById('exportDocx').addEventListener('click', function() {
958
+ alert('سيتم تصدير الملخص بصيغة DOCX');
959
+ });
960
+
961
+ document.getElementById('exportTxt').addEventListener('click', function() {
962
+ alert('سيتم تصدير الملخص بصيغة TXT');
963
+ });
964
+
965
+ document.getElementById('exportEpub').addEventListener('click', function() {
966
+ alert('سيتم تصدير الملخص بصيغة EPUB');
967
+ });
968
+
969
+ // معالجة أحداث الطباعة والتنزيل
970
+ document.getElementById('downloadPdf').addEventListener('click', function() {
971
+ alert('سيتم تنزيل الملخص بصيغة PDF');
972
+ });
973
+
974
+ document.getElementById('printSummary').addEventListener('click', function() {
975
+ window.print();
976
+ });
977
+
978
+ document.getElementById('shareSummary').addEventListener('click', function() {
979
+ alert('سيتم مشاركة الملخص');
980
+ });
981
+ });
982
+ </script>
983
+ <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=asranko45/molakhas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
984
+ </html>
prompts.txt ADDED
File without changes