From 471d9df456c6161abdeba9d169e41033281407ea Mon Sep 17 00:00:00 2001
From: "DESKTOP-PUHFO60\\dsx2016" <evan199101@gmail.com>
Date: Mon, 19 Oct 2026 22:10:15 +0800
Subject: [PATCH] Add HTML on-device UI preview for flasher catalog.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 firmware/cyd/media/preview.html | 47 +++++++++++++++++++++++++++++++++
 firmware/cyd/meta.json          | 10 +++++++
 2 files changed, 57 insertions(+)
 create mode 100644 firmware/cyd/media/preview.html
 create mode 100644 firmware/cyd/meta.json

diff --git a/firmware/cyd/media/preview.html b/firmware/cyd/media/preview.html
new file mode 100644
index 0000000..b41da66
--- /dev/null
+++ b/firmware/cyd/media/preview.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>PHOTOS</title>
+<style>
+  *{box-sizing:border-box;margin:0;padding:0}
+  html,body{width:100%;height:100%;overflow:hidden;background:#000}
+  .bezel{width:100%;height:100%;display:grid;place-items:center;background:#1a1408}
+  .screen{width:320px;height:240px;background:#0A1016;color:#EAF0F6;font:12px/1.2 system-ui,sans-serif;
+    display:flex;flex-direction:column;overflow:hidden;transform-origin:center;transform:scale(var(--s,1))}
+  .top{height:28px;display:flex;align-items:center;padding:0 10px;gap:10px}
+  .top .t{color:#4FC3F7;font-weight:700;font-size:14px}
+  .top .i{margin-left:auto;color:#EAF0F6}
+  .top .c{color:#3DDC97}
+  .stage{flex:1;margin:0 10px;border-radius:6px;background:
+    linear-gradient(145deg,#1a2836,#0d141c 55%,#152030);
+    border:1px solid #1C2A38;position:relative;overflow:hidden}
+  .stage::before{
+    content:"";position:absolute;inset:16px 28px;border-radius:4px;
+    background:
+      linear-gradient(120deg,rgba(79,195,247,.25),transparent 40%),
+      linear-gradient(200deg,#2a3d52,#15202c);
+    box-shadow:inset 0 0 0 1px rgba(234,240,246,.08);
+  }
+  .stage .name{position:absolute;left:12px;right:12px;bottom:10px;text-align:center;
+    color:#EAF0F6;font-size:12px;z-index:1}
+  .bot{height:44px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 10px}
+  .btn{min-width:72px;height:28px;border:0;border-radius:6px;background:#243140;color:#EAF0F6;font-weight:600}
+  .btn.next{background:#1A4A6E}
+  .hint{position:absolute;bottom:52px;left:0;right:0;text-align:center;color:#7A8B9C;font-size:11px}
+</style>
+</head>
+<body>
+<div class="bezel"><div class="screen" id="s">
+  <div class="top"><span class="t">PHOTOS</span><span class="i">3 / 12</span><span class="c">TF OK</span></div>
+  <div class="stage"><div class="name">sunset.jpg</div></div>
+  <div class="hint">tap · SoftSPI touch</div>
+  <div class="bot"><button class="btn" type="button">PREV</button><button class="btn next" type="button">NEXT</button></div>
+</div></div>
+<script>
+(function(){function fit(){var s=document.getElementById('s');var r=s.parentElement.getBoundingClientRect();
+s.style.setProperty('--s',Math.min(r.width/320,r.height/240));}
+fit();addEventListener('resize',fit);})();
+</script>
+</body>
+</html>
diff --git a/firmware/cyd/meta.json b/firmware/cyd/meta.json
new file mode 100644
index 0000000..bd1bd73
--- /dev/null
+++ b/firmware/cyd/meta.json
@@ -0,0 +1,10 @@
+{
+  "boardId": "esp32-2432s028",
+  "name": "CYD Photo album",
+  "summary": "TF card photo album with SoftSPI touch",
+  "description": "JPG/PNG/GIF album from TF card. Prev/Next controls, calibrated touch.",
+  "tags": ["photo", "album", "tf", "touch"],
+  "media": {
+    "preview": "media/preview.html"
+  }
+}