Jaouadart commited on
Commit
8931226
·
verified ·
1 Parent(s): 2f46c31

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +234 -93
index.html CHANGED
@@ -3,131 +3,272 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>شخصيات تاريخية</title>
7
  <style>
 
8
  body {
9
- font-family: sans-serif; /* Use a suitable Arabic font if needed */
10
- background-color: #e0e0f0; /* Light blue background */
11
  margin: 0;
12
- padding: 0;
 
13
  }
14
 
15
  .container {
16
- max-width: 400px; /* Adjust as needed for mobile responsiveness */
17
- margin: 20px auto;
18
- padding: 10px;
19
- background-color: #d0d0e8; /* Slightly darker blue */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  border-radius: 10px;
 
21
  }
22
 
23
- .header {
 
 
 
 
 
 
 
 
 
24
  display: flex;
25
- justify-content: space-between;
26
  align-items: center;
 
27
  margin-bottom: 20px;
 
28
  }
29
 
30
- .header button {
31
- background-color: transparent;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  border: none;
33
- font-size: 24px;
 
34
  cursor: pointer;
 
 
35
  }
36
 
37
- .header h1 {
38
- text-align: center;
39
- flex-grow: 1;
40
- font-size: 1.2em; /* Adjust font size */
41
  }
42
 
43
- .grid-container {
 
 
 
 
 
 
 
44
  display: grid;
45
- grid-template-columns: repeat(3, 1fr); /* 3 columns */
46
- grid-gap: 10px; /* Spacing between items */
 
 
 
47
  }
48
 
49
- .grid-item {
50
- text-align: center;
51
-
52
- }
 
 
 
53
 
54
- .grid-item img {
55
- width: 80px; /* Adjust image size */
56
- height: 80px;
57
- border-radius: 50%; /* Make images circular */
58
- object-fit: cover; /* Important: Keeps aspect ratio and covers the area */
59
- border: 2px solid #fff; /* Optional: Add a white border */
60
  }
 
 
 
 
 
61
 
62
- .grid-item p {
63
- margin-top: 5px;
64
- font-size: 0.8em; /* Smaller font size for names */
65
- white-space: nowrap; /* Prevents names from wrapping */
66
- overflow: hidden; /* Hides overflowing text */
67
- text-overflow: ellipsis; /* Adds "..." for long names */
68
- width: 80px; /* Matches the image width */
69
-
70
  }
 
71
  </style>
72
  </head>
73
  <body>
 
 
 
 
 
 
 
 
74
  <div class="container">
75
- <div class="header">
76
- <button>&#8592;</button> <!-- Back arrow -->
77
- <h1>طريقك نحو المعرفة والتفوق</h1>
78
- <button>&#8962;</button> <!-- Home icon -->
79
- </div>
80
-
81
- <div class="grid-container">
82
- <div class="grid-item">
83
- <a href="indexA.html">
84
- <img src="self_learning.jpg" alt="القديس أوغسطينوس">
85
- </a>
86
- <p>القديس أوغسطينوس</p>
87
- </div>
88
- <div class="grid-item">
89
- <a href="https://aistudio.google.com/prompts/new_chat">
90
- <img src="massinissa.jpg" alt="ماسينسا">
91
- <p>ماسينسا</p>
92
- </a>
93
- </div>
94
- <div class="grid-item">
95
- <img src="dihya.jpg" alt="الملكة ديهيا">
96
- <p>الملكة (Dihya)</p>
97
- </div>
98
- <div class="grid-item">
99
- <img src="jugurtha.jpg" alt="يوغرتن">
100
- <p>يوغرتن</p>
101
- </div>
102
- <div class="grid-item">
103
- <img src="apuleius.jpg" alt="بوبا الثاني">
104
- <p>بوبا الثاني</p>
105
- </div>
106
- <div class="grid-item">
107
- <img src="tariq.jpg" alt="طارق بن زياد">
108
- <p>طارق بن زياد</p>
109
- </div>
110
- <div class="grid-item">
111
- <img src="lucius_apuleius.jpg" alt="لوشيوس أبوليوس">
112
- <p>لوشيوس أبوليوس</p>
113
  </div>
114
- <div class="grid-item">
115
- <img src="yusuf_ibn_tashfin.jpg" alt="يوسف بن تاشفين">
116
- <p>يوسف بن تاشفين</p>
117
- </div>
118
- <div class="grid-item">
119
- <img src="mokhtar_soussi.jpg" alt="المختار السوسي">
120
- <p>المختار السوسي</p>
121
- </div>
122
- <div class="grid-item">
123
- <img src="al_zahrawi.jpg" alt="أبو القاسم الزهراوي">
124
- <p>أبو القاسم الزهراوي</p>
125
- </div>
126
- <div class="grid-item">
127
- <img src="ibn_battuta.jpg" alt="ابن بطوطة">
128
- <p>ابن بطوطة</p>
129
- </div>
130
- </div>
131
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
132
  </body>
133
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>القرآن الكريم والأذكار</title>
7
  <style>
8
+ /* تصميم عام */
9
  body {
10
+ font-family: 'Traditional Arabic', serif; /* خط عربي مناسب */
11
+ background-color: #f8f9fa;
12
  margin: 0;
13
+ color: #343a40;
14
+ line-height: 1.6;
15
  }
16
 
17
  .container {
18
+ width: 90%;
19
+ max-width: 1200px;
20
+ margin: 0 auto;
21
+ padding: 20px;
22
+ }
23
+
24
+ /* رأس الصفحة */
25
+ header {
26
+ background-color: #343a40;
27
+ color: #fff;
28
+ text-align: center;
29
+ padding: 30px 0;
30
+ margin-bottom: 30px;
31
+ border-bottom: 5px solid #f7d794; /* لمسة جمالية */
32
+ }
33
+ header h1 {
34
+ margin: 0;
35
+ font-size: 3em;
36
+ font-weight: bold;
37
+ }
38
+ header p{
39
+ font-size: 1.2rem;
40
+ }
41
+
42
+ /* أقسام المحتوى */
43
+ .section {
44
+ margin-bottom: 40px;
45
+ padding: 20px;
46
+ background-color: #fff;
47
  border-radius: 10px;
48
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
49
  }
50
 
51
+ .section h2 {
52
+ color: #343a40;
53
+ font-size: 2em;
54
+ margin-bottom: 20px;
55
+ border-bottom: 2px solid #e9ecef;
56
+ padding-bottom: 10px;
57
+ }
58
+
59
+ /* تصميم القرآن */
60
+ #quran-controls {
61
  display: flex;
 
62
  align-items: center;
63
+ justify-content: space-between;
64
  margin-bottom: 20px;
65
+ flex-wrap: wrap; /* للسماح بالانتقال إلى سطر جديد على الشاشات الصغيرة */
66
  }
67
 
68
+ #quran-select, #reciter-select {
69
+ flex: 1; /* يتقاسمان المساحة بالتساوي */
70
+ padding: 10px;
71
+ margin-right: 10px;
72
+ margin-bottom: 10px;
73
+ border: 1px solid #ced4da;
74
+ border-radius: 5px;
75
+ font-size: 1em;
76
+ min-width: 200px;
77
+ }
78
+ #reciter-select{
79
+ margin-right: 0;
80
+ }
81
+
82
+ #play-button {
83
+ background-color: #4CAF50;
84
+ color: white;
85
  border: none;
86
+ padding: 10px 20px;
87
+ border-radius: 5px;
88
  cursor: pointer;
89
+ font-size: 1em;
90
+ transition: background-color 0.3s;
91
  }
92
 
93
+ #play-button:hover {
94
+ background-color: #388e3c;
 
 
95
  }
96
 
97
+
98
+ #quran-audio {
99
+ width: 100%; /* يملأ عرض الحاوية */
100
+ margin-top: 1rem;
101
+
102
+ }
103
+ /* تصميم الأذكار */
104
+ #azkar-list{
105
  display: grid;
106
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* شبكة متجاوبة */
107
+ gap: 20px;
108
+ padding: 0;
109
+ list-style: none;
110
+
111
  }
112
 
113
+ #azkar-list li {
114
+ background-color: #f8f9fa;
115
+ border: 1px solid #dee2e6;
116
+ padding: 15px;
117
+ border-radius: 5px;
118
+ text-align: center;
119
+ transition: transform 0.2s, box-shadow 0.2s;
120
 
 
 
 
 
 
 
121
  }
122
+ #azkar-list li:hover{
123
+ transform: translateY(-5px);
124
+ box-shadow: 0 6px 12px rgba(0,0,0, 0.15);
125
+ }
126
+
127
 
128
+ /* تذييل */
129
+ footer {
130
+ text-align: center;
131
+ padding: 20px;
132
+ background-color: #343a40;
133
+ color: #fff;
134
+ margin-top: 40px;
 
135
  }
136
+
137
  </style>
138
  </head>
139
  <body>
140
+
141
+ <header>
142
+ <div class="container">
143
+ <h1>القرآن الكريم والأذكار</h1>
144
+ <p>استمع إلى القرآن الكريم وتصفح الأذكار اليومية</p>
145
+ </div>
146
+ </header>
147
+
148
  <div class="container">
149
+ <section id="quran" class="section">
150
+ <h2>القرآن الكريم</h2>
151
+ <div id="quran-controls">
152
+ <select id="quran-select">
153
+ <option value="">اختر السورة</option>
154
+ <!-- أسماء السور من JavaScript -->
155
+ </select>
156
+ <select id="reciter-select">
157
+ <option value="">اختر القارئ</option>
158
+ <!-- أسماء القراء JavaScript -->
159
+ </select>
160
+ <button id="play-button">تشغيل</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
161
  </div>
162
+ <audio id="quran-audio" controls></audio>
163
+
164
+ </section>
165
+
166
+ <section id="azkar" class="section">
167
+ <h2>الأذكار</h2>
168
+ <ul id="azkar-list">
169
+ <!-- أمثلة (سيتم التعديل عليها لاحقا)-->
170
+ <li>سبحان الله</li>
171
+ <li>الحمد لله</li>
172
+ <li>لا إله إلا الله</li>
173
+ <li>الله أكبر</li>
174
+ <li>أستغفر الله</li>
175
+ <li>لا حول ولا قوة إلا بالله</li>
176
+ </ul>
177
+ </section>
 
178
  </div>
179
+
180
+ <footer>
181
+ <div class="container">
182
+ <p>جميع الحقوق محفوظة © 2024</p>
183
+ </div>
184
+ </footer>
185
+
186
+ <script>
187
+ const quranApiUrl = "https://api.quran.com/api/v4/";
188
+ const audioApiBaseUrl = "https://api.quran.com/api/v4/chapter_recitations/"; // + reciter ID + chapter ID
189
+
190
+ // دالة لجلب أسماء السور
191
+ async function getSurahs() {
192
+ try {
193
+ const response = await fetch(`${quranApiUrl}chapters?language=ar`);
194
+ const data = await response.json();
195
+ const surahs = data.chapters;
196
+ const selectElement = document.getElementById("quran-select");
197
+
198
+ surahs.forEach(surah => {
199
+ const option = document.createElement("option");
200
+ option.value = surah.id;
201
+ option.textContent = `${surah.id} - ${surah.translated_name.name}`;
202
+ selectElement.appendChild(option);
203
+ });
204
+ } catch (error) {
205
+ console.error("Error fetching Surahs:", error);
206
+ // رسالة خطأ للمستخدم
207
+ }
208
+ }
209
+
210
+ // دالة لجلب قائمة القراء المتاحين
211
+ async function getReciters() {
212
+ try {
213
+ // هذا API قد لا يوفر قائمة كاملة بالقراء.
214
+ // قد تحتاج إلى قائمة محددة مسبقًا أو API آخر.
215
+ // هنا مثال لقائمة صغيرة
216
+ const reciters = [
217
+ { id: 7, name: "مشاري العفاسي" },
218
+ { id: 1, name: "عبد الباسط عبد الصمد" },
219
+ {id: 2, name: "ابوبكر الشاطري"}
220
+ // ... يمكنك إضافة المزيد من القراء هنا ...
221
+ ];
222
+
223
+ const reciterSelect = document.getElementById("reciter-select");
224
+ reciters.forEach(reciter => {
225
+ const option = document.createElement("option");
226
+ option.value = reciter.id;
227
+ option.textContent = reciter.name;
228
+ reciterSelect.appendChild(option);
229
+ });
230
+
231
+ } catch (error){
232
+ console.error("Error fetching reciters", error);
233
+ }
234
+ }
235
+
236
+
237
+ // دالة لتشغيل التلاوة
238
+ function playAudio(surahId, reciterId) {
239
+ const audioUrl = `${audioApiBaseUrl}${reciterId}/${surahId}`;
240
+ const audioElement = document.getElementById("quran-audio");
241
+
242
+ // جلب رابط الملف الصوتي من ال API
243
+ fetch(audioUrl)
244
+ .then(response => response.json())
245
+ .then(data => {
246
+
247
+ audioElement.src = data.audio_file.audio_url;
248
+ audioElement.play();
249
+ })
250
+ .catch(error => {
251
+ console.error("Error Play Audio", error)
252
+ })
253
+ }
254
+
255
+ // ربط الأحداث
256
+ document.getElementById("play-button").addEventListener("click", () => {
257
+ const surahId = document.getElementById("quran-select").value;
258
+ const reciterId = document.getElementById("reciter-select").value;
259
+
260
+ if (surahId && reciterId) {
261
+ playAudio(surahId, reciterId);
262
+ } else {
263
+ alert("الرجاء اختيار السورة والقارئ.");
264
+ }
265
+ });
266
+
267
+ // تحميل البيانات عند بدء التشغيل
268
+ getSurahs();
269
+ getReciters();
270
+
271
+ </script>
272
+
273
  </body>
274
  </html>