/* Conteneur global limité en hauteur */
.widget-prieres-maroc {
max-height: 1900px; /* div {
height: 100%;
width: 0%;
background: #1f8ceb;
transition: width .2s ease;
}
.table-wrap {
max-height: 900px; /* limite l’affichage des 50 villes */
overflow: auto;
border: 1px solid #eee;
border-radius: 10px;
}
table { width: 100%; border-collapse: collapse; }
th, td { white-space: nowrap; }
tbody tr:nth-child(odd) { background: #fff; }
tbody tr:nth-child(even) { background: #f6f6f6; }
.badge {
display: inline-block;
padding: .25rem .5rem;
border-radius: 999px;
background: #eaf4ff;
color: #1f8ceb;
font-size: .8rem;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.inline-note { font-size: .9rem; color: #666; }
.sticky-top {
position: sticky;
top: 0;
background: inherit;
z-index: 2;
}
/*
API gratuite utilisée: Aladhan
Endpoint: https://api.aladhan.com/v1/timingsByCity?city={CITY}&country=Morocco&date={DD-MM-YYYY}
Doc: https://aladhan.com/prayer-times-api
Exemple d’appel:
https://api.aladhan.com/v1/timingsByCity?city=Casablanca&country=Morocco&date=10-10-2025
Exemple de réponse JSON (extrait):
{
“code”: 200,
“status”: “OK”,
“data”: {
“timings”: {
“Fajr”: “05:38”,
“Sunrise”: “07:04”,
“Dhuhr”: “13:22”,
“Asr”: “16:33”,
“Maghrib”: “19:34”,
“Isha”: “20:56”
},
“date”: { “readable”: “10 Oct 2025”, “timestamp”: “1696896000” },
“meta”: { “timezone”: “Africa/Casablanca” }
}
}
*/
/* ===============================
Données des 50 plus grandes villes (étiquette FR / nom API)
=============================== */
const VILLES_MAROC = [
{ label: “Casablanca”, city: “Casablanca” },
{ label: “Rabat”, city: “Rabat” },
{ label: “Fès”, city: “Fes” },
{ label: “Salé”, city: “Sale” },
{ label: “Tanger”, city: “Tangier” },
{ label: “Marrakech”, city: “Marrakech” },
{ label: “Meknès”, city: “Meknes” },
{ label: “Oujda”, city: “Oujda” },
{ label: “Kénitra”, city: “Kenitra” },
{ label: “Agadir”, city: “Agadir” },
{ label: “Tétouan”, city: “Tetouan” },
{ label: “Témara”, city: “Temara” },
{ label: “Safi”, city: “Safi” },
{ label: “Mohammédia”, city: “Mohammedia” },
{ label: “Khouribga”, city: “Khouribga” },
{ label: “El Jadida”, city: “El Jadida” },
{ label: “Béni Mellal”, city: “Beni Mellal” },
{ label: “Nador”, city: “Nador” },
{ label: “Taza”, city: “Taza” },
{ label: “Settat”, city: “Settat” },
{ label: “Berrechid”, city: “Berrechid” },
{ label: “Ksar El Kébir”, city: “Ksar el Kebir” },
{ label: “Larache”, city: “Larache” },
{ label: “Khemisset”, city: “Khemisset” },
{ label: “Guelmim”, city: “Guelmim” },
{ label: “Ouarzazate”, city: “Ouarzazate” },
{ label: “Al Hoceïma”, city: “Al Hoceima” },
{ label: “Taroudant”, city: “Taroudant” },
{ label: “Essaouira”, city: “Essaouira” },
{ label: “Fnideq”, city: “Fnideq” },
{ label: “Martil”, city: “Martil” },
{ label: “Sidi Slimane”, city: “Sidi Slimane” },
{ label: “Sidi Kacem”, city: “Sidi Kacem” },
{ label: “Oulad Teima”, city: “Oulad Teima” },
{ label: “Youssoufia”, city: “Youssoufia” },
{ label: “Midelt”, city: “Midelt” },
{ label: “Berkane”, city: “Berkane” },
{ label: “Guercif”, city: “Guercif” },
{ label: “Taourirt”, city: “Taourirt” },
{ label: “Errachidia”, city: “Errachidia” },
{ label: “Fquih Ben Salah”, city: “Fkih Ben Salah” },
{ label: “Sefrou”, city: “Sefrou” },
{ label: “Azrou”, city: “Azrou” },
{ label: “Oued Zem”, city: “Oued Zem” },
{ label: “Ouazzane”, city: “Ouazzane” },
{ label: “Tiznit”, city: “Tiznit” },
{ label: “Chichaoua”, city: “Chichaoua” },
{ label: “Skhirat”, city: “Skhirat” },
{ label: “Benslimane”, city: “Benslimane” },
{ label: “Bouznika”, city: “Bouznika” }
];
/* ===============================
Constantes & helpers
=============================== */
const API_BASE = “https://api.aladhan.com/v1/timingsByCity”;
const cache = new Map(); // clé: city|date -> timings
const $ = (sel, ctx=document) => ctx.querySelector(sel);
const $$ = (sel, ctx=document) => Array.from(ctx.querySelectorAll(sel));
function toDDMMYYYY(date) {
const d = String(date.getDate()).padStart(2, ‘0’);
const m = String(date.getMonth() + 1).padStart(2, ‘0’);
const y = date.getFullYear();
return `${d}-${m}-${y}`;
}
function fromInputDate(val) {
// val: YYYY-MM-DD
const [y,m,d] = val.split(‘-‘).map(Number);
return new Date(y, m-1, d);
}
function formatHumanDateFR(date) {
return date.toLocaleDateString(‘fr-MA’, { weekday: ‘long’, year: ‘numeric’, month: ‘long’, day: ‘numeric’ });
}
function stripTZ(t) {
// Aladhan renvoie parfois “05:38 (+01)” -> on garde HH:MM
return String(t).split(‘ ‘)[0];
}
/* ===============================
Récupération des horaires (avec cache)
=============================== */
async function fetchTimings(city, dateStr) {
const key = `${city}|${dateStr}`;
if (cache.has(key)) return cache.get(key);
const url = `${API_BASE}?city=${encodeURIComponent(city)}&country=Morocco&date=${encodeURIComponent(dateStr)}`;
const resp = await fetch(url);
if (!resp.ok) throw new Error(`Erreur réseau (${resp.status})`);
const json = await resp.json();
if (json.code !== 200 || !json.data) throw new Error(‘Réponse invalide de l’API’);
const t = json.data.timings;
const timings = {
Fajr: stripTZ(t.Fajr),
Sunrise: stripTZ(t.Sunrise),
Dhuhr: stripTZ(t.Dhuhr),
Asr: stripTZ(t.Asr),
Maghrib: stripTZ(t.Maghrib),
Isha: stripTZ(t.Isha),
timezone: json.data.meta?.timezone || ‘Africa/Casablanca’
};
cache.set(key, timings);
return timings;
}
/* ===============================
Rendu de la carte principale (ville sélectionnée)
=============================== */
function renderTimingsTiles(container, timings) {
container.innerHTML = ”;
const items = [
{ k: ‘Fajr’, label: ‘الفجر’ },
{ k: ‘Sunrise’, label: ‘شروق الشمس’ },
{ k: ‘Dhuhr’, label: ‘الظهر’ },
{ k: ‘Asr’, label: ‘العصر’ },
{ k: ‘Maghrib’, label: ‘المغرب’ },
{ k: ‘Isha’, label: ‘العشاء’ }
];
items.forEach(item => {
const div = document.createElement(‘div’);
div.className = ‘time-pill’;
div.innerHTML = `
${item.label}${timings[item.k] || ‘–:–‘}`;
container.appendChild(div);
});
}
async function updateMainCard() {
const select = $(‘#select-ville’);
const dateInput = $(‘#input-date’);
const cityObj = VILLES_MAROC[select.selectedIndex] || VILLES_MAROC[0];
const apiCity = cityObj.city;
const label = cityObj.label;
const date = dateInput.value ? fromInputDate(dateInput.value) : new Date();
const dateStr = toDDMMYYYY(date);
$(‘#titre-ville’).textContent = `${label} — مواقيت يوم ${formatHumanDateFR(date)}`;
$(‘#badge-date’).textContent = formatHumanDateFR(date);
const grid = $(‘#grille-horaires’);
grid.innerHTML = ‘
جارٍ تحميل المواقيت…
‘;
try {
const timings = await fetchTimings(apiCity, dateStr);
renderTimingsTiles(grid, timings);
} catch (e) {
grid.innerHTML = `
تعذر تحميل المواقيت (${e.message}).
`;
}
}
/* ===============================
Tableau toutes les villes
=============================== */
function initAllCitiesRows() {
const tbody = $(‘#tbody-villes’);
tbody.innerHTML = ”;
VILLES_MAROC.forEach(v => {
const tr = document.createElement(‘tr’);
tr.dataset.label = v.label.toLowerCase();
tr.innerHTML = `
${v.label} |
–:– |
–:– |
–:– |
–:– |
–:– |
–:– |
`;
tbody.appendChild(tr);
});
}
function filterCities(q) {
const needle = q.trim().toLowerCase();
$$(‘#tbody-villes tr’).forEach(tr => {
tr.style.display = (!needle || tr.dataset.label.includes(needle)) ? ” : ‘none’;
});
}
async function loadAllCities(dateStr, onProgress) {
const results = {};
let done = 0;
const total = VILLES_MAROC.length;
const limit = 8; // limite de concurrence pour performance
const queue = VILLES_MAROC.map(v => v);
async function worker() {
while (queue.length) {
const v = queue.shift();
try {
const t = await fetchTimings(v.city, dateStr);
results[v.label] = t;
} catch {
results[v.label] = { Fajr: ‘—’, Sunrise: ‘—’, Dhuhr: ‘—’, Asr: ‘—’, Maghrib: ‘—’, Isha: ‘—’ };
} finally {
done++;
onProgress(Math.round((done / total) * 100));
}
}
}
await Promise.all(Array.from({ length: limit }, worker));
return results;
}
function renderAllCitiesTable(results) {
$$(‘#tbody-villes tr’).forEach(tr => {
const label = tr.querySelector(‘td strong’).textContent;
const times = results[label];
if (!times) return;
[‘Fajr’,’Sunrise’,’Dhuhr’,’Asr’,’Maghrib’,’Isha’].forEach(k => {
const td = tr.querySelector(`td[data-k=”${k}”]`);
if (td) td.textContent = times[k] || ‘—’;
});
});
}
/* ===============================
Initialisation UI
=============================== */
function initUI() {
// Remplir le select des villes
const select = $(‘#select-ville’);
VILLES_MAROC.forEach((v, i) => {
const opt = document.createElement(‘option’);
opt.value = v.city;
opt.textContent = v.label;
if (v.label === ‘Casablanca’) opt.selected = true;
select.appendChild(opt);
});
// Date du jour par défaut (format YYYY-MM-DD)
const today = new Date();
const yyyy = today.getFullYear();
const mm = String(today.getMonth() + 1).padStart(2, ‘0’);
const dd = String(today.getDate()).padStart(2, ‘0’);
$(‘#input-date’).value = `${yyyy}-${mm}-${dd}`;
// Init tableau
initAllCitiesRows();
// Listeners
$(‘#btn-actualiser’).addEventListener(‘click’, updateMainCard);
$(‘#select-ville’).addEventListener(‘change’, updateMainCard);
$(‘#input-date’).addEventListener(‘change’, () => {
updateMainCard();
// Si l’utilisateur recharge toutes les villes après changement de date, ce sera pris en compte
});
$(‘#filtre-ville’).addEventListener(‘input’, (e) => filterCities(e.target.value));
const progressBar = $(‘#progress-bar’);
const srProgress = $(‘#sr-progress’);
function setProgress(pct) {
progressBar.style.width = `${pct}%`;
srProgress.textContent = `التقدم ${pct}%`;
}
$(‘#btn-charger-toutes’).addEventListener(‘click’, async () => {
const date = $(‘#input-date’).value ? fromInputDate($(‘#input-date’).value) : new Date();
const dateStr = toDDMMYYYY(date);
setProgress(0);
$(‘#btn-charger-toutes’).setAttribute(‘disabled’, ‘true’);
try {
const results = await loadAllCities(dateStr, setProgress);
renderAllCitiesTable(results);
} catch (e) {
alert(‘خطأ أثناء تحميل المواقيت لجميع المدن.’);
} finally {
$(‘#btn-charger-toutes’).removeAttribute(‘disabled’);
setProgress(100);
setTimeout(() => setProgress(0), 800);
}
});
// Premier rendu (Casablanca)
updateMainCard();
}
document.addEventListener(‘DOMContentLoaded’, initUI);
مواقيت الصلاة في الدار البيضاء: دليل مفصل لكل صلاة
الساعات الدقيقة لخمس صلوات يومية في الدار البيضاء (مثال: أكتوبر 2025)
في الدار البيضاء، دقة المواقيت تحدد الصلاة اليومية. مثال ليوم 15 أكتوبر 2025 (توقيت GMT+1): الفجر 05:59 (النهاية عند الشروق 07:25)، الظهر 13:22، العصر 16:38، المغرب 18:53، العشاء 20:08. الأذان يشير إلى دخول الصلاة، ولكل فترة بداية ونهاية واضحة.
تنتهي فترة السحور عند الأذان لصلاة الفجر، ووقت الإفطار يتوافق مع المغرب. ولليل التالي، فترة الفجر الروحي (الأدعية قبل الفجر) تكون قبل الأذان للفجر، عادة في الثلث الأخير من الليل.
بداية ونهاية كل صلاة: الفجر، الشروق، الظهر، العصر، المغرب، العشاء
وقت الفجر يبدأ عند طلوع الفجر الحقيقي وينتهي عند شروق الشمس (الشروق). يبدأ الظهر مباشرةً بعد الذروة ويمتد حتى دخول العصر. تدوم العصر حتى غروب الشمس، وهو وقت المغرب. يمتد العشاء من اختفاء الشفق حتى منتصف الليل (مثاليًا) أو حتى الفجر.
حساب مواقيت الصلاة في الدار البيضاء: الطرق، الزوايا والفواصل الزمنية
طريقة حساب مواقيت الصلاة: زوايا الشمس وخط العرض للدار البيضاء
نعتمد الزوايا التقليدية: 18° للفجر والعشاء، متوافقة مع خط العرض في الدار البيضاء والمنطقة الزمنية GMT+1. عمليًا، يحدد الخوارزم موقع الشمس حسب خط الطول المحلي ويعدل الهوامش لأذان موثوق.
الفروقات بين المدارس والسلطات الدينية حول المواقيت
هناك اختلافات: بعض السلطات تعتمد 15° للفجر والعشاء، وفي العصر، المذهب الحنفي يعتمد ظل الضعف بينما تستخدم مدارس أخرى الظل البسيط. في الدار البيضاء، هذه الفروقات تغير الفترات ببضع دقائق.
خصائص الصلوات في الدار البيضاء: عدد الركعات، التوصيات والأوقات الممنوعة
عدد الركعات (الفريضة، السنة، النوافل) لكل صلاة
في الدار البيضاء، الممارسة تتبع الأرثوذكسية: الفجر 2 فرض (بعد 2 سنة)، الظهر 4 فرض (قبل/بعد السنة)، العصر 4 فرض، المغرب 3 فرض، العشاء 4 فرض زائد وتر. تقوية الصلاة النوافل تعزز الحضور الروحي اليومي.
الأوقات الموصى بها والمكروهة (الممنوعة) لكل صلاة يومية
يُمنع الصلاة عند وقت الشروق، الذروة، وغروب الشمس. في الدار البيضاء، أداء الفجر مبكرًا في وقته، والظهر بعد الذروة، والعصر قبل اصفرار الشمس يعزز جودة الصلاة. هذه العلامات توجّه ممارسة هادئة ومنضبطة.
مواقيت الصلوات الثانوية في الدار البيضاء: الضحى، التهجد، واللحظات الروحية الأساسية
الأوقات المثالية لصلاة الضحى ومعناها
تبدأ صلاة الضحى بعد الشروق حين ترتفع الشمس قليلاً: في تاريخنا هذا، حوالي 07:45–11:30 في الدار البيضاء. الضحى تغذي الشكر، كنسمة في الصباح بين النشاط والتأمل.
مواعيد مناسبة للتهجد وأهمية الصلاة الليلية
التهجد يُؤدى في الثلث الأخير من الليل. بين المغرب والفجر، الفترة المثالية في الدار البيضاء للمثال المعطى تكون حوالي 02:45–05:40، حيث تهدأ القلوب وتقوى الطلبات.
اتجاه القبلة في الدار البيضاء: التوجه نحو الكعبة
في الدار البيضاء، القبلة تشير تقريبًا إلى 100° (شرق-جنوب شرق) من الشمال الجغرافي. هذا الاتجاه يضمن الاصطفاف نحو الكعبة، وهو أمر أساسي للصلاة الجماعية وأثناء العمل في أنحاء المغرب.
التغيرات الموسمية لمواقيت الصلاة في الدار البيضاء والوصول إلى التقويم الشهري عبر الإنترنت
تغير مواقيت الصلاة حسب الفصول (الصيف، الشتاء، الانقلابات)
تطول الأيام في الصيف وتقصر في الشتاء؛ في الدار البيضاء، الفجر يأتي مبكرًا في يونيو وأبعد في ديسمبر، بينما العصر والعشاء يتغيران تبعًا لذلك. فهم هذه التغيرات يساعد في تنظيم الصلاة في الوقت المناسب.
الوصول السهل إلى التقويم الشهري للصلاة والبحث عن المدن على موقعنا
تقويم شهري مفصل مع تصحيحات محلية وخيارات طرق يسهل الحياة في الدار البيضاء. لضبط المواقيت، قارن مع المدينة المجاورة من خلال هذا الرابط العملي لـ المواقيت الرسمية في الرباط، مفيد للانتقالات المهنية.