Initial commit: RHINE LAB · ANALYSIS OS：三维界面与动效实验（本仓库不含个人归档索引数据）

2026-09-19 13:04:56 +08:00
commit 3f422218a5
1098 changed files with 39410 additions and 0 deletions
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="zh-CN">
+  <meta charset="utf-8" /><title>品牌文字放大对照</title
+  ><link rel="stylesheet" href="/src/style.css" /><style>
+    body {
+      overflow: auto;
+      padding: 20px;
+    }
+    main {
+      max-width: 1000px;
+    }
+    h2 {
+      font: 16px system-ui;
+      margin: 20px 0 8px;
+    }
+    .crop {
+      position: relative;
+      width: 732px;
+      height: 308px;
+      overflow: hidden;
+      background: #e4e2dd;
+    }
+    .crop img {
+      width: 732px;
+      height: 308px;
+    }
+    .crop .brand {
+      left: 33.6px;
+      top: 21.6px;
+      transform: scale(2.4);
+      transform-origin: 0 0;
+    }
+    .guides {
+      position: absolute;
+      left: 34px;
+      top: 0;
+      bottom: 0;
+      width: 646px;
+      border-inline: 1px dashed #bc765b;
+      pointer-events: none;
+    }
+    .overlay .brand {
+      color: #c63d30;
+      opacity: 0.55;
+    }
+    pre {
+      font: 14px monospace;
+      white-space: pre-wrap;
+    }
+  </style>
+  <main>
+    <h2>原片左上角 · 2.4 倍放大</h2>
+    <div class="crop">
+      <img src="brand-original.jpg" alt="原片品牌文字放大" />
+      <div class="guides"></div>
+    </div>
+    <h2>当前界面 · 同倍率</h2>
+    <div class="crop">
+      <header class="brand">
+        <h1>RHINE LAB</h1>
+        <div>SYNTHESIZE INFORMATION</div>
+        <p>ANALYSIS <b>OS</b></p>
+      </header>
+      <div class="guides"></div>
+    </div>
+    <h2 id="overlay">原片与当前叠加 · 当前文字用红色标出</h2>
+    <label style="display: block; margin: 12px 0; font-size: 14px"
+      >当前文字透明度
+      <input id="opacity" type="range" min="0" max="1" step="0.05" value="0.55"
+    /></label>
+    <div class="crop overlay">
+      <img src="brand-original.jpg" alt="原片与当前文字叠加" />
+      <header class="brand">
+        <h1>RHINE LAB</h1>
+        <div>SYNTHESIZE INFORMATION</div>
+        <p>ANALYSIS <b>OS</b></p>
+      </header>
+      <div class="guides"></div>
+    </div>
+    <pre id="metrics"></pre>
+  </main>
+  <script type="module">
+    import { brandHeading } from "/src/brand.ts";
+    document
+      .querySelectorAll(".brand")
+      .forEach((el) => (el.innerHTML = brandHeading));
+    await document.fonts.ready;
+    document.querySelector("#metrics").textContent = JSON.stringify(
+      [...document.querySelector(".brand").children].map((el) => {
+        const r = document.createRange();
+        r.selectNodeContents(el);
+        return {
+          line: el.textContent,
+          width: r.getBoundingClientRect().width / 2.4,
+          spacing: getComputedStyle(el).letterSpacing,
+          fontSize: getComputedStyle(el).fontSize,
+        };
+      }),
+      null,
+      2,
+    );
+    document.querySelector("#opacity").oninput = (e) =>
+      (document.querySelector(".overlay .brand").style.opacity =
+        e.target.value);
+  </script>
+</html>