PrayerPath/index.html at main · zaina-e/PrayerPath · 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
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prayer Path</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="navbar.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
  <div class="navbar-brand">
      <a href="index.html">Prayer Path</a>
  </div>
  <ul class="navbar-menu">
      <li><a href="aboutus.html">من نحن</a></li>
      <li><a href="daily.html">الورد اليومي</a></li>
      <li><a href="prayer-times.html">اوقات الصلاة</a></li>
      <li><a href="duaa.html">الادعية</a></li>
      <li><a href="athkarhtml.html">الاذكار</a></li>
  </ul>
  <div class="navbar-buttons">
      <a href="login.html">تسجيل الدخول</a>
      <a href="createacc.html">إنشاء حساب</a>

  </div>
  <div class="profile-icon">
    <a href="profile.html"><img src="icon.png" alt="صورة الملف الشخصي"></a>
</div>
</nav>

<main>

    <!-- Hero Section -->
    <header class="hero">
        <div class="hero-overlay">

        </div>
    </header>

    <!-- Prayer Times Section -->
    <section class="prayer-times">
        <h2>أوقات الصلاة</h2>
        <div class="location" id="location">
          <span>📍</span><span>جاري تحديد الموقع...</span>
        </div>
        <div class="prayer-container" id="prayer-container">
          <div class="loading">جاري تحميل أوقات الصلاة...</div>
        </div>
    </section>

    <!-- Additional Content Section -->
    <section class="extra-content">
        <div class="extra-card">أَصْـبَحْنا وَأَصْـبَحَ المُـلْكُ لله

            وَالحَمدُ لله ، لا إلهَ إلاّ اللّهُ

           وَحدَهُ لا شَريكَ لهُ، لهُ المُـلكُ

            ولهُ الحَمْـد، وهُوَ على كلّ

            شَيءٍ قدير ، رَبِّ أسْـأَلُـكَ

           خَـيرَ ما في هـذا اليوم وَخَـيرَ

           ما بَعْـدَه ، وَأَعـوذُ بِكَ مِنْ

            شَـرِّ ما في هـذا اليوم وَشَرِّ ما

            بَعْـدَه، رَبِّ أَعـوذُبِكَ مِنَ

           الْكَسَـلِ وَسـوءِ الْكِـبَر ، رَبِّ

            أَعـوذُ بِكَ مِنْ عَـذابٍ في

            النّـارِ وَعَـذابٍ في القَـبْر
            <br><a href="athkarhtml.html"><button class="athkar-btn">الاذكار</button></a>
        </div>
        <div class="extra-card">﴿إِنَّ اللَّهَ لا يَغفِرُ أَن يُشرَكَ بِهِ وَيَغفِرُ ما
            دونَ ذلِكَ لِمَن يَشاءُ وَمَن يُشرِك بِاللَّهِ
        فَقَدِ افتَرى إِثمًا عَظيمًا﴾ [النساء: ٤٨]
        إن الله تعالى لا يغفر ولا يتجاوز عمَّن

        أشرك به أحدًا من مخلوقاته، أو كفر بأي

        نوع من أنواع الكفر الأكبر، ويتجاوز ويعفو

        عَمَّا دون الشرك من الذنوب، لمن يشاء

        من عباده، ومن يشرك بالله غيره فقد

        اختلق ذنبًا عظيمًا.
        <br><a href="athkarhtml.html"><button class="athkar-btn">المزيد من الآيات</button></a></div>
        <div class="extra-card">اللهم إني أعوذ بك من الكسل والهرم، والمغرم والمأثم، اللهم إني أعوذ بك من عذاب النار وفتنة النار، وفتنة القبر وعذاب القبر، وشر فتنة الغنى، وشر فتنة الفقر، ومن شر فتنة المسيح الدجال، اللهم اغسل خطاياي بماء الثلج والبرد، ونق قلبي من الخطايا، كما ينقى الثوب الأبيض من الدنس، وباعد بيني وبين خطاياي كما باعدت بين المشرق والمغرب

            <br><a href="duaa.html"><button class="athkar-btn">المزيد من الأدعية</button></a>
           </div>
        </main>
    </section>

    <script>
        // تحديد موقع المستخدم
        function getLocation() {
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
          } else {
            document.getElementById("location").innerHTML = "المتصفح لا يدعم تحديد الموقع";
          }
        }

        // عند الحصول على الموقع بنجاح
        function showPosition(position) {
          const lat = position.coords.latitude;
          const lon = position.coords.longitude;
          const locationText = `إحداثياتك: (${lat.toFixed(2)}, ${lon.toFixed(2)})`;
          fetchPrayerTimes(lat, lon);
        }

        // إذا كان هناك خطأ في تحديد الموقع
        function showError(error) {
          switch (error.code) {
            case error.PERMISSION_DENIED:
              document.getElementById("location").innerHTML = "تم رفض إذن تحديد الموقع.";
              break;
            case error.POSITION_UNAVAILABLE:
              document.getElementById("location").innerHTML = "الموقع غير متاح.";
              break;
            case error.TIMEOUT:
              document.getElementById("location").innerHTML = "انتهت مهلة تحديد الموقع.";
              break;
            default:
              document.getElementById("location").innerHTML = "خطأ غير معروف.";
          }
        }

        // جلب أوقات الصلاة باستخدام API
        function fetchPrayerTimes(lat, lon) {
          const apiUrl = `https://api.aladhan.com/v1/timings?latitude=${lat}&longitude=${lon}&method=4`;

          fetch(apiUrl)
            .then((response) => response.json())
            .then((data) => {
              const timings = data.data.timings;
              const prayerContainer = document.getElementById("prayer-container");
              prayerContainer.innerHTML = ""; // حذف النص القديم

              const prayers = [
                { name: "الفجر", time: timings.Fajr },
                { name: "الظهر", time: timings.Dhuhr },
                { name: "العصر", time: timings.Asr },
                { name: "المغرب", time: timings.Maghrib },
                { name: "العشاء", time: timings.Isha },
              ];

              prayers.forEach((prayer) => {
                const card = document.createElement("div");
                card.className = "prayer-card";
                card.innerHTML = `
                  <div class="prayer-icon">🕌</div>
                  <div class="prayer-name">${prayer.name}</div>
                  <div class="prayer-time">${prayer.time}</div>
                `;
                prayerContainer.appendChild(card);
              });

              document.getElementById("location").innerHTML = `📍 موقعك الحالي`;
            })
            .catch((error) => {
              document.getElementById("prayer-container").innerHTML = "حدث خطأ أثناء جلب البيانات.";
            });
        }

        // استدعاء دالة تحديد الموقع
        getLocation();
      </script>

</body>
</html>