Haven/index.html at main · MaisSerhan/Haven · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Haven is a comprehensive resource designed to guide and support parents through the transformative
    journey from pregnancy to the first three years of their child's life. This PTUK University graduation project provides valuable information
    , practical advice, and helpful tools to empower families during this crucial period.">
    <meta name="author" content="Mais Sarhan, Aya Amer, Hiba Basheer, Mariam Mohammad">
    <meta name="keywords" content="Pregnancy, Childbirth, Prenatal Care, Childbirth, Postpartum, Infant Development, Baby Voice Recognition,
    First Year of Childhood, Parenting, Family, Child Health, Nutrition, Sleep, Developmental Stages, PTUK University, Graduation Project, New Parents, Breastfeeding">
    <!-- رابط Bootstrap للحصول على التصميم الجاهز للبطاقات والأزرار -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <!--for font-->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Satisfy&display=swap" rel="stylesheet">
    <!--for icon-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- رابط للحصول على التصميم   للصفحة الرئيسية -->
    <link rel="stylesheet" href="./Pages/Home/src/home.css">
    <link rel="shortcut icon" href="https://github.com/MaisSerhan/Haven/blob/main/Assets/images/HalfTranLogo.png?raw=true">
    <title>Haven</title>
</head>
<body>
    <header>
        <div id="navbar-container"></div>
    </header>
    <main>
        <!--front part for stages-->
        <section id="front">
            <div id="carouselExampleIndicators" class="carousel slide my-4 container">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active bg-danger" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="bg-danger"aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" class="bg-danger"aria-label="Slide 3"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" class="bg-danger"aria-label="Slide 4"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" class="bg-danger"aria-label="Slide 5"></button>
                </div>
                <div class="carousel-inner text-capitalize">
                    <div class="carousel-item active">
                        <div class="carousel-caption pink">
                            <h1 class="i18n-enter">أدخل إلى عالم هافن</h1>
                            <p class="i18n-Joyful">ملاذك لرحلة أبوية سعيدة.</p>
                            <a class="btn px-5 py-2 btn-danger rounded-pill i18n-join" href="./Pages/Login_Signup/signup.html">انضم إلينا</a>
                        </div>
                        <img src="https://t4.ftcdn.net/jpg/04/54/75/15/360_F_454751585_sMCifhSXZ8CdN9TbnccuZzY0SsSbNDvJ.jpg" class="d-block w-100" alt="Slide 1">
                    </div>
                    <div class="carousel-item">
                         <div class="carousel-caption pink">
                            <h2 class="i18n-pregnancy">مرحلة الحمل</h2>
                            <div class="rit-left d-flex justify-content-center"><p class="i18n-inform_Support d-inline"></p>&nbsp;<span class="i18n-pregnancy">مرحلة الحمل</span></div>
                            <a class="btn px-5 py-2 btn-danger rounded-pill i18n-learn" href="../../Pages/Pregnant/Pregnant.html">معرفة المزيد</a>
                        </div>
                        <img src="https://www.mayoclinichealthsystem.org/-/media/national-files/images/hometown-health/2020/pregnant-woman-holding-baby-bump.jpg?sc_lang=en" class="d-block w-100" alt="Slide 2">
                    </div>
                    <div class="carousel-item">
                         <div class="carousel-caption pink">
                            <h2 class="i18n-birth">مرحلة الولادة</h2>
                            <div class="rit-left d-flex justify-content-center"><p class="i18n-inform_Support d-inline"></p>&nbsp;<span class="i18n-birth">مرحلة الولادة</span></div>
                            <a class="btn px-5 py-2 btn-danger rounded-pill i18n-learn" href="../../Pages/Birth/Birth.html">معرفة المزيد</a>
                        </div>
                        <img src="https://static.srpcdigital.com/styles/1037xauto/public/2023-12/452714.jpeg.webp" class="d-block w-100" alt="Slide 3">
                    </div>
                    <div class="carousel-item">
                        <div class="carousel-caption pink">
                           <h2 class="i18n-year1">مرحلة السنة الاولى من الطفل</h2>
                           <div class="rit-left d-flex justify-content-center"><p class="i18n-inform_Support d-inline"></p>&nbsp;<span class="i18n-year1">مرحلة السنة الاولى من الطفل</span></div>
                           <a class="btn px-5 py-2 btn-danger rounded-pill i18n-learn" href="../../Pages/Year1/oneYear.html">معرفة المزيد</a>
                       </div>
                       <img src="https://www.materna-ar.co.il/sites/default/files/2023-05/Article%209.jpg" class="d-block w-100" alt="Slide 3">
                   </div>
                   <div class="carousel-item">
                        <div class="carousel-caption pink">
                            <h2 class="i18n-year2-3">مرحلة السنة الثانية والثالثة من الطفل</h2>
                            <div class="rit-left d-flex justify-content-center"><p class="i18n-inform_Support d-inline"></p>&nbsp;<span class="i18n-year2-3">مرحلة السنة الثانية والثالثة من الطفل</span></div>
                            <a class="btn px-5 py-2 btn-danger rounded-pill i18n-learn" href="../../Pages/Year2-3/year2.html">معرفة المزيد</a>
                        </div>
                        <img src="https://www.3a2ilati.com/tachyon/sites/4/2022/01/36e51ff79151b20967145a6e92aa491746fd77f1.jpg" class="d-block w-100" alt="Slide 3">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                  </button>
                  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                  </button>
            </div>
        </section>
        <!--about-->
        <section id="about" class="container my-5">
            <div class="full-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 left-content pink bgpink text-end">
                            <h1 class="i18n-about-us text-center">من هافن</h1>
                            <p class="i18n-p-about text-end" dir="rtl">
                            بدأت هافن كمشروع تخرج من جامعة فلسطين التقنية خضوري برؤية تهدف إلى تمكين الآباء والأمهات. واليوم، تُعدّ موقعًا إلكترونيًا شاملًا للأمومة، يُقدّم موارد أساسية لرحلة الأمومة من الحمل إلى السنوات الثلاث الأولى. نحن ملتزمون بتوفير معلومات دقيقة وبناء مجتمع داعم لجميع الآباء والأمهات.
                            </p>
                            <div class="accordion-container bgpink">
                                <div class="accordion accordion-flush" id="accordionFlushExample">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                                <img src="https://ptuk.edu.ps/procedures-manual/img/logo.png" height="50px">
                                            </button>
                                            <span></span>
                                        </h2>
                                        <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
                                            <div class="accordion-body i18n-p-PTUK">جامعة فلسطين التقنية خضوري هي إحدى الجامعات الفلسطينية الرائدة في مجال التكنولوجيا 📚💡، حيث تسهم في تطوير التعليم العالي والبحث العلمي، وتوفير بيئة أكاديمية متميزة للطلاب 🎓🚀.</div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed i18n-a-Team" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                                            🤝 أعضاء الفريق
                                            </button>
                                        </h2>
                                        <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
                                            <div class="accordion-body i18n-p-Team" dir="rtl">ميس سرحان👩🏻، آية عامر👩🏻، هبة بشير👩🏻، مريم محمد👩🏻</div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed i18n-a-Haven-Vision" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                                            👁️  رؤية هافن
                                            </button>
                                        </h2>
                                        <div id="flush-collapseThree" class="accordion-collapse collapse i18n-p-Haven-Vision py-2" data-bs-parent="#accordionFlushExample">
                                            <div class="accordion-body p-Haven-Vision">🌟 تتمثل رؤية هافن في أن تكون المصدر الإلكتروني الرائد، لتمكين الآباء والأمهات من التنقل بثقة في رحلة الطفولة المبكرة في فلسطين 👶❤️، من خلال توفير الدعم، المعرفة، والأدوات اللازمة لضمان نمو صحي وسعيد للأطفال. 🏡✨.</div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed i18n-a-Haven-name" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseThree">
                                            💭 سبب اختيار الاسم
                                            </button>
                                        </h2>
                                        <div id="flush-collapseFour" class="accordion-collapse collapse i18n-p-Haven-name py-2" data-bs-parent="#accordionFlushExample">
                                            <div class="accordion-body p-Haven-name">ان الأم هي ملجأ للجميع 👩‍👧‍👦💖 و'هافن' تعني الملاذ والملجأ 🏡✨ والتي ستكون ملجأ للأم 🤰❤️.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--blog Post-->
        <section id="blog" class="py-5 container">
            <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner text-center">
                    <div class="carousel-item active">
                        <div class="blog-posts card-group gap-4 text-capitalize flex-shrink-0 w-100 d-flex justify-content-around">
                            <article class="blog-post card flex-grow-1" style="flex-basis: 40%;">
                                <h6><a href="https://deemzblog.wordpress.com/category/%D8%A3%D9%85%D9%88%D9%85%D8%A9/" class="i18n-a-post1 pink">متعة الأمومة – ٤ خطوات لأمومة سعيدة .!🎉</a></h6>
                                <small class="post-meta i18n-p-post1 brownpink">📅 نشرت في: 30 أغسطس 2018</small>
                                <img src="https://www.alquranclasses.com/wp-content/uploads/2018/03/shutterstock_586741628.jpg" alt="Prenatal Nutrition" class="img-fluid card-img-top" height="50px">
                                <div class="card-body">
                                    <p class="card-text i18n-d-post1 apink">😥كثير من الحوامل و الامهات لأول مرة يرسلون لي رسائل فيها كثير من الخوف والتوتر من الامومة ، او فترة ما بعد الولادة...</p>
                                    <a href="https://deemzblog.wordpress.com/category/%D8%A3%D9%85%D9%88%D9%85%D8%A9/ " class="read-more card-link i18n-readmore pink">➡️اقرأ المزيد</a>
                                </div>
                            </article>
                            <article class="blog-post card flex-grow-1" style="flex-basis: 40%;" >
                                <h6><a href="https://islamicsham.org/nashrah/3338 " class="i18n-a-post2 pink">🎨فن الأمومة</a></h6>
                                <small class="post-meta i18n-p-post2 brownpink">📅 نشرت في: 3 يونيو 2017</small>
                                <img src="https://islamicsham.org/resizeimages?url=https://islamicsham.org/sites/default/files/mothersday.jpg&w=290" alt="Childbirth Tips" class="img-fluid card-img-top" height="50px" width="100%">
                                <div class="card-body">
                                    <p class="card-text i18n-d-post2 apink">🤔...قد يتساءل كثيرون: وهل الأم بحاجة إلى فن ما دامت تستطيع إطعام طفلها وتنظيفه؟!!</p>
                                    <a href="https://islamicsham.org/nashrah/3338" class="read-more card-link i18n-readmore pink">➡️اقرأ المزيد</a>
                                </div>
                            </article>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="blog-posts card-group gap-4 text-capitalize flex-shrink-0 w-100 d-flex justify-content-around">
                            <article class="blog-post card flex-grow-1" style="flex-basis: 40%;">
                                <h6><a href="https://blog.lamsa.com/2-2-2021/" class="i18n-a-post3 pink">💖نحو أمومة أكثر إشباعاً</a></h6>
                                <small class="post-meta i18n-p-post3 brownpink">📅 تم نشره في:  10 نوفمبر 2023</small>
                                <img src="https://cdn-blog.lamsaworld.com/2021/02/shutterstock_1494190337-1130x580.jpg" alt="Prenatal Nutrition" class="img-fluid card-img-top" width="50px">
                                <div class="card-body">
                                    <p class="card-text i18n-d-post3 apink">التأقلم مع دوركِ كأم هو من الأمور الأكثر صعوبة في رحلة الأمومة، الكثير من هذه الصعوبة يكمن في...</p>
                                    <a href="https://blog.lamsa.com/2-2-2021/" class="read-more card-link i18n-readmore pink">➡️اقرأ المزيد</a>
                                </div>
                            </article>
                            <article class="blog-post card flex-grow-1" style="flex-basis: 40%;">
                                <h6><a href="https://www.fatafeat.com/article/23239-%D8%AE%D8%A8%D8%B1%D8%A9-%D8%B3%D9%86%D9%8A%D9%86-%D8%A7%D9%84%D8%A3%D9%85%D9%88%D9%85%D8%A9-%D8%AA%D8%B6%D8%B9-%D8%A7%D9%84%D8%A3%D9%85%D9%87%D8%A7%D8%AA-%D8%A7%D9%84%D8%AC%D8%AF%D8%AF-%D8%B9%D9%84%D9%89-%D8%A8%D8%AF%D8%A7%D9%8A%D8%A9-%D8%A7%D9%84%D8%B7%D8%B1%D9%8A%D9%82"  class="i18n-a-post4 pink">🛤️خبرة سنين الأمومة تضع الأمهات الجُدد على بداية الطريق</a></h6>
                                <small class="post-meta i18n-p-post4 brownpink">📅 نشرت في: 3 يونيو 2017</small>
                                <img src="https://v-genius.fatafeat.com/storage/attachments/24/7JUL_AR_921188.png/r/800/7JUL_AR_921188.png" alt="Childbirth Tips" class="img-fluid card-img-top" height="51px">
                                <div class="card-body">
                                    <p class="card-text i18n-d-post4 apink">خوف، قلق و انتظار بتلهُف و ترقُب ... هذا كل ما تشعر به كل امرأة في طريقها لأن تكون أم....</p>
                                    <a href="https://www.fatafeat.com/article/23239-%D8%AE%D8%A8%D8%B1%D8%A9-%D8%B3%D9%86%D9%8A%D9%86-%D8%A7%D9%84%D8%A3%D9%85%D9%88%D9%85%D8%A9-%D8%AA%D8%B6%D8%B9-%D8%A7%D9%84%D8%A3%D9%85%D9%87%D8%A7%D8%AA-%D8%A7%D9%84%D8%AC%D8%AF%D8%AF-%D8%B9%D9%84%D9%89-%D8%A8%D8%AF%D8%A7%D9%8A%D8%A9-%D8%A7%D9%84%D8%B7%D8%B1%D9%8A%D9%82" class="read-more card-link i18n-readmore pink">
                                        ➡️اقرأ المزيد
                                    </a>
                                </div>
                            </article>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="blog-posts card-group gap-4 text-capitalize flex-shrink-0 w-100 d-flex justify-content-around">
                            <article class="blog-post card flex-grow-1" style="flex-basis: 40%;">
                                <h6><a href="https://family-guidance.net/contents/view/details?id=649" class="i18n-a-post5 pink">🛡️الأمومة الآمنة</a></h6>
                                <small class="post-meta i18n-p-post5 brownpink">📅  تم نشره في: 30 أكتوبر 2020</small>
                                <img src="https://family-guidance.net/static/uploads/contents/thumb_1604053239de743068010c95882635293d00070b3d.jpg" alt="Prenatal Nutrition" class="img-fluid card-img-top">
                                <div class="card-body">
                                    <p class="card-text i18n-d-post5 apink">...الأمومة هي تلك الصفة النبيلة التي لا تكاد تكتمل حياة المرأة بدونها، ولا ترتوي بسواها، فليس من حدثٍ</p>
                                    <a href="https://family-guidance.net/contents/view/details?id=649" class="read-more card-link i18n-readmore pink">➡️اقرأ المزيد</a>
                                </div>
                            </article>
                            <article class="blog-post card flex-grow-1" style="flex-basis: 40%;">
                                <h6><a href="https://www.postpartum.net/ar/maternity-leave/" class="i18n-a-post6 pink">💼إجازة الأمومة</a></h6>
                                <small class="post-meta i18n-p-post6 brownpink">📅  نشرت في: 15 يونيو 2016</small>
                                <img src="https://www.postpartum.net/wp-content/uploads/2014/12/MotherBabyConnectionSmall.jpg" alt="Prenatal Nutrition" class="img-fluid card-img-top">
                                <div class="card-body">
                                    <p class="card-text i18n-d-post6 apink">تُعرف إجازة الأمومة ، التي تُعرف غالبًا باسم إجازة الأبوة ، أو إجازة الأسرة ...</p>
                                    <a href="https://www.postpartum.net/ar/maternity-leave/" class="read-more card-link i18n-readmore pink">➡️اقرأ المزيد</a>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </section>
    </main>
    <div id="footer-container"></div>
    <script src="./Assets/scripts/main.js"></script>
    <script src="./Assets/scripts/NavFooter.js"></script>
    <script>
    function publicationLink () {
        const token = localStorage.getItem('token');
        const userLevelRaw = localStorage.getItem('user_level');
        const userLevel = userLevelRaw ? userLevelRaw.trim() : null;

        if (userLevel) {
            const carousel_prev = document.querySelector('#front .carousel-control-prev');
            const carousel_next = document.querySelector('#front .carousel-control-next');
            const carousel_inde = document.querySelector('#front .carousel-indicators');

            if (carousel_prev) carousel_prev.style.display = 'none';
            if (carousel_next) carousel_next.style.display = 'none';
            if (carousel_inde) carousel_inde.style.display = 'none';

            const items = document.querySelectorAll('#front .carousel-item');
            if (items.length > 0) {
                items.forEach(item => item.classList.remove('active'));

                let index = -1;
                if (userLevel === 'حمل') index = 1;
                if (userLevel === 'ولادة') index = 2;
                if (userLevel === 'السنة الأولى من طفلك') index = 3;
                if (userLevel === 'السنة الثانية من طفلك') index = 4;

                if (index >= 0 && index < items.length) {
                    items[index].classList.add('active');
                }
            }
        }

        if (token) {
            // يمكنك استخدامه إذا احتجت
        }
    }
</script>

</body>
</html>