Dashboard

Edit "isbn-book-look-mqtt"

Slug

URL-friendly identifier (a-z, 0-9, -, _).

Description

HTML or React Content

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Book</title>

* {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

html,
    body {
      margin: 0;
      min-height: 100%;
      background:
        radial-gradient(circle at 20% 10%, rgba(125, 211, 252, 0.18), transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(168, 85, 247, 0.14), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(34, 197, 94, 0.08), transparent 34%),
        var(--bg);
      color: var(--text);
      font-family:
        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    }

body {
      display: grid;
      place-items: center;
      padding: 32px;
    }

.app {
      width: min(1100px, 100%);
    }

.shell {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045)),
        rgba(8, 10, 18, 0.78);
      box-shadow: var(--shadow);
      backdrop-filter: blur(22px);
    }

.shell::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
      transform: translateX(-100%);
      animation: shimmer 8s ease-in-out infinite;
    }

@keyframes shimmer {
      0%, 55% { transform: translateX(-100%); }
      80%, 100% { transform: translateX(100%); }
    }

.content {
      position: relative;
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 46px;
      padding: 52px;
      min-height: 620px;
    }

.cover-wrap {
      align-self: center;
    }

.cover-card {
      position: relative;
      border-radius: 26px;
      padding: 18px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    }

.cover-card::after {
      content: "";
      position: absolute;
      left: 15%;
      right: 15%;
      bottom: -18px;
      height: 28px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.5);
      filter: blur(18px);
      z-index: -1;
    }

.cover {
      display: block;
      width: 100%;
      aspect-ratio: 2 / 3;
      object-fit: cover;
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03));
      box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    }

.cover-fallback {
      display: grid;
      place-items: center;
      width: 100%;
      aspect-ratio: 2 / 3;
      padding: 28px;
      border-radius: 18px;
      text-align: center;
      color: var(--muted);
      background:
        linear-gradient(135deg, rgba(125, 211, 252, 0.16), rgba(168, 85, 247, 0.12)),
        rgba(255, 255, 255, 0.06);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
      font-weight: 800;
      line-height: 1.25;
      font-size: 26px;
    }

.details {
      min-width: 0;
      align-self: center;
    }

.eyebrow {
      margin: 0 0 16px;
      color: var(--accent);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.17em;
      text-transform: uppercase;
    }

h1 {
      margin: 0;
      max-width: 760px;
      font-size: clamp(42px, 6vw, 82px);
      line-height: 0.94;
      letter-spacing: -0.07em;
    }

.subtitle {
      margin: 20px 0 0;
      max-width: 760px;
      color: var(--muted);
      font-size: clamp(23px, 3vw, 36px);
      line-height: 1.12;
      letter-spacing: -0.035em;
      font-weight: 650;
    }

.authors {
      margin: 26px 0 0;
      color: #dbeafe;
      font-size: 22px;
      line-height: 1.4;
    }

.meta-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 38px;
    }

.meta {
      min-height: 94px;
      padding: 17px;
      border-radius: 22px;
      background: var(--panel);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

.meta-label {
      color: var(--faint);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

.meta-value {
      margin-top: 10px;
      color: var(--text);
      font-size: 18px;
      line-height: 1.25;
      font-weight: 750;
      overflow-wrap: anywhere;
    }

.chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 28px;
    }

.chip {
      padding: 8px 13px;
      border-radius: 999px;
      background: rgba(125, 211, 252, 0.12);
      border: 1px solid rgba(125, 211, 252, 0.2);
      color: #dbeafe;
      font-size: 14px;
      font-weight: 700;
    }

.center-message {
      padding: 72px 38px;
      text-align: center;
    }

.center-message h2 {
      margin: 0;
      font-size: clamp(32px, 5vw, 60px);
      letter-spacing: -0.055em;
    }

.center-message p {
      margin: 16px auto 0;
      max-width: 620px;
      color: var(--muted);
      font-size: 19px;
      line-height: 1.5;
    }

.spinner {
      width: 58px;
      height: 58px;
      margin: 0 auto 24px;
      border-radius: 50%;
      border: 4px solid rgba(255, 255, 255, 0.12);
      border-top-color: var(--accent);
      animation: spin 0.9s linear infinite;
    }

@keyframes spin {
      to { transform: rotate(360deg); }
    }

.error {
      color: var(--danger);
    }

.gear-button {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 50;
      width: 54px;
      height: 54px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.07)),
        rgba(8, 10, 18, 0.78);
      color: white;
      font-size: 24px;
      cursor: pointer;
      box-shadow: 0 20px 60px rgba(0,0,0,0.45);
      backdrop-filter: blur(14px);
    }

.gear-button:hover {
      background:
        linear-gradient(180deg, rgba(125,211,252,0.18), rgba(255,255,255,0.07)),
        rgba(8, 10, 18, 0.9);
    }

.mqtt-panel {
      position: fixed;
      right: 18px;
      bottom: 84px;
      z-index: 60;
      width: min(460px, calc(100vw - 36px));
      max-height: calc(100vh - 120px);
      overflow: auto;
      padding: 18px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: var(--panel-strong);
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62);
      backdrop-filter: blur(24px);
      display: none;
    }

.mqtt-panel.open {
      display: block;
    }

.mqtt-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

.mqtt-title {
      margin: 0;
      font-size: 18px;
      letter-spacing: -0.02em;
    }

.mqtt-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 32px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      color: var(--muted);
      font-size: 13px;
      white-space: nowrap;
    }

.dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--warn);
      box-shadow: 0 0 14px rgba(245,158,11,0.5);
    }

.dot.ok {
      background: var(--ok);
      box-shadow: 0 0 14px rgba(34,197,94,0.5);
    }

.dot.bad {
      background: var(--danger);
      box-shadow: 0 0 14px rgba(251,113,133,0.5);
    }

.field-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

.field {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-bottom: 12px;
    }

.field.full {
      grid-column: 1 / -1;
    }

.field label {
      color: var(--faint);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

.field input {
      width: 100%;
      min-height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.13);
      background: rgba(255,255,255,0.06);
      color: var(--text);
      padding: 10px 12px;
      font: inherit;
      outline: none;
    }

.field input:focus {
      border-color: rgba(125,211,252,0.45);
      box-shadow: 0 0 0 4px rgba(125,211,252,0.08);
    }

.buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 6px 0 14px;
    }

.btn {
      min-height: 42px;
      padding: 0 14px;
      border-radius: 13px;
      border: 1px solid rgba(255,255,255,0.13);
      background: rgba(255,255,255,0.06);
      color: var(--text);
      cursor: pointer;
      font: inherit;
    }

.btn.primary {
      background: rgba(125,211,252,0.14);
      border-color: rgba(125,211,252,0.28);
    }

.btn:hover {
      background: rgba(255,255,255,0.1);
    }

.hint {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
      margin: 0 0 12px;
    }

.code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 12px;
      color: #dbeafe;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px;
      padding: 10px;
      overflow: auto;
    }

.log {
      width: 100%;
      min-height: 130px;
      resize: vertical;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.13);
      background: rgba(0,0,0,0.28);
      color: #dbeafe;
      padding: 11px;
      font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      outline: none;
    }

@media (max-width: 860px) {
      body {
        padding: 18px;
        place-items: start center;
      }

.content {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 26px;
        min-height: auto;
      }

.cover-wrap {
        width: min(320px, 100%);
        justify-self: center;
      }

.details {
        text-align: center;
      }

h1 {
        font-size: clamp(40px, 12vw, 64px);
      }

.meta-grid {
        grid-template-columns: 1fr;
        text-align: left;
      }

.chips {
        justify-content: center;
      }

.field-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

<aside id="mqttPanel" class="mqtt-panel" aria-label="MQTT settings">
    <div class="mqtt-head">
      <h2 class="mqtt-title">MQTT Control</h2>
      <div class="mqtt-status">
        <span id="mqttDot" class="dot"></span>
        <span id="mqttStatus">Idle</span>
      </div>
    </div>

<p class="hint">
      Subscribe to kiosk messages. Send <strong>ShowBook</strong> with an ISBN to update this page.
    </p>

<div class="code">["ShowBook", "9780060935467"]</div>

<div class="field full">
        <label for="mqttTopic">Topic</label>
        <input id="mqttTopic" autocomplete="off" />
      </div>

<div class="field">
        <label for="mqttUsername">Username</label>
        <input id="mqttUsername" autocomplete="username" />
      </div>

<div class="field">
        <label for="mqttPassword">Password</label>
        <input id="mqttPassword" type="password" autocomplete="current-password" />
      </div>
    </div>

<div class="buttons">
      <button id="btnConnect" class="btn primary" type="button">Connect</button>
      <button id="btnDisconnect" class="btn" type="button">Disconnect</button>
      <button id="btnTest" class="btn" type="button">Test ShowBook</button>
      <button id="btnClearLog" class="btn" type="button">Clear log</button>
    </div>

const COVER_BASE = "https://isbner.kdl.workers.dev/isbn/";
      const DETAILS_BASE = "https://isbner.kdl.workers.dev/details/";

const MQTT_STORAGE_KEY = "isbn-book-page-mqtt-v1";

const DEFAULT_MQTT = {
        host: "d6977e2549ad4d2b9b9cf11391ab00a1.s1.eu.hivemq.cloud",
        port: "8884",
        path: "/mqtt",
        topic: "demo/kdl/robot/kiosk",
        username: "",
        password: ""
      };

const $ = id => document.getElementById(id);

const root = $("root");

const gearButton = $("gearButton");
      const mqttPanel = $("mqttPanel");
      const mqttDot = $("mqttDot");
      const mqttStatus = $("mqttStatus");
      const mqttLog = $("mqttLog");

const mqttHost = $("mqttHost");
      const mqttPort = $("mqttPort");
      const mqttPath = $("mqttPath");
      const mqttTopic = $("mqttTopic");
      const mqttUsername = $("mqttUsername");
      const mqttPassword = $("mqttPassword");

let requestSeq = 0;
      let client = null;

const clientId =
        "isbn-book-page-" +
        Math.random().toString(16).slice(2) + "-" +
        Date.now().toString(16);

function cleanIsbn(value) {
        return String(value || "")
          .replace(/^#/, "")
          .trim()
          .replace(/[^0-9Xx]/g, "")
          .toUpperCase();
      }

function escapeHtml(value) {
        return String(value ?? "")
          .replaceAll("&", "&amp;")
          .replaceAll("<", "&lt;")
          .replaceAll(">", "&gt;")
          .replaceAll('"', "&quot;")
          .replaceAll("'", "&#039;");
      }

function valueOrDash(value) {
        if (value === undefined || value === null || value === "") return "—";
        return escapeHtml(value);
      }

function arrayText(values) {
        return Array.isArray(values) && values.length
          ? values.filter(Boolean).join(", ")
          : "";
      }

function showLoading(isbn) {
        document.title = "Loading book…";
        root.innerHTML = `
          <div class="center-message">
            <div class="spinner" aria-hidden="true"></div>
            <h2>Loading book</h2>
            <p>${isbn ? `Preparing book ${escapeHtml(isbn)}.` : "Preparing a beautiful preview."}</p>
          </div>
        `;
      }

function showError(message) {
        document.title = "Book not found";
        root.innerHTML = `
          <div class="center-message">
            <h2 class="error">Could not load this book</h2>
            <p>${escapeHtml(message)}</p>
          </div>
        `;
      }

function renderBook(book, isbn) {
        const title = book.title || "Untitled book";
        const subtitle = book.subtitle || "";
        const authors = arrayText(book.authors);
        const publisher = book.publisher || "";
        const publishedDate = book.publishedDate || "";
        const pageCount = book.pageCount ? `${book.pageCount} pages` : "";
        const categories = Array.isArray(book.categories) ? book.categories.filter(Boolean) : [];

const coverUrl = `${COVER_BASE}${encodeURIComponent(isbn)}?size=L`;

document.title = title;

root.innerHTML = `
          <div class="content">
            <aside class="cover-wrap">
              <div class="cover-card">
                <img
                  class="cover"
                  id="cover"
                  src="${coverUrl}"
                  alt="Cover of ${escapeHtml(title)}"
                  decoding="async"
                />
              </div>
            </aside>

<section class="details">
              <p class="eyebrow">Follow me to pick up</p>

<h1>${escapeHtml(title)}</h1>

${subtitle ? `<div class="subtitle">${escapeHtml(subtitle)}</div>` : ""}

${authors ? `<div class="authors">by <strong>${escapeHtml(authors)}</strong></div>` : ""}

<div class="meta-grid">
                <div class="meta">
                  <div class="meta-label">Publisher</div>
                  <div class="meta-value">${valueOrDash(publisher)}</div>
                </div>

<div class="meta">
                  <div class="meta-label">Published</div>
                  <div class="meta-value">${valueOrDash(publishedDate)}</div>
                </div>

<div class="meta">
                  <div class="meta-label">Length</div>
                  <div class="meta-value">${valueOrDash(pageCount)}</div>
                </div>
              </div>

${
                categories.length
                  ? `
                    <div class="chips">
                      ${categories.map(c => `<span class="chip">${escapeHtml(c)}</span>`).join("")}
                    </div>
                  `
                  : ""
              }
            </section>
          </div>
        `;

const cover = $("cover");
        cover.addEventListener("error", () => {
          const fallback = document.createElement("div");
          fallback.className = "cover-fallback";
          fallback.textContent = title;
          cover.replaceWith(fallback);
        });
      }

async function fetchBook(isbn, seq) {
        const response = await fetch(`${DETAILS_BASE}${encodeURIComponent(isbn)}`, {
          headers: {
            "accept": "application/json"
          }
        });

if (!response.ok) {
          throw new Error(`The book details service returned HTTP ${response.status}.`);
        }

const data = await response.json();

if (seq !== requestSeq) return null;

if (!data || data.ok === false) {
          throw new Error(data?.error || "Book details were not found.");
        }

return data;
      }

async function loadBook(isbn, options = {}) {
        const clean = cleanIsbn(isbn) || DEFAULT_ISBN;

if (options.updateHash !== false && location.hash !== `#${clean}`) {
          history.replaceState(null, "", `#${clean}`);
        }

const seq = ++requestSeq;
        showLoading(clean);

try {
          const book = await fetchBook(clean, seq);
          if (!book || seq !== requestSeq) return;
          renderBook(book, clean);
          logMqtt(`BOOK loaded ${clean}: ${book.title || "Untitled book"}`);
        } catch (err) {
          if (seq !== requestSeq) return;
          showError(err?.message || "Unknown error.");
          logMqtt(`BOOK error ${clean}: ${err?.message || String(err)}`);
        }
      }

function loadFromHash() {
        loadBook(cleanIsbn(location.hash) || DEFAULT_ISBN, { updateHash: false });
      }

window.addEventListener("hashchange", loadFromHash);

function now() {
        return new Date().toLocaleTimeString();
      }

function logMqtt(line) {
        mqttLog.value += `[${now()}] ${line}\n`;
        mqttLog.scrollTop = mqttLog.scrollHeight;
      }

function setMqttStatus(kind, text) {
        mqttStatus.textContent = text;
        mqttDot.classList.remove("ok", "bad");
        if (kind === "ok") mqttDot.classList.add("ok");
        if (kind === "bad") mqttDot.classList.add("bad");
      }

function saveMqttSettings() {
        localStorage.setItem(MQTT_STORAGE_KEY, JSON.stringify({
          host: mqttHost.value.trim(),
          port: mqttPort.value.trim(),
          path: mqttPath.value.trim(),
          topic: mqttTopic.value.trim(),
          username: mqttUsername.value.trim(),
          password: mqttPassword.value
        }));
      }

function applyMqttSettings() {
        const s = loadMqttSettings();
        mqttHost.value = s.host;
        mqttPort.value = s.port;
        mqttPath.value = s.path;
        mqttTopic.value = s.topic;
        mqttUsername.value = s.username;
        mqttPassword.value = s.password;
      }

function disconnectMqtt() {
        if (!client) {
          setMqttStatus("mid", "Idle");
          logMqtt("No active MQTT connection.");
          return;
        }

const old = client;
        client = null;

try {
          old.end(true, () => {
            setMqttStatus("mid", "Idle");
            logMqtt("MQTT disconnected.");
          });
        } catch (err) {
          setMqttStatus("bad", "Error");
          logMqtt(`MQTT disconnect error: ${err?.message || String(err)}`);
        }
      }

function connectMqtt() {
        saveMqttSettings();

if (typeof mqtt === "undefined") {
          setMqttStatus("bad", "Missing MQTT lib");
          logMqtt("MQTT.js did not load. Check network/CDN access.");
          return;
        }

disconnectExistingSilently();

const url = mqttUrl();
        const topic = mqttTopic.value.trim();

if (!topic) {
          setMqttStatus("bad", "No topic");
          logMqtt("Topic is empty.");
          return;
        }

setMqttStatus("mid", "Connecting");
        logMqtt(`Connecting to ${url}`);

const options = {
          clientId,
          clean: true,
          keepalive: 30,
          reconnectPeriod: 1500,
          connectTimeout: 10000
        };

const username = mqttUsername.value.trim();
        const password = mqttPassword.value;

if (username) options.username = username;
        if (password) options.password = password;

client = mqtt.connect(url, options);

client.on("connect", () => {
          setMqttStatus("ok", "Connected");
          logMqtt(`Connected. Subscribing to ${topic}`);

client.subscribe(topic, { qos: 0 }, (err) => {
            if (err) {
              setMqttStatus("bad", "Subscribe error");
              logMqtt(`Subscribe error: ${err.message}`);
            } else {
              setMqttStatus("ok", "Listening");
              logMqtt(`Subscribed to ${topic}`);
            }
          });
        });

client.on("reconnect", () => {
          setMqttStatus("mid", "Reconnecting");
          logMqtt("Reconnecting...");
        });

client.on("offline", () => {
          setMqttStatus("bad", "Offline");
          logMqtt("MQTT offline.");
        });

client.on("close", () => {
          if (client) {
            setMqttStatus("mid", "Closed");
            logMqtt("MQTT connection closed.");
          }
        });

client.on("error", (err) => {
          setMqttStatus("bad", "Error");
          logMqtt(`MQTT error: ${err?.message || String(err)}`);
        });

client.on("message", (topic, payload) => {
          const text = new TextDecoder().decode(payload);
          logMqtt(`RX ${topic}: ${text}`);
          handleMqttMessage(text, topic);
        });
      }

function disconnectExistingSilently() {
        if (!client) return;
        try { client.end(true); } catch {}
        client = null;
      }

function handleMqttMessage(text, topic) {
        let msg;

try {
          msg = JSON.parse(text);
        } catch {
          logMqtt("Ignored non-JSON message.");
          return;
        }

if (!Array.isArray(msg)) {
          logMqtt("Ignored JSON message because it is not an array.");
          return;
        }

const [type, ...args] = msg;

if (type !== "ShowBook") {
          logMqtt(`Ignored event type: ${String(type)}`);
          return;
        }

const isbn = cleanIsbn(args[0]);

if (!isbn) {
          logMqtt("ShowBook ignored: missing ISBN.");
          return;
        }

logMqtt(`ShowBook accepted: ${isbn}`);
        loadBook(isbn);
      }

gearButton.addEventListener("click", () => {
        mqttPanel.classList.toggle("open");
      });

for (const el of [mqttHost, mqttPort, mqttPath, mqttTopic, mqttUsername, mqttPassword]) {
        el.addEventListener("input", saveMqttSettings);
      }

$("btnConnect").addEventListener("click", connectMqtt);
      $("btnDisconnect").addEventListener("click", disconnectMqtt);

$("btnTest").addEventListener("click", () => {
        handleMqttMessage(JSON.stringify(["ShowBook", "9780060935467"]), "local-test");
      });

$("btnClearLog").addEventListener("click", () => {
        mqttLog.value = "";
      });

applyMqttSettings();
      setMqttStatus("mid", "Idle");
      loadFromHash();
    })();
  </script>
</body>
</html>

Paste raw HTML or kick off with a React component (first line referencing React) and we'll scaffold the render call automatically.

Cancel