<div id=”bic-prayer-widget”></div>

<style>
#bic-prayer-widget {
–green-deep: #0c3b2e;
–green-mid: #145a42;
–green-line: #1e6b50;
–gold: #c9a227;
–gold-soft: rgba(201,162,39,0.14);
–cream: #faf6ea;
–cream-dim: #efe8d4;
–ink: #16342a;
–ink-muted: #5c7468;

font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, sans-serif;
color: var(–ink);
max-width: 460px;
margin: 0 auto;
border-radius: 16px;
background: var(–cream);
box-shadow: 0 14px 36px rgba(12,59,46,0.22);
overflow: hidden;
box-sizing: border-box;
border: 1px solid var(–cream-dim);
}
#bic-prayer-widget *, #bic-prayer-widget *::before, #bic-prayer-widget *::after {
box-sizing: border-box;
}

/* geometric star lattice strip — the signature motif, echoing
the mosque’s own ornamental vocabulary */
.bic-lattice { display: block; width: 100%; height: 10px; }

.bic-head {
background: linear-gradient(155deg, var(–green-deep) 0%, var(–green-mid) 100%);
color: var(–cream);
padding: 22px 24px 20px;
text-align: center;
position: relative;
}
.bic-eyebrow {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(–gold);
margin: 0 0 6px;
font-weight: 600;
}
.bic-title-row {
display: flex;
align-items: baseline;
justify-content: center;
gap: 10px;
}
.bic-title {
font-family: ‘Amiri’, Georgia, serif;
font-weight: 700;
font-size: 25px;
margin: 0;
letter-spacing: 0.01em;
}
.bic-title-ar {
font-family: ‘Amiri’, serif;
font-size: 20px;
color: var(–gold);
direction: rtl;
}
.bic-date {
font-size: 13px;
color: rgba(250,246,234,0.75);
margin: 6px 0 0;
letter-spacing: 0.02em;
}

.bic-body { padding: 4px 0 0; }

.bic-col-headers {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
padding: 16px 22px 6px;
}
.bic-col-label {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(–ink-muted);
font-weight: 600;
}
.bic-col-label.right { text-align: right; }

.bic-list { padding: 0 14px 6px; }
.bic-row {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
align-items: center;
padding: 12px 8px;
border-radius: 10px;
position: relative;
}
.bic-row + .bic-row { border-top: 1px solid var(–cream-dim); }
.bic-row.is-next {
background: var(–gold-soft);
border-top: 1px solid transparent;
}
.bic-row.is-next + .bic-row { border-top: 1px solid transparent; }

.bic-name-wrap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bic-name { font-family: ‘Amiri’, Georgia, serif; font-weight: 700; font-size: 16px; color: var(–green-deep); }
.bic-name-ar { font-family: ‘Amiri’, serif; font-size: 14px; color: var(–ink-muted); direction: rtl; }
.bic-chip {
font-size: 9px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(–cream);
background: var(–green-deep);
padding: 2px 7px;
border-radius: 20px;
font-weight: 700;
}
.bic-time {
font-variant-numeric: tabular-nums;
font-size: 15px;
text-align: right;
color: var(–ink);
}
.bic-time.is-iqamah { color: var(–gold); font-weight: 700; }
.bic-time.is-empty { color: var(–ink-muted); }

.bic-note {
margin: 6px 18px 14px;
padding: 10px 12px;
border: 1px dashed var(–cream-dim);
border-radius: 10px;
font-size: 11.5px;
color: var(–ink-muted);
line-height: 1.5;
}
.bic-note a { color: var(–green-deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(–gold); }

.bic-foot {
border-top: 1px solid var(–cream-dim);
padding: 12px 22px 18px;
font-size: 11px;
color: var(–ink-muted);
text-align: center;
}
.bic-foot a { color: var(–green-deep); text-decoration: none; font-weight: 600; }

.bic-status {
padding: 44px 24px;
text-align: center;
color: var(–ink-muted);
font-size: 14px;
background: var(–cream);
}
</style>

<script>
(function () {
var CSV_URL = “https://belfastislamiccentre.org.uk/wp-content/uploads/2026/08/prayer-time-2026-V3.csv”;
var TIMETABLE_URL = “https://belfastislamiccentre.org.uk/monthly-prayer-times/”;

if (!document.getElementById(‘bic-fonts’)) {
var link = document.createElement(‘link’);
link.id = ‘bic-fonts’;
link.rel = ‘stylesheet’;
link.href = ‘https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Inter:wght@400;500;600;700&display=swap’;
document.head.appendChild(link);
}

var ROOT = document.getElementById(‘bic-prayer-widget’);
var PRAYERS = [
{ key: ‘fajr’, label: ‘Fajr’, ar: ‘فجر’, hasIqamah: true },
{ key: ‘sunrise’, label: ‘Sunrise’, ar: ‘شروق’, hasIqamah: false },
{ key: ‘zuhr’, label: ‘Dhuhr’, ar: ‘ظهر’, hasIqamah: true },
{ key: ‘asr’, label: ‘Asr’, ar: ‘عصر’, hasIqamah: true },
{ key: ‘maghrib’, label: ‘Maghrib’, ar: ‘مغرب’, hasIqamah: true },
{ key: ‘isha’, label: ‘Isha’, ar: ‘عشاء’, hasIqamah: true }
];

function pad(n) { return n < 10 ? ‘0’ + n : ” + n; }
function todayKey(d) { return pad(d.getDate()) + ‘.’ + pad(d.getMonth() + 1) + ‘.’ + d.getFullYear(); }

function latticeSVG() {
// repeating 8-point star lattice strip, gold on deep green —
// the mosque’s own geometric ornamental language, kept quiet.
var unit = 20, w = 460, h = 10;
var tiles = Math.ceil(w / unit) + 1;
var stars = ”;
for (var i = 0; i < tiles; i++) {
var cx = i * unit;
stars += ‘<path transform=”translate(‘ + cx + ‘,5)” d=”M0,-5 L1.4,-1.4 L5,0 L1.4,1.4 L0,5 L-1.4,1.4 L-5,0 L-1.4,-1.4 Z” fill=”#c9a227″ opacity=”0.55″ />’;
}
return ‘<svg class=”bic-lattice” viewBox=”0 0 ‘ + w + ‘ ‘ + h + ‘” preserveAspectRatio=”none” xmlns=”http://www.w3.org/2000/svg”>’ +
‘<rect width=”‘ + w + ‘” height=”‘ + h + ‘” fill=”#0c3b2e” />’ + stars + ‘</svg>’;
}

function parseCSV(text) {
var lines = text.trim().split(/\r?\n/);
var headers = lines[0].split(‘,’).map(function (h) { return h.trim(); });
var rows = {};
for (var i = 1; i < lines.length; i++) {
if (!lines[i]) continue;
var cells = lines[i].split(‘,’);
var row = {};
for (var j = 0; j < headers.length; j++) row[headers[j]] = (cells[j] || ”).trim();
rows[row.d_date] = row;
}
return rows;
}

function toMinutes(hhmmss) {
var p = hhmmss.split(‘:’);
return parseInt(p[0], 10) * 60 + parseInt(p[1], 10);
}

function fmt(hhmmss) {
var p = hhmmss.split(‘:’);
return pad(parseInt(p[0], 10)) + ‘:’ + p[1];
}

function render(row, dateObj, dataIsFallback) {
var nowMin = dateObj.getHours() * 60 + dateObj.getMinutes();
var beginTimes = PRAYERS.map(function (p) { return toMinutes(row[p.key + ‘_begins’]); });

var currentIdx = 0;
for (var i = 0; i < beginTimes.length; i++) {
if (nowMin >= beginTimes[i]) currentIdx = i;
}
var nextIdx = (currentIdx + 1) % PRAYERS.length;
var nextIsTomorrow = nextIdx === 0;

var dateLabel = pad(dateObj.getDate()) + ‘/’ + pad(dateObj.getMonth() + 1) + ‘/’ + dateObj.getFullYear() +
‘ \u00b7 ‘ + dateObj.toLocaleDateString(‘en-GB’, { weekday: ‘long’ });
var isRamadan = row.is_ramadan === ‘1’;

var rowsHTML = PRAYERS.map(function (p, idx) {
var begins = row[p.key + ‘_begins’];
var jamah = row[p.key + ‘_jamah’];
var isNext = idx === nextIdx;
return (
‘<div class=”bic-row’ + (isNext ? ‘ is-next’ : ”) + ‘”>’ +
‘<div class=”bic-name-wrap”>’ +
‘<span class=”bic-name”>’ + p.label + ‘</span>’ +
‘<span class=”bic-name-ar”>’ + p.ar + ‘</span>’ +
(isNext ? ‘<span class=”bic-chip”>’ + (nextIsTomorrow ? ‘Next \u00b7 tomorrow’ : ‘Next’) + ‘</span>’ : ”) +
‘</div>’ +
‘<span class=”bic-time”>’ + fmt(begins) + ‘</span>’ +
‘<span class=”bic-time’ + (p.hasIqamah ? ‘ is-iqamah’ : ‘ is-empty’) + ‘”>’ + (p.hasIqamah ? fmt(jamah) : ‘\u2014’) + ‘</span>’ +
‘</div>’
);
}).join(”);

ROOT.innerHTML =
latticeSVG() +
‘<div class=”bic-head”>’ +
‘<p class=”bic-eyebrow”>Belfast Islamic Centre’ + (isRamadan ? ‘ \u00b7 Ramadan’ : ”) + ‘</p>’ +
‘<div class=”bic-title-row”>’ +
‘<h2 class=”bic-title”>Prayer Times</h2>’ +
‘<span class=”bic-title-ar”>\u0623\u0648\u0642\u0627\u062a \u0627\u0644\u0635\u0644\u0627\u0629</span>’ +
‘</div>’ +
‘<p class=”bic-date”>’ + dateLabel + (dataIsFallback ? ‘ \u00b7 nearest available date’ : ”) + ‘</p>’ +
‘</div>’ +
‘<div class=”bic-body”>’ +
‘<div class=”bic-col-headers”>’ +
‘<span class=”bic-col-label”>Prayer</span>’ +
‘<span class=”bic-col-label right”>Begins</span>’ +
‘<span class=”bic-col-label right”>Iqamah</span>’ +
‘</div>’ +
‘<div class=”bic-list”>’ + rowsHTML + ‘</div>’ +
‘<div class=”bic-note”>Jumu\u02bfah is held in two sessions and is not listed here \u2014 see the notice board or the ‘ +
‘<a href=”‘ + TIMETABLE_URL + ‘” target=”_blank” rel=”noopener”>monthly timetable</a> for current times.</div>’ +
‘</div>’ +
‘<div class=”bic-foot”>Updates automatically each day \u00b7 <a href=”‘ + TIMETABLE_URL + ‘” target=”_blank” rel=”noopener”>Full monthly timetable</a></div>’;
}

function renderStatus(msg) {
ROOT.innerHTML = latticeSVG() + ‘<div class=”bic-status”>’ + msg + ‘</div>’;
}

function load() {
renderStatus(‘Loading today\u2019s prayer times\u2026’);
var bustedUrl = CSV_URL + (CSV_URL.indexOf(‘?’) === -1 ? ‘?’ : ‘&’) + ‘v=’ + Date.now();

fetch(bustedUrl, { cache: ‘no-store’ })
.then(function (res) {
if (!res.ok) throw new Error(‘HTTP ‘ + res.status);
return res.text();
})
.then(function (text) {
var rows = parseCSV(text);
var now = new Date();
var key = todayKey(now);
var row = rows[key];
var fallback = false;

if (!row) {
var keys = Object.keys(rows);
if (keys.length === 0) throw new Error(‘CSV had no rows’);
var toDate = function (k) {
var p = k.split(‘.’);
return new Date(p[2], p[1] – 1, p[0]);
};
keys.sort(function (a, b) { return Math.abs(toDate(a) – now) – Math.abs(toDate(b) – now); });
row = rows[keys[0]];
fallback = true;
}

render(row, now, fallback);
scheduleMidnightRefresh();
})
.catch(function (err) {
renderStatus(‘Prayer times are temporarily unavailable. Please refresh, or view the timetable directly on the mosque site.’);
console.error(‘Prayer times widget:’, err);
});
}

var midnightTimer = null;
function scheduleMidnightRefresh() {
if (midnightTimer) clearTimeout(midnightTimer);
var now = new Date();
var nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 1, 0);
midnightTimer = setTimeout(load, nextMidnight – now);
}

load();
})();
</script>