AI Prompt Page Builder

Describe what you want

Attach preview screenshot (for vision-capable models) Auto-fix console errors (up to 2 retries)

Bot guidance (system prompt)

Sent with every request. Edit to specialize this page.

Tip: leave the defaults in place for most overlays — they already teach the AI how to read SSN payloads and keep output Chrome 80 friendly.

Simulate:

You are helping the user build ONE standalone HTML overlay page for Social Stream Ninja (SSN), an open-source tool that consolidates live chat and stream events from YouTube, Twitch, Kick, TikTok, Facebook, Rumble, Discord, and many more.

=== OUTPUT FORMAT — STRICT ===
- When the user asks for a change, reply with ONE complete HTML document inside one ```html fenced block. Nothing else is needed; any prose outside the block is fine but the HTML block is the source of truth.
- For focused edits to the current overlay, prefer a compact exact-match patch inside one ```ssnpatch fenced block. The fenced content must be valid JSON because the app applies it with JSON.parse() to the active `overlay.html` file.
- Use full HTML instead of a patch for brand-new overlays, major rewrites, or broad changes.
- Never return both a full HTML file and an ssnpatch in the same response.
- Keep it as a SINGLE self-contained file (inline CSS and JS). Only link to external CDNs if the user explicitly asks.
- Keep the code Chrome 80 friendly: no ES modules, no top-level import/export, no optional chaining in inline JSON, and avoid experimental APIs without fallbacks.
- Set <body> background to transparent unless the user asks for a background. Overlays sit on top of OBS scenes, so transparency is the default.

Patch format for focused edits (strict JSON; escape backslashes as `\\`, quotes as `\"`, and newlines as `\n` inside string values):
```ssnpatch
{
  "reply": "Short user-facing summary.",
  "edits": [
    {
      "find": "Exact text that exists once in overlay.html",
      "replace": "Replacement text"
    }
  ]
}
```
Patch rules:
- Each `find` string MUST match exactly once in the current HTML. Include enough surrounding context to make it unique.
- Keep `replace` as small as practical, but include the complete replacement for the matched block.
- The block must parse as JSON. Do not use raw JavaScript strings, unescaped backslashes, comments, trailing commas, or markdown inside the JSON.
- Use full HTML instead of a patch if the exact text is uncertain or many blocks need changing.
- Do not use line numbers; they drift.

=== HOW DATA ARRIVES ===
Overlay pages receive data via a VDO.Ninja iframe bridge. Always include this bridge when the page needs live data. Messages arrive as window postMessage events:

```html
<iframe id="ssn_bridge" style="display:none;"></iframe>
<script>
(function () {
  var params = new URLSearchParams(location.search);
  var roomID = params.get("session") || "";
  var password = params.get("password") || "false";
  var label = params.get("label") || "dock";
  var bridge = document.getElementById("ssn_bridge");
  if (roomID) {
    bridge.src = "https://vdo.socialstream.ninja/?ln&salt=vdo.ninja&password=" +
      encodeURIComponent(password) + "&view=" + encodeURIComponent(roomID) +
      "&label=" + encodeURIComponent(label) +
      "&noaudio&novideo&cleanoutput&room=" + encodeURIComponent(roomID);
  }
  window.addEventListener("message", function (event) {
    var payload = event.data && event.data.dataReceived && event.data.dataReceived.overlayNinja;
    if (typeof payload !== "undefined") handlePayload(payload);
  });
  function handlePayload(data) {
    // route chat, events, meta updates here
  }
  window.handleOverlayPayload = handlePayload; // lets the builder send test events
}());
</script>
```

Without ?session=YOUR_ID the bridge won't connect — but the builder still sends test payloads straight to the iframe via postMessage, so handlePayload must work with or without the bridge.
Do NOT require `event.source === bridge.contentWindow`; builder test events and preview tools can come from the parent window. Only check `event.data.dataReceived.overlayNinja`.
Label rule: default chat/alert/game/ticker overlays MUST use `var label = params.get("label") || "dock";`. Dedicated metadata overlays for auction_update, commerce_update, or viewer_updates should use `var label = params.get("label") || "meta";` so they receive meta-targeted payloads even when dock alerts are filtered. Never invent a random/time-based/default-unique label for live data. Custom labels only receive targeted payloads, so use one only when the user explicitly asks for targeted/private/control messages or gives a specific `label=...`.

DOM ordering matters: the `<iframe id="ssn_bridge">` element MUST exist in the DOM before the script that calls `document.getElementById("ssn_bridge")` runs. The safest patterns are (a) put the iframe tag first and the script right after in `<body>`, or (b) create the iframe in JS via `document.createElement("iframe")` and append it to body. Never put the iframe element below the script that reads it — `getElementById` will return null and setting `.src` throws.

=== PAYLOAD FIELDS (the SSN schema) ===
Most messages look like:
{ id, type, chatname, chatmessage, textonly, chatimg, timestamp, hasDonation, membership, event, subtitle, meta, contentimg, nameColor, chatbadges, karma, bot, mod, host, vip, tid, private }

- type: source platform string — "youtube", "twitch", "kick", "tiktok", "facebook", "rumble", "discord", "whatnot", etc.
- Source/platform icons can be derived from `type`: `https://socialstream.ninja/sources/images/` + lowercase/sanitized `data.type` + `.png` (for example `youtube.png`, `twitch.png`, `kick.png`). Use a normal `<img>` created in JS and hide it on `error`; do not use inline `onerror=`.
- chatname / chatmessage / chatimg: standard chat fields. chatimg is a URL (may be empty).
- chatmessage is renderable HTML by default so SSN emotes/icons/images show correctly. Only treat it as plain text when `data.textonly === true`. Render it into a dedicated message-body element with `innerHTML` when `!data.textonly`, and `textContent` when `data.textonly`. Keep other fields escaped/text-only unless noted.
- event: set only for SYSTEM notifications — leave unset/false for plain chat. Known values include "new_follower", "subscription_gift", "gifted", "subscriber", "raid", "hype", "shoutout", "supersticker", "viewer_update", "follower_update", "subscriber_update", "viewer_updates" (aggregated), plus custom ones.
- hasDonation: string like "$5.00" for tips / super chats / bits when money was involved.
- membership: string like "Tier 1", "Member (6 months)", etc.
- subtitle: secondary info, often months subscribed or gift count.
- meta: structured extra data. For counter events it can be a number or an object keyed by type (e.g. { youtube: 815, twitch: 221 }). `viewer_updates` is a FULL SNAPSHOT of the current per-platform counts — replace your whole state from data.meta on every update, do NOT merge it on top of old platform keys, or stale platforms will linger forever. For commerce overlays meta is also a snapshot object (auction_update, commerce_update).
- contentimg: an image embedded in the message (emote, sticker, donation image).
- nameColor: hex color for the username.
- chatbadges: array of badge URLs.
- bot / mod / host / vip: booleans.
- private: true when the message was flagged private by SSN (e.g. from Discord DMs).

Example chat payload:
{ "chatname": "Jess", "chatmessage": "hello <img class=\"emote\" src=\"https://.../emote.png\" alt=\"emote\">", "textonly": false, "chatimg": "https://.../user1.jpg", "type": "youtube" }

Example follow event:
{ "event": "new_follower", "chatname": "NewFan", "type": "twitch" }

Example donation:
{ "chatname": "GenerousViewer", "chatmessage": "keep it up!", "hasDonation": "$25.00", "type": "youtube" }

Example viewer counter aggregate:
{ "event": "viewer_updates", "meta": { "youtube": 815, "twitch": 221, "kick": 94 } }

Example auction update:
{ "type": "whatnot", "event": "auction_update", "meta": { "status": "winning", "statusText": "Ava is Winning!", "bidder": "Ava", "title": "500 Spot Silver Slab Mega Set - #191", "category": "Coins, U.S. currency", "price": 88, "priceText": "$88", "bids": 7, "bidsText": "7 Bids", "timer": "00:19", "shipping": "Shipping + Taxes are extra" } }

=== BUILDING RULES ===
1a. Message-body rule: `data.chatmessage` is SSN's renderable HTML unless `data.textonly === true`. Put it in a dedicated message element with `innerHTML` when not text-only, and `textContent` when text-only; escape all other fields normally.
1. ALWAYS escape untrusted strings before inserting as HTML. Use textContent where possible. NEVER build inline HTML event handlers (onerror=, onclick=, etc.) inside a JS string — the escaping gets tangled and produces syntax errors. Instead, create the element, then `el.addEventListener("error", ...)` or `el.onerror = function () { ... }`. Same rule for inline `style="..."` built from dynamic values with quotes: prefer element.style.color = .... Build DOM with createElement + appendChild in ONE pass — don't rewrite .outerHTML on a node that's already in the tree, don't wipe the row with `.innerHTML = ""` mid-function, and never call insertBefore(newNode, refNode) unless refNode is already a child of the parent you're inserting into. Plan the node tree before you start creating elements.
2. Filter by data.type / data.event early so the overlay stays focused on its job.
3. When the user wants "chat", skip messages where data.event is set (unless they also ask for events).
4. When the user wants "alerts" or "events", require data.event, data.hasDonation, or data.membership.
5. Respect common URL params when they make sense: ?limit=50, ?onlytype=twitch, ?hidetype=bots, ?donationsonly, ?eventsonly, ?css= (external stylesheet).
6. Animations should clean themselves up (remove elements, clear timers) to avoid memory leaks during long streams.
7. Use CSS variables at :root so the user can easily tweak colors later.
8. Keep the output concise enough to paste into OBS — aim for a single file under ~500 lines.
9. If the user asks to "send" data back to SSN (e.g. feature a message), post into the bridge iframe with: bridge.contentWindow.postMessage({ sendData: { overlayNinja: payloadOrMessage }, type: "pcs" }, "*");
10. If the request is ambiguous (e.g. "make it look cool"), pick a reasonable modern style and ship it. The user will iterate.
11. EVERY alert card must render the actor's chatname prominently — never let auxiliary data (membership tier, gift count, raid viewers, donation amount) replace the name. The rendered card should always answer "who did this?" first. Use a template like `{chatname} {verb} {detail}`:
   - Follower: "FollowerFran followed" (name + "followed")
   - Subscriber: "SubSally subscribed — Member (2 months)" (name + verb + membership if present)
   - Gifted sub: "GiftyGus gifted 5 subs" (name + count from subtitle / meta.gift_count)
   - Donation: "DonorDana donated $25.00 — keep it up" (name + hasDonation verbatim + chatmessage if present)
   - Raid: "RaidingRita is raiding with 42 viewers" (name + subtitle or meta.viewers)
   Missing the name in ANY of these is a bug.
12. Subscriber alerts should fire whether the payload has data.event === "subscriber", data.event === "resub", or just a data.membership string with no contradicting event. Gifted subs fire on data.event === "subscription_gift" or data.event === "gifted" and usually carry data.subtitle (gift count) or meta.gift_count.
12a. Alerts arrive faster than their dismiss time during busy streams. Prefer STACKING: each alert gets its own card appended to the container and dismisses on its own timer, so multiple cards can be visible at once. Never build a single-banner overlay that hides behind a global `isAnimating` / `isBusy` flag — that silently drops payloads. Queuing-one-at-a-time is acceptable only if the user explicitly asks for it; stacking is the default.
13. For counter / viewer / goal numbers, render integer values as-is (or with toLocaleString thousands separators) instead of collapsing to "1.2k" style suffixes — the raw number is what streamers and mods actually want to read. Only abbreviate when a value is above ~1,000,000 AND space is genuinely constrained.
14. Reset / replace state on snapshot payloads (viewer_updates, auction_update, commerce_update); only accumulate on per-item events (new chat row, new alert).
14a. Auction overlays listen to `data.event === "auction_update"` and render from `data.meta`. Update visible DOM on EVERY accepted auction payload, even if the title or bidder did not change. Prefer `meta.priceText` over formatting `meta.price`; prefer `meta.bidsText` over formatting `meta.bids`; show `meta.bidder` or `meta.statusText`; show `meta.timer` exactly when present.
14b. When editing an existing overlay to show new live fields (timer, bids, viewer totals, status, platform), add visible DOM elements for those fields if they do not already exist, then update those elements from every matching payload. Do not compute values into unused variables.
14c. Metadata fields may be strings, numbers, zero, empty strings, or missing. Treat `0` as a valid value; avoid `value || fallback` when zero should render. For viewer_updates, sum only numeric top-level meta values unless the user asks otherwise.
15. Alert overlays must handle these exact shapes: donation via `data.hasDonation` even without `data.event`; member/sub via `data.membership` even without `data.event`; follow via `data.event === "new_follower"`; raid via `data.event === "raid"` plus `subtitle` or `meta.viewers`; gifted subs via `data.event === "subscription_gift"` or `"gifted"`.
16. Do not gate alerts on `data.chatmessage`, `data.subtitle`, or `data.meta`; follow events commonly have only `{ chatname, event: "new_follower", type }`, membership events may only have `{ chatname, membership, type }`, and donation events may only have `{ chatname, hasDonation, type }`.
17. Plain chat messages are valid when they only have `{ chatname, chatmessage, chatimg, type }` and no `event`; if the user asks for a chat overlay, do not require `event`, `hasDonation`, or `membership`.

If the user asks a question that does not require a file change, answer normally without a ```html block. Be helpful in 2-5 short sentences, include the likely cause and next step when debugging, and do not force a terse one-line answer. Otherwise, always return the full updated HTML.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Blank SSN Overlay</title>
	<style>
		* { box-sizing: border-box; }
		html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: transparent; color: #fff; font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
		.stage { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 20px; pointer-events: none; }
	</style>
</head>
<body>
	<div class="stage" id="stage"></div>
	<iframe id="ssn_bridge" style="display:none;"></iframe>
	<script>
	(function () {
		var params = new URLSearchParams(location.search);
		var roomID = params.get("session") || "";
		var password = params.get("password") || "false";
		var label = params.get("label") || "dock";
		var bridge = document.getElementById("ssn_bridge");
		if (roomID) {
			bridge.src = "https://vdo.socialstream.ninja/?ln&salt=vdo.ninja&password=" +
				encodeURIComponent(password) + "&view=" + encodeURIComponent(roomID) +
				"&label=" + encodeURIComponent(label) +
				"&noaudio&novideo&cleanoutput&room=" + encodeURIComponent(roomID);
		}
		function handlePayload(data) {
			// Describe what you want in the AI panel to fill this in.
			console.log("payload", data);
		}
		window.handleOverlayPayload = handlePayload;
		window.addEventListener("message", function (event) {
			var payload = event.data && event.data.dataReceived && event.data.dataReceived.overlayNinja;
			if (typeof payload !== "undefined") handlePayload(payload);
		});
	}());
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>SSN Chat Overlay</title>
	<style>
		:root {
			--row-bg: rgba(0,0,0,0.55);
			--row-border: rgba(255,255,255,0.1);
			--name: #79d6ac;
			--text: #f4f7f9;
		}
		* { box-sizing: border-box; }
		html, body { margin: 0; height: 100%; background: transparent; color: var(--text); font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
		#feed { position: fixed; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
		.row { display: flex; gap: 10px; align-items: flex-start; background: var(--row-bg); border: 1px solid var(--row-border); border-radius: 10px; padding: 8px 12px; opacity: 0; transform: translateY(8px); animation: slideIn 220ms ease-out forwards; }
		.avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px; background: #222; object-fit: cover; }
		.source-icon { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 8px; opacity: 0.85; border-radius: 3px; }
		.body { min-width: 0; }
		.name { font-weight: 700; color: var(--name); }
		.text { margin-top: 2px; word-wrap: break-word; }
		.text img { max-height: 1.35em; vertical-align: middle; }
		.platform { font-size: 10px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-left: 6px; letter-spacing: 0.05em; }
		@keyframes slideIn { to { opacity: 1; transform: translateY(0); } }
		.row.fade-out { animation: fadeOut 300ms ease-in forwards; }
		@keyframes fadeOut { to { opacity: 0; transform: translateY(-4px); } }
	</style>
</head>
<body>
	<div id="feed"></div>
	<iframe id="ssn_bridge" style="display:none;"></iframe>
	<script>
	(function () {
		var params = new URLSearchParams(location.search);
		var roomID = params.get("session") || "";
		var password = params.get("password") || "false";
		var label = params.get("label") || "dock";
		var limit = Math.max(1, parseInt(params.get("limit") || "8", 10));
		var showtime = Math.max(0, parseInt(params.get("showtime") || "0", 10));
		var feed = document.getElementById("feed");
		var bridge = document.getElementById("ssn_bridge");
		if (roomID) {
			bridge.src = "https://vdo.socialstream.ninja/?ln&salt=vdo.ninja&password=" +
				encodeURIComponent(password) + "&view=" + encodeURIComponent(roomID) +
				"&label=" + encodeURIComponent(label) +
				"&noaudio&novideo&cleanoutput&room=" + encodeURIComponent(roomID);
		}
		function hideBrokenImage(img) {
			img.addEventListener("error", function () { img.style.display = "none"; });
		}
		function setMessageHtml(el, data) {
			var value = data.chatmessage == null ? "" : String(data.chatmessage);
			if (data.textonly) {
				el.textContent = value;
			} else {
				el.innerHTML = value;
			}
		}
		function setNameColor(el, value) {
			value = value == null ? "" : String(value).trim();
			if (/^#[0-9a-f]{3,8}$/i.test(value) || /^rgba?$[0-9,\s.]+$$/i.test(value)) {
				el.style.color = value;
			}
		}
		function addRow(data) {
			if (data.event || data.bot) return;
			var row = document.createElement("div");
			row.className = "row";
			var safeType = data.type ? String(data.type).toLowerCase().replace(/[^a-z0-9_-]/g, "") : "";
			if (safeType) {
				var icon = document.createElement("img");
				icon.className = "source-icon";
				icon.src = "https://socialstream.ninja/sources/images/" + safeType + ".png";
				icon.alt = "";
				hideBrokenImage(icon);
				row.appendChild(icon);
			}
			if (data.chatimg) {
				var avatar = document.createElement("img");
				avatar.className = "avatar";
				avatar.src = String(data.chatimg);
				avatar.alt = "";
				hideBrokenImage(avatar);
				row.appendChild(avatar);
			} else {
				var avatarFallback = document.createElement("div");
				avatarFallback.className = "avatar";
				row.appendChild(avatarFallback);
			}
			var body = document.createElement("div");
			body.className = "body";
			var name = document.createElement("span");
			name.className = "name";
			name.textContent = data.chatname || "Anonymous";
			setNameColor(name, data.nameColor);
			body.appendChild(name);
			if (data.type) {
				var platform = document.createElement("span");
				platform.className = "platform";
				platform.textContent = data.type;
				body.appendChild(platform);
			}
			var text = document.createElement("div");
			text.className = "text";
			setMessageHtml(text, data);
			body.appendChild(text);
			row.appendChild(body);
			feed.appendChild(row);
			while (feed.children.length > limit) {
				feed.removeChild(feed.firstChild);
			}
			if (showtime > 0) {
				setTimeout(function () {
					row.classList.add("fade-out");
					setTimeout(function () { if (row.parentNode) row.parentNode.removeChild(row); }, 320);
				}, showtime);
			}
		}
		window.handleOverlayPayload = addRow;
		window.addEventListener("message", function (event) {
			var payload = event.data && event.data.dataReceived && event.data.dataReceived.overlayNinja;
			if (payload && typeof payload === "object") addRow(payload);
		});
	}());
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>SSN Alert Banner</title>
	<style>
		:root { --bg: rgba(15, 20, 24, 0.92); --accent: #79d6ac; --gold: #f0c866; --pink: #ff79b8; --blue: #69b7ff; }
		* { box-sizing: border-box; }
		html, body { margin: 0; height: 100%; background: transparent; color: #fff; font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
		#stage { position: fixed; top: 40px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 40px)); }
		.alert { background: var(--bg); border-left: 6px solid var(--accent); border-radius: 10px; padding: 16px 18px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); opacity: 0; transform: translateY(-20px); animation: in 240ms ease-out forwards; }
		.alert.sub { border-left-color: var(--gold); }
		.alert.gifted { border-left-color: var(--pink); }
		.alert.donation { border-left-color: var(--gold); }
		.alert.raid { border-left-color: var(--blue); }
		.topline { display: flex; align-items: center; gap: 7px; }
		.source-icon { width: 16px; height: 16px; flex: 0 0 16px; opacity: 0.85; border-radius: 3px; }
		.kind { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-weight: 700; }
		.alert.sub .kind { color: var(--gold); }
		.alert.gifted .kind { color: var(--pink); }
		.alert.donation .kind { color: var(--gold); }
		.alert.raid .kind { color: var(--blue); }
		.headline { font-size: 20px; font-weight: 800; margin-top: 4px; }
		.detail { color: rgba(255,255,255,0.75); margin-top: 4px; }
		.detail img { max-height: 1.35em; vertical-align: middle; }
		.alert.out { animation: out 320ms ease-in forwards; }
		@keyframes in { to { opacity: 1; transform: translateY(0); } }
		@keyframes out { to { opacity: 0; transform: translateY(-16px); } }
	</style>
</head>
<body>
	<div id="stage"></div>
	<iframe id="ssn_bridge" style="display:none;"></iframe>
	<script>
	(function () {
		var params = new URLSearchParams(location.search);
		var roomID = params.get("session") || "";
		var password = params.get("password") || "false";
		var label = params.get("label") || "dock";
		var duration = Math.max(2000, parseInt(params.get("duration") || "6000", 10));
		var stage = document.getElementById("stage");
		var bridge = document.getElementById("ssn_bridge");
		if (roomID) {
			bridge.src = "https://vdo.socialstream.ninja/?ln&salt=vdo.ninja&password=" +
				encodeURIComponent(password) + "&view=" + encodeURIComponent(roomID) +
				"&label=" + encodeURIComponent(label) +
				"&noaudio&novideo&cleanoutput&room=" + encodeURIComponent(roomID);
		}
		function escapeText(value) {
			var d = document.createElement("div"); d.textContent = value == null ? "" : String(value); return d.innerHTML;
		}
		function sourceIconUrl(type) {
			type = type ? String(type).toLowerCase().replace(/[^a-z0-9_-]/g, "") : "";
			return type ? "https://socialstream.ninja/sources/images/" + type + ".png" : "";
		}
		function show(kind, headline, detail, type, detailIsHtml) {
			var div = document.createElement("div");
			var iconUrl = sourceIconUrl(type);
			div.className = "alert " + kind;
			div.innerHTML = '<div class="topline">' +
				(iconUrl ? '<img class="source-icon" src="' + escapeText(iconUrl) + '" alt="">' : '') +
				'<div class="kind">' + escapeText(kind) + '</div></div>' +
				'<div class="headline">' + escapeText(headline) + '</div>';
			if (detail) {
				var detailEl = document.createElement("div");
				detailEl.className = "detail";
				if (detailIsHtml) detailEl.innerHTML = String(detail);
				else detailEl.textContent = String(detail);
				div.appendChild(detailEl);
			}
			var icon = div.querySelector(".source-icon");
			if (icon) icon.addEventListener("error", function () { icon.style.display = "none"; });
			stage.appendChild(div);
			setTimeout(function () { div.classList.add("out"); setTimeout(function () { if (div.parentNode) div.parentNode.removeChild(div); }, 340); }, duration);
		}
		function route(data) {
			if (!data || typeof data !== "object") return;
			if (data.hasDonation) {
				show("donation", (data.chatname || "Someone") + " tipped " + data.hasDonation, data.chatmessage || "", data.type, !data.textonly);
			} else if (data.event === "new_follower") {
				show("follow", (data.chatname || "Someone") + " followed!", data.type || "", data.type);
			} else if (data.event === "subscription_gift" || data.event === "gifted") {
				show("gifted", (data.chatname || "Someone") + " gifted " + (data.subtitle || (data.meta && data.meta.gift_count) || "a sub"), data.membership || "", data.type);
			} else if (data.event === "subscriber" || data.membership) {
				show("sub", (data.chatname || "Someone") + " subscribed!", data.membership || data.subtitle || "", data.type);
			} else if (data.event === "raid") {
				var viewers = (data.meta && data.meta.viewers) || data.subtitle || "";
				show("raid", (data.chatname || "Someone") + " is raiding!", viewers ? (viewers + " viewers") : "", data.type);
			}
		}
		window.handleOverlayPayload = route;
		window.addEventListener("message", function (event) {
			var payload = event.data && event.data.dataReceived && event.data.dataReceived.overlayNinja;
			if (payload) route(payload);
		});
	}());
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Viewer Counter Ticker</title>
	<style>
		* { box-sizing: border-box; }
		html, body { margin: 0; height: 100%; background: transparent; color: #fff; font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
		#bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 24px; padding: 10px 16px; background: rgba(15,20,24,0.8); backdrop-filter: blur(10px); align-items: center; justify-content: center; font-weight: 700; letter-spacing: 0.04em; }
		.chip { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,0.08); }
		.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #79d6ac; box-shadow: 0 0 8px #79d6ac; }
		.chip.youtube { color: #ff6b6b; } .chip.youtube .dot { background: #ff6b6b; box-shadow: 0 0 8px #ff6b6b; }
		.chip.twitch { color: #c594ff; } .chip.twitch .dot { background: #c594ff; box-shadow: 0 0 8px #c594ff; }
		.chip.kick { color: #79d6ac; } .chip.kick .dot { background: #79d6ac; box-shadow: 0 0 8px #79d6ac; }
		.chip.tiktok { color: #ff79b8; } .chip.tiktok .dot { background: #ff79b8; box-shadow: 0 0 8px #ff79b8; }
		.chip.total { color: #fff; background: rgba(121,214,172,0.15); }
	</style>
</head>
<body>
	<div id="bar"></div>
	<iframe id="ssn_bridge" style="display:none;"></iframe>
	<script>
	(function () {
		var params = new URLSearchParams(location.search);
		var roomID = params.get("session") || "";
		var password = params.get("password") || "false";
		var label = params.get("label") || "dock";
		var bar = document.getElementById("bar");
		var counts = {};
		var bridge = document.getElementById("ssn_bridge");
		if (roomID) {
			bridge.src = "https://vdo.socialstream.ninja/?ln&salt=vdo.ninja&password=" +
				encodeURIComponent(password) + "&view=" + encodeURIComponent(roomID) +
				"&label=" + encodeURIComponent(label) +
				"&noaudio&novideo&cleanoutput&room=" + encodeURIComponent(roomID);
		}
		function render() {
			var keys = Object.keys(counts).sort();
			var total = 0;
			var html = "";
			for (var i = 0; i < keys.length; i++) {
				var k = keys[i]; var v = counts[k] || 0; total += v;
				html += '<div class="chip ' + k + '"><span class="dot"></span><span>' + k + ': ' + v.toLocaleString() + '</span></div>';
			}
			if (!keys.length) {
				html = '<div class="chip total"><span class="dot"></span><span>Waiting for viewer counts…</span></div>';
			} else {
				html += '<div class="chip total"><span class="dot"></span><span>Total: ' + total.toLocaleString() + '</span></div>';
			}
			bar.innerHTML = html;
		}
		function route(data) {
			if (!data) return;
			if (data.event === "viewer_updates" && data.meta && typeof data.meta === "object") {
				counts = Object.assign({}, data.meta);
				render();
			} else if (data.event === "viewer_update" && data.type && typeof data.meta === "number") {
				counts[data.type] = data.meta;
				render();
			}
		}
		window.handleOverlayPayload = route;
		window.addEventListener("message", function (event) {
			var payload = event.data && event.data.dataReceived && event.data.dataReceived.overlayNinja;
			if (payload) route(payload);
		});
		render();
	}());
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Sub Goal Tracker</title>
	<style>
		* { box-sizing: border-box; }
		html, body { margin: 0; height: 100%; background: transparent; color: #fff; font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
		#goal { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 40px)); background: rgba(15,20,24,0.88); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 14px 16px; }
		.title { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #79d6ac; font-weight: 700; }
		.value { font-size: 22px; font-weight: 800; margin-top: 4px; display: flex; justify-content: space-between; align-items: baseline; }
		.value small { font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 500; }
		.bar { margin-top: 8px; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
		.fill { height: 100%; background: linear-gradient(90deg, #79d6ac, #f0c866); width: 0; transition: width 450ms ease-out; }
	</style>
</head>
<body>
	<div id="goal">
		<div class="title" id="goalTitle">Sub goal</div>
		<div class="value"><span id="progress">0</span><small>/ <span id="target">50</span></small></div>
		<div class="bar"><div class="fill" id="fill"></div></div>
	</div>
	<iframe id="ssn_bridge" style="display:none;"></iframe>
	<script>
	(function () {
		var params = new URLSearchParams(location.search);
		var roomID = params.get("session") || "";
		var password = params.get("password") || "false";
		var label = params.get("label") || "dock";
		var target = Math.max(1, parseInt(params.get("target") || "50", 10));
		var startAt = Math.max(0, parseInt(params.get("start") || "0", 10));
		var title = params.get("title") || "Sub goal";
		var progress = startAt;
		document.getElementById("goalTitle").textContent = title;
		document.getElementById("target").textContent = target;
		update();
		var bridge = document.getElementById("ssn_bridge");
		if (roomID) {
			bridge.src = "https://vdo.socialstream.ninja/?ln&salt=vdo.ninja&password=" +
				encodeURIComponent(password) + "&view=" + encodeURIComponent(roomID) +
				"&label=" + encodeURIComponent(label) +
				"&noaudio&novideo&cleanoutput&room=" + encodeURIComponent(roomID);
		}
		function update() {
			document.getElementById("progress").textContent = progress;
			var pct = Math.min(100, Math.round((progress / target) * 100));
			document.getElementById("fill").style.width = pct + "%";
		}
		function route(data) {
			if (!data) return;
			if (data.event === "subscription_gift" || data.event === "gifted") {
				var n = (data.meta && data.meta.gift_count) || parseInt(data.subtitle, 10) || 1;
				progress += n;
				update();
			} else if (data.event === "subscriber" || (data.membership && !data.event)) {
				progress += 1;
				update();
			}
		}
		window.handleOverlayPayload = route;
		window.addEventListener("message", function (event) {
			var payload = event.data && event.data.dataReceived && event.data.dataReceived.overlayNinja;
			if (payload) route(payload);
		});
	}());
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Starting Soon / BRB</title>
	<style>
		* { box-sizing: border-box; }
		html, body { margin: 0; height: 100%; background: #0d1014; color: #fff; font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
		body { background: radial-gradient(circle at 30% 30%, rgba(121,214,172,0.15), transparent 50%), radial-gradient(circle at 70% 70%, rgba(240,200,102,0.1), transparent 45%), #0d1014; display: flex; align-items: center; justify-content: center; }
		.card { text-align: center; padding: 32px 40px; backdrop-filter: blur(10px); background: rgba(15,20,24,0.6); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; }
		.headline { font-size: 64px; font-weight: 900; letter-spacing: -0.02em; background: linear-gradient(90deg, #79d6ac, #f0c866); -webkit-background-clip: text; background-clip: text; color: transparent; }
		.sub { color: rgba(255,255,255,0.7); margin-top: 6px; font-size: 18px; }
		.timer { margin-top: 22px; font-size: 40px; font-variant-numeric: tabular-nums; font-weight: 800; color: #79d6ac; }
		.chat { position: fixed; right: 24px; bottom: 24px; width: 320px; max-height: 50vh; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
		.chat .row { background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 8px 10px; font-size: 13px; opacity: 0; transform: translateY(8px); animation: slideIn 220ms ease-out forwards; }
		.chat .name { font-weight: 700; color: #79d6ac; margin-right: 6px; }
		.chat .message img { max-height: 1.35em; vertical-align: middle; }
		@keyframes slideIn { to { opacity: 1; transform: translateY(0); } }
	</style>
</head>
<body>
	<div class="card">
		<div class="headline" id="headline">Starting Soon</div>
		<div class="sub" id="sub">Grab a seat, we go live in…</div>
		<div class="timer" id="timer">05:00</div>
	</div>
	<div class="chat" id="chat"></div>
	<iframe id="ssn_bridge" style="display:none;"></iframe>
	<script>
	(function () {
		var params = new URLSearchParams(location.search);
		var roomID = params.get("session") || "";
		var password = params.get("password") || "false";
		var label = params.get("label") || "dock";
		var minutes = Math.max(0, parseInt(params.get("minutes") || "5", 10));
		var title = params.get("title"); if (title) document.getElementById("headline").textContent = title;
		var subtitle = params.get("sub"); if (subtitle) document.getElementById("sub").textContent = subtitle;
		var bridge = document.getElementById("ssn_bridge");
		if (roomID) {
			bridge.src = "https://vdo.socialstream.ninja/?ln&salt=vdo.ninja&password=" +
				encodeURIComponent(password) + "&view=" + encodeURIComponent(roomID) +
				"&label=" + encodeURIComponent(label) +
				"&noaudio&novideo&cleanoutput&room=" + encodeURIComponent(roomID);
		}
		var end = Date.now() + minutes * 60000;
		function pad(n) { n = Math.max(0, n|0); return (n < 10 ? "0" : "") + n; }
		function tick() {
			var remaining = Math.max(0, end - Date.now());
			var m = Math.floor(remaining / 60000);
			var s = Math.floor((remaining % 60000) / 1000);
			document.getElementById("timer").textContent = pad(m) + ":" + pad(s);
		}
		setInterval(tick, 500); tick();
		var chat = document.getElementById("chat");
		function setMessageHtml(el, data) {
			var value = data.chatmessage == null ? "" : String(data.chatmessage);
			if (data.textonly) el.textContent = value;
			else el.innerHTML = value;
		}
		function addChat(data) {
			if (data.event || data.bot || !data.chatmessage) return;
			var row = document.createElement("div");
			row.className = "row";
			var name = document.createElement("span");
			name.className = "name";
			name.textContent = (data.chatname || "Anon") + ":";
			var message = document.createElement("span");
			message.className = "message";
			setMessageHtml(message, data);
			row.appendChild(name);
			row.appendChild(message);
			chat.insertBefore(row, chat.firstChild);
			while (chat.children.length > 6) chat.removeChild(chat.lastChild);
		}
		window.handleOverlayPayload = addChat;
		window.addEventListener("message", function (event) {
			var payload = event.data && event.data.dataReceived && event.data.dataReceived.overlayNinja;
			if (payload) addChat(payload);
		});
	}());
	</script>
</body>
</html>