npm - @nebularstreams/overlay-sdk - Versions diffs - 1.0.0 - Mend

@nebularstreams/overlay-sdk 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (133) hide show

package/templates/games/trivia/lightning-round/index.html ADDED Viewed

@@ -0,0 +1,126 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Lightning Round</title>
+    <style>
+        * { box-sizing: border-box; }
+        html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
+        body { --accent: #ff4e71; color: white; font-family: Inter, Arial, sans-serif; }
+        .round { position: absolute; left: 4%; right: 4%; bottom: 4%; display: grid; grid-template-columns: 220px 1fr 210px; min-height: 225px; overflow: hidden; border-radius: 26px; background: rgba(15,13,25,.97); border: 2px solid #ffffff24; box-shadow: 0 24px 70px #000b; transition: opacity .35s ease, transform .35s ease; }
+        .round.hidden { opacity: 0; transform: translateY(35px); }
+        .brand, .clock { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
+        .brand { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 80%, #241025), #191426); text-align: center; }
+        .bolt { font-size: 59px; line-height: 1; }
+        .title { margin-top: 12px; font-size: 20px; font-weight: 950; letter-spacing: .12em; }
+        .content { display: flex; flex-direction: column; justify-content: center; padding: 28px 40px; }
+        .meta { margin-bottom: 10px; color: var(--accent); font-size: 19px; font-weight: 900; letter-spacing: .16em; }
+        .copy { font-size: 43px; line-height: 1.13; font-weight: 850; text-wrap: balance; }
+        .answer .copy { color: color-mix(in srgb, var(--accent) 70%, white); }
+        .clock { border-left: 2px solid #ffffff18; }
+        .seconds { font-variant-numeric: tabular-nums; font-size: 82px; line-height: .9; font-weight: 950; }
+        .unit { margin-top: 11px; font-size: 17px; font-weight: 850; letter-spacing: .15em; color: #ffffffa5; }
+        .phase { margin-top: 19px; padding: 7px 13px; border-radius: 999px; background: var(--accent); color: #170c12; font-size: 18px; font-weight: 950; letter-spacing: .1em; }
+        .seconds, .unit { transition: opacity .2s ease; }
+        .clock.answer .seconds, .clock.answer .unit { opacity: 0; }
+        .clock.answer .phase { margin-top: 0; font-size: 22px; }
+    </style>
+</head>
+<body>
+<section class="round" id="round">
+    <aside class="brand"><div class="bolt">⚡</div><div class="title" id="title">LIGHTNING ROUND</div></aside>
+    <main class="content question" id="content"><div class="meta" id="meta">QUESTION 1 OF 3</div><div class="copy" id="copy">Capital of Japan?</div></main>
+    <aside class="clock"><div class="seconds" id="seconds">10</div><div class="unit">SECONDS</div><div class="phase" id="phase">QUESTION</div></aside>
+</section>
+<script>
+    const state = {
+        questions: [{question: "Capital of Japan?", answer: "Tokyo"}, {question: "Fastest land animal?", answer: "Cheetah"}, {question: "Square root of 144?", answer: "12"}],
+        index: 0,
+        phase: "question",
+        remaining: 10,
+        timing: {questionSeconds: 10, answerSeconds: 4, gapSeconds: 2},
+        status: "paused",
+        tick: performance.now()
+    };
+    const dom = {
+        body: document.body,
+        round: document.getElementById("round"),
+        title: document.getElementById("title"),
+        content: document.getElementById("content"),
+        meta: document.getElementById("meta"),
+        copy: document.getElementById("copy"),
+        clock: document.querySelector(".clock"),
+        seconds: document.getElementById("seconds"),
+        phase: document.getElementById("phase")
+    };
+    let lastVisualSignature;
+    const duration = (name) => Math.max(name === "gapSeconds" ? 0 : .25, Number(state.timing[name]) || 0);
+    function beginPhase(phase) {
+        state.phase = phase;
+        state.remaining = duration(`${phase}Seconds`);
+    }
+    function advance() {
+        if (state.phase === "question") beginPhase("answer");
+        else if (state.phase === "answer") beginPhase("gap");
+        else {
+            state.index = state.questions.length ? (state.index + 1) % state.questions.length : 0;
+            beginPhase("question");
+        }
+    }
+    function render() {
+        const count = state.questions.length;
+        state.index = Math.max(0, Math.min(count - 1, state.index));
+        const item = state.questions[state.index] || {question: "Ready?", answer: ""};
+        const answer = state.phase !== "question" ;
+        const displayedSeconds = state.phase === "question" ? Math.max(0, Math.ceil(state.remaining)) : null;
+        const visualSignature = JSON.stringify([state.phase, state.index, count, item.question, item.answer, displayedSeconds]);
+        if (visualSignature === lastVisualSignature) return;
+        lastVisualSignature = visualSignature;
+        dom.round.classList.toggle("hidden", state.phase === "gap" || count === 0);
+        dom.meta.textContent = `${answer ? "ANSWER" : "QUESTION"} ${count ? state.index + 1 : 0} OF ${count}`;
+        dom.copy.textContent = answer ? item.answer : item.question;
+        dom.content.className = `content ${answer ? "answer" : "question"}`;
+        dom.clock.classList.toggle("answer", answer);
+        if (displayedSeconds != null) dom.seconds.textContent = displayedSeconds;
+        dom.phase.textContent = answer ? "ANSWER" : "QUESTION";
+        window.invalidate?.();
+    }
+    function animate(now) {
+        const elapsed = (now - state.tick) / 1000; state.tick = now;
+        if (state.status === "running" && state.questions.length) {
+            state.remaining -= elapsed;
+            while (state.remaining <= 0) {
+                const overrun = -state.remaining;
+                advance();
+                state.remaining -= overrun;
+            }
+            render();
+        }
+        requestAnimationFrame(animate);
+    }
+    window.addEventListener("nebular-overlay:update", ({detail = {}}) => {
+        let questionsChanged = false;
+        let timingChanged = false;
+        if (Array.isArray(detail.questions)) {
+            state.questions = detail.questions;
+            state.index = 0;
+            questionsChanged = true;
+        }
+        if (detail.timing?.questionSeconds != null) { state.timing.questionSeconds = detail.timing.questionSeconds; timingChanged = true; }
+        if (detail.timing?.answerSeconds != null) { state.timing.answerSeconds = detail.timing.answerSeconds; timingChanged = true; }
+        if (detail.timing?.gapSeconds != null) { state.timing.gapSeconds = detail.timing.gapSeconds; timingChanged = true; }
+        if (detail.timer?.status != null) state.status = detail.timer.status;
+        if (questionsChanged) beginPhase("question");
+        else if (timingChanged && state.status === "paused") state.remaining = duration(`${state.phase}Seconds`);
+        if (detail.content?.title != null) dom.title.textContent = detail.content.title;
+        if (detail.style?.accent != null) dom.body.style.setProperty("--accent", detail.style.accent);
+        state.tick = performance.now(); render();
+    });
+    render(); requestAnimationFrame(animate);
+</script>
+</body>
+</html>

package/templates/games/trivia/lightning-round/manifest.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "instructions": "Build the question-and-answer deck and configure the question, answer and hidden-gap durations. Set Playback to running and press Update to start the automatic loop; select paused to freeze it at its current phase.",
+  "meta": {
+    "content/title": {"type": "string", "phase": "edit", "label": "Round title", "hint": "Enter round title", "default": "LIGHTNING ROUND"},
+    "questions": {
+      "type": "set",
+      "phase": "edit",
+      "label": "Questions", "hint": "Ordered question-and-answer cards used by the automatic loop",
+      "max": 30,
+      "container": "big",
+      "default": [
+        {"question": "Capital of Japan?", "answer": "Tokyo"},
+        {"question": "Fastest land animal?", "answer": "Cheetah"},
+        {"question": "Square root of 144?", "answer": "12"}
+      ],
+      "meta": {
+        "question": {"type": "string", "phase": "edit", "label": "Question", "hint": "Enter question"},
+        "answer": {"type": "string", "phase": "edit", "label": "Answer", "hint": "Enter answer"}
+      }
+    },
+    "timing/questionSeconds": {"type": "number", "phase": "edit", "label": "Question time", "hint": "Enter seconds", "min": 1, "max": 300, "default": 10},
+    "timing/answerSeconds": {"type": "number", "phase": "edit", "label": "Answer time", "hint": "Enter seconds", "min": 1, "max": 60, "default": 5},
+    "timing/gapSeconds": {"type": "number", "phase": "edit", "label": "Hidden gap", "hint": "Enter seconds", "min": 0, "max": 30, "default": 5},
+    "timer/status": {"type": "choose", "phase": "play", "label": "Playback", "hint": "Start or pause automatic question playback", "choose": ["running", "paused"], "default": "paused"},
+    "style/accent": {"type": "color", "phase": "edit", "label": "Accent", "hint": "Accent colour used by the round graphic", "default": "#ff4e71"}
+  }
+}

package/templates/games/trivia/pasapalabra/index.html ADDED Viewed

@@ -0,0 +1,249 @@
+<!doctype html>
+<html lang="es">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        * {
+            box-sizing: border-box
+        }
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            overflow: hidden;
+            background: transparent;
+            font-family: Inter, Arial, sans-serif
+        }
+        body {
+            color: #fff
+        }
+        .game {
+            position: relative;
+            width: 100%;
+            height: 100%
+        }
+        .letters {
+            position: absolute;
+            inset: 0;
+            aspect-ratio: 1 / 1;
+            height: 900px;
+            left: calc(50% - 450px);
+            top: calc(50% - 450px);
+        }
+        .letter {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            display: grid;
+            place-items: center;
+            width: 4.25rem;
+            height: 4.25rem;
+            border: .22rem solid #8cddff;
+            border-radius: 50%;
+            color: #fff;
+            background: linear-gradient(145deg, #198ee8, #0758b4);
+            box-shadow: 0 .55rem 1.2rem #0008, inset 0 .14rem .4rem #ffffff4a, 0 0 1rem #159cff55;
+            font-size: 1.75rem;
+            font-weight: 950;
+            transform: translate(-50%, -50%);
+            transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease
+        }
+        .letter.correct {
+            border-color: #a9ffd1;
+            background: linear-gradient(145deg, #24cf75, #087b42);
+            box-shadow: 0 .55rem 1.2rem #0008, inset 0 .14rem .4rem #ffffff52, 0 0 1.4rem #20e77d99
+        }
+        .letter.failed {
+            border-color: #ffc1c6;
+            background: linear-gradient(145deg, #f34657, #a80e23);
+            box-shadow: 0 .55rem 1.2rem #0008, inset 0 .14rem .4rem #ffffff45, 0 0 1.4rem #ff334d88
+        }
+        .answers-label {
+            color: #8bcce9;
+            font-size: .86rem;
+            font-weight: 850;
+            letter-spacing: .32em
+        }
+        .clock, .answers-holder {
+            --progress: 1;
+            position: absolute;
+            display: grid;
+            place-items: center;
+            width: 10rem;
+            height: 10rem;
+            margin: 1.35rem auto 1rem;
+            border-radius: 50%;
+            background: conic-gradient(white, calc(var(--progress) * 1turn), #132b45 0);
+            filter: drop-shadow(0 0 1.5rem #159cff55);
+            bottom: 0;
+            left: 2rem;
+        }
+        .clock::before {
+            content: "";
+            position: absolute;
+            inset: .8rem;
+            border-radius: inherit;
+            background: radial-gradient(circle at 50% 35%, orange, #ff4400 72%);
+            border: .1rem solid #a5e7ff55;
+        }
+        .seconds {
+            position: relative;
+            font-size: 5rem;
+            font-weight: 950;
+            font-variant-numeric: tabular-nums;
+            line-height: 1
+        }
+        .clock-status {
+            min-height: 1.3rem;
+            color: #62d2ff;
+            font-size: .9rem;
+            font-weight: 850;
+            letter-spacing: .28em;
+            margin: 1rem;
+            position: absolute;
+        }
+        .divider {
+            height: .1rem;
+            margin: 2rem 0;
+            background: linear-gradient(90deg, transparent, #7cdcff66, transparent)
+        }
+        #answers {
+            background: #00aa00;
+            width: 5rem;
+            height: 5rem;
+            border-radius: 10000px;
+            line-height: 5rem;
+            text-align: center;
+            font-weight: bold;
+        }
+        .answers-holder {
+            left: 11rem;
+            width: 6rem;
+            height: 6rem;
+            color: white;
+            font-size: 2.5rem;
+            bottom: 1.5rem;
+            z-index: -1;
+        }
+    </style>
+</head>
+<body>
+<main class="game">
+    <section class="halo">
+        <div class="letters" id="letters"></div>
+    </section>
+    <div class="clock" id="clock">
+        <div class="seconds" id="seconds">60</div>
+    </div>
+    <div class="answers-holder">
+        <div class="answers" id="answers">0</div>
+    </div>
+    <div class="clock-status" id="clock-status">PAUSA</div>
+</main>
+<script>
+	const
+		LETTERS = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "Ñ", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
+		$ = id => document.getElementById(id),
+		cells = new Map();
+	let
+		correct = new Set(),
+		failed = new Set(),
+		remaining = Number($("seconds").textContent),
+		total = remaining,
+		running = false,
+		startedAt = 0,
+		startedWith = remaining,
+		animationGeneration = 0;
+	LETTERS.forEach((letter, index) => {
+		const
+			angle = (index / LETTERS.length) * Math.PI * 2 - Math.PI / 2,
+			cell = document.createElement("div");
+		cell.className = "letter";
+		cell.textContent = letter;
+		cell.style.left = `${50 + Math.cos(angle) * 43}%`;
+		cell.style.top = `${50 + Math.sin(angle) * 43}%`;
+		$("letters").append(cell);
+		cells.set(letter, cell)
+	});
+	function renderLetters() {
+		cells.forEach((cell, letter) => {
+			cell.classList.toggle("correct", correct.has(letter));
+			cell.classList.toggle("failed", !correct.has(letter) && failed.has(letter));
+		});
+		$("answers").textContent = correct.size
+	}
+	function renderClock() {
+		$("seconds").textContent = Math.max(0, Math.ceil(remaining));
+		$("clock").style.setProperty("--progress", total > 0 ? Math.max(0, remaining / total) : 0);
+		$("clock-status").textContent = remaining <= 0 ? "FIN" : running ? "EN MARCHA" : "PAUSA"
+	}
+	function readElapsed(now = performance.now()) {
+		if (running) remaining = Math.max(0, startedWith - (now - startedAt) / 1000);
+		return remaining
+	}
+	function animateClock(generation) {
+		if (!running || generation !== animationGeneration) return;
+		readElapsed();
+		if (remaining <= 0) running = false;
+		renderClock();
+		if (running) requestAnimationFrame(() => animateClock(generation))
+	}
+	function setSeconds(value) {
+		remaining = Math.max(0, Number(value) || 0);
+		total = Math.max(remaining, 1);
+		startedWith = remaining;
+		startedAt = performance.now();
+		renderClock()
+	}
+	function setClockStatus(status) {
+		const shouldRun = status === "running" && remaining > 0;
+		readElapsed();
+		running = shouldRun;
+		animationGeneration++;
+		if (running) {
+			startedWith = remaining;
+			startedAt = performance.now();
+			requestAnimationFrame(() => animateClock(animationGeneration))
+		} else renderClock()
+	}
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (Array.isArray(detail.game?.correct)) correct = new Set(detail.game.correct.map(String));
+		if (Array.isArray(detail.game?.failed)) failed = new Set(detail.game.failed.map(String));
+		if (Array.isArray(detail.game?.correct) || Array.isArray(detail.game?.failed)) renderLetters();
+		if (detail.timer?.seconds != null) setSeconds(detail.timer.seconds);
+		if (detail.timer?.status != null) setClockStatus(detail.timer.status)
+	});
+</script>
+</body>
+</html>

package/templates/games/trivia/pasapalabra/manifest.json ADDED Viewed

@@ -0,0 +1,68 @@
+{
+  "instructions": "Set the available time, mark letters as correct or failed as answers are given, and use the clock control to run or pause the countdown. Press Update after each game-state change. Use Reset game to clear all answers, restore 60 seconds and pause the clock, then press Update.",
+  "meta": {
+    "timer/seconds": {
+      "type": "number",
+      "phase": "edit",
+      "label": "Time", "hint": "Enter seconds",
+      "container": "small",
+      "min": 0,
+      "max": 600,
+      "default": 60
+    },
+    "timer/status": {
+      "type": "choose",
+      "phase": "play",
+      "label": "Clock", "hint": "Start or pause the game clock",
+      "choose": [
+        "running",
+        "paused"
+      ],
+      "default": "paused"
+    },
+    "game/correct": {
+      "type": "multi",
+      "phase": "play",
+      "container": "big",
+      "label": "Correct answers", "hint": "Letters answered correctly",
+      "choose": [
+        "A", "B", "C", "D", "E", "F", "G", "H", "I",
+        "J", "K", "L", "M", "N", "Ñ", "O", "P", "Q",
+        "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
+      ],
+      "cols": 9,
+      "rows": 3,
+      "responsive": true,
+      "minCellWidth": "2.54rem",
+      "default": []
+    },
+    "game/failed": {
+      "type": "multi",
+      "phase": "play",
+      "container": "big",
+      "label": "Failed answers", "hint": "Letters answered incorrectly",
+      "choose": [
+        "A", "B", "C", "D", "E", "F", "G", "H", "I",
+        "J", "K", "L", "M", "N", "Ñ", "O", "P", "Q",
+        "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
+      ],
+      "cols": 9,
+      "rows": 3,
+      "responsive": true,
+      "minCellWidth": "2.54rem",
+      "default": []
+    },
+    "game/reset": {
+      "type": "reset",
+      "phase": "play",
+      "icon": "undo",
+      "text": "Reset game", "hint": "Clear all answers and return the clock to its initial state",
+      "values": {
+        "timer/seconds": 60,
+        "timer/status": "paused",
+        "game/correct": [],
+        "game/failed": []
+      }
+    }
+  }
+}

package/templates/games/trivia/quiz-deck/index.html ADDED Viewed

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Quiz Deck</title>
+    <style>
+        * { box-sizing: border-box; }
+        html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
+        body { --accent: #7c5cff; color: white; font-family: Inter, Arial, sans-serif; }
+        .deck { position: absolute; left: 5%; right: 5%; bottom: 5%; display: grid; grid-template-columns: 230px 1fr; min-height: 235px; border-radius: 25px; overflow: hidden; background: rgba(12,13,25,.96); border: 2px solid #ffffff22; box-shadow: 0 22px 65px #000a; }
+        .rail { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; background: linear-gradient(155deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #080918)); text-align: center; }
+        .count { font-size: 67px; line-height: 1; font-weight: 950; }
+        .total { margin-top: 8px; font-size: 18px; font-weight: 800; letter-spacing: .12em; opacity: .82; }
+        .title { margin-top: 20px; font-size: 18px; font-weight: 950; letter-spacing: .1em; }
+        .card { display: flex; flex-direction: column; justify-content: center; padding: 28px 42px; }
+        .eyebrow { margin-bottom: 12px; color: var(--accent); font-size: 20px; font-weight: 900; letter-spacing: .18em; }
+        .copy { font-size: 44px; line-height: 1.14; font-weight: 850; text-wrap: balance; transition: opacity .18s ease, transform .18s ease; }
+        .answer .eyebrow::after { content: "ANSWER"; }
+        .question .eyebrow::after { content: "QUESTION"; }
+        .answer .copy { color: color-mix(in srgb, var(--accent) 70%, white); }
+    </style>
+</head>
+<body>
+<section class="deck" id="deck">
+    <aside class="rail"><div class="count" id="current">1</div><div class="total" id="total">OF 3</div><div class="title" id="title">THE BIG QUIZ</div></aside>
+    <main class="card question" id="card"><div class="eyebrow"></div><div class="copy" id="copy">What is the largest ocean on Earth?</div></main>
+</section>
+<script>
+    const state = {
+        questions: [
+            {question: "What is the largest ocean on Earth?", answer: "The Pacific Ocean"},
+            {question: "How many sides does a dodecagon have?", answer: "12"},
+            {question: "Which element has the symbol Au?", answer: "Gold"}
+        ],
+        current: 1, display: "question"
+    };
+    function render() {
+        const count = state.questions.length;
+        const index = Math.max(0, Math.min(count - 1, Number(state.current || 1) - 1));
+        const item = state.questions[index] || {question: "Ready for the next question?", answer: ""};
+        const answer = state.display === "answer";
+        document.getElementById("current").textContent = count ? index + 1 : 0;
+        document.getElementById("total").textContent = `OF ${count}`;
+        document.getElementById("copy").textContent = answer ? item.answer : item.question;
+        document.getElementById("card").className = `card ${answer ? "answer" : "question"}`;
+    }
+    window.addEventListener("nebular-overlay:update", ({detail = {}}) => {
+        if (Array.isArray(detail.questions)) state.questions = detail.questions;
+        if (detail.control?.current != null) state.current = detail.control.current;
+        if (detail.control?.display != null) state.display = detail.control.display;
+        if (detail.content?.title != null) document.getElementById("title").textContent = detail.content.title;
+        if (detail.style?.accent != null) document.body.style.setProperty("--accent", detail.style.accent);
+        render();
+    });
+    render();
+</script>
+</body>
+</html>

package/templates/games/trivia/quiz-deck/manifest.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "instructions": "Build the question-and-answer deck, select the current question number and publish it in question mode. Switch Display to answer and press Update when the answer should be revealed.",
+  "meta": {
+    "content/title": {"type": "string", "phase": "edit", "label": "Quiz title", "hint": "Enter quiz title", "default": "THE BIG QUIZ"},
+    "questions": {
+      "type": "set",
+      "phase": "edit",
+      "label": "Question deck", "hint": "Ordered collection of questions and possible answers",
+      "max": 20,
+      "container": "big",
+      "default": [
+        {"question": "What is the largest ocean on Earth?", "answer": "The Pacific Ocean"},
+        {"question": "How many sides does a dodecagon have?", "answer": "12"},
+        {"question": "Which element has the symbol Au?", "answer": "Gold"}
+      ],
+      "meta": {
+        "question": {"type": "string", "phase": "edit", "label": "Question", "hint": "Enter question"},
+        "answer": {"type": "string", "phase": "edit", "label": "Answer", "hint": "Enter answer"}
+      }
+    },
+    "control/current": {"label": "Current question", "phase": "play", "type": "selector", "set": "questions"},
+    "control/display": {"type": "choose", "phase": "play", "label": "Display", "hint": "Choose which part of the current card viewers see", "choose": ["question", "answer"], "default": "question"},
+    "style/accent": {"type": "color", "phase": "edit", "label": "Accent", "hint": "Accent colour used by the quiz graphic", "default": "#7c5cff"}
+  }
+}

package/templates/games/trivia/true-or-false/index.html ADDED Viewed

@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>True or False</title>
+    <style>
+        * { box-sizing: border-box; }
+        html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
+        body { --accent: #19d3ae; color: #fff; font-family: Inter, Arial, sans-serif; }
+        .panel { position: absolute; left: 5%; right: 5%; bottom: 5%; padding: 25px 30px 28px; border-radius: 26px; background: rgba(7,17,22,.96); border: 2px solid #ffffff24; box-shadow: 0 24px 64px #000a; transition: opacity .35s ease, transform .35s ease; }
+        .panel.hidden { opacity: 0; transform: translateY(35px); }
+        .header { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
+        .category { padding: 9px 16px; border-radius: 999px; color: #071613; background: var(--accent); font-size: 20px; font-weight: 950; letter-spacing: .12em; }
+        .statement { font-size: 39px; line-height: 1.14; font-weight: 850; text-wrap: balance; }
+        .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+        .choice { display: grid; place-items: center; height: 82px; border: 2px solid #ffffff22; border-radius: 17px; background: #ffffff0a; font-size: 34px; font-weight: 950; letter-spacing: .08em; transition: .35s ease; }
+        .revealed .choice:not(.correct) { opacity: .25; }
+        .revealed .choice.correct { color: #071613; background: var(--accent); border-color: white; box-shadow: 0 0 32px color-mix(in srgb, var(--accent) 50%, transparent); }
+        .explanation { display: none; margin-top: 15px; color: #d9fff7; font-size: 25px; font-weight: 650; }
+        .revealed .explanation { display: block; }
+    </style>
+</head>
+<body>
+<section class="panel" id="panel">
+    <div class="header"><span class="category" id="category">SCIENCE</span><div class="statement" id="statement">Lightning never strikes the same place twice.</div></div>
+    <div class="choices"><div class="choice" data-choice="true">TRUE</div><div class="choice" data-choice="false">FALSE</div></div>
+    <div class="explanation" id="explanation">Lightning can strike the same place repeatedly.</div>
+</section>
+<script>
+    const state = {
+        questions: [
+            {category: "SCIENCE", statement: "Lightning never strikes the same place twice.", correct: "false", explanation: "Lightning can strike the same place repeatedly."},
+            {category: "GEOGRAPHY", statement: "The Great Wall of China is visible from the Moon with the naked eye.", correct: "false", explanation: "It is far too narrow to be distinguished from the Moon."},
+            {category: "NATURE", statement: "Octopuses have three hearts.", correct: "true", explanation: "Two pump blood to the gills and one pumps it around the body."}
+        ],
+        current: 1,
+        timing: {questionSeconds: 8, answerSeconds: 4},
+        timers: []
+    };
+    const dom = {
+        body: document.body,
+        panel: document.getElementById("panel"),
+        category: document.getElementById("category"),
+        statement: document.getElementById("statement"),
+        explanation: document.getElementById("explanation"),
+        choices: [...document.querySelectorAll("[data-choice]")]
+    };
+    const seconds = (value, fallback) => Math.max(.25, Number(value) || fallback);
+    function clearSequence() {
+        state.timers.forEach(clearTimeout);
+        state.timers = [];
+    }
+    function startCurrentQuestion() {
+        clearSequence();
+        const index = Math.max(0, Math.min(state.questions.length - 1, Number(state.current || 1) - 1));
+        const question = state.questions[index];
+        if (!question) { dom.panel.classList.add("hidden"); return; }
+        dom.category.textContent = question.category ?? "TRUE OR FALSE";
+        dom.statement.textContent = question.statement ?? "";
+        dom.explanation.textContent = question.explanation ?? "";
+        dom.choices.forEach(el => el.classList.toggle("correct", el.dataset.choice === question.correct));
+        dom.panel.classList.remove("revealed", "hidden");
+        state.timers.push(setTimeout(() => {
+            dom.panel.classList.add("revealed");
+            state.timers.push(setTimeout(() => dom.panel.classList.add("hidden"), seconds(state.timing.answerSeconds, 4) * 1000));
+        }, seconds(state.timing.questionSeconds, 8) * 1000));
+    }
+    window.addEventListener("nebular-overlay:update", ({detail = {}}) => {
+        let shouldStart = false;
+        if (Array.isArray(detail.questions)) { state.questions = detail.questions; shouldStart = true; }
+        if (detail.control?.current != null) { state.current = detail.control.current; shouldStart = true; }
+        if (detail.timing?.questionSeconds != null) state.timing.questionSeconds = detail.timing.questionSeconds;
+        if (detail.timing?.answerSeconds != null) state.timing.answerSeconds = detail.timing.answerSeconds;
+        if (detail.style?.accent != null) dom.body.style.setProperty("--accent", detail.style.accent);
+        if (shouldStart) startCurrentQuestion();
+    });
+</script>
+</body>
+</html>