diff --git a/src/pages/AnnualReportWindow.scss b/src/pages/AnnualReportWindow.scss index 126aad4..655b3fe 100644 --- a/src/pages/AnnualReportWindow.scss +++ b/src/pages/AnnualReportWindow.scss @@ -48,8 +48,18 @@ .annual-report-window { --c-bg: #050505; - --c-text: #FFFFFF; - --c-text-muted: rgba(255, 255, 255, 0.4); + --c-bg-deep: #090909; + --c-text: #F2F2F0; + --c-text-bright: #FAFAF8; + --c-text-soft: rgba(250, 250, 248, 0.84); + --c-text-muted: rgba(250, 250, 248, 0.58); + --c-text-faint: rgba(250, 250, 248, 0.42); + --c-gold: #B8945A; + --c-gold-strong: #C8AA72; + --c-gold-rgb: 184, 148, 90; + --c-paper: #ECE8DF; + --c-paper-ink: #1A1710; + --c-paper-muted: #6E6757; /* 顶级平滑缓动曲线 */ --ease-epic: cubic-bezier(0.76, 0, 0.24, 1); --ease-out: cubic-bezier(0.25, 1, 0.5, 1); @@ -83,9 +93,9 @@ width: 32px; height: 32px; border-radius: 50%; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - color: rgba(255, 255, 255, 0.6); + background: rgba(var(--c-gold-rgb), 0.14); + border: 1px solid rgba(var(--c-gold-rgb), 0.34); + color: var(--c-text-soft); display: flex; justify-content: center; align-items: center; @@ -94,22 +104,23 @@ transition: all 0.3s var(--ease-out); &:hover { - background: rgba(255, 255, 255, 0.2); - color: #fff; + background: rgba(var(--c-gold-rgb), 0.24); + color: var(--c-text-bright); + box-shadow: 0 0 12px rgba(var(--c-gold-rgb), 0.24); transform: scale(1.05); } } } &[data-scene="10"] .top-controls .close-btn { - background: rgba(0, 0, 0, 0.06); - border-color: rgba(0, 0, 0, 0.22); - color: rgba(0, 0, 0, 0.68); + background: rgba(26, 20, 9, 0.08); + border-color: rgba(75, 58, 27, 0.28); + color: rgba(38, 29, 12, 0.72); } &[data-scene="10"] .top-controls .close-btn:hover { - background: rgba(0, 0, 0, 0.14); - color: #000; + background: rgba(30, 23, 10, 0.16); + color: #171006; } .p0-bg-layer { @@ -140,7 +151,7 @@ .p0-center-glow { position: absolute; inset: 0; - background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 38%, transparent 70%); + background: radial-gradient(circle at center, rgba(var(--c-gold-rgb), 0.12) 0%, rgba(var(--c-gold-rgb), 0.03) 36%, rgba(255, 255, 255, 0.02) 50%, transparent 72%); } /* 细微的电影噪点 */ @@ -163,7 +174,7 @@ transition: all 1.5s var(--ease-epic); z-index: 5; pointer-events: none; - background: #fff; /* FORCE SOLID WHITE CORE */ + background: var(--c-gold-strong); } /* S0: 年份下方引线（保留后续场景形变） */ @@ -174,7 +185,7 @@ height: 1px; border-radius: 999px; opacity: 1; - box-shadow: 0 0 10px rgba(255, 255, 255, 0.35); + box-shadow: 0 0 12px rgba(var(--c-gold-rgb), 0.48); filter: blur(0px); } @@ -216,9 +227,9 @@ width: 1px; height: var(--s3-line-height, clamp(240px, 34vh, 320px)); border-radius: 1px; - background: #fff; + background: var(--c-gold); opacity: 0.55; - box-shadow: 0 0 10px rgba(255, 255, 255, 0.28); + box-shadow: 0 0 12px rgba(var(--c-gold-rgb), 0.38); filter: blur(0px); } @@ -229,9 +240,9 @@ width: 80vw; height: 1px; border-radius: 0; - background: #fff; + background: rgba(var(--c-gold-rgb), 0.88); opacity: 0.35; - box-shadow: 0 0 8px rgba(255, 255, 255, 0.15); + box-shadow: 0 0 10px rgba(var(--c-gold-rgb), 0.28); filter: blur(0px); } @@ -309,7 +320,7 @@ width: 250vmax; height: 250vmax; border-radius: 50%; - background: #EAEAEA; /* Explodes into bright solid color smoothly */ + background: var(--c-paper); /* Explodes into warm bright color smoothly */ opacity: 1; box-shadow: none; border: none; @@ -356,7 +367,7 @@ top: 6vh; left: 4vw; font-size: clamp(0.9rem, 1.05vw, 1.05rem); - color: rgba(255, 255, 255, 0.66); + color: var(--c-text-soft); letter-spacing: 0.28em; font-weight: 500; text-rendering: optimizeLegibility; @@ -366,7 +377,7 @@ .desc-text { font-size: 1.3rem; line-height: 1.8; - color: rgba(255, 255, 255, 0.8); + color: var(--c-text); margin-top: 35vh; } @@ -449,7 +460,7 @@ #scene-0 .p0-desc-inner { font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 2; - color: rgba(255, 255, 255, 0.78); + color: var(--c-text-soft); letter-spacing: 0.08em; } @@ -508,7 +519,7 @@ #scene-3 .s3-subtitle { font-size: clamp(1rem, 1.25vw, 1.15rem); - color: rgba(255, 255, 255, 0.55); + color: var(--c-text-muted); letter-spacing: 0.05em; line-height: 1.7; } @@ -647,7 +658,7 @@ #scene-8 .s8-name { font-size: clamp(3.2rem, 7.4vw, 5.6rem); - color: rgba(255, 255, 255, 0.72); + color: rgba(var(--c-gold-rgb), 0.88); letter-spacing: 0.08em; line-height: 1.05; } @@ -655,7 +666,7 @@ #scene-8 .s8-summary { max-width: 34ch; font-size: clamp(1.06rem, 1.35vw, 1.35rem); - color: rgba(255, 255, 255, 0.62); + color: var(--c-text-soft); line-height: 1.95; letter-spacing: 0.02em; } @@ -663,14 +674,14 @@ #scene-8 .s8-summary-count { margin: 0 8px; font-size: clamp(1.35rem, 2vw, 1.75rem); - color: #d8d8d8; + color: var(--c-gold-strong); white-space: nowrap; } #scene-8 .s8-quote { max-width: 32ch; font-size: clamp(0.98rem, 1.12vw, 1.1rem); - color: rgba(255, 255, 255, 0.5); + color: var(--c-text-muted); line-height: 1.9; } @@ -682,11 +693,11 @@ position: relative; padding: clamp(24px, 3.2vh, 38px) clamp(20px, 2.6vw, 34px) clamp(24px, 3.2vh, 38px) clamp(30px, 3.2vw, 44px); border-radius: 18px; - border: 1px solid rgba(255, 255, 255, 0.14); - background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)); + border: 1px solid rgba(var(--c-gold-rgb), 0.34); + background: linear-gradient(135deg, rgba(var(--c-gold-rgb), 0.16), rgba(var(--c-gold-rgb), 0.04)); font-size: clamp(0.95rem, 1.05vw, 1.08rem); line-height: 2; - color: rgba(255, 255, 255, 0.72); + color: var(--c-text-soft); text-align: left; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.22); } @@ -699,7 +710,7 @@ width: 2px; height: calc(100% - 40px); border-radius: 2px; - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.06)); + background: linear-gradient(to bottom, rgba(var(--c-gold-rgb), 0.7), rgba(var(--c-gold-rgb), 0.08)); } #scene-8 .s8-empty-wrap { @@ -710,7 +721,7 @@ } #scene-8 .s8-empty-text { - color: rgba(255, 255, 255, 0.74); + color: var(--c-text); line-height: 2; } @@ -811,11 +822,11 @@ /* S4 宇宙 (彻底修复穿模 BUG) */ #scene-4 { - color: #000; + color: var(--c-text-bright); } #scene-4 .en-tag { - color: rgba(0, 0, 0, 0.5); + color: var(--c-text-muted); } .word-burst { @@ -869,8 +880,8 @@ align-items: center; justify-content: center; padding: 1rem 3rem; - color: #fff; - background: #000; + color: var(--c-gold-strong); + background: #111111; border-radius: 100px; cursor: pointer; transition: all 0.4s var(--ease-out); @@ -878,14 +889,14 @@ font-family: 'SpaceMonoLocal'; font-size: 0.75rem; letter-spacing: 0.15em; - border: none; + border: 1px solid rgba(var(--c-gold-rgb), 0.36); pointer-events: auto; } .btn:hover { transform: scale(1.05); - background: #333; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); + background: #1d1d1d; + box-shadow: 0 10px 24px rgba(var(--c-gold-rgb), 0.24); } /* 导航系统 */ @@ -904,20 +915,20 @@ .dot-nav { width: 3px; height: 12px; - background: rgba(255, 255, 255, 0.2); + background: rgba(var(--c-gold-rgb), 0.22); transition: all 0.4s var(--ease-out); cursor: pointer; border-radius: 3px; } .dot-nav:hover { - background: rgba(255, 255, 255, 0.6); + background: rgba(var(--c-gold-rgb), 0.56); } .dot-nav.active { - background: #fff; + background: var(--c-gold-strong); height: 32px; - box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); + box-shadow: 0 0 10px rgba(var(--c-gold-rgb), 0.52); } .swipe-hint { @@ -928,7 +939,7 @@ font-family: 'SpaceMonoLocal'; font-size: clamp(0.74rem, 0.9vw, 0.9rem); letter-spacing: 0.28em; - color: rgba(255, 255, 255, 0.56); + color: var(--c-text-muted); font-weight: 500; text-rendering: geometricPrecision; z-index: 100; @@ -983,13 +994,13 @@ .ring-bg { fill: none; - stroke: rgba(255, 255, 255, 0.08); + stroke: rgba(var(--c-gold-rgb), 0.2); stroke-width: 6; } .ring-progress { fill: none; - stroke: #fff; + stroke: var(--c-gold-strong); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 264; @@ -1003,14 +1014,14 @@ transform: translate(-50%, -50%); font-size: 36px; font-weight: 600; - color: #fff; + color: var(--c-text-bright); } } .loading-stage { font-size: 20px; font-weight: 600; - color: #fff; + color: var(--c-gold-strong); margin-top: 24px; animation: loadingTextEnter 0.52s var(--ease-out) both; animation-delay: 0.06s; diff --git a/src/pages/AnnualReportWindow.tsx b/src/pages/AnnualReportWindow.tsx index 2e5c614..e54fd92 100644 --- a/src/pages/AnnualReportWindow.tsx +++ b/src/pages/AnnualReportWindow.tsx @@ -302,7 +302,10 @@ function AnnualReportWindow() { ctx.beginPath() ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2) - ctx.fillStyle = `rgba(255, 255, 255, ${p.alpha})` + const particleAlpha = p.alpha * (i % 4 === 0 ? 0.95 : 0.72) + ctx.fillStyle = i % 4 === 0 + ? `rgba(184, 148, 90, ${particleAlpha})` + : `rgba(255, 255, 255, ${particleAlpha})` ctx.fill() for (let j = i + 1; j < particles.length; j++) { @@ -316,7 +319,9 @@ function AnnualReportWindow() { ctx.beginPath() ctx.moveTo(p.x, p.y) ctx.lineTo(q.x, q.y) - ctx.strokeStyle = `rgba(255, 255, 255, ${lineAlpha})` + ctx.strokeStyle = i % 3 === 0 + ? `rgba(184, 148, 90, ${lineAlpha * 0.8})` + : `rgba(255, 255, 255, ${lineAlpha * 0.72})` ctx.lineWidth = 0.5 ctx.stroke() } @@ -520,7 +525,17 @@ function AnnualReportWindow() { const endingPostCount = reportData.snsStats?.totalPosts ?? 0 const endingReceivedChats = reportData.socialInitiative?.receivedChats ?? 0 const endingTopPhrase = reportData.topPhrases?.[0]?.phrase || '' - const endingTopPhraseCount = reportData.topPhrases?.[0]?.count ?? 0 + const COLOR = { + accentGold: 'var(--c-gold-strong)', + accentSoft: 'rgba(var(--c-gold-rgb), 0.58)', + accentMuted: 'rgba(var(--c-gold-rgb), 0.48)', + textStrong: 'var(--c-text-bright)', + textSoft: 'var(--c-text-soft)', + textMuted: 'var(--c-text-muted)', + textFaint: 'var(--c-text-faint)', + paperInk: 'var(--c-paper-ink)', + paperMuted: 'var(--c-paper-muted)' + } as const return (
@@ -574,7 +589,7 @@ function AnnualReportWindow() {
- 这一年，你说出了 {reportData.totalMessages.toLocaleString()} 句话。
无数个日夜的碎碎念，都是为了在茫茫人海中，刻下彼此来过的痕迹。 + 这一年，你说出了 {reportData.totalMessages.toLocaleString()} 句话。
无数个日夜的碎碎念，都是为了在茫茫人海中，刻下彼此来过的痕迹。
@@ -598,7 +613,7 @@ function AnnualReportWindow() {
梦境之外，你与{reportData.midnightKing ? reportData.midnightKing.displayName : '00:00'}共同醒着度过了许多个夜晚
- “曾有 + “曾有 条消息在那些无人知晓的夜里，代替星光照亮了彼此”
@@ -621,12 +636,12 @@ function AnnualReportWindow() {
-
+
{f.displayName}
TOP {i + 1}
-
+
{f.messageCount.toLocaleString()}
@@ -636,7 +651,7 @@ function AnnualReportWindow() {
-
暂无记录
+
暂无记录
@@ -648,10 +663,10 @@ function AnnualReportWindow() { {/* S4: TIME WAVEFORM (Audio/Heartbeat timeline visual) */}
-
TIME WAVEFORM
+
时间的长河
-
十二个月的更迭，就像走过了一万个冬天
时间在变，但好在总有人陪在身边。
+
十二个月的更迭，就像走过了一万个冬天
时间在变，但好在总有人陪在身边。
{reportData.monthlyTopFriends.length > 0 ? ( @@ -676,11 +691,13 @@ function AnnualReportWindow() { top: isTop ? `-${heightVariation}vh` : '0px', width: '1px', height: `${heightVariation}vh`, - background: isTop ? 'linear-gradient(to top, rgba(255,255,255,0.3), transparent)' : 'linear-gradient(to bottom, rgba(255,255,255,0.3), transparent)' + background: isTop + ? 'linear-gradient(to top, rgba(184,148,90,0.34), transparent)' + : 'linear-gradient(to bottom, rgba(184,148,90,0.34), transparent)' }} /> {/* Center Glowing Dot */} -
+
{/* Text Payload */}
-
+
{m.month.toString().padStart(2, '0')}
-
+
{m.displayName}
-
+
{m.messageCount.toLocaleString()} M
@@ -709,7 +726,7 @@ function AnnualReportWindow() {
) : (
-
暂无记忆声纹
+
暂无记忆声纹
)}
@@ -722,25 +739,25 @@ function AnnualReportWindow() { {reportData.mutualFriend ? ( <>
-
+
{reportData.mutualFriend.displayName}
-
发出
-
+
发出
+
-
收到
-
+
收到
+
- 你们之间收发的消息高达 {reportData.mutualFriend.ratio} 的平衡率 + 你们之间收发的消息高达 {reportData.mutualFriend.ratio} 的平衡率
- “你抛出的每一句话，都落在了对方的心里。
所谓重逢，就是我走向你的时候，你也在走向我。” + “你抛出的每一句话，都落在了对方的心里。
所谓重逢，就是我走向你的时候，你也在走向我。”
@@ -758,37 +775,37 @@ function AnnualReportWindow() {
{reportData.socialInitiative && (
-
我的主动性
-
+
我的主动性
+
{reportData.socialInitiative.initiativeRate}%
-
-
+
+
你的聊天开场大多由你发起。
{reportData.socialInitiative.topInitiatedFriend && (reportData.socialInitiative.topInitiatedCount || 0) > 0 ? (
- 其中{reportData.socialInitiative.topInitiatedFriend}是你最常联系的人， - 有{(reportData.socialInitiative.topInitiatedCount || 0).toLocaleString()}次，是你先忍不住敲响了对方的门 + 其中{reportData.socialInitiative.topInitiatedFriend}是你最常联系的人， + 有{(reportData.socialInitiative.topInitiatedCount || 0).toLocaleString()}次，是你先忍不住敲响了对方的门
) : (
- 你主动发起了{reportData.socialInitiative.initiatedChats.toLocaleString()}次联络。 + 你主动发起了{reportData.socialInitiative.initiatedChats.toLocaleString()}次联络。
)} - 想见一个人的心，总是走在时间的前面。 + 想见一个人的心，总是走在时间的前面。
)} {reportData.responseSpeed && (
-
回应速度
-
+
回应速度
+
S
-
- {reportData.responseSpeed.fastestFriend} 回你的消息总是很快。
- 这世上最让人安心的默契，莫过于一句 "我在"。 +
+ {reportData.responseSpeed.fastestFriend} 回你的消息总是很快。
+ 这世上最让人安心的默契，莫过于一句 "我在"。
)} @@ -806,24 +823,24 @@ function AnnualReportWindow() { {reportData.longestStreak ? (
-
最长连续聊天
-
+
最长连续聊天
+
{reportData.longestStreak.friendName}
-
- 你们曾连续 天，聊到忘记了时间,
那些舍不得说再见的日夜，连成了最漫长的春天。 +
+ 你们曾连续 天，聊到忘记了时间,
那些舍不得说再见的日夜，连成了最漫长的春天。
) : null} {reportData.peakDay ? (
-
最热烈的一天
-
+
最热烈的一天
+
{reportData.peakDay.date}
-
- “这一天，你们留下了 {reportData.peakDay.messageCount} 句话。
好像要把积攒了很久的想念，一天全都说完。” +
+ “这一天，你们留下了 {reportData.peakDay.messageCount} 句话。
好像要把积攒了很久的想念，一天全都说完。”
) : null} @@ -886,18 +903,18 @@ function AnnualReportWindow() { {reportData.topPhrases && reportData.topPhrases.slice(0, 12).map((phrase, i) => { // 12 precisely tuned absolute coordinates for the ultimate organic scatter without overlapping const demoStyles = [ - { left: '25vw', top: '25vh', fontSize: 'clamp(3rem, 7vw, 5rem)', color: 'rgba(255,255,255,1)', delay: '0.1s', floatDelay: '0s', targetOp: 1 }, - { left: '72vw', top: '30vh', fontSize: 'clamp(2rem, 5vw, 4rem)', color: 'rgba(255,255,255,0.8)', delay: '0.2s', floatDelay: '-1s', targetOp: 0.8 }, - { left: '15vw', top: '55vh', fontSize: 'clamp(2.5rem, 6vw, 4.5rem)', color: 'rgba(255,255,255,0.9)', delay: '0.3s', floatDelay: '-2.5s', targetOp: 0.9 }, - { left: '78vw', top: '60vh', fontSize: 'clamp(1.5rem, 3.5vw, 3rem)', color: 'rgba(255,255,255,0.6)', delay: '0.4s', floatDelay: '-1.5s', targetOp: 0.6 }, - { left: '45vw', top: '75vh', fontSize: 'clamp(1.2rem, 3vw, 2.5rem)', color: 'rgba(255,255,255,0.7)', delay: '0.5s', floatDelay: '-3s', targetOp: 0.7 }, - { left: '55vw', top: '15vh', fontSize: 'clamp(1.5rem, 3vw, 2.5rem)', color: 'rgba(255,255,255,0.5)', delay: '0.6s', floatDelay: '-0.5s', targetOp: 0.5 }, - { left: '12vw', top: '80vh', fontSize: 'clamp(1rem, 2vw, 1.8rem)', color: 'rgba(255,255,255,0.4)', delay: '0.7s', floatDelay: '-1.2s', targetOp: 0.4 }, - { left: '35vw', top: '45vh', fontSize: 'clamp(2.2rem, 5vw, 4rem)', color: 'rgba(255,255,255,0.85)', delay: '0.8s', floatDelay: '-0.8s', targetOp: 0.85 }, - { left: '85vw', top: '82vh', fontSize: 'clamp(0.9rem, 1.5vw, 1.5rem)', color: 'rgba(255,255,255,0.3)', delay: '0.9s', floatDelay: '-2.1s', targetOp: 0.3 }, - { left: '60vw', top: '50vh', fontSize: 'clamp(1.8rem, 4vw, 3.5rem)', color: 'rgba(255,255,255,0.65)', delay: '1s', floatDelay: '-0.3s', targetOp: 0.65 }, - { left: '45vw', top: '35vh', fontSize: 'clamp(1rem, 2vw, 1.8rem)', color: 'rgba(255,255,255,0.35)', delay: '1.1s', floatDelay: '-1.8s', targetOp: 0.35 }, - { left: '30vw', top: '65vh', fontSize: 'clamp(1.4rem, 2.5vw, 2.2rem)', color: 'rgba(255,255,255,0.55)', delay: '1.2s', floatDelay: '-2.7s', targetOp: 0.55 }, + { left: '25vw', top: '25vh', fontSize: 'clamp(3rem, 7vw, 5rem)', color: 'rgba(250,250,248,0.96)', delay: '0.1s', floatDelay: '0s', targetOp: 0.96 }, + { left: '72vw', top: '30vh', fontSize: 'clamp(2rem, 5vw, 4rem)', color: 'rgba(250,250,248,0.78)', delay: '0.2s', floatDelay: '-1s', targetOp: 0.78 }, + { left: '15vw', top: '55vh', fontSize: 'clamp(2.5rem, 6vw, 4.5rem)', color: 'rgba(200,170,120,0.72)', delay: '0.3s', floatDelay: '-2.5s', targetOp: 0.72 }, + { left: '78vw', top: '60vh', fontSize: 'clamp(1.5rem, 3.5vw, 3rem)', color: 'rgba(250,250,248,0.62)', delay: '0.4s', floatDelay: '-1.5s', targetOp: 0.62 }, + { left: '45vw', top: '75vh', fontSize: 'clamp(1.2rem, 3vw, 2.5rem)', color: 'rgba(200,170,120,0.58)', delay: '0.5s', floatDelay: '-3s', targetOp: 0.58 }, + { left: '55vw', top: '15vh', fontSize: 'clamp(1.5rem, 3vw, 2.5rem)', color: 'rgba(250,250,248,0.52)', delay: '0.6s', floatDelay: '-0.5s', targetOp: 0.52 }, + { left: '12vw', top: '80vh', fontSize: 'clamp(1rem, 2vw, 1.8rem)', color: 'rgba(250,250,248,0.42)', delay: '0.7s', floatDelay: '-1.2s', targetOp: 0.42 }, + { left: '35vw', top: '45vh', fontSize: 'clamp(2.2rem, 5vw, 4rem)', color: 'rgba(250,250,248,0.82)', delay: '0.8s', floatDelay: '-0.8s', targetOp: 0.82 }, + { left: '85vw', top: '82vh', fontSize: 'clamp(0.9rem, 1.5vw, 1.5rem)', color: 'rgba(200,170,120,0.34)', delay: '0.9s', floatDelay: '-2.1s', targetOp: 0.34 }, + { left: '60vw', top: '50vh', fontSize: 'clamp(1.8rem, 4vw, 3.5rem)', color: 'rgba(250,250,248,0.64)', delay: '1s', floatDelay: '-0.3s', targetOp: 0.64 }, + { left: '45vw', top: '35vh', fontSize: 'clamp(1rem, 2vw, 1.8rem)', color: 'rgba(250,250,248,0.38)', delay: '1.1s', floatDelay: '-1.8s', targetOp: 0.38 }, + { left: '30vw', top: '65vh', fontSize: 'clamp(1.4rem, 2.5vw, 2.2rem)', color: 'rgba(200,170,120,0.46)', delay: '1.2s', floatDelay: '-2.7s', targetOp: 0.46 }, ]; const st = demoStyles[i]; @@ -924,38 +941,38 @@ function AnnualReportWindow() {
{/* S10: EXTRACTION (白色反色结束页 / Data Receipt) */} -
+
-
旅程的终点
+
旅程的终点
{/* The Final Summary Receipt / Dashboard */}
-
+
{finalYearLabel}
-
+
TRANSMISSION COMPLETE
{/* Core Stats Row */} -
+
-
朋友圈发帖
-
{endingPostCount.toLocaleString()}
+
朋友圈发帖
+
{endingPostCount.toLocaleString()}
-
被动开场
-
{endingReceivedChats.toLocaleString()}
+
被动开场
+
{endingReceivedChats.toLocaleString()}
-
你最爱说
-
“{endingTopPhrase}”
+
你最爱说
+
“{endingTopPhrase}”
-
+
“故事的最后，我们把这一切悄悄还给岁月
只要这些文字还在，所有的离别，就都只是一场短暂的缺席。”
@@ -967,7 +984,7 @@ function AnnualReportWindow() { className="reveal-inner delay-2" style={{ fontSize: 'clamp(0.9rem, 1.15vw, 1.02rem)', - color: '#5F5F5F', + color: COLOR.paperMuted, lineHeight: 1.95, letterSpacing: '0.03em', maxWidth: 'min(980px, 78vw)', @@ -984,10 +1001,10 @@ function AnnualReportWindow() { onClick={handleExtract} disabled={isExtracting} style={{ - background: isExtracting ? '#ddd' : (buttonText === 'SAVED TO DEVICE' ? '#000' : '#000'), - color: '#fff', + background: isExtracting ? '#CDC4B0' : (buttonText === 'SAVED TO DEVICE' ? '#1A140A' : '#101010'), + color: 'var(--c-gold-strong)', fontSize: '0.85rem', - border: 'none', + border: '1px solid rgba(var(--c-gold-rgb), 0.45)', minWidth: '200px' }} >