embed.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>StickerForge 嵌入示例</title>
    <style>
      :root {
        color: #22202b;
        font-family:
          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", sans-serif;
        background: #eeeaf8;
      }

      * {
        box-sizing: border-box;
      }

      body {
        min-height: 100vh;
        margin: 0;
        display: grid;
        place-items: center;
        padding: 32px;
      }

      .demo {
        width: min(960px, 100%);
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        overflow: hidden;
        border: 1px solid rgb(36 30 52 / 10%);
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 24px 70px rgb(59 43 92 / 16%);
      }

      .stage {
        min-height: 560px;
        display: grid;
        place-items: center;
        padding: 48px;
        background:
          radial-gradient(circle at 50% 42%, #ffffff 0 10%, transparent 44%),
          linear-gradient(145deg, #f8f4ff, #ddd4ed);
      }

      #sticker-target {
        width: min(390px, 80vw);
        aspect-ratio: 1;
      }

      .controls {
        padding: 28px;
        border-left: 1px solid rgb(36 30 52 / 9%);
        background: rgb(255 255 255 / 88%);
      }

      h1 {
        margin: 0 0 6px;
        font-size: 20px;
      }

      .hint {
        margin: 0 0 28px;
        color: #736d80;
        font-size: 13px;
        line-height: 1.5;
      }

      label {
        display: grid;
        gap: 8px;
        margin-top: 20px;
        color: #554f61;
        font-size: 13px;
        font-weight: 650;
      }

      input[type="text"] {
        width: 100%;
        border: 1px solid #d9d2e5;
        border-radius: 10px;
        padding: 10px 12px;
        color: inherit;
        font: inherit;
      }

      input[type="range"] {
        width: 100%;
        accent-color: #7057c7;
      }

      button {
        width: 100%;
        margin-top: 28px;
        border: 0;
        border-radius: 11px;
        padding: 11px 14px;
        color: #fff;
        font: inherit;
        font-weight: 750;
        background: #30283e;
        cursor: pointer;
      }

      .status {
        min-height: 1.5em;
        margin: 18px 0 0;
        color: #736d80;
        font-size: 12px;
      }

      @media (max-width: 720px) {
        body {
          padding: 16px;
        }

        .demo {
          grid-template-columns: 1fr;
        }

        .stage {
          min-height: 420px;
          padding: 28px;
        }

        .controls {
          border-top: 1px solid rgb(36 30 52 / 9%);
          border-left: 0;
        }
      }
    </style>
  </head>
  <body>
    <main class="demo">
      <section class="stage" aria-label="互动贴纸预览">
        <div id="sticker-target"></div>
      </section>

      <aside class="controls">
        <h1>StickerForge</h1>
        <p class="hint">从贴纸边缘向内拖动，松手后会自然回落。</p>

        <label>
          文字
          <input id="text" type="text" value="PEEL ME" maxlength="40" />
        </label>

        <label>
          SVG 素材
          <input id="svg-file" type="file" accept="image/svg+xml,.svg" />
        </label>

        <label>
          描边宽度
          <input id="outline" type="range" min="0" max="30" value="14" />
        </label>

        <label>
          阴影模糊
          <input id="shadow-blur" type="range" min="0" max="60" value="28" />
        </label>

        <label>
          阴影强度
          <input
            id="shadow-opacity"
            type="range"
            min="0"
            max="0.8"
            value="0.32"
            step="0.01"
          />
        </label>

        <button id="reset" type="button">放平贴纸</button>
        <p id="status" class="status" aria-live="polite">正在初始化…</p>
      </aside>
    </main>

    <!--
      Build first, then serve the repository root over HTTP. When copying this
      example elsewhere, copy sticker-forge.iife.js too and update this URL.
    -->
    <script src="../public/embed/sticker-forge.iife.js"></script>
    <script>
      async function startStickerDemo() {
        const target = document.querySelector("#sticker-target");
        const status = document.querySelector("#status");

        target.addEventListener("peelchange", (event) => {
          status.textContent = `撕起 ${Math.round(event.detail.progress * 100)}%`;
        });
        target.addEventListener("error", (event) => {
          status.textContent = event.detail.message;
        });

        // createSticker() is async: await it before calling the instance API.
        const sticker = await StickerForge.createSticker(target, {
          source: {
            type: "text",
            text: "PEEL ME",
            color: "#6f55cc",
            fontWeight: 850,
          },
          outline: { width: 14, color: "#ffffff" },
          shadow: {
            color: "#211637",
            opacity: 0.32,
            blur: 28,
            distance: 14,
            angle: 90,
          },
          sound: { enabled: true, volume: 0.68 },
          back: { color: "#f8f7fb", gloss: 0.82, roughness: 0.16 },
          quality: "high",
        });
        status.textContent = "已就绪：从真实轮廓边缘向内拖动";

        document
          .querySelector("#text")
          .addEventListener("input", async (event) => {
            await sticker.setSource({
              type: "text",
              text: event.currentTarget.value || " ",
              color: "#6f55cc",
              fontWeight: 850,
            });
          });

        document
          .querySelector("#svg-file")
          .addEventListener("change", async (event) => {
            const file = event.currentTarget.files?.[0];
            if (!file) return;
            // Raw markup is accepted; Sticker Forge sanitizes every SVG itself.
            await sticker.setSource({ type: "svg", svg: await file.text() });
            status.textContent = `已载入 ${file.name}`;
          });

        document
          .querySelector("#outline")
          .addEventListener("input", (event) => {
            sticker.setOptions({
              outline: { width: Number(event.currentTarget.value) },
            });
          });

        document
          .querySelector("#shadow-blur")
          .addEventListener("input", (event) => {
            sticker.setOptions({
              shadow: { blur: Number(event.currentTarget.value) },
            });
          });

        document
          .querySelector("#shadow-opacity")
          .addEventListener("input", (event) => {
            sticker.setOptions({
              shadow: { opacity: Number(event.currentTarget.value) },
            });
          });

        document.querySelector("#reset").addEventListener("click", () => {
          sticker.reset();
        });

        // In a SPA, release WebGL resources before removing the host element:
        // sticker.destroy();
      }

      startStickerDemo().catch(console.error);
    </script>
  </body>
</html>