HTML Embed Lab — CSS 3D Cube Viewer & a fetch mini-app

1. CSS 3D Box Viewer

Zero JavaScript — a pure CSS 3D cube. Hover to pause.

Parent perspective, cube preserve-3d, six faces with rotate + translateZ(half-size) — that's all.

2. A fetch mini-app — live search widget

A living app embedded in this post: it calls this blog's /api/search via fetch.

How: one <script src="/public/embeds/mini-search.js"> line passes the sanitizer (self-hosted scripts only), and the widget renders itself into #mini-search-app.

3. Mermaid diagram

This blog system's data flow:

flowchart LR
  V[Visitor] -->|request| N[Hono SSR server.ts]
  N -->|markdown render| P[(content/posts)]
  N --> S[SQLite comments.db]
  S --> C[comments · chat · guestbook]
  N --> U[(Umami PG)]
  N -->|fetch| G[Giphy API]
  N -->|translate| O[OpenRouter]

4. Discount calculator

5. Live KST clock

Right now in Korea —

6. External iframe (YouTube)

Six widgets: CSS 3D · fetch search · Mermaid · calculator · live clock · iframe. All scripts self-hosted in public/embeds/ — immune to the CSP 'self' CDN block.