Meta Ad Mock Interview \u2014 Booking<\/title><\/p>\n<style> @import url('https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap'); :root{ --ink: #14181f; --paper: #eef0ea; --line: #cdd2c4; --accent: #2451c4; --accent-soft: #dbe4fb; --accent2: #b5541f; --accent2-soft: #f3e2d4; --taken: #b8bdae; --card: #ffffff; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ background: var(--paper); color: var(--ink); font-family: 'Inter', sans-serif; padding: 40px 20px 60px; min-height: 100vh; } .wrap{ max-width: 720px; margin: 0 auto; } .masthead{ border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 24px; } .kicker{ font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 6px; } h1{ font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(30px, 5vw, 42px); line-height: 1.05; margin: 0 0 10px; letter-spacing: -0.01em; } .sub{ font-size: 15px; color: #4b5160; max-width: 50ch; line-height: 1.5; } \/* Tabs *\/ .tabs{ display:flex; gap: 8px; margin-bottom: 24px; } .tab{ flex: 1; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 14px 16px; cursor: pointer; font-family: 'Inter', sans-serif; } .tab .tab-label{ font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; margin-bottom: 3px; } .tab .tab-sub{ font-size: 12px; color: #6b7160; } .tab--online.tab--active{ border-color: var(--accent); background: var(--accent-soft); } .tab--offline.tab--active{ border-color: var(--accent2); background: var(--accent2-soft); } .meta-row{ display:flex; gap:24px; margin: 16px 0 4px; flex-wrap: wrap; } .meta-item{ font-size: 13px; color:#4b5160; } .meta-item b{ color: var(--ink); font-weight:600; } .session-note{ font-size: 13px; color: #6b7160; margin-bottom: 20px; line-height: 1.5; } .slots{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 520px){ .slots{ grid-template-columns: 1fr; } } .slot{ background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 16px 18px; display:flex; align-items:center; justify-content: space-between; gap: 10px; cursor: pointer; transition: border-color .15s ease; } .slot:hover:not(.slot--taken):not(.slot--selected){ border-color: var(--accent); } [data-mode=\"offline\"] .slot:hover:not(.slot--taken):not(.slot--selected){ border-color: var(--accent2); } .slot--selected{ border-color: var(--accent); background: var(--accent-soft); } [data-mode=\"offline\"] .slot--selected{ border-color: var(--accent2); background: var(--accent2-soft); } .slot--taken{ cursor: default; color: #7a8074; background: #f4f5f0; border-color: var(--line); } .slot--taken .time{ color: #8b9080; } .time{ font-family:'Fraunces', serif; font-weight: 600; font-size: 19px; } .status{ font-size: 12px; font-weight: 500; color: var(--accent); } [data-mode=\"offline\"] .status{ color: var(--accent2); } .slot--taken .status{ color: #9a9f8f; } .booked-name{ font-size: 11.5px; color: #7a8074; margin-top: 2px; } .panel{ margin-top: 28px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); padding: 22px; display:none; } .panel.open{ display:block; } .panel h2{ font-family:'Fraunces', serif; font-weight:600; font-size:20px; margin: 0 0 4px; } .panel .chosen{ font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 16px; } label{ display:block; font-size: 12.5px; color:#4b5160; margin-bottom: 6px; font-weight: 500; } input{ width:100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; font-family:'Inter',sans-serif; font-size: 14px; margin-bottom: 14px; background: #fbfbf9; } input:focus{ outline:none; border-color: var(--accent); } .btn{ background: var(--ink); color: #fff; border: none; padding: 11px 20px; font-size: 14px; font-weight: 500; border-radius: 3px; cursor: pointer; font-family:'Inter',sans-serif; } .btn:hover{ background: #262c38; } .btn:disabled{ background:#a7ab9d; cursor:not-allowed; } .btn-ghost{ background:none; border:none; color:#7a8074; font-size: 13px; cursor:pointer; margin-left: 12px; } .confirm{ display:none; margin-top: 28px; border: 1px solid var(--accent); border-radius: 3px; padding: 20px 22px; background: var(--accent-soft); } .confirm.open{ display:block; } .confirm h2{ font-family:'Fraunces', serif; font-size: 19px; margin: 0 0 6px; color: var(--ink); } .confirm p{ font-size: 14px; margin: 0; color:#333a2b; line-height:1.5; } .foot-note{ margin-top: 34px; font-size: 12.5px; color: #8b9080; border-top: 1px solid var(--line); padding-top: 16px; }<\/style>\n<p><\/head><body><\/p>\n<div class=\"wrap\"> <\/p>\n<div class=\"masthead\"> <\/p>\n<div class=\"kicker\">Interview Prep \u2014 Live Practice Session<\/div>\n<p> <\/p>\n<h1>Meta Ad Mock Interview<\/h1>\n<p> <\/p>\n<div class=\"sub\">Pick a session type, then a 10-minute slot. Each interview runs back-to-back with a 2-minute buffer for the interviewer between students.<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"tabs\"> <\/p>\n<div class=\"tab tab--online\" id=\"tabOnline\"> <\/p>\n<div class=\"tab-label\">Online<\/div>\n<p> <\/p>\n<div class=\"tab-sub\">9:00 \u2013 11:00 AM<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"tab tab--offline\" id=\"tabOffline\"> <\/p>\n<div class=\"tab-label\">Offline<\/div>\n<p> <\/p>\n<div class=\"tab-sub\">11:10 AM \u2013 1:00 PM<\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div id=\"sessionArea\" data-mode=\"online\"> <\/p>\n<div class=\"meta-row\"> <\/p>\n<div class=\"meta-item\"><b>Window<\/b> \u2014 <span id=\"windowLabel\"><\/span><\/div>\n<p> <\/p>\n<div class=\"meta-item\"><b>Format<\/b> \u2014 <span id=\"formatLabel\"><\/span><\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"session-note\" id=\"sessionNote\"><\/div>\n<p> <\/p>\n<div id=\"slots\" class=\"slots\"><\/div>\n<p> <\/div>\n<p> <\/p>\n<div id=\"panel\" class=\"panel\"> <\/p>\n<h2>Confirm your slot<\/h2>\n<p> <\/p>\n<div id=\"chosenLabel\" class=\"chosen\"><\/div>\n<p> <label for=\"nameInput\">Your name<\/label> <input id=\"nameInput\" type=\"text\" placeholder=\"e.g. Priya Shah\" \/> <label for=\"emailInput\">Email<\/label> <input id=\"emailInput\" type=\"email\" placeholder=\"you@example.com\" \/> <button class=\"btn\" id=\"confirmBtn\">Book this slot<\/button> <button class=\"btn-ghost\" id=\"cancelBtn\">Cancel<\/button> <\/div>\n<p> <\/p>\n<div id=\"confirm\" class=\"confirm\"> <\/p>\n<h2>You’re booked<\/h2>\n<p> <\/p>\n<p id=\"confirmText\">\n<p> <\/div>\n<p> <\/p>\n<div class=\"foot-note\">Slots are shared \u2014 once booked by a student, they’re removed for everyone else. Refresh to see the latest availability.<\/div>\n<p><\/div>\n<p><script>(function(){ function fmt(mins){ let h = Math.floor(mins\/60); let m = mins%60; const ampm = h >= 12 ? 'PM' : 'AM'; let h12 = h % 12; if(h12===0) h12=12; return h12 + ':' + String(m).padStart(2,'0') + ' ' + ampm; } \/\/ Build a run of 10-min slots with 2-min breaks, stopping once a slot \/\/ would run past windowEnd. function buildSlots(windowStart, windowEnd, prefix){ const out = []; let cursor = windowStart; while(cursor + 10 <= windowEnd){ const start = cursor; const end = cursor + 10; out.push({ id: prefix + '_' + String(start).padStart(4,'0'), label: fmt(start) + ' \u2013 ' + fmt(end) }); cursor = end + 2; } return out; } const sessions = { online: { slots: buildSlots(9*60, 11*60, 'online'), storagePrefix: 'booking:online:', windowLabel: '9:00 \u2013 11:00 AM', note: '10 slots, 10 minutes each, back to back with 2-minute breaks \u2014 fills the window exactly.' }, offline: { slots: buildSlots(11*60+10, 13*60, 'offline'), storagePrefix: 'booking:offline:', windowLabel: '11:10 AM \u2013 1:00 PM' } }; sessions.offline.note = `${sessions.offline.slots.length} slots, 10 minutes each, same 2-minute breaks between interviews \u2014 the window has 4 minutes left over after the last slot, kept as spare time for the interviewer.`; let currentMode = 'online'; let bookings = {}; \/\/ slotId -> {name} let selectedSlot = null; const slotsEl = document.getElementById('slots'); const sessionArea = document.getElementById('sessionArea'); const windowLabel = document.getElementById('windowLabel'); const formatLabel = document.getElementById('formatLabel'); const sessionNote = document.getElementById('sessionNote'); const panel = document.getElementById('panel'); const confirmPanel = document.getElementById('confirm'); const chosenLabel = document.getElementById('chosenLabel'); const confirmText = document.getElementById('confirmText'); const nameInput = document.getElementById('nameInput'); const emailInput = document.getElementById('emailInput'); const tabOnline = document.getElementById('tabOnline'); const tabOffline = document.getElementById('tabOffline'); function currentSession(){ return sessions[currentMode]; } async function loadBookings(){ const session = currentSession(); try{ const res = await window.storage.list(session.storagePrefix, true); const map = {}; if(res && res.keys){ for(const k of res.keys){ try{ const item = await window.storage.get(k, true); if(item && item.value){ const data = JSON.parse(item.value); map[data.slotId] = data; } }catch(e){ \/* skip missing *\/ } } } bookings = map; }catch(e){ bookings = {}; } render(); } function switchMode(mode){ currentMode = mode; selectedSlot = null; panel.classList.remove('open'); confirmPanel.classList.remove('open'); sessionArea.setAttribute('data-mode', mode); tabOnline.classList.toggle('tab--active', mode === 'online'); tabOffline.classList.toggle('tab--active', mode === 'offline'); const session = currentSession(); windowLabel.textContent = session.windowLabel; formatLabel.textContent = `${session.slots.length} slots, 10 min each`; sessionNote.textContent = session.note; loadBookings(); } function render(){ const session = currentSession(); slotsEl.innerHTML = ''; session.slots.forEach(s => { const taken = bookings[s.id]; const div = document.createElement('div'); div.className = 'slot' + (taken ? ' slot--taken' : '') + (selectedSlot === s.id ? ' slot--selected' : ''); div.innerHTML = ` <\/p>\n<div> <\/p>\n<div class=\"time\">${s.label}<\/div>\n<p> ${taken ? `<\/p>\n<div class=\"booked-name\">Booked by ${escapeHtml(taken.name)}<\/div>\n<p>` : ''} <\/div>\n<p> <\/p>\n<div class=\"status\">${taken ? 'Taken' : 'Available'}<\/div>\n<p> `; if(!taken){ div.addEventListener('click', () => selectSlot(s)); } slotsEl.appendChild(div); }); } function escapeHtml(str){ const d = document.createElement('div'); d.textContent = str; return d.innerHTML; } function selectSlot(s){ selectedSlot = s.id; chosenLabel.textContent = (currentMode === 'online' ? 'Online \u2014 ' : 'Offline \u2014 ') + s.label; panel.classList.add('open'); confirmPanel.classList.remove('open'); render(); panel.scrollIntoView({behavior:'smooth', block:'center'}); } document.getElementById('cancelBtn').addEventListener('click', () => { selectedSlot = null; panel.classList.remove('open'); render(); }); tabOnline.addEventListener('click', () => switchMode('online')); tabOffline.addEventListener('click', () => switchMode('offline')); document.getElementById('confirmBtn').addEventListener('click', async () => { const name = nameInput.value.trim(); const email = emailInput.value.trim(); if(!name || !email){ alert('Please enter your name and email to book.'); return; } if(!selectedSlot) return; const session = currentSession(); const btn = document.getElementById('confirmBtn'); btn.disabled = true; btn.textContent = 'Booking\u2026'; try{ const key = session.storagePrefix + selectedSlot; const existing = await window.storage.get(key, true).catch(()=>null); if(existing && existing.value){ alert('Sorry, this slot was just booked by someone else. Please pick another.'); await loadBookings(); panel.classList.remove('open'); selectedSlot = null; btn.disabled = false; btn.textContent = 'Book this slot'; return; } const data = { slotId: selectedSlot, name, email, mode: currentMode, bookedAt: new Date().toISOString() }; await window.storage.set(key, JSON.stringify(data), true); const slotObj = session.slots.find(s => s.id === selectedSlot); const modeLabel = currentMode === 'online' ? 'Online' : 'Offline'; confirmText.textContent = `${name}, you're set for the ${modeLabel} session, ${slotObj.label}. A confirmation has been noted \u2014 arrive a couple minutes early.`; confirmPanel.classList.add('open'); panel.classList.remove('open'); selectedSlot = null; nameInput.value = ''; emailInput.value = ''; await loadBookings(); }catch(e){ alert('Something went wrong booking this slot. Please try again.'); }finally{ btn.disabled = false; btn.textContent = 'Book this slot'; } }); switchMode('online');})();<\/script><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.25.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_fullwidth_code _builder_version=”4.25.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]Meta Ad Mock Interview \u2014 Booking Interview Prep \u2014 Live Practice Session Meta Ad Mock Interview Pick a session type, then a 10-minute slot. Each interview runs back-to-back with a 2-minute buffer for the interviewer between students. Online 9:00 \u2013 11:00 AM Offline 11:10 AM \u2013 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"footnotes":"","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_focuskw":"","rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":""},"class_list":["post-471","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages\/471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=471"}],"version-history":[{"count":4,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages\/471\/revisions"}],"predecessor-version":[{"id":475,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages\/471\/revisions\/475"}],"wp:attachment":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":471,"date":"2026-09-03T02:58:28","date_gmt":"2026-09-03T02:58:28","guid":{"rendered":"https:\/\/kalhonaho.online\/?page_id=471"},"modified":"2026-09-03T03:14:22","modified_gmt":"2026-09-03T03:14:22","slug":"meta-ad-mock-interview","status":"publish","type":"page","link":"https:\/\/kalhonaho.online\/?page_id=471","title":{"rendered":"Meta Ad Mock Interview"},"content":{"rendered":"

[et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.25.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_fullwidth_code _builder_version=”4.25.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]Meta Ad Mock Interview \u2014 Booking<\/title><\/p>\n<style> @import url('https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap'); :root{ --ink: #14181f; --paper: #eef0ea; --line: #cdd2c4; --accent: #2451c4; --accent-soft: #dbe4fb; --accent2: #b5541f; --accent2-soft: #f3e2d4; --taken: #b8bdae; --card: #ffffff; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ background: var(--paper); color: var(--ink); font-family: 'Inter', sans-serif; padding: 40px 20px 60px; min-height: 100vh; } .wrap{ max-width: 720px; margin: 0 auto; } .masthead{ border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 24px; } .kicker{ font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 6px; } h1{ font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(30px, 5vw, 42px); line-height: 1.05; margin: 0 0 10px; letter-spacing: -0.01em; } .sub{ font-size: 15px; color: #4b5160; max-width: 50ch; line-height: 1.5; } \/* Tabs *\/ .tabs{ display:flex; gap: 8px; margin-bottom: 24px; } .tab{ flex: 1; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 14px 16px; cursor: pointer; font-family: 'Inter', sans-serif; } .tab .tab-label{ font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; margin-bottom: 3px; } .tab .tab-sub{ font-size: 12px; color: #6b7160; } .tab--online.tab--active{ border-color: var(--accent); background: var(--accent-soft); } .tab--offline.tab--active{ border-color: var(--accent2); background: var(--accent2-soft); } .meta-row{ display:flex; gap:24px; margin: 16px 0 4px; flex-wrap: wrap; } .meta-item{ font-size: 13px; color:#4b5160; } .meta-item b{ color: var(--ink); font-weight:600; } .session-note{ font-size: 13px; color: #6b7160; margin-bottom: 20px; line-height: 1.5; } .slots{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 520px){ .slots{ grid-template-columns: 1fr; } } .slot{ background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 16px 18px; display:flex; align-items:center; justify-content: space-between; gap: 10px; cursor: pointer; transition: border-color .15s ease; } .slot:hover:not(.slot--taken):not(.slot--selected){ border-color: var(--accent); } [data-mode=\"offline\"] .slot:hover:not(.slot--taken):not(.slot--selected){ border-color: var(--accent2); } .slot--selected{ border-color: var(--accent); background: var(--accent-soft); } [data-mode=\"offline\"] .slot--selected{ border-color: var(--accent2); background: var(--accent2-soft); } .slot--taken{ cursor: default; color: #7a8074; background: #f4f5f0; border-color: var(--line); } .slot--taken .time{ color: #8b9080; } .time{ font-family:'Fraunces', serif; font-weight: 600; font-size: 19px; } .status{ font-size: 12px; font-weight: 500; color: var(--accent); } [data-mode=\"offline\"] .status{ color: var(--accent2); } .slot--taken .status{ color: #9a9f8f; } .booked-name{ font-size: 11.5px; color: #7a8074; margin-top: 2px; } .panel{ margin-top: 28px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); padding: 22px; display:none; } .panel.open{ display:block; } .panel h2{ font-family:'Fraunces', serif; font-weight:600; font-size:20px; margin: 0 0 4px; } .panel .chosen{ font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 16px; } label{ display:block; font-size: 12.5px; color:#4b5160; margin-bottom: 6px; font-weight: 500; } input{ width:100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; font-family:'Inter',sans-serif; font-size: 14px; margin-bottom: 14px; background: #fbfbf9; } input:focus{ outline:none; border-color: var(--accent); } .btn{ background: var(--ink); color: #fff; border: none; padding: 11px 20px; font-size: 14px; font-weight: 500; border-radius: 3px; cursor: pointer; font-family:'Inter',sans-serif; } .btn:hover{ background: #262c38; } .btn:disabled{ background:#a7ab9d; cursor:not-allowed; } .btn-ghost{ background:none; border:none; color:#7a8074; font-size: 13px; cursor:pointer; margin-left: 12px; } .confirm{ display:none; margin-top: 28px; border: 1px solid var(--accent); border-radius: 3px; padding: 20px 22px; background: var(--accent-soft); } .confirm.open{ display:block; } .confirm h2{ font-family:'Fraunces', serif; font-size: 19px; margin: 0 0 6px; color: var(--ink); } .confirm p{ font-size: 14px; margin: 0; color:#333a2b; line-height:1.5; } .foot-note{ margin-top: 34px; font-size: 12.5px; color: #8b9080; border-top: 1px solid var(--line); padding-top: 16px; }<\/style>\n<p><\/head><body><\/p>\n<div class=\"wrap\"> <\/p>\n<div class=\"masthead\"> <\/p>\n<div class=\"kicker\">Interview Prep \u2014 Live Practice Session<\/div>\n<p> <\/p>\n<h1>Meta Ad Mock Interview<\/h1>\n<p> <\/p>\n<div class=\"sub\">Pick a session type, then a 10-minute slot. Each interview runs back-to-back with a 2-minute buffer for the interviewer between students.<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"tabs\"> <\/p>\n<div class=\"tab tab--online\" id=\"tabOnline\"> <\/p>\n<div class=\"tab-label\">Online<\/div>\n<p> <\/p>\n<div class=\"tab-sub\">9:00 \u2013 11:00 AM<\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"tab tab--offline\" id=\"tabOffline\"> <\/p>\n<div class=\"tab-label\">Offline<\/div>\n<p> <\/p>\n<div class=\"tab-sub\">11:10 AM \u2013 1:00 PM<\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div id=\"sessionArea\" data-mode=\"online\"> <\/p>\n<div class=\"meta-row\"> <\/p>\n<div class=\"meta-item\"><b>Window<\/b> \u2014 <span id=\"windowLabel\"><\/span><\/div>\n<p> <\/p>\n<div class=\"meta-item\"><b>Format<\/b> \u2014 <span id=\"formatLabel\"><\/span><\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"session-note\" id=\"sessionNote\"><\/div>\n<p> <\/p>\n<div id=\"slots\" class=\"slots\"><\/div>\n<p> <\/div>\n<p> <\/p>\n<div id=\"panel\" class=\"panel\"> <\/p>\n<h2>Confirm your slot<\/h2>\n<p> <\/p>\n<div id=\"chosenLabel\" class=\"chosen\"><\/div>\n<p> <label for=\"nameInput\">Your name<\/label> <input id=\"nameInput\" type=\"text\" placeholder=\"e.g. Priya Shah\" \/> <label for=\"emailInput\">Email<\/label> <input id=\"emailInput\" type=\"email\" placeholder=\"you@example.com\" \/> <button class=\"btn\" id=\"confirmBtn\">Book this slot<\/button> <button class=\"btn-ghost\" id=\"cancelBtn\">Cancel<\/button> <\/div>\n<p> <\/p>\n<div id=\"confirm\" class=\"confirm\"> <\/p>\n<h2>You’re booked<\/h2>\n<p> <\/p>\n<p id=\"confirmText\">\n<p> <\/div>\n<p> <\/p>\n<div class=\"foot-note\">Slots are shared \u2014 once booked by a student, they’re removed for everyone else. Refresh to see the latest availability.<\/div>\n<p><\/div>\n<p><script>(function(){ function fmt(mins){ let h = Math.floor(mins\/60); let m = mins%60; const ampm = h >= 12 ? 'PM' : 'AM'; let h12 = h % 12; if(h12===0) h12=12; return h12 + ':' + String(m).padStart(2,'0') + ' ' + ampm; } \/\/ Build a run of 10-min slots with 2-min breaks, stopping once a slot \/\/ would run past windowEnd. function buildSlots(windowStart, windowEnd, prefix){ const out = []; let cursor = windowStart; while(cursor + 10 <= windowEnd){ const start = cursor; const end = cursor + 10; out.push({ id: prefix + '_' + String(start).padStart(4,'0'), label: fmt(start) + ' \u2013 ' + fmt(end) }); cursor = end + 2; } return out; } const sessions = { online: { slots: buildSlots(9*60, 11*60, 'online'), storagePrefix: 'booking:online:', windowLabel: '9:00 \u2013 11:00 AM', note: '10 slots, 10 minutes each, back to back with 2-minute breaks \u2014 fills the window exactly.' }, offline: { slots: buildSlots(11*60+10, 13*60, 'offline'), storagePrefix: 'booking:offline:', windowLabel: '11:10 AM \u2013 1:00 PM' } }; sessions.offline.note = `${sessions.offline.slots.length} slots, 10 minutes each, same 2-minute breaks between interviews \u2014 the window has 4 minutes left over after the last slot, kept as spare time for the interviewer.`; let currentMode = 'online'; let bookings = {}; \/\/ slotId -> {name} let selectedSlot = null; const slotsEl = document.getElementById('slots'); const sessionArea = document.getElementById('sessionArea'); const windowLabel = document.getElementById('windowLabel'); const formatLabel = document.getElementById('formatLabel'); const sessionNote = document.getElementById('sessionNote'); const panel = document.getElementById('panel'); const confirmPanel = document.getElementById('confirm'); const chosenLabel = document.getElementById('chosenLabel'); const confirmText = document.getElementById('confirmText'); const nameInput = document.getElementById('nameInput'); const emailInput = document.getElementById('emailInput'); const tabOnline = document.getElementById('tabOnline'); const tabOffline = document.getElementById('tabOffline'); function currentSession(){ return sessions[currentMode]; } async function loadBookings(){ const session = currentSession(); try{ const res = await window.storage.list(session.storagePrefix, true); const map = {}; if(res && res.keys){ for(const k of res.keys){ try{ const item = await window.storage.get(k, true); if(item && item.value){ const data = JSON.parse(item.value); map[data.slotId] = data; } }catch(e){ \/* skip missing *\/ } } } bookings = map; }catch(e){ bookings = {}; } render(); } function switchMode(mode){ currentMode = mode; selectedSlot = null; panel.classList.remove('open'); confirmPanel.classList.remove('open'); sessionArea.setAttribute('data-mode', mode); tabOnline.classList.toggle('tab--active', mode === 'online'); tabOffline.classList.toggle('tab--active', mode === 'offline'); const session = currentSession(); windowLabel.textContent = session.windowLabel; formatLabel.textContent = `${session.slots.length} slots, 10 min each`; sessionNote.textContent = session.note; loadBookings(); } function render(){ const session = currentSession(); slotsEl.innerHTML = ''; session.slots.forEach(s => { const taken = bookings[s.id]; const div = document.createElement('div'); div.className = 'slot' + (taken ? ' slot--taken' : '') + (selectedSlot === s.id ? ' slot--selected' : ''); div.innerHTML = ` <\/p>\n<div> <\/p>\n<div class=\"time\">${s.label}<\/div>\n<p> ${taken ? `<\/p>\n<div class=\"booked-name\">Booked by ${escapeHtml(taken.name)}<\/div>\n<p>` : ''} <\/div>\n<p> <\/p>\n<div class=\"status\">${taken ? 'Taken' : 'Available'}<\/div>\n<p> `; if(!taken){ div.addEventListener('click', () => selectSlot(s)); } slotsEl.appendChild(div); }); } function escapeHtml(str){ const d = document.createElement('div'); d.textContent = str; return d.innerHTML; } function selectSlot(s){ selectedSlot = s.id; chosenLabel.textContent = (currentMode === 'online' ? 'Online \u2014 ' : 'Offline \u2014 ') + s.label; panel.classList.add('open'); confirmPanel.classList.remove('open'); render(); panel.scrollIntoView({behavior:'smooth', block:'center'}); } document.getElementById('cancelBtn').addEventListener('click', () => { selectedSlot = null; panel.classList.remove('open'); render(); }); tabOnline.addEventListener('click', () => switchMode('online')); tabOffline.addEventListener('click', () => switchMode('offline')); document.getElementById('confirmBtn').addEventListener('click', async () => { const name = nameInput.value.trim(); const email = emailInput.value.trim(); if(!name || !email){ alert('Please enter your name and email to book.'); return; } if(!selectedSlot) return; const session = currentSession(); const btn = document.getElementById('confirmBtn'); btn.disabled = true; btn.textContent = 'Booking\u2026'; try{ const key = session.storagePrefix + selectedSlot; const existing = await window.storage.get(key, true).catch(()=>null); if(existing && existing.value){ alert('Sorry, this slot was just booked by someone else. Please pick another.'); await loadBookings(); panel.classList.remove('open'); selectedSlot = null; btn.disabled = false; btn.textContent = 'Book this slot'; return; } const data = { slotId: selectedSlot, name, email, mode: currentMode, bookedAt: new Date().toISOString() }; await window.storage.set(key, JSON.stringify(data), true); const slotObj = session.slots.find(s => s.id === selectedSlot); const modeLabel = currentMode === 'online' ? 'Online' : 'Offline'; confirmText.textContent = `${name}, you're set for the ${modeLabel} session, ${slotObj.label}. A confirmation has been noted \u2014 arrive a couple minutes early.`; confirmPanel.classList.add('open'); panel.classList.remove('open'); selectedSlot = null; nameInput.value = ''; emailInput.value = ''; await loadBookings(); }catch(e){ alert('Something went wrong booking this slot. Please try again.'); }finally{ btn.disabled = false; btn.textContent = 'Book this slot'; } }); switchMode('online');})();<\/script><\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.25.0″ _module_preset=”default” global_colors_info=”{}”][et_pb_fullwidth_code _builder_version=”4.25.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]Meta Ad Mock Interview \u2014 Booking Interview Prep \u2014 Live Practice Session Meta Ad Mock Interview Pick a session type, then a 10-minute slot. Each interview runs back-to-back with a 2-minute buffer for the interviewer between students. Online 9:00 \u2013 11:00 AM Offline 11:10 AM \u2013 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"footnotes":"","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_focuskw":"","rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":""},"class_list":["post-471","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages\/471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=471"}],"version-history":[{"count":4,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages\/471\/revisions"}],"predecessor-version":[{"id":475,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages\/471\/revisions\/475"}],"wp:attachment":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}