Hugging Face's logo

Spaces:
methodya
/
liberty-2
Running

App Files Community
methodya commited on
Commit
b93a4f8
·
verified ·
1 Parent(s): 23a1c27

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1404 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Liberty 2
3
- emoji: 😻
4
- colorFrom: green
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: liberty-2
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
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,1404 @@
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
+ .concept-card {
18
+ transition: all 0.3s ease;
19
+ }
20
+
21
+ .concept-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
24
+ }
25
+
26
+ .philosopher-card {
27
+ border-left: 4px solid;
28
+ }
29
+
30
+ .axis-header {
31
+ position: relative;
32
+ }
33
+
34
+ .axis-header::after {
35
+ content: "";
36
+ position: absolute;
37
+ bottom: -10px;
38
+ right: 0;
39
+ width: 100px;
40
+ height: 3px;
41
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
42
+ }
43
+
44
+ .timeline {
45
+ position: relative;
46
+ padding-right: 3rem;
47
+ }
48
+
49
+ .timeline::before {
50
+ content: "";
51
+ position: absolute;
52
+ top: 0;
53
+ right: 1.5rem;
54
+ width: 2px;
55
+ height: 100%;
56
+ background-color: #e2e8f0;
57
+ }
58
+
59
+ .timeline-item {
60
+ position: relative;
61
+ margin-bottom: 2rem;
62
+ }
63
+
64
+ .timeline-item::before {
65
+ content: "";
66
+ position: absolute;
67
+ top: 0.5rem;
68
+ right: -3.3rem;
69
+ width: 1rem;
70
+ height: 1rem;
71
+ border-radius: 50%;
72
+ background-color: #3b82f6;
73
+ z-index: 1;
74
+ }
75
+
76
+ .comparison-card {
77
+ background: linear-gradient(135deg, #f0f9ff, #f5f3ff);
78
+ border: 1px solid #e2e8f0;
79
+ }
80
+
81
+ .floating-btn {
82
+ position: fixed;
83
+ bottom: 2rem;
84
+ left: 2rem;
85
+ z-index: 50;
86
+ }
87
+
88
+ .highlight {
89
+ background: linear-gradient(180deg, rgba(255,255,255,0) 50%, #fef08a 50%);
90
+ }
91
+
92
+ .flip-card {
93
+ perspective: 1000px;
94
+ height: 200px;
95
+ }
96
+
97
+ .flip-card-inner {
98
+ transition: transform 0.6s;
99
+ transform-style: preserve-3d;
100
+ height: 100%;
101
+ }
102
+
103
+ .flip-card:hover .flip-card-inner {
104
+ transform: rotateY(180deg);
105
+ }
106
+
107
+ .flip-card-front, .flip-card-back {
108
+ position: absolute;
109
+ width: 100%;
110
+ height: 100%;
111
+ backface-visibility: hidden;
112
+ border-radius: 0.75rem;
113
+ }
114
+
115
+ .flip-card-back {
116
+ transform: rotateY(180deg);
117
+ }
118
+ </style>
119
+ </head>
120
+ <body class="bg-gray-50">
121
+ <div class="container mx-auto px-4 py-8">
122
+ <!-- Header -->
123
+ <header class="text-center mb-12">
124
+ <h1 class="text-4xl font-bold text-gray-800 mb-4">درس الحرية: مفاهيم أساسية</h1>
125
+ <div class="flex justify-center gap-4">
126
+ <i class="fas fa-dove text-blue-600 text-3xl"></i>
127
+ <i class="fas fa-unlock-alt text-indigo-600 text-3xl"></i>
128
+ </div>
129
+ <p class="text-gray-600 mt-4 max-w-3xl mx-auto">دراسة فلسفية لمفهوم الحرية عبر المحاور الأساسية</p>
130
+ </header>
131
+
132
+ <!-- Main Concepts Diagram -->
133
+ <section class="bg-white rounded-xl shadow-md p-6 mb-12">
134
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 axis-header">المفاهيم الأساسية العامة</h2>
135
+
136
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
137
+ <!-- Freedom Concept -->
138
+ <div class="concept-card bg-blue-50 p-6 rounded-lg border-r-4 border-blue-500">
139
+ <div class="flex items-center justify-between mb-4">
140
+ <h3 class="font-bold text-lg text-blue-800 flex items-center gap-2">
141
+ <i class="fas fa-feather text-blue-600"></i>
142
+ مفهوم الحرية
143
+ </h3>
144
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">متعدد الأبعاد</span>
145
+ </div>
146
+ <p class="text-sm text-gray-700 mb-3">
147
+ <span class="highlight font-medium">قدرة الفرد على تحديد اختياراته وغاياته وسلوكاته وفق إرادته الخاصة، دون تدخل عوائق أو عوامل تؤثر في تلك الإرادة.</span>
148
+ </p>
149
+ <ul class="space-y-3 text-sm text-gray-700">
150
+ <li class="flex items-start gap-2">
151
+ <i class="fas fa-brain text-blue-500 mt-1"></i>
152
+ <span>الحرية تخص الإنسان العاقل المريد الواعي بالشروط الوجودية</span>
153
+ </li>
154
+ <li class="flex items-start gap-2">
155
+ <i class="fas fa-balance-scale text-blue-500 mt-1"></i>
156
+ <span>قيمة أخلاقية وغاية إنسانية راقية</span>
157
+ </li>
158
+ </ul>
159
+ </div>
160
+
161
+ <!-- Will Concept -->
162
+ <div class="concept-card bg-green-50 p-6 rounded-lg border-r-4 border-green-500">
163
+ <div class="flex items-center justify-between mb-4">
164
+ <h3 class="font-bold text-lg text-green-800 flex items-center gap-2">
165
+ <i class="fas fa-hand-paper text-green-600"></i>
166
+ مفهوم الإرادة
167
+ </h3>
168
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">قدرة واعية</span>
169
+ </div>
170
+ <div class="text-sm text-gray-700 space-y-3">
171
+ <p class="flex items-start gap-2">
172
+ <i class="fas fa-check-circle text-green-500 mt-1"></i>
173
+ <span>القدرة على الإختيار والتصرف وفق ما يمليه تفكير الفرد</span>
174
+ </p>
175
+ <p class="flex items-start gap-2">
176
+ <i class="fas fa-link text-green-500 mt-1"></i>
177
+ <span>لا يمكن تصور حرية بدون إرادة</span>
178
+ </p>
179
+ <p class="flex items-start gap-2">
180
+ <i class="fas fa-cogs text-green-500 mt-1"></i>
181
+ <span>مرتبطة بالوعي والقدرة على التفكير والتمييز</span>
182
+ </p>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Related Concepts -->
187
+ <div class="space-y-4">
188
+ <!-- Determinism -->
189
+ <div class="concept-card bg-purple-50 p-4 rounded-lg border-r-4 border-purple-500">
190
+ <h3 class="font-bold text-purple-800 flex items-center gap-2 mb-2">
191
+ <i class="fas fa-link-slash text-purple-600"></i>
192
+ الحتمية
193
+ </h3>
194
+ <p class="text-sm text-gray-700">الإعتقاد بأن كل الأحداث والأفعال الإنسانية محددة سلفًا بعوامل سابقة، سواء كانت طبيعية أو اجتماعية أو نفسية</p>
195
+ </div>
196
+
197
+ <!-- Law -->
198
+ <div class="concept-card bg-yellow-50 p-4 rounded-lg border-r-4 border-yellow-500">
199
+ <h3 class="font-bold text-yellow-800 flex items-center gap-2 mb-2">
200
+ <i class="fas fa-gavel text-yellow-600"></i>
201
+ القانون
202
+ </h3>
203
+ <p class="text-sm text-gray-700">مجموعة القواعد المنظمة لسلوك الأفراد في المجتمع، والتي يمكن أن تكون إطاراً لضمان الحرية أو تقييدها</p>
204
+ </div>
205
+
206
+ <!-- Responsibility -->
207
+ <div class="concept-card bg-red-50 p-4 rounded-lg border-r-4 border-red-500">
208
+ <h3 class="font-bold text-red-800 flex items-center gap-2 mb-2">
209
+ <i class="fas fa-clipboard-check text-red-600"></i>
210
+ المسؤولية
211
+ </h3>
212
+ <p class="text-sm text-gray-700">الالتزام بتحمل نتائج الاختيارات والأفعال الحرة، وهي مرتبطة ارتباطًا وثيقًا بمفهوم الحرية</p>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </section>
217
+
218
+ <!-- First Axis -->
219
+ <section class="bg-white rounded-xl shadow-md p-6 mb-12">
220
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 axis-header">المحور الأول: الحرية والحتمية</h2>
221
+
222
+ <!-- Problematic -->
223
+ <div class="bg-blue-50 p-4 rounded-lg mb-8">
224
+ <h3 class="font-bold text-blue-800 flex items-center gap-2 mb-2">
225
+ <i class="fas fa-question-circle text-blue-600"></i>
226
+ الإشكالية
227
+ </h3>
228
+ <p class="text-gray-700">هل يتمكن الإنسان من خلال إرادته من اختيار أفعاله وتصرفاته بحرية، بعيدا عن كل إكراه كيفما كان مصدره، أم أنه خاضع في هذا الإختيار لحتميات خارج إرادته ووعيه؟</p>
229
+ </div>
230
+
231
+ <!-- Key Concepts -->
232
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
233
+ <!-- Freedom -->
234
+ <div class="bg-green-50 p-5 rounded-lg">
235
+ <h3 class="font-bold text-green-800 flex items-center gap-2 mb-3">
236
+ <i class="fas fa-dove text-green-600"></i>
237
+ الحرية
238
+ </h3>
239
+ <p class="text-sm text-gray-700 mb-3">قدرة الفرد على تحديد اختياراته وغاياته وسلوكاته وفق إرادته الخاصة، من خلال تميزه بالوعي والإرادة.</p>
240
+ <div class="bg-green-100 p-3 rounded">
241
+ <p class="text-xs text-green-800 font-medium">خصائص الحرية:</p>
242
+ <ul class="list-disc list-inside text-xs text-green-800 mt-1 space-y-1">
243
+ <li>القدرة على الاختيار</li>
244
+ <li>الوعي بالذات والآخر</li>
245
+ <li>التحرر من الإكراه</li>
246
+ <li>المسؤولية الأخلاقية</li>
247
+ </ul>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Determinism -->
252
+ <div class="bg-purple-50 p-5 rounded-lg">
253
+ <h3 class="font-bold text-purple-800 flex items-center gap-2 mb-3">
254
+ <i class="fas fa-link-slash text-purple-600"></i>
255
+ الحتمية
256
+ </h3>
257
+ <p class="text-sm text-gray-700 mb-3">فكرة أن الإنسان محكوم ومقيد بعوامل وظروف خارجة عن إرادته، سواء كانت طبيعية أو اجتماعية أو نفسية أو بيولوجية.</p>
258
+ <div class="bg-purple-100 p-3 rounded">
259
+ <p class="text-xs text-purple-800 font-medium">أنواع الحتمية:</p>
260
+ <ul class="list-disc list-inside text-xs text-purple-800 mt-1 space-y-1">
261
+ <li>الحتمية الطبيعية</li>
262
+ <li>الحتمية الاجتماعية</li>
263
+ <li>الحتمية النفسية</li>
264
+ <li>الحتمية الدينية</li>
265
+ </ul>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Philosophers Views -->
271
+ <h3 class="font-bold text-gray-700 mb-4">مواقف الفلاسفة</h3>
272
+ <div class="timeline">
273
+ <!-- Ibn Rushd -->
274
+ <div class="timeline-item bg-white p-5 rounded-lg shadow-sm mb-6">
275
+ <div class="flex items-start gap-4">
276
+ <div class="bg-blue-100 p-3 rounded-full">
277
+ <i class="fas fa-user-tie text-blue-600"></i>
278
+ </div>
279
+ <div>
280
+ <h4 class="font-bold text-blue-800">موقف ابن رشد</h4>
281
+ <p class="text-sm text-gray-700 mt-1">في نظر أبو الوليد بن رشد - الإنسان له قدرة وإرادة يستطيع بهما فعل الخير والشر ولكنه في نفس الوقت محكوم بشروط مثل قوانين الطبيعة وقوى الجسد المخلوقين من طرف الله، فهو ليس حرا بشكل مطلق، ولا مقيدا بشكل مطلق.</p>
282
+ <div class="mt-3">
283
+ <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">القيمة</span>
284
+ <p class="text-xs text-gray-600 mt-1">اعتراف بالحرية النسبية للإنسان مع الإقرار بالاشتراطات الطبيعية والإلهية</p>
285
+ </div>
286
+ <div class="mt-2">
287
+ <span class="inline-block bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">الحدود</span>
288
+ <p class="text-xs text-gray-600 mt-1">صعوبة تحديد مدى القدرة الإنسانية على تجاوز الحتميات المختلفة</p>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Sartre -->
295
+ <div class="timeline-item bg-white p-5 rounded-lg shadow-sm">
296
+ <div class="flex items-start gap-4">
297
+ <div class="bg-red-100 p-3 rounded-full">
298
+ <i class="fas fa-user-graduate text-red-600"></i>
299
+ </div>
300
+ <div>
301
+ <h4 class="font-bold text-red-800">موقف جان بول سارتر</h4>
302
+ <p class="text-sm text-gray-700 mt-1">من وجهة نظر سارتر في الفلسفة الوجودية الانسان مشروع لأنه يستطيع التصرف بحرية، نظرا لما يمتلكه من وعي وقدرة على الفعل والحركة والتعالي والتجاوز لكل الإكراهات والضرورات الاجتماعية والاقتصادية والدينية. يقول سارتر "الإنسان محكوم عليه بالحرية".</p>
303
+ <div class="mt-3">
304
+ <span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">القيمة</span>
305
+ <p class="text-xs text-gray-600 mt-1">تثمين قدرة الإنسان على تجاوز جميع أشكال الحتمية وبناء ذاته</p>
306
+ </div>
307
+ <div class="mt-2">
308
+ <span class="inline-block bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">الحدود</span>
309
+ <p class="text-xs text-gray-600 mt-1">المبالغة في قدرة الإنسان على التحرر من الشروط المادية والاجتماعية المحيطة به</p>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Comparison -->
317
+ <div class="mt-8">
318
+ <h3 class="font-bold text-gray-700 mb-4">المقارنة الفلسفية</h3>
319
+ <div class="comparison-card p-5 rounded-lg">
320
+ <div class="flex items-center justify-around mb-4">
321
+ <div class="text-center">
322
+ <div class="bg-blue-100 p-3 rounded-full inline-block">
323
+ <i class="fas fa-user-tie text-blue-600 text-xl"></i>
324
+ </div>
325
+ <h4 class="font-bold text-blue-800 mt-2">ابن رشد</h4>
326
+ </div>
327
+ <div class="text-gray-500 font-bold text-xl">VS</div>
328
+ <div class="text-center">
329
+ <div class="bg-red-100 p-3 rounded-full inline-block">
330
+ <i class="fas fa-user-graduate text-red-600 text-xl"></i>
331
+ </div>
332
+ <h4 class="font-bold text-red-800 mt-2">جان بول سارتر</h4>
333
+ </div>
334
+ </div>
335
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
336
+ <div class="bg-blue-50 p-3 rounded">
337
+ <ul class="text-sm text-blue-800 space-y-2">
338
+ <li class="flex items-start gap-2">
339
+ <i class="fas fa-check-circle text-blue-500 mt-1"></i>
340
+ <span>الحرية النسبية للإنسان</span>
341
+ </li>
342
+ <li class="flex items-start gap-2">
343
+ <i class="fas fa-check-circle text-blue-500 mt-1"></i>
344
+ <span>وجود حتميات طبيعية وإلهية</span>
345
+ </li>
346
+ <li class="flex items-start gap-2">
347
+ <i class="fas fa-check-circle text-blue-500 mt-1"></i>
348
+ <span>التوفيق بين الإرادة الإنسانية والقدر</span>
349
+ </li>
350
+ </ul>
351
+ </div>
352
+ <div class="bg-red-50 p-3 rounded">
353
+ <ul class="text-sm text-red-800 space-y-2">
354
+ <li class="flex items-start gap-2">
355
+ <i class="fas fa-check-circle text-red-500 mt-1"></i>
356
+ <span>الحرية المطلقة للإنسان</span>
357
+ </li>
358
+ <li class="flex items-start gap-2">
359
+ <i class="fas fa-check-circle text-red-500 mt-1"></i>
360
+ <span>الإنسان مشروع قابل للتحقق</span>
361
+ </li>
362
+ <li class="flex items-start gap-2">
363
+ <i class="fas fa-check-circle text-red-500 mt-1"></i>
364
+ <span>إمكانية تجاوز جميع الحتميات</span>
365
+ </li>
366
+ </ul>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Synthesis -->
373
+ <div class="bg-gray-50 p-5 rounded-lg mt-8 border border-gray-200">
374
+ <h3 class="font-bold text-gray-800 flex items-center gap-2 mb-3">
375
+ <i class="fas fa-lightbulb text-yellow-500"></i>
376
+ التركيب
377
+ </h3>
378
+ <p class="text-gray-700">الحرية تبقى مفهوما إشكاليا ومأزقا فلسفيا، فيمكن للانسان أن يكون حرا انطلاقا من تميزه بالوعي والإرادة، كما يمكن أن يكون حرا وخاضعا للحتميات التي قد تكون سيكولوجية أو اجتماعية أو اقتصادية او دينية. لكن رغم كل ذلك، تبقى الحرية قيمة اخلاقية وغاية إنسانية راقية.</p>
379
+ </div>
380
+ </section>
381
+
382
+ <!-- Second Axis -->
383
+ <section class="bg-white rounded-xl shadow-md p-6 mb-12">
384
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 axis-header">المحور الثاني: الحرية والإرادة</h2>
385
+
386
+ <!-- Problematic -->
387
+ <div class="bg-green-50 p-4 rounded-lg mb-8">
388
+ <h3 class="font-bold text-green-800 flex items-center gap-2 mb-2">
389
+ <i class="fas fa-question-circle text-green-600"></i>
390
+ الإشكالية
391
+ </h3>
392
+ <p class="text-gray-700">هل الإرادة تسمح لنا بالتصرف بحرية مطلقة متجاوزين كل الإكراهات والإشراطات والضرورات؟ أم أن الإنسان لا يستطيع بلوغ الحرية الا نسبيا رغم كونه كائنا عاقلا مريدا؟</p>
393
+ </div>
394
+
395
+ <!-- Key Concepts -->
396
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
397
+ <div class="bg-blue-50 p-5 rounded-lg">
398
+ <h3 class="font-bold text-blue-800 flex items-center gap-2 mb-3">
399
+ <i class="fas fa-hand-paper text-blue-600"></i>
400
+ الإرادة
401
+ </h3>
402
+ <p class="text-sm text-gray-700">القدرة على الإختيار والتصرف وفق ما يمليه تفكير الفرد. وهي مرتبطة بمفهوم الحرية ولا يمكن تصور حرية بدون إرادة.</p>
403
+ </div>
404
+
405
+ <div class="bg-purple-50 p-5 rounded-lg">
406
+ <h3 class="font-bold text-purple-800 flex items-center gap-2 mb-3">
407
+ <i class="fas fa-brain text-purple-600"></i>
408
+ العقل الأخلاقي
409
+ </h3>
410
+ <p class="text-sm text-gray-700">القدرة على التمييز بين الخير والشر، ووضع قواعد عقلية للفعل الإنساني تتجاوز الرغبات والشهوات.</p>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- Philosophers Views -->
415
+ <h3 class="font-bold text-gray-700 mb-4">مواقف الفلاسفة</h3>
416
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
417
+ <!-- Kant -->
418
+ <div class="philosopher-card bg-blue-50 p-5 rounded-lg border-l-4 border-blue-500">
419
+ <div class="flex items-center gap-3 mb-3">
420
+ <div class="bg-blue-100 p-2 rounded-full">
421
+ <i class="fas fa-user-astronaut text-blue-600"></i>
422
+ </div>
423
+ <h4 class="font-bold text-blue-800">موقف إيمانويل كانط</h4>
424
+ </div>
425
+ <p class="text-sm text-gray-700 mb-3">يرى كانط أن المجال الذي تمارس فيه الإرادة الحرة فعلها هو مجال الأخلاق. ذلك أن الإنسان يستطيع ككائن عاقل أن يعتمد على إرادته الحرة في وضع القواعد العقلية للفعل الإنساني وبالخضوع لهذه القواعد فإنه يمتثل لإرادته ويمارس حريته.</p>
426
+
427
+ <div class="bg-blue-100 p-3 rounded mt-4">
428
+ <p class="text-xs font-medium text-blue-800">أسس الحرية عند كانط:</p>
429
+ <ul class="text-xs text-blue-800 mt-2 space-y-2">
430
+ <li class="flex items-start gap-2">
431
+ <i class="fas fa-arrow-right text-blue-500 mt-1"></i>
432
+ <span>الإرادة الحرة تخضع للعقل والواجب الأخلاقي</span>
433
+ </li>
434
+ <li class="flex items-start gap-2">
435
+ <i class="fas fa-arrow-right text-blue-500 mt-1"></i>
436
+ <span>الحرية تعني التصرف وفق الواجب العقلي</span>
437
+ </li>
438
+ </ul>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- Nietzsche -->
443
+ <div class="philosopher-card bg-purple-50 p-5 rounded-lg border-l-4 border-purple-500">
444
+ <div class="flex items-center gap-3 mb-3">
445
+ <div class="bg-purple-100 p-2 rounded-full">
446
+ <i class="fas fa-user-philosopher text-purple-600"></i>
447
+ </div>
448
+ <h4 class="font-bold text-purple-800">موقف فريدريك نيتشه</h4>
449
+ </div>
450
+ <p class="text-sm text-gray-700 mb-3">الفيلسوف الألماني نيتشه، ذهب إلى انتقاد الأخلاق الكانطية، باعتبارها اخلاق تقصي ما هو حسي وغريزي في الإنسان وتعقلنه وتكرهه وتلزمه ويؤكد على أن الإرادة الحرة هي إرادة الحياة التي يحياها الفرد كما يريد بعيدا عن كل حتمية أخلاقية كانت أو اجتماعية.</p>
451
+
452
+ <div class="bg-purple-100 p-3 rounded mt-4">
453
+ <p class="text-xs font-medium text-purple-800">مفهوم الحرية عند نيتشه:</p>
454
+ <ul class="text-xs text-purple-800 mt-2 space-y-2">
455
+ <li class="flex items-start gap-2">
456
+ <i class="fas fa-arrow-right text-purple-500 mt-1"></i>
457
+ <span>إرادة القوة وتجاوز القواعد التقليدية</span>
458
+ </li>
459
+ <li class="flex items-start gap-2">
460
+ <i class="fas fa-arrow-right text-purple-500 mt-1"></i>
461
+ <span>تأكيد الغرائز والعواطف كجزء من الطبيعة الإنسانية</span>
462
+ </li>
463
+ </ul>
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <!-- Comparison -->
469
+ <div class="mt-8">
470
+ <h3 class="font-bold text-gray-700 mb-4">المقارنة الفلسفية</h3>
471
+ <div class="comparison-card p-5 rounded-lg">
472
+ <div class="flex items-center justify-around mb-4">
473
+ <div class="text-center">
474
+ <div class="bg-blue-100 p-3 rounded-full inline-block">
475
+ <i class="fas fa-user-astronaut text-blue-600 text-xl"></i>
476
+ </div>
477
+ <h4 class="font-bold text-blue-800 mt-2">كانط</h4>
478
+ </div>
479
+ <div class="text-gray-500 font-bold text-xl">VS</div>
480
+ <div class="text-center">
481
+ <div class="bg-purple-100 p-3 rounded-full inline-block">
482
+ <i class="fas fa-user-philosopher text-purple-600 text-xl"></i>
483
+ </div>
484
+ <h4 class="font-bold text-purple-800 mt-2">نيتشه</h4>
485
+ </div>
486
+ </div>
487
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
488
+ <div class="bg-blue-50 p-3 rounded">
489
+ <ul class="text-sm text-blue-800 space-y-2">
490
+ <li class="flex items-start gap-2">
491
+ <i class="fas fa-check-circle text-blue-500 mt-1"></i>
492
+ <span>الحرية تكمن في الخضوع للواجب العقلي</span>
493
+ </li>
494
+ <li class="flex items-start gap-2">
495
+ <i class="fas fa-check-circle text-blue-500 mt-1"></i>
496
+ <span>العقل يسمو على الغرائز والرغبات</span>
497
+ </li>
498
+ <li class="flex items-start gap-2">
499
+ <i class="fas fa-check-circle text-blue-500 mt-1"></i>
500
+ <span>الحرية مشروطة بالالتزام الأخلاقي</span>
501
+ </li>
502
+ </ul>
503
+ </div>
504
+ <div class="bg-purple-50 p-3 rounded">
505
+ <ul class="text-sm text-purple-800 space-y-2">
506
+ <li class="flex items-start gap-2">
507
+ <i class="fas fa-check-circle text-purple-500 mt-1"></i>
508
+ <span>الحرية تكمن في تحقيق الرغبات والذات</span>
509
+ </li>
510
+ <li class="flex items-start gap-2">
511
+ <i class="fas fa-check-circle text-purple-500 mt-1"></i>
512
+ <span>الغرائز جزء أساسي من الطبيعة الإنسانية</span>
513
+ </li>
514
+ <li class="flex items-start gap-2">
515
+ <i class="fas fa-check-circle text-purple-500 mt-1"></i>
516
+ <span>تجاوز الأخلاق التقليدية المقيِّدة</span>
517
+ </li>
518
+ </ul>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </div>
523
+
524
+ <!-- Synthesis -->
525
+ <div class="bg-gray-50 p-5 rounded-lg mt-8 border border-gray-200">
526
+ <h3 class="font-bold text-gray-800 flex items-center gap-2 mb-3">
527
+ <i class="fas fa-lightbulb text-yellow-500"></i>
528
+ التركيب
529
+ </h3>
530
+ <p class="text-gray-700">تبين أن الحرية لا يتحدد معناها الا بالإرادة العاقلة التي يمارسها الانسان على ذاته لتجسيد الواجب الاخلاقي، لكن من عارض هذه الفكرة و اعتبر أن الحرية هي أن يحيا حياته برغباته كما يشاء، لكن هذا التجاذب بين الارادة والحرية يعبر عن ماهية الانسان الحقيقية التي تجعل منه مع الوقت كائنا أخلاقيا.</p>
531
+ </div>
532
+ </section>
533
+
534
+ <!-- Third Axis -->
535
+ <section class="bg-white rounded-xl shadow-md p-6 mb-12">
536
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 axis-header">المحور الثالث: الحرية والقانون</h2>
537
+
538
+ <!-- Problematic -->
539
+ <div class="bg-indigo-50 p-4 rounded-lg mb-8">
540
+ <h3 class="font-bold text-indigo-800 flex items-center gap-2 mb-2">
541
+ <i class="fas fa-question-circle text-indigo-600"></i>
542
+ الإشكالية
543
+ </h3>
544
+ <p class="text-gray-700">ما العلاقة بين الحرية والقانون؟ وهل القانون يسمح بممارسة الحرية؟ أم أنه معيق لها؟</p>
545
+ </div>
546
+
547
+ <!-- Key Concepts -->
548
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
549
+ <!-- Law -->
550
+ <div class="bg-green-50 p-5 rounded-lg">
551
+ <h3 class="font-bold text-green-800 flex items-center gap-2 mb-3">
552
+ <i class="fas fa-gavel text-green-600"></i>
553
+ القانون
554
+ </h3>
555
+ <p class="text-sm text-gray-700 mb-3">مجموعة القواعد الملزمة التي تنظم العلاقات بين الأفراد وتحدد الحقوق والواجبات وتضمن الأمن والاستقرار في المجتمع.</p>
556
+ <div class="bg-green-100 p-3 rounded">
557
+ <p class="text-xs text-green-800 font-medium">خصائص القانون:</p>
558
+ <ul class="list-disc list-inside text-xs text-green-800 mt-1 space-y-1">
559
+ <li>الإلزام والقوة</li>
560
+ <li>العمومية والتجريد</li>
561
+ <li>التنظيم الاجتماعي</li>
562
+ <li>الجزاء عند المخالفة</li>
563
+ </ul>
564
+ </div>
565
+ </div>
566
+
567
+ <!-- Civil Freedom -->
568
+ <div class="bg-purple-50 p-5 rounded-lg">
569
+ <h3 class="font-bold text-purple-800 flex items-center gap-2 mb-3">
570
+ <i class="fas fa-balance-scale-right text-purple-600"></i>
571
+ الحرية المدنية
572
+ </h3>
573
+ <p class="text-sm text-gray-700 mb-3">الحرية التي يتمتع بها الفرد ضمن إطار القانو�� والمجتمع المنظم، وتختلف عن الحرية الطبيعية المطلقة التي لا تخضع لأي قيود.</p>
574
+ <div class="bg-purple-100 p-3 rounded">
575
+ <p class="text-xs text-purple-800 font-medium">أشكال الحرية المدنية:</p>
576
+ <ul class="list-disc list-inside text-xs text-purple-800 mt-1 space-y-1">
577
+ <li>الحرية السياسية</li>
578
+ <li>الحرية الاقتصادية</li>
579
+ <li>الحرية الاجتماعية</li>
580
+ <li>الحرية الفكرية</li>
581
+ </ul>
582
+ </div>
583
+ </div>
584
+ </div>
585
+
586
+ <!-- Philosophers Views -->
587
+ <h3 class="font-bold text-gray-700 mb-4">مواقف الفلاسفة</h3>
588
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
589
+ <!-- Montesquieu -->
590
+ <div class="philosopher-card bg-blue-50 p-5 rounded-lg border-l-4 border-blue-500">
591
+ <div class="flex items-center gap-3 mb-3">
592
+ <div class="bg-blue-100 p-2 rounded-full">
593
+ <i class="fas fa-user-tie text-blue-600"></i>
594
+ </div>
595
+ <h4 class="font-bold text-blue-800">موقف مونتسكيو</h4>
596
+ </div>
597
+ <p class="text-sm text-gray-700 mb-3">في كتابه روح القوانين يرى مونتسكيو أن الحرية لا يمكن فهمها إلا داخل إطار القوانين المسطرة من طرف المجتمع، والتي تسهر الدولة على تفعيلها وفقا لمبدأ فصل السلط.</p>
598
+
599
+ <div class="bg-blue-100 p-3 rounded mt-4">
600
+ <p class="text-xs font-medium text-blue-800">رؤية مونتسكيو:</p>
601
+ <ul class="text-xs text-blue-800 mt-2 space-y-2">
602
+ <li class="flex items-start gap-2">
603
+ <i class="fas fa-arrow-right text-blue-500 mt-1"></i>
604
+ <span>الحرية هي الحق في فعل ما تسمح به القوانين</span>
605
+ </li>
606
+ <li class="flex items-start gap-2">
607
+ <i class="fas fa-arrow-right text-blue-500 mt-1"></i>
608
+ <span>فصل السلطات ضمان أساسي للحرية</span>
609
+ </li>
610
+ </ul>
611
+ </div>
612
+ </div>
613
+
614
+ <!-- Arendt -->
615
+ <div class="philosopher-card bg-purple-50 p-5 rounded-lg border-l-4 border-purple-500">
616
+ <div class="flex items-center gap-3 mb-3">
617
+ <div class="bg-purple-100 p-2 rounded-full">
618
+ <i class="fas fa-user-graduate text-purple-600"></i>
619
+ </div>
620
+ <h4 class="font-bold text-purple-800">موقف حنة أرندت</h4>
621
+ </div>
622
+ <p class="text-sm text-gray-700 mb-3">تؤكد حنة ارندت خلافا لمونتسكيو أن القوانين وجدت ليس لتحتكر الحريات بل لكي تضمنها لكنها مع ذلك تظل مخنوقة بالقوانين في الانظمة التوتاليتارية والدكتاتورية التي تعيق الفرد وطموحاته وإمكاناته.</p>
623
+
624
+ <div class="bg-purple-100 p-3 rounded mt-4">
625
+ <p class="text-xs font-medium text-purple-800">وجهة نظر أرندت:</p>
626
+ <ul class="text-xs text-purple-800 mt-2 space-y-2">
627
+ <li class="flex items-start gap-2">
628
+ <i class="fas fa-arrow-right text-purple-500 mt-1"></i>
629
+ <span>القوانين ضامنة للحرية وليست مقيدة لها</span>
630
+ </li>
631
+ <li class="flex items-start gap-2">
632
+ <i class="fas fa-arrow-right text-purple-500 mt-1"></i>
633
+ <span>خطر الأنظمة الشمولية على الحريات الأساسية</span>
634
+ </li>
635
+ </ul>
636
+ </div>
637
+ </div>
638
+ </div>
639
+
640
+ <!-- Comparison -->
641
+ <div class="mt-8">
642
+ <h3 class="font-bold text-gray-700 mb-4">المقارنة الفلسفية</h3>
643
+ <div class="comparison-card p-5 rounded-lg">
644
+ <div class="flex items-center justify-around mb-4">
645
+ <div class="text-center">
646
+ <div class="bg-blue-100 p-3 rounded-full inline-block">
647
+ <i class="fas fa-user-tie text-blue-600 text-xl"></i>
648
+ </div>
649
+ <h4 class="font-bold text-blue-800 mt-2">مونتسكيو</h4>
650
+ </div>
651
+ <div class="text-gray-500 font-bold text-xl">VS</div>
652
+ <div class="text-center">
653
+ <div class="bg-purple-100 p-3 rounded-full inline-block">
654
+ <i class="fas fa-user-graduate text-purple-600 text-xl"></i>
655
+ </div>
656
+ <h4 class="font-bold text-purple-800 mt-2">حنة أرندت</h4>
657
+ </div>
658
+ </div>
659
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
660
+ <div class="bg-blue-50 p-3 rounded">
661
+ <ul class="text-sm text-blue-800 space-y-2">
662
+ <li class="flex items-start gap-2">
663
+ <i class="fas fa-check-circle text-blue-500 mt-1"></i>
664
+ <span>الحرية تمارس ضمن إطار القانون</span>
665
+ </li>
666
+ <li class="flex items-start gap-2">
667
+ <i class="fas fa-check-circle text-blue-500 mt-1"></i>
668
+ <span>أهمية التنظيم المؤسساتي للحرية</span>
669
+ </li>
670
+ <li class="flex items-start gap-2">
671
+ <i class="fas fa-check-circle text-blue-500 mt-1"></i>
672
+ <span>فصل السلطات ضامن للحرية</span>
673
+ </li>
674
+ </ul>
675
+ </div>
676
+ <div class="bg-purple-50 p-3 rounded">
677
+ <ul class="text-sm text-purple-800 space-y-2">
678
+ <li class="flex items-start gap-2">
679
+ <i class="fas fa-check-circle text-purple-500 mt-1"></i>
680
+ <span>القوانين وجدت لضمان الحريات</span>
681
+ </li>
682
+ <li class="flex items-start gap-2">
683
+ <i class="fas fa-check-circle text-purple-500 mt-1"></i>
684
+ <span>نقد الأنظمة الشمولية المقيدة للحرية</span>
685
+ </li>
686
+ <li class="flex items-start gap-2">
687
+ <i class="fas fa-check-circle text-purple-500 mt-1"></i>
688
+ <span>الفرد في مواجهة القوانين القمعية</span>
689
+ </li>
690
+ </ul>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ </div>
695
+
696
+ <!-- Synthesis -->
697
+ <div class="bg-gray-50 p-5 rounded-lg mt-8 border border-gray-200">
698
+ <h3 class="font-bold text-gray-800 flex items-center gap-2 mb-3">
699
+ <i class="fas fa-lightbulb text-yellow-500"></i>
700
+ التركيب
701
+ </h3>
702
+ <p class="text-gray-700">الحرية نتاج العقل والاخلاق والمسؤولية والقانون كذلك نتاج العقل والتحضر، لكن يمكن أن يصبح العقل الاخلاقي في صراع مع العقل القانوني لاسباب سلطوية او نفسية أو طبيعية. ويمكن القول إن الحرية الحقيقية تتحقق في مجتمع منظم بقوانين عادلة تحترم حقوق الإنسان وتضمن المساواة وتفصل بين السلطات.</p>
703
+ </div>
704
+ </section>
705
+
706
+ <!-- Final Summary -->
707
+ <section class="bg-white rounded-xl shadow-md p-6 mb-12">
708
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 axis-header">الملخص الشامل</h2>
709
+
710
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
711
+ <div class="bg-blue-50 p-6 rounded-lg">
712
+ <h3 class="font-bold text-blue-800 mb-4 flex items-center gap-2">
713
+ <i class="fas fa-sitemap text-blue-600"></i>
714
+ العلاقات بين المفاهيم
715
+ </h3>
716
+ <ul class="space-y-3 text-gray-700">
717
+ <li class="flex items-start gap-2">
718
+ <i class="fas fa-link text-blue-500 mt-1"></i>
719
+ <span>الحرية والإرادة متلازمان ومترابطان</span>
720
+ </li>
721
+ <li class="flex items-start gap-2">
722
+ <i class="fas fa-link text-blue-500 mt-1"></i>
723
+ <span>العلاقة بين الحرية والحتمية علاقة جدلية</span>
724
+ </li>
725
+ <li class="flex items-start gap-2">
726
+ <i class="fas fa-link text-blue-500 mt-1"></i>
727
+ <span>القانون والحرية ليسا متناقضين بل يكمل أحدهما الآخر</span>
728
+ </li>
729
+ </ul>
730
+ </div>
731
+
732
+ <div class="bg-green-50 p-6 rounded-lg">
733
+ <h3 class="font-bold text-green-800 mb-4 flex items-center gap-2">
734
+ <i class="fas fa-brain text-green-600"></i>
735
+ الاستنتاجات الأساسية
736
+ </h3>
737
+ <ul class="space-y-3 text-gray-700">
738
+ <li class="flex items-start gap-2">
739
+ <i class="fas fa-check-circle text-green-500 mt-1"></i>
740
+ <span>الحرية قيمة إنسانية راقية مرتبطة بالوعي والإرادة</span>
741
+ </li>
742
+ <li class="flex items-start gap-2">
743
+ <i class="fas fa-check-circle text-green-500 mt-1"></i>
744
+ <span>الإنسان حر نسبياً وليس مطلقاً ويخضع لإكراهات متعددة</span>
745
+ </li>
746
+ <li class="flex items-start gap-2">
747
+ <i class="fas fa-check-circle text-green-500 mt-1"></i>
748
+ <span>القانون العادل لا يتعارض مع الحرية بل يضمنها</span>
749
+ </li>
750
+ </ul>
751
+ </div>
752
+ </div>
753
+
754
+ <div class="bg-gray-100 p-6 rounded-lg mt-6">
755
+ <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
756
+ <i class="fas fa-book-open text-gray-600"></i>
757
+ الخلاصة النهائية
758
+ </h3>
759
+ <p class="text-gray-700 leading-relaxed">
760
+ يتناول درس الحرية ثلاثة محاور رئيسية تبحث في العلاقة بين الحرية والحتمية، وارتباط الحرية بالإرادة، وعلاقة الحرية بالقانون. يظهر من خلال المواقف الفلسفية المختلفة أن مفهوم الحرية يبقى إشكالياً، فالإنسان ليس مسيراً بشكل مطلق ولا مخيراً بشكل مطلق. كما أن الحرية ترتبط بمفهوم المسؤولية وتتطلب وعياً وإرادة، وهي تتحقق ضمن إطار اجتماعي وقانوني منظم يضمن حقوق الجميع.
761
+ </p>
762
+ </div>
763
+ </section>
764
+
765
+
766
+ <!-- Key Concepts Flipcards -->
767
+ <section class="mb-12">
768
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center axis-header">المفاهيم المشروحة</h2>
769
+
770
+ <div class="grid md:grid-cols-3 gap-6 mt-8">
771
+ <!-- Concept 1: Freedom -->
772
+ <div class="flip-card">
773
+ <div class="flip-card-inner">
774
+ <div class="flip-card-front bg-white rounded-xl shadow-md p-6 flex flex-col justify-center items-center">
775
+ <div class="bg-indigo-100 p-3 rounded-full mb-3">
776
+ <i class="fas fa-dove text-indigo-600 text-xl"></i>
777
+ </div>
778
+ <h3 class="font-bold text-gray-800 text-center">الحرية</h3>
779
+ </div>
780
+ <div class="flip-card-back bg-indigo-600 text-white rounded-xl shadow-md p-6 flex flex-col justify-center items-center">
781
+ <p class="text-center">قدرة الفرد على تحديد اختياراته وغاياته وسلوكاته وفق إرادته الخاصة، دون تدخل عوائق أو عوامل تؤثر في تلك الإرادة.</p>
782
+ </div>
783
+ </div>
784
+ </div>
785
+
786
+ <!-- Concept 2: Will -->
787
+ <div class="flip-card">
788
+ <div class="flip-card-inner">
789
+ <div class="flip-card-front bg-white rounded-xl shadow-md p-6 flex flex-col justify-center items-center">
790
+ <div class="bg-indigo-100 p-3 rounded-full mb-3">
791
+ <i class="fas fa-hand-paper text-indigo-600 text-xl"></i>
792
+ </div>
793
+ <h3 class="font-bold text-gray-800 text-center">الإرادة</h3>
794
+ </div>
795
+ <div class="flip-card-back bg-indigo-600 text-white rounded-xl shadow-md p-6 flex flex-col justify-center items-center">
796
+ <p class="text-center">القدرة على الإختيار والتصرف وفق ما يمليه تفكير الفرد. وهي مرتبطة بمفهوم الحرية ولا يمكن تصور حرية بدون إرادة.</p>
797
+ </div>
798
+ </div>
799
+ </div>
800
+
801
+ <!-- Concept 3: Determinism -->
802
+ <div class="flip-card">
803
+ <div class="flip-card-inner">
804
+ <div class="flip-card-front bg-white rounded-xl shadow-md p-6 flex flex-col justify-center items-center">
805
+ <div class="bg-indigo-100 p-3 rounded-full mb-3">
806
+ <i class="fas fa-link-slash text-indigo-600 text-xl"></i>
807
+ </div>
808
+ <h3 class="font-bold text-gray-800 text-center">الحتمية</h3>
809
+ </div>
810
+ <div class="flip-card-back bg-indigo-600 text-white rounded-xl shadow-md p-6 flex flex-col justify-center items-center">
811
+ <p class="text-center">الإعتقاد بأن كل الأحداث والأفعال الإنسانية محددة سلفًا بعوامل سابقة، سواء كانت طبيعية أو اجتماعية أو نفسية.</p>
812
+ </div>
813
+ </div>
814
+ </div>
815
+
816
+ <!-- Concept 4: Law -->
817
+ <div class="flip-card">
818
+ <div class="flip-card-inner">
819
+ <div class="flip-card-front bg-white rounded-xl shadow-md p-6 flex flex-col justify-center items-center">
820
+ <div class="bg-indigo-100 p-3 rounded-full mb-3">
821
+ <i class="fas fa-gavel text-indigo-600 text-xl"></i>
822
+ </div>
823
+ <h3 class="font-bold text-gray-800 text-center">القانون</h3>
824
+ </div>
825
+ <div class="flip-card-back bg-indigo-600 text-white rounded-xl shadow-md p-6 flex flex-col justify-center items-center">
826
+ <p class="text-center">مجموعة القواعد المنظمة لسلوك الأفراد في المجتمع، والتي يمكن أن تكون إطاراً لضمان الحرية أو تقييدها.</p>
827
+ </div>
828
+ </div>
829
+ </div>
830
+
831
+ <!-- Concept 5: Responsibility -->
832
+ <div class="flip-card">
833
+ <div class="flip-card-inner">
834
+ <div class="flip-card-front bg-white rounded-xl shadow-md p-6 flex flex-col justify-center items-center">
835
+ <div class="bg-indigo-100 p-3 rounded-full mb-3">
836
+ <i class="fas fa-clipboard-check text-indigo-600 text-xl"></i>
837
+ </div>
838
+ <h3 class="font-bold text-gray-800 text-center">المسؤولية</h3>
839
+ </div>
840
+ <div class="flip-card-back bg-indigo-600 text-white rounded-xl shadow-md p-6 flex flex-col justify-center items-center">
841
+ <p class="text-center">الالتزام بتحمل نتائج الاختيارات والأفعال الحرة، وهي مرتبطة ارتباطًا وثيقًا بمفهوم الحرية.</p>
842
+ </div>
843
+ </div>
844
+ </div>
845
+
846
+ <!-- Concept 6: Civil Freedom -->
847
+ <div class="flip-card">
848
+ <div class="flip-card-inner">
849
+ <div class="flip-card-front bg-white rounded-xl shadow-md p-6 flex flex-col justify-center items-center">
850
+ <div class="bg-indigo-100 p-3 rounded-full mb-3">
851
+ <i class="fas fa-balance-scale text-indigo-600 text-xl"></i>
852
+ </div>
853
+ <h3 class="font-bold text-gray-800 text-center">الحرية المدنية</h3>
854
+ </div>
855
+ <div class="flip-card-back bg-indigo-600 text-white rounded-xl shadow-md p-6 flex flex-col justify-center items-center">
856
+ <p class="text-center">الحرية التي يتمتع بها الفرد ضمن إطار القانون والمجتمع المنظم، وتختلف عن الحرية الطبيعية المطلقة.</p>
857
+ </div>
858
+ </div>
859
+ </div>
860
+ </div>
861
+ </section>
862
+ </div>
863
+
864
+
865
+ <!-- Interactive Quiz -->
866
+ <section class="bg-white rounded-xl shadow-md p-6 mb-12">
867
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 axis-header">اختبر فهمك لمفهوم الحرية</h2>
868
+
869
+ <div class="space-y-6">
870
+ <!-- Question 1 -->
871
+ <div class="border border-gray-200 rounded-lg p-4">
872
+ <h3 class="font-bold text-gray-800 mb-3">1. ما هو الموقف الذي يمثله ابن رشد فيما يخص الحرية الإنسانية؟</h3>
873
+ <div class="space-y-2">
874
+ <label class="flex items-center">
875
+ <input type="radio" name="q1" class="mr-2" value="a">
876
+ <span>الإنسان حر بشكل مطلق</span>
877
+ </label>
878
+ <label class="flex items-center">
879
+ <input type="radio" name="q1" class="mr-2" value="b">
880
+ <span>الإنسان مقيد بشكل مطلق</span>
881
+ </label>
882
+ <label class="flex items-center">
883
+ <input type="radio" name="q1" class="mr-2" value="c" data-correct data-section="المحور الأول: الحرية والحتمية">
884
+ <span>ليس حرا بشكل مطلق ولا مقيدا بشكل مطلق</span>
885
+ </label>
886
+ </div>
887
+ </div>
888
+
889
+ <!-- Question 2 -->
890
+ <div class="border border-gray-200 rounded-lg p-4">
891
+ <h3 class="font-bold text-gray-800 mb-3">2. ما هي الفكرة الأساسية التي طرحها سارتر حول الحرية؟</h3>
892
+ <div class="space-y-2">
893
+ <label class="flex items-center">
894
+ <input type="radio" name="q2" class="mr-2" value="a">
895
+ <span>الإنسان مسير بالكامل بالظروف الاجتماعية</span>
896
+ </label>
897
+ <label class="flex items-center">
898
+ <input type="radio" name="q2" class="mr-2" value="b" data-correct data-section="المحور الأول: الحرية والحتمية">
899
+ <span>الإنسان مشروع يستطيع التصرف بحرية ويتجاوز الإكراهات</span>
900
+ </label>
901
+ <label class="flex items-center">
902
+ <input type="radio" name="q2" class="mr-2" value="c">
903
+ <span>الحرية وهم لا وجود له</span>
904
+ </label>
905
+ </div>
906
+ </div>
907
+
908
+ <!-- Question 3 -->
909
+ <div class="border border-gray-200 rounded-lg p-4">
910
+ <h3 class="font-bold text-gray-800 mb-3">3. كيف يرى كانط علاقة الحرية بالإرادة؟</h3>
911
+ <div class="space-y-2">
912
+ <label class="flex items-center">
913
+ <input type="radio" name="q3" class="mr-2" value="a" data-correct data-section="المحور الثاني: الحرية والإرادة">
914
+ <span>الإرادة الحرة تمارس فعلها في مجال الأخلاق</span>
915
+ </label>
916
+ <label class="flex items-center">
917
+ <input type="radio" name="q3" class="mr-2" value="b">
918
+ <span>الإرادة لا علاقة لها بالحرية</span>
919
+ </label>
920
+ <label class="flex items-center">
921
+ <input type="radio" name="q3" class="mr-2" value="c">
922
+ <span>الإرادة تعيق الحرية الحقيقية</span>
923
+ </label>
924
+ </div>
925
+ </div>
926
+
927
+ <!-- Question 4 -->
928
+ <div class="border border-gray-200 rounded-lg p-4">
929
+ <h3 class="font-bold text-gray-800 mb-3">4. ما موقف مونتسكيو من العلاقة بين الحرية والقانون؟</h3>
930
+ <div class="space-y-2">
931
+ <label class="flex items-center">
932
+ <input type="radio" name="q4" class="mr-2" value="a">
933
+ <span>القانون عائق أمام الحرية الفردية</span>
934
+ </label>
935
+ <label class="flex items-center">
936
+ <input type="radio" name="q4" class="mr-2" value="b" data-correct data-section="المحور الثالث: الحرية والقانون">
937
+ <span>الحرية لا تفهم إلا داخل إطار القوانين</span>
938
+ </label>
939
+ <label class="flex items-center">
940
+ <input type="radio" name="q4" class="mr-2" value="c">
941
+ <span>الحرية تتحقق فقط بإلغاء القوانين</span>
942
+ </label>
943
+ </div>
944
+ </div>
945
+
946
+ <!-- Question 5 -->
947
+ <div class="border border-gray-200 rounded-lg p-4">
948
+ <h3 class="font-bold text-gray-800 mb-3">5. ما موقف نيتشه من الحرية؟</h3>
949
+ <div class="space-y-2">
950
+ <label class="flex items-center">
951
+ <input type="radio" name="q5" class="mr-2" value="a" data-correct data-section="المحور الثاني: الحرية والإرادة">
952
+ <span>الحرية هي إرادة الحياة التي يحياها الفرد كما يريد</span>
953
+ </label>
954
+ <label class="flex items-center">
955
+ <input type="radio" name="q5" class="mr-2" value="b">
956
+ <span>الحرية هي الخضوع للواجب الأخلاقي</span>
957
+ </label>
958
+ <label class="flex items-center">
959
+ <input type="radio" name="q5" class="mr-2" value="c">
960
+ <span>الحرية هي طاعة القانون</span>
961
+ </label>
962
+ </div>
963
+ </div>
964
+
965
+
966
+ <!-- Question 6 -->
967
+ <div class="border border-gray-200 rounded-lg p-4">
968
+ <h3 class="font-bold text-gray-800 mb-3">6. كيف ترى حنة أرندت العلاقة بين الحرية والقانون؟</h3>
969
+ <div class="space-y-2">
970
+ <label class="flex items-center">
971
+ <input type="radio" name="q6" class="mr-2" value="a">
972
+ <span>القوانين دائماً تقيد الحرية الفردية</span>
973
+ </label>
974
+ <label class="flex items-center">
975
+ <input type="radio" name="q6" class="mr-2" value="b">
976
+ <span>لا علاقة بين القانون والحرية</span>
977
+ </label>
978
+ <label class="flex items-center">
979
+ <input type="radio" name="q6" class="mr-2" value="c" data-correct data-section="المحور الثالث: الحرية والقانون">
980
+ <span>القوانين وجدت لضمان الحريات وليس لتقييدها</span>
981
+ </label>
982
+ </div>
983
+ </div>
984
+
985
+ <button onclick="checkAnswers()" class="w-full bg-indigo-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-indigo-700 transition duration-300">
986
+ تحقق من الإجابات
987
+ </button>
988
+
989
+ <div id="quiz-result" class="hidden mt-4 p-4 rounded-lg"></div>
990
+ <div id="review-sections" class="hidden mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
991
+ <h3 class="font-bold text-yellow-800 mb-2">المحاور التي تحتاج إلى مراجعة:</h3>
992
+ <ul id="sections-to-review" class="list-disc list-inside text-yellow-800 space-y-1"></ul>
993
+ </div>
994
+ </div>
995
+ </section>
996
+
997
+
998
+ <!-- اختبار المفاهيم -->
999
+ <section class="bg-white rounded-xl shadow-md p-6 mb-12">
1000
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 axis-header">اختبر معرفتك بالمفاهيم</h2>
1001
+
1002
+ <div class="space-y-6">
1003
+ <!-- مفهوم الحرية -->
1004
+ <div class="border border-gray-200 rounded-lg p-4">
1005
+ <h3 class="font-bold text-blue-800 mb-3">1. مفهوم الحرية يعني:</h3>
1006
+ <div class="space-y-2">
1007
+ <label class="flex items-center">
1008
+ <input type="radio" name="concept1" class="mr-2" value="a" data-correct>
1009
+ <span>قدرة الفرد على تحديد اختياراته وغاياته وسلوكاته وفق إرادته الخاصة</span>
1010
+ </label>
1011
+ <label class="flex items-center">
1012
+ <input type="radio" name="concept1" class="mr-2" value="b">
1013
+ <span>القدرة على فعل أي شيء دون قيود أو موانع مهما كانت</span>
1014
+ </label>
1015
+ <label class="flex items-center">
1016
+ <input type="radio" name="concept1" class="mr-2" value="c">
1017
+ <span>عدم وجود أي قوانين تنظم سلوك الأفراد في المجتمع</span>
1018
+ </label>
1019
+ </div>
1020
+ </div>
1021
+
1022
+ <!-- مفهوم الحتمية -->
1023
+ <div class="border border-gray-200 rounded-lg p-4">
1024
+ <h3 class="font-bold text-blue-800 mb-3">2. مفهوم الحتمية يشير إلى:</h3>
1025
+ <div class="space-y-2">
1026
+ <label class="flex items-center">
1027
+ <input type="radio" name="concept2" class="mr-2" value="a">
1028
+ <span>قدرة الإنسان على تحديد مصيره بنفسه</span>
1029
+ </label>
1030
+ <label class="flex items-center">
1031
+ <input type="radio" name="concept2" class="mr-2" value="b" data-correct>
1032
+ <span>الإعتقاد بأن الأحداث والأفعال محددة سلفًا بعوامل سابقة</span>
1033
+ </label>
1034
+ <label class="flex items-center">
1035
+ <input type="radio" name="concept2" class="mr-2" value="c">
1036
+ <span>نظرية فلسفية تؤكد على أهمية القانون في المجتمع</span>
1037
+ </label>
1038
+ </div>
1039
+ </div>
1040
+
1041
+ <!-- مفهوم الإرادة -->
1042
+ <div class="border border-gray-200 rounded-lg p-4">
1043
+ <h3 class="font-bold text-blue-800 mb-3">3. مفهوم الإرادة يعني:</h3>
1044
+ <div class="space-y-2">
1045
+ <label class="flex items-center">
1046
+ <input type="radio" name="concept3" class="mr-2" value="a" data-correct>
1047
+ <span>القدرة على الإختيار والتصرف وفق ما يمليه تفكير الفرد</span>
1048
+ </label>
1049
+ <label class="flex items-center">
1050
+ <input type="radio" name="concept3" class="mr-2" value="b">
1051
+ <span>الرغبة في تحقيق اللذة وتجنب الألم</span>
1052
+ </label>
1053
+ <label class="flex items-center">
1054
+ <input type="radio" name="concept3" class="mr-2" value="c">
1055
+ <span>القدرة على مقاومة الإغراءات والشهوات</span>
1056
+ </label>
1057
+ </div>
1058
+ </div>
1059
+
1060
+ <button onclick="checkConceptsQuiz()" class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-blue-700 transition duration-300">
1061
+ تحقق من الإجابات
1062
+ </button>
1063
+
1064
+ <div id="concepts-result" class="hidden mt-4 p-4 rounded-lg"></div>
1065
+ </div>
1066
+ </section>
1067
+
1068
+ <!-- اختبار الإشكاليات -->
1069
+ <section class="bg-white rounded-xl shadow-md p-6 mb-12">
1070
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 axis-header">اختبر فهمك للإشكاليات</h2>
1071
+
1072
+ <div class="space-y-6">
1073
+ <!-- إشكالية المحور الأول -->
1074
+ <div class="border border-gray-200 rounded-lg p-4">
1075
+ <h3 class="font-bold text-purple-800 mb-3">1. ما هي إشكالية المحور الأول (الحرية والحتمية)؟</h3>
1076
+ <div class="space-y-2">
1077
+ <label class="flex items-center">
1078
+ <input type="radio" name="issue1" class="mr-2" value="a" data-correct>
1079
+ <span>هل يتمكن الإنسان من خلال إرادته من اختيار أفعاله بحرية أم أنه خاضع لحتميات خارج إرادته؟</span>
1080
+ </label>
1081
+ <label class="flex items-center">
1082
+ <input type="radio" name="issue1" class="mr-2" value="b">
1083
+ <span>هل الإرادة تسمح لنا بالتصرف بحرية مطلقة متجاوزين كل الإكراهات؟</span>
1084
+ </label>
1085
+ <label class="flex items-center">
1086
+ <input type="radio" name="issue1" class="mr-2" value="c">
1087
+ <span>ما العلاقة بين الحرية والقانون؟ وهل القانون يسمح بممارسة الحرية؟</span>
1088
+ </label>
1089
+ </div>
1090
+ </div>
1091
+
1092
+ <!-- إشكالية المحور الثاني -->
1093
+ <div class="border border-gray-200 rounded-lg p-4">
1094
+ <h3 class="font-bold text-purple-800 mb-3">2. ما هي إشكالية المحور الثاني (الحرية والإرادة)؟</h3>
1095
+ <div class="space-y-2">
1096
+ <label class="flex items-center">
1097
+ <input type="radio" name="issue2" class="mr-2" value="a">
1098
+ <span>هل يتمكن الإنسان من خلال إرادته من اختيار أفعاله بحرية أم أنه خاضع لحتميات خارج إرادته؟</span>
1099
+ </label>
1100
+ <label class="flex items-center">
1101
+ <input type="radio" name="issue2" class="mr-2" value="b" data-correct>
1102
+ <span>هل الإرادة تسمح لنا بالتصرف بحرية مطلقة متجاوزين كل الإكراهات؟</span>
1103
+ </label>
1104
+ <label class="flex items-center">
1105
+ <input type="radio" name="issue2" class="mr-2" value="c">
1106
+ <span>ما العلاقة بين الحرية والقانون؟ وهل القانون يسمح بممارسة الحرية؟</span>
1107
+ </label>
1108
+ </div>
1109
+ </div>
1110
+
1111
+ <!-- إشكالية المحور الثالث -->
1112
+ <div class="border border-gray-200 rounded-lg p-4">
1113
+ <h3 class="font-bold text-purple-800 mb-3">3. ما هي إشكالية المحور الثالث (الحرية والقانون)؟</h3>
1114
+ <div class="space-y-2">
1115
+ <label class="flex items-center">
1116
+ <input type="radio" name="issue3" class="mr-2" value="a">
1117
+ <span>هل يتمكن الإنسان من خلال إرادته من اختيار أفعاله بحرية أم أنه خاضع لحتميات خارج إرادته؟</span>
1118
+ </label>
1119
+ <label class="flex items-center">
1120
+ <input type="radio" name="issue3" class="mr-2" value="b">
1121
+ <span>هل الإرادة تسمح لنا بالتصرف بحرية مطلقة متجاوزين كل الإكراهات؟</span>
1122
+ </label>
1123
+ <label class="flex items-center">
1124
+ <input type="radio" name="issue3" class="mr-2" value="c" data-correct>
1125
+ <span>ما العلاقة بين الحرية والقانون؟ وهل القانون يسمح بممارسة الحرية؟</span>
1126
+ </label>
1127
+ </div>
1128
+ </div>
1129
+
1130
+ <button onclick="checkIssuesQuiz()" class="w-full bg-purple-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-purple-700 transition duration-300">
1131
+ تحقق من الإجابات
1132
+ </button>
1133
+
1134
+ <div id="issues-result" class="hidden mt-4 p-4 rounded-lg"></div>
1135
+ </div>
1136
+ </section>
1137
+
1138
+
1139
+ <!-- Floating Navigation Button -->
1140
+ <div class="floating-btn">
1141
+ <button onclick="scrollToTop()" class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg transition-all duration-300">
1142
+ <i class="fas fa-arrow-up"></i>
1143
+ </button>
1144
+ </div>
1145
+
1146
+
1147
+
1148
+
1149
+ <script>
1150
+ function scrollToTop() {
1151
+ window.scrollTo({
1152
+ top: 0,
1153
+ behavior: 'smooth'
1154
+ });
1155
+ }
1156
+
1157
+ // Add animation to cards when they come into view
1158
+ document.addEventListener('DOMContentLoaded', function() {
1159
+ const observer = new IntersectionObserver((entries) => {
1160
+ entries.forEach(entry => {
1161
+ if (entry.isIntersecting) {
1162
+ entry.target.classList.add('animate-fadeIn');
1163
+ }
1164
+ });
1165
+ }, {
1166
+ threshold: 0.1
1167
+ });
1168
+
1169
+ document.querySelectorAll('.concept-card, .philosopher-card, .timeline-item').forEach(card => {
1170
+ observer.observe(card);
1171
+ card.style.opacity = '0';
1172
+ card.style.animation = 'fadeIn 0.5s forwards';
1173
+ card.style.animationDelay = '0.1s';
1174
+ });
1175
+
1176
+ // Set the first tab as active by default
1177
+ showTab('tab1');
1178
+ });
1179
+
1180
+ // Tab switching function for mobile version (if needed)
1181
+ function showTab(tabId) {
1182
+ // This function can be used if you want to add tab functionality like in the original template
1183
+ console.log('Tab function called but not implemented in this version');
1184
+ }
1185
+
1186
+ // Quiz answer checking function with section redirection
1187
+ // Quiz answer checking function with section redirection
1188
+ function checkAnswers() {
1189
+ const correctAnswers = {
1190
+ q1: 'c',
1191
+ q2: 'b',
1192
+ q3: 'a',
1193
+ q4: 'b',
1194
+ q5: 'a',
1195
+ q6: 'c' // إضافة الإجابة الصحيحة للسؤال السادس
1196
+ };
1197
+
1198
+ let score = 0;
1199
+ const totalQuestions = Object.keys(correctAnswers).length;
1200
+ const sectionsToReview = new Set();
1201
+
1202
+ for (const question in correctAnswers) {
1203
+ const selectedOption = document.querySelector(`input[name="${question}"]:checked`);
1204
+ if (selectedOption) {
1205
+ if (selectedOption.value === correctAnswers[question]) {
1206
+ score++;
1207
+ } else {
1208
+ // Add section to review if answer is wrong
1209
+ const correctInput = document.querySelector(`input[name="${question}"][value="${correctAnswers[question]}"]`);
1210
+ if (correctInput && correctInput.dataset.section) {
1211
+ sectionsToReview.add(correctInput.dataset.section);
1212
+ }
1213
+ }
1214
+ } else {
1215
+ // If no answer selected, find the section for the correct answer
1216
+ const correctInput = document.querySelector(`input[name="${question}"][value="${correctAnswers[question]}"]`);
1217
+ if (correctInput && correctInput.dataset.section) {
1218
+ sectionsToReview.add(correctInput.dataset.section);
1219
+ }
1220
+ }
1221
+ }
1222
+
1223
+ const resultDiv = document.getElementById('quiz-result');
1224
+ resultDiv.classList.remove('hidden');
1225
+
1226
+ const percentage = Math.round((score / totalQuestions) * 100);
1227
+
1228
+ if (percentage >= 80) {
1229
+ resultDiv.className = 'bg-green-100 text-green-800 mt-4 p-4 rounded-lg';
1230
+ resultDiv.innerHTML = `
1231
+ <h4 class="font-bold mb-2">نتيجة الاختبار: ${percentage}%</h4>
1232
+ <p>ممتاز! لديك فهم جيد لمفهوم الحرية في الفلسفة.</p>
1233
+ `;
1234
+ } else if (percentage >= 50) {
1235
+ resultDiv.className = 'bg-yellow-100 text-yellow-800 mt-4 p-4 rounded-lg';
1236
+ resultDiv.innerHTML = `
1237
+ <h4 class="font-bold mb-2">نتيجة الاختبار: ${percentage}%</h4>
1238
+ <p>جيد، ولكن يمكنك تحسين فهمك من خلال مراجعة المحتوى مرة أخرى.</p>
1239
+ `;
1240
+ } else {
1241
+ resultDiv.className = 'bg-red-100 text-red-800 mt-4 p-4 rounded-lg';
1242
+ resultDiv.innerHTML = `
1243
+ <h4 class="font-bold mb-2">نتيجة الاختبار: ${percentage}%</h4>
1244
+ <p>يبدو أنك بحاجة إلى دراسة المادة مرة أخرى. لا تقلق، يمكنك المحاولة مرة أخرى!</p>
1245
+ `;
1246
+ }
1247
+
1248
+ // Show sections to review if any
1249
+ const reviewSectionsDiv = document.getElementById('review-sections');
1250
+ const sectionsListUl = document.getElementById('sections-to-review');
1251
+ if (sectionsToReview.size > 0) {
1252
+ reviewSectionsDiv.classList.remove('hidden');
1253
+ sectionsListUl.innerHTML = '';
1254
+
1255
+ sectionsToReview.forEach(section => {
1256
+ const li = document.createElement('li');
1257
+ li.textContent = section;
1258
+ li.className = 'cursor-pointer hover:text-yellow-600';
1259
+ li.onclick = function() {
1260
+ // Find the section element and scroll to it
1261
+ const sectionElement = Array.from(document.querySelectorAll('h2')).find(h2 => h2.textContent.includes(section));
1262
+ if (sectionElement) {
1263
+ sectionElement.scrollIntoView({ behavior: 'smooth' });
1264
+ // Highlight the section briefly
1265
+ sectionElement.classList.add('bg-yellow-100');
1266
+ setTimeout(() => {
1267
+ sectionElement.classList.remove('bg-yellow-100');
1268
+ }, 2000);
1269
+ }
1270
+ };
1271
+ sectionsListUl.appendChild(li);
1272
+ });
1273
+ } else {
1274
+ reviewSectionsDiv.classList.add('hidden');
1275
+ }
1276
+ }
1277
+ // دالة التحقق من إجابات اختبار المفاهيم
1278
+ function checkConceptsQuiz() {
1279
+ let score = 0;
1280
+ const totalQuestions = 3;
1281
+
1282
+ // التحقق من إجابات الأسئلة
1283
+ for (let i = 1; i <= totalQuestions; i++) {
1284
+ const selectedOption = document.querySelector(`input[name="concept${i}"]:checked`);
1285
+ if (selectedOption && selectedOption.dataset.correct !== undefined) {
1286
+ score++;
1287
+ }
1288
+ }
1289
+
1290
+ const resultDiv = document.getElementById('concepts-result');
1291
+ resultDiv.classList.remove('hidden');
1292
+
1293
+ const percentage = Math.round((score / totalQuestions) * 100);
1294
+
1295
+ if (percentage === 100) {
1296
+ resultDiv.className = 'bg-green-100 text-green-800 mt-4 p-4 rounded-lg';
1297
+ resultDiv.innerHTML = `
1298
+ <h4 class="font-bold mb-2">نتيجة اختبار المفاهيم: ${percentage}%</h4>
1299
+ <p>ممتاز! تفهم جيداً معاني المفاهيم الأساسية للحرية.</p>
1300
+ `;
1301
+ } else if (percentage >= 50) {
1302
+ resultDiv.className = 'bg-yellow-100 text-yellow-800 mt-4 p-4 rounded-lg';
1303
+ resultDiv.innerHTML = `
1304
+ <h4 class="font-bold mb-2">نتيجة اختبار المفاهيم: ${percentage}%</h4>
1305
+ <p>جيد، ولكن يمكنك تحسين فهمك للمفاهيم من خلال مراجعة قسم المفاهيم الأساسية.</p>
1306
+ <button onclick="scrollToConceptsSection()" class="mt-2 bg-yellow-500 text-white py-2 px-3 rounded-lg font-medium hover:bg-yellow-600 transition duration-300">
1307
+ راجع المفاهيم الأساسية
1308
+ </button>
1309
+ `;
1310
+ } else {
1311
+ resultDiv.className = 'bg-red-100 text-red-800 mt-4 p-4 rounded-lg';
1312
+ resultDiv.innerHTML = `
1313
+ <h4 class="font-bold mb-2">نتيجة اختبار المفاهيم: ${percentage}%</h4>
1314
+ <p>يبدو أنك بحاجة إلى مراجعة المفاهيم الأساسية بشكل أفضل.</p>
1315
+ <button onclick="scrollToConceptsSection()" class="mt-2 bg-red-500 text-white py-2 px-3 rounded-lg font-medium hover:bg-red-600 transition duration-300">
1316
+ راجع المفاهيم الأساسية
1317
+ </button>
1318
+ `;
1319
+ }
1320
+
1321
+ resultDiv.scrollIntoView({ behavior: 'smooth' });
1322
+ }
1323
+
1324
+ // دالة التحقق من إجابات اختبار الإشكاليات
1325
+ function checkIssuesQuiz() {
1326
+ let score = 0;
1327
+ const totalQuestions = 3;
1328
+
1329
+ // التحقق من ��جابات الأسئلة
1330
+ for (let i = 1; i <= totalQuestions; i++) {
1331
+ const selectedOption = document.querySelector(`input[name="issue${i}"]:checked`);
1332
+ if (selectedOption && selectedOption.dataset.correct !== undefined) {
1333
+ score++;
1334
+ }
1335
+ }
1336
+
1337
+ const resultDiv = document.getElementById('issues-result');
1338
+ resultDiv.classList.remove('hidden');
1339
+
1340
+ const percentage = Math.round((score / totalQuestions) * 100);
1341
+
1342
+ if (percentage === 100) {
1343
+ resultDiv.className = 'bg-green-100 text-green-800 mt-4 p-4 rounded-lg';
1344
+ resultDiv.innerHTML = `
1345
+ <h4 class="font-bold mb-2">نتيجة اختبار الإشكاليات: ${percentage}%</h4>
1346
+ <p>ممتاز! تفهم جيداً الإشكاليات المطروحة في كل محور.</p>
1347
+ `;
1348
+ } else if (percentage >= 50) {
1349
+ resultDiv.className = 'bg-yellow-100 text-yellow-800 mt-4 p-4 rounded-lg';
1350
+ resultDiv.innerHTML = `
1351
+ <h4 class="font-bold mb-2">نتيجة اختبار الإشكاليات: ${percentage}%</h4>
1352
+ <p>جيد، ولكن يمكنك تحسين فهمك للإشكاليات من خلال مراجعة المحاور.</p>
1353
+ <button onclick="scrollToTopOfPage()" class="mt-2 bg-yellow-500 text-white py-2 px-3 rounded-lg font-medium hover:bg-yellow-600 transition duration-300">
1354
+ راجع المحاور
1355
+ </button>
1356
+ `;
1357
+ } else {
1358
+ resultDiv.className = 'bg-red-100 text-red-800 mt-4 p-4 rounded-lg';
1359
+ resultDiv.innerHTML = `
1360
+ <h4 class="font-bold mb-2">نتيجة اختبار الإشكاليات: ${percentage}%</h4>
1361
+ <p>يبدو أنك بحاجة إلى مراجعة إشكاليات الدرس بشكل أفضل.</p>
1362
+ <button onclick="scrollToTopOfPage()" class="mt-2 bg-red-500 text-white py-2 px-3 rounded-lg font-medium hover:bg-red-600 transition duration-300">
1363
+ راجع المحاور
1364
+ </button>
1365
+ `;
1366
+ }
1367
+
1368
+ resultDiv.scrollIntoView({ behavior: 'smooth' });
1369
+ }
1370
+
1371
+ // دالة للانتقال إلى قسم المفاهيم الأساسية
1372
+ function scrollToConceptsSection() {
1373
+ const conceptsSection = document.querySelector('section:first-of-type');
1374
+ if (conceptsSection) {
1375
+ conceptsSection.scrollIntoView({ behavior: 'smooth' });
1376
+ conceptsSection.classList.add('bg-yellow-50');
1377
+ setTimeout(() => {
1378
+ conceptsSection.classList.remove('bg-yellow-50');
1379
+ }, 2000);
1380
+ }
1381
+ }
1382
+
1383
+ // دالة للانتقال إلى أعلى الصفحة
1384
+ function scrollToTopOfPage() {
1385
+ window.scrollTo({
1386
+ top: 0,
1387
+ behavior: 'smooth'
1388
+ });
1389
+ }
1390
+
1391
+ </script>
1392
+
1393
+ <style>
1394
+ @keyframes fadeIn {
1395
+ from { opacity: 0; transform: translateY(20px); }
1396
+ to { opacity: 1; transform: translateY(0); }
1397
+ }
1398
+
1399
+ .animate-fadeIn {
1400
+ animation: fadeIn 0.5s forwards;
1401
+ }
1402
+ </style>
1403
+ <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=methodya/liberty-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1404
+ </html>