/* MOXIE x Equals Amsterdam - Vibe Coding Session Thursday 28 May 2026, Equals Amsterdam. Built on Mission Relearn slide-deck-basics template. */ const { useEffect, useState } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "showLayoutLabels": false, "language": "NL", "accent": "coral" }/*EDITMODE-END*/; function useSlides(tweaks) { const lang = tweaks.language || "EN"; const t = (en, nl) => (lang === "NL" ? nl : en); return [ // 1. COVER { label: "01 Cover", section: "Cover", render: () => ( ), }, // 2. FROM FEAR TO CONTROL { label: "02 From fear to control", section: "Why we are here", render: (i, n) => ( ), }, // 3. AUTONOMY { label: "03 Autonomy", section: "Why we are here", render: (i, n) => ( ), }, // 4. AI IS NOT ONE THING { label: "04 AI is fluid", section: "Reframe", render: (i, n) => ( ), }, // 5. WHAT I BUILT IN 3 MONTHS { label: "05 What I built", section: "Build log", render: (i, n) => ( ), }, // 6. KEY MESSAGE { label: "06 Key message", section: "Build log", render: (i, n) => ( ), }, // 7. TODAY'S PROMISE { label: "07 Today's promise", section: "Outputs", render: (i, n) => ( ), }, // 8. 10 TIPS DIVIDER { label: "08 10 tips divider", section: "Divider", render: (i, n) => ( ), }, // 9. TIPS 1-2 RESEARCH & INSIGHT { label: "09 Tips 1-2", section: "10 tips", render: (i, n) => ( ), }, // 10. TIPS 3-4 PLAN BEFORE YOU SPEND { label: "10 Tips 3-4", section: "10 tips", render: (i, n) => ( ), }, // 11. TIPS 5-6 MAKE IT LOOK LIKE YOU MEANT IT { label: "11 Tips 5-6", section: "10 tips", render: (i, n) => ( ), }, // 12. TIPS 7-8 BUILD SMALL LEARN FAST { label: "12 Tips 7-8", section: "10 tips", render: (i, n) => ( ), }, // 13. TIPS 9-10 SHIP BEFORE YOU ARE READY { label: "13 Tips 9-10", section: "10 tips", render: (i, n) => ( ), }, // 14. FAIL = FIRST ATTEMPT IN LEARNING { label: "14 FAIL", section: "Reframe", render: (i, n) => ( ), }, // 15. WHAT COULD YOU BUILD IN 30 MINUTES { label: "15 What could you build", section: "Build time", render: (i, n) => ( ), }, // 16. SAFETY & ETHICS { label: "16 Safety and ethics", section: "Before you ship", render: (i, n) => ( ), }, // 17. START HERE (three steps + starter prompts) { label: "17 Start here", section: "Build time", render: (i, n) => { const steps = [ t("Open your laptop.", "Open je laptop."), t("Pick a starter prompt below.", "Kies een starter prompt hieronder."), t("Paste it into ChatGPT or Claude. Ask for a PRD plus follow-up questions to sharpen the idea.", "Plak hem in ChatGPT of Claude. Vraag om een PRD plus vervolgvragen om je idee aan te scherpen."), t("Paste the PRD into lovable.dev. GO.", "Plak de PRD in lovable.dev. GO."), ]; const prompts = [ { label: t("Personal homepage", "Persoonlijke homepage"), body: "Build a one-page personal homepage. My name, one paragraph about what I do, three things I'm proud of, and a contact link. Modern minimal." }, { label: t("Habit tracker", "Habit tracker"), body: "Build a simple habit tracker. One habit, checkbox per day, calendar view that shows my streak. Save in localStorage." }, { label: t("Birthday quiz", "Verjaardagsquiz"), body: "Build a 10-question quiz about my friend [name]. One question per screen, score at the end. Playful design." }, { label: t("Tiny work tool", "Tiny work tool"), body: "Build a tool that takes names + emails in a textarea and exports them as a CSV. One button, clear instructions." }, ]; return (
{t("BUILD TIME", "BOUW TIJD")}
25 MIN

{t("Start", "Start")} {t("here.", "hier.")}

    {steps.map((step, k) => (
  1. {String(k + 1).padStart(2, "0")} {step}
    2. ))}
{t("PICK A STARTER PROMPT", "KIES EEN STARTER PROMPT")}
{prompts.map((p, k) => (
{p.label}
{p.body}
))}
Build time · Start here
); }, }, // 18. QR · TAKE THE SLIDES HOME { label: "18 Slides + feedback", section: "Closing", render: (i, n) => (
{t("BEFORE YOU GO", "VOOR JE GAAT")}

{t("Scan, fill in,", "Scan, vul in,")} {t("get the slides.", "krijg de slides.")}

    {[ t("Scan the QR with your phone camera.", "Scan de QR met je telefooncamera."), t("Two minutes of feedback. Optional testimonial.", "Twee minuten feedback. Testimonial mag, hoeft niet."), t("Hit submit and the slides land in your inbox.", "Klik verzenden en de slides komen in je inbox."), ].map((step, k) => (
  1. {String(k + 1).padStart(2, "0")} {step}
    2. ))}
{t("Cannot scan? Go to ", "Lukt scannen niet? Ga naar ")} tinyurl.com/moxie-slides
QR to MOXIE feedback form
{t("Feedback + slides", "Feedback + slides")}
QR · Feedback + slides
), }, // 19. LET'S BUILD (closing) { label: "19 Let's build", section: "Closing", render: (i, n) => ( ), }, ]; } /* ---------------- TWEAKS PANEL ---------------- */ function Tweaks() { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); return ( setTweak("language", v)} options={[{ value: "EN", label: "EN" }, { value: "NL", label: "NL" }]} /> setTweak("showLayoutLabels", v)} /> ); } /* Inject Fullscreen + Edit-mode buttons into deck-stage's overlay (auto-hides with rest of nav). */ function installEditModeButton() { // Wait for deck-stage and its shadow overlay const stage = document.querySelector("deck-stage"); if (!stage || !stage.shadowRoot) { setTimeout(installEditModeButton, 100); return; } const overlay = stage.shadowRoot.querySelector(".overlay"); if (!overlay) { setTimeout(installEditModeButton, 100); return; } if (overlay.querySelector(".mr-injected-edit")) return; // Fullscreen helpers function isFullscreen() { return !!(document.fullscreenElement || document.webkitFullscreenElement); } function toggleFs() { if (isFullscreen()) { const exit = document.exitFullscreen || document.webkitExitFullscreen; if (exit) exit.call(document); } else { const el = document.documentElement; const req = el.requestFullscreen || el.webkitRequestFullscreen; if (req) req.call(el); } } // Add divider + fullscreen + edit buttons to existing overlay toolbar const divider = document.createElement("span"); divider.className = "divider"; overlay.appendChild(divider); const fsBtn = document.createElement("button"); fsBtn.className = "btn reset mr-injected-fs"; fsBtn.type = "button"; fsBtn.setAttribute("aria-label", "Fullscreen aan/uit (F)"); fsBtn.setAttribute("title", "Fullscreen aan/uit (toets: F)"); fsBtn.innerHTML = 'FullscreenF'; fsBtn.addEventListener("click", toggleFs); overlay.appendChild(fsBtn); const editBtn = document.createElement("button"); editBtn.className = "btn reset mr-injected-edit"; editBtn.type = "button"; editBtn.setAttribute("aria-label", "Edit mode aan/uit (E)"); editBtn.setAttribute("title", "Edit mode aan/uit (toets: E)"); editBtn.innerHTML = 'EditE'; overlay.appendChild(editBtn); const exportBtn = document.createElement("button"); exportBtn.className = "btn reset mr-injected-export"; exportBtn.type = "button"; exportBtn.setAttribute("aria-label", "Exporteer wijzigingen naar clipboard (X)"); exportBtn.setAttribute("title", "Exporteer wijzigingen naar clipboard (toets: X)"); exportBtn.innerHTML = 'ExportX'; overlay.appendChild(exportBtn); async function exportEdits() { const edits = collectEdits(); const text = formatEdits(edits); try { await navigator.clipboard.writeText(text); if (edits.length === 0) { showToast("Geen wijzigingen sinds edit-mode aanstond."); } else { const total = edits.reduce((n, e) => n + e.changes.length, 0); showToast(total + " wijziging" + (total === 1 ? "" : "en") + " op " + edits.length + " slide" + (edits.length === 1 ? "" : "s") + " gekopieerd naar clipboard."); } } catch (err) { showToast("Clipboard mislukt: " + err.message, true); console.log("[export]", text); } } exportBtn.addEventListener("click", exportEdits); // Custom styling for active edit-mode button (shadow DOM scoped) const styleTag = document.createElement("style"); styleTag.textContent = ` .mr-injected-edit[data-on="1"] { background: rgba(237,112,89,0.95); color: #fff; } .mr-injected-edit[data-on="1"] .kbd { background: rgba(255,255,255,0.22); color: #fff; } .mr-injected-edit[data-on="1"]:hover { background: rgba(237,112,89,1); } `; stage.shadowRoot.appendChild(styleTag); let editOn = false; const setMode = (on) => { editOn = on; document.body.classList.toggle("edit-mode", on); applyEditMode(on); editBtn.setAttribute("data-on", on ? "1" : "0"); editBtn.innerHTML = (on ? "Klaar" : "Edit") + 'E'; }; editBtn.addEventListener("click", () => setMode(!editOn)); // Keyboard shortcuts (skip when typing) document.addEventListener("keydown", (e) => { if (e.target && (e.target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName))) return; if (e.key === "e" || e.key === "E") { e.preventDefault(); setMode(!editOn); } else if (e.key === "f" || e.key === "F") { e.preventDefault(); toggleFs(); } else if (e.key === "x" || e.key === "X") { e.preventDefault(); exportEdits(); } }); } /* Walk DOM, mark every element with direct text content as editable + snapshot originals. */ function applyEditMode(on) { const stage = document.querySelector("deck-stage"); if (!stage) return; stage.querySelectorAll("section").forEach(section => { section.querySelectorAll("*").forEach(el => { // Skip non-text-bearing tags if (/^(SCRIPT|STYLE|SVG|PATH|RECT|CIRCLE|LINE|POLYLINE|POLYGON|G|USE|DEFS|IMG)$/i.test(el.tagName)) return; // An element is text-bearing if it has at least one direct text-node child with non-empty content const hasDirectText = Array.from(el.childNodes).some( n => n.nodeType === 3 && n.textContent.trim().length > 0 ); if (!hasDirectText) return; if (on) { el.setAttribute("contenteditable", "plaintext-only"); el.classList.add("mr-edit"); if (!("originalText" in el.dataset)) { el.dataset.originalText = el.textContent; } } else { el.removeAttribute("contenteditable"); el.classList.remove("mr-edit"); // Keep data-original-text so Export still works after toggling off. } }); }); } /* Collect every snapshotted element whose text differs from original (works even when edit-mode is off). */ function collectEdits() { const stage = document.querySelector("deck-stage"); if (!stage) return []; const out = []; stage.querySelectorAll("section").forEach(section => { const label = section.getAttribute("data-label") || "(no label)"; const changed = Array.from(section.querySelectorAll("[data-original-text]")) .filter(el => el.dataset.originalText !== el.textContent); // Drop ancestors when a descendant also reports a change (the descendant is more specific). const final = changed.filter(el => !changed.some(o => o !== el && el.contains(o))); const changes = final.map(el => ({ orig: el.dataset.originalText, curr: el.textContent })); if (changes.length) out.push({ label, changes }); }); return out; } function formatEdits(edits) { if (!edits.length) return "Geen wijzigingen sinds edit-mode aanstond."; const lines = ["# MOXIE deck — exported edits", "# Datum: " + new Date().toISOString().slice(0, 16).replace("T", " "), ""]; edits.forEach(({ label, changes }) => { lines.push("## " + label); changes.forEach(({ orig, curr }) => { lines.push("OUD: " + JSON.stringify(orig)); lines.push("NIEUW: " + JSON.stringify(curr)); lines.push(""); }); }); return lines.join("\n"); } function showToast(message, isError = false) { let toast = document.getElementById("mr-toast"); if (toast) toast.remove(); toast = document.createElement("div"); toast.id = "mr-toast"; toast.textContent = message; Object.assign(toast.style, { position: "fixed", top: "60px", left: "50%", transform: "translateX(-50%)", padding: "12px 22px", background: isError ? "#dc2626" : "#1D2237", color: "#fff", fontFamily: "var(--font-body)", fontSize: "14px", fontWeight: "600", borderRadius: "9999px", boxShadow: "0 8px 28px rgba(0,0,0,0.25)", zIndex: "2147483647", pointerEvents: "none", maxWidth: "80vw", textAlign: "center", }); document.body.appendChild(toast); setTimeout(() => { toast.style.opacity = "0"; toast.style.transition = "opacity 300ms"; }, 2400); setTimeout(() => toast.remove(), 2800); } /* ---------------- MAIN APP ---------------- */ function App() { const [tweaks] = useTweaks(TWEAK_DEFAULTS); const slides = useSlides(tweaks); useEffect(() => { const stage = document.querySelector("deck-stage"); if (!stage) return; stage.innerHTML = ""; const total = slides.length; slides.forEach((slide, i) => { const sec = document.createElement("section"); sec.setAttribute("data-label", slide.label); stage.appendChild(sec); const root = ReactDOM.createRoot(sec); root.render(slide.render(i + 1, total)); }); setTimeout(() => { if (window.lucide) window.lucide.createIcons(); // Re-apply edit-mode after re-render if it is currently on applyEditMode(document.body.classList.contains("edit-mode")); installEditModeButton(); }, 80); }, [tweaks.language, tweaks.accent]); useEffect(() => { document.body.classList.toggle("hide-labels", !tweaks.showLayoutLabels); }, [tweaks.showLayoutLabels]); return ; } const tweaksRoot = document.createElement("div"); document.body.appendChild(tweaksRoot); ReactDOM.createRoot(tweaksRoot).render();