Classes Browser<\/title>\r\n <style>\r\n body{font-family:system-ui,-apple-system,sans-serif;background:#f8f9fa;margin:0;padding:40px 20px;color:#222;}\r\n .container{max-width:1200px;margin:0 auto;}\r\n h1{ text-align:center; margin:0 0 22px; font-size:2rem; }\r\n\r\n .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}\r\n .card{background:#fff;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.08);transition:.25s;cursor:pointer;overflow:hidden;}\r\n .card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.12);}\r\n .card-content{padding:18px 20px;}\r\n .card h3{margin:0 0 8px;font-size:1.2rem;white-space:normal;word-break:break-word;}\r\n .card p{margin:0;color:#666;font-size:.95rem;line-height:1.45;}\r\n\r\n .panel{display:none;margin-top:26px;padding:22px;background:#f0f4f8;border-radius:12px;box-shadow:inset 0 2px 8px rgba(0,0,0,.05);}\r\n .panel.open{display:block;}\r\n\r\n .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}\r\n\r\n .titleblock{\r\n flex: 1;\r\n text-align:center;\r\n color:#1c2b3a;\r\n line-height:1.25;\r\n font-weight:700;\r\n font-size:1.1rem;\r\n }\r\n .titleblock .big{ font-weight:800; font-size:1.25rem; }\r\n\r\n .back-btn{padding:8px 14px;background:#007bff;color:#fff;border:none;border-radius:8px;cursor:pointer;}\r\n .back-btn:hover{background:#0056b3;}\r\n\r\n .days-grid{\r\n display:grid;\r\n grid-template-columns:repeat(7, minmax(120px, 1fr));\r\n gap:14px;\r\n align-items:start;\r\n margin-top:10px;\r\n }\r\n .day-col{background:transparent;}\r\n .day-head{\r\n background:#0696d6;\r\n color:#fff;\r\n font-weight:800;\r\n text-align:center;\r\n padding:12px 8px;\r\n border-radius:6px;\r\n letter-spacing:.5px;\r\n font-size:.95rem;\r\n text-transform:uppercase;\r\n }\r\n\r\n .class-box{\r\n margin-top:12px;\r\n border-radius:6px;\r\n overflow:hidden;\r\n border:1px solid rgba(0,0,0,.12);\r\n background:#e9e9e9;\r\n }\r\n .class-status{\r\n background:#238b2a;\r\n color:#fff;\r\n font-weight:700;\r\n text-align:center;\r\n padding:8px 6px;\r\n font-size:.9rem;\r\n }\r\n .class-status.full{background:#8b2323;}\r\n\r\n .class-body{\r\n padding:14px 12px;\r\n text-align:left;\r\n font-size:.95rem;\r\n color:#111;\r\n line-height:1.35;\r\n }\r\n\r\n .line{margin:6px 0;font-weight:400;}\r\n\r\n \/* \u2705 Reduce font size for time\/fee\/coach *\/\r\n .class-value{\r\n font-size:0.85rem; \/* smaller *\/\r\n font-weight:800; \/* still bold *\/\r\n display:block;\r\n }\r\n\r\n .class-actions{\r\n padding:10px;\r\n display:flex;\r\n justify-content:center;\r\n background:#f6f6f6;\r\n border-top:1px solid rgba(0,0,0,.08);\r\n }\r\n\r\n .btn{\r\n padding:8px 12px;border-radius:8px;border:1px solid rgba(0,0,0,.12);\r\n background:#fff;cursor:pointer;font-weight:600;text-decoration:none;color:#111;\r\n }\r\n .btn.primary{background:#198754;color:#fff;border-color:#198754;}\r\n .btn.primary:hover{filter:brightness(.95);}\r\n\r\n @media(max-width:980px){ .days-grid{grid-template-columns:repeat(2, 1fr);} }\r\n @media(max-width:520px){ .days-grid{grid-template-columns:1fr;} }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n<div class=\"container\">\r\n <h1>Fins Classes<\/h1>\r\n\r\n <div id=\"level1\" class=\"grid\"><\/div>\r\n\r\n <div id=\"level2Panel\" class=\"panel\">\r\n <div class=\"topbar\">\r\n <button class=\"back-btn\" id=\"backToLevel1\">Back<\/button>\r\n <div class=\"titleblock\" id=\"crumb2\"><\/div>\r\n <div style=\"width:76px;\"><\/div>\r\n <\/div>\r\n <div id=\"level2\" class=\"grid\"><\/div>\r\n <\/div>\r\n\r\n <div id=\"level3Panel\" class=\"panel\">\r\n <div class=\"topbar\">\r\n <button class=\"back-btn\" id=\"backToLevel2\">Back<\/button>\r\n <div class=\"titleblock\" id=\"crumb3\"><\/div>\r\n <div style=\"width:76px;\"><\/div>\r\n <\/div>\r\n <div id=\"daysGrid\" class=\"days-grid\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const API_URL = \"https:\/\/wholesale.activatedemos.com\/wp-content\/plugins\/JackrabbitClasses\/getdb-classes.php?lcode=CY\";\r\n const DAYS = [\"Sunday\",\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\",\"Saturday\"];\r\n\r\n let data = [];\r\n let selectedCategory2 = null;\r\n let selectedCategory3 = null;\r\n\r\n const level1El = document.getElementById(\"level1\");\r\n const level2Panel = document.getElementById(\"level2Panel\");\r\n const level2El = document.getElementById(\"level2\");\r\n const crumb2 = document.getElementById(\"crumb2\");\r\n\r\n const level3Panel = document.getElementById(\"level3Panel\");\r\n const crumb3 = document.getElementById(\"crumb3\");\r\n const daysGridEl = document.getElementById(\"daysGrid\");\r\n\r\n document.getElementById(\"backToLevel1\").onclick = () => {\r\n level2Panel.classList.remove(\"open\");\r\n level3Panel.classList.remove(\"open\");\r\n daysGridEl.innerHTML = \"\";\r\n level1El.style.display = \"grid\";\r\n selectedCategory2 = null;\r\n selectedCategory3 = null;\r\n };\r\n\r\n document.getElementById(\"backToLevel2\").onclick = () => {\r\n level3Panel.classList.remove(\"open\");\r\n daysGridEl.innerHTML = \"\";\r\n openLevel2(selectedCategory2);\r\n };\r\n\r\n function uniq(arr){ return [...new Set(arr)]; }\r\n\r\n function makeCard(title, subtitle){\r\n const el = document.createElement(\"div\");\r\n el.className = \"card\";\r\n el.innerHTML = `\r\n <div class=\"card-content\">\r\n <h3>${escapeHtml(title)}<\/h3>\r\n <p>${escapeHtml(subtitle || \"\")}<\/p>\r\n <\/div>\r\n `;\r\n return el;\r\n }\r\n\r\n function formatTime12h(t){\r\n if(!t) return \"-\";\r\n const [hh, mm] = String(t).split(\":\");\r\n let h = parseInt(hh,10);\r\n const ampm = h >= 12 ? \"PM\" : \"AM\";\r\n h = h % 12; if(h === 0) h = 12;\r\n return `${h}:${mm}${ampm}`;\r\n }\r\n\r\n function renderLevel1(){\r\n level1El.innerHTML = \"\";\r\n const cat2List = uniq(data.map(r => r.category2)).sort();\r\n cat2List.forEach(cat2 => {\r\n const card = makeCard(cat2, \"\");\r\n card.onclick = () => openLevel2(cat2);\r\n level1El.appendChild(card);\r\n });\r\n }\r\n\r\n function openLevel2(cat2){\r\n selectedCategory2 = cat2;\r\n selectedCategory3 = null;\r\n\r\n level1El.style.display = \"none\";\r\n level2Panel.classList.add(\"open\");\r\n level3Panel.classList.remove(\"open\");\r\n daysGridEl.innerHTML = \"\";\r\n\r\n crumb2.innerHTML = `<div class=\"big\">${escapeHtml(cat2)}<\/div>`;\r\n\r\n level2El.innerHTML = \"\";\r\n const cat3List = uniq(data.filter(r => r.category2 === cat2).map(r => r.category3)).sort();\r\n cat3List.forEach(cat3 => {\r\n const card = makeCard(cat3, \"\");\r\n card.onclick = () => openLevel3(cat3);\r\n level2El.appendChild(card);\r\n });\r\n }\r\n\r\n function openLevel3(cat3){\r\n selectedCategory3 = cat3;\r\n\r\n level2Panel.classList.remove(\"open\");\r\n level3Panel.classList.add(\"open\");\r\n daysGridEl.innerHTML = \"\";\r\n\r\n crumb3.innerHTML = `\r\n <h2 class=\"hdr-h2\">${escapeHtml(selectedCategory2)}<\/h2>\r\n <h3 class=\"hdr-h3\">${escapeHtml(cat3)}<\/h3>\r\n `;\r\n\r\n const rows = data.filter(r => r.category2 === selectedCategory2 && r.category3 === cat3);\r\n renderDaysGrid(rows);\r\n }\r\n\r\n function renderDaysGrid(rows){\r\n const byDay = {};\r\n DAYS.forEach(d => byDay[d] = []);\r\n\r\n rows.forEach(r => {\r\n const days = String(r.meeting_days_text || \"\")\r\n .split(\",\")\r\n .map(s => s.trim())\r\n .filter(Boolean);\r\n\r\n days.forEach(d => {\r\n if(byDay[d]) byDay[d].push(r);\r\n });\r\n });\r\n\r\n DAYS.forEach(d => {\r\n byDay[d].sort((a,b) => String(a.start_time||\"\").localeCompare(String(b.start_time||\"\")));\r\n });\r\n\r\n daysGridEl.innerHTML = DAYS.map(day => {\r\n const tiles = (byDay[day] || []).map(cls => {\r\n const openingsVal = cls.calculated_openings ?? cls.openings ?? null;\r\n const isOpen = openingsVal === null ? true : Number(openingsVal) > 0;\r\n\r\n const startText = formatTime12h(cls.start_time);\r\n const endText = formatTime12h(cls.end_time);\r\n const timeRange = `${startText} - ${endText}`;\r\n\r\n const feeVal = cls.tuition_fee ?? cls.tution_fee ?? cls.fee ?? null;\r\n const hasFee = feeVal !== null && feeVal !== \"\" && !Number.isNaN(Number(feeVal));\r\n const feeText = hasFee ? `$${feeVal}` : \"\";\r\n\r\n const coachText = cls.instructors_text ?? cls.coach_name ?? cls.instructor ?? \"\";\r\n\r\n const registerUrlRaw = cls.register_url || cls.online_reg_link || \"#\";\r\n const registerUrl = String(registerUrlRaw).replaceAll(\"&\", \"&\");\r\n\r\n return `\r\n <div class=\"class-box\">\r\n <div class=\"class-status ${isOpen ? \"\" : \"full\"}\">${isOpen ? \"Open\" : \"Full\"}<\/div>\r\n <div class=\"class-body\">\r\n \r\n <div class=\"line\"><span class=\"class-value\">${escapeHtml(timeRange)}<\/span><\/div>\r\n ${hasFee ? `<div class=\"line\"><span class=\"class-value\">${escapeHtml(feeText)}<\/span><\/div>` : ``}\r\n ${coachText ? `<div class=\"line\"><span class=\"class-value\">${escapeHtml(coachText)}<\/span><\/div>` : ``}\r\n\r\n \r\n <\/div>\r\n <div class=\"class-actions\">\r\n <a class=\"btn primary\" href=\"${escapeAttr(registerUrl)}\" target=\"_blank\" rel=\"noopener\">Register<\/a>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join(\"\");\r\n\r\n return `\r\n <div class=\"day-col\">\r\n <div class=\"day-head\">${escapeHtml(day)}<\/div>\r\n ${tiles || `<div style=\"margin-top:12px;color:#777;text-align:center;font-size:.9rem;\">No classes<\/div>`}\r\n <\/div>\r\n `;\r\n }).join(\"\");\r\n }\r\n\r\n function escapeHtml(str){\r\n return String(str ?? \"\")\r\n .replaceAll(\"&\",\"&\").replaceAll(\"<\",\"<\").replaceAll(\">\",\">\")\r\n .replaceAll('\"',\""\").replaceAll(\"'\",\"'\");\r\n }\r\n function escapeAttr(str){\r\n return escapeHtml(str).replaceAll(\"`\",\"`\");\r\n }\r\n\r\n fetch(API_URL)\r\n .then(r => r.json())\r\n .then(rows => {\r\n data = rows || [];\r\n renderLevel1();\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n level1El.innerHTML = \"<p>Failed to load classes. Check API URL.<\/p>\";\r\n });\r\n<\/script>\r\n<\/body>\r\n<\/html>\n\n\n\n<pre class=\"wp-block-preformatted\"><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-25964","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=\/wp\/v2\/posts\/25964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25964"}],"version-history":[{"count":4,"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=\/wp\/v2\/posts\/25964\/revisions"}],"predecessor-version":[{"id":25969,"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=\/wp\/v2\/posts\/25964\/revisions\/25969"}],"wp:attachment":[{"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":25964,"date":"2026-02-26T08:19:50","date_gmt":"2026-02-26T08:19:50","guid":{"rendered":"https:\/\/wholesale.activatedemos.com\/?p=25964"},"modified":"2026-02-26T11:23:02","modified_gmt":"2026-02-26T11:23:02","slug":"cypress","status":"publish","type":"post","link":"https:\/\/wholesale.activatedemos.com\/?p=25964","title":{"rendered":"Cypress"},"content":{"rendered":"\n\r\n\r\n\r\n \r\n \r\n Classes Browser<\/title>\r\n <style>\r\n body{font-family:system-ui,-apple-system,sans-serif;background:#f8f9fa;margin:0;padding:40px 20px;color:#222;}\r\n .container{max-width:1200px;margin:0 auto;}\r\n h1{ text-align:center; margin:0 0 22px; font-size:2rem; }\r\n\r\n .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}\r\n .card{background:#fff;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.08);transition:.25s;cursor:pointer;overflow:hidden;}\r\n .card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.12);}\r\n .card-content{padding:18px 20px;}\r\n .card h3{margin:0 0 8px;font-size:1.2rem;white-space:normal;word-break:break-word;}\r\n .card p{margin:0;color:#666;font-size:.95rem;line-height:1.45;}\r\n\r\n .panel{display:none;margin-top:26px;padding:22px;background:#f0f4f8;border-radius:12px;box-shadow:inset 0 2px 8px rgba(0,0,0,.05);}\r\n .panel.open{display:block;}\r\n\r\n .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}\r\n\r\n .titleblock{\r\n flex: 1;\r\n text-align:center;\r\n color:#1c2b3a;\r\n line-height:1.25;\r\n font-weight:700;\r\n font-size:1.1rem;\r\n }\r\n .titleblock .big{ font-weight:800; font-size:1.25rem; }\r\n\r\n .back-btn{padding:8px 14px;background:#007bff;color:#fff;border:none;border-radius:8px;cursor:pointer;}\r\n .back-btn:hover{background:#0056b3;}\r\n\r\n .days-grid{\r\n display:grid;\r\n grid-template-columns:repeat(7, minmax(120px, 1fr));\r\n gap:14px;\r\n align-items:start;\r\n margin-top:10px;\r\n }\r\n .day-col{background:transparent;}\r\n .day-head{\r\n background:#0696d6;\r\n color:#fff;\r\n font-weight:800;\r\n text-align:center;\r\n padding:12px 8px;\r\n border-radius:6px;\r\n letter-spacing:.5px;\r\n font-size:.95rem;\r\n text-transform:uppercase;\r\n }\r\n\r\n .class-box{\r\n margin-top:12px;\r\n border-radius:6px;\r\n overflow:hidden;\r\n border:1px solid rgba(0,0,0,.12);\r\n background:#e9e9e9;\r\n }\r\n .class-status{\r\n background:#238b2a;\r\n color:#fff;\r\n font-weight:700;\r\n text-align:center;\r\n padding:8px 6px;\r\n font-size:.9rem;\r\n }\r\n .class-status.full{background:#8b2323;}\r\n\r\n .class-body{\r\n padding:14px 12px;\r\n text-align:left;\r\n font-size:.95rem;\r\n color:#111;\r\n line-height:1.35;\r\n }\r\n\r\n .line{margin:6px 0;font-weight:400;}\r\n\r\n \/* \u2705 Reduce font size for time\/fee\/coach *\/\r\n .class-value{\r\n font-size:0.85rem; \/* smaller *\/\r\n font-weight:800; \/* still bold *\/\r\n display:block;\r\n }\r\n\r\n .class-actions{\r\n padding:10px;\r\n display:flex;\r\n justify-content:center;\r\n background:#f6f6f6;\r\n border-top:1px solid rgba(0,0,0,.08);\r\n }\r\n\r\n .btn{\r\n padding:8px 12px;border-radius:8px;border:1px solid rgba(0,0,0,.12);\r\n background:#fff;cursor:pointer;font-weight:600;text-decoration:none;color:#111;\r\n }\r\n .btn.primary{background:#198754;color:#fff;border-color:#198754;}\r\n .btn.primary:hover{filter:brightness(.95);}\r\n\r\n @media(max-width:980px){ .days-grid{grid-template-columns:repeat(2, 1fr);} }\r\n @media(max-width:520px){ .days-grid{grid-template-columns:1fr;} }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n<div class=\"container\">\r\n <h1>Fins Classes<\/h1>\r\n\r\n <div id=\"level1\" class=\"grid\"><\/div>\r\n\r\n <div id=\"level2Panel\" class=\"panel\">\r\n <div class=\"topbar\">\r\n <button class=\"back-btn\" id=\"backToLevel1\">Back<\/button>\r\n <div class=\"titleblock\" id=\"crumb2\"><\/div>\r\n <div style=\"width:76px;\"><\/div>\r\n <\/div>\r\n <div id=\"level2\" class=\"grid\"><\/div>\r\n <\/div>\r\n\r\n <div id=\"level3Panel\" class=\"panel\">\r\n <div class=\"topbar\">\r\n <button class=\"back-btn\" id=\"backToLevel2\">Back<\/button>\r\n <div class=\"titleblock\" id=\"crumb3\"><\/div>\r\n <div style=\"width:76px;\"><\/div>\r\n <\/div>\r\n <div id=\"daysGrid\" class=\"days-grid\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const API_URL = \"https:\/\/wholesale.activatedemos.com\/wp-content\/plugins\/JackrabbitClasses\/getdb-classes.php?lcode=CY\";\r\n const DAYS = [\"Sunday\",\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\",\"Saturday\"];\r\n\r\n let data = [];\r\n let selectedCategory2 = null;\r\n let selectedCategory3 = null;\r\n\r\n const level1El = document.getElementById(\"level1\");\r\n const level2Panel = document.getElementById(\"level2Panel\");\r\n const level2El = document.getElementById(\"level2\");\r\n const crumb2 = document.getElementById(\"crumb2\");\r\n\r\n const level3Panel = document.getElementById(\"level3Panel\");\r\n const crumb3 = document.getElementById(\"crumb3\");\r\n const daysGridEl = document.getElementById(\"daysGrid\");\r\n\r\n document.getElementById(\"backToLevel1\").onclick = () => {\r\n level2Panel.classList.remove(\"open\");\r\n level3Panel.classList.remove(\"open\");\r\n daysGridEl.innerHTML = \"\";\r\n level1El.style.display = \"grid\";\r\n selectedCategory2 = null;\r\n selectedCategory3 = null;\r\n };\r\n\r\n document.getElementById(\"backToLevel2\").onclick = () => {\r\n level3Panel.classList.remove(\"open\");\r\n daysGridEl.innerHTML = \"\";\r\n openLevel2(selectedCategory2);\r\n };\r\n\r\n function uniq(arr){ return [...new Set(arr)]; }\r\n\r\n function makeCard(title, subtitle){\r\n const el = document.createElement(\"div\");\r\n el.className = \"card\";\r\n el.innerHTML = `\r\n <div class=\"card-content\">\r\n <h3>${escapeHtml(title)}<\/h3>\r\n <p>${escapeHtml(subtitle || \"\")}<\/p>\r\n <\/div>\r\n `;\r\n return el;\r\n }\r\n\r\n function formatTime12h(t){\r\n if(!t) return \"-\";\r\n const [hh, mm] = String(t).split(\":\");\r\n let h = parseInt(hh,10);\r\n const ampm = h >= 12 ? \"PM\" : \"AM\";\r\n h = h % 12; if(h === 0) h = 12;\r\n return `${h}:${mm}${ampm}`;\r\n }\r\n\r\n function renderLevel1(){\r\n level1El.innerHTML = \"\";\r\n const cat2List = uniq(data.map(r => r.category2)).sort();\r\n cat2List.forEach(cat2 => {\r\n const card = makeCard(cat2, \"\");\r\n card.onclick = () => openLevel2(cat2);\r\n level1El.appendChild(card);\r\n });\r\n }\r\n\r\n function openLevel2(cat2){\r\n selectedCategory2 = cat2;\r\n selectedCategory3 = null;\r\n\r\n level1El.style.display = \"none\";\r\n level2Panel.classList.add(\"open\");\r\n level3Panel.classList.remove(\"open\");\r\n daysGridEl.innerHTML = \"\";\r\n\r\n crumb2.innerHTML = `<div class=\"big\">${escapeHtml(cat2)}<\/div>`;\r\n\r\n level2El.innerHTML = \"\";\r\n const cat3List = uniq(data.filter(r => r.category2 === cat2).map(r => r.category3)).sort();\r\n cat3List.forEach(cat3 => {\r\n const card = makeCard(cat3, \"\");\r\n card.onclick = () => openLevel3(cat3);\r\n level2El.appendChild(card);\r\n });\r\n }\r\n\r\n function openLevel3(cat3){\r\n selectedCategory3 = cat3;\r\n\r\n level2Panel.classList.remove(\"open\");\r\n level3Panel.classList.add(\"open\");\r\n daysGridEl.innerHTML = \"\";\r\n\r\n crumb3.innerHTML = `\r\n <h2 class=\"hdr-h2\">${escapeHtml(selectedCategory2)}<\/h2>\r\n <h3 class=\"hdr-h3\">${escapeHtml(cat3)}<\/h3>\r\n `;\r\n\r\n const rows = data.filter(r => r.category2 === selectedCategory2 && r.category3 === cat3);\r\n renderDaysGrid(rows);\r\n }\r\n\r\n function renderDaysGrid(rows){\r\n const byDay = {};\r\n DAYS.forEach(d => byDay[d] = []);\r\n\r\n rows.forEach(r => {\r\n const days = String(r.meeting_days_text || \"\")\r\n .split(\",\")\r\n .map(s => s.trim())\r\n .filter(Boolean);\r\n\r\n days.forEach(d => {\r\n if(byDay[d]) byDay[d].push(r);\r\n });\r\n });\r\n\r\n DAYS.forEach(d => {\r\n byDay[d].sort((a,b) => String(a.start_time||\"\").localeCompare(String(b.start_time||\"\")));\r\n });\r\n\r\n daysGridEl.innerHTML = DAYS.map(day => {\r\n const tiles = (byDay[day] || []).map(cls => {\r\n const openingsVal = cls.calculated_openings ?? cls.openings ?? null;\r\n const isOpen = openingsVal === null ? true : Number(openingsVal) > 0;\r\n\r\n const startText = formatTime12h(cls.start_time);\r\n const endText = formatTime12h(cls.end_time);\r\n const timeRange = `${startText} - ${endText}`;\r\n\r\n const feeVal = cls.tuition_fee ?? cls.tution_fee ?? cls.fee ?? null;\r\n const hasFee = feeVal !== null && feeVal !== \"\" && !Number.isNaN(Number(feeVal));\r\n const feeText = hasFee ? `$${feeVal}` : \"\";\r\n\r\n const coachText = cls.instructors_text ?? cls.coach_name ?? cls.instructor ?? \"\";\r\n\r\n const registerUrlRaw = cls.register_url || cls.online_reg_link || \"#\";\r\n const registerUrl = String(registerUrlRaw).replaceAll(\"&\", \"&\");\r\n\r\n return `\r\n <div class=\"class-box\">\r\n <div class=\"class-status ${isOpen ? \"\" : \"full\"}\">${isOpen ? \"Open\" : \"Full\"}<\/div>\r\n <div class=\"class-body\">\r\n \r\n <div class=\"line\"><span class=\"class-value\">${escapeHtml(timeRange)}<\/span><\/div>\r\n ${hasFee ? `<div class=\"line\"><span class=\"class-value\">${escapeHtml(feeText)}<\/span><\/div>` : ``}\r\n ${coachText ? `<div class=\"line\"><span class=\"class-value\">${escapeHtml(coachText)}<\/span><\/div>` : ``}\r\n\r\n \r\n <\/div>\r\n <div class=\"class-actions\">\r\n <a class=\"btn primary\" href=\"${escapeAttr(registerUrl)}\" target=\"_blank\" rel=\"noopener\">Register<\/a>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join(\"\");\r\n\r\n return `\r\n <div class=\"day-col\">\r\n <div class=\"day-head\">${escapeHtml(day)}<\/div>\r\n ${tiles || `<div style=\"margin-top:12px;color:#777;text-align:center;font-size:.9rem;\">No classes<\/div>`}\r\n <\/div>\r\n `;\r\n }).join(\"\");\r\n }\r\n\r\n function escapeHtml(str){\r\n return String(str ?? \"\")\r\n .replaceAll(\"&\",\"&\").replaceAll(\"<\",\"<\").replaceAll(\">\",\">\")\r\n .replaceAll('\"',\""\").replaceAll(\"'\",\"'\");\r\n }\r\n function escapeAttr(str){\r\n return escapeHtml(str).replaceAll(\"`\",\"`\");\r\n }\r\n\r\n fetch(API_URL)\r\n .then(r => r.json())\r\n .then(rows => {\r\n data = rows || [];\r\n renderLevel1();\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n level1El.innerHTML = \"<p>Failed to load classes. Check API URL.<\/p>\";\r\n });\r\n<\/script>\r\n<\/body>\r\n<\/html>\n\n\n\n<pre class=\"wp-block-preformatted\"><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-25964","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=\/wp\/v2\/posts\/25964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25964"}],"version-history":[{"count":4,"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=\/wp\/v2\/posts\/25964\/revisions"}],"predecessor-version":[{"id":25969,"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=\/wp\/v2\/posts\/25964\/revisions\/25969"}],"wp:attachment":[{"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wholesale.activatedemos.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}