diff --git a/README.md b/README.md index d57845b..83d7cd2 100644 --- a/README.md +++ b/README.md @@ -72,15 +72,15 @@ _✨ 一个基于 AstrBot 的智能群聊分析插件，支持 **QQ (OneBot)**
点击展开查看其他模板效果图 +retro_futurism 模板效果图 +![retro_futurism效果图](./assets/retro_futurism-demo.jpg) + format 模板效果图 ![format效果图](./assets/format-demo.jpg) simple 模板效果图(用于展示贡献指南) ![simple效果图](./assets/simple-demo.jpg) -retro_futurism 模板效果图 -![retro_futurism效果图](./assets/retro_futurism-demo.jpg) -
## 使用方法 diff --git a/_conf_schema.json b/_conf_schema.json index 1366071..df0dc52 100644 --- a/_conf_schema.json +++ b/_conf_schema.json @@ -69,6 +69,7 @@ "options": [ "scrapbook", "retro_futurism", + "hack", "simple", "format" ], diff --git a/src/infrastructure/reporting/templates/hack/activity_chart.html b/src/infrastructure/reporting/templates/hack/activity_chart.html new file mode 100644 index 0000000..6d1daf2 --- /dev/null +++ b/src/infrastructure/reporting/templates/hack/activity_chart.html @@ -0,0 +1,13 @@ +{% if chart_data %} +{% for item in chart_data %} +
+ {{ item.count }} +
+ {{ "%02d"|format(item.hour) }}:00 +
+{% endfor %} +{% else %} +
+
// NO_DATA_STREAM
+
+{% endif %} \ No newline at end of file diff --git a/src/infrastructure/reporting/templates/hack/image_template.html b/src/infrastructure/reporting/templates/hack/image_template.html new file mode 100644 index 0000000..4963c8e --- /dev/null +++ b/src/infrastructure/reporting/templates/hack/image_template.html @@ -0,0 +1,606 @@ + + + + + + Night Mode Analysis Portal + + + + + + + +
+ +
+
● ready
+
~/analysis
+
+
$ ai --summary
+
$ cd /groups
+
$ api --status
+
🌐 EN
+
+
+ +
+ +
+
+
// main.ts
+

> Group Activity
Insights

+
// Report for {{current_date}}
+ +
+ const stats = {
+   messages: {{message_count}},
+   active_users: {{participant_count}},
+   peak_time: '{{most_active_period}}'
+ };
+ // Total characters: {{total_characters}} +
+
+ + +
+
+ $ ls ./topics +
+
+ {{topics_html}} +
+
+
+ + +
+
+
+
+
+
+
+
+
trend-analytics.tsx
+
+
+ {{hourly_chart_html}} +
+
+ + +
+
+ $ cat ./user_titles +
+
+ {{titles_html}} +
+
+ + +
+
+ $ grep -r "golden_quotes" +
+
+ {{quotes_html}} +
+
+
+
+ + +
+ + + \ No newline at end of file diff --git a/src/infrastructure/reporting/templates/hack/pdf_template.html b/src/infrastructure/reporting/templates/hack/pdf_template.html new file mode 100644 index 0000000..a0ee9a2 --- /dev/null +++ b/src/infrastructure/reporting/templates/hack/pdf_template.html @@ -0,0 +1,394 @@ + + + + + + Night Mode Analysis Portal (PDF) + + + + + + + +
+
+
● ready
+
~/report
+
+ +
+ +
+
+
// Report: {{current_date}}
+

> Daily Analysis

+
+ stats = {
+   msg: {{message_count}},
+   users: {{participant_count}}
+ } +
+
+ +
+
$ ls ./topics
+
+ {{topics_html}} +
+
+
+ + +
+
+
+
+
+
+
+
activity.log
+
+
+ {{hourly_chart_html}} +
+
+ +
+
$ cat users
+
+ {{titles_html}} +
+
+ +
+
$ grep golden
+
+ {{quotes_html}} +
+
+
+
+ + +
+ + + \ No newline at end of file diff --git a/src/infrastructure/reporting/templates/hack/quote_item.html b/src/infrastructure/reporting/templates/hack/quote_item.html new file mode 100644 index 0000000..664ee34 --- /dev/null +++ b/src/infrastructure/reporting/templates/hack/quote_item.html @@ -0,0 +1,24 @@ +{% if quotes %} +
+ {% for quote in quotes %} +
+
+ {% if quote.avatar_url %} + {{ quote.sender }} + {% elif quote.avatar_data %} + {{ quote.sender }} + {% else %} +
+ ID
+ {% endif %} +
+
+
"{{ quote.content }}"
+
-- {{ quote.sender }}
+
// Reason: {{ quote.reason }}
+
+
+ {% endfor %} +
+{% endif %} \ No newline at end of file diff --git a/src/infrastructure/reporting/templates/hack/topic_item.html b/src/infrastructure/reporting/templates/hack/topic_item.html new file mode 100644 index 0000000..1b12510 --- /dev/null +++ b/src/infrastructure/reporting/templates/hack/topic_item.html @@ -0,0 +1,11 @@ +{% if topics %} +
+ {% for topic in topics %} +
+
{{ topic.topic.topic }}
+
/* Participants: {{ topic.contributors }} */
+
{{ topic.detail | safe }}
+
+ {% endfor %} +
+{% endif %} \ No newline at end of file diff --git a/src/infrastructure/reporting/templates/hack/user_title_item.html b/src/infrastructure/reporting/templates/hack/user_title_item.html new file mode 100644 index 0000000..e885030 --- /dev/null +++ b/src/infrastructure/reporting/templates/hack/user_title_item.html @@ -0,0 +1,26 @@ +{% if titles %} +
+ {% for title in titles %} +
+
+ {% if title.avatar_data %} + {{ title.name }} + {% else %} +
+ ID_REF
+ {% endif %} +
+ +
+ {% endfor %} +
+{% endif %} \ No newline at end of file diff --git a/src/infrastructure/reporting/templates/retro_futurism/activity_chart.html b/src/infrastructure/reporting/templates/retro_futurism/activity_chart.html index f5307f8..2b05a1d 100644 --- a/src/infrastructure/reporting/templates/retro_futurism/activity_chart.html +++ b/src/infrastructure/reporting/templates/retro_futurism/activity_chart.html @@ -1,15 +1,15 @@ {% if chart_data %} -{% for item in chart_data %} -
-
{{ "%02d"|format(item.hour) }}:00
-
-
+
+ {% for item in chart_data %} +
+ {{ item.count }} +
+ {{ "%02d"|format(item.hour) }}:00
-
{{ item.count }}
+ {% endfor %}
-{% endfor %} {% else %} -
-
NO_DATA_AVAILABLE
+
+
NO_DATA_AVAILABLE_FOR_ACTIVITY_SPECTRUM
-{% endif %} +{% endif %} \ No newline at end of file diff --git a/src/infrastructure/reporting/templates/retro_futurism/image_template.html b/src/infrastructure/reporting/templates/retro_futurism/image_template.html index b92c946..1d56251 100644 --- a/src/infrastructure/reporting/templates/retro_futurism/image_template.html +++ b/src/infrastructure/reporting/templates/retro_futurism/image_template.html @@ -29,21 +29,28 @@ } :root { - /* Palette */ - --c-bg: #F5EDDC; - --c-text: #181818; - --c-accent: #B2653B; + /* Better Palette - More "Industrial Retro" */ + --c-bg: #F8F4E8; + /* Slightly cleaner vintage paper */ + --c-text: #1A1A1A; + --c-accent: #D35400; + /* Richer orange */ + --c-accent-glow: rgba(211, 84, 0, 0.4); - --c-dec-1: #5C7F71; - --c-dec-2: #802520; - --c-dec-3: #BA8530; + --c-dec-1: #2E4053; + /* Navy slate */ + --c-dec-2: #A93226; + /* Deep rust */ + --c-dec-3: #D4AC0D; + /* Industrial gold */ - --c-grid: rgba(24, 24, 24, 0.08); + --c-grid: rgba(26, 26, 26, 0.05); + --c-scanline: rgba(18, 16, 16, 0.02); /* Fonts */ - --font-display: "Oswald", "Oswald-Fallback", Impact, "Arial Black", sans-serif; - --font-mono: "JetBrains Mono", "JetBrains-Fallback", Consolas, Monaco, "Courier New", monospace; - --font-body: "Noto Sans SC", "NotoSans-Fallback", "Microsoft YaHei", "PingFang SC", sans-serif; + --font-display: "Oswald", "Oswald-Fallback", Impact, sans-serif; + --font-mono: "JetBrains Mono", monospace; + --font-body: "Noto Sans SC", sans-serif; } * { @@ -55,41 +62,59 @@ background-color: var(--c-bg); color: var(--c-text); font-family: var(--font-body); - /* Grid Background */ background-image: linear-gradient(var(--c-grid) 1px, transparent 1px), - linear-gradient(90deg, var(--c-grid) 1px, transparent 1px); - background-size: 40px 40px; + linear-gradient(90deg, var(--c-grid) 1px, transparent 1px), + /* Noise Texture */ + url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); + background-size: 40px 40px, 100% 100%; min-height: 100vh; overflow-x: hidden; + letter-spacing: -0.01em; + font-size: 18px; + /* Increased base font size */ } - /* Layout Container */ + /* Layout Container with Stacked Paper Effect */ .layout { width: 100%; - max-width: 1600px; + max-width: 1400px; margin: 0 auto; - padding: 60px 40px; + padding: 100px 80px; + /* Increased padding */ position: relative; - border-left: 1px solid var(--c-text); - border-right: 1px solid var(--c-text); - background: - linear-gradient(90deg, transparent 0%, transparent 98%, var(--c-accent) 98%, var(--c-accent) 100%); - background-size: 100% 100%; - min-height: 100vh; + background: var(--c-bg); + border-right: 4px solid var(--c-text); + border-bottom: 4px solid var(--c-text); + box-shadow: 20px 20px 0 rgba(0, 0, 0, 0.05); + /* Increased shadow */ + } + + .layout::before { + content: ''; + position: absolute; + top: 15px; + left: -15px; + width: 100%; + height: 100%; + border: 1px solid var(--c-text); + z-index: -1; + opacity: 0.3; } /* Decorative Color Bar */ .color-bar { display: flex; - flex-direction: row; - gap: 0; - margin-bottom: 20px; + gap: 4px; + margin-bottom: 40px; + border: 3px solid var(--c-text); + padding: 4px; + display: inline-flex; } .c-block { - width: 70px; - height: 5px; + width: 100px; + height: 12px; } .cb-1 { @@ -106,322 +131,333 @@ /* Header */ header { - margin-bottom: 60px; - position: relative; + margin-bottom: 100px; + padding-bottom: 60px; + border-bottom: 2px double var(--c-text); } .header-meta { font-family: var(--font-mono); - font-size: 0.75rem; - color: var(--c-text); - opacity: 0.65; - margin-bottom: 12px; - letter-spacing: 0.15rem; + font-size: 1rem; + /* Increased */ + color: var(--c-dec-1); + margin-bottom: 20px; + letter-spacing: 0.4rem; text-transform: uppercase; + font-weight: bold; } h1 { font-family: var(--font-display); - font-size: 4.5rem; - line-height: 0.9; - margin: 0 0 20px; + font-size: 7rem; + /* Significantly Increased (SCRAPBOOK style) */ + line-height: 0.85; + margin: 0 0 40px; text-transform: uppercase; - letter-spacing: -0.1rem; + letter-spacing: -0.2rem; color: var(--c-text); + filter: drop-shadow(6px 6px 0 var(--c-accent-glow)); } h1 .highlight { color: var(--c-accent); + position: relative; + } + + h1 .highlight::after { + content: ''; + position: absolute; + left: 0; + bottom: 10px; + width: 100%; + height: 20px; + background: var(--c-dec-3); + z-index: -1; + opacity: 0.5; } .header-icons { display: flex; - gap: 18px; - margin-top: 20px; - align-items: center; + gap: 20px; + margin-top: 40px; } .header-icon { - width: 38px; - height: 38px; + width: 60px; + height: 60px; display: flex; align-items: center; justify-content: center; - border: 2px solid var(--c-accent); - background: rgba(178, 101, 59, 0.08); + border: 2px solid var(--c-text); + background: #fff; + box-shadow: 4px 4px 0 var(--c-text); } .header-icon svg { - width: 20px; - height: 20px; + width: 32px; + height: 32px; fill: var(--c-text); } .header-brief { - max-width: 500px; - color: rgba(24, 24, 24, 0.8); - line-height: 1.6; - margin-bottom: 24px; - font-size: 0.95rem; - font-weight: 400; + max-width: 800px; + color: rgba(0, 0, 0, 0.7); + line-height: 1.8; + margin: 40px 0; + font-size: 1.4rem; + /* Increased */ + font-family: var(--font-mono); + border-left: 8px solid var(--c-accent); + padding-left: 30px; } .header-meta-row { display: flex; - gap: 30px; + gap: 80px; + margin-top: 60px; } .meta-block { - padding-left: 16px; - border-left: 3px solid var(--c-accent); + display: flex; + flex-direction: column; } .meta-label { font-family: var(--font-mono); - font-size: 0.75rem; - font-weight: 500; - letter-spacing: 0.15rem; + font-size: 0.9rem; + letter-spacing: 0.2rem; text-transform: uppercase; - color: rgba(24, 24, 24, 0.5); + color: var(--c-dec-2); + margin-bottom: 12px; } .meta-value { - display: block; - margin-top: 4px; - color: var(--c-text); font-family: var(--font-mono); - font-size: 0.9rem; - font-weight: 400; + font-size: 1.4rem; + font-weight: bold; } /* CRT Console */ .crt-console { - background: var(--c-text); - color: var(--c-bg); - padding: 20px 24px; + background: #111; + color: #00FF41; + padding: 40px; font-family: var(--font-mono); - font-size: 0.85rem; - line-height: 1.6; + border: 5px solid var(--c-text); + border-radius: 6px; + box-shadow: inset 0 0 60px rgba(0, 0, 0, 1), 10px 10px 0 rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; grid-column: span 12; - border-radius: 6px; + } + + .crt-console::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), + linear-gradient(90deg, rgba(255, 0, 0, 0.05), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.05)); + background-size: 100% 6px, 4px 100%; + pointer-events: none; } .crt-header { display: flex; - align-items: center; - gap: 8px; - margin-bottom: 16px; + gap: 15px; + margin-bottom: 30px; + opacity: 0.7; } .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); + background: #333; + border: 1px solid #555; } .crt-title { - margin-left: 12px; - font-size: 0.65rem; - letter-spacing: 0.2rem; - color: var(--c-accent); - text-transform: uppercase; - } - - .crt-label { - font-size: 0.7rem; - letter-spacing: 0.2rem; - text-transform: uppercase; - color: rgba(245, 237, 220, 0.7); + color: #00FF41; + text-shadow: 0 0 8px #00FF41; + font-size: 1rem; + letter-spacing: 0.4rem; + margin-bottom: 15px; } .crt-value { font-family: var(--font-display); - font-size: 2.5rem; - color: var(--c-accent); - margin: 8px 0; + font-size: 6rem; + /* Increased */ + color: #fff; + text-shadow: 0 0 15px rgba(255, 255, 255, 0.5); + margin: 15px 0; + letter-spacing: -3px; } .crt-sub { - font-size: 0.8rem; - color: rgba(245, 237, 220, 0.8); + opacity: 0.8; + font-size: 1rem; + border-top: 2px solid #333; + padding-top: 15px; + display: flex; + justify-content: space-between; } /* Grid System */ .grid-container { display: grid; grid-template-columns: repeat(12, 1fr); - gap: 20px; - margin-bottom: 60px; + gap: 40px; + margin-bottom: 100px; } /* Section Labels */ .section-label { grid-column: span 12; font-family: var(--font-display); - font-size: 1.8rem; + font-size: 3.5rem; + /* Increased */ text-transform: uppercase; - border-bottom: 2px solid var(--c-text); - padding-bottom: 8px; - margin-bottom: 20px; + border-bottom: 6px solid var(--c-text); + padding-bottom: 20px; + margin-bottom: 40px; display: flex; justify-content: space-between; - align-items: flex-end; - letter-spacing: 0.1rem; + align-items: center; } .section-label span { background: var(--c-text); color: var(--c-bg); - padding: 2px 10px; - font-size: 0.75rem; + padding: 8px 20px; + font-size: 1.1rem; font-family: var(--font-mono); - vertical-align: middle; - letter-spacing: 0.15rem; + letter-spacing: 0.4rem; } /* Stat Box */ .stat-box { grid-column: span 3; - border: 1px solid var(--c-text); - padding: 20px; + border: 3px solid var(--c-text); + padding: 40px 30px; + background: #fff; position: relative; - background: rgba(255, 255, 255, 0.5); - border-radius: 6px; - } - - .stat-box::before { - content: ''; - position: absolute; - top: 4px; - left: 4px; - right: 4px; - bottom: 4px; - border: 1px solid var(--c-grid); - pointer-events: none; + box-shadow: 8px 8px 0 var(--c-text); } .stat-label { font-family: var(--font-mono); - font-size: 0.8rem; - font-weight: 500; + font-size: 0.9rem; + font-weight: bold; text-transform: uppercase; color: var(--c-dec-1); - margin-bottom: 10px; + margin-bottom: 20px; + letter-spacing: 0.3rem; display: block; - letter-spacing: 0.15rem; } .stat-value { font-family: var(--font-display); - font-size: 3rem; + font-size: 5rem; color: var(--c-accent); - line-height: 1; + line-height: 0.8; + margin-bottom: 15px; } .stat-note { - font-size: 0.85rem; - color: rgba(24, 24, 24, 0.7); - margin-top: 8px; - font-weight: 400; - } - - /* Content Box (for topics, titles, quotes) */ - .content-box { - grid-column: span 12; - border: 1px solid var(--c-text); - padding: 24px; - background: rgba(255, 255, 255, 0.5); - position: relative; - border-radius: 6px; - } - - .content-box::before { - content: ''; - position: absolute; - top: 6px; - left: 6px; - right: 6px; - bottom: 6px; - border: 1px solid var(--c-grid); - pointer-events: none; - } - - /* Activity Chart */ - .activity-wrapper { + font-size: 1rem; + color: #666; font-family: var(--font-mono); - font-size: 0.85rem; + text-transform: uppercase; } - .activity-row { - display: grid; - grid-template-columns: 60px 1fr 50px; - align-items: center; - gap: 12px; - padding: 8px 0; - border-bottom: 1px solid var(--c-grid); + /* Content Card */ + .content-card { + grid-column: span 12; + border: 3px solid var(--c-text); + background: #fff; + padding: 60px; + box-shadow: 12px 12px 0 var(--c-grid); } - .activity-row:last-child { - border-bottom: none; + /* Activity Chart Redesign: Horizontal side-by-side bars */ + .activity-container { + display: flex; + align-items: flex-end; + justify-content: space-between; + height: 350px; + /* Chart height */ + padding: 20px 0; + border-bottom: 3px solid var(--c-text); + margin-bottom: 40px; } - .activity-hour { - letter-spacing: 0.1rem; - color: rgba(24, 24, 24, 0.6); - } - - .activity-meter { - background: rgba(24, 24, 24, 0.08); - height: 8px; - border-radius: 2px; - overflow: hidden; - } - - .activity-bar { - height: 100%; - width: var(--pct, 10%); - background: var(--c-accent); - } - - .activity-count { - text-align: right; - color: rgba(24, 24, 24, 0.6); - } - - /* Topic List */ - .topic-list { + .activity-col { + flex: 1; display: flex; flex-direction: column; - gap: 16px; - padding: 0; - width: 100%; + align-items: center; + height: 100%; + justify-content: flex-end; + gap: 15px; + } + + .activity-bar-vertical { + width: 70%; + background: var(--c-accent); + border: 2px solid var(--c-text); + height: var(--h, 0%); + /* Height from style */ + position: relative; + min-height: 4px; + box-shadow: 4px 0 0 rgba(0, 0, 0, 0.05); + } + + .activity-bar-vertical::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent); + } + + .activity-label-hour { + font-family: var(--font-mono); + font-size: 0.75rem; + font-weight: bold; + transform: rotate(-45deg); + white-space: nowrap; + margin-top: 10px; + color: var(--c-dec-1); + } + + .activity-col-count { + font-family: var(--font-mono); + font-size: 0.8rem; + font-weight: bold; + color: var(--c-text); + margin-bottom: 5px; + } + + /* Topic Items */ + .topic-list { + display: grid; + grid-template-columns: 1fr; + gap: 40px; + margin-bottom: 100px; } .topic-item { - 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); + display: flex; + border: 3px solid var(--c-text); + background: #fff; position: relative; - border-radius: 6px; + box-shadow: 12px 12px 0 var(--c-text); + padding: 40px; } .topic-item::before { @@ -430,344 +466,213 @@ left: 0; top: 0; bottom: 0; - width: 4px; - background: var(--c-dec-1); - border-radius: 6px 0 0 6px; - } - - .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); - border-radius: 0 6px 6px 0; - } - - .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); + background: repeating-linear-gradient(45deg, var(--c-dec-2), var(--c-dec-2) 15px, transparent 15px, transparent 30px); } .topic-content { - display: flex; - flex-direction: column; - gap: 8px; + margin-left: 30px; + flex: 1; } .topic-title { - margin: 0; - font-size: 1.15rem; - font-weight: 500; - letter-spacing: 0.05rem; - color: var(--c-text); + font-family: var(--font-display); + font-size: 3rem; + margin: 0 0 20px; + text-transform: uppercase; } .topic-meta { font-family: var(--font-mono); - font-size: 0.8rem; - font-weight: 600; - letter-spacing: 0.15rem; - color: rgba(24, 24, 24, 0.7); - text-transform: uppercase; + font-size: 1rem; + color: var(--c-dec-1); + margin-bottom: 20px; + background: var(--c-grid); + padding: 8px 15px; + display: inline-block; } .topic-detail { - color: rgba(24, 24, 24, 0.8); - line-height: 1.6; - font-size: 0.95rem; - font-weight: 400; + font-size: 1.4rem; + line-height: 1.8; + color: #333; } - /* User Title Grid */ + /* User Titles */ .title-grid { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 20px; + gap: 50px; } .title-item { - border: 1px solid var(--c-text); - padding: 18px; - position: relative; - background: rgba(255, 255, 255, 0.5); - border-radius: 6px; - } - - .title-header { display: flex; + gap: 30px; align-items: center; - gap: 14px; - margin-bottom: 12px; + /* Center aligned */ + padding: 40px; + border: 2px solid var(--c-text); + background: #fff; + box-shadow: 8px 8px 0 var(--c-grid); } - .title-info { - display: flex; - flex-direction: column; - gap: 8px; - } - - .title-avatar { - width: 52px; - height: 52px; - border-radius: 50%; - overflow: hidden; - border: 1px solid var(--c-text); - background: rgba(24, 24, 24, 0.08); + .title-avatar-wrap { + width: 120px; + height: 120px; flex-shrink: 0; + /* Important! */ + border: 3px solid var(--c-text); + box-shadow: 6px 6px 0 var(--c-dec-3); + overflow: hidden; + background: #eee; } - .title-avatar img { + .title-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; - filter: grayscale(50%) contrast(110%); + filter: grayscale(100%) contrast(1.1); } - .title-avatar-fallback { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; + .title-info { + flex: 1; + } + + .title-info h4 { + margin: 0 0 10px; + font-family: var(--font-display); + font-size: 2.2rem; + line-height: 1; + } + + .title-badge { font-family: var(--font-mono); - font-size: 0.7rem; - letter-spacing: 0.15rem; - color: rgba(24, 24, 24, 0.5); - } - - .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; - font-weight: 600; - letter-spacing: 0.15rem; - background: rgba(24, 24, 24, 0.08); - padding: 3px 10px; - border-radius: 3px; - } - - .title-role { - font-family: var(--font-mono); - font-weight: 600; - letter-spacing: 0.15rem; - text-transform: uppercase; - color: var(--c-accent); - background: rgba(178, 101, 59, 0.15); - padding: 3px 10px; - font-size: 0.75rem; - border-radius: 3px; + font-size: 0.9rem; + background: var(--c-text); + color: #fff; + padding: 5px 12px; + margin-bottom: 15px; + display: inline-flex; + gap: 10px; } .title-reason { - margin: 8px 0 0; - font-size: 0.95rem; - color: rgba(24, 24, 24, 0.8); - line-height: 1.5; - font-weight: 400; + font-size: 1.2rem; + line-height: 1.6; + margin-top: 15px; + color: #444; } - /* Quote List */ + /* Quotes */ .quote-list { - display: flex; - flex-direction: column; - gap: 16px; - padding: 0; - width: 100%; + display: grid; + gap: 30px; } .quote-item { - 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; - border-radius: 6px; - } - - .quote-item::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 4px; - background: var(--c-dec-1); - border-radius: 6px 0 0 6px; - } - - .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); - border-radius: 0 6px 6px 0; - } - - .quote-icon { - width: 16px; - height: 16px; display: flex; - align-items: center; - justify-content: center; + gap: 30px; + align-items: flex-start; + padding: 40px; + background: #fff; + border: 3px solid var(--c-text); + border-left: 20px solid var(--c-accent); + box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.05); } - .quote-icon svg { - width: 14px; - height: 14px; - fill: var(--c-accent); + .quote-avatar { + width: 90px; + height: 90px; + flex-shrink: 0; + border: 2px solid var(--c-text); + border-radius: 50%; + overflow: hidden; + filter: grayscale(100%); + } + + .quote-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .quote-body { + flex: 1; } .quote-content { - font-size: 1.05rem; - color: var(--c-text); - margin: 0 0 8px; + font-family: "JetBrains Mono", monospace; + font-size: 1.6rem; line-height: 1.6; - font-weight: 400; + margin-bottom: 20px; + font-style: italic; + position: relative; + } + + .quote-content::before { + content: '"'; + position: absolute; + left: -20px; + top: -10px; + font-size: 3rem; + opacity: 0.2; + color: var(--c-accent); } .quote-author { - font-family: var(--font-mono); - font-size: 0.8rem; - font-weight: 600; - letter-spacing: 0.15rem; - color: rgba(24, 24, 24, 0.7); + font-weight: bold; + font-family: var(--font-display); + font-size: 1.6rem; text-transform: uppercase; + color: var(--c-dec-1); } - .quote-note { - font-size: 0.9rem; - color: rgba(24, 24, 24, 0.75); - margin-top: 8px; - font-weight: 400; - } - - /* Token Strip */ - .token-strip { - grid-column: span 12; - border-top: 2px solid var(--c-text); - padding-top: 16px; - display: flex; - gap: 40px; + .quote-reason-small { + font-size: 1rem; + color: #666; + margin-top: 10px; font-family: var(--font-mono); - font-size: 0.75rem; - letter-spacing: 0.1rem; - } - - .token-label { - color: rgba(24, 24, 24, 0.5); - text-transform: uppercase; } /* Footer */ footer { - margin-top: 60px; - border-top: 3px solid var(--c-text); - padding-top: 16px; + margin-top: 100px; + padding: 60px 0; + border-top: 8px solid var(--c-text); + font-family: var(--font-mono); + font-size: 0.8rem; + display: flex; + flex-direction: column; + gap: 20px; + } + + .footer-row { 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; - letter-spacing: 0.15rem; - color: rgba(24, 24, 24, 0.6); } .footer-tokens { display: flex; - gap: 24px; + gap: 30px; + opacity: 0.6; } .footer-author { - font-family: var(--font-mono); - font-size: 0.7rem; color: var(--c-accent); - letter-spacing: 0.1rem; + font-weight: bold; } - /* CRT Overlay */ .crt-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.03) 50%); + background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%); background-size: 100% 4px; pointer-events: none; - z-index: 999; - } - - /* Responsive */ - @media (max-width: 768px) { - .layout { - padding: 40px 24px; - } - - h1 { - font-size: 3rem; - } - - .stat-box { - grid-column: span 6; - } - - .title-grid { - grid-template-columns: 1fr; - } - - .header-meta-row { - flex-direction: column; - gap: 16px; - } + z-index: 1000; } @@ -865,7 +770,7 @@ Hourly Broadcast ACTIVITY_SPECTRUM
-
+
{{hourly_chart_html}}
@@ -885,7 +790,7 @@ Operator Registry TITLES_MODULE
-
+
{{titles_html}}
diff --git a/src/infrastructure/reporting/templates/retro_futurism/quote_item.html b/src/infrastructure/reporting/templates/retro_futurism/quote_item.html index 9e93300..a897760 100644 --- a/src/infrastructure/reporting/templates/retro_futurism/quote_item.html +++ b/src/infrastructure/reporting/templates/retro_futurism/quote_item.html @@ -1,17 +1,20 @@ {% if quotes %} {% for quote in quotes %} -
- -
- - - +
+ {% if quote.avatar_url %} +
+ {{ quote.sender }}
-
-

{{ quote.content }}

-
— {{ quote.sender }}
-

{{ quote.reason }}

+ {% elif quote.avatar_data %} +
+ {{ quote.sender }}
-
+ {% endif %} +
+
{{ quote.content }}
+
ORIGIN: {{ quote.sender }}
+
ANALYSIS // {{ quote.reason }}
+
+ {% endfor %} -{% endif %} +{% endif %} \ No newline at end of file diff --git a/src/infrastructure/reporting/templates/retro_futurism/topic_item.html b/src/infrastructure/reporting/templates/retro_futurism/topic_item.html index 79ea130..e4fb19e 100644 --- a/src/infrastructure/reporting/templates/retro_futurism/topic_item.html +++ b/src/infrastructure/reporting/templates/retro_futurism/topic_item.html @@ -1,17 +1,12 @@ {% if topics %} {% for topic in topics %} -
- -
- - - -
+

{{ topic.topic.topic }}

-

PARTICIPANTS: {{ topic.contributors }}

-

{{ topic.detail | safe }}

+
SUBJECT ID: #{{ "%02d"|format(loop.index) }} // PARTICIPANTS: {{ topic.contributors }} +
+
{{ topic.detail | safe }}
-
+ {% endfor %} -{% endif %} +{% endif %} \ No newline at end of file diff --git a/src/infrastructure/reporting/templates/retro_futurism/user_title_item.html b/src/infrastructure/reporting/templates/retro_futurism/user_title_item.html index 88e490f..30d3b82 100644 --- a/src/infrastructure/reporting/templates/retro_futurism/user_title_item.html +++ b/src/infrastructure/reporting/templates/retro_futurism/user_title_item.html @@ -1,23 +1,24 @@ {% if titles %} {% for title in titles %} -
-
-
- {% if title.avatar_data %} - {{ title.name }} - {% else %} -
CRT
- {% endif %} -
-
- {{ title.name }} -
- {{ title.mbti }} - {{ title.title }} -
-
+
+
+ {% if title.avatar_data %} + {{ title.name }} + {% else %} +
+ DATA_ERR
+ {% endif %}
-

{{ title.reason }}

-
+
+

{{ title.name }}

+
+ {{ title.mbti }} + // + {{ title.title }} +
+
{{ title.reason }}
+
+
{% endfor %} -{% endif %} +{% endif %} \ No newline at end of file