Home Explore Help
Register Sign In
haiany
/
huashu-design
mirror of https://github.com/alchaincyf/huashu-design.git
1
0
Fork 0
Files Issues 0 Wiki
Tree: v2.0
Branches Tags
huashu-design
/
demos
/
c1-ios-prototype-en.html

c1-ios-prototype-en.html 34 KB
Permalink History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145 
  1. <!doctype html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8" />
    5. 

  5. <title>huashu-design V2 · c1-ios-prototype · EN</title>
    6. 

  6. <link rel="preconnect" href="https://fonts.googleapis.com">
    7. 

  7. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    8. 

  8. <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    9. 

  9. <style>
    10. 

  10.   :root {
    11. 

  11.     --bg: #000000;
    12. 

  12.     --ink: #FFFFFF;
    13. 

  13.     --ink-80: rgba(255,255,255,0.82);
    14. 

  14.     --ink-60: rgba(255,255,255,0.58);
    15. 

  15.     --muted: rgba(255,255,255,0.40);
    16. 

  16.     --dim: rgba(255,255,255,0.18);
    17. 

  17.     --hairline: rgba(255,255,255,0.12);
    18. 

  18.     --accent: #D97757;
    19. 

  19.     --accent-deep: #B85D3D;
    20. 

  20.     --cd-bg: #F5F4F0;
    21. 

  21.     --cd-ink: #1A1918;
    22. 

  22.     --cd-dim: #8B867E;
    23. 

  23.     --cd-green: #2D4A3A;
    24. 

  24. 

  25.     --serif-en: "Source Serif 4", Georgia, serif;
    26. 

  26.     --serif-cn: "Noto Serif SC", "Songti SC", serif;
    27. 

  27.     --sans: "Inter", -apple-system, "PingFang SC", sans-serif;
    28. 

  28.     --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    29. 

  29.   }
    30. 

  30.   html, body {
    31. 

  31.     margin: 0; padding: 0;
    32. 

  32.     background: #000;
    33. 

  33.     overflow: hidden;
    34. 

  34.     font-family: var(--sans);
    35. 

  35.     color: var(--ink);
    36. 

  36.     -webkit-font-smoothing: antialiased;
    37. 

  37.   }
    38. 

  38.   * { box-sizing: border-box; }
    39. 

  39. 

  40.   .stage {
    41. 

  41.     position: fixed;
    42. 

  42.     top: 50%; left: 50%;
    43. 

  43.     width: 1920px; height: 1080px;
    44. 

  44.     transform-origin: center center;
    45. 

  45.     background: var(--bg);
    46. 

  46.     overflow: hidden;
    47. 

  47.   }
    48. 

  48. 

  49.   /* Film grain */
    50. 

  50.   .stage::after {
    51. 

  51.     content: '';
    52. 

  52.     position: absolute; inset: 0;
    53. 

  53.     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.4'/></svg>");
    54. 

  54.     opacity: 0.02;
    55. 

  55.     pointer-events: none;
    56. 

  56.     mix-blend-mode: overlay;
    57. 

  57.     z-index: 200;
    58. 

  58.   }
    59. 

  59. 

  60.   /* Watermark — always on top, adapts in brand reveal (handled by JS) */
    61. 

  61.   .watermark {
    62. 

  62.     position: absolute;
    63. 

  63.     top: 36px; left: 48px;
    64. 

  64.     font-family: var(--mono);
    65. 

  65.     font-size: 13px;
    66. 

  66.     letter-spacing: 0.2em;
    67. 

  67.     color: rgba(255,255,255,0.16);
    68. 

  68.     text-transform: uppercase;
    69. 

  69.     z-index: 400;
    70. 

  70.     pointer-events: none;
    71. 

  71.     transition: color 0.4s;
    72. 

  72.   }
    73. 

  73.   .watermark.on-light { color: rgba(26,25,24,0.22); }
    74. 

  74. 

  75.   /* ============ Terminal (left) ============ */
    76. 

  76.   .terminal {
    77. 

  77.     position: absolute;
    78. 

  78.     top: 50%;
    79. 

  79.     left: 120px;
    80. 

  80.     transform: translateY(-50%);
    81. 

  81.     width: 620px;
    82. 

  82.     background: rgba(18, 18, 18, 1);
    83. 

  83.     border: 1px solid var(--hairline);
    84. 

  84.     border-radius: 14px;
    85. 

  85.     overflow: hidden;
    86. 

  86.     opacity: 0;
    87. 

  87.     will-change: opacity, transform;
    88. 

  88.     box-shadow:
    89. 

  89.       0 0 0 1px rgba(255,255,255,0.02),
    90. 

  90.       0 40px 80px -20px rgba(217,119,87,0.12);
    91. 

  91.   }
    92. 

  92.   .tty-head {
    93. 

  93.     display: flex; align-items: center; gap: 8px;
    94. 

  94.     padding: 14px 18px;
    95. 

  95.     border-bottom: 1px solid var(--hairline);
    96. 

  96.     background: rgba(255,255,255,0.02);
    97. 

  97.   }
    98. 

  98.   .tty-head .d { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.1); }
    99. 

  99.   .tty-head .d.r { background: #5a2a2a; }
    100. 

  100.   .tty-head .d.y { background: #5a4a2a; }
    101. 

  101.   .tty-head .d.g { background: #2a5a35; }
    102. 

  102.   .tty-head .title {
    103. 

  103.     margin-left: 14px;
    104. 

  104.     font-family: var(--mono);
    105. 

  105.     font-size: 12px;
    106. 

  106.     color: var(--muted);
    107. 

  107.     letter-spacing: 0.04em;
    108. 

  108.   }
    109. 

  109.   .tty-body {
    110. 

  110.     padding: 32px 28px;
    111. 

  111.     font-family: var(--mono);
    112. 

  112.     font-size: 20px;
    113. 

  113.     line-height: 1.7;
    114. 

  114.     color: rgba(255,255,255,0.88);
    115. 

  115.     min-height: 220px;
    116. 

  116.   }
    117. 

  117.   .prompt { color: var(--accent); margin-right: 10px; }
    118. 

  118.   .comment { color: var(--ink-60); font-size: 16px; margin-bottom: 10px; }
    119. 

  119.   .typed { white-space: pre; }
    120. 

  120.   .cursor {
    121. 

  121.     display: inline-block;
    122. 

  122.     width: 10px; height: 24px;
    123. 

  123.     background: var(--accent);
    124. 

  124.     vertical-align: -4px;
    125. 

  125.     margin-left: 2px;
    126. 

  126.     animation: blink 1s steps(2) infinite;
    127. 

  127.   }
    128. 

  128.   @keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
    129. 

  129. 

  130.   /* Arrow connector terminal → iPhone */
    131. 

  131.   .connector {
    132. 

  132.     position: absolute;
    133. 

  133.     top: 50%;
    134. 

  134.     left: 740px;
    135. 

  135.     width: 160px;
    136. 

  136.     height: 2px;
    137. 

  137.     transform: translateY(-50%);
    138. 

  138.     opacity: 0;
    139. 

  139.     background: linear-gradient(90deg, var(--accent) 0%, rgba(217,119,87,0) 100%);
    140. 

  140.     transform-origin: left center;
    141. 

  141.     will-change: opacity, transform;
    142. 

  142.   }
    143. 

  143. 

  144.   /* ============ iPhone ============ */
    145. 

  145.   .phone-wrap {
    146. 

  146.     position: absolute;
    147. 

  147.     top: 50%;
    148. 

  148.     left: 1020px;
    149. 

  149.     transform: translateY(-50%);
    150. 

  150.     opacity: 0;
    151. 

  151.     will-change: opacity, transform;
    152. 

  152.   }
    153. 

  153.   .phone {
    154. 

  154.     width: 440px;
    155. 

  155.     height: 900px;
    156. 

  156.     background: #0e0e10;
    157. 

  157.     border-radius: 58px;
    158. 

  158.     padding: 12px;
    159. 

  159.     position: relative;
    160. 

  160.     box-shadow:
    161. 

  161.       0 0 0 1.5px rgba(255,255,255,0.14),
    162. 

  162.       0 0 0 8px rgba(30,30,32,1),
    163. 

  163.       0 80px 160px -20px rgba(0,0,0,0.85),
    164. 

  164.       0 30px 70px -20px rgba(217,119,87,0.1);
    165. 

  165.   }
    166. 

  166.   .phone::before {
    167. 

  167.     /* subtle metallic ring */
    168. 

  168.     content: '';
    169. 

  169.     position: absolute;
    170. 

  170.     inset: -4px;
    171. 

  171.     border-radius: 62px;
    172. 

  172.     background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 40%, rgba(217,119,87,0.05) 80%, rgba(255,255,255,0.08));
    173. 

  173.     z-index: -1;
    174. 

  174.   }
    175. 

  175.   .screen {
    176. 

  176.     width: 416px;
    177. 

  177.     height: 876px;
    178. 

  178.     border-radius: 46px;
    179. 

  179.     overflow: hidden;
    180. 

  180.     position: relative;
    181. 

  181.     background: #F5F4F0;  /* default: claude mist */
    182. 

  182.   }
    183. 

  183.   .screen.dark { background: #0a0a0a; }
    184. 

  184. 

  185.   /* Dynamic island */
    186. 

  186.   .island {
    187. 

  187.     position: absolute;
    188. 

  188.     top: 14px;
    189. 

  189.     left: 50%;
    190. 

  190.     transform: translateX(-50%);
    191. 

  191.     width: 120px;
    192. 

  192.     height: 34px;
    193. 

  193.     background: #000;
    194. 

  194.     border-radius: 999px;
    195. 

  195.     z-index: 30;
    196. 

  196.   }
    197. 

  197.   /* Status bar */
    198. 

  198.   .status-bar {
    199. 

  199.     position: absolute;
    200. 

  200.     top: 0; left: 0; right: 0;
    201. 

  201.     height: 54px;
    202. 

  202.     display: flex;
    203. 

  203.     align-items: center;
    204. 

  204.     justify-content: space-between;
    205. 

  205.     padding: 18px 34px 0 34px;
    206. 

  206.     font-family: -apple-system, "SF Pro Text", sans-serif;
    207. 

  207.     font-size: 15px;
    208. 

  208.     font-weight: 600;
    209. 

  209.     z-index: 20;
    210. 

  210.     pointer-events: none;
    211. 

  211.     color: inherit;
    212. 

  212.   }
    213. 

  213.   .status-bar .icons {
    214. 

  214.     display: flex; align-items: center; gap: 6px;
    215. 

  215.   }
    216. 

  216.   .status-bar .icons .bars {
    217. 

  217.     display: flex; align-items: flex-end; gap: 2px; height: 11px;
    218. 

  218.   }
    219. 

  219.   .status-bar .icons .bars div {
    220. 

  220.     width: 3px; background: currentColor; border-radius: 1px;
    221. 

  221.   }
    222. 

  222.   .status-bar .icons .bat {
    223. 

  223.     width: 26px; height: 12px;
    224. 

  224.     border: 1.2px solid currentColor; border-radius: 3px; padding: 1px;
    225. 

  225.     position: relative;
    226. 

  226.     opacity: 0.9;
    227. 

  227.   }
    228. 

  228.   .status-bar .icons .bat::after {
    229. 

  229.     content: ''; position: absolute; top: 3px; right: -3px; width: 2px; height: 6px;
    230. 

  230.     background: currentColor; border-radius: 0 1px 1px 0;
    231. 

  231.   }
    232. 

  232.   .status-bar .icons .bat .fill {
    233. 

  233.     width: 84%; height: 100%; background: currentColor; border-radius: 1px;
    234. 

  234.   }
    235. 

  235.   .home-indicator {
    236. 

  236.     position: absolute;
    237. 

  237.     bottom: 10px;
    238. 

  238.     left: 50%;
    239. 

  239.     transform: translateX(-50%);
    240. 

  240.     width: 140px;
    241. 

  241.     height: 5px;
    242. 

  242.     background: rgba(0,0,0,0.3);
    243. 

  243.     border-radius: 999px;
    244. 

  244.     z-index: 10;
    245. 

  245.   }
    246. 

  246.   .screen.dark .home-indicator { background: rgba(255,255,255,0.5); }
    247. 

  247. 

  248.   /* Content area (below status bar) */
    249. 

  249.   .content {
    250. 

  250.     position: absolute;
    251. 

  251.     top: 64px; left: 0; right: 0; bottom: 30px;
    252. 

  252.     overflow: hidden;
    253. 

  253.     z-index: 5;
    254. 

  254.   }
    255. 

  255. 

  256.   /* Screen views */
    257. 

  257.   .screen-view {
    258. 

  258.     position: absolute;
    259. 

  259.     inset: 0;
    260. 

  260.     opacity: 0;
    261. 

  261.     will-change: opacity, transform;
    262. 

  262.   }
    263. 

  263. 

  264.   /* 1. Wireframe (ghost) */
    265. 

  265.   .wire {
    266. 

  266.     padding: 40px 28px;
    267. 

  267.   }
    268. 

  268.   .wire .ghost {
    269. 

  269.     background: rgba(26, 25, 24, 0.08);
    270. 

  270.     border-radius: 10px;
    271. 

  271.     margin-bottom: 14px;
    272. 

  272.   }
    273. 

  273.   .wire .g1 { height: 36px; width: 60%; }
    274. 

  274.   .wire .g2 { height: 180px; }
    275. 

  275.   .wire .g3 { height: 20px; width: 80%; }
    276. 

  276.   .wire .g4 { height: 20px; width: 50%; }
    277. 

  277.   .wire .g5 { height: 52px; margin-top: 24px; }
    278. 

  278. 

  279.   /* 2. Home screen — 主屏 · pomodoro */
    280. 

  280.   .home-screen { padding: 40px 28px; color: var(--cd-ink); }
    281. 

  281.   .home-screen .kicker {
    282. 

  282.     font-family: var(--mono);
    283. 

  283.     font-size: 12px;
    284. 

  284.     letter-spacing: 0.22em;
    285. 

  285.     color: var(--cd-dim);
    286. 

  286.     text-transform: uppercase;
    287. 

  287.   }
    288. 

  288.   .home-screen .title {
    289. 

  289.     font-family: var(--serif-en);
    290. 

  290.     font-size: 48px;
    291. 

  291.     font-weight: 300;
    292. 

  292.     line-height: 1.02;
    293. 

  293.     margin-top: 14px;
    294. 

  294.     letter-spacing: -0.035em;
    295. 

  295.     font-style: italic;
    296. 

  296.   }
    297. 

  297.   .home-screen .time-big {
    298. 

  298.     margin-top: 50px;
    299. 

  299.     font-family: var(--serif-en);
    300. 

  300.     font-size: 168px;
    301. 

  301.     font-weight: 200;
    302. 

  302.     line-height: 0.95;
    303. 

  303.     letter-spacing: -0.04em;
    304. 

  304.     color: var(--cd-ink);
    305. 

  305.   }
    306. 

  306.   .home-screen .time-big .sep { color: var(--accent); }
    307. 

  307.   .home-screen .sub {
    308. 

  308.     font-family: var(--sans);
    309. 

  309.     font-size: 15px;
    310. 

  310.     color: var(--cd-dim);
    311. 

  311.     margin-top: 18px;
    312. 

  312.     letter-spacing: 0.02em;
    313. 

  313.   }
    314. 

  314.   .home-screen .cta {
    315. 

  315.     margin-top: 64px;
    316. 

  316.     height: 62px;
    317. 

  317.     background: var(--cd-ink);
    318. 

  318.     color: #fff;
    319. 

  319.     border-radius: 999px;
    320. 

  320.     display: flex; align-items: center; justify-content: center;
    321. 

  321.     font-family: var(--sans);
    322. 

  322.     font-size: 17px;
    323. 

  323.     font-weight: 500;
    324. 

  324.     letter-spacing: 0.04em;
    325. 

  325.     position: relative;
    326. 

  326.   }
    327. 

  327.   .home-screen .cta::before {
    328. 

  328.     content: '';
    329. 

  329.     width: 0; height: 0;
    330. 

  330.     border-left: 10px solid #fff;
    331. 

  331.     border-top: 7px solid transparent;
    332. 

  332.     border-bottom: 7px solid transparent;
    333. 

  333.     margin-right: 10px;
    334. 

  334.   }
    335. 

  335. 

  336.   /* 3. Timer · 计时 · ring */
    337. 

  337.   .timer-screen {
    338. 

  338.     padding: 40px 28px;
    339. 

  339.     color: var(--cd-ink);
    340. 

  340.     text-align: center;
    341. 

  341.   }
    342. 

  342.   .timer-screen .phase {
    343. 

  343.     font-family: var(--mono);
    344. 

  344.     font-size: 12px;
    345. 

  345.     letter-spacing: 0.24em;
    346. 

  346.     color: var(--accent);
    347. 

  347.     text-transform: uppercase;
    348. 

  348.     text-align: left;
    349. 

  349.   }
    350. 

  350.   .ring-wrap {
    351. 

  351.     margin: 80px auto 0;
    352. 

  352.     width: 320px; height: 320px;
    353. 

  353.     position: relative;
    354. 

  354.   }
    355. 

  355.   .ring-wrap svg {
    356. 

  356.     width: 100%; height: 100%;
    357. 

  357.     transform: rotate(-90deg);
    358. 

  358.   }
    359. 

  359.   .ring-wrap .bg-ring {
    360. 

  360.     fill: none; stroke: rgba(26,25,24,0.08); stroke-width: 14;
    361. 

  361.   }
    362. 

  362.   .ring-wrap .fg-ring {
    363. 

  363.     fill: none; stroke: #D97757; stroke-width: 14; stroke-linecap: round;
    364. 

  364.     stroke-dasharray: 880;
    365. 

  365.     stroke-dashoffset: 880;
    366. 

  366.   }
    367. 

  367.   .ring-wrap .ring-label {
    368. 

  368.     position: absolute;
    369. 

  369.     top: 50%; left: 50%;
    370. 

  370.     transform: translate(-50%, -50%);
    371. 

  371.     text-align: center;
    372. 

  372.   }
    373. 

  373.   .ring-wrap .rl-time {
    374. 

  374.     font-family: var(--serif-en);
    375. 

  375.     font-size: 86px;
    376. 

  376.     font-weight: 200;
    377. 

  377.     line-height: 1;
    378. 

  378.     letter-spacing: -0.03em;
    379. 

  379.     color: var(--cd-ink);
    380. 

  380.   }
    381. 

  381.   .ring-wrap .rl-tag {
    382. 

  382.     margin-top: 10px;
    383. 

  383.     font-family: var(--mono);
    384. 

  384.     font-size: 12px;
    385. 

  385.     letter-spacing: 0.2em;
    386. 

  386.     color: var(--cd-dim);
    387. 

  387.     text-transform: uppercase;
    388. 

  388.   }
    389. 

  389.   .timer-screen .actions {
    390. 

  390.     margin-top: 60px;
    391. 

  391.     display: flex; gap: 14px; justify-content: center;
    392. 

  392.   }
    393. 

  393.   .timer-screen .act-btn {
    394. 

  394.     padding: 14px 32px;
    395. 

  395.     border-radius: 999px;
    396. 

  396.     background: rgba(26,25,24,0.05);
    397. 

  397.     font-family: var(--sans);
    398. 

  398.     font-size: 14px;
    399. 

  399.     font-weight: 500;
    400. 

  400.     color: var(--cd-ink);
    401. 

  401.     letter-spacing: 0.04em;
    402. 

  402.     border: 1px solid rgba(26,25,24,0.08);
    403. 

  403.   }
    404. 

  404.   .timer-screen .act-btn.primary {
    405. 

  405.     background: var(--cd-ink);
    406. 

  406.     color: #fff;
    407. 

  407.     border-color: transparent;
    408. 

  408.   }
    409. 

  409. 

  410.   /* 4. Stats · 统计 · bar chart */
    411. 

  411.   .stats-screen { padding: 40px 28px; color: var(--cd-ink); }
    412. 

  412.   .stats-screen .stats-label {
    413. 

  413.     font-family: var(--mono);
    414. 

  414.     font-size: 12px;
    415. 

  415.     letter-spacing: 0.24em;
    416. 

  416.     color: var(--cd-dim);
    417. 

  417.     text-transform: uppercase;
    418. 

  418.   }
    419. 

  419.   .stats-screen .stats-hero {
    420. 

  420.     font-family: var(--serif-en);
    421. 

  421.     font-size: 120px;
    422. 

  422.     font-weight: 200;
    423. 

  423.     line-height: 1;
    424. 

  424.     letter-spacing: -0.04em;
    425. 

  425.     margin-top: 10px;
    426. 

  426.   }
    427. 

  427.   .stats-screen .stats-hero .unit {
    428. 

  428.     font-size: 28px;
    429. 

  429.     color: var(--cd-dim);
    430. 

  430.     margin-left: 8px;
    431. 

  431.     font-weight: 300;
    432. 

  432.   }
    433. 

  433.   .stats-screen .stats-sub {
    434. 

  434.     font-family: var(--sans);
    435. 

  435.     font-size: 14px;
    436. 

  436.     color: var(--cd-dim);
    437. 

  437.     margin-top: 6px;
    438. 

  438.     letter-spacing: 0.02em;
    439. 

  439.   }
    440. 

  440.   .chart {
    441. 

  441.     margin-top: 52px;
    442. 

  442.     display: flex;
    443. 

  443.     gap: 10px;
    444. 

  444.     align-items: flex-end;
    445. 

  445.     height: 200px;
    446. 

  446.     padding: 0 4px;
    447. 

  447.   }
    448. 

  448.   .chart .bar {
    449. 

  449.     flex: 1;
    450. 

  450.     background: var(--accent);
    451. 

  451.     border-radius: 6px 6px 0 0;
    452. 

  452.     opacity: 0.85;
    453. 

  453.     transform-origin: bottom;
    454. 

  454.     will-change: transform;
    455. 

  455.   }
    456. 

  456.   .chart .bar.dim { background: rgba(26,25,24,0.15); }
    457. 

  457.   .chart-x {
    458. 

  458.     display: flex;
    459. 

  459.     justify-content: space-between;
    460. 

  460.     margin-top: 12px;
    461. 

  461.     font-family: var(--mono);
    462. 

  462.     font-size: 10px;
    463. 

  463.     color: var(--cd-dim);
    464. 

  464.     letter-spacing: 0.08em;
    465. 

  465.     padding: 0 4px;
    466. 

  466.   }
    467. 

  467. 

  468.   /* 5. Settings · 设置 · list */
    469. 

  469.   .settings-screen { padding: 40px 28px; color: var(--cd-ink); }
    470. 

  470.   .settings-screen .title-row {
    471. 

  471.     font-family: var(--serif-en);
    472. 

  472.     font-size: 48px;
    473. 

  473.     font-weight: 300;
    474. 

  474.     letter-spacing: -0.035em;
    475. 

  475.     font-style: italic;
    476. 

  476.   }
    477. 

  477.   .settings-screen .list {
    478. 

  478.     margin-top: 40px;
    479. 

  479.     background: #FFFFFF;
    480. 

  480.     border-radius: 14px;
    481. 

  481.     overflow: hidden;
    482. 

  482.     border: 1px solid rgba(26,25,24,0.06);
    483. 

  483.   }
    484. 

  484.   .settings-screen .row {
    485. 

  485.     padding: 22px 24px;
    486. 

  486.     display: flex;
    487. 

  487.     align-items: center;
    488. 

  488.     justify-content: space-between;
    489. 

  489.     border-bottom: 1px solid rgba(26,25,24,0.06);
    490. 

  490.   }
    491. 

  491.   .settings-screen .row:last-child { border-bottom: none; }
    492. 

  492.   .settings-screen .row .k {
    493. 

  493.     font-family: var(--sans);
    494. 

  494.     font-size: 16px;
    495. 

  495.     color: var(--cd-ink);
    496. 

  496.   }
    497. 

  497.   .settings-screen .row .v {
    498. 

  498.     font-family: var(--mono);
    499. 

  499.     font-size: 13px;
    500. 

  500.     color: var(--cd-dim);
    501. 

  501.     letter-spacing: 0.04em;
    502. 

  502.   }
    503. 

  503.   .toggle {
    504. 

  504.     width: 48px; height: 28px;
    505. 

  505.     border-radius: 999px;
    506. 

  506.     background: var(--cd-green);
    507. 

  507.     position: relative;
    508. 

  508.   }
    509. 

  509.   .toggle::after {
    510. 

  510.     content: ''; position: absolute;
    511. 

  511.     top: 3px; right: 3px;
    512. 

  512.     width: 22px; height: 22px;
    513. 

  513.     background: #fff;
    514. 

  514.     border-radius: 50%;
    515. 

  515.     box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    516. 

  516.   }
    517. 

  517.   .toggle.off { background: rgba(26,25,24,0.15); }
    518. 

  518.   .toggle.off::after { left: 3px; right: auto; }
    519. 

  519. 

  520.   /* Tab bar (bottom of home-like screens) */
    521. 

  521.   .tab-bar {
    522. 

  522.     position: absolute;
    523. 

  523.     bottom: 30px; left: 28px; right: 28px;
    524. 

  524.     height: 58px;
    525. 

  525.     background: #FFFFFF;
    526. 

  526.     border-radius: 999px;
    527. 

  527.     border: 1px solid rgba(26,25,24,0.08);
    528. 

  528.     display: flex;
    529. 

  529.     justify-content: space-around;
    530. 

  530.     align-items: center;
    531. 

  531.     padding: 0 14px;
    532. 

  532.     box-shadow: 0 10px 28px -10px rgba(0,0,0,0.15);
    533. 

  533.   }
    534. 

  534.   .tab-bar .tab {
    535. 

  535.     display: flex;
    536. 

  536.     flex-direction: column;
    537. 

  537.     align-items: center;
    538. 

  538.     gap: 2px;
    539. 

  539.     font-family: var(--mono);
    540. 

  540.     font-size: 10px;
    541. 

  541.     color: var(--cd-dim);
    542. 

  542.     letter-spacing: 0.1em;
    543. 

  543.     text-transform: uppercase;
    544. 

  544.     padding: 8px 14px;
    545. 

  545.     border-radius: 999px;
    546. 

  546.   }
    547. 

  547.   .tab-bar .tab.active {
    548. 

  548.     background: var(--cd-ink);
    549. 

  549.     color: #fff;
    550. 

  550.   }
    551. 

  551.   .tab-bar .tab .ico {
    552. 

  552.     width: 18px; height: 18px;
    553. 

  553.     border-radius: 4px;
    554. 

  554.     background: currentColor;
    555. 

  555.     opacity: 0.9;
    556. 

  556.     margin-bottom: 3px;
    557. 

  557.   }
    558. 

  558. 

  559.   /* Finger / tap */
    560. 

  560.   .tap {
    561. 

  561.     position: absolute;
    562. 

  562.     z-index: 40;
    563. 

  563.     width: 64px; height: 64px;
    564. 

  564.     pointer-events: none;
    565. 

  565.     opacity: 0;
    566. 

  566.     will-change: opacity, transform;
    567. 

  567.   }
    568. 

  568.   .tap .core {
    569. 

  569.     position: absolute;
    570. 

  570.     inset: 18px;
    571. 

  571.     background: rgba(217, 119, 87, 0.85);
    572. 

  572.     border-radius: 50%;
    573. 

  573.     box-shadow: 0 0 0 2px rgba(255,255,255,0.5), 0 0 24px rgba(217,119,87,0.5);
    574. 

  574.   }
    575. 

  575.   .tap .ring {
    576. 

  576.     position: absolute;
    577. 

  577.     inset: 0;
    578. 

  578.     border: 2px solid rgba(217,119,87,0.6);
    579. 

  579.     border-radius: 50%;
    580. 

  580.     animation: tapring 0.6s ease-out;
    581. 

  581.   }
    582. 

  582.   @keyframes tapring {
    583. 

  583.     0% { transform: scale(0.4); opacity: 1; }
    584. 

  584.     100% { transform: scale(1.3); opacity: 0; }
    585. 

  585.   }
    586. 

  586. 

  587.   /* ============ Brand Reveal ============ */
    588. 

  588.   .brand-wall {
    589. 

  589.     position: absolute;
    590. 

  590.     inset: 0;
    591. 

  591.     background: var(--cd-bg);
    592. 

  592.     z-index: 300;
    593. 

  593.     opacity: 0;
    594. 

  594.     transform: translateY(100%);
    595. 

  595.     will-change: transform, opacity;
    596. 

  596.     display: flex;
    597. 

  597.     flex-direction: column;
    598. 

  598.     align-items: center;
    599. 

  599.     justify-content: center;
    600. 

  600.   }
    601. 

  601.   .brand-wordmark {
    602. 

  602.     font-family: var(--serif-en);
    603. 

  603.     font-size: 132px;
    604. 

  604.     font-weight: 200;
    605. 

  605.     color: var(--cd-ink);
    606. 

  606.     letter-spacing: -0.04em;
    607. 

  607.     line-height: 1;
    608. 

  608.     opacity: 0;
    609. 

  609.     transform: scale(0.92);
    610. 

  610.     will-change: opacity, transform;
    611. 

  611.   }
    612. 

  612.   .brand-wordmark .dot { color: var(--accent); padding: 0 10px; font-weight: 300; }
    613. 

  613.   .brand-underline {
    614. 

  614.     margin-top: 28px;
    615. 

  615.     height: 2px;
    616. 

  616.     width: 0;
    617. 

  617.     background: var(--accent);
    618. 

  618.     will-change: width;
    619. 

  619.   }
    620. 

  620.   .brand-cn {
    621. 

  621.     margin-top: 30px;
    622. 

  622.     font-family: var(--serif-en);
    623. 

  623.     font-style: italic;
    624. 

  624.     font-size: 22px;
    625. 

  625.     font-weight: 300;
    626. 

  626.     color: var(--cd-dim);
    627. 

  627.     letter-spacing: 0.12em;
    628. 

  628.     opacity: 0;
    629. 

  629.     will-change: opacity;
    630. 

  630.   }
    631. 

  631. </style>
    632. 

  632. </head>
    633. 

  633. <body>
    634. 

  634. 

  635. <div class="stage" id="stage">
    636. 

  636. 

  637.   <div class="watermark">HUASHU · DESIGN</div>
    638. 

  638. 

  639.   <!-- Terminal -->
    640. 

  640.   <div class="terminal" id="terminal">
    641. 

  641.     <div class="tty-head">
    642. 

  642.       <div class="d r"></div>
    643. 

  643.       <div class="d y"></div>
    644. 

  644.       <div class="d g"></div>
    645. 

  645.       <div class="title">~/projects</div>
    646. 

  646.     </div>
    647. 

  647.     <div class="tty-body">
    648. 

  648.       <div class="comment" id="comment" style="opacity:0">&gt; Type a sentence, get a clickable app.</div>
    649. 

  649.       <div style="margin-top:6px">
    650. 

  650.         <span class="prompt">$</span><span class="typed" id="typed"></span><span class="cursor" id="ttyCursor"></span>
    651. 

  651.       </div>
    652. 

  652.     </div>
    653. 

  653.   </div>
    654. 

  654. 

  655.   <div class="connector" id="connector"></div>
    656. 

  656. 

  657.   <!-- Phone -->
    658. 

  658.   <div class="phone-wrap" id="phoneWrap">
    659. 

  659.     <div class="phone">
    660. 

  660.       <div class="screen" id="screen">
    661. 

  661. 

  662.         <!-- Status bar -->
    663. 

  663.         <div class="status-bar" id="statusBar" style="color:#1A1918">
    664. 

  664.           <span>9:41</span>
    665. 

  665.           <div class="icons">
    666. 

  666.             <div class="bars">
    667. 

  667.               <div style="height:4px"></div>
    668. 

  668.               <div style="height:6px"></div>
    669. 

  669.               <div style="height:8px"></div>
    670. 

  670.               <div style="height:10px"></div>
    671. 

  671.             </div>
    672. 

  672.             <div class="bat"><div class="fill"></div></div>
    673. 

  673.           </div>
    674. 

  674.         </div>
    675. 

  675. 

  676.         <div class="island"></div>
    677. 

  677. 

  678.         <div class="content">
    679. 

  679. 

  680.           <!-- 1. Wireframe -->
    681. 

  681.           <div class="screen-view" id="view-wire">
    682. 

  682.             <div class="wire">
    683. 

  683.               <div class="ghost g1"></div>
    684. 

  684.               <div class="ghost g2"></div>
    685. 

  685.               <div class="ghost g3"></div>
    686. 

  686.               <div class="ghost g4"></div>
    687. 

  687.               <div class="ghost g5"></div>
    688. 

  688.             </div>
    689. 

  689.           </div>
    690. 

  690. 

  691.           <!-- 2. Home -->
    692. 

  692.           <div class="screen-view" id="view-home">
    693. 

  693.             <div class="home-screen">
    694. 

  694.               <div class="kicker">POMODORO</div>
    695. 

  695.               <div class="title">Next up.</div>
    696. 

  696.               <div class="time-big">25<span class="sep">:</span>00</div>
    697. 

  697.               <div class="sub">Write one section. Rest five minutes.</div>
    698. 

  698.               <div class="cta">Focus now</div>
    699. 

  699.             </div>
    700. 

  700.           </div>
    701. 

  701. 

  702.           <!-- 3. Timer -->
    703. 

  703.           <div class="screen-view" id="view-timer">
    704. 

  704.             <div class="timer-screen">
    705. 

  705.               <div class="phase">FOCUS · ROUND 1</div>
    706. 

  706.               <div class="ring-wrap">
    707. 

  707.                 <svg viewBox="0 0 320 320">
    708. 

  708.                   <circle class="bg-ring" cx="160" cy="160" r="140"/>
    709. 

  709.                   <circle class="fg-ring" id="fgRing" cx="160" cy="160" r="140"/>
    710. 

  710.                 </svg>
    711. 

  711.                 <div class="ring-label">
    712. 

  712.                   <div class="rl-time" id="ringTime">24:12</div>
    713. 

  713.                   <div class="rl-tag">REMAINING</div>
    714. 

  714.                 </div>
    715. 

  715.               </div>
    716. 

  716.               <div class="actions">
    717. 

  717.                 <div class="act-btn">Pause</div>
    718. 

  718.                 <div class="act-btn primary">Skip</div>
    719. 

  719.               </div>
    720. 

  720.             </div>
    721. 

  721.           </div>
    722. 

  722. 

  723.           <!-- 4. Stats -->
    724. 

  724.           <div class="screen-view" id="view-stats">
    725. 

  725.             <div class="stats-screen">
    726. 

  726.               <div class="stats-label">THIS WEEK</div>
    727. 

  727.               <div class="stats-hero">23<span class="unit">rounds</span></div>
    728. 

  728.               <div class="stats-sub">+5 from last week</div>
    729. 

  729.               <div class="chart" id="chart">
    730. 

  730.                 <div class="bar dim" style="height:30%"></div>
    731. 

  731.                 <div class="bar" style="height:52%"></div>
    732. 

  732.                 <div class="bar" style="height:70%"></div>
    733. 

  733.                 <div class="bar" style="height:42%"></div>
    734. 

  734.                 <div class="bar" style="height:86%"></div>
    735. 

  735.                 <div class="bar" style="height:95%"></div>
    736. 

  736.                 <div class="bar" style="height:64%"></div>
    737. 

  737.               </div>
    738. 

  738.               <div class="chart-x">
    739. 

  739.                 <span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span><span>S</span>
    740. 

  740.               </div>
    741. 

  741.             </div>
    742. 

  742.           </div>
    743. 

  743. 

  744.           <!-- 5. Settings -->
    745. 

  745.           <div class="screen-view" id="view-settings">
    746. 

  746.             <div class="settings-screen">
    747. 

  747.               <div class="title-row">Settings</div>
    748. 

  748.               <div class="list">
    749. 

  749.                 <div class="row">
    750. 

  750.                   <span class="k">Focus length</span>
    751. 

  751.                   <span class="v">25 MIN</span>
    752. 

  752.                 </div>
    753. 

  753.                 <div class="row">
    754. 

  754.                   <span class="k">White noise</span>
    755. 

  755.                   <div class="toggle"></div>
    756. 

  756.                 </div>
    757. 

  757.                 <div class="row">
    758. 

  758.                   <span class="k">Ring alert</span>
    759. 

  759.                   <div class="toggle off"></div>
    760. 

  760.                 </div>
    761. 

  761.                 <div class="row">
    762. 

  762.                   <span class="k">Theme</span>
    763. 

  763.                   <span class="v">CLAUDE MIST</span>
    764. 

  764.                 </div>
    765. 

  765.               </div>
    766. 

  766.             </div>
    767. 

  767.           </div>
    768. 

  768. 

  769.           <!-- Tab bar (shared, appears on home/stats/settings) -->
    770. 

  770.           <div class="tab-bar" id="tabBar" style="display:none">
    771. 

  771.             <div class="tab active" data-tab="home">
    772. 

  772.               <div class="ico"></div>
    773. 

  773.               <span>HOME</span>
    774. 

  774.             </div>
    775. 

  775.             <div class="tab" data-tab="timer">
    776. 

  776.               <div class="ico"></div>
    777. 

  777.               <span>TIMER</span>
    778. 

  778.             </div>
    779. 

  779.             <div class="tab" data-tab="stats">
    780. 

  780.               <div class="ico"></div>
    781. 

  781.               <span>STATS</span>
    782. 

  782.             </div>
    783. 

  783.             <div class="tab" data-tab="settings">
    784. 

  784.               <div class="ico"></div>
    785. 

  785.               <span>SET</span>
    786. 

  786.             </div>
    787. 

  787.           </div>
    788. 

  788. 

  789.         </div>
    790. 

  790. 

  791.         <div class="home-indicator"></div>
    792. 

  792. 

  793.         <!-- Tap overlay (inside screen so z-index > content) -->
    794. 

  794.         <div class="tap" id="tap">
    795. 

  795.           <div class="ring"></div>
    796. 

  796.           <div class="core"></div>
    797. 

  797.         </div>
    798. 

  798. 

  799.       </div>
    800. 

  800.     </div>
    801. 

  801.   </div>
    802. 

  802. 

  803.   <!-- Brand reveal -->
    804. 

  804.   <div class="brand-wall" id="brandWall">
    805. 

  805.     <div class="brand-wordmark" id="brandWord">huashu<span class="dot">·</span>design</div>
    806. 

  806.     <div class="brand-underline" id="brandLine"></div>
    807. 

  807.     <div class="brand-cn" id="brandCn">Say it. Get an app.</div>
    808. 

  808.   </div>
    809. 

  809. 

  810. </div>
    811. 

  811. 

  812. <script>
    813. 

  813. (() => {
    814. 

  814.   // ── Scale to viewport (1920×1080 canvas) ─────────────────────────
    815. 

  815.   function fit() {
    816. 

  816.     const stage = document.getElementById('stage');
    817. 

  817.     const s = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
    818. 

  818.     stage.style.transform = `translate(-50%, -50%) scale(${s})`;
    819. 

  819.   }
    820. 

  820.   fit();
    821. 

  821.   window.addEventListener('resize', fit);
    822. 

  822. 

  823.   // ── Easing ───────────────────────────────────────────────────────
    824. 

  824.   const expoOut = t => (t <= 0 ? 0 : t >= 1 ? 1 : 1 - Math.pow(2, -10 * t));
    825. 

  825.   const expoIn  = t => (t <= 0 ? 0 : t >= 1 ? 1 : Math.pow(2, 10 * (t - 1)));
    826. 

  826.   const cubicInOut = t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2, 3)/2;
    827. 

  827.   const cubicOut = t => 1 - Math.pow(1 - t, 3);
    828. 

  828.   const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
    829. 

  829.   const lerp = (a, b, t) => a + (b - a) * t;
    830. 

  830. 

  831.   // Animate a value by requestAnimationFrame between timeline markers
    832. 

  832.   function seg(t, start, end) {
    833. 

  833.     return clamp((t - start) / (end - start), 0, 1);
    834. 

  834.   }
    835. 

  835. 

  836.   // ── Elements ─────────────────────────────────────────────────────
    837. 

  837.   const el = (id) => document.getElementById(id);
    838. 

  838.   const terminal = el('terminal');
    839. 

  839.   const comment  = el('comment');
    840. 

  840.   const typed    = el('typed');
    841. 

  841.   const ttyCursor = el('ttyCursor');
    842. 

  842.   const connector = el('connector');
    843. 

  843.   const phoneWrap = el('phoneWrap');
    844. 

  844.   const views = {
    845. 

  845.     wire: el('view-wire'),
    846. 

  846.     home: el('view-home'),
    847. 

  847.     timer: el('view-timer'),
    848. 

  848.     stats: el('view-stats'),
    849. 

  849.     settings: el('view-settings'),
    850. 

  850.   };
    851. 

  851.   const tap = el('tap');
    852. 

  852.   const tabBar = el('tabBar');
    853. 

  853.   const fgRing = el('fgRing');
    854. 

  854.   const ringTime = el('ringTime');
    855. 

  855.   const brandWall = el('brandWall');
    856. 

  856.   const brandWord = el('brandWord');
    857. 

  857.   const brandLine = el('brandLine');
    858. 

  858.   const brandCn = el('brandCn');
    859. 

  859. 

  860.   // Typing text
    861. 

  861.   const typeStr = 'make pomodoro app';
    862. 

  862.   function setTyping(progress) {
    863. 

  863.     const n = Math.floor(typeStr.length * progress);
    864. 

  864.     typed.textContent = typeStr.slice(0, n);
    865. 

  865.   }
    866. 

  866. 

  867.   // Show/hide views — hard swap (no cross-fade overlap)
    868. 

  868.   function showView(name) {
    869. 

  869.     Object.keys(views).forEach(k => {
    870. 

  870.       const isActive = (k === name);
    871. 

  871.       views[k].style.opacity = isActive ? '1' : '0';
    872. 

  872.       views[k].style.visibility = isActive ? 'visible' : 'hidden';
    873. 

  873.       views[k].style.transform = isActive ? 'translateY(0)' : 'translateY(0)';
    874. 

  874.       views[k].style.transition = isActive ? 'opacity 0.22s ease-out' : 'none';
    875. 

  875.     });
    876. 

  876.   }
    877. 

  877. 

  878.   // Active tab
    879. 

  879.   function setActiveTab(name) {
    880. 

  880.     document.querySelectorAll('.tab-bar .tab').forEach(t => {
    881. 

  881.       t.classList.toggle('active', t.dataset.tab === name);
    882. 

  882.     });
    883. 

  883.   }
    884. 

  884. 

  885.   // Play tap at screen coords (relative to .screen: 416×876)
    886. 

  886.   function playTap(x, y) {
    887. 

  887.     tap.style.left = (x - 32) + 'px';
    888. 

  888.     tap.style.top = (y - 32) + 'px';
    889. 

  889.     tap.style.opacity = '1';
    890. 

  890.     // restart keyframe animation
    891. 

  891.     const ring = tap.querySelector('.ring');
    892. 

  892.     ring.style.animation = 'none';
    893. 

  893.     ring.offsetHeight; // reflow
    894. 

  894.     ring.style.animation = '';
    895. 

  895.     // fade out
    896. 

  896.     setTimeout(() => { tap.style.opacity = '0'; }, 550);
    897. 

  897.   }
    898. 

  898. 

  899.   // ── SFX via WebAudio ─────────────────────────────────────────────
    900. 

  900.   let audioCtx = null;
    901. 

  901.   function ac() {
    902. 

  902.     if (!audioCtx) {
    903. 

  903.       try { audioCtx = new (window.AudioContext || window.webkitAudioContext)(); } catch(e){}
    904. 

  904.     }
    905. 

  905.     return audioCtx;
    906. 

  906.   }
    907. 

  907.   function sfxClick(vol = 0.16) {
    908. 

  908.     const c = ac(); if (!c) return;
    909. 

  909.     const o = c.createOscillator();
    910. 

  910.     const g = c.createGain();
    911. 

  911.     o.type = 'square';
    912. 

  912.     o.frequency.setValueAtTime(1200, c.currentTime);
    913. 

  913.     o.frequency.exponentialRampToValueAtTime(500, c.currentTime + 0.04);
    914. 

  914.     g.gain.setValueAtTime(vol, c.currentTime);
    915. 

  915.     g.gain.exponentialRampToValueAtTime(0.001, c.currentTime + 0.05);
    916. 

  916.     o.connect(g); g.connect(c.destination);
    917. 

  917.     o.start(); o.stop(c.currentTime + 0.06);
    918. 

  918.   }
    919. 

  919.   function sfxEnter() {
    920. 

  920.     const c = ac(); if (!c) return;
    921. 

  921.     const o = c.createOscillator();
    922. 

  922.     const g = c.createGain();
    923. 

  923.     o.type = 'sine';
    924. 

  924.     o.frequency.setValueAtTime(180, c.currentTime);
    925. 

  925.     o.frequency.exponentialRampToValueAtTime(440, c.currentTime + 0.25);
    926. 

  926.     g.gain.setValueAtTime(0.22, c.currentTime);
    927. 

  927.     g.gain.exponentialRampToValueAtTime(0.001, c.currentTime + 0.3);
    928. 

  928.     o.connect(g); g.connect(c.destination);
    929. 

  929.     o.start(); o.stop(c.currentTime + 0.32);
    930. 

  930.   }
    931. 

  931.   function sfxChime() {
    932. 

  932.     const c = ac(); if (!c) return;
    933. 

  933.     [523.25, 783.99].forEach((f, i) => {
    934. 

  934.       const o = c.createOscillator();
    935. 

  935.       const g = c.createGain();
    936. 

  936.       o.type = 'sine';
    937. 

  937.       o.frequency.value = f;
    938. 

  938.       g.gain.setValueAtTime(0, c.currentTime + i * 0.08);
    939. 

  939.       g.gain.linearRampToValueAtTime(0.18, c.currentTime + i * 0.08 + 0.04);
    940. 

  940.       g.gain.exponentialRampToValueAtTime(0.001, c.currentTime + i * 0.08 + 1.2);
    941. 

  941.       o.connect(g); g.connect(c.destination);
    942. 

  942.       o.start(c.currentTime + i * 0.08);
    943. 

  943.       o.stop(c.currentTime + i * 0.08 + 1.25);
    944. 

  944.     });
    945. 

  945.   }
    946. 

  946. 

  947.   // ── Timeline ─────────────────────────────────────────────────────
    948. 

  948.   const DURATION = 10.0;
    949. 

  949. 

  950.   const sfxFired = new Set();
    951. 

  951.   function fireOnce(id, fn) {
    952. 

  952.     if (sfxFired.has(id)) return;
    953. 

  953.     sfxFired.add(id);
    954. 

  954.     fn();
    955. 

  955.   }
    956. 

  956. 

  957.   // Screen switch schedule (within Beat 2, 2.0s → 8.0s)
    958. 

  958.   // Tap coords are relative to the 416×876 .screen
    959. 

  959.   const schedule = [
    960. 

  960.     { t: 2.0, view: 'wire',     tabIco: null,       tap: null },
    961. 

  961.     { t: 3.1, view: 'home',     tabIco: 'home',     tap: null },                 // home materializes (no tap — it's the fill moment)
    962. 

  962.     { t: 4.4, view: 'timer',    tabIco: 'timer',    tap: {x: 208, y: 624} },     // tap "开始专注" CTA
    963. 

  963.     { t: 6.3, view: 'stats',    tabIco: 'stats',    tap: {x: 300, y: 810} },     // tap stats tab
    964. 

  964.     { t: 7.5, view: 'settings', tabIco: 'settings', tap: {x: 370, y: 810} },     // tap settings tab
    965. 

  965.   ];
    966. 

  966.   let scheduleIdx = 0;
    967. 

  967. 

  968.   let startTime = null;
    969. 

  969.   let raf = null;
    970. 

  970. 

  971.   function tick(now) {
    972. 

  972.     if (!startTime) startTime = now;
    973. 

  973.     const t = (now - startTime) / 1000;
    974. 

  974. 

  975.     // ── Beat 1: 0-2s ─────────────────────────────────────────
    976. 

  976.     // Terminal fade in (0 → 0.4s)
    977. 

  977.     {
    978. 

  978.       const k = expoOut(seg(t, 0.0, 0.4));
    979. 

  979.       terminal.style.opacity = k;
    980. 

  980.       terminal.style.transform = `translateY(-50%) translateX(${lerp(-30, 0, k)}px)`;
    981. 

  981.     }
    982. 

  982.     // iPhone fade in (0.2 → 0.9s)
    983. 

  983.     {
    984. 

  984.       const k = expoOut(seg(t, 0.2, 0.9));
    985. 

  985.       phoneWrap.style.opacity = k;
    986. 

  986.       phoneWrap.style.transform = `translateY(-50%) translateX(${lerp(60, 0, k)}px) scale(${lerp(0.96, 1, k)})`;
    987. 

  987.       if (t > 0.25) fireOnce('enter', sfxEnter);
    988. 

  988.     }
    989. 

  989.     // Connector fade
    990. 

  990.     {
    991. 

  991.       const k = expoOut(seg(t, 0.7, 1.2));
    992. 

  992.       connector.style.opacity = k;
    993. 

  993.       connector.style.transform = `translateY(-50%) scaleX(${k})`;
    994. 

  994.     }
    995. 

  995.     // Comment
    996. 

  996.     {
    997. 

  997.       const k = expoOut(seg(t, 0.8, 1.2));
    998. 

  998.       comment.style.opacity = k * 0.82;
    999. 

  999.     }
    1000. 

  1000.     // Typing (0.6 → 1.9s)
    1001. 

  1001.     {
    1002. 

  1002.       const k = cubicInOut(seg(t, 0.6, 1.9));
    1003. 

  1003.       setTyping(k);
    1004. 

  1004.       // key click SFX at certain progress points
    1005. 

  1005.       if (t > 0.8 && t < 1.85) {
    1006. 

  1006.         const charsShown = Math.floor(typeStr.length * k);
    1007. 

  1007.         const key = 'typ' + charsShown;
    1008. 

  1008.         if (!sfxFired.has(key) && charsShown > 0 && charsShown % 3 === 0) {
    1009. 

  1009.           fireOnce(key, () => sfxClick(0.08));
    1010. 

  1010.         }
    1011. 

  1011.       }
    1012. 

  1012.     }
    1013. 

  1013.     // Hide cursor when typing done
    1014. 

  1014.     ttyCursor.style.opacity = t > 1.85 ? '0' : '1';
    1015. 

  1015. 

  1016.     // ── Beat 2: 2-8s ─────────────────────────────────────────
    1017. 

  1017.     // Execute scheduled screen transitions
    1018. 

  1018.     while (scheduleIdx < schedule.length && t >= schedule[scheduleIdx].t) {
    1019. 

  1019.       const s = schedule[scheduleIdx];
    1020. 

  1020.       showView(s.view);
    1021. 

  1021.       // status bar color: dark-text on light screens, but wire also light, keep dark
    1022. 

  1022.       if (s.view === 'wire') {
    1023. 

  1023.         tabBar.style.display = 'none';
    1024. 

  1024.       } else {
    1025. 

  1025.         tabBar.style.display = 'flex';
    1026. 

  1026.         setActiveTab(s.tabIco);
    1027. 

  1027.       }
    1028. 

  1028.       if (s.tap) {
    1029. 

  1029.         // small delay so tap appears at moment of switch
    1030. 

  1030.         setTimeout(() => playTap(s.tap.x, s.tap.y), 120);
    1031. 

  1031.         if (s.view !== 'wire') fireOnce('click_' + s.view, () => sfxClick(0.18));
    1032. 

  1032.       }
    1033. 

  1033.       scheduleIdx++;
    1034. 

  1034.     }
    1035. 

  1035. 

  1036.     // Timer ring animation: once timer appears (4.4s), animate ring from empty → 42% filled
    1037. 

  1037.     if (t >= 4.4 && t < 6.3) {
    1038. 

  1038.       const ringT = clamp((t - 4.5) / 1.2, 0, 1);
    1039. 

  1039.       const fillPct = expoOut(ringT) * 0.42;
    1040. 

  1040.       const offset = 880 * (1 - fillPct);
    1041. 

  1041.       // Set as both style AND attr so neither overrides the other
    1042. 

  1042.       fgRing.style.strokeDashoffset = offset;
    1043. 

  1043.       fgRing.setAttribute('stroke-dashoffset', offset);
    1044. 

  1044.       // Count down visually: 24:12 → 14:03
    1045. 

  1045.       const mins = Math.floor(lerp(24, 14, expoOut(ringT)));
    1046. 

  1046.       const secs = Math.floor(lerp(12, 3, expoOut(ringT)));
    1047. 

  1047.       ringTime.textContent = String(mins).padStart(2,'0') + ':' + String(secs).padStart(2,'0');
    1048. 

  1048.     }
    1049. 

  1049. 

  1050.     // ── Beat 3: 8-10s ────────────────────────────────────────
    1051. 

  1051.     // Phone + terminal fade out fast (7.5 → 7.9) so wall doesn't guillotine
    1052. 

  1052.     if (t >= 7.5) {
    1053. 

  1053.       const k = cubicOut(seg(t, 7.5, 7.9));
    1054. 

  1054.       phoneWrap.style.opacity = String(1 - k);
    1055. 

  1055.       phoneWrap.style.transform = `translateY(-50%) scale(${lerp(1, 0.94, k)})`;
    1056. 

  1056.       terminal.style.opacity = String(1 - k);
    1057. 

  1057.       terminal.style.transform = `translateY(-50%) scale(${lerp(1, 0.96, k)})`;
    1058. 

  1058.       connector.style.opacity = String(1 - k);
    1059. 

  1059.     }
    1060. 

  1060.     // Brand wall slides up (7.9 → 8.6) — starts AFTER phone is gone
    1061. 

  1061.     {
    1062. 

  1062.       const k = expoOut(seg(t, 7.9, 8.6));
    1063. 

  1063.       brandWall.style.transform = `translateY(${lerp(100, 0, k)}%)`;
    1064. 

  1064.       brandWall.style.opacity = k > 0 ? '1' : '0';
    1065. 

  1065.       const watermark = document.querySelector('.watermark');
    1066. 

  1066.       if (k > 0.6) watermark.classList.add('on-light');
    1067. 

  1067.       else watermark.classList.remove('on-light');
    1068. 

  1068.     }
    1069. 

  1069.     // Wordmark appears
    1070. 

  1070.     {
    1071. 

  1071.       const k = expoOut(seg(t, 8.5, 9.2));
    1072. 

  1072.       brandWord.style.opacity = k;
    1073. 

  1073.       brandWord.style.transform = `scale(${lerp(0.92, 1, k)})`;
    1074. 

  1074.       if (t > 8.55) fireOnce('chime', sfxChime);
    1075. 

  1075.     }
    1076. 

  1076.     // Underline
    1077. 

  1077.     {
    1078. 

  1078.       const k = expoOut(seg(t, 9.0, 9.6));
    1079. 

  1079.       brandLine.style.width = (280 * k) + 'px';
    1080. 

  1080.     }
    1081. 

  1081.     // CN label
    1082. 

  1082.     {
    1083. 

  1083.       const k = cubicOut(seg(t, 9.3, 9.9));
    1084. 

  1084.       brandCn.style.opacity = k * 0.9;
    1085. 

  1085.     }
    1086. 

  1086. 

  1087.     if (t < DURATION) {
    1088. 

  1088.       raf = requestAnimationFrame(tick);
    1089. 

  1089.     } else {
    1090. 

  1090.       // Hold final frame
    1091. 

  1091.       if (!window.__recording) {
    1092. 

  1092.         // loop for preview
    1093. 

  1093.         setTimeout(() => {
    1094. 

  1094.           startTime = null;
    1095. 

  1095.           scheduleIdx = 0;
    1096. 

  1096.           sfxFired.clear();
    1097. 

  1097.           // Reset views
    1098. 

  1098.           showView('wire');
    1099. 

  1099.           tabBar.style.display = 'none';
    1100. 

  1100.           fgRing.style.strokeDashoffset = 880;
    1101. 

  1101.           fgRing.setAttribute('stroke-dashoffset', 880);
    1102. 

  1102.           ringTime.textContent = '24:12';
    1103. 

  1103.           // Reset brand
    1104. 

  1104.           brandWall.style.transform = 'translateY(100%)';
    1105. 

  1105.           brandWall.style.opacity = '0';
    1106. 

  1106.           brandWord.style.opacity = '0';
    1107. 

  1107.           brandWord.style.transform = 'scale(0.92)';
    1108. 

  1108.           brandLine.style.width = '0';
    1109. 

  1109.           brandCn.style.opacity = '0';
    1110. 

  1110.           // Reset terminal typing
    1111. 

  1111.           typed.textContent = '';
    1112. 

  1112.           ttyCursor.style.opacity = '1';
    1113. 

  1113.           comment.style.opacity = '0';
    1114. 

  1114.           terminal.style.opacity = '0';
    1115. 

  1115.           phoneWrap.style.opacity = '0';
    1116. 

  1116.           connector.style.opacity = '0';
    1117. 

  1117.           document.querySelector('.watermark').classList.remove('on-light');
    1118. 

  1118.           raf = requestAnimationFrame(tick);
    1119. 

  1119.         }, 600);
    1120. 

  1120.       }
    1121. 

  1121.     }
    1122. 

  1122.   }
    1123. 

  1123. 

  1124.   // seek(0) helper for render-video.js
    1125. 

  1125.   window.__seek = function(s) {
    1126. 

  1126.     startTime = performance.now() - s * 1000;
    1127. 

  1127.   };
    1128. 

  1128. 

  1129.   // Initial state
    1130. 

  1130.   showView('wire');
    1131. 

  1131.   tabBar.style.display = 'none';
    1132. 

  1132. 

  1133.   // Wait for fonts, then start animation
    1134. 

  1134.   (document.fonts ? document.fonts.ready : Promise.resolve()).then(() => {
    1135. 

  1135.     requestAnimationFrame((now) => {
    1136. 

  1136.       startTime = now;
    1137. 

  1137.       window.__ready = true;
    1138. 

  1138.       raf = requestAnimationFrame(tick);
    1139. 

  1139.     });
    1140. 

  1140.   });
    1141. 

  1141. })();
    1142. 

  1142. </script>
    1143. 

  1143. 

  1144. </body>
    1145. 

  1145. </html>
    1146.