أوقات الصلاة
Imsak
Fajr
Dhuhr
Asr
Maghrib
Isha
القطعة للتخصيص بشكل كامل باستخدام API أوقات الصلاة.
ستكتشف الأداة تلقائيًا الزائر وتعرض أوقات الصلاة المناسبة.
يمكنك استكشاف تعليمات HTML البرمجية هنا.
يمكنك تنزيل نموذج هنا.
إذا كنت ترغب في استخدام أداتنا ، فالرجاء إضافة رابط إلى موقعنا على الويب:
<a href="https://awkat-salat.org">أوقات الصلاة</a>

أضف شفرة CSS داخل <header></header> من صفحة HTML or عنصر الرابط أعلاه:
<link href="https://awkat-salat.org/css/widget.api.v1.min.css" rel="stylesheet" />
<style>
#prayer-container {
    width: 300px;
    text-align: center;
}
.prayer_time {
    font-size: 1.6em;
    font-weight: 800;
}
#prayer-container #prayer_city {
    font-size: 1.2em;
    font-weight: 800;
}
#prayer-container table {
    width: 100%
}
#prayer-container tbody tr:nth-child(odd) {
    background-color: #f3f3f3;
}
#prayer-container tbody td {
    padding: 10px 20px;
}
#prayer-container tbody td:nth-child(1) {
    text-align: left;
}
#prayer-container tbody td:nth-child(2) {
    text-align: right;
}
</style>
أضف شفرة HTML حيث تريد عرض الأداة
أوقات الصلاة
Imsak
Fajr
Dhuhr
Asr
Maghrib
Isha
أضف شفرة جافا سكريبت داخل <body></body> لصفحة HTML الخاصة بك or النص البرمجي أعلاه:
<script src="https://awkat-salat.org/js/widget.api.v1.min.js"></script>
<script>
function PrayerTimesApi() {
    var userLang = navigator.language || navigator.userLanguage;
    var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status === 200) {
                var prayer_results = JSON.parse(request.responseText);
                console.log(JSON.stringify(prayer_results.results.location.local_offset));
                var prayer_date = new Date(prayer_results.results.datetime[0].date.gregorian);

                var local_offset = prayer_results.results.location.local_offset;
                document.getElementById("prayer_city").innerHTML = prayer_results.results.location.city;
                document.getElementById("prayer_date").innerHTML = prayer_date.toLocaleDateString(userLang, options);
                document.getElementById("Imsak").innerHTML = prayer_results.results.datetime[0].times.Imsak;
                document.getElementById("Fajr").innerHTML = prayer_results.results.datetime[0].times.Fajr;
                document.getElementById("Dhuhr").innerHTML = prayer_results.results.datetime[0].times.Dhuhr;
                document.getElementById("Asr").innerHTML = prayer_results.results.datetime[0].times.Asr;
                document.getElementById("Maghrib").innerHTML = prayer_results.results.datetime[0].times.Maghrib;
                document.getElementById("Isha").innerHTML = prayer_results.results.datetime[0].times.Isha;
                SetTheClock(local_offset);

            } else {
                console.log('An error occurred during your request: ' + request.status + ' ' + request.statusText);
            }
        }
    };
    request.open('Get', api_url, true);
    request.send();
}
function time(offset) {
    var location_date = new Date(new Date().getTime() + (offset * 60000));
    var hours = location_date.getUTCHours(),
        minutes = location_date.getUTCMinutes(),
        seconds = location_date.getUTCSeconds();
    hours = addZero(hours);
    minutes = addZero(minutes);
    seconds = addZero(seconds);
    document.getElementById("prayer_clock").innerHTML = hours + ':' + minutes + ':' + seconds;
}
function addZero(val) {
    return (val <= 9) ? ("0" + val) : val;
}
function SetTheClock(local_offset) {
    time(local_offset);
    setInterval(function () { time(local_offset); }, 1000);
}
</script>