ZPad / Banner Scripts
Field kit · Homepage banner

Scripts for your
homepage banner.

ZPad's homepage banner can run your own HTML, CSS, and JavaScript. Copy a recipe below, paste it into Settings → Homepage Banner → Custom HTML, and the panel homepage becomes yours.

How to install 00 / SETUP

  1. Open Settings → Homepage Banner. Use the gear in the panel header or ⌘, from the panel.

  2. Choose “Custom HTML” as the banner style, then paste a script into the editor (it replaces the sample — that's fine).

  3. Save. The homepage now renders your markup at its real banner size. Scripts up to 512 KB are accepted; edit or clear anytime.

Good to know

JavaScript runs; links open outside the banner instead of navigating it; storage is non-persistent (a fresh slate each load). Scripts that fetch remote APIs — like the Hitokoto recipe — need an internet connection and show their own fallback text offline.

Hitokoto — a quote a moment

01 / SCRIPT

A dark glass card that pulls a fresh line of poetry, anime, film, or philosophy from the Hitokoto API on every load, with its category and source on the right. Chinese-language content; graceful offline fallback.

Network · v1.hitokoto.cn 4 KB Self-contained · no assets 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body {
      overflow: hidden;
      display: grid;
      place-items: center;
      color: #f4f7fa;
      font: 500 14px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
      background:
        radial-gradient(circle at 16% 18%, rgba(52,199,189,.34), transparent 35%),
        radial-gradient(circle at 86% 12%, rgba(255,159,10,.22), transparent 32%),
        linear-gradient(125deg, #071119, #0b1a25 58%, #04080c);
    }
    .zpad-html-demo {
      width: min(94%, 920px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      padding: 15px 19px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 17px;
      background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
      box-shadow: 0 18px 42px rgba(0,0,0,.25);
      backdrop-filter: blur(16px);
    }
    .eyebrow {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 6px;
      color: rgba(255,255,255,.64);
      font-size: 10px;
      font-weight: 650;
      letter-spacing: .10em;
      text-transform: uppercase;
    }
    .pulse {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #34c7bd;
      box-shadow: 0 0 10px rgba(52,199,189,.85);
      animation: pulse 2.2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.85); }
    }
    h1 {
      margin: 0 0 5px;
      font-size: clamp(17px, 3.5vw, 28px);
      letter-spacing: -.025em;
    }
    p {
      margin: 0;
      max-width: 42ch;
      color: rgba(255,255,255,.68);
      font-size: clamp(10px, 1.5vw, 13px);
    }
    .facts {
      display: grid;
      gap: 6px;
      min-width: 88px;
    }
    .fact {
      padding: 6px 8px;
      border-radius: 9px;
      background: rgba(255,255,255,.065);
    }
    .fact span {
      display: block;
      color: rgba(255,255,255,.52);
      font-size: 9px;
      letter-spacing: .05em;
    }
    .fact strong {
      display: block;
      margin-top: 1px;
      font-size: 12px;
    }
    @media (max-width: 430px) {
      .zpad-html-demo { grid-template-columns: 1fr; }
      .facts { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .pulse { animation: none; }
    }
  </style>
</head>
<body>
  <main class="zpad-html-demo" aria-label="ZPad custom HTML demo">
    <section>
      <div class="eyebrow"><span class="pulse"></span>一言 · Hitokoto</div>
      <h1 id="hitokoto-text">加载一言中...</h1>
      <p id="hitokoto-from">——</p>
    </section>
    <aside class="facts">
      <div class="fact"><span>类型</span><strong id="hitokoto-type">文学</strong></div>
      <div class="fact"><span>来源</span><strong id="hitokoto-src">一言 API</strong></div>
    </aside>
  </main>

<script>
// 一言API，支持跨域，直接浏览器请求
async function fetchHitokoto() {
  try {
    const res = await fetch('https://v1.hitokoto.cn/');
    const data = await res.json();
    document.getElementById('hitokoto-text').innerText = data.hitokoto;
    document.getElementById('hitokoto-from').innerText = `—— ${data.from}`;
    document.getElementById('hitokoto-type').innerText = getHitokotoTypeName(data.type);
    document.getElementById('hitokoto-src').innerText = data.from_who || data.from;
  } catch (err) {
    document.getElementById('hitokoto-text').innerText = '获取一言失败';
    document.getElementById('hitokoto-from').innerText = '网络或接口异常';
  }
}

// 一言type编码转中文名称
function getHitokotoTypeName(t) {
  const map = {
    a: '动画', b: '漫画', c: '游戏', d: '文学',
    e: '原创', f: '网络', g: '其他', h: '影视',
    i: '诗词', j: '网易云', k: '哲学', l: '谚语'
  };
  return map[t] || '未知';
}

fetchHitokoto();
</script>
</body>
</html>

Starter glass panel

02 / SCRIPT

The same layout ZPad ships as its built-in sample — an offline-safe starting point. Remix the gradient, swap the headline, keep or drop the fact tiles. Works with zero network access.

Offline · no network 3 KB Same as in-app sample 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body {
      overflow: hidden;
      display: grid;
      place-items: center;
      color: #f4f7fa;
      font: 500 14px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
      background:
        radial-gradient(circle at 16% 18%, rgba(52,199,189,.34), transparent 35%),
        radial-gradient(circle at 86% 12%, rgba(255,159,10,.22), transparent 32%),
        linear-gradient(125deg, #071119, #0b1a25 58%, #04080c);
    }
    .zpad-html-demo {
      width: min(94%, 920px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      padding: 15px 19px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 17px;
      background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
      box-shadow: 0 18px 42px rgba(0,0,0,.25);
      backdrop-filter: blur(16px);
    }
    .eyebrow {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 6px;
      color: rgba(255,255,255,.64);
      font-size: 10px;
      font-weight: 650;
      letter-spacing: .10em;
      text-transform: uppercase;
    }
    .pulse {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #34c7bd;
      box-shadow: 0 0 10px rgba(52,199,189,.85);
      animation: pulse 2.2s ease-in-out infinite;
    }
    h1 {
      margin: 0 0 5px;
      font-size: clamp(17px, 3.5vw, 28px);
      letter-spacing: -.025em;
    }
    p {
      margin: 0;
      max-width: 42ch;
      color: rgba(255,255,255,.68);
      font-size: clamp(10px, 1.5vw, 13px);
    }
    .facts {
      display: grid;
      gap: 6px;
      min-width: 88px;
    }
    .fact {
      padding: 6px 8px;
      border-radius: 9px;
      background: rgba(255,255,255,.065);
    }
    .fact span {
      display: block;
      color: rgba(255,255,255,.52);
      font-size: 9px;
      letter-spacing: .05em;
    }
    .fact strong {
      display: block;
      margin-top: 1px;
      font-size: 12px;
    }
    @media (max-width: 430px) {
      .zpad-html-demo { grid-template-columns: 1fr; }
      .facts { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .pulse { animation: none; }
    }
  </style>
</head>
<body>
  <main class="zpad-html-demo" aria-label="ZPad custom HTML demo">
    <section>
      <div class="eyebrow"><span class="pulse"></span>Custom HTML</div>
      <h1>Your homepage, any layout</h1>
      <p>Paste HTML, CSS, and JavaScript. This demo previews typography, glass, metrics, and motion.</p>
    </section>
    <aside class="facts">
      <div class="fact"><span>Preview</span><strong>Exact fit</strong></div>
      <div class="fact"><span>Size limit</span><strong>512 KB</strong></div>
    </aside>
  </main>
</body>
</html>
Contribute 03 / SHARE

Built one you like?

Send your HTML to [email protected] — the best ones get featured on this page with credit.

Submit a script
← User guide FAQ What's New Support Back to homepage