mirror of
https://fastgit.cc/github.com/hicccc77/WeFlow
synced 2026-04-20 21:01:15 +08:00
年度报告配色修改
This commit is contained in:
cc
@@ -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;
|
||||
|
||||
@@ -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 (
|
||||
<div className="annual-report-window" data-scene={currentScene} style={s3LineVars} ref={containerRef}>
|
||||
@@ -574,7 +589,7 @@ function AnnualReportWindow() {
|
||||
</div>
|
||||
<div className="reveal-wrap desc-text">
|
||||
<div className="reveal-inner serif delay-2">
|
||||
这一年，你说出了 <strong className="num-display" style={{color: '#fff'}}>{reportData.totalMessages.toLocaleString()}</strong> 句话。<br/>无数个日夜的碎碎念，都是为了在茫茫人海中，刻下彼此来过的痕迹。
|
||||
这一年，你说出了 <strong className="num-display" style={{ color: COLOR.accentGold }}>{reportData.totalMessages.toLocaleString()}</strong> 句话。<br/>无数个日夜的碎碎念，都是为了在茫茫人海中，刻下彼此来过的痕迹。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -598,7 +613,7 @@ function AnnualReportWindow() {
|
||||
<div className="reveal-wrap desc-text">
|
||||
<div className="reveal-inner serif delay-2">
|
||||
梦境之外，你与{reportData.midnightKing ? reportData.midnightKing.displayName : '00:00'}共同醒着度过了许多个夜晚<br/>
|
||||
“曾有<strong className="num-display" style={{color: '#fff', margin: '0 10px', fontSize: '1.5rem'}}>
|
||||
“曾有<strong className="num-display" style={{ color: COLOR.accentGold, margin: '0 10px', fontSize: '1.5rem' }}>
|
||||
<DecodeText value={(reportData.midnightKing?.count || 0).toLocaleString()} active={currentScene === 2} />
|
||||
</strong>条消息在那些无人知晓的夜里，代替星光照亮了彼此”
|
||||
</div>
|
||||
@@ -621,12 +636,12 @@ function AnnualReportWindow() {
|
||||
<div className="reveal-wrap s3-row-wrap" key={f.username}>
|
||||
<div className={`reveal-inner c-item delay-${i + 1}`}>
|
||||
<div className="c-info">
|
||||
<div className="serif c-name" style={{ color: i === 0 ? '#fff' : i === 1 ? '#bbb' : '#666' }}>
|
||||
<div className="serif c-name" style={{ color: i === 0 ? COLOR.accentGold : i === 1 ? COLOR.textStrong : COLOR.textMuted }}>
|
||||
{f.displayName}
|
||||
</div>
|
||||
<div className="mono c-sub num-display">TOP {i + 1}</div>
|
||||
</div>
|
||||
<div className="c-count num-display" style={{ color: i === 0 ? '#fff' : '#888' }}>
|
||||
<div className="c-count num-display" style={{ color: i === 0 ? COLOR.accentGold : COLOR.textSoft }}>
|
||||
{f.messageCount.toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
@@ -636,7 +651,7 @@ function AnnualReportWindow() {
|
||||
<div className="reveal-wrap s3-row-wrap">
|
||||
<div className="reveal-inner c-item delay-1">
|
||||
<div className="c-info">
|
||||
<div className="serif c-name" style={{ color: '#bbb' }}>暂无记录</div>
|
||||
<div className="serif c-name" style={{ color: COLOR.textSoft }}>暂无记录</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -648,10 +663,10 @@ function AnnualReportWindow() {
|
||||
{/* S4: TIME WAVEFORM (Audio/Heartbeat timeline visual) */}
|
||||
<div className={getSceneClass(4)} id="scene-4">
|
||||
<div className="reveal-wrap en-tag" style={{ zIndex: 10 }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag">TIME WAVEFORM</div>
|
||||
<div className="reveal-inner serif scene0-cn-tag">时间的长河</div>
|
||||
</div>
|
||||
<div className="reveal-wrap desc-text" style={{ position: 'absolute', top: '15vh', left: '50vw', transform: 'translateX(-50%)', textAlign: 'center', zIndex: 10, marginTop: 0, width: '100%' }}>
|
||||
<div className="reveal-inner serif delay-1" style={{color: 'rgba(255,255,255,0.6)', fontSize: '1.2rem', letterSpacing: '0.1em'}}>十二个月的更迭，就像走过了一万个冬天<br />时间在变，但好在总有人陪在身边。</div>
|
||||
<div className="reveal-inner serif delay-1" style={{ color: COLOR.textMuted, fontSize: '1.2rem', letterSpacing: '0.1em' }}>十二个月的更迭，就像走过了一万个冬天<br />时间在变，但好在总有人陪在身边。</div>
|
||||
</div>
|
||||
|
||||
{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 */}
|
||||
<div className={`reveal-inner delay-${(i % 5) + 1}`} style={{ position: 'absolute', left: '-2.5px', top: '-2.5px', width: '6px', height: '6px', borderRadius: '50%', background: 'rgba(255,255,255,0.8)', boxShadow: '0 0 10px rgba(255,255,255,0.5)' }} />
|
||||
<div className={`reveal-inner delay-${(i % 5) + 1}`} style={{ position: 'absolute', left: '-2.5px', top: '-2.5px', width: '6px', height: '6px', borderRadius: '50%', background: 'rgba(184,148,90,0.72)', boxShadow: '0 0 10px rgba(184,148,90,0.34)' }} />
|
||||
|
||||
{/* Text Payload */}
|
||||
<div className={`reveal-inner delay-${(i % 5) + 1}`} style={{
|
||||
@@ -692,13 +709,13 @@ function AnnualReportWindow() {
|
||||
flexDirection: 'column',
|
||||
width: '20vw' // ample space to avoid wrapping
|
||||
}}>
|
||||
<div className="mono num-display" style={{ fontSize: '0.9rem', color: 'rgba(255,255,255,0.4)', marginBottom: '4px', letterSpacing: '0.1em' }}>
|
||||
<div className="mono num-display" style={{ fontSize: '0.9rem', color: COLOR.textFaint, marginBottom: '4px', letterSpacing: '0.1em' }}>
|
||||
{m.month.toString().padStart(2, '0')}
|
||||
</div>
|
||||
<div className="serif" style={{ fontSize: 'clamp(1rem, 2vw, 1.4rem)', color: '#fff', letterSpacing: '0.05em' }}>
|
||||
<div className="serif" style={{ fontSize: 'clamp(1rem, 2vw, 1.4rem)', color: COLOR.textStrong, letterSpacing: '0.05em' }}>
|
||||
{m.displayName}
|
||||
</div>
|
||||
<div className="mono num-display" style={{ fontSize: '0.65rem', color: 'rgba(255,255,255,0.5)', marginTop: '4px', letterSpacing: '0.1em' }}>
|
||||
<div className="mono num-display" style={{ fontSize: '0.65rem', color: COLOR.textMuted, marginTop: '4px', letterSpacing: '0.1em' }}>
|
||||
{m.messageCount.toLocaleString()} M
|
||||
</div>
|
||||
</div>
|
||||
@@ -709,7 +726,7 @@ function AnnualReportWindow() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="reveal-wrap desc-text" style={{ position: 'absolute', top: '50vh', left: '50vw', transform: 'translate(-50%, -50%)' }}>
|
||||
<div className="reveal-inner serif delay-1" style={{color: '#bbb'}}>暂无记忆声纹</div>
|
||||
<div className="reveal-inner serif delay-1" style={{ color: COLOR.textSoft }}>暂无记忆声纹</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -722,25 +739,25 @@ function AnnualReportWindow() {
|
||||
{reportData.mutualFriend ? (
|
||||
<>
|
||||
<div className="reveal-wrap desc-text" style={{ position: 'absolute', top: '20vh' }}>
|
||||
<div className="reveal-inner serif delay-1" style={{ fontSize: 'clamp(3rem, 7vw, 4rem)', color: '#fff', letterSpacing: '0.05em' }}>
|
||||
<div className="reveal-inner serif delay-1" style={{ fontSize: 'clamp(3rem, 7vw, 4rem)', color: COLOR.accentGold, letterSpacing: '0.05em' }}>
|
||||
{reportData.mutualFriend.displayName}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', top: '42vh', left: '15vw' }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag delay-2" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.2em' }}>发出</div>
|
||||
<div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(2rem, 5vw, 3.5rem)', color: '#fff', marginTop: '10px' }}><DecodeText value={reportData.mutualFriend.sentCount.toLocaleString()} active={currentScene === 5} /></div>
|
||||
<div className="reveal-inner serif scene0-cn-tag delay-2" style={{ fontSize: '0.8rem', color: COLOR.textMuted, letterSpacing: '0.2em' }}>发出</div>
|
||||
<div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(2rem, 5vw, 3.5rem)', color: COLOR.accentGold, marginTop: '10px' }}><DecodeText value={reportData.mutualFriend.sentCount.toLocaleString()} active={currentScene === 5} /></div>
|
||||
</div>
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', top: '42vh', right: '15vw', textAlign: 'right' }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag delay-2" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.2em' }}>收到</div>
|
||||
<div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(2rem, 5vw, 3.5rem)', color: '#fff', marginTop: '10px' }}><DecodeText value={reportData.mutualFriend.receivedCount.toLocaleString()} active={currentScene === 5} /></div>
|
||||
<div className="reveal-inner serif scene0-cn-tag delay-2" style={{ fontSize: '0.8rem', color: COLOR.textMuted, letterSpacing: '0.2em' }}>收到</div>
|
||||
<div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(2rem, 5vw, 3.5rem)', color: COLOR.accentGold, marginTop: '10px' }}><DecodeText value={reportData.mutualFriend.receivedCount.toLocaleString()} active={currentScene === 5} /></div>
|
||||
</div>
|
||||
|
||||
<div className="reveal-wrap desc-text" style={{ position: 'absolute', bottom: '20vh' }}>
|
||||
<div className="reveal-inner serif delay-3">
|
||||
你们之间收发的消息高达 <strong className="num-display" style={{color: '#fff', fontSize: '1.5rem'}}>{reportData.mutualFriend.ratio}</strong> 的平衡率
|
||||
你们之间收发的消息高达 <strong className="num-display" style={{ color: COLOR.accentGold, fontSize: '1.5rem' }}>{reportData.mutualFriend.ratio}</strong> 的平衡率
|
||||
<br/>
|
||||
<span style={{ fontSize: '1rem', color: 'rgba(255,255,255,0.5)', marginTop: '15px', display: 'block' }}>“你抛出的每一句话，都落在了对方的心里。<br/>所谓重逢，就是我走向你的时候，你也在走向我。”</span>
|
||||
<span style={{ fontSize: '1rem', color: COLOR.textMuted, marginTop: '15px', display: 'block' }}>“你抛出的每一句话，都落在了对方的心里。<br/>所谓重逢，就是我走向你的时候，你也在走向我。”</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@@ -758,37 +775,37 @@ function AnnualReportWindow() {
|
||||
<div style={{ position: 'absolute', top: '0', left: '0', width: '100%', height: '100%' }}>
|
||||
{reportData.socialInitiative && (
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', top: '28vh', left: '15vw', width: '38vw', textAlign: 'left' }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag delay-1" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.2em' }}>我的主动性</div>
|
||||
<div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(4.5rem, 8vw, 7rem)', color: '#fff', lineHeight: '1', margin: '2vh 0' }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag delay-1" style={{ fontSize: '0.8rem', color: COLOR.textMuted, letterSpacing: '0.2em' }}>我的主动性</div>
|
||||
<div className="reveal-inner num-display delay-2" style={{ fontSize: 'clamp(4.5rem, 8vw, 7rem)', color: COLOR.accentGold, lineHeight: '1', margin: '2vh 0' }}>
|
||||
{reportData.socialInitiative.initiativeRate}%
|
||||
</div>
|
||||
<div className="reveal-inner serif delay-3" style={{ fontSize: '1.2rem', color: 'rgba(255,255,255,0.8)', lineHeight: '1.8' }}>
|
||||
<div style={{ fontSize: '1.3rem', color: 'rgba(255,255,255,0.92)', marginBottom: '0.6vh' }}>
|
||||
<div className="reveal-inner serif delay-3" style={{ fontSize: '1.2rem', color: COLOR.textSoft, lineHeight: '1.8' }}>
|
||||
<div style={{ fontSize: '1.3rem', color: COLOR.textStrong, marginBottom: '0.6vh' }}>
|
||||
你的聊天开场大多由你发起。
|
||||
</div>
|
||||
{reportData.socialInitiative.topInitiatedFriend && (reportData.socialInitiative.topInitiatedCount || 0) > 0 ? (
|
||||
<div style={{ marginBottom: '0.6vh' }}>
|
||||
其中<strong style={{color: '#fff'}}>{reportData.socialInitiative.topInitiatedFriend}</strong>是你最常联系的人，
|
||||
有<strong className="num-display" style={{color: '#fff', fontSize: '1.2rem', margin: '0 4px'}}>{(reportData.socialInitiative.topInitiatedCount || 0).toLocaleString()}</strong>次，是你先忍不住敲响了对方的门
|
||||
其中<strong style={{ color: COLOR.accentGold }}>{reportData.socialInitiative.topInitiatedFriend}</strong>是你最常联系的人，
|
||||
有<strong className="num-display" style={{ color: COLOR.accentGold, fontSize: '1.2rem', margin: '0 4px' }}>{(reportData.socialInitiative.topInitiatedCount || 0).toLocaleString()}</strong>次，是你先忍不住敲响了对方的门
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ marginBottom: '0.6vh' }}>
|
||||
你主动发起了<strong className="num-display" style={{color: '#fff', fontSize: '1.2rem', margin: '0 4px'}}>{reportData.socialInitiative.initiatedChats.toLocaleString()}</strong>次联络。
|
||||
你主动发起了<strong className="num-display" style={{ color: COLOR.accentGold, fontSize: '1.2rem', margin: '0 4px' }}>{reportData.socialInitiative.initiatedChats.toLocaleString()}</strong>次联络。
|
||||
</div>
|
||||
)}
|
||||
<span style={{ fontSize: '0.9rem', color: 'rgba(255,255,255,0.5)' }}>想见一个人的心，总是走在时间的前面。</span>
|
||||
<span style={{ fontSize: '0.9rem', color: COLOR.textMuted }}>想见一个人的心，总是走在时间的前面。</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{reportData.responseSpeed && (
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', bottom: '22vh', right: '15vw', width: '38vw', textAlign: 'right' }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag delay-4" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.3em' }}>回应速度</div>
|
||||
<div className="reveal-inner num-display delay-5" style={{ fontSize: 'clamp(3.5rem, 6vw, 5rem)', color: '#ccc', lineHeight: '1', margin: '2vh 0' }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag delay-4" style={{ fontSize: '0.8rem', color: COLOR.textMuted, letterSpacing: '0.3em' }}>回应速度</div>
|
||||
<div className="reveal-inner num-display delay-5" style={{ fontSize: 'clamp(3.5rem, 6vw, 5rem)', color: COLOR.accentSoft, lineHeight: '1', margin: '2vh 0' }}>
|
||||
<DecodeText value={reportData.responseSpeed.fastestTime} active={currentScene === 6} />S
|
||||
</div>
|
||||
<div className="reveal-inner serif delay-6" style={{ fontSize: '1.2rem', color: 'rgba(255,255,255,0.8)', lineHeight: '1.8' }}>
|
||||
<strong style={{color: '#fff'}}>{reportData.responseSpeed.fastestFriend}</strong> 回你的消息总是很快。<br/>
|
||||
<span style={{ fontSize: '0.9rem', color: 'rgba(255,255,255,0.5)' }}>这世上最让人安心的默契，莫过于一句 "我在"。</span>
|
||||
<div className="reveal-inner serif delay-6" style={{ fontSize: '1.2rem', color: COLOR.textSoft, lineHeight: '1.8' }}>
|
||||
<strong style={{ color: COLOR.accentGold }}>{reportData.responseSpeed.fastestFriend}</strong> 回你的消息总是很快。<br/>
|
||||
<span style={{ fontSize: '0.9rem', color: COLOR.textMuted }}>这世上最让人安心的默契，莫过于一句 "我在"。</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -806,24 +823,24 @@ function AnnualReportWindow() {
|
||||
|
||||
{reportData.longestStreak ? (
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', top: '35vh', left: '15vw', textAlign: 'left' }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag delay-1" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.3em', marginBottom: '2vh' }}>最长连续聊天</div>
|
||||
<div className="reveal-inner serif delay-2" style={{ fontSize: 'clamp(3rem, 6vw, 5rem)', color: '#fff', letterSpacing: '0.02em' }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag delay-1" style={{ fontSize: '0.8rem', color: COLOR.textMuted, letterSpacing: '0.3em', marginBottom: '2vh' }}>最长连续聊天</div>
|
||||
<div className="reveal-inner serif delay-2" style={{ fontSize: 'clamp(3rem, 6vw, 5rem)', color: COLOR.accentGold, letterSpacing: '0.02em' }}>
|
||||
{reportData.longestStreak.friendName}
|
||||
</div>
|
||||
<div className="reveal-inner serif delay-3" style={{ fontSize: '1.2rem', color: 'rgba(255,255,255,0.8)', marginTop: '2vh' }}>
|
||||
你们曾连续 <strong className="num-display" style={{color: '#fff', fontSize: '1.8rem'}}><DecodeText value={reportData.longestStreak.days} active={currentScene === 7} /></strong> 天，聊到忘记了时间,<br/>那些舍不得说再见的日夜，连成了最漫长的春天。
|
||||
<div className="reveal-inner serif delay-3" style={{ fontSize: '1.2rem', color: COLOR.textSoft, marginTop: '2vh' }}>
|
||||
你们曾连续 <strong className="num-display" style={{ color: COLOR.accentGold, fontSize: '1.8rem' }}><DecodeText value={reportData.longestStreak.days} active={currentScene === 7} /></strong> 天，聊到忘记了时间,<br/>那些舍不得说再见的日夜，连成了最漫长的春天。
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{reportData.peakDay ? (
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', bottom: '30vh', right: '15vw', textAlign: 'right' }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag delay-4" style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.3em', marginBottom: '2vh' }}>最热烈的一天</div>
|
||||
<div className="reveal-inner num-display delay-5" style={{ fontSize: 'clamp(2.5rem, 5vw, 4rem)', color: '#fff', letterSpacing: '0.02em' }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag delay-4" style={{ fontSize: '0.8rem', color: COLOR.textMuted, letterSpacing: '0.3em', marginBottom: '2vh' }}>最热烈的一天</div>
|
||||
<div className="reveal-inner num-display delay-5" style={{ fontSize: 'clamp(2.5rem, 5vw, 4rem)', color: COLOR.accentGold, letterSpacing: '0.02em' }}>
|
||||
{reportData.peakDay.date}
|
||||
</div>
|
||||
<div className="reveal-inner serif delay-6" style={{ fontSize: '1.2rem', color: 'rgba(255,255,255,0.8)', marginTop: '2vh' }}>
|
||||
“这一天，你们留下了 <strong className="num-display" style={{color: '#fff', fontSize: '1.8rem'}}>{reportData.peakDay.messageCount}</strong> 句话。<br/>好像要把积攒了很久的想念，一天全都说完。”
|
||||
<div className="reveal-inner serif delay-6" style={{ fontSize: '1.2rem', color: COLOR.textSoft, marginTop: '2vh' }}>
|
||||
“这一天，你们留下了 <strong className="num-display" style={{ color: COLOR.accentGold, fontSize: '1.8rem' }}>{reportData.peakDay.messageCount}</strong> 句话。<br/>好像要把积攒了很久的想念，一天全都说完。”
|
||||
</div>
|
||||
</div>
|
||||
) : 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() {
|
||||
</div>
|
||||
|
||||
{/* S10: EXTRACTION (白色反色结束页 / Data Receipt) */}
|
||||
<div className={getSceneClass(10)} id="scene-10" style={{ color: '#000' }}>
|
||||
<div className={getSceneClass(10)} id="scene-10" style={{ color: COLOR.paperInk }}>
|
||||
<div className="reveal-wrap en-tag" style={{ zIndex: 20 }}>
|
||||
<div className="reveal-inner serif scene0-cn-tag" style={{color: '#999'}}>旅程的终点</div>
|
||||
<div className="reveal-inner serif scene0-cn-tag" style={{ color: COLOR.paperMuted }}>旅程的终点</div>
|
||||
</div>
|
||||
|
||||
{/* The Final Summary Receipt / Dashboard */}
|
||||
<div className="reveal-wrap" style={{ position: 'absolute', top: '45vh', left: '50vw', transform: 'translate(-50%, -50%)', width: '60vw', textAlign: 'center', zIndex: 20 }}>
|
||||
<div className="reveal-inner delay-1" style={{ display: 'flex', flexDirection: 'column', gap: '3vh' }}>
|
||||
<div className="mono num-display" style={{ fontSize: 'clamp(3rem, 6vw, 5rem)', color: '#000', fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1 }}>
|
||||
<div className="mono num-display" style={{ fontSize: 'clamp(3rem, 6vw, 5rem)', color: COLOR.paperInk, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1 }}>
|
||||
{finalYearLabel}
|
||||
</div>
|
||||
<div className="mono" style={{ fontSize: '0.8rem', color: '#666', letterSpacing: '0.4em' }}>
|
||||
<div className="mono" style={{ fontSize: '0.8rem', color: COLOR.paperMuted, letterSpacing: '0.4em' }}>
|
||||
TRANSMISSION COMPLETE
|
||||
</div>
|
||||
|
||||
{/* Core Stats Row */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '6vh', borderTop: '1px solid #ccc', borderBottom: '1px solid #ccc', padding: '4vh 0' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '6vh', borderTop: '1px solid rgba(110, 89, 46, 0.35)', borderBottom: '1px solid rgba(110, 89, 46, 0.35)', padding: '4vh 0' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
<div className="serif scene0-cn-tag" style={{ fontSize: '0.75rem', color: '#888', letterSpacing: '0.1em', marginBottom: '1vh' }}>朋友圈发帖</div>
|
||||
<div className="num-display" style={{ fontSize: '2.5rem', color: '#111', fontWeight: 600 }}>{endingPostCount.toLocaleString()}</div>
|
||||
<div className="serif scene0-cn-tag" style={{ fontSize: '0.75rem', color: COLOR.paperMuted, letterSpacing: '0.1em', marginBottom: '1vh' }}>朋友圈发帖</div>
|
||||
<div className="num-display" style={{ fontSize: '2.5rem', color: COLOR.accentMuted, fontWeight: 600 }}>{endingPostCount.toLocaleString()}</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
<div className="serif scene0-cn-tag" style={{ fontSize: '0.75rem', color: '#888', letterSpacing: '0.1em', marginBottom: '1vh' }}>被动开场</div>
|
||||
<div className="num-display" style={{ fontSize: '2.5rem', color: '#111', fontWeight: 600 }}>{endingReceivedChats.toLocaleString()}</div>
|
||||
<div className="serif scene0-cn-tag" style={{ fontSize: '0.75rem', color: COLOR.paperMuted, letterSpacing: '0.1em', marginBottom: '1vh' }}>被动开场</div>
|
||||
<div className="num-display" style={{ fontSize: '2.5rem', color: COLOR.accentMuted, fontWeight: 600 }}>{endingReceivedChats.toLocaleString()}</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
<div className="serif scene0-cn-tag" style={{ fontSize: '0.75rem', color: '#888', letterSpacing: '0.1em', marginBottom: '1vh' }}>你最爱说</div>
|
||||
<div className="num-display" style={{ fontSize: '2.5rem', color: '#111', fontWeight: 600 }}>“{endingTopPhrase}”</div>
|
||||
<div className="serif scene0-cn-tag" style={{ fontSize: '0.75rem', color: COLOR.paperMuted, letterSpacing: '0.1em', marginBottom: '1vh' }}>你最爱说</div>
|
||||
<div className="num-display" style={{ fontSize: '2.5rem', color: COLOR.accentMuted, fontWeight: 600 }}>“{endingTopPhrase}”</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="serif" style={{ fontSize: '1.2rem', color: '#444', marginTop: '4vh', letterSpacing: '0.05em' }}>
|
||||
<div className="serif" style={{ fontSize: '1.2rem', color: 'rgba(34, 28, 16, 0.82)', marginTop: '4vh', letterSpacing: '0.05em' }}>
|
||||
“故事的最后，我们把这一切悄悄还给岁月<br/>只要这些文字还在，所有的离别，就都只是一场短暂的缺席。”
|
||||
</div>
|
||||
</div>
|
||||
@@ -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'
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user