mirror of
https://github.com/Nezumi-2711/astrbot_plugin_qq_group_daily_analysis.git
synced 2026-09-22 13:38:43 +00:00
feat: Update Retro Futurism templates with enhanced styling and layout adjustments
This commit is contained in:
Saramanda9988
committed by
Helian Nuits
Helian Nuits
parent
0d704e8ed6
commit
777469c2e6
@@ -150,9 +150,11 @@
|
||||
|
||||
.header-brief {
|
||||
max-width: 500px;
|
||||
color: rgba(24, 24, 24, 0.7);
|
||||
color: rgba(24, 24, 24, 0.8);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 24px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.header-meta-row {
|
||||
@@ -167,7 +169,8 @@
|
||||
|
||||
.meta-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.15rem;
|
||||
text-transform: uppercase;
|
||||
color: rgba(24, 24, 24, 0.5);
|
||||
@@ -178,7 +181,8 @@
|
||||
margin-top: 4px;
|
||||
color: var(--c-text);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* CRT Console */
|
||||
@@ -194,15 +198,30 @@
|
||||
grid-column: span 12;
|
||||
}
|
||||
|
||||
.crt-console::before {
|
||||
content: "CRT_CHANNEL // PEAK_ACTIVITY";
|
||||
display: block;
|
||||
border-bottom: 1px solid #444;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--c-accent);
|
||||
.crt-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.crt-btn {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.crt-btn-1 { background: var(--c-dec-1); }
|
||||
.crt-btn-2 { background: var(--c-dec-2); }
|
||||
.crt-btn-3 { background: var(--c-dec-3); }
|
||||
|
||||
.crt-title {
|
||||
margin-left: 12px;
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.2rem;
|
||||
color: var(--c-accent);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.crt-label {
|
||||
@@ -279,7 +298,8 @@
|
||||
|
||||
.stat-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: var(--c-dec-1);
|
||||
margin-bottom: 10px;
|
||||
@@ -295,9 +315,10 @@
|
||||
}
|
||||
|
||||
.stat-note {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(24, 24, 24, 0.6);
|
||||
font-size: 0.85rem;
|
||||
color: rgba(24, 24, 24, 0.7);
|
||||
margin-top: 8px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Content Box (for topics, titles, quotes) */
|
||||
@@ -305,7 +326,7 @@
|
||||
grid-column: span 12;
|
||||
border: 1px solid var(--c-text);
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -323,7 +344,7 @@
|
||||
/* Activity Chart */
|
||||
.activity-wrapper {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.activity-row {
|
||||
@@ -331,7 +352,7 @@
|
||||
grid-template-columns: 60px 1fr 50px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 6px 0;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--c-grid);
|
||||
}
|
||||
|
||||
@@ -366,48 +387,94 @@
|
||||
.topic-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
padding: 0;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 1fr;
|
||||
gap: 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--c-grid);
|
||||
grid-template-columns: 16px 1fr;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
padding-left: 20px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid var(--c-text);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topic-item:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
.topic-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--c-dec-1);
|
||||
}
|
||||
|
||||
.topic-index {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.2rem;
|
||||
color: rgba(24, 24, 24, 0.3);
|
||||
.topic-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--c-dec-2);
|
||||
}
|
||||
|
||||
.topic-item .color-third {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--c-dec-3);
|
||||
}
|
||||
|
||||
.topic-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.topic-icon svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: var(--c-accent);
|
||||
}
|
||||
|
||||
.topic-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05rem;
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.topic-meta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.15rem;
|
||||
color: rgba(24, 24, 24, 0.5);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.topic-detail {
|
||||
color: rgba(24, 24, 24, 0.7);
|
||||
color: rgba(24, 24, 24, 0.8);
|
||||
line-height: 1.6;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* User Title Grid */
|
||||
@@ -424,26 +491,6 @@
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.title-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 24px;
|
||||
height: 4px;
|
||||
background: var(--c-dec-1);
|
||||
}
|
||||
|
||||
.title-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 32px;
|
||||
width: 24px;
|
||||
height: 4px;
|
||||
background: var(--c-dec-2);
|
||||
}
|
||||
|
||||
.title-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -451,6 +498,12 @@
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.title-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title-avatar {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
@@ -482,32 +535,43 @@
|
||||
|
||||
.title-name {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.title-badges {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-mbti {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.65rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15rem;
|
||||
background: rgba(24, 24, 24, 0.08);
|
||||
padding: 2px 8px;
|
||||
margin-left: 8px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.title-role {
|
||||
font-family: var(--font-mono);
|
||||
letter-spacing: 0.2rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15rem;
|
||||
text-transform: uppercase;
|
||||
color: var(--c-accent);
|
||||
margin: 8px 0;
|
||||
font-size: 0.8rem;
|
||||
background: rgba(178, 101, 59, 0.15);
|
||||
padding: 3px 10px;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.title-reason {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: rgba(24, 24, 24, 0.7);
|
||||
margin: 8px 0 0;
|
||||
font-size: 0.95rem;
|
||||
color: rgba(24, 24, 24, 0.8);
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Quote List */
|
||||
@@ -515,42 +579,87 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 0;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.quote-item {
|
||||
border: 1px dashed var(--c-text);
|
||||
padding: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 16px 1fr;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
padding-left: 20px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid var(--c-text);
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.quote-item::before {
|
||||
content: '"';
|
||||
font-family: var(--font-display);
|
||||
font-size: 2rem;
|
||||
color: var(--c-accent);
|
||||
opacity: 0.5;
|
||||
line-height: 1;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--c-dec-1);
|
||||
}
|
||||
|
||||
.quote-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--c-dec-2);
|
||||
}
|
||||
|
||||
.quote-item .color-third {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--c-dec-3);
|
||||
}
|
||||
|
||||
.quote-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quote-icon svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: var(--c-accent);
|
||||
}
|
||||
|
||||
.quote-content {
|
||||
font-size: 1rem;
|
||||
font-size: 1.05rem;
|
||||
color: var(--c-text);
|
||||
margin: 8px 0;
|
||||
margin: 0 0 8px;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.quote-author {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.15rem;
|
||||
color: rgba(24, 24, 24, 0.6);
|
||||
color: rgba(24, 24, 24, 0.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.quote-note {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(24, 24, 24, 0.7);
|
||||
font-size: 0.9rem;
|
||||
color: rgba(24, 24, 24, 0.75);
|
||||
margin-top: 8px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Token Strip */
|
||||
@@ -577,6 +686,9 @@
|
||||
padding-top: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
@@ -584,6 +696,11 @@
|
||||
color: rgba(24, 24, 24, 0.6);
|
||||
}
|
||||
|
||||
.footer-tokens {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* CRT Overlay */
|
||||
.crt-overlay {
|
||||
position: fixed;
|
||||
@@ -697,6 +814,12 @@
|
||||
<!-- CRT Console -->
|
||||
<div class="grid-container">
|
||||
<div class="crt-console">
|
||||
<div class="crt-header">
|
||||
<span class="crt-btn crt-btn-1"></span>
|
||||
<span class="crt-btn crt-btn-2"></span>
|
||||
<span class="crt-btn crt-btn-3"></span>
|
||||
<span class="crt-title">CRT_CHANNEL // PEAK_ACTIVITY</span>
|
||||
</div>
|
||||
<div class="crt-label">Peak Activity Window</div>
|
||||
<div class="crt-value">{{most_active_period}}</div>
|
||||
<div class="crt-sub">活跃序列 SCAN // 消息流强度 {{message_count}}</div>
|
||||
@@ -719,12 +842,8 @@
|
||||
<div class="section-label">
|
||||
Thread Matrix <span>TOPICS_MODULE</span>
|
||||
</div>
|
||||
<div class="grid-container">
|
||||
<div class="content-box">
|
||||
<div class="topic-list">
|
||||
{{topics_html}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="topic-list">
|
||||
{{topics_html}}
|
||||
</div>
|
||||
|
||||
<!-- Titles -->
|
||||
@@ -743,25 +862,17 @@
|
||||
<div class="section-label">
|
||||
Golden Lines <span>QUOTES_MODULE</span>
|
||||
</div>
|
||||
<div class="grid-container">
|
||||
<div class="content-box">
|
||||
<div class="quote-list">
|
||||
{{quotes_html}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Token Strip -->
|
||||
<div class="grid-container">
|
||||
<div class="token-strip">
|
||||
<div><span class="token-label">Total Tokens //</span> {{total_tokens}}</div>
|
||||
<div><span class="token-label">Prompt //</span> {{prompt_tokens}}</div>
|
||||
<div><span class="token-label">Completion //</span> {{completion_tokens}}</div>
|
||||
</div>
|
||||
<div class="quote-list">
|
||||
{{quotes_html}}
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div>CRT_EXPORT_CHANNEL // QQ群日常分析</div>
|
||||
<div class="footer-tokens">
|
||||
<span>Total Tokens // {{total_tokens}}</span>
|
||||
<span>Prompt // {{prompt_tokens}}</span>
|
||||
<span>Completion // {{completion_tokens}}</span>
|
||||
</div>
|
||||
<div>END_OF_LINE_</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@@ -228,15 +228,31 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.crt-console::before {
|
||||
content: "CRT CHANNEL";
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 16px;
|
||||
.crt-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.crt-btn {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.crt-btn-1 { background: var(--c-accent-1); }
|
||||
.crt-btn-2 { background: var(--c-accent-2); }
|
||||
.crt-btn-3 { background: var(--c-accent-3); }
|
||||
|
||||
.crt-title {
|
||||
margin-left: 12px;
|
||||
font-family: var(--font-mono);
|
||||
letter-spacing: 0.22rem;
|
||||
font-size: 0.68rem;
|
||||
color: rgba(245, 237, 220, 0.6);
|
||||
color: var(--c-main);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.crt-label {
|
||||
@@ -290,7 +306,8 @@
|
||||
|
||||
.stat-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2rem;
|
||||
text-transform: uppercase;
|
||||
color: rgba(24, 24, 24, 0.55);
|
||||
@@ -305,8 +322,9 @@
|
||||
}
|
||||
|
||||
.stat-note {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(24, 24, 24, 0.7);
|
||||
font-size: 0.95rem;
|
||||
color: rgba(24, 24, 24, 0.75);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.module {
|
||||
@@ -406,43 +424,91 @@
|
||||
.topic-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
margin-top: 12px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.topic-card {
|
||||
display: grid;
|
||||
grid-template-columns: 90px 1fr;
|
||||
gap: 20px;
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 1px solid rgba(24, 24, 24, 0.08);
|
||||
grid-template-columns: 16px 1fr;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
padding-left: 20px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(24, 24, 24, 0.12);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topic-index {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.35rem;
|
||||
color: rgba(24, 24, 24, 0.35);
|
||||
.topic-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--c-accent-1);
|
||||
}
|
||||
|
||||
.topic-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--c-accent-2);
|
||||
}
|
||||
|
||||
.topic-card .color-third {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--c-accent-3);
|
||||
}
|
||||
|
||||
.topic-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.topic-icon svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: var(--c-main);
|
||||
}
|
||||
|
||||
.topic-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04rem;
|
||||
color: var(--c-dark);
|
||||
}
|
||||
|
||||
.topic-meta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.16rem;
|
||||
color: rgba(24, 24, 24, 0.5);
|
||||
margin: 6px 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.topic-detail {
|
||||
color: rgba(24, 24, 24, 0.75);
|
||||
color: rgba(24, 24, 24, 0.8);
|
||||
line-height: 1.6;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.title-grid {
|
||||
@@ -457,32 +523,11 @@
|
||||
grid-template-columns: 72px 1fr;
|
||||
column-gap: 18px;
|
||||
padding: 18px;
|
||||
border: 1px solid rgba(24, 24, 24, 0.08);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 237, 220, 0.6));
|
||||
border: 1px solid rgba(24, 24, 24, 0.12);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title-card::before,
|
||||
.title-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.title-card::before {
|
||||
left: 12px;
|
||||
width: 32px;
|
||||
background: var(--c-accent-1);
|
||||
}
|
||||
|
||||
.title-card::after {
|
||||
left: 48px;
|
||||
width: 32px;
|
||||
background: var(--c-accent-2);
|
||||
}
|
||||
|
||||
.title-avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
@@ -515,102 +560,147 @@
|
||||
|
||||
.title-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 12px;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.title-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title-name {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.title-badges {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-mbti {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.18rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15rem;
|
||||
background: rgba(24, 24, 24, 0.08);
|
||||
padding: 2px 10px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.title-role {
|
||||
grid-column: 2;
|
||||
font-family: var(--font-mono);
|
||||
letter-spacing: 0.3rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15rem;
|
||||
text-transform: uppercase;
|
||||
color: var(--c-main);
|
||||
margin: 8px 0;
|
||||
background: rgba(178, 101, 59, 0.15);
|
||||
padding: 3px 10px;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.title-reason {
|
||||
grid-column: 2;
|
||||
margin: 0;
|
||||
font-size: 0.92rem;
|
||||
color: rgba(24, 24, 24, 0.75);
|
||||
margin: 8px 0 0;
|
||||
font-size: 0.95rem;
|
||||
color: rgba(24, 24, 24, 0.8);
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.quote-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
margin-top: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.quote-card {
|
||||
padding: 24px;
|
||||
border: 1px dashed rgba(24, 24, 24, 0.15);
|
||||
background: #fff8ee;
|
||||
display: grid;
|
||||
grid-template-columns: 16px 1fr;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
padding-left: 20px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(24, 24, 24, 0.12);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quote-card::after {
|
||||
content: "";
|
||||
.quote-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: 40px;
|
||||
width: 90px;
|
||||
height: 6px;
|
||||
background: var(--c-dark);
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--c-accent-1);
|
||||
}
|
||||
|
||||
.quote-glyph {
|
||||
font-size: 2.5rem;
|
||||
color: rgba(178, 101, 59, 0.4);
|
||||
margin: 0;
|
||||
.quote-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--c-accent-2);
|
||||
}
|
||||
|
||||
.quote-card .color-third {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--c-accent-3);
|
||||
}
|
||||
|
||||
.quote-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quote-icon svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: var(--c-main);
|
||||
}
|
||||
|
||||
.quote-content {
|
||||
font-size: 1.05rem;
|
||||
color: var(--c-dark);
|
||||
margin: 12px 0;
|
||||
margin: 0 0 8px;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.quote-author {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2rem;
|
||||
color: rgba(24, 24, 24, 0.6);
|
||||
color: rgba(24, 24, 24, 0.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.quote-note {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(24, 24, 24, 0.7);
|
||||
margin-top: 10px;
|
||||
color: rgba(24, 24, 24, 0.75);
|
||||
margin-top: 8px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.token-strip {
|
||||
padding: 0 64px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.token-panel {
|
||||
border-top: 1px solid rgba(24, 24, 24, 0.15);
|
||||
padding: 16px 0 8px;
|
||||
.footer-tokens {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
font-family: var(--font-mono);
|
||||
letter-spacing: 0.15rem;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
footer {
|
||||
@@ -621,6 +711,9 @@
|
||||
letter-spacing: 0.25rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
color: rgba(24, 24, 24, 0.65);
|
||||
}
|
||||
|
||||
@@ -634,8 +727,11 @@
|
||||
margin: 24px auto 60px;
|
||||
}
|
||||
|
||||
.section-shell,
|
||||
.token-strip {
|
||||
.section-shell {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
@@ -695,6 +791,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="crt-console">
|
||||
<div class="crt-header">
|
||||
<span class="crt-btn crt-btn-1"></span>
|
||||
<span class="crt-btn crt-btn-2"></span>
|
||||
<span class="crt-btn crt-btn-3"></span>
|
||||
<span class="crt-title">CRT CHANNEL</span>
|
||||
</div>
|
||||
<div class="crt-label">Peak Window</div>
|
||||
<div class="crt-value">{{most_active_period}}</div>
|
||||
<div class="crt-sub">活跃序列 SCAN</div>
|
||||
@@ -746,18 +848,14 @@
|
||||
{{quotes_html}}
|
||||
</div>
|
||||
|
||||
<section class="token-strip">
|
||||
<div class="module-kicker">Token Monitor</div>
|
||||
<div class="token-panel">
|
||||
<div>Total Tokens // {{total_tokens}}</div>
|
||||
<div>Prompt Tokens // {{prompt_tokens}}</div>
|
||||
<div>Completion Tokens // {{completion_tokens}}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<span>CRT EXPORT CHANNEL</span>
|
||||
<span>END OF LINE</span>
|
||||
<span>CRT_EXPORT_CHANNEL // QQ群日常分析</span>
|
||||
<div class="footer-tokens">
|
||||
<span>Total Tokens // {{total_tokens}}</span>
|
||||
<span>Prompt // {{prompt_tokens}}</span>
|
||||
<span>Completion // {{completion_tokens}}</span>
|
||||
</div>
|
||||
<span>END_OF_LINE_</span>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
@@ -1,10 +1,17 @@
|
||||
{% if quotes %}
|
||||
{% for quote in quotes %}
|
||||
<article class="quote-item">
|
||||
<div class="quote-glyph">"</div>
|
||||
<p class="quote-content">{{ quote.content }}</p>
|
||||
<div class="quote-author">— {{ quote.sender }}</div>
|
||||
<p class="quote-note">{{ quote.reason }}</p>
|
||||
<span class="color-third"></span>
|
||||
<div class="quote-icon">
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="quote-content">{{ quote.content }}</p>
|
||||
<div class="quote-author">— {{ quote.sender }}</div>
|
||||
<p class="quote-note">{{ quote.reason }}</p>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
{% if topics %}
|
||||
{% for topic in topics %}
|
||||
<article class="topic-item">
|
||||
<div class="topic-index">{{ "%02d"|format(topic.index) }}</div>
|
||||
<div>
|
||||
<span class="color-third"></span>
|
||||
<div class="topic-icon">
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="topic-content">
|
||||
<h3 class="topic-title">{{ topic.topic.topic }}</h3>
|
||||
<p class="topic-meta">PARTICIPANTS: {{ topic.contributors }}</p>
|
||||
<p class="topic-detail">{{ topic.topic.detail }}</p>
|
||||
|
||||
@@ -9,12 +9,14 @@
|
||||
<div class="title-avatar-fallback">CRT</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<div class="title-info">
|
||||
<span class="title-name">{{ title.name }}</span>
|
||||
<span class="title-mbti">{{ title.mbti }}</span>
|
||||
<div class="title-badges">
|
||||
<span class="title-mbti">{{ title.mbti }}</span>
|
||||
<span class="title-role">{{ title.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-role">{{ title.title }}</div>
|
||||
<p class="title-reason">{{ title.reason }}</p>
|
||||
</article>
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user