-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
485 lines (452 loc) · 20.1 KB
/
index.html
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
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/favicon.ico" type="image/x-icon">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc"
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<title>موقع جدولة </title>
</head>
<body>
<!-- The start nav bar-->
<nav>
<div class="bars-menu">
<i class="fas fa-bars"></i>
</div>
<div class="logo">
<img src="./images/gadwala-logo.png" alt="">
</div>
<!-- ------------- -->
<!-- start the nav-item -->
<ul class="nav-items">
<li class="nav-item">
<a href="#" class="nav-links nav-links--active">
المميزات
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 152.9 43.4" style="enable-background:new 0 0 152.9 43.4;"
xml:space="preserve">
<path
d="M151.9,13.6c0,0,3.3-9.5-85-8.3c-97,1.3-58.3,29-58.3,29s9.7,8.1,69.7,8.1c68.3,0,69.3-23.1,69.3-23.1 s1.7-10.5-14.7-18.4" />
</svg>
</a>
</li>
<li class="nav-item">
<a href="#" class=" nav-links">
الأسعار
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 152.9 43.4" style="enable-background:new 0 0 152.9 43.4;"
xml:space="preserve">
<path
d="M151.9,13.6c0,0,3.3-9.5-85-8.3c-97,1.3-58.3,29-58.3,29s9.7,8.1,69.7,8.1c68.3,0,69.3-23.1,69.3-23.1 s1.7-10.5-14.7-18.4" />
</svg>
</a>
</li>
<li class="nav-item">
<a href="#" class=" nav-links">
المصادر
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 152.9 43.4" style="enable-background:new 0 0 152.9 43.4;"
xml:space="preserve">
<path
d="M151.9,13.6c0,0,3.3-9.5-85-8.3c-97,1.3-58.3,29-58.3,29s9.7,8.1,69.7,8.1c68.3,0,69.3-23.1,69.3-23.1 s1.7-10.5-14.7-18.4" />
</svg>
</a>
</li>
<li class="nav-item">
<a href="#" class=" nav-links">
كيف تستخدم الجدولة
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 152.9 43.4" style="enable-background:new 0 0 152.9 43.4;"
xml:space="preserve">
<path
d="M151.9,13.6c0,0,3.3-9.5-85-8.3c-97,1.3-58.3,29-58.3,29s9.7,8.1,69.7,8.1c68.3,0,69.3-23.1,69.3-23.1 s1.7-10.5-14.7-18.4" />
</svg>
</a>
</li>
</ul>
<!-- End nav-item -->
<a href="/"><button class="bn632-hover bn28">تسجيل الدخول</button></a>
</nav>
<!-- The End nav bar-->
<!-- start Hero Section -->
<section class="hero">
<div class="content">
<h1> نظم أعمالك <span> بجدولة </span></h1>
<h2><span>الأعمال الذكية</span></h2>
<p>
قل وداعا لرسائل البريد الالكتروني والحجز المضاعف
</p>
<p>
وعدم الحضور مع جدولة اعمال تتيح لك مزامنة.
</p>
<a href="#"><button class="bn632-hover bn28"> سجل للاستخدام المجاني</button></a>
</div>
</section>
<!-- End Hero Section -->
<!-- Start Scheduler-Time Section -->
<section class="scheduler-section">
<span class="dot"></span>
<h1 class="main-title"> <span> اعد جدولك الزمني</span> بسهولة ، وحصل على <span> حجز
</span> عندما تريد
</h1>
<div class="scheduler-time">
<div class="parts part-1">
<img src="images/part-1.svg" alt="">
<br>
<h3>حدد وقت فراغك قبل الموعد</h3>
<br>
<p>
اضف وقت محدد الى جدولك
للاستعداد قبل كل موعد للتواصل معه.
</p>
</div>
<div class="parts part-2"> <img src="images/part-6.svg" alt="">
<br>
<h3> حدد اجازتك </h3>
<br>
<p>
يمنع الاشخاص من الحجز اثناء فترة الراحة تحديد العمل وأوقات الراحة
</p>
</div>
<div class="parts part-3"> <img src="images/part-4.svg" alt="">
<br>
<h3>تجنب الحجوزات المفاجئه</h3>
<br>
<p>
استقبل المواعيد المحددة ضمن
جدولك وتجنب الحجوزات
المفاجئة
</p>
</div>
<div class="parts part-4"> <img src="images/part-5.svg" alt="">
<br>
<h3>خطط لعملك ووفت راحتك </h3>
<br>
<p>
اضف وقت محدد الى جدولك
للاستعداد قبل كل موعد للتواصل معه.
</p>
</div>
<div class="parts part-5"> <img src="images/part-3.svg" alt="">
<br>
<h3>زامن تقويماتك</h3>
<br>
<p>
قم بتحديد الأوقات المحجوزه
على انها غير متاحة من خلال
تميز الأوقات المتاحة
</p>
</div>
<div class="parts part-6"> <img src="images/part-7.svg" alt="">
<br>
<h3> تجنب الغاء الحجوزات الاخيرة </h3>
<br>
<p>
استقبل المواعيد المحددة ضمن
جدولك وتجنب الحجوزات
المفاجئة
</p>
</div>
</div>
</section>
<!-- End Scheduler-Time Section -->
<!-- Start Page control -->
<section class="page-control">
<span class="dot-control"></span>
<h1 class="main-titleC">كيف تريد أن تبدو صفحة الحجز لديك</h1>
<h5>تحكم بما يلي</h5>
<img src="images/emploi-du-temps2_auto_x2.jpg" alt="emploi">
</section>
<!-- End page control -->
<!-- start section Fratures -->
<section class="Features">
<div class="free-2"></div>
<div class="image-choose">
<img src="images/we2.jpg" alt="feature">
</div>
<div class="part-1">
<img src="images/brand-image.png" alt="">
<div class="contant">
<h3>اختر علامتك التجارية</h3>
<p>
حدد مخطط ألوان لصفحة الحجز الخاصة بك
. وعناصرها التي تتوافق مع علامتك التجارية
اختر موضوعا يجده عملاؤك جذابا ومريحا
</p>
</div>
</div>
<span class="dot-control1"></span>
<div class="part-2">
<img src="images/color-wheel.png" alt="">
<div class="contant">
<h3>اختر لونك المفضل</h3>
<p>
حدد مخطط ألوان لصفحة الحجز الخاصة بك
. وعناصرها التي تتوافق مع علامتك التجارية
اختر موضوعا بجده عملاؤك جذابا ومريحا
</p>
</div>
</div>
<div class="part-3">
<img src="images/web-development.png" alt="">
<div class="contant">
<h3>ادرج موقعك الشخصي</h3>
<p>
هل لديك موقع على شبكة الإنترنت؟ تضمين صفحة
الحجز في ذلك. استخدم عناصر العلامة التجارية
ولوحات الألوان التي تتوافق مع موقع الويب الخاص
</p>
</div>
</div>
<span class="dot-control"></span>
<div class="part-4">
<img src="images/world-wide-web.png" alt="">
<div class="contant">
<h3> استضف على الدومين الخاص </h3>
<p>
قم بتعيين صفحة الحجز إلى المجال الخاص بك ونقل
سلطة المجال إلى صفحة الحجز الخاصة بك أيضا
امنح صفحة الحجز الخاصة بك دفعة لتحسين محركات
. البحث
</p>
</div>
</div>
<div class="free-1">
</div>
</section>
<!-- End section Features -->
<!-- start section Zoom dates -->
<section class="Zoom-dates">
<div class="images-zoom">
<img id="img-zoom1" src="images/zoom2.jpg" alt="">
<img id="img-zoom2" src="images/feature-2.jpg" alt="">
<img id="img-zoom3" src="images/google-meet.jpg" alt="">
</div>
<div class="content-zoom">
<h1>حدد مواعيدك بما يناسبك</h1>
<h3>مدفوعة أو مجاناً</h3>
<p>
اختر طريقة الدفع الكنية أو الجزئية قبل الموعد عبر
طرق الدفع
Strip, Paypal
</p>
<h3>أونلاين أو حضوري</h3>
<p>
تم اعداد برنامجي في حال كان موعدك اون لاين
Zoom, Google Meet
</p>
</div>
</section>
<!-- End section Zoom dates -->
<!-- start section best-Scheduler -->
<section class="best-scheduler">
<h1 class="main-titleC">قدم أفضل <span id="white-span">جدولة</span> لعملائك</h1>
<div class="best-content">
<div class="bestS b1 hvr-curl-bottom-left">
<h3>الأحكام والشروط</h3>
<p>
فعل خدمة الاحكام والشروط لزبائك
</p>
</div>
<div class="bestS b2 hvr-curl-bottom-left">
<h3>الوقت, المنطقة الزمنية</h3>
<p>
قم بلكشف التلقائي عن المنطقة
الزمنية حتى يتمكن العملاء من تحديد لغتهم او منطقتهم
الزمنية
</p>
</div>
<div class="bestS b3 hvr-curl-bottom-left">
<h3>احجز لعملائك</h3>
<p>
ارسال دعوة الى عميلك في حال قمت
الته بالحجز له
</p>
</div>
<div class="bestS b4 hvr-curl-bottom-left">
<h3>
ثلاث أنواع من صفحات الحجز
</h3>
<p>
صفحة العمل, صفحة الخدمات, صفحة أعضاء الفريق
</p>
</div>
</div>
</section>
<!-- End section best-Scheduler -->
<!-- start section login-use -->
<section class="login-use">
<span class="dot-U1"></span>
<span class="dot-U2"></span>
<h1>قلل من حالات <span>عدم الحضور</span> مع الرسائل
<br>
البريد الألكتروني و الرسائل القصيرة المخصصة
<br> <br>
<button class="bn632-hover bn28-use"> سجل للاستخدام المجاني</button>
</h1>
<span class="dot-section2"></span>
</section>
<!-- End section login-use -->
<!-- Start Scheduler-Time Section -->
<section class="scheduler-section2">
<div class="scheduler-time">
<div class="card">
<div class="content">
<br>
<h3> ضع علامة على رسائل البريد
الإلكتروني الخاصة بك
</h3>
<br>
<p>
صمم رسائل
البريد الإلكتروني الخاصة بك مع شعار
.html الشركة والألوان والصور ، وقم بتحميل
حسن التعرف على علامتك التجارية مع كل بريد
</p>
</div>
</div>
<div class="card">
<div class="content">
<br>
<h3> تذكير الرسائل القصيرة</h3>
<br>
<br>
<p>
أظهرت الدراسات الاستقصائية والبحوث أن العملاء
.أكثر من رسائل البريد الإلكتروني SMS يفتحون رسائل
إرسال رسائل تذكير عبر الرسائل القصيرة وتقليل
</div>
</div>
<div class="card">
<div class="content">
<br>
<h3>تذكير الموعد</h3>
<br>
<br>
<p>
قلل من حالات عدم الحضور من خلال
تذكير
بالمواعيد القادمة.قم بتشغيل تذكيرات متعددة على
. فترات منتظمة إذا كنت تريد أكثر من تذكير واحد
</p>
</div>
</div>
<div class="card">
<div class="content">
<br>
<h3>متغيرات الحجز في رسائل
البريد الإلكتروني </h3>
<br>
<p>
قم بتضمين ارتباطات الانضمام إلى الاجتماع والإلغاء
وإعادة الجدولة. استخدم متغيرات الحجز لتخصيص
رسائل البريد الإلكتروني تلقائيا لكل عميل
</p>
</div>
</div>
<div class="card">
<div class="content">
<br>
<h3>تأكيدات الموعد</h3>
<br>
<br>
<p>يمكنك إخطار أعضاء فريقك
وعملائك تلقائيا عند حجز الموعد و / أو ا
لانتهاء و / أو الإلغاء و / أو إعادة الجدولة و
أو عدم الحضور. قم بإعداد /
</p>
</div>
</div>
<div class="card ">
<div class="content">
<br>
<h3 style=""> إضفاء الطابع الشخصي على رسائل البريد
الألكتروني </h3>
<br>
<p>
خاطب العملاء بأسمائهم. أرسل من عنوان
بريد إلكتروني مألوف ، سواء كان من أ
أعضاء الفريق المعروف أو عنوان البريد الإلكتروني
</p>
</div>
</div>
</div>
</section>
<!-- End Scheduler-Time2 Section -->
<!-- start section try-now -->
<section class="try-now">
<span class="dot-now"></span>
<h1 class="main-titleC">تحقق من المزيد من الميزات مع
<br>
نسخة تجريبية مجانية مدتها
<br>
15 يوما
</h1>
<button class="bn632-hover bn28-use">جرب الأن </button>
<h1></h1>
</section>
<!-- End section try-now -->
<!-- Start footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>الخدمات</h4>
<ul>
<li><a href="#">مستشارون محترفون</a></li>
<li><a href="#">إدارة الممتلكات</a></li>
<li><a href="#">صالون شعر</a></li>
<li><a href="#">رعاية طفل</a></li>
<li><a href="#">باكرز والمحركون</a></li>
</ul>
</div>
<div class="footer-col">
<h4>حلول جدولة</h4>
<ul>
<li><a href="#">محاسبون</a></li>
<li><a href="#">المدونة الصوتية</a></li>
<li><a href="#">الاجتماعات</a></li>
<li><a href="#">استشارة مهنية</a></li>
</ul>
</div>
<div class="footer-col">
<h4>دليل المستخدمين</h4>
<ul>
<li><a href="#">ميزات تطبيق الجدولة </a></li>
<li><a href="#">جدولة المواعيد</a></li>
<li><a href="#">أسئلة وأجوبة</a></li>
<li><a href="#">القاموس</a></li>
</ul>
</div>
<div class="footer-col">
<h4>تابعونا </h4>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- End footer -->
<div class="developers">
<h3 id="dev1"> صمم بكل ❤️ <a id="deva1" href="https://twitter.com/eslam_D7" target="_blank"> بواسطة
اسلام البيك</a>
</h3>
<br>
<h3 id="dev2"> فكرة و تصميم ui /ux <a id="deva2" href="https://twitter.com/AulaAlaa4"
target="_blank"> بواسطة
عٌلا علاء</a>
</h3>
</div>
<script src="js/script.js"></script>
</body>
</html>