{"id":2524,"date":"2026-03-07T18:03:47","date_gmt":"2026-03-07T18:03:47","guid":{"rendered":"https:\/\/muslimaat.org\/?page_id=2524"},"modified":"2026-04-27T22:12:08","modified_gmt":"2026-04-27T21:12:08","slug":"events","status":"publish","type":"page","link":"https:\/\/muslimaat.org\/ar\/events\/","title":{"rendered":""},"content":{"rendered":"<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&#038;family=Jost:wght@200;300;400;500;600&#038;display=swap\" rel=\"stylesheet\">\n<style>\n.msl-ev *, .msl-ev *::before, .msl-ev *::after { box-sizing: border-box; margin: 0; padding: 0; }<\/p>\n<p>.msl-ev {\n  width: 100%; background: #fff;\n  padding: 5rem 5%; font-family: 'Jost', sans-serif;\n  overflow: hidden;\n}<\/p>\n<p>.msl-ev-container { max-width: 1200px; margin: 0 auto; }<\/p>\n<p>\/* \u2500\u2500 HEADER \u2500\u2500 *\/\n.msl-ev-header { text-align: center; margin-bottom: 3rem; }\n.msl-ev-tag {\n  display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;\n}\n.msl-ev-tag::before, .msl-ev-tag::after {\n  content: ''; display: block; width: 30px; height: 1.5px; background: #E81F6D;\n}\n.msl-ev-tag span {\n  font-size: 0.68rem; font-weight: 600; letter-spacing: 3px;\n  text-transform: uppercase; color: #E81F6D;\n}\n.msl-ev-title {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: clamp(2rem, 3.5vw, 3rem);\n  font-weight: 300; color: #09090b; line-height: 1.1; margin-bottom: 0.5rem;\n}\n.msl-ev-title em { font-style: italic; font-weight: 600; color: #E81F6D; }\n.msl-ev-subtitle { font-size: 0.85rem; color: #a1a1aa; font-weight: 300; }<\/p>\n<p>\/* \u2500\u2500 TABS \u2500\u2500 *\/\n.msl-ev-tabs {\n  display: flex; align-items: center;\n  background: #f4f4f5; border-radius: 12px; padding: 4px;\n  margin-bottom: 3rem; width: fit-content;\n  margin-left: auto; margin-right: auto;\n}\n.msl-ev-tab {\n  padding: 0.65rem 2rem; border-radius: 9px; cursor: pointer;\n  font-size: 0.82rem; font-weight: 500; color: #71717a;\n  transition: all 0.25s; border: none; background: transparent;\n  font-family: 'Jost', sans-serif;\n  display: flex; align-items: center; gap: 0.5rem;\n}\n.msl-ev-tab.active {\n  background: #fff; color: #09090b;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n}\n.msl-ev-tab-dot {\n  width: 7px; height: 7px; border-radius: 50%; background: #E81F6D; display: none;\n}\n.msl-ev-tab.active .msl-ev-tab-dot { display: block; }\n.msl-ev-tab-count {\n  background: #E81F6D; color: #fff;\n  font-size: 0.58rem; font-weight: 700;\n  width: 18px; height: 18px; border-radius: 50%;\n  display: flex; align-items: center; justify-content: center;\n}<\/p>\n<p>\/* \u2500\u2500 GRID \u2500\u2500 *\/\n.msl-ev-grid {\n  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;\n}<\/p>\n<p>\/* \u2500\u2500 CARD \u2500\u2500 *\/\n.msl-ev-card {\n  background: #fff; border: 1px solid #f4f4f5;\n  border-radius: 20px; overflow: hidden;\n  transition: all 0.3s ease;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n  text-decoration: none; display: block; color: inherit;\n}\n.msl-ev-card:hover {\n  border-color: #fbcfe8;\n  box-shadow: 0 12px 36px rgba(232,31,109,0.1);\n  transform: translateY(-4px);\n}<\/p>\n<p>.msl-ev-card-img {\n  width: 100%; height: 200px; overflow: hidden;\n  position: relative; background: #FDEEF5;\n}\n.msl-ev-card-img img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n  transition: transform 0.5s ease;\n}\n.msl-ev-card:hover .msl-ev-card-img img { transform: scale(1.05); }<\/p>\n<p>.msl-ev-card-img-placeholder {\n  width: 100%; height: 100%;\n  display: flex; align-items: center; justify-content: center;\n  background: linear-gradient(135deg, #FDEEF5 0%, #F7C4DC 100%);\n}\n.msl-ev-card-img-placeholder svg {\n  width: 48px; height: 48px; stroke: rgba(232,31,109,0.3);\n  fill: none; stroke-width: 1.5;\n}<\/p>\n<p>.msl-ev-card-date-badge {\n  position: absolute; top: 1rem; left: 1rem;\n  background: #E81F6D; color: #fff;\n  border-radius: 12px; padding: 0.5rem 0.75rem;\n  text-align: center; line-height: 1.2;\n  box-shadow: 0 4px 12px rgba(232,31,109,0.35);\n}\n.msl-ev-card-date-day {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 1.5rem; font-weight: 700; display: block;\n}\n.msl-ev-card-date-month {\n  font-size: 0.6rem; font-weight: 600; letter-spacing: 1.5px;\n  text-transform: uppercase; opacity: 0.9;\n}<\/p>\n<p>.msl-ev-card-past-badge {\n  position: absolute; top: 1rem; right: 1rem;\n  background: rgba(9,9,11,0.65); backdrop-filter: blur(8px);\n  color: rgba(255,255,255,0.8);\n  font-size: 0.58rem; font-weight: 600; letter-spacing: 1.5px;\n  text-transform: uppercase; padding: 0.25rem 0.65rem; border-radius: 9999px;\n}<\/p>\n<p>.msl-ev-card-body { padding: 1.5rem; }\n.msl-ev-card-cat {\n  font-size: 0.6rem; font-weight: 600; letter-spacing: 2px;\n  text-transform: uppercase; color: #E81F6D; margin-bottom: 0.5rem;\n}\n.msl-ev-card-title {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 1.3rem; font-weight: 600; color: #09090b;\n  line-height: 1.25; margin-bottom: 0.75rem;\n}\n.msl-ev-card-desc {\n  font-size: 0.78rem; color: #71717a; font-weight: 300;\n  line-height: 1.7; margin-bottom: 1rem;\n  display: -webkit-box; -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical; overflow: hidden;\n}\n.msl-ev-card-meta {\n  display: flex; flex-direction: column; gap: 0.4rem;\n  padding-top: 1rem; border-top: 1px solid #f4f4f5;\n}\n.msl-ev-card-meta-row {\n  display: flex; align-items: center; gap: 0.5rem;\n  font-size: 0.72rem; color: #a1a1aa; font-weight: 300;\n}\n.msl-ev-card-meta-row svg {\n  width: 12px; height: 12px; stroke: #E81F6D; fill: none;\n  stroke-width: 2; stroke-linecap: round; flex-shrink: 0;\n}<\/p>\n<p>\/* \u2500\u2500 EMPTY \/ LOADING \u2500\u2500 *\/\n.msl-ev-empty {\n  grid-column: span 3; text-align: center; padding: 5rem 2rem;\n}\n.msl-ev-empty-icon {\n  width: 64px; height: 64px; border-radius: 50%;\n  background: #FDEEF5; display: flex; align-items: center;\n  justify-content: center; margin: 0 auto 1.25rem;\n}\n.msl-ev-empty-icon svg {\n  width: 28px; height: 28px; stroke: #E81F6D; fill: none; stroke-width: 1.5;\n}\n.msl-ev-empty-title {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 1.5rem; font-weight: 600; color: #09090b; margin-bottom: 0.5rem;\n}\n.msl-ev-empty-desc { font-size: 0.82rem; color: #a1a1aa; font-weight: 300; }\n.msl-ev-loading {\n  grid-column: span 3; text-align: center;\n  padding: 4rem; color: #a1a1aa; font-size: 0.85rem; font-weight: 300;\n}<\/p>\n<p>\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n@media (max-width: 900px) {\n  .msl-ev-grid { grid-template-columns: repeat(2, 1fr); }\n  .msl-ev-empty, .msl-ev-loading { grid-column: span 2; }\n}\n@media (max-width: 560px) {\n  .msl-ev { padding: 4rem 4%; }\n  .msl-ev-grid { grid-template-columns: 1fr; }\n  .msl-ev-empty, .msl-ev-loading { grid-column: span 1; }\n  .msl-ev-tabs { width: 100%; }\n  .msl-ev-tab { flex: 1; justify-content: center; }\n}\n<\/style>\n<section class=\"msl-ev\">\n<div class=\"msl-ev-container\">\n<div class=\"msl-ev-header\">\n<div class=\"msl-ev-tag\"><span>Muslimaat Sheffield<\/span><\/div>\n<h2 class=\"msl-ev-title\">Our <em>Events<\/em><\/h2>\n<p class=\"msl-ev-subtitle\">Join us for workshops, drop-in sessions, Eid gatherings and more<\/p>\n<\/p><\/div>\n<div class=\"msl-ev-tabs\">\n      <button class=\"msl-ev-tab active\" id=\"mslEvTabUp\" onclick=\"mslEvSwitch('upcoming')\"><br \/>\n        <span class=\"msl-ev-tab-dot\"><\/span><br \/>\n        Upcoming<br \/>\n        <span class=\"msl-ev-tab-count\" id=\"mslEvCountUp\">\u2014<\/span><br \/>\n      <\/button><br \/>\n      <button class=\"msl-ev-tab\" id=\"mslEvTabPast\" onclick=\"mslEvSwitch('past')\"><br \/>\n        Past Events<br \/>\n        <span class=\"msl-ev-tab-count\" id=\"mslEvCountPast\" style=\"background:#a1a1aa\">\u2014<\/span><br \/>\n      <\/button>\n    <\/div>\n<div class=\"msl-ev-grid\" id=\"mslEvGrid\">\n<div class=\"msl-ev-loading\">Loading events&#8230;<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p><script>\n(function() {\n  var upcomingEvents = [];\n  var pastEvents = [];\n  var currentTab = 'upcoming';\n  var upLoaded = false;\n  var pastLoaded = false;<\/p>\n<p>  var MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];\n  var DAYS = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];<\/p>\n<p>  function todayStr() {\n    var d = new Date();\n    return d.getFullYear() + '-' +\n      String(d.getMonth()+1).padStart(2,'0') + '-' +\n      String(d.getDate()).padStart(2,'0');\n  }<\/p>\n<p>  function fetchEvents() {\n    var base = window.location.origin;\n    var today = todayStr();<\/p>\n<p>    \/* Upcoming *\/\n    fetch(base + '\/wp-json\/tribe\/events\/v1\/events?per_page=50&status=publish&start_date=' + today)\n      .then(function(r) { return r.json(); })\n      .then(function(data) {\n        upcomingEvents = data.events || [];\n        upLoaded = true;\n        document.getElementById('mslEvCountUp').textContent = upcomingEvents.length;\n        if (currentTab === 'upcoming') renderEvents(upcomingEvents, false);\n      })\n      .catch(function() {\n        upLoaded = true;\n        if (currentTab === 'upcoming') renderEmpty(false);\n      });<\/p>\n<p>    \/* Past *\/\n    fetch(base + '\/wp-json\/tribe\/events\/v1\/events?per_page=50&status=publish&end_date=' + today + '&order=DESC')\n      .then(function(r) { return r.json(); })\n      .then(function(data) {\n        pastEvents = data.events || [];\n        pastLoaded = true;\n        document.getElementById('mslEvCountPast').textContent = pastEvents.length;\n        if (currentTab === 'past') renderEvents(pastEvents, true);\n      })\n      .catch(function() {\n        pastLoaded = true;\n        if (currentTab === 'past') renderEmpty(true);\n      });\n  }<\/p>\n<p>  function renderEvents(events, isPast) {\n    var grid = document.getElementById('mslEvGrid');\n    if (!events || events.length === 0) {\n      grid.innerHTML = buildEmpty(isPast);\n      return;\n    }\n    var html = '';\n    events.forEach(function(ev) { html += buildCard(ev, isPast); });\n    grid.innerHTML = html;\n  }<\/p>\n<p>  function renderEmpty(isPast) {\n    document.getElementById('mslEvGrid').innerHTML = buildEmpty(isPast);\n  }<\/p>\n<p>  function buildCard(ev, isPast) {\n    var start = new Date(ev.start_date);\n    var day = start.getDate();\n    var month = MONTHS[start.getMonth()];\n    var year = start.getFullYear();\n    var dayName = DAYS[start.getDay()];\n    var timeStr = start.toLocaleTimeString('en-GB', { hour:'2-digit', minute:'2-digit' });<\/p>\n<p>    var imgHtml = '';\n    if (ev.image && ev.image.url) {\n      imgHtml = '<img decoding=\"async\" src=\"' + ev.image.url + '\" alt=\"' + (ev.title||'') + '\" loading=\"lazy\">';\n    } else {\n      imgHtml = '<\/p>\n<div class=\"msl-ev-card-img-placeholder\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg><\/div>\n<p>';\n    }<\/p>\n<p>    var pastBadge = isPast ? '<span class=\"msl-ev-card-past-badge\">Past<\/span>' : '';\n    var venue = ev.venue && ev.venue.venue ? ev.venue.venue : 'Muslimaat Centre, Sheffield';\n    var cat = ev.categories && ev.categories.length ? ev.categories[0].name : 'Event';\n    var desc = ev.excerpt ? ev.excerpt.replace(\/<[^>]*>\/g,'').substring(0,120) : '';\n    var url = ev.url || '#';<\/p>\n<p>    return '<a class=\"msl-ev-card\" href=\"' + url + '\">' +\n      '<\/p>\n<div class=\"msl-ev-card-img\">' +\n        imgHtml +\n        '<\/p>\n<div class=\"msl-ev-card-date-badge\">' +\n          '<span class=\"msl-ev-card-date-day\">' + day + '<\/span>' +\n          '<span class=\"msl-ev-card-date-month\">' + month + '<\/span>' +\n        '<\/div>\n<p>' +\n        pastBadge +\n      '<\/p><\/div>\n<p>' +\n      '<\/p>\n<div class=\"msl-ev-card-body\">' +\n        '<\/p>\n<div class=\"msl-ev-card-cat\">' + cat + '<\/div>\n<p>' +\n        '<\/p>\n<h3 class=\"msl-ev-card-title\">' + (ev.title || 'Untitled Event') + '<\/h3>\n<p>' +\n        (desc ? '<\/p>\n<p class=\"msl-ev-card-desc\">' + desc + '<\/p>\n<p>' : '') +\n        '<\/p>\n<div class=\"msl-ev-card-meta\">' +\n          '<\/p>\n<div class=\"msl-ev-card-meta-row\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>' + dayName + ', ' + day + ' ' + month + ' ' + year + '<\/div>\n<p>' +\n          '<\/p>\n<div class=\"msl-ev-card-meta-row\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>' + timeStr + '<\/div>\n<p>' +\n          '<\/p>\n<div class=\"msl-ev-card-meta-row\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>' + venue + '<\/div>\n<p>' +\n        '<\/p><\/div>\n<p>' +\n      '<\/p><\/div>\n<p>' +\n    '<\/a>';\n  }<\/p>\n<p>  function buildEmpty(isPast) {\n    return '<\/p>\n<div class=\"msl-ev-empty\">' +\n      '<\/p>\n<div class=\"msl-ev-empty-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg><\/div>\n<p>' +\n      '<\/p>\n<h3 class=\"msl-ev-empty-title\">' + (isPast ? 'No past events yet' : 'No upcoming events') + '<\/h3>\n<p>' +\n      '<\/p>\n<p class=\"msl-ev-empty-desc\">' + (isPast ? 'Past events will appear here.' : 'Check back soon \u2014 new events are added regularly.') + '<\/p>\n<p>' +\n    '<\/p><\/div>\n<p>';\n  }<\/p>\n<p>  window.mslEvSwitch = function(tab) {\n    currentTab = tab;\n    var tabUp = document.getElementById('mslEvTabUp');\n    var tabPast = document.getElementById('mslEvTabPast');\n    var countPast = document.getElementById('mslEvCountPast');<\/p>\n<p>    if (tab === 'upcoming') {\n      tabUp.classList.add('active');\n      tabPast.classList.remove('active');\n      countPast.style.background = '#a1a1aa';\n      renderEvents(upcomingEvents, false);\n    } else {\n      tabPast.classList.add('active');\n      tabUp.classList.remove('active');\n      countPast.style.background = '#E81F6D';\n      renderEvents(pastEvents, true);\n    }\n  };<\/p>\n<p>  fetchEvents();\n})();\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Muslimaat Sheffield Our Events Join us for workshops, drop-in sessions, Eid gatherings and more Upcoming \u2014 Past Events \u2014 Loading events&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2524","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/muslimaat.org\/ar\/wp-json\/wp\/v2\/pages\/2524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/muslimaat.org\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/muslimaat.org\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/muslimaat.org\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/muslimaat.org\/ar\/wp-json\/wp\/v2\/comments?post=2524"}],"version-history":[{"count":5,"href":"https:\/\/muslimaat.org\/ar\/wp-json\/wp\/v2\/pages\/2524\/revisions"}],"predecessor-version":[{"id":3038,"href":"https:\/\/muslimaat.org\/ar\/wp-json\/wp\/v2\/pages\/2524\/revisions\/3038"}],"wp:attachment":[{"href":"https:\/\/muslimaat.org\/ar\/wp-json\/wp\/v2\/media?parent=2524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}