Téléchargez des fichiers JSON et des récitations coraniques
Récitations coraniques, Adhans et Traductions audio
Veuillez d'abord choisir un réciteur pour afficher les Surah.
Écoutez & téléchargez les Adhans des plus grandes mosquées du monde
Téléchargez des versets individuels (Āyāt) — choisissez un réciteur, une sourate et une plage de versets
Fichiers prêts à l'emploi pour vos projets — même sans expérience en programmation
Chaque pays a son propre organisme islamique qui fixe les horaires. Copiez le JSON ci-dessous, choisissez le numéro de votre pays, c'est tout.
Cliquez sur « Copier » et collez le contenu dans un fichier calculation_methods.json de votre projet.
[
{
"id": 0,
"country": "Pakistan \/ Inde \/ Afghanistan",
"org": "Karachi (UISK)",
"fajrAngle": 18,
"ishaAngle": 18,
"ishaType": "angle",
"region": "Asie du Sud"
},
{
"id": 1,
"country": "États-Unis \/ Canada",
"org": "ISNA",
"fajrAngle": 15,
"ishaAngle": 15,
"ishaType": "angle",
"region": "Amérique du Nord"
},
{
"id": 2,
"country": "Europe \/ Monde",
"org": "Muslim World League",
"fajrAngle": 18,
"ishaAngle": 17,
"ishaType": "angle",
"region": "International"
},
{
"id": 3,
"country": "Arabie Saoudite",
"org": "Umm Al-Qura (La Mecque)",
"fajrAngle": 18.5,
"ishaMinutes": 90,
"ishaType": "minutes",
"note": "Isha = Maghrib + 90 min (120 en Ramadan)"
},
{
"id": 4,
"country": "Égypte \/ Soudan",
"org": "EGAS",
"fajrAngle": 19.5,
"ishaAngle": 17.5,
"ishaType": "angle"
},
{
"id": 5,
"country": "Iran",
"org": "Tehran IGP",
"fajrAngle": 17.7,
"ishaAngle": 14,
"ishaType": "angle",
"maghribAngle": 4.5,
"note": "Maghrib décalé par angle — méthode chiite"
},
{
"id": 6,
"country": "EAU \/ Bahreïn \/ Oman",
"org": "Gulf \/ Dubai (ESMA)",
"fajrAngle": 18.5,
"ishaMinutes": 90,
"ishaType": "minutes"
},
{
"id": 7,
"country": "Koweït",
"org": "Ministère des Awqaf",
"fajrAngle": 18,
"ishaAngle": 17.5,
"ishaType": "angle"
},
{
"id": 8,
"country": "Qatar",
"org": "Qatar Calendar House",
"fajrAngle": 18,
"ishaMinutes": 90,
"ishaType": "minutes"
},
{
"id": 9,
"country": "Singapour",
"org": "MUIS",
"fajrAngle": 20,
"ishaAngle": 18,
"ishaType": "angle"
},
{
"id": 10,
"country": "France",
"org": "UOIF \/ CFCM",
"fajrAngle": 12,
"ishaAngle": 12,
"ishaType": "angle",
"note": "Hautes latitudes — évite les horaires aberrants en été"
},
{
"id": 11,
"country": "France",
"org": "GCI (Grande Communauté Islamique)",
"fajrAngle": 15,
"ishaAngle": 15,
"ishaType": "angle"
},
{
"id": 13,
"country": "Algérie",
"org": "Ministère des Affaires Religieuses",
"fajrAngle": 18,
"ishaAngle": 17,
"ishaType": "angle"
},
{
"id": 14,
"country": "Turquie",
"org": "Diyanet",
"fajrAngle": 18,
"ishaAngle": 17,
"ishaType": "angle"
},
{
"id": 15,
"country": "Maroc",
"org": "Ministère des Habous",
"fajrAngle": 18,
"ishaAngle": 17,
"ishaType": "angle"
},
{
"id": 16,
"country": "Tunisie",
"org": "Ministère des Affaires Religieuses",
"fajrAngle": 18,
"ishaAngle": 18,
"ishaType": "angle"
},
{
"id": 17,
"country": "Indonésie",
"org": "KEMENAG",
"fajrAngle": 20,
"ishaAngle": 18,
"ishaType": "angle"
},
{
"id": 18,
"country": "Malaisie",
"org": "JAKIM",
"fajrAngle": 20,
"ishaAngle": 18,
"ishaType": "angle"
},
{
"id": 20,
"country": "Russie \/ Asie centrale",
"org": "DSMM",
"fajrAngle": 16,
"ishaAngle": 15,
"ishaType": "angle"
},
{
"id": 22,
"country": "Iran \/ Irak \/ Liban (Shia)",
"org": "Leva Research Institute (Qom)",
"fajrAngle": 16,
"ishaAngle": 14,
"ishaType": "angle",
"maghribAngle": 4
},
{
"id": 23,
"country": "International",
"org": "IUMS (Sheikh Qaradawi)",
"fajrAngle": 18,
"ishaAngle": 18,
"ishaType": "angle"
},
{
"id": 24,
"country": "Jordanie",
"org": "Ministère des Awqaf d'Amman",
"fajrAngle": 18,
"ishaAngle": 18,
"ishaType": "angle"
},
{
"id": 25,
"country": "Canada",
"org": "FCIS (Fiqh Council)",
"fajrAngle": 15,
"ishaAngle": 15,
"ishaType": "angle"
}
]
Dans la liste ci-dessous, repérez votre pays ou région. Notez son numéro (ex : France UOIF = 10, Maroc = 15, Algérie = 13).
Passez ce numéro à votre librairie de prière. Exemple avec Adhan.js :
// 1. Installez Adhan.js dans votre projet
import * as adhan from 'adhan';
const coords = new adhan.Coordinates(48.8566, 2.3522);
const params = adhan.CalculationMethod.MuslimWorldLeague();
params.fajrAngle = 12;
params.ishaAngle = 12;
const prayerTimes = new adhan.PrayerTimes(coords, new Date(), params);
console.log('Fajr :', prayerTimes.fajr);
console.log('Dhuhr :', prayerTimes.dhuhr);
console.log('Asr :', prayerTimes.asr);
console.log('Maghrib:', prayerTimes.maghrib);
console.log('Isha :', prayerTimes.isha);
Le calendrier islamique (Hijri) est lunaire. La date d'aujourd'hui en Hijri est différente du calendrier grégorien. Ce fichier vous aide à convertir l'une en l'autre.
Copiez ce JSON et collez-le dans un fichier hijri_calendar.json de votre projet. Il contient les 12 mois islamiques en français, arabe et anglais.
{
"description": "Calendrier Hijri — référence Pôle Muslim",
"explication": "Le calendrier islamique est lunaire : 12 mois de 29 ou 30 jours, soit 354 ou 355 jours par an.",
"mois_fr": [
"",
"Mouharram",
"Safar",
"Rabî al-Awwal",
"Rabî al-Thânî",
"Joumâda al-Ûlâ",
"Joumâda al-Âkhira",
"Rajab",
"Chaabân",
"Ramadan",
"Chawwâl",
"Dhou al-Qaada",
"Dhou al-Hijja"
],
"mois_ar": [
"",
"مُحَرَّم",
"صَفَر",
"رَبِيع الأَوَّل",
"رَبِيع الثَّانِي",
"جُمَادَى الأُولَى",
"جُمَادَى الآخِرَة",
"رَجَب",
"شَعْبَان",
"رَمَضَان",
"شَوَّال",
"ذُو القَعْدَة",
"ذُو الحِجَّة"
],
"mois_en": [
"",
"Muharram",
"Safar",
"Rabi al-Awwal",
"Rabi al-Thani",
"Jumada al-Ula",
"Jumada al-Akhira",
"Rajab",
"Shaban",
"Ramadan",
"Shawwal",
"Dhu al-Qada",
"Dhu al-Hijja"
],
"jours_annee_normale": 354,
"jours_annee_bissextile": 355,
"offset_pays_conseilles": {
"France": 0,
"Arabie Saoudite": 0,
"Maroc": "0 ou +1 (observation)",
"Pakistan": "0 ou +1 (observation)",
"Indonésie": "0 ou +1 (observation)"
},
"astuce_debutant": "Pour afficher la date Hijri : utilisez la fonction gregorienVersHijri(annee, mois, jour) disponible dans l'onglet copier-coller."
}
Ce code convertit la date d'aujourd'hui en date Hijri et l'affiche. Aucune installation requise, ça fonctionne directement dans votre fichier HTML.
<!-- Afficher la date Hijri d'aujourd'hui -->
<p id="hijriDate">Chargement...</p>
<script>
const MOIS_HIJRI = [
'', 'Mouharram', 'Safar', 'Rabî al-Awwal', 'Rabî al-Thânî',
'Joumâda al-Ûlâ', 'Joumâda al-Âkhira', 'Rajab', 'Chaabân',
'Ramadan', 'Chawwâl', 'Dhou al-Qaada', 'Dhou al-Hijja'
];
function gregorienVersHijri(annee, mois, jour) {
const a = Math.floor((14 - mois) / 12);
const y = annee + 4800 - a;
const m = mois + 12 * a - 3;
let jd = jour + Math.floor((153*m+2)/5) + 365*y
+ Math.floor(y/4) - Math.floor(y/100)
+ Math.floor(y/400) - 32045;
const l = jd - 1948440 + 10632;
const n = Math.floor((l - 1) / 10631);
const ll = l - 10631*n + 354;
const j = Math.floor((10985 - ll) / 5316) * Math.floor((50*ll)/17719)
+ Math.floor(ll / 5670) * Math.floor((43*ll)/15238);
const ll2 = ll - Math.floor((30 - j) / 15) * Math.floor((17719*j)/50)
- Math.floor(j / 16) * Math.floor((15238*j)/43) + 29;
const hMois = Math.floor((24*ll2)/709);
const hJour = ll2 - Math.floor((709*hMois)/24);
const hAnnee = 30*n + j - 30;
return { jour: hJour, mois: hMois, annee: hAnnee };
}
const auj = new Date();
const h = gregorienVersHijri(auj.getFullYear(), auj.getMonth()+1, auj.getDate());
document.getElementById('hijriDate').textContent =
h.jour + ' ' + MOIS_HIJRI[h.mois] + ' ' + h.annee + ' H';
</script>
La date Hijri peut varier de ±1 jour selon l'observation locale de la lune. Ajoutez simplement h.jour += 1 ou h.jour -= 1 si votre mosquée locale est décalée.
Ces fêtes ont une date fixe dans le calendrier islamique. Le fichier JSON vous donne leur position Hijri pour que votre app puisse calculer leur date chaque année automatiquement.
Copiez ce contenu et collez-le dans un fichier islamic_events.json. Il contient les 9 grandes fêtes avec leur date Hijri, leur icône et une description.
[
{
"id": "nouvel-an",
"nom": "Nouvel An Hijri",
"icone": "🌙",
"jourHijri": 1,
"moisHijri": 1,
"note": "Premier jour de Mouharram"
},
{
"id": "ashura",
"nom": "Āshūrāʾ",
"icone": "🤲",
"jourHijri": 10,
"moisHijri": 1,
"note": "Jeûne recommandé"
},
{
"id": "mawlid",
"nom": "Mawlid al-Nabī",
"icone": "🌹",
"jourHijri": 12,
"moisHijri": 3,
"note": "Naissance du Prophète ﷺ"
},
{
"id": "isra-miraj",
"nom": "Isrāʾ wa al-Miʿrāj",
"icone": "✨",
"jourHijri": 27,
"moisHijri": 7,
"note": "Voyage nocturne et ascension"
},
{
"id": "ramadan",
"nom": "Début du Ramadan",
"icone": "🌙",
"jourHijri": 1,
"moisHijri": 9,
"note": "Peut varier selon observation de la lune"
},
{
"id": "laylat-al-qadr",
"nom": "Laylat al-Qadr",
"icone": "🌟",
"jourHijri": 27,
"moisHijri": 9,
"note": "Cherchée dans les nuits impaires des 10 derniers jours"
},
{
"id": "eid-fitr",
"nom": "Aïd al-Fiṭr",
"icone": "🎉",
"jourHijri": 1,
"moisHijri": 10,
"note": "Grande fête après Ramadan"
},
{
"id": "arafat",
"nom": "Jour d'Arafat",
"icone": "🕋",
"jourHijri": 9,
"moisHijri": 12,
"note": "Hajj — jeûne recommandé pour les non-pèlerins"
},
{
"id": "eid-adha",
"nom": "Aïd al-Aḍḥā",
"icone": "🐑",
"jourHijri": 10,
"moisHijri": 12,
"note": "Fête du Sacrifice"
}
]
// Chargez le fichier islamic_events.json dans votre projet
fetch('islamic_events.json')
.then(r => r.json())
.then(fetes => {
fetes.forEach(fete => {
console.log(fete.icone, fete.nom);
console.log('→ Date Hijri :', fete.jourHijri + '/' + fete.moisHijri);
});
});
3 étapes pour afficher Fajr, Dhuhr, Asr, Maghrib et Isha sur votre site ou application — même pour un débutant complet.
Ajoutez cette ligne dans le <head> de votre page HTML. Aucune installation, ça charge directement depuis internet.
<script src="https://cdn.jsdelivr.net/npm/adhan@4.4.3/dist/adhan.min.js"></script>
Remplacez la latitude, la longitude et la méthode par les vôtres (voir onglet "Méthodes").
// ── Vos paramètres (à modifier) ──────────────────────────
const MA_LATITUDE = 48.8566;
const MA_LONGITUDE = 2.3522;
const coords = new adhan.Coordinates(MA_LATITUDE, MA_LONGITUDE);
const params = adhan.CalculationMethod.MuslimWorldLeague();
params.fajrAngle = 12;
params.ishaAngle = 12;
const prieres = new adhan.PrayerTimes(coords, new Date(), params);
const heure = (d) => d.toLocaleTimeString('fr-FR', {hour:'2-digit', minute:'2-digit'});
console.log('🌄 Fajr :', heure(prieres.fajr));
console.log('🌅 Chourouk:', heure(prieres.sunrise));
console.log('☀️ Dhuhr :', heure(prieres.dhuhr));
console.log('🌤️ Asr :', heure(prieres.asr));
console.log('🌇 Maghrib :', heure(prieres.maghrib));
console.log('🌙 Isha :', heure(prieres.isha));
Allez sur maps.google.com, faites un clic droit sur votre ville → les coordonnées apparaissent. Exemple : Paris = 48.8566, 2.3522 — Lyon = 45.7640, 4.8357 — Casablanca = 33.5731, -7.5898.
{
"description": "Guide d'intégration des heures de prière — Pôle Muslim",
"librairie_recommandee": "Adhan.js v4.4.3",
"cdn": "https:\/\/cdn.jsdelivr.net\/npm\/adhan@4.4.3\/dist\/adhan.min.js",
"prieres": {
"fajr": "Aube",
"sunrise": "Lever du soleil (Chourouk)",
"dhuhr": "Méridien",
"asr": "Après-midi",
"maghrib": "Coucher",
"isha": "Nuit"
},
"asr_ecoles": [
"Shafi \/ Maliki \/ Hanbali (ombre = 1x hauteur)",
"Hanafi (ombre = 2x hauteur, heure plus tardive)"
],
"villes_exemple": [
{
"ville": "Paris",
"lat": 48.8566,
"lon": 2.3522,
"methode_id": 10
},
{
"ville": "Lyon",
"lat": 45.764,
"lon": 4.8357,
"methode_id": 10
},
{
"ville": "Casablanca",
"lat": 33.5731,
"lon": -7.5898,
"methode_id": 15
},
{
"ville": "Alger",
"lat": 36.7538,
"lon": 3.0588,
"methode_id": 13
},
{
"ville": "Tunis",
"lat": 36.8065,
"lon": 10.1815,
"methode_id": 16
},
{
"ville": "Dubaï",
"lat": 25.2048,
"lon": 55.2708,
"methode_id": 6
},
{
"ville": "Istanbul",
"lat": 41.0082,
"lon": 28.9784,
"methode_id": 14
}
],
"astuce": "Utilisez Nominatim (OpenStreetMap) pour trouver lat\/lon par nom de ville : https:\/\/nominatim.openstreetmap.org\/search?q=Paris&format=json"
}
Éclipses, pluies de météores, conjonctions planétaires et saisons. Téléchargez le JSON et intégrez-le dans votre calendrier islamique en 2 minutes.
astronomical_events_2026.json, puis chargez-le avec fetch('astronomical_events_2026.json'). Chaque événement a une date, un titre, une description, une icône et un type.20 événements astronomiques de 2026 au format JSON, prêts à utiliser.
[
{ "date": "2026-01-03", "title": "Pluie de météores des Quadrantides", "description": "Première pluie de météores de l'année, jusqu'à 120 météores/h au pic", "icon": "☄️", "type": "meteor" },
{ "date": "2026-01-10", "title": "Opposition de Jupiter", "description": "Jupiter à son point le plus proche de la Terre, visible à l'œil nu dans les Gémeaux", "icon": "🪐", "type": "planet" },
{ "date": "2026-01-29", "title": "Nouvelle Lune", "description": "Idéal pour observer les étoiles et les galaxies lointaines", "icon": "🌑", "type": "moon" },
{ "date": "2026-02-12", "title": "Pleine Lune des Neiges", "description": "La pleine lune traditionnelle de février", "icon": "🌕", "type": "moon" },
{ "date": "2026-02-17", "title": "Éclipse annulaire de Soleil", "description": "Visible depuis l'Antarctique oriental et l'océan Indien austral", "icon": "🌑", "type": "eclipse" },
{ "date": "2026-03-03", "title": "Éclipse lunaire totale (Lune de Sang)", "description": "Visible depuis l'Asie, l'Australie et l'Amérique du Nord", "icon": "🔴", "type": "eclipse" },
{ "date": "2026-03-20", "title": "Équinoxe de Printemps", "description": "Début du printemps astronomique, jour = nuit", "icon": "🌸", "type": "season" },
{ "date": "2026-04-22", "title": "Pluie de météores des Lyrides", "description": "Jusqu'à 18 météores par heure, pic dans la nuit du 21 au 22 avril", "icon": "☄️", "type": "meteor" },
{ "date": "2026-05-06", "title": "Pluie de météores des Eta Aquarides", "description": "Résidus de la comète de Halley, jusqu'à 60 météores/h", "icon": "☄️", "type": "meteor" },
{ "date": "2026-06-09", "title": "Conjonction Vénus-Jupiter-Mercure", "description": "Jupiter et Vénus à seulement 1,5° de distance après le coucher du soleil", "icon": "🪐", "type": "planet" },
{ "date": "2026-06-21", "title": "Solstice d'Été", "description": "Jour le plus long de l'année, début de l'été", "icon": "☀️", "type": "season" },
{ "date": "2026-07-28", "title": "Pluie de météores des Delta Aquarides", "description": "Jusqu'à 25 météores par heure", "icon": "☄️", "type": "meteor" },
{ "date": "2026-08-12", "title": "Pluie de météores des Perséides", "description": "La plus spectaculaire ! Jusqu'à 100 météores/h, ciel sombre grâce à la nouvelle lune", "icon": "🌠", "type": "meteor" },
{ "date": "2026-08-12", "title": "Éclipse solaire totale", "description": "Visible depuis le Groenland, l'Islande, le Portugal et l'Espagne — événement majeur de l'année !", "icon": "☀️", "type": "eclipse" },
{ "date": "2026-08-28", "title": "Éclipse lunaire partielle", "description": "Quasi-totale avec plus de 96% de la surface lunaire dans l'ombre", "icon": "🌔", "type": "eclipse" },
{ "date": "2026-09-22", "title": "Équinoxe d'Automne", "description": "Début de l'automne astronomique", "icon": "🍂", "type": "season" },
{ "date": "2026-10-21", "title": "Pluie de météores des Orionides", "description": "Résidus de la comète de Halley, ~25 météores/h", "icon": "☄️", "type": "meteor" },
{ "date": "2026-11-17", "title": "Pluie de météores des Léonides", "description": "Peut produire des tempêtes de météores certaines années", "icon": "☄️", "type": "meteor" },
{ "date": "2026-12-13", "title": "Pluie de météores des Géminides", "description": "Très intense ! Jusqu'à 120 météores/h", "icon": "🌠", "type": "meteor" },
{ "date": "2026-12-21", "title": "Solstice d'Hiver", "description": "Jour le plus court, début de l'hiver", "icon": "❄️", "type": "season" }
]
fetch('astronomical_events_2026.json')
.then(r => r.json())
.then(events => {
const liste = document.getElementById('maListe');
events.forEach(ev => {
const li = document.createElement('li');
li.textContent = ev.icon + ' ' + ev.date + ' — ' + ev.title;
liste.appendChild(li);
});
});
Jusqu'à 120 météores/h au pic
MétéoresJupiter visible à l'œil nu dans les Gémeaux
PlanèteIdéal pour observer les étoiles
LunePleine lune de février
LuneVisible depuis l'Antarctique et l'océan Indien
ÉclipseVisible depuis l'Asie, l'Australie et l'Amérique du Nord
ÉclipseDébut du printemps astronomique, jour = nuit
SaisonJusqu'à 18 météores/h
MétéoresRésidus de Halley, 60 météores/h
Météores1,5° de distance après le coucher du soleil
PlanèteJour le plus long de l'année
SaisonJusqu'à 25 météores/h
MétéoresLa plus spectaculaire ! 100 météores/h
MétéoresVisible depuis le Portugal et l'Espagne !
Éclipse96% de la Lune dans l'ombre
ÉclipseDébut de l'automne astronomique
SaisonRésidus de Halley, ~25 météores/h
MétéoresPeut produire des tempêtes de météores
MétéoresTrès intense ! 120 météores/h
MétéoresJour le plus court, début de l'hiver
SaisonCalculez et intégrez la direction de la Qibla dans vos projets. Formule de la grande orthodromie + boussole SVG interactive prête à l'emploi.
Cette fonction prend votre latitude/longitude et retourne l'angle en degrés depuis le Nord (sens horaire) vers la Kaaba.
// Coordonnées de la Kaaba (La Mecque)
const KAABA_LAT = 21.4225;
const KAABA_LON = 39.8262;
/**
* Calcule la direction de la Qibla depuis une position donnée.
* @param {number} lat - Latitude de l'utilisateur (degrés)
* @param {number} lon - Longitude de l'utilisateur (degrés)
* @returns {number} Angle en degrés [0..360) depuis le Nord (sens horaire)
*/
function qiblaAngle(lat, lon) {
const toRad = d => d * Math.PI / 180;
const φ1 = toRad(lat), λ1 = toRad(lon);
const φ2 = toRad(KAABA_LAT), λ2 = toRad(KAABA_LON);
const Δλ = λ2 - λ1;
const y = Math.sin(Δλ) * Math.cos(φ2);
const x = Math.cos(φ1) * Math.sin(φ2)
- Math.sin(φ1) * Math.cos(φ2) * Math.cos(Δλ);
return ((Math.atan2(y, x) * 180 / Math.PI) + 360) % 360;
}
// Exemple : Paris (48.8566°N, 2.3522°E)
const angle = qiblaAngle(48.8566, 2.3522);
console.log(angle.toFixed(1) + '°'); // ≈ 119.2° (Sud-Est)
Copiez ce HTML/JS dans votre page. Il affiche une boussole avec une aiguille rouge fixe (Nord) et une aiguille verte qui pointe vers la Kaaba. Modifiez lat et lon selon votre position.
<!-- Boussole Qibla — modifiez lat/lon ci-dessous -->
<div id="qiblaWidget" style="max-width:320px;margin:auto;text-align:center;font-family:sans-serif">
<svg id="qiblaSVG" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Fond -->
<circle cx="150" cy="150" r="148" fill="#f0f4f8" stroke="#0097b2" stroke-width="3"/>
<!-- Points cardinaux -->
<text x="150" y="24" text-anchor="middle" font-size="18" font-weight="900" fill="#e53e3e">N</text>
<text x="276" y="156" text-anchor="middle" font-size="16" font-weight="700" fill="#0097b2">E</text>
<text x="150" y="283" text-anchor="middle" font-size="16" font-weight="700" fill="#0097b2">S</text>
<text x="22" y="156" text-anchor="middle" font-size="16" font-weight="700" fill="#0097b2">O</text>
<!-- Cercle intérieur -->
<circle cx="150" cy="150" r="120" fill="white" stroke="#0097b2" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.5"/>
<!-- Aiguille Nord (rouge, fixe) -->
<path id="qblNorthArrow"
d="M150,150 L146,82 L150,58 L154,82 Z"
fill="#e53e3e"/>
<path d="M150,150 L146,218 L150,242 L154,218 Z" fill="#94a3b8"/>
<!-- Aiguille Qibla (verte, tourne) -->
<g id="qblArrow" transform="rotate(0 150 150)">
<path d="M150,150 L145.5,80 L150,52 L154.5,80 Z" fill="#10b981"/>
<path d="M150,150 L146,215 L150,232 L154,215 Z" fill="#10b981" opacity="0.3"/>
<text x="150" y="44" text-anchor="middle" font-size="8" font-weight="800"
fill="white" stroke="#065f46" stroke-width="2" paint-order="stroke">KAABA</text>
</g>
<!-- Pivot central -->
<circle cx="150" cy="150" r="10" fill="#0097b2" stroke="white" stroke-width="2.5"/>
<circle cx="147" cy="147" r="3" fill="white" opacity="0.5"/>
</svg>
<div id="qiblaInfo" style="margin-top:8px;font-size:.9rem;color:#555">Calcul en cours...</div>
</div>
<script>
// ── Modifiez ces coordonnées ──
const userLat = 48.8566; // Paris
const userLon = 2.3522;
// ── Calcul de la Qibla ──
const KAABA_LAT = 21.4225, KAABA_LON = 39.8262;
function qiblaAngle(lat, lon) {
const r = d => d * Math.PI / 180;
const Δλ = r(KAABA_LON - lon);
const y = Math.sin(Δλ) * Math.cos(r(KAABA_LAT));
const x = Math.cos(r(lat)) * Math.sin(r(KAABA_LAT))
- Math.sin(r(lat)) * Math.cos(r(KAABA_LAT)) * Math.cos(Δλ);
return ((Math.atan2(y, x) * 180 / Math.PI) + 360) % 360;
}
const angle = qiblaAngle(userLat, userLon);
document.getElementById('qblArrow').setAttribute('transform', 'rotate(' + angle + ' 150 150)');
document.getElementById('qiblaInfo').innerHTML =
'<strong>Qibla :</strong> ' + angle.toFixed(1) + '° depuis le Nord' +
'<br><small>Latitude ' + userLat + ' — Longitude ' + userLon + '</small>';
</script>
Ce code demande la position GPS du navigateur et met à jour la boussole automatiquement. Nécessite HTTPS et l'accord de l'utilisateur.
// Ajouter après avoir inclus la boussole SVG ci-dessus
function updateQiblaFromGPS() {
if (!navigator.geolocation) {
alert('Géolocalisation non supportée par ce navigateur.');
return;
}
navigator.geolocation.getCurrentPosition(
function(pos) {
const lat = pos.coords.latitude;
const lon = pos.coords.longitude;
const angle = qiblaAngle(lat, lon);
document.getElementById('qblArrow')
.setAttribute('transform', 'rotate(' + angle + ' 150 150)');
document.getElementById('qiblaInfo').innerHTML =
'<strong>Qibla :</strong> ' + angle.toFixed(1) + '° depuis le Nord' +
'<br><small>Votre position : ' + lat.toFixed(4) + '°, ' + lon.toFixed(4) + '°</small>';
},
function(err) {
alert('Erreur GPS : ' + err.message);
},
{ enableHighAccuracy: true, timeout: 8000 }
);
}
// Appeler automatiquement au chargement
updateQiblaFromGPS();
Calculez aussi la distance orthodromique (grand cercle) entre votre position et la Kaaba, en kilomètres.
/**
* Distance haversine entre deux points (en km)
*/
function haversineKm(lat1, lon1, lat2, lon2) {
const R = 6371; // rayon Terre en km
const r = d => d * Math.PI / 180;
const Δφ = r(lat2 - lat1), Δλ = r(lon2 - lon1);
const a = Math.sin(Δφ/2)**2
+ Math.cos(r(lat1)) * Math.cos(r(lat2)) * Math.sin(Δλ/2)**2;
return 2 * R * Math.asin(Math.sqrt(a));
}
// Exemple : distance Paris → Kaaba
const dist = haversineKm(48.8566, 2.3522, 21.4225, 39.8262);
console.log(dist.toFixed(0) + ' km'); // ≈ 5 241 km
La Lune parcourt 28 stations (منازل القمر) en ~27,3 jours. Chaque station est associée à des étoiles repères, une planète régente et un signe du zodiaque. Voici comment calculer et intégrer les Manazil dans vos projets.
La formule utilise les éphémérides simplifiées de Jean Meeus. Elle donne la longitude écliptique de la Lune avec une précision de ~0,1° pour les usages courants.
/**
* Retourne la longitude écliptique de la Lune en degrés [0, 360[
* @param {number} ms — timestamp JavaScript (Date.now())
*/
function getLunarLongitude(ms) {
const jd = ms / 86400000 + 2440587.5;
const T = (jd - 2451545.0) / 36525;
// Longitude moyenne de la Lune
const Lp = 218.3164477 + 481267.88123421 * T - 0.0015786 * T * T;
// Anomalies et arguments (en radians)
const Mp = (134.9633964 + 477198.8675055 * T) * Math.PI / 180;
const F = (93.2720950 + 483202.0175233 * T) * Math.PI / 180;
const D = (297.8501921 + 445267.1114034 * T) * Math.PI / 180;
const Mr = (357.5291092 + 35999.0502909 * T) * Math.PI / 180;
// Correction principale (6 termes majeurs)
const lam = Lp
+ 6.288774 * Math.sin(Mp)
+ 1.274027 * Math.sin(2*D - Mp)
+ 0.658314 * Math.sin(2*D)
+ 0.213618 * Math.sin(2*Mp)
- 0.185116 * Math.sin(Mr)
- 0.114332 * Math.sin(2*F);
return ((lam % 360) + 360) % 360;
}
// Exemple d'utilisation
const lon = getLunarLongitude(Date.now());
console.log('Longitude lunaire :', lon.toFixed(2) + '°');
Une fois la longitude connue, on divise le cercle de 360° en 28 parts égales. Chaque part fait exactement 360/28 ≈ 12.857°.
/**
* Retourne le numéro de station (0-indexé, 0 = station 1)
* @param {number} lon — longitude lunaire [0, 360[
*/
function getManazilStation(lon) {
const stepDeg = 360 / 28; // ≈ 12.857°
const idx = Math.floor(((lon % 360) + 360) % 360 / stepDeg);
return Math.min(idx, 27); // 0–27 (station 1–28)
}
// Exemple complet
const lon = getLunarLongitude(Date.now());
const stIdx = getManazilStation(lon); // 0–27
const stNum = stIdx + 1; // 1–28
const stepDeg = 360 / 28;
const pct = ((lon - stIdx * stepDeg) / stepDeg * 100).toFixed(1);
console.log('Station :', stNum + '/28');
console.log('Progression dans la station :', pct + '%');
Copiez ce fichier JSON dans votre projet pour avoir les noms arabes, translittérations, étoiles repères, planètes régentes et signes du zodiaque.
[
{
"num": 1,
"arabic": "الشَّرَطَيْن",
"translit": "Al-Sharatayn",
"french": "Les Deux Signes",
"star": "β & γ Arietis",
"planet": "Saturne ♄",
"zodiac": "Bélier ♈",
"lon_start": 0,
"lon_end": 12.857
},
{
"num": 2,
"arabic": "البَطِين",
"translit": "Al-Buṭayn",
"french": "Le Petit Ventre",
"star": "ε Arietis",
"planet": "Jupiter ♃",
"zodiac": "Bélier ♈",
"lon_start": 12.857,
"lon_end": 25.714
},
{
"num": 3,
"arabic": "الثُّرَيَّا",
"translit": "Al-Thurayya",
"french": "Les Pléiades",
"star": "Les Pléiades (Taurus)",
"planet": "Mars ♂",
"zodiac": "Taureau ♉",
"lon_start": 25.714,
"lon_end": 38.571
},
{
"num": 4,
"arabic": "الدَّبَرَان",
"translit": "Al-Dabarān",
"french": "L'Œil du Taureau (Aldébaran)",
"star": "α Tauri (Aldébaran)",
"planet": "Soleil ☉",
"zodiac": "Taureau ♉",
"lon_start": 38.571,
"lon_end": 51.429
},
{
"num": 5,
"arabic": "الهَقعَة",
"translit": "Al-Haqʿa",
"french": "La Marque Circulaire",
"star": "λ, φ¹, φ² Orionis",
"planet": "Vénus ♀",
"zodiac": "Gémeaux ♊",
"lon_start": 51.429,
"lon_end": 64.286
},
{
"num": 6,
"arabic": "الهَنعَة",
"translit": "Al-Hanʿa",
"french": "La Courbe du Cou",
"star": "γ & ξ Geminorum",
"planet": "Mercure ☿",
"zodiac": "Gémeaux ♊",
"lon_start": 64.286,
"lon_end": 77.143
},
{
"num": 7,
"arabic": "الذِّرَاع",
"translit": "Al-Dhirāʿ",
"french": "Le Bras",
"star": "α & β Geminorum",
"planet": "Lune ☽",
"zodiac": "Gémeaux ♊",
"lon_start": 77.143,
"lon_end": 90
},
{
"num": 8,
"arabic": "النَّثرَة",
"translit": "Al-Nathra",
"french": "Les Narines du Lion",
"star": "M44 (amas du Cancer)",
"planet": "Saturne ♄",
"zodiac": "Cancer ♋",
"lon_start": 90,
"lon_end": 102.857
},
{
"num": 9,
"arabic": "الطَّرف",
"translit": "Al-Ṭarf",
"french": "Le Regard du Lion",
"star": "ε & ρ Cancri",
"planet": "Jupiter ♃",
"zodiac": "Cancer ♋",
"lon_start": 102.857,
"lon_end": 115.714
},
{
"num": 10,
"arabic": "الجَبهَة",
"translit": "Al-Jabha",
"french": "Le Front du Lion",
"star": "ζ, γ, η, α Leonis",
"planet": "Mars ♂",
"zodiac": "Lion ♌",
"lon_start": 115.714,
"lon_end": 128.571
},
{
"num": 11,
"arabic": "الزُّبرَة",
"translit": "Al-Zubra",
"french": "La Crinière du Lion",
"star": "δ & θ Leonis",
"planet": "Soleil ☉",
"zodiac": "Lion ♌",
"lon_start": 128.571,
"lon_end": 141.429
},
{
"num": 12,
"arabic": "الصَّرفَة",
"translit": "Al-Ṣarfa",
"french": "Le Changement",
"star": "β Leonis (Denebola)",
"planet": "Vénus ♀",
"zodiac": "Lion ♌",
"lon_start": 141.429,
"lon_end": 154.286
},
{
"num": 13,
"arabic": "العَوَّاء",
"translit": "Al-ʿAwwā",
"french": "L'Aboyeur",
"star": "β, η, γ, δ, ε Virginis",
"planet": "Mercure ☿",
"zodiac": "Vierge ♍",
"lon_start": 154.286,
"lon_end": 167.143
},
{
"num": 14,
"arabic": "السِّمَاك",
"translit": "Al-Simāk",
"french": "L'Élevé (Spica)",
"star": "α Virginis (Spica)",
"planet": "Lune ☽",
"zodiac": "Vierge ♍",
"lon_start": 167.143,
"lon_end": 180
},
{
"num": 15,
"arabic": "الغَفر",
"translit": "Al-Ghafr",
"french": "La Couverture",
"star": "ι, κ, λ Virginis",
"planet": "Saturne ♄",
"zodiac": "Balance ♎",
"lon_start": 180,
"lon_end": 192.857
},
{
"num": 16,
"arabic": "الزُّبَانَى",
"translit": "Al-Zubānā",
"french": "Les Pinces de la Balance",
"star": "α & β Librae",
"planet": "Jupiter ♃",
"zodiac": "Balance ♎",
"lon_start": 192.857,
"lon_end": 205.714
},
{
"num": 17,
"arabic": "الإِكلِيل",
"translit": "Al-Iklīl",
"french": "La Couronne du Scorpion",
"star": "β, δ, π Scorpii",
"planet": "Mars ♂",
"zodiac": "Scorpion ♏",
"lon_start": 205.714,
"lon_end": 218.571
},
{
"num": 18,
"arabic": "القَلب",
"translit": "Al-Qalb",
"french": "Le Cœur du Scorpion",
"star": "α Scorpii (Antarès)",
"planet": "Soleil ☉",
"zodiac": "Scorpion ♏",
"lon_start": 218.571,
"lon_end": 231.429
},
{
"num": 19,
"arabic": "الشَّولَة",
"translit": "Al-Shawla",
"french": "Le Dard du Scorpion",
"star": "λ & υ Scorpii",
"planet": "Vénus ♀",
"zodiac": "Scorpion ♏",
"lon_start": 231.429,
"lon_end": 244.286
},
{
"num": 20,
"arabic": "النَّعَائِم",
"translit": "Al-Naʿāʾim",
"french": "Les Autruches",
"star": "γ, δ, ε, η Sagittarii",
"planet": "Mercure ☿",
"zodiac": "Sagittaire ♐",
"lon_start": 244.286,
"lon_end": 257.143
},
{
"num": 21,
"arabic": "البَلدَة",
"translit": "Al-Balda",
"french": "La Ville (Lieu Vide)",
"star": "Zone vide du Sagittaire",
"planet": "Lune ☽",
"zodiac": "Sagittaire ♐",
"lon_start": 257.143,
"lon_end": 270
},
{
"num": 22,
"arabic": "سَعد الذَّابِح",
"translit": "Saʿd al-Dhābiḥ",
"french": "Le Bonheur du Sacrificateur",
"star": "α & β Capricorni",
"planet": "Saturne ♄",
"zodiac": "Capricorne ♑",
"lon_start": 270,
"lon_end": 282.857
},
{
"num": 23,
"arabic": "سَعد بُلَع",
"translit": "Saʿd Bulaʿ",
"french": "Le Bonheur de l'Avaleur",
"star": "μ Aquarii & ε Aquarii",
"planet": "Jupiter ♃",
"zodiac": "Verseau ♒",
"lon_start": 282.857,
"lon_end": 295.714
},
{
"num": 24,
"arabic": "سَعد السُّعُود",
"translit": "Saʿd al-Suʿūd",
"french": "Le Plus Grand des Bonheurs",
"star": "β Aquarii (Sadalsuud)",
"planet": "Mars ♂",
"zodiac": "Verseau ♒",
"lon_start": 295.714,
"lon_end": 308.571
},
{
"num": 25,
"arabic": "سَعد الأَخبِيَة",
"translit": "Saʿd al-Akhbiya",
"french": "Le Bonheur des Tentes",
"star": "γ, ζ, η, π Aquarii",
"planet": "Soleil ☉",
"zodiac": "Verseau ♒",
"lon_start": 308.571,
"lon_end": 321.429
},
{
"num": 26,
"arabic": "الفَرغ الأَوَّل",
"translit": "Al-Fargh al-Awwal",
"french": "Le Premier Vide",
"star": "α & β Pegasi",
"planet": "Vénus ♀",
"zodiac": "Poissons ♓",
"lon_start": 321.429,
"lon_end": 334.286
},
{
"num": 27,
"arabic": "الفَرغ الثَّاني",
"translit": "Al-Fargh al-Thānī",
"french": "Le Second Vide",
"star": "γ Pegasi & α Andromedae",
"planet": "Mercure ☿",
"zodiac": "Poissons ♓",
"lon_start": 334.286,
"lon_end": 347.143
},
{
"num": 28,
"arabic": "الرِّشَاء",
"translit": "Al-Rishāʾ",
"french": "La Corde du Seau",
"star": "β Andromedae (Mirach)",
"planet": "Lune ☽",
"zodiac": "Poissons ♓",
"lon_start": 347.143,
"lon_end": 360
}
]
Copiez ce code HTML/JS dans votre page. Il calcule et affiche en temps réel la station lunaire avec son nom arabe et la progression.
<!-- Afficher la station lunaire actuelle -->
<div id="manazilWidget">Calcul en cours...</div>
<script>
function getLunarLongitude(ms) {
const jd = ms / 86400000 + 2440587.5;
const T = (jd - 2451545.0) / 36525;
const Lp = 218.3164477 + 481267.88123421 * T - 0.0015786 * T * T;
const Mp = (134.9633964 + 477198.8675055 * T) * Math.PI / 180;
const F = (93.2720950 + 483202.0175233 * T) * Math.PI / 180;
const D = (297.8501921 + 445267.1114034 * T) * Math.PI / 180;
const Mr = (357.5291092 + 35999.0502909 * T) * Math.PI / 180;
const lam = Lp
+ 6.288774 * Math.sin(Mp)
+ 1.274027 * Math.sin(2*D - Mp)
+ 0.658314 * Math.sin(2*D)
+ 0.213618 * Math.sin(2*Mp)
- 0.185116 * Math.sin(Mr)
- 0.114332 * Math.sin(2*F);
return ((lam % 360) + 360) % 360;
}
const MANAZIL_NAMES = [
'الشَّرَطَيْن','البَطِين','الثُّرَيَّا','الدَّبَرَان','الهَقعَة','الهَنعَة','الذِّرَاع',
'النَّثرَة','الطَّرف','الجَبهَة','الزُّبرَة','الصَّرفَة','العَوَّاء','السِّمَاك',
'الغَفر','الزُّبَانَى','الإِكلِيل','القَلب','الشَّولَة','النَّعَائِم','البَلدَة',
'سَعد الذَّابِح','سَعد بُلَع','سَعد السُّعُود','سَعد الأَخبِيَة',
'الفَرغ الأَوَّل','الفَرغ الثَّاني','الرِّشَاء'
];
const MANAZIL_TRANSLIT = [
'Al-Sharatayn','Al-Buṭayn','Al-Thurayya','Al-Dabarān','Al-Haqʿa','Al-Hanʿa','Al-Dhirāʿ',
'Al-Nathra','Al-Ṭarf','Al-Jabha','Al-Zubra','Al-Ṣarfa','Al-ʿAwwā','Al-Simāk',
'Al-Ghafr','Al-Zubānā','Al-Iklīl','Al-Qalb','Al-Shawla','Al-Naʿāʾim','Al-Balda',
'Saʿd al-Dhābiḥ','Saʿd Bulaʿ','Saʿd al-Suʿūd','Saʿd al-Akhbiya',
'Al-Fargh al-Awwal','Al-Fargh al-Thānī','Al-Rishāʾ'
];
const lon = getLunarLongitude(Date.now());
const stepDeg = 360 / 28;
const idx = Math.min(Math.floor(lon / stepDeg), 27);
const pct = ((lon - idx * stepDeg) / stepDeg * 100).toFixed(1);
document.getElementById('manazilWidget').innerHTML =
'<strong>Station ' + (idx+1) + '/28</strong> — ' +
MANAZIL_TRANSLIT[idx] + ' <span dir="rtl">' + MANAZIL_NAMES[idx] + '</span>' +
'<br>Longitude lunaire : ' + lon.toFixed(2) + '° — Progression : ' + pct + '%';
</script>
—
—
—