Add dismissible Weekly Huddle pop-up overlay (Sept 8)
Self-contained /announce.js injects a branded, dismissible event overlay (the flyer + all four time zones + Join Google Meet button). Included on the main funnel and member pages. Auto-expires after the huddle and shows once per browser until dismissed; edit the EV block to reuse for future events. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
martbost
@@ -0,0 +1,114 @@
|
||||
/* announce.js — dismissible event pop-up overlay (RM Circle).
|
||||
Weekly one-off: edit the EV block below each week (or set enabled:false to hide).
|
||||
Self-gating: shows once per browser until dismissed, and never after `expiresUTC`. */
|
||||
(function () {
|
||||
var EV = {
|
||||
id: 'huddle-2026-09-08', // bump this when the event changes (resets dismissals)
|
||||
enabled: true,
|
||||
img: '/huddle-flyer.jpg',
|
||||
meet: 'https://meet.google.com/gsw-yhqn-zrc',
|
||||
eyebrow: 'Team RM Circle · Weekly Huddle',
|
||||
dateLabel: 'Tuesday, September 8',
|
||||
times: [
|
||||
['🇺🇸', '7:00 PM CST', 'USA / Canada'],
|
||||
['🇺🇸', '8:00 PM EST', ''],
|
||||
['🇹🇹', '8:00 PM AST', 'Caribbean'],
|
||||
['🇬🇧', '1:00 AM', 'UK']
|
||||
],
|
||||
expiresUTC: '2026-09-09T02:30:00Z' // ~9:30 PM CT Sept 8 (after the huddle ends)
|
||||
};
|
||||
|
||||
if (!EV.enabled) return;
|
||||
if (Date.now() > Date.parse(EV.expiresUTC)) return;
|
||||
var KEY = 'rmc-announce-' + EV.id;
|
||||
try { if (localStorage.getItem(KEY) === 'done') return; } catch (e) {}
|
||||
function dismiss() { try { localStorage.setItem(KEY, 'done'); } catch (e) {} close(); }
|
||||
|
||||
var back, card;
|
||||
function close() {
|
||||
if (!back) return;
|
||||
back.style.opacity = '0';
|
||||
setTimeout(function () { if (back && back.parentNode) back.parentNode.removeChild(back); back = null; }, 260);
|
||||
document.removeEventListener('keydown', onKey);
|
||||
}
|
||||
function onKey(e) { if (e.key === 'Escape') dismiss(); }
|
||||
|
||||
function build() {
|
||||
back = document.createElement('div');
|
||||
back.setAttribute('role', 'dialog');
|
||||
back.setAttribute('aria-label', 'Team RM Circle Weekly Huddle invitation');
|
||||
back.style.cssText = 'position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;' +
|
||||
'padding:20px;background:rgba(3,7,14,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);' +
|
||||
'opacity:0;transition:opacity .28s ease;overflow:auto;';
|
||||
back.addEventListener('click', function (e) { if (e.target === back) dismiss(); });
|
||||
|
||||
card = document.createElement('div');
|
||||
card.style.cssText = 'position:relative;width:100%;max-width:428px;max-height:94vh;overflow:auto;border-radius:20px;' +
|
||||
'background:#0a1119;border:1px solid rgba(212,175,55,.55);box-shadow:0 24px 70px rgba(0,0,0,.7),0 0 0 1px rgba(212,175,55,.15);' +
|
||||
'font-family:system-ui,Segoe UI,Arial,sans-serif;';
|
||||
|
||||
var x = document.createElement('button');
|
||||
x.setAttribute('aria-label', 'Close');
|
||||
x.innerHTML = '×';
|
||||
x.style.cssText = 'position:absolute;top:10px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;' +
|
||||
'background:rgba(6,10,16,.72);color:#fff;font-size:24px;line-height:1;font-weight:700;display:grid;place-items:center;' +
|
||||
'box-shadow:0 2px 10px rgba(0,0,0,.5);';
|
||||
x.addEventListener('click', dismiss);
|
||||
|
||||
var eyebrow = document.createElement('div');
|
||||
eyebrow.textContent = EV.eyebrow;
|
||||
eyebrow.style.cssText = 'text-align:center;letter-spacing:2px;text-transform:uppercase;font-size:11px;font-weight:700;' +
|
||||
'color:#d4af37;padding:14px 44px 10px;';
|
||||
|
||||
var img = document.createElement('img');
|
||||
img.src = EV.img;
|
||||
img.alt = 'You are invited — RM Circle online presentation, Tuesday 7:00 PM Central, via Google Meet';
|
||||
img.style.cssText = 'display:block;width:100%;height:auto;';
|
||||
|
||||
var foot = document.createElement('div');
|
||||
foot.style.cssText = 'padding:16px 20px 20px;';
|
||||
|
||||
var dateRow = document.createElement('div');
|
||||
dateRow.innerHTML = '🗓 <b>' + EV.dateLabel + '</b>';
|
||||
dateRow.style.cssText = 'text-align:center;color:#eef2f7;font-size:15px;margin-bottom:12px;';
|
||||
|
||||
var grid = document.createElement('div');
|
||||
grid.style.cssText = 'display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;';
|
||||
EV.times.forEach(function (t) {
|
||||
var cell = document.createElement('div');
|
||||
cell.style.cssText = 'background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.22);border-radius:10px;padding:8px 10px;';
|
||||
cell.innerHTML = '<div style="font-size:15px;font-weight:800;color:#f3c34a">' + t[1] + '</div>' +
|
||||
(t[2] ? '<div style="font-size:11px;color:#9fb0c2;margin-top:1px">' + t[2] + '</div>' : '<div style="font-size:11px;color:#9fb0c2;margin-top:1px"> </div>');
|
||||
grid.appendChild(cell);
|
||||
});
|
||||
|
||||
var join = document.createElement('a');
|
||||
join.href = EV.meet;
|
||||
join.target = '_blank';
|
||||
join.rel = 'noopener';
|
||||
join.textContent = 'Join Google Meet →';
|
||||
join.style.cssText = 'display:block;text-align:center;text-decoration:none;background:linear-gradient(180deg,#e9c249,#d4af37);' +
|
||||
'color:#0a1119;font-size:18px;font-weight:800;padding:15px;border-radius:12px;box-shadow:0 8px 22px rgba(212,175,55,.35);';
|
||||
join.addEventListener('click', function () { try { localStorage.setItem(KEY, 'done'); } catch (e) {} });
|
||||
|
||||
var link = document.createElement('div');
|
||||
link.textContent = 'meet.google.com/gsw-yhqn-zrc';
|
||||
link.style.cssText = 'text-align:center;color:#9fb0c2;font-size:13px;margin-top:10px;font-family:ui-monospace,Menlo,Consolas,monospace;';
|
||||
|
||||
var later = document.createElement('button');
|
||||
later.textContent = 'Maybe later';
|
||||
later.style.cssText = 'display:block;margin:12px auto 0;background:none;border:none;color:#7d8ea0;font-size:13px;cursor:pointer;text-decoration:underline;';
|
||||
later.addEventListener('click', dismiss);
|
||||
|
||||
foot.appendChild(dateRow); foot.appendChild(grid); foot.appendChild(join); foot.appendChild(link); foot.appendChild(later);
|
||||
card.appendChild(x); card.appendChild(eyebrow); card.appendChild(img); card.appendChild(foot);
|
||||
back.appendChild(card);
|
||||
document.body.appendChild(back);
|
||||
document.addEventListener('keydown', onKey);
|
||||
requestAnimationFrame(function () { back.style.opacity = '1'; });
|
||||
}
|
||||
|
||||
function go() { setTimeout(build, 1100); }
|
||||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', go);
|
||||
else go();
|
||||
})();
|
||||
Reference in New Issue
Block a user