This repository has been archived by the owner on Aug 31, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
article.php
280 lines (273 loc) · 18.7 KB
/
article.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
<!doctype html>
<html lang="ar">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="styles.css" rel="stylesheet">
<link href="icons.css" rel="stylesheet">
<title>Title Goes Here</title>
</head>
<body dir="rtl">
<?php include 'header.php'; ?>
<div class="flex items-center justify-center text-gray-600 my-12">
<div class="bg-blue-200 px-20 rounded py-5 text-sm flex justify-center md:justify-start items-center gap-1 flex-wrap">
<div>
هذه هي آخر مقالة مجانية لك لهذا الشهر.
</div>
<div class="underline text-blue-800">
اشترك للحصول على مقالات غير محدودة
</div>
</div>
</div>
<div class="container mx-auto max-w-1400px">
<div class="md:text-h1 text-h4 font-bold">
غزة: مليونا شخص رهينة القرار الإسرائيلي لإدخال اللقاح
</div>
<div class="flex items-center justify-between my-8">
<div class="flex items-center flex-row flex-wrap gap-2">
<img src="svgs/podcast-thumbnail.svg" alt="">
<a href="#" class="text-blue-600 font-bold underline text-15px">إيزابيل أليندي</a>
<div class="">
– صحافية لبنانية
</div>
<div class="h-4 w-w-2px bg-gray-500 hidden md:block"></div>
<div class="w-full md:w-max flex flex-row">
<div class="text-gray-500 font-bold">
تاريخ النشر :
</div>
<div class="text-gray-500">
اذار ٣، ٢٠٢١
</div>
</div>
<div class="w-3 h-h-1px bg-gray-500 md:block hidden "></div>
<div class="w-full md:w-max flex flex-row flex-nowrap">
<div class="text-gray-500 font-bold w-28 md:w-auto">
آخر تحديث :
</div>
<div class="w-full md:w-auto text-gray-500">
منذ 23 ساعة
</div>
</div>
<div class="w-full md:w-auto pb-5 md:pb-0">
<div class="inline-block rounded-full bg-black-100 px-1 md:mx-4 ">
<div class="flex items-center justify-between p-1 pl-2">
<i class="icon-time ml-2 text-red-700 text-24px"></i>
<div class="text-15px">
٧ دقائق للإستماع
</div>
</div>
</div>
</div>
<i class="icon-bookmark_border font-bold text-24px mr-6 "></i>
<i class="icon-share font-bold text-24px text-black-900 mr-3"></i>
</div>
<div>
<button class="btn btn-yellow flex gap-2 items-center ">
<i class="icon-speaker text-s-1"></i>
<div>
أكمل الاستماع
</div>
</button>
</div>
</div>
<div class="relative">
<img class="w-full object-center object-cover mt-14" src="images/article_1.png" alt="">
<div class="h-2 absolute bottom-0 right-0 z-10 bg-blue-300 w-full"></div>
</div>
<div class="grid md:grid-cols-4 grid-cols-1 gap-4 py-6 mt-8 md:text-s-1 leading-10">
<div class="col-span-1">
<div class="flex flex-row w-full justify-center md:justify-start hidden md:block">
<img src="svgs/article-thumbnail.svg" alt="" class="w-24 rounded-4">
</div>
<div class="my-2 text-base hidden md:block leading-8">
ولدت إيزابيل أليندي في بيرو وترعرعت في تشيلي ، وهي مؤلفة عدد من الكتب الأكثر مبيعًا والتي نالت استحسان
النقاد ، بما في ذلك The House of the Spirits و Of Love and Shadows و Eva Luna و Paula و In the Midst of
Winter. تُرجمت كتبها إلى أكثر من اثنتين وأربعين لغة وبيعت منها أكثر من أربعة وسبعين مليون نسخة حول
العالم.
</div>
<div class="py-2">
<button class="btn-red pt-0 pb-0 text-15px hidden md:block px-6 font-sans">
اتبع
</button>
</div>
<div class="my-2 py-2 border-b border-t border-black-400 py-3">
<div class="flex gap-2 flex-wrap justify-center md:justify-start">
<div class="bg-black-100 px-4 rounded-full py-1 text-15px"> الألم</div>
<div class="bg-black-100 px-4 rounded-full py-1 text-15px"> الخرف</div>
<div class="bg-black-100 px-4 rounded-full py-1 text-15px"> الخرف</div>
<div class="bg-black-100 px-4 rounded-full py-1 text-15px "> الزهايمر</div>
</div>
</div>
<a href="#" class="block text-blue-700 underline my-2 hidden md:block text-15px">
البودكاست من الكاتب نفسه
</a>
<a href="#" class="block text-blue-700 underline my-2 hidden md:block text-15px">
بودكاست ذات صلة
</a>
</div>
<div class="md:col-span-3 col-span-1 text-16px md:text-s-1">
<div class="pb-5">
في الليلة الأولى في منزلها بعد رجوعها من المستشفى، توقفت جدتي عن سؤالي مراراً وتكراراً بالفرنسية، بين
نوبات الألم الذي يعتصرها، “ماذا فعلتُ؟”.
</div>
<div class="pt-4 text-16px md:text-s-1 pb-5">
تبلغ جدتي دنيس 82 سنة، وهي في المراحل المتأخرة من مرض الزهايمر، ما يعني أنه لم يعد في إمكانها تكوين
ذكريات جديدة. في الصيف الماضي -من المستحيل تحديد الوقت على وجه الدقة- تعثرت جدتي وانكسرت إحدى فقرات
ظهرها. لكنها نسيت حدوث ذلك على الفور، وبقي الألم دليلاً على ذاك السقوط. احتاجت عائلتي أسابيع، وزيارتين
إلى المستشفى، قبل أن تفهم السبب وراء امتناعها عن الأكل وملازمتها الفراش.
</div>
<div class="pt-4 text-16px pb-5">
استعداداً لخروجها الثاني من المستشفى، سافرت إلى فرنسا من أجل رعايتها. عندما وصلت إلى الشقة التي تعيش
فيها بمفردها، لم أكن مهيأة تماماً للمدى الذي قد يزيد به مرض الزهايمر معاناتها.
</div>
<div class="pt-4 text-16px pb-5 ">
تكاد حنجرة جدتي تنخلع من مكانها مع كل نفس، إضافة إلى تأوهها خلال نومها. وعندما أحاول حثها على القيام من
الفراش لتناول الطعام، تدخل في نوبات غضب طفولية وتضربني بيديها وقدميها. وقد أُصيبت بسعال شديد للغاية
لدرجة أنه قد يهيأ لمن في غرفة بعيدة أنها تتقيأ! وهو ما يتحول أحياناً إلى قيء بالفعل بينما يحاول جسدها
طرد الألم بعيداً. لم تعد تميز الليل من النهار وأصبحت تتوه داخل منزلها، بل وحتى في غرفة نومها.
</div>
<div class="pt-6 text-16px pb-5">
في الليلة الأولى في منزلها بعد رجوعها من المستشفى، توقفت جدتي عن سؤالي مراراً وتكراراً بالفرنسية، بين
نوبات الألم الذي يعتصرها، “ماذا فعلتُ؟”.
</div>
<div class="pt-4 text-16px pb-5">
تبلغ جدتي دنيس 82 سنة، وهي في المراحل المتأخرة من مرض الزهايمر، ما يعني أنه لم يعد في إمكانها تكوين
ذكريات جديدة. في الصيف الماضي -من المستحيل تحديد الوقت على وجه الدقة- تعثرت جدتي وانكسرت إحدى فقرات
ظهرها. لكنها نسيت حدوث ذلك على الفور، وبقي الألم دليلاً على ذاك السقوط. احتاجت عائلتي أسابيع، وزيارتين
إلى المستشفى، قبل أن تفهم السبب وراء امتناعها عن الأكل وملازمتها الفراش.
</div>
<div class="pt-4 text-16px pb-5">
استعداداً لخروجها الثاني من المستشفى، سافرت إلى فرنسا من أجل رعايتها. عندما وصلت إلى الشقة التي تعيش
فيها بمفردها، لم أكن مهيأة تماماً للمدى الذي قد يزيد به مرض الزهايمر معاناتها.
</div>
<div class="pt-4 text-16px pb-5">
تكاد حنجرة جدتي تنخلع من مكانها مع كل نفس، إضافة إلى تأوهها خلال نومها. وعندما أحاول حثها على القيام من
الفراش لتناول الطعام، تدخل في نوبات غضب طفولية وتضربني بيديها وقدميها. وقد أُصيبت بسعال شديد للغاية
لدرجة أنه قد يهيأ لمن في غرفة بعيدة أنها تتقيأ! وهو ما يتحول أحياناً إلى قيء بالفعل بينما يحاول جسدها
طرد الألم بعيداً. لم تعد تميز الليل من النهار وأصبحت تتوه داخل منزلها، بل وحتى في غرفة نومها.
</div>
<div class="py-2 mt-10 ">
<div class="relative">
<img class="w-full h-500px object-center object-cover" src="images/article_7.png" alt="">
<div class="h-2 absolute bottom-0 right-0 z-10 bg-blue-300 w-full"></div>
</div>
<div class="text-center py-2">
تصوير: سليم مراد
</div>
</div>
<div class="pt-2 text-16px pb-5">
في الليلة الأولى في منزلها بعد رجوعها من المستشفى، توقفت جدتي عن سؤالي مراراً وتكراراً بالفرنسية، بين
نوبات الألم الذي يعتصرها، “ماذا فعلتُ؟”.
</div>
<div class="pt-4 hidden md:block pb-5">
تبلغ جدتي دنيس 82 سنة، وهي في المراحل المتأخرة من مرض الزهايمر، ما يعني أنه لم يعد في إمكانها تكوين
ذكريات جديدة. في الصيف الماضي -من المستحيل تحديد الوقت على وجه الدقة- تعثرت جدتي وانكسرت إحدى فقرات
ظهرها. لكنها نسيت حدوث ذلك على الفور، وبقي الألم دليلاً على ذاك السقوط. احتاجت عائلتي أسابيع، وزيارتين
إلى المستشفى، قبل أن تفهم السبب وراء امتناعها عن الأكل وملازمتها الفراش.
</div>
<div class="pt-4 hidden md:block pb-5">
استعداداً لخروجها الثاني من المستشفى، سافرت إلى فرنسا من أجل رعايتها. عندما وصلت إلى الشقة التي تعيش
فيها بمفردها، لم أكن مهيأة تماماً للمدى الذي قد يزيد به مرض الزهايمر معاناتها.
</div>
<div class="pt-4 hidden md:block pb-5">
تكاد حنجرة جدتي تنخلع من مكانها مع كل نفس، إضافة إلى تأوهها خلال نومها. وعندما أحاول حثها على القيام من
الفراش لتناول الطعام، تدخل في نوبات غضب طفولية وتضربني بيديها وقدميها. وقد أُصيبت بسعال شديد للغاية
لدرجة أنه قد يهيأ لمن في غرفة بعيدة أنها تتقيأ! وهو ما يتحول أحياناً إلى قيء بالفعل بينما يحاول جسدها
طرد الألم بعيداً. لم تعد تميز الليل من النهار وأصبحت تتوه داخل منزلها، بل وحتى في غرفة نومها.
</div>
<div class="flex flex-col text-right sm:items-center my-10 md:items-center items-start">
<div class="relative flex">
<img src="./images/1.png" alt="Video link img" class="w-full h-auto bg-cover">
<div class="h-2 absolute bottom-0 right-0 bg-blue-300 w-full"></div>
<i class="icon-play w-full h-full absolute text-34px shadow-inner-video grid place-items-center text-white sm:text-8.5xl"></i>
</div>
<h3 class="text-p-16px pt-4.5 sm:text-s-1" >غزة: مليونا شخص رهينة القرار الإسرائيلي لإدخال اللقاح</h3>
<p class="pt-4.5 text-base">45:00</p>
</div>
<div class="pt-2 hidden md:block pb-5">
في الليلة الأولى في منزلها بعد رجوعها من المستشفى، توقفت جدتي عن سؤالي مراراً وتكراراً بالفرنسية، بين
نوبات الألم الذي يعتصرها، “ماذا فعلتُ؟”.
</div>
<div class="pt-4 hidden md:block pb-5">
تبلغ جدتي دنيس 82 سنة، وهي في المراحل المتأخرة من مرض الزهايمر، ما يعني أنه لم يعد في إمكانها تكوين
ذكريات جديدة. في الصيف الماضي -من المستحيل تحديد الوقت على وجه الدقة- تعثرت جدتي وانكسرت إحدى فقرات
ظهرها. لكنها نسيت حدوث ذلك على الفور، وبقي الألم دليلاً على ذاك السقوط. احتاجت عائلتي أسابيع، وزيارتين
إلى المستشفى، قبل أن تفهم السبب وراء امتناعها عن الأكل وملازمتها الفراش.
</div>
<div class="pt-4 hidden md:block pb-5">
استعداداً لخروجها الثاني من المستشفى، سافرت إلى فرنسا من أجل رعايتها. عندما وصلت إلى الشقة التي تعيش
فيها بمفردها، لم أكن مهيأة تماماً للمدى الذي قد يزيد به مرض الزهايمر معاناتها.
</div>
<div class="pt-4 hidden md:block pb-16">
تكاد حنجرة جدتي تنخلع من مكانها مع كل نفس، إضافة إلى تأوهها خلال نومها. وعندما أحاول حثها على القيام من
الفراش لتناول الطعام، تدخل في نوبات غضب طفولية وتضربني بيديها وقدميها. وقد أُصيبت بسعال شديد للغاية
لدرجة أنه قد يهيأ لمن في غرفة بعيدة أنها تتقيأ! وهو ما يتحول أحياناً إلى قيء بالفعل بينما يحاول جسدها
طرد الألم بعيداً. لم تعد تميز الليل من النهار وأصبحت تتوه داخل منزلها، بل وحتى في غرفة نومها.
</div>
<div class="gap-6 mt-10 w-full py-5 items-center justify-center font-bold text-xl bg-yellow-400 hidden md:flex">
<i class="icon-bookmark_border text-24px"></i>
<i class="icon-share text-24px"></i>
</div>
<div class="mt-20 hidden md:block ">
<div class="text-3xl md:text-h1 font-bold mb-10 border-b pb-10 border-black-400">
التعليق أدناه
</div>
<div class="my-2">
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v10.0"
nonce="VrGcOQSO"></script>
<div class="fb-comments"
data-href="https://developers.facebook.com/docs/plugins/comments#configurator"
data-width="100%" data-numposts="1"></div>
</div>
</div>
</div>
</div>
<div class="mt-6 hidden md:block">
<div class="flex items-center justify-between border-b border-black-400 pb-7">
<div class="text-3xl font-bold md:text-h1 mb-7">
البودكاست من الكاتبة نفسها
</div>
<div class="flex items-center gap-3">
<div>الجميع</div>
<i class="icon-arrow_left"></i>
</div>
</div>
<div class="grid grid-cols-3 gap-x-6 gap-y-12 pt-14">
<?php
for ($i = 1; $i < 7; $i++) {
$titleFontSize = 'text-h4';
include 'components/podcast_in_grid_icon.php';
}
?>
</div>
</div>
<div class="mt-12 hidden md:block">
<div class="flex items-center justify-between pb-3 border-b border-black-400">
<div class="text-3xl font-black md:text-h1 py-7">
بودكاست ذات صلة
</div>
<div class="flex items-center gap-3">
<div>الجميع</div>
<i class="icon-arrow_left text-s-1"></i>
</div>
</div>
<div class="grid grid-cols-4 gap-x-7 gap-y-4 pt-16 pb-12">
<?php
for ($i = 1; $i < 5; $i++) {
$titleFontSize = 'text-2xl';
include 'components/article_text_over.php';
}
?>
</div>
</div>
<div class="py-10"></div>
</div>
<?php
include 'pre_footer.php';
include "footer.php";
include "footer_after.php";
?>
</body>
</html>