Spaces:

Jaouadart
/

test

Running

App Files Files Community

Jaouadart commited on Mar 1

Commit

8931226

verified ·

1 Parent(s): 2f46c31

Update index.html

Browse files

Files changed (1) hide show

index.html +234 -93

index.html CHANGED Viewed

@@ -3,131 +3,272 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>شخصيات تاريخية</title>
     <style>
         body {
-            font-family: sans-serif; /* Use a suitable Arabic font if needed */
-            background-color: #e0e0f0; /* Light blue background */
             margin: 0;
-            padding: 0;
         }
         .container {
-            max-width: 400px; /* Adjust as needed for mobile responsiveness */
-            margin: 20px auto;
-            padding: 10px;
-            background-color: #d0d0e8; /* Slightly darker blue */
             border-radius: 10px;
         }
-        .header {
             display: flex;
-            justify-content: space-between;
             align-items: center;
             margin-bottom: 20px;
         }
-        .header button {
-            background-color: transparent;
             border: none;
-            font-size: 24px;
             cursor: pointer;
         }
-        .header h1 {
-            text-align: center;
-            flex-grow: 1;
-            font-size: 1.2em; /* Adjust font size */
         }
-        .grid-container {
             display: grid;
-            grid-template-columns: repeat(3, 1fr); /* 3 columns */
-            grid-gap: 10px; /* Spacing between items */
         }
-        .grid-item {
-            text-align: center;
-        }
-        .grid-item img {
-            width: 80px; /* Adjust image size */
-            height: 80px;
-            border-radius: 50%; /* Make images circular */
-            object-fit: cover;  /* Important: Keeps aspect ratio and covers the area */
-            border: 2px solid #fff; /* Optional: Add a white border */
         }
-        .grid-item p {
-            margin-top: 5px;
-            font-size: 0.8em; /* Smaller font size for names */
-            white-space: nowrap; /* Prevents names from wrapping */
-            overflow: hidden;     /* Hides overflowing text */
-            text-overflow: ellipsis; /* Adds "..." for long names */
-            width: 80px;          /* Matches the image width */
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <div class="header">
-            <button>&#8592;</button> <!-- Back arrow -->
-            <h1>طريقك نحو المعرفة والتفوق</h1>
-            <button>&#8962;</button>  <!-- Home icon -->
-        </div>
-        <div class="grid-container">
-            <div class="grid-item">
-                <a href="indexA.html">
-  <img src="self_learning.jpg" alt="القديس أوغسطينوس">
-</a>
-                <p>القديس أوغسطينوس</p>
-            </div>
-            <div class="grid-item">
-<a href="https://aistudio.google.com/prompts/new_chat">
-                <img src="massinissa.jpg" alt="ماسينسا">
-                <p>ماسينسا</p>
-</a>
-            </div>
-            <div class="grid-item">
-                <img src="dihya.jpg" alt="الملكة ديهيا">
-                <p>الملكة (Dihya)</p>
-            </div>
-            <div class="grid-item">
-                <img src="jugurtha.jpg" alt="يوغرتن">
-                <p>يوغرتن</p>
-            </div>
-            <div class="grid-item">
-                <img src="apuleius.jpg" alt="بوبا الثاني">
-                <p>بوبا الثاني</p>
-            </div>
-            <div class="grid-item">
-                <img src="tariq.jpg" alt="طارق بن زياد">
-                <p>طارق بن زياد</p>
-            </div>
-             <div class="grid-item">
-                <img src="lucius_apuleius.jpg" alt="لوشيوس أبوليوس">
-                <p>لوشيوس أبوليوس</p>
             </div>
-            <div class="grid-item">
-                <img src="yusuf_ibn_tashfin.jpg" alt="يوسف بن تاشفين">
-                <p>يوسف بن تاشفين</p>
-            </div>
-            <div class="grid-item">
-                <img src="mokhtar_soussi.jpg" alt="المختار السوسي">
-                <p>المختار السوسي</p>
-            </div>
-            <div class="grid-item">
-                <img src="al_zahrawi.jpg" alt="أبو القاسم الزهراوي">
-                <p>أبو القاسم الزهراوي</p>
-            </div>
-            <div class="grid-item">
-                <img src="ibn_battuta.jpg" alt="ابن بطوطة">
-                <p>ابن بطوطة</p>
-            </div>
-        </div>
     </div>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>القرآن الكريم والأذكار</title>
     <style>
+        /* تصميم عام */
         body {
+            font-family: 'Traditional Arabic', serif; /* خط عربي مناسب */
+            background-color: #f8f9fa;
             margin: 0;
+            color: #343a40;
+            line-height: 1.6;
         }
         .container {
+            width: 90%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        /* رأس الصفحة */
+        header {
+            background-color: #343a40;
+            color: #fff;
+            text-align: center;
+            padding: 30px 0;
+            margin-bottom: 30px;
+            border-bottom: 5px solid #f7d794; /* لمسة جمالية */
+        }
+        header h1 {
+            margin: 0;
+            font-size: 3em;
+            font-weight: bold;
+        }
+		header p{
+			font-size: 1.2rem;
+		}
+        /* أقسام المحتوى */
+        .section {
+            margin-bottom: 40px;
+            padding: 20px;
+            background-color: #fff;
             border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
+        .section h2 {
+            color: #343a40;
+            font-size: 2em;
+            margin-bottom: 20px;
+            border-bottom: 2px solid #e9ecef;
+            padding-bottom: 10px;
+        }
+        /* تصميم القرآن */
+         #quran-controls {
             display: flex;
             align-items: center;
+            justify-content: space-between;
             margin-bottom: 20px;
+            flex-wrap: wrap; /* للسماح بالانتقال إلى سطر جديد على الشاشات الصغيرة */
         }
+        #quran-select, #reciter-select {
+            flex: 1; /* يتقاسمان المساحة بالتساوي */
+            padding: 10px;
+            margin-right: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #ced4da;
+            border-radius: 5px;
+            font-size: 1em;
+			min-width: 200px;
+        }
+		#reciter-select{
+			margin-right: 0;
+		}
+        #play-button {
+            background-color: #4CAF50;
+            color: white;
             border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
             cursor: pointer;
+            font-size: 1em;
+            transition: background-color 0.3s;
         }
+        #play-button:hover {
+            background-color: #388e3c;
         }
+        #quran-audio {
+            width: 100%; /* يملأ عرض الحاوية */
+			margin-top: 1rem;
+        }
+		/* تصميم  الأذكار */
+        #azkar-list{
             display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /*  شبكة متجاوبة */
+            gap: 20px;
+            padding: 0;
+            list-style: none;
         }
+        #azkar-list li {
+           background-color: #f8f9fa;
+           border: 1px solid #dee2e6;
+           padding: 15px;
+           border-radius: 5px;
+           text-align: center;
+           transition: transform 0.2s, box-shadow 0.2s;
         }
+		#azkar-list li:hover{
+			transform: translateY(-5px);
+			box-shadow: 0 6px 12px rgba(0,0,0, 0.15);
+		}
+        /* تذييل */
+        footer {
+            text-align: center;
+            padding: 20px;
+            background-color: #343a40;
+            color: #fff;
+            margin-top: 40px;
         }
     </style>
 </head>
 <body>
+    <header>
+		<div class="container">
+        	<h1>القرآن الكريم والأذكار</h1>
+			<p>استمع إلى القرآن الكريم وتصفح الأذكار اليومية</p>
+		</div>
+    </header>
     <div class="container">
+        <section id="quran" class="section">
+            <h2>القرآن الكريم</h2>
+            <div id="quran-controls">
+                <select id="quran-select">
+                    <option value="">اختر السورة</option>
+                    <!--  أسماء السور من  JavaScript -->
+                </select>
+				 <select id="reciter-select">
+                    <option value="">اختر القارئ</option>
+                    <!--  أسماء القراء  JavaScript -->
+                </select>
+                <button id="play-button">تشغيل</button>
             </div>
+            <audio id="quran-audio" controls></audio>
+        </section>
+        <section id="azkar" class="section">
+            <h2>الأذكار</h2>
+            <ul id="azkar-list">
+                <!-- أمثلة (سيتم التعديل عليها لاحقا)-->
+                <li>سبحان الله</li>
+                <li>الحمد لله</li>
+                <li>لا إله إلا الله</li>
+                <li>الله أكبر</li>
+                <li>أستغفر الله</li>
+                <li>لا حول ولا قوة إلا بالله</li>
+            </ul>
+        </section>
     </div>
+    <footer>
+        <div class="container">
+         <p>جميع الحقوق محفوظة © 2024</p>
+		</div>
+    </footer>
+    <script>
+       const quranApiUrl = "https://api.quran.com/api/v4/";
+		const audioApiBaseUrl = "https://api.quran.com/api/v4/chapter_recitations/"; // + reciter ID + chapter ID
+		//  دالة لجلب  أسماء السور
+		async function getSurahs() {
+			try {
+				const response = await fetch(`${quranApiUrl}chapters?language=ar`);
+				const data = await response.json();
+				const surahs = data.chapters;
+				const selectElement = document.getElementById("quran-select");
+				surahs.forEach(surah => {
+					const option = document.createElement("option");
+					option.value = surah.id;
+					option.textContent = `${surah.id} - ${surah.translated_name.name}`;
+					selectElement.appendChild(option);
+				});
+			} catch (error) {
+				console.error("Error fetching Surahs:", error);
+				//  رسالة خطأ للمستخدم
+			}
+		}
+		// دالة لجلب قائمة القراء المتاحين
+		async function getReciters() {
+			try {
+				//  هذا  API  قد لا يوفر قائمة كاملة بالقراء.
+				//  قد تحتاج إلى قائمة محددة مسبقًا أو  API  آخر.
+				//  هنا مثال لقائمة صغيرة
+				const reciters = [
+					{ id: 7, name: "مشاري العفاسي" },
+					{ id: 1, name: "عبد الباسط عبد الصمد" },
+					{id: 2, name: "ابوبكر الشاطري"}
+					// ...  يمكنك إضافة المزيد من القراء هنا ...
+				];
+				const reciterSelect = document.getElementById("reciter-select");
+				reciters.forEach(reciter => {
+					const option = document.createElement("option");
+					option.value = reciter.id;
+					option.textContent = reciter.name;
+					reciterSelect.appendChild(option);
+				});
+			} catch (error){
+				console.error("Error fetching reciters", error);
+			}
+		}
+		// دالة لتشغيل التلاوة
+		function playAudio(surahId, reciterId) {
+			const audioUrl = `${audioApiBaseUrl}${reciterId}/${surahId}`;
+			const audioElement = document.getElementById("quran-audio");
+			// جلب رابط الملف الصوتي من ال API
+			fetch(audioUrl)
+			.then(response => response.json())
+			.then(data => {
+				audioElement.src = data.audio_file.audio_url;
+				audioElement.play();
+			})
+			.catch(error => {
+				console.error("Error Play Audio", error)
+			})
+		}
+		// ربط الأحداث
+		document.getElementById("play-button").addEventListener("click", () => {
+			const surahId = document.getElementById("quran-select").value;
+			const reciterId = document.getElementById("reciter-select").value;
+			if (surahId && reciterId) {
+				playAudio(surahId, reciterId);
+			} else {
+				alert("الرجاء اختيار السورة والقارئ.");
+			}
+		});
+		// تحميل البيانات عند بدء التشغيل
+		getSurahs();
+		getReciters();
+    </script>
 </body>
 </html>