From 1c191930162164dcdc92cfab564a79ba6b507b7f Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Sun, 9 Nov 2025 08:41:01 -0800
Subject: [PATCH] Feat: Light mode Stain font comparison page

---
 dist/index.html | 208 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 208 insertions(+)
 create mode 100644 dist/index.html
diff --git a/dist/index.html b/dist/index.html
new file mode 100644
index 0000000..5381c20
--- /dev/null
+++ b/dist/index.html
@@ -0,0 +1,208 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Stain Font Preview</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <style>
+    :root{
+      --bg:#f7f7f9;
+      --fg:#111;
+      --accent:#2b6cb0;
+      --border:#d0d0dd;
+      --mono:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
+    }
+    *{box-sizing:border-box;margin:0;padding:0;}
+    body{
+      background:var(--bg);
+      color:var(--fg);
+      font-family:var(--mono);
+      padding:24px;
+      line-height:1.5;
+    }
+    h1{
+      font-size:28px;
+      margin-bottom:8px;
+    }
+    h2{
+      font-size:18px;
+      margin:24px 0 8px;
+    }
+    p{margin:4px 0 8px;}
+    .row{
+      display:grid;
+      grid-template-columns:1fr 1fr;
+      gap:16px;
+      margin:8px 0 16px;
+      align-items:flex-start;
+    }
+    label{
+      display:block;
+      font-size:12px;
+      text-transform:uppercase;
+      letter-spacing:.08em;
+      color:#555;
+      margin-bottom:4px;
+    }
+    .sample{
+      padding:12px 10px;
+      border-radius:6px;
+      border:1px solid var(--border);
+      background:#fff;
+      min-height:56px;
+      display:flex;
+      align-items:center;
+      font-size:26px;
+      overflow-x:auto;
+    }
+    textarea{
+      width:100%;
+      padding:8px 10px;
+      border-radius:6px;
+      border:1px solid var(--border);
+      resize:vertical;
+      font-family:var(--mono);
+      font-size:13px;
+      background:#fff;
+      color:var(--fg);
+    }
+    .meta{
+      font-size:11px;
+      color:#666;
+      margin-top:4px;
+    }
+    .tag{
+      display:inline-block;
+      padding:1px 6px;
+      border-radius:10px;
+      border:1px solid var(--border);
+      font-size:10px;
+      margin-left:4px;
+      color:#444;
+    }
+    .grid{
+      display:grid;
+      grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
+      gap:10px;
+      margin-top:6px;
+    }
+    .cell{
+      padding:10px;
+      border-radius:6px;
+      border:1px solid var(--border);
+      background:#fff;
+      text-align:center;
+      font-size:28px;
+    }
+    .cell span{
+      display:block;
+      font-size:10px;
+      color:#777;
+      margin-top:4px;
+      letter-spacing:.08em;
+      text-transform:uppercase;
+    }
+    .pill{
+      font-size:10px;
+      padding:2px 6px;
+      border-radius:10px;
+      background:var(--accent);
+      color:#fff;
+      margin-left:6px;
+    }
+    a{
+      color:var(--accent);
+      text-decoration:none;
+    }
+    a:hover{text-decoration:underline;}
+  </style>
+  <style>
+    @font-face{
+      font-family:"Stain";
+      src:url("./Stain-Regular.ttf") format("truetype");
+      font-style:normal;
+      font-weight:400;
+      font-display:swap;
+    }
+    .stain{font-family:"Stain",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
+    .candara{font-family:"Candara","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;}
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Stain Regular <span class="pill">Preview</span></h1>
+    <p>Compare Stain with Candara and system fonts in light mode.</p>
+  </header>
+
+  <section>
+    <h2>Quick comparison</h2>
+    <div class="row">
+      <div>
+        <label>Stain</label>
+        <div class="sample stain" id="stainSample">
+          Aa Bb Cc — Stain
+        </div>
+      </div>
+      <div>
+        <label>Candara / Fallback</label>
+        <div class="sample candara" id="candaraSample">
+          Aa Bb Cc — Candara / system
+        </div>
+      </div>
+    </div>
+    <div class="meta">
+      Note: Current build implements glyphs for A B C a b c only.
+      Other characters fall back to system fonts.
+    </div>
+  </section>
+
+  <section>
+    <h2>Custom text</h2>
+    <p>Type something to view it in Stain alongside Candara / system.</p>
+    <textarea id="input" rows="2">Aa Bb Cc  Stain vs Candara</textarea>
+    <div class="row">
+      <div>
+        <label>Stain</label>
+        <div class="sample stain" id="stainCustom"></div>
+      </div>
+      <div>
+        <label>Candara / Fallback</label>
+        <div class="sample candara" id="candaraCustom"></div>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Per-glyph view</h2>
+    <p>Available Stain glyphs so far:</p>
+    <div class="grid stain">
+      <div class="cell">A<span>U+0041</span></div>
+      <div class="cell">B<span>U+0042</span></div>
+      <div class="cell">C<span>U+0043</span></div>
+      <div class="cell">a<span>U+0061</span></div>
+      <div class="cell">b<span>U+0062</span></div>
+      <div class="cell">c<span>U+0063</span></div>
+    </div>
+  </section>
+
+  <section class="meta">
+    <p>
+      Built automatically on push by GitHub Actions.
+      See repository history for Stain font evolution.
+    </p>
+  </section>
+
+  <script>
+    const input=document.getElementById("input");
+    const stainCustom=document.getElementById("stainCustom");
+    const candaraCustom=document.getElementById("candaraCustom");
+    const sync=()=>{
+      const v=input.value||"";
+      stainCustom.textContent=v;
+      candaraCustom.textContent=v;
+    };
+    input.addEventListener("input",sync);
+    window.addEventListener("load",sync);
+  </script>
+</body>
+</html>
