From 1a9f5a5b0cb17fb61a623db87422412d3438f53c Mon Sep 17 00:00:00 2001
From: starmen1265 <starmen1265@163.com>
Date: Sun, 21 Jun 2026 23:29:00 +0800
Subject: [PATCH] =?UTF-8?q?art(ui):=20=E6=B8=B8=E6=88=8F=E5=BC=80=E5=A7=8B?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E6=A6=82=E5=BF=B5=E7=A8=BF(2K=E5=9B=BE?=
 =?UTF-8?q?=E4=B8=8EHTML)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../childhood-start-screen-2k.png             |   3 +
 .../start-screen/childhood-start-screen.html  | 601 ++++++++++++++++++
 2 files changed, 604 insertions(+)
 create mode 100644 output/start-screen/childhood-start-screen-2k.png
 create mode 100644 output/start-screen/childhood-start-screen.html

diff --git a/output/start-screen/childhood-start-screen-2k.png b/output/start-screen/childhood-start-screen-2k.png
new file mode 100644
index 0000000..42aad3a
--- /dev/null
+++ b/output/start-screen/childhood-start-screen-2k.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5c5ef589a3f378ece6de82ffba325232bf9ae5d07e81b6b68c52b688e6cb4dc8
+size 1306328
diff --git a/output/start-screen/childhood-start-screen.html b/output/start-screen/childhood-start-screen.html
new file mode 100644
index 0000000..c6a8b3c
--- /dev/null
+++ b/output/start-screen/childhood-start-screen.html
@@ -0,0 +1,601 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>ChildHood Start Screen</title>
+  <style>
+    :root {
+      --ink: #2a2119;
+      --paper: #f7e7bf;
+      --sun: #f0ae4b;
+      --red: #b94d36;
+      --green: #39705c;
+      --blue: #3e6f8e;
+      --shadow: rgba(35, 28, 22, .28);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    html,
+    body {
+      width: 2560px;
+      height: 1440px;
+      margin: 0;
+      overflow: hidden;
+      font-family: "Microsoft YaHei", "Noto Sans CJK SC", "SimHei", Arial, sans-serif;
+      color: var(--ink);
+      background: #f1c66b;
+    }
+
+    .screen {
+      position: relative;
+      width: 2560px;
+      height: 1440px;
+      overflow: hidden;
+      background:
+        radial-gradient(circle at 65% 28%, rgba(255, 236, 169, .95) 0 10%, rgba(245, 187, 91, .68) 17%, rgba(224, 120, 73, .18) 33%, transparent 51%),
+        linear-gradient(180deg, #f4c36a 0%, #d88a5e 44%, #786d6f 78%, #454d55 100%);
+    }
+
+    .grain {
+      position: absolute;
+      inset: 0;
+      opacity: .18;
+      background-image:
+        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
+        linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px);
+      background-size: 13px 13px, 17px 17px;
+      mix-blend-mode: soft-light;
+      pointer-events: none;
+    }
+
+    .cloud {
+      position: absolute;
+      height: 34px;
+      border-radius: 999px;
+      background: rgba(255, 230, 181, .55);
+      filter: blur(.2px);
+    }
+
+    .cloud::before,
+    .cloud::after {
+      content: "";
+      position: absolute;
+      border-radius: 50%;
+      background: inherit;
+    }
+
+    .cloud::before {
+      width: 76px;
+      height: 76px;
+      left: 58px;
+      bottom: 4px;
+    }
+
+    .cloud::after {
+      width: 110px;
+      height: 110px;
+      left: 124px;
+      bottom: -3px;
+    }
+
+    .cloud-a {
+      width: 320px;
+      left: 165px;
+      top: 145px;
+    }
+
+    .cloud-b {
+      width: 390px;
+      right: 255px;
+      top: 215px;
+      opacity: .72;
+      transform: scale(.82);
+    }
+
+    .sun {
+      position: absolute;
+      left: 1584px;
+      top: 214px;
+      width: 320px;
+      height: 320px;
+      border-radius: 50%;
+      background: radial-gradient(circle at 36% 34%, #ffe7a8 0 14%, #f2b35a 42%, #dd774d 100%);
+      box-shadow: 0 0 160px rgba(255, 200, 103, .65);
+    }
+
+    .wires {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
+
+    .wire {
+      position: absolute;
+      height: 3px;
+      background: rgba(55, 43, 40, .58);
+      transform-origin: left center;
+      box-shadow: 0 2px 0 rgba(255,255,255,.05);
+    }
+
+    .wire-1 {
+      width: 1320px;
+      left: 1050px;
+      top: 288px;
+      transform: rotate(-7deg);
+    }
+
+    .wire-2 {
+      width: 1180px;
+      left: 1160px;
+      top: 340px;
+      transform: rotate(-5deg);
+    }
+
+    .pole {
+      position: absolute;
+      right: 235px;
+      top: 196px;
+      width: 24px;
+      height: 810px;
+      background: linear-gradient(90deg, #4c372b, #76523a, #39291f);
+      box-shadow: 16px 0 0 rgba(0,0,0,.08);
+    }
+
+    .pole::before {
+      content: "";
+      position: absolute;
+      left: -130px;
+      top: 92px;
+      width: 286px;
+      height: 20px;
+      background: #5c4030;
+      transform: rotate(-6deg);
+      box-shadow: 0 8px 0 rgba(0,0,0,.12);
+    }
+
+    .scene {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 760px;
+    }
+
+    .distant {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 420px;
+      height: 245px;
+      background: linear-gradient(180deg, rgba(64, 78, 81, .15), rgba(42, 58, 62, .55));
+      clip-path: polygon(0 66%, 7% 58%, 13% 63%, 20% 51%, 27% 60%, 36% 44%, 45% 55%, 52% 41%, 62% 54%, 70% 43%, 78% 50%, 87% 39%, 100% 54%, 100% 100%, 0 100%);
+    }
+
+    .street {
+      position: absolute;
+      left: -90px;
+      right: -90px;
+      bottom: -110px;
+      height: 520px;
+      background:
+        linear-gradient(92deg, transparent 0 45%, rgba(255,255,255,.28) 45.4% 46.2%, transparent 46.7% 100%),
+        linear-gradient(180deg, #5e6161 0%, #464b50 100%);
+      transform: perspective(780px) rotateX(58deg);
+      transform-origin: bottom center;
+      box-shadow: inset 0 60px 90px rgba(0,0,0,.16);
+    }
+
+    .sidewalk {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 250px;
+      height: 92px;
+      background: linear-gradient(180deg, #b58f62 0%, #886c51 100%);
+      box-shadow: 0 -14px 0 rgba(74, 61, 49, .35), 0 16px 35px rgba(0,0,0,.25);
+    }
+
+    .buildings {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 338px;
+      height: 340px;
+    }
+
+    .shop {
+      position: absolute;
+      bottom: 0;
+      background: #d1b479;
+      border: 6px solid rgba(58, 45, 37, .72);
+      box-shadow: 18px 24px 0 rgba(0,0,0,.14);
+    }
+
+    .shop::before {
+      content: "";
+      position: absolute;
+      left: -8px;
+      right: -8px;
+      top: -66px;
+      height: 66px;
+      background: #b94d36;
+      border: 6px solid rgba(58, 45, 37, .72);
+    }
+
+    .shop::after {
+      content: attr(data-sign);
+      position: absolute;
+      left: 16px;
+      right: 16px;
+      top: -52px;
+      height: 38px;
+      color: #f9e8bb;
+      font-size: 30px;
+      font-weight: 800;
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 38px;
+    }
+
+    .shop-1 {
+      left: 132px;
+      width: 430px;
+      height: 260px;
+      background: #c8b071;
+    }
+
+    .shop-2 {
+      left: 548px;
+      width: 460px;
+      height: 300px;
+      background: #9fb37b;
+    }
+
+    .shop-2::before {
+      background: var(--green);
+    }
+
+    .shop-3 {
+      left: 982px;
+      width: 430px;
+      height: 245px;
+      background: #d0a36c;
+    }
+
+    .shop-3::before {
+      background: var(--blue);
+    }
+
+    .shop-4 {
+      right: 355px;
+      width: 460px;
+      height: 286px;
+      background: #b9886b;
+    }
+
+    .window {
+      position: absolute;
+      width: 122px;
+      height: 104px;
+      top: 58px;
+      background: linear-gradient(135deg, rgba(253,230,164,.88), rgba(75,87,88,.9));
+      border: 6px solid rgba(47, 40, 34, .68);
+      box-shadow: inset 0 -18px 0 rgba(0,0,0,.15);
+    }
+
+    .door {
+      position: absolute;
+      bottom: -6px;
+      width: 120px;
+      height: 182px;
+      background: linear-gradient(90deg, #533d31, #876048);
+      border: 6px solid rgba(47, 40, 34, .76);
+    }
+
+    .shop-1 .window { left: 38px; }
+    .shop-1 .door { right: 54px; }
+    .shop-2 .window { right: 42px; width: 170px; }
+    .shop-2 .door { left: 56px; }
+    .shop-3 .window { left: 42px; width: 148px; }
+    .shop-3 .door { right: 48px; }
+    .shop-4 .window { left: 44px; width: 162px; }
+    .shop-4 .door { right: 58px; }
+
+    .bike {
+      position: absolute;
+      left: 710px;
+      bottom: 278px;
+      width: 245px;
+      height: 120px;
+      opacity: .88;
+    }
+
+    .wheel {
+      position: absolute;
+      bottom: 0;
+      width: 86px;
+      height: 86px;
+      border: 9px solid #2f2a27;
+      border-radius: 50%;
+      box-shadow: inset 0 0 0 3px rgba(255,255,255,.08);
+    }
+
+    .wheel-a { left: 0; }
+    .wheel-b { right: 0; }
+
+    .bike-frame {
+      position: absolute;
+      left: 42px;
+      top: 34px;
+      width: 154px;
+      height: 64px;
+      border-left: 8px solid #2f2a27;
+      border-bottom: 8px solid #2f2a27;
+      transform: skewX(-22deg);
+    }
+
+    .boy {
+      position: absolute;
+      left: 1465px;
+      bottom: 233px;
+      width: 170px;
+      height: 360px;
+      filter: drop-shadow(20px 22px 0 rgba(0,0,0,.18));
+    }
+
+    .head {
+      position: absolute;
+      left: 51px;
+      top: 0;
+      width: 76px;
+      height: 82px;
+      border-radius: 44% 48% 46% 46%;
+      background: #352722;
+    }
+
+    .body {
+      position: absolute;
+      left: 38px;
+      top: 82px;
+      width: 96px;
+      height: 142px;
+      background: #b94d36;
+      clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
+    }
+
+    .arm {
+      position: absolute;
+      top: 100px;
+      width: 30px;
+      height: 122px;
+      background: #4f3328;
+      border-radius: 16px;
+      transform-origin: top center;
+    }
+
+    .arm-a {
+      left: 22px;
+      transform: rotate(17deg);
+    }
+
+    .arm-b {
+      right: 22px;
+      transform: rotate(-19deg);
+    }
+
+    .leg {
+      position: absolute;
+      top: 218px;
+      width: 34px;
+      height: 132px;
+      background: #263f55;
+      border-radius: 14px 14px 9px 9px;
+    }
+
+    .leg-a { left: 55px; transform: rotate(5deg); }
+    .leg-b { right: 54px; transform: rotate(-7deg); }
+
+    .marbles {
+      position: absolute;
+      left: 1342px;
+      bottom: 206px;
+      width: 385px;
+      height: 110px;
+    }
+
+    .marble {
+      position: absolute;
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      box-shadow: inset -8px -8px 12px rgba(0,0,0,.32), inset 8px 7px 9px rgba(255,255,255,.42), 8px 10px 0 rgba(0,0,0,.14);
+    }
+
+    .m1 { left: 0; top: 62px; background: #dce7e4; }
+    .m2 { left: 70px; top: 28px; background: #4f937d; }
+    .m3 { left: 125px; top: 72px; background: #c14e3e; }
+    .m4 { left: 202px; top: 48px; background: #d9ac4f; }
+    .m5 { left: 310px; top: 76px; background: #5c76a2; }
+
+    .circle-line {
+      position: absolute;
+      left: 44px;
+      top: 18px;
+      width: 265px;
+      height: 82px;
+      border: 6px solid rgba(239, 220, 164, .56);
+      border-radius: 50%;
+      transform: rotate(-8deg);
+    }
+
+    .title-area {
+      position: absolute;
+      left: 170px;
+      top: 142px;
+      width: 980px;
+      text-shadow: 0 6px 0 rgba(69, 48, 38, .16);
+    }
+
+    .eyebrow {
+      width: max-content;
+      margin-bottom: 36px;
+      padding: 10px 22px 12px;
+      color: #f9e7c2;
+      background: rgba(67, 72, 72, .58);
+      border: 3px solid rgba(249, 231, 194, .42);
+      font-size: 28px;
+      font-weight: 700;
+      letter-spacing: 0;
+    }
+
+    .title {
+      margin: 0;
+      font-size: 168px;
+      line-height: .92;
+      letter-spacing: 0;
+      color: #fff0c4;
+      -webkit-text-stroke: 6px rgba(72, 45, 36, .76);
+      paint-order: stroke fill;
+    }
+
+    .subtitle {
+      margin-top: 26px;
+      font-size: 42px;
+      line-height: 1.35;
+      color: #53392c;
+      font-weight: 800;
+    }
+
+    .menu {
+      position: absolute;
+      right: 188px;
+      bottom: 144px;
+      width: 470px;
+      display: flex;
+      flex-direction: column;
+      gap: 22px;
+    }
+
+    .menu-item {
+      position: relative;
+      height: 82px;
+      padding: 0 34px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #fff1cf;
+      background: rgba(49, 50, 47, .72);
+      border: 4px solid rgba(255, 235, 188, .42);
+      box-shadow: 14px 16px 0 rgba(0,0,0,.16);
+      font-size: 34px;
+      font-weight: 800;
+      letter-spacing: 0;
+    }
+
+    .menu-item.primary {
+      background: #b94d36;
+      border-color: #f8dda0;
+      color: #fff5d7;
+    }
+
+    .menu-item.primary::before {
+      content: "";
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: #ffe3a1;
+      box-shadow: 27px 0 0 #ffe3a1, 54px 0 0 #ffe3a1;
+    }
+
+    .menu-item span:first-child {
+      min-width: 0;
+    }
+
+    .menu-item span:last-child {
+      font-size: 26px;
+      color: rgba(255, 241, 207, .76);
+    }
+
+    .footer {
+      position: absolute;
+      left: 170px;
+      bottom: 76px;
+      width: 980px;
+      display: flex;
+      gap: 34px;
+      color: rgba(255, 238, 199, .82);
+      font-size: 24px;
+      font-weight: 700;
+      text-shadow: 0 3px 0 rgba(0,0,0,.22);
+    }
+  </style>
+</head>
+<body>
+  <main class="screen" aria-label="ChildHood game start screen">
+    <div class="sun"></div>
+    <div class="cloud cloud-a"></div>
+    <div class="cloud cloud-b"></div>
+    <div class="wires">
+      <div class="wire wire-1"></div>
+      <div class="wire wire-2"></div>
+      <div class="pole"></div>
+    </div>
+
+    <section class="title-area">
+      <div class="eyebrow">千禧年前后的城郊暑假</div>
+      <h1 class="title">我的童年</h1>
+      <div class="subtitle">ChildHood</div>
+    </section>
+
+    <section class="scene">
+      <div class="distant"></div>
+      <div class="buildings">
+        <div class="shop shop-1" data-sign="小卖部"><div class="window"></div><div class="door"></div></div>
+        <div class="shop shop-2" data-sign="文具百货"><div class="window"></div><div class="door"></div></div>
+        <div class="shop shop-3" data-sign="游戏厅"><div class="window"></div><div class="door"></div></div>
+        <div class="shop shop-4" data-sign="录像厅"><div class="window"></div><div class="door"></div></div>
+      </div>
+      <div class="sidewalk"></div>
+      <div class="bike">
+        <div class="wheel wheel-a"></div>
+        <div class="wheel wheel-b"></div>
+        <div class="bike-frame"></div>
+      </div>
+      <div class="street"></div>
+      <div class="marbles">
+        <div class="circle-line"></div>
+        <div class="marble m1"></div>
+        <div class="marble m2"></div>
+        <div class="marble m3"></div>
+        <div class="marble m4"></div>
+        <div class="marble m5"></div>
+      </div>
+      <div class="boy">
+        <div class="head"></div>
+        <div class="body"></div>
+        <div class="arm arm-a"></div>
+        <div class="arm arm-b"></div>
+        <div class="leg leg-a"></div>
+        <div class="leg leg-b"></div>
+      </div>
+    </section>
+
+    <nav class="menu" aria-label="Main menu">
+      <div class="menu-item primary"><span>开始游戏</span><span>Enter</span></div>
+      <div class="menu-item"><span>继续游戏</span><span>Load</span></div>
+      <div class="menu-item"><span>设置</span><span>Options</span></div>
+      <div class="menu-item"><span>退出</span><span>Esc</span></div>
+    </nav>
+
+    <footer class="footer">
+      <span>3D Lowpoly 视觉方向</span>
+      <span>探索 / 小游戏 / 收集 / 日常叙事</span>
+    </footer>
+    <div class="grain"></div>
+  </main>
+</body>
+</html>