|
|
<!DOCTYPE html> |
|
|
<html lang="ar" dir="rtl"> |
|
|
<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> |
|
|
|
|
|
</select> |
|
|
<select id="reciter-select"> |
|
|
<option value="">اختر القارئ</option> |
|
|
|
|
|
</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>جميع الحقوق محفوظة © 2025 JAOUADAZIZI@2025</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
const quranApiUrl = "https://api.quran.com/api/v4/"; |
|
|
const audioApiBaseUrl = "https://api.quran.com/api/v4/chapter_recitations/"; |
|
|
|
|
|
|
|
|
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 { |
|
|
|
|
|
|
|
|
|
|
|
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"); |
|
|
|
|
|
|
|
|
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> |
