@cyber-dash-tech/revela 0.18.16 → 0.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -31
- package/README.zh-CN.md +45 -31
- package/assets/img/lucent-01.jpg +0 -0
- package/assets/img/lucent-02.jpg +0 -0
- package/assets/img/lucent-03.jpg +0 -0
- package/assets/img/lucent-dark-01.jpg +0 -0
- package/assets/img/lucent-dark-02.jpg +0 -0
- package/assets/img/lucent-dark-03.jpg +0 -0
- package/assets/img/monet-01.jpg +0 -0
- package/assets/img/monet-02.jpg +0 -0
- package/assets/img/monet-03.jpg +0 -0
- package/assets/img/starter-01.jpg +0 -0
- package/assets/img/starter-02.jpg +0 -0
- package/assets/img/starter-03.jpg +0 -0
- package/assets/img/summit-01.jpg +0 -0
- package/assets/img/summit-02.jpg +0 -0
- package/assets/img/summit-03.jpg +0 -0
- package/designs/lucent/DESIGN.md +76 -0
- package/designs/lucent/design.css +283 -0
- package/designs/lucent-dark/DESIGN.md +278 -0
- package/designs/lucent-dark/assets/card-lens.jpg +0 -0
- package/designs/lucent-dark/assets/closing-background.jpg +0 -0
- package/designs/lucent-dark/assets/cover-background.jpg +0 -0
- package/designs/lucent-dark/assets/report-visual.jpg +0 -0
- package/designs/lucent-dark/assets/soft-texture.jpg +0 -0
- package/designs/lucent-dark/assets/toc-orb.png +0 -0
- package/designs/lucent-dark/design.css +417 -0
- package/designs/monet/DESIGN.md +14 -0
- package/designs/monet/assets/card-lens.jpg +0 -0
- package/designs/monet/assets/closing-background.jpg +0 -0
- package/designs/monet/assets/cover-background.jpg +0 -0
- package/designs/monet/assets/report-visual.jpg +0 -0
- package/designs/monet/assets/soft-texture.jpg +0 -0
- package/designs/monet/assets/toc-orb.png +0 -0
- package/designs/monet/design.css +340 -0
- package/designs/starter/DESIGN.md +14 -0
- package/designs/starter/assets/card-lens.jpg +0 -0
- package/designs/starter/assets/closing-background.jpg +0 -0
- package/designs/starter/assets/cover-background.jpg +0 -0
- package/designs/starter/assets/report-visual.jpg +0 -0
- package/designs/starter/assets/soft-texture.jpg +0 -0
- package/designs/starter/assets/toc-orb.png +0 -0
- package/designs/starter/design.css +322 -0
- package/designs/summit/DESIGN.md +18 -0
- package/designs/summit/assets/card-lens.jpg +0 -0
- package/designs/summit/assets/closing-background.jpg +0 -0
- package/designs/summit/assets/cover-background.jpg +0 -0
- package/designs/summit/assets/report-visual.jpg +0 -0
- package/designs/summit/assets/soft-texture.jpg +0 -0
- package/designs/summit/assets/toc-orb.png +0 -0
- package/designs/summit/design.css +334 -0
- package/lib/commands/designs-new.ts +13 -25
- package/lib/commands/designs-preview.ts +3 -8
- package/lib/deck-html/foundation.ts +8 -8
- package/lib/design/designs.ts +317 -14
- package/lib/narrative-state/deck-plan-artifact.ts +40 -3
- package/lib/page-templates/built-in-preview.html +373 -0
- package/lib/page-templates/contracts.ts +2 -0
- package/lib/page-templates/css.ts +2 -0
- package/lib/page-templates/foundation.ts +41 -0
- package/lib/page-templates/index.ts +6 -0
- package/lib/page-templates/registry.ts +3 -0
- package/lib/page-templates/render.ts +1202 -0
- package/lib/page-templates/templates/agenda.ts +4 -0
- package/lib/page-templates/templates/chart-takeaways.ts +4 -0
- package/lib/page-templates/templates/claim-supporting-visual.ts +4 -0
- package/lib/page-templates/templates/closing.ts +4 -0
- package/lib/page-templates/templates/cover.ts +4 -0
- package/lib/page-templates/templates/executive-summary.ts +4 -0
- package/lib/page-templates/templates/index.ts +19 -0
- package/lib/page-templates/templates/key-message-evidence.ts +4 -0
- package/lib/page-templates/templates/metric-highlight.ts +4 -0
- package/lib/page-templates/templates/problem-context.ts +4 -0
- package/lib/page-templates/templates/process-steps.ts +4 -0
- package/lib/page-templates/templates/recommendation-decision.ts +4 -0
- package/lib/page-templates/templates/risks-tradeoffs.ts +4 -0
- package/lib/page-templates/templates/section-divider.ts +4 -0
- package/lib/page-templates/templates/shared.ts +11 -0
- package/lib/page-templates/templates/table-comparison.ts +4 -0
- package/lib/page-templates/templates/timeline-roadmap.ts +4 -0
- package/lib/page-templates/vocabulary.ts +158 -0
- package/lib/prompt-builder.ts +5 -5
- package/lib/qa/artifact.ts +66 -1
- package/lib/qa/compliance.ts +5 -1
- package/lib/runtime/index.ts +99 -3
- package/package.json +7 -15
- package/plugins/revela/.codex-plugin/plugin.json +1 -1
- package/plugins/revela/hooks/revela_guard.ts +35 -0
- package/plugins/revela/hooks/revela_post_write_notice.ts +4 -4
- package/plugins/revela/mcp/revela-server.ts +104 -6
- package/plugins/revela/skills/revela/SKILL.md +1 -1
- package/plugins/revela/skills/revela-design/SKILL.md +22 -16
- package/plugins/revela/skills/revela-helper/SKILL.md +1 -1
- package/plugins/revela/skills/revela-make-deck/SKILL.md +25 -16
- package/designs/lucent/preview.html +0 -529
- package/designs/monet/preview.html +0 -190
- package/designs/starter/preview.html +0 -335
- package/designs/summit/preview.html +0 -186
|
@@ -1,529 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="zh-CN">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Lucent Design System — Contract Preview</title>
|
|
7
|
-
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
|
|
8
|
-
<style>
|
|
9
|
-
:root {
|
|
10
|
-
--bg-frame: #07111f;
|
|
11
|
-
--bg-page: #f7f9fc;
|
|
12
|
-
--bg-page-alt: #eef3f9;
|
|
13
|
-
--surface: #ffffff;
|
|
14
|
-
--surface-tint: #f1f6fc;
|
|
15
|
-
--surface-blue: #e7f0fb;
|
|
16
|
-
--text-primary: #101a2b;
|
|
17
|
-
--text-secondary: #42526a;
|
|
18
|
-
--text-muted: #7b8aa0;
|
|
19
|
-
--line: rgba(44, 70, 108, 0.14);
|
|
20
|
-
--line-strong: rgba(44, 70, 108, 0.28);
|
|
21
|
-
--accent-primary: #315eea;
|
|
22
|
-
--accent-secondary: #6e5df6;
|
|
23
|
-
--accent-cyan: #18a8d8;
|
|
24
|
-
--accent-coral: #f06370;
|
|
25
|
-
--accent-soft: #dbe8ff;
|
|
26
|
-
--shadow-soft: rgba(30, 65, 130, 0.13);
|
|
27
|
-
--font-display: DengXian, "Microsoft YaHei", "PingFang SC", Arial, ui-sans-serif, sans-serif;
|
|
28
|
-
--font-body: DengXian, "Microsoft YaHei", "PingFang SC", Arial, ui-sans-serif, sans-serif;
|
|
29
|
-
--grid-margin-x: 72px;
|
|
30
|
-
--grid-margin-y: 56px;
|
|
31
|
-
--grid-columns: 12;
|
|
32
|
-
--grid-gutter: 24px;
|
|
33
|
-
--grid-safe-top: 56px;
|
|
34
|
-
--grid-safe-bottom: 64px;
|
|
35
|
-
--space-1: 8px;
|
|
36
|
-
--space-2: 16px;
|
|
37
|
-
--space-3: 24px;
|
|
38
|
-
--space-4: 32px;
|
|
39
|
-
--space-5: 48px;
|
|
40
|
-
--space-6: 72px;
|
|
41
|
-
--font-size-caption: 16px;
|
|
42
|
-
--font-size-body-small: 18px;
|
|
43
|
-
--font-size-body: 22px;
|
|
44
|
-
--font-size-h3: 31px;
|
|
45
|
-
--font-size-h2: 52px;
|
|
46
|
-
--font-size-hero: 104px;
|
|
47
|
-
--surface-radius: 8px;
|
|
48
|
-
--surface-radius-large: 12px;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
52
|
-
html { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; }
|
|
53
|
-
body { min-height: 100%; background: var(--bg-frame); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
|
|
54
|
-
.slide { min-height: 100dvh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-frame); }
|
|
55
|
-
.slide-canvas { width: 1920px; height: 1080px; flex-shrink: 0; transform-origin: center center; position: relative; overflow: hidden; padding: 0; }
|
|
56
|
-
.page { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--bg-page); color: var(--text-primary); box-shadow: 0 24px 80px var(--shadow-soft); }
|
|
57
|
-
.page.report { padding: var(--grid-margin-y) var(--grid-margin-x) var(--grid-safe-bottom); background: radial-gradient(circle at 94% 8%, rgba(24,168,216,.11), rgba(247,249,252,0) 26%), radial-gradient(circle at 5% 88%, rgba(110,93,246,.10), rgba(247,249,252,0) 28%), var(--bg-page); }
|
|
58
|
-
.page.alt { background: var(--bg-page-alt); }
|
|
59
|
-
.grid-page { display: grid; grid-template-rows: 192px minmax(0, 1fr) 24px; gap: var(--space-4); }
|
|
60
|
-
.slide-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); height: 100%; min-height: 0; }
|
|
61
|
-
.grid-overlay { position: absolute; inset: var(--grid-margin-y) var(--grid-margin-x) var(--grid-safe-bottom); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); pointer-events: none; opacity: .18; }
|
|
62
|
-
.grid-overlay span { border-left: 1px solid rgba(49,94,234,.28); border-right: 1px solid rgba(49,94,234,.10); background: rgba(49,94,234,.025); }
|
|
63
|
-
.preview-label { position: absolute; left: var(--grid-margin-x); top: 24px; z-index: 20; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(123,138,160,.72); }
|
|
64
|
-
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-primary); letter-spacing: 0; }
|
|
65
|
-
h1 { font-size: 88px; line-height: 1.22; font-weight: 700; padding: 14px 0; }
|
|
66
|
-
h2 { font-size: 46px; line-height: 1.22; font-weight: 700; padding: 4px 0; }
|
|
67
|
-
h3 { font-size: var(--font-size-h3); line-height: 1.22; font-weight: 700; }
|
|
68
|
-
h4 { font-size: 25px; line-height: 1.26; font-weight: 700; }
|
|
69
|
-
p, li { font-size: var(--font-size-body); line-height: 1.56; color: var(--text-secondary); }
|
|
70
|
-
.eyebrow, .meta, .caption { font-size: var(--font-size-caption); line-height: 1.42; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
|
|
71
|
-
.source-note { font-family: "Times New Roman", Times, serif; font-size: 16px; line-height: 1.42; color: var(--text-muted); letter-spacing: 0; text-transform: none; }
|
|
72
|
-
.report-header { grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-4); align-items: start; border-bottom: 1px solid var(--line); padding-bottom: var(--space-3); overflow: visible; }
|
|
73
|
-
.report-title { max-width: 1280px; }
|
|
74
|
-
.report-title h2 { margin-top: var(--space-2); }
|
|
75
|
-
.brand-watermark { justify-self: end; width: 172px; height: 34px; object-fit: contain; opacity: .9; }
|
|
76
|
-
.page-number { position: absolute; right: 34px; bottom: 26px; z-index: 10; font-size: 12px; letter-spacing: .14em; color: var(--text-muted); }
|
|
77
|
-
.page-number.light { color: rgba(255,255,255,.72); }
|
|
78
|
-
.reveal { opacity: 1; transform: none; }
|
|
79
|
-
|
|
80
|
-
.hero { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0b1630; }
|
|
81
|
-
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
|
|
82
|
-
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,17,31,.70) 0%, rgba(7,17,31,.34) 46%, rgba(7,17,31,.12) 100%); }
|
|
83
|
-
.hero-shade.light { background: linear-gradient(90deg, rgba(247,249,252,.94) 0%, rgba(247,249,252,.72) 44%, rgba(247,249,252,.20) 100%); }
|
|
84
|
-
.hero-content { position: relative; z-index: 2; height: 100%; padding: 86px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-content: end; }
|
|
85
|
-
.hero-title { grid-column: 1 / span 8; padding-bottom: 44px; overflow: visible; }
|
|
86
|
-
.hero-title h1 { display: block; overflow: visible; }
|
|
87
|
-
.hero-title h1 { color: #fff; max-width: 920px; }
|
|
88
|
-
.hero-title p { margin-top: var(--space-3); max-width: 720px; color: rgba(255,255,255,.78); }
|
|
89
|
-
.hero-meta { position: absolute; left: 86px; top: 76px; display: flex; gap: 28px; color: rgba(255,255,255,.74); font-size: 15px; letter-spacing: .10em; text-transform: uppercase; }
|
|
90
|
-
.hero.light .hero-title h1 { color: var(--text-primary); }
|
|
91
|
-
.hero.light .hero-title p { color: var(--text-secondary); }
|
|
92
|
-
|
|
93
|
-
.toc-wrap { height: 100%; padding: 88px 96px 76px; display: grid; grid-template-columns: 4fr 8fr; column-gap: var(--space-6); align-items: stretch; background: var(--bg-page); }
|
|
94
|
-
.toc-title { border-right: 1px solid var(--line); padding-right: var(--space-5); display: flex; flex-direction: column; justify-content: space-between; }
|
|
95
|
-
.toc-title h2 { font-size: 54px; line-height: 1.24; padding: 4px 0; }
|
|
96
|
-
.toc-title p { max-width: 360px; }
|
|
97
|
-
.toc-list { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); }
|
|
98
|
-
.toc-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
|
|
99
|
-
.toc-list span { display: block; font-size: 36px; line-height: 1.28; padding: 2px 0; color: var(--accent-secondary); font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
100
|
-
.toc-list strong { font-size: 34px; color: var(--text-primary); font-weight: 700; }
|
|
101
|
-
.toc-list em { display: block; margin-top: var(--space-1); font-style: normal; font-size: 21px; line-height: 1.35; color: var(--text-muted); }
|
|
102
|
-
.toc-orb { position: absolute; right: 24px; bottom: 16px; width: 420px; opacity: .30; mix-blend-mode: multiply; pointer-events: none; }
|
|
103
|
-
|
|
104
|
-
.box, .insight-card, .rec-panel, .stat-card, .echart-panel, .table-panel, .media-frame, .text-panel { border: 1px solid var(--line); border-radius: var(--surface-radius); background: rgba(255,255,255,.88); box-shadow: 0 14px 38px rgba(30,65,130,.07); }
|
|
105
|
-
.box, .text-panel { padding: var(--space-4); }
|
|
106
|
-
.box h3, .box h4, .text-panel h3 { margin-bottom: var(--space-2); }
|
|
107
|
-
.box p, .text-panel p { font-size: 21px; }
|
|
108
|
-
.text-panel .source-note { margin-top: var(--space-3); }
|
|
109
|
-
.media-frame { overflow: hidden; min-height: 0; }
|
|
110
|
-
.media-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
|
|
111
|
-
.media-caption { margin-top: var(--space-2); }
|
|
112
|
-
.stat-card { padding: var(--space-3); }
|
|
113
|
-
.stat-value { font-size: 54px; line-height: 1.12; color: var(--accent-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
114
|
-
.stat-card p { margin-top: var(--space-1); font-size: 17px; line-height: 1.36; }
|
|
115
|
-
|
|
116
|
-
.report-story-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--space-5); height: 100%; min-height: 0; }
|
|
117
|
-
.story-copy { align-self: stretch; }
|
|
118
|
-
.story-media { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-2); min-height: 0; }
|
|
119
|
-
.story-media .media-frame { height: 100%; }
|
|
120
|
-
.story-media .source-note { padding-left: var(--space-1); }
|
|
121
|
-
|
|
122
|
-
.card-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1.18fr .92fr .92fr; gap: var(--space-4); height: 100%; min-height: 0; }
|
|
123
|
-
.insight-card { padding: var(--space-4); display: flex; flex-direction: column; min-height: 0; }
|
|
124
|
-
.insight-card.featured { background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(231,240,251,.86)), url("assets/card-lens.jpg") center / cover no-repeat; border-color: rgba(49,94,234,.24); }
|
|
125
|
-
.insight-card h3 { margin: var(--space-2) 0; }
|
|
126
|
-
.card-num { display: block; font-size: 52px; line-height: 1.28; padding: 2px 0; color: var(--accent-secondary); font-weight: 700; }
|
|
127
|
-
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: auto; padding-top: var(--space-3); }
|
|
128
|
-
.chip { border: 1px solid rgba(49,94,234,.20); background: rgba(255,255,255,.68); border-radius: 999px; padding: 8px 12px; color: var(--text-primary); font-size: 15px; font-weight: 700; }
|
|
129
|
-
|
|
130
|
-
.chart-layout { grid-column: 1 / -1; display: grid; grid-template-columns: 8fr 4fr; gap: var(--space-4); height: 100%; min-height: 0; }
|
|
131
|
-
.sankey-layout { grid-column: 1 / -1; display: grid; grid-template-columns: 8fr 4fr; gap: var(--space-4); height: 100%; min-height: 0; }
|
|
132
|
-
.echart-panel { padding: var(--space-4); display: flex; flex-direction: column; min-height: 0; }
|
|
133
|
-
.chart-header { padding-bottom: var(--space-2); margin-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
|
|
134
|
-
.chart-header p { font-size: 18px; color: var(--text-muted); }
|
|
135
|
-
.echart-container { flex: 1; min-height: 0; }
|
|
136
|
-
.takeaway-col { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; }
|
|
137
|
-
.takeaway { padding: var(--space-3); border-left: 4px solid var(--accent-primary); border-radius: 0 var(--surface-radius) var(--surface-radius) 0; background: var(--surface-tint); }
|
|
138
|
-
.takeaway.coral { border-left-color: var(--accent-coral); }
|
|
139
|
-
.takeaway p { font-size: 19px; line-height: 1.42; }
|
|
140
|
-
|
|
141
|
-
.table-panel { grid-column: 1 / -1; padding: var(--space-4); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-3); min-height: 0; }
|
|
142
|
-
table { width: 100%; border-collapse: collapse; font-size: 23px; line-height: 1.42; font-variant-numeric: tabular-nums; }
|
|
143
|
-
th { text-align: left; padding: 0 16px 16px 0; border-bottom: 1.5px solid var(--line-strong); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
|
|
144
|
-
td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); color: var(--text-secondary); }
|
|
145
|
-
th:not(:first-child), td:not(:first-child) { text-align: right; }
|
|
146
|
-
.positive { color: var(--accent-primary); font-weight: 700; }
|
|
147
|
-
.warning { color: var(--accent-coral); font-weight: 700; }
|
|
148
|
-
|
|
149
|
-
.roadmap { grid-column: 1 / -1; position: relative; height: 100%; border-radius: var(--surface-radius-large); overflow: hidden; background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(231,240,251,.78)); border: 1px solid rgba(49,94,234,.16); box-shadow: 0 22px 60px rgba(30,65,130,.10); }
|
|
150
|
-
.roadmap::after { content: ""; position: absolute; left: 126px; right: 126px; top: 352px; height: 16px; border-radius: 999px; background: linear-gradient(90deg, rgba(49,94,234,.18), rgba(110,93,246,.44), rgba(240,99,112,.38)); z-index: 1; }
|
|
151
|
-
.roadmap-item { position: absolute; z-index: 2; width: 370px; min-height: 150px; padding: 22px var(--space-3) var(--space-3); border: 1px solid rgba(49,94,234,.18); background: rgba(255,255,255,.82); border-radius: 10px; box-shadow: 0 18px 48px rgba(30,65,130,.10); overflow: visible; }
|
|
152
|
-
.roadmap-item:nth-child(1) { left: 84px; top: 84px; }
|
|
153
|
-
.roadmap-item:nth-child(2) { left: 492px; top: 430px; }
|
|
154
|
-
.roadmap-item:nth-child(3) { left: 900px; top: 84px; }
|
|
155
|
-
.roadmap-item:nth-child(4) { right: 84px; top: 430px; }
|
|
156
|
-
.roadmap-connector { position: absolute; z-index: 1; width: 1px; background: rgba(49,94,234,.26); transform: translateX(-50%); }
|
|
157
|
-
.roadmap-connector--1 { left: 269px; top: 234px; height: 126px; }
|
|
158
|
-
.roadmap-connector--2 { left: 677px; top: 360px; height: 70px; }
|
|
159
|
-
.roadmap-connector--3 { left: 1085px; top: 234px; height: 126px; }
|
|
160
|
-
.roadmap-connector--4 { left: 1505px; top: 360px; height: 70px; }
|
|
161
|
-
.roadmap-dot { position: absolute; z-index: 3; top: 360px; width: 22px; height: 22px; border-radius: 999px; background: var(--accent-primary); box-shadow: 0 0 0 8px rgba(49,94,234,.12); transform: translate(-50%, -50%); }
|
|
162
|
-
.roadmap-dot--1 { left: 269px; }
|
|
163
|
-
.roadmap-dot--2 { left: 677px; background: var(--accent-cyan); }
|
|
164
|
-
.roadmap-dot--3 { left: 1085px; background: var(--accent-secondary); }
|
|
165
|
-
.roadmap-dot--4 { left: 1505px; background: var(--accent-coral); }
|
|
166
|
-
.roadmap-item p { font-size: 16px; line-height: 1.45; }
|
|
167
|
-
|
|
168
|
-
.recommendation-layout { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); height: 100%; min-height: 0; }
|
|
169
|
-
.rec-panel { padding: var(--space-4); display: flex; flex-direction: column; min-height: 0; }
|
|
170
|
-
.rec-panel.primary { background: linear-gradient(145deg, rgba(49,94,234,.08), rgba(255,255,255,.9)); border-color: rgba(49,94,234,.26); }
|
|
171
|
-
.rec-label { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-primary); font-weight: 700; }
|
|
172
|
-
.steps { margin-top: var(--space-3); list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
|
|
173
|
-
.steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-2); align-items: start; }
|
|
174
|
-
.steps span { width: 34px; height: 34px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--accent-primary); color: #fff; font-size: 16px; font-weight: 700; }
|
|
175
|
-
.steps p { font-size: 19px; line-height: 1.42; }
|
|
176
|
-
</style>
|
|
177
|
-
</head>
|
|
178
|
-
<body>
|
|
179
|
-
<section class="slide" slide-qa="false" data-slide-index="1" data-slide-role="cover" data-preview-layout="cover">
|
|
180
|
-
<div class="slide-canvas">
|
|
181
|
-
<div class="hero" data-preview-component="hero">
|
|
182
|
-
<img class="hero-bg" src="assets/cover-background.jpg" alt="Lucent cover background">
|
|
183
|
-
<div class="hero-shade"></div>
|
|
184
|
-
<div class="hero-meta"><span>Lucent Design System</span><span>Contract Preview</span></div>
|
|
185
|
-
<div class="hero-content">
|
|
186
|
-
<div class="hero-title">
|
|
187
|
-
<h1>明亮、可读、证据优先的报告型 deck</h1>
|
|
188
|
-
<p>Preview now demonstrates grid rails, stable layout slots, component states, chart containers, and source-note behavior.</p>
|
|
189
|
-
</div>
|
|
190
|
-
</div>
|
|
191
|
-
<div class="page-number light" data-preview-component="page-number">01</div>
|
|
192
|
-
</div>
|
|
193
|
-
</div>
|
|
194
|
-
</section>
|
|
195
|
-
|
|
196
|
-
<section class="slide" slide-qa="false" data-slide-index="2" data-preview-layout="toc">
|
|
197
|
-
<div class="slide-canvas">
|
|
198
|
-
<p class="preview-label">layout fixture / toc</p>
|
|
199
|
-
<div class="toc-wrap" data-preview-component="toc">
|
|
200
|
-
<div class="toc-title">
|
|
201
|
-
<div>
|
|
202
|
-
<p class="eyebrow">Agenda</p>
|
|
203
|
-
<h2>从叙事到证据，再到行动</h2>
|
|
204
|
-
</div>
|
|
205
|
-
<p>TOC uses a two-zone rail: title and numbered agenda stay aligned to the same report rhythm.</p>
|
|
206
|
-
</div>
|
|
207
|
-
<ol class="toc-list">
|
|
208
|
-
<li><span>01</span><div><strong>Context</strong><em>为什么现在需要重建增长叙事</em></div></li>
|
|
209
|
-
<li><span>02</span><div><strong>Evidence</strong><em>哪些信号支持优先级变化</em></div></li>
|
|
210
|
-
<li><span>03</span><div><strong>Decision</strong><em>试点路径、指标和下一步</em></div></li>
|
|
211
|
-
</ol>
|
|
212
|
-
<img class="toc-orb" src="assets/toc-orb.png" alt="">
|
|
213
|
-
</div>
|
|
214
|
-
<div class="page-number">02</div>
|
|
215
|
-
</div>
|
|
216
|
-
</section>
|
|
217
|
-
|
|
218
|
-
<section class="slide" slide-qa="true" data-slide-index="3" data-preview-layout="report-story">
|
|
219
|
-
<div class="slide-canvas">
|
|
220
|
-
<div class="page report grid-page">
|
|
221
|
-
<p class="preview-label">layout fixture / report-story</p>
|
|
222
|
-
<div class="grid-overlay" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
|
|
223
|
-
<header class="report-header">
|
|
224
|
-
<div class="report-title"><p class="eyebrow">Mixed-language narrative</p><h2>核心判断必须先被读懂，证据视觉随后解释边界</h2></div>
|
|
225
|
-
<img class="brand-watermark" src="assets/report-visual.jpg" alt="Lucent mark" data-preview-component="brand-watermark">
|
|
226
|
-
</header>
|
|
227
|
-
<main class="slide-grid">
|
|
228
|
-
<div class="report-story-grid">
|
|
229
|
-
<div class="text-panel story-copy" data-preview-component="text-panel">
|
|
230
|
-
<h3>Slide-level claim remains outside the card</h3>
|
|
231
|
-
<p>Lucent keeps the page claim in the header, while body modules explain context, caveats, and implications. 中文段落与 English body copy share the same line-height and spacing rhythm.</p>
|
|
232
|
-
<ul class="steps" style="margin-top:24px;">
|
|
233
|
-
<li><span>1</span><p>Use the left slot for reasoning and caveats.</p></li>
|
|
234
|
-
<li><span>2</span><p>Use the right slot for readable evidence media.</p></li>
|
|
235
|
-
</ul>
|
|
236
|
-
<p class="source-note">Source note: preview fixture only; source text remains small, readable, and inside the safe area.</p>
|
|
237
|
-
</div>
|
|
238
|
-
<div class="story-media" data-preview-component="media">
|
|
239
|
-
<div class="media-frame"><img src="assets/report-visual.jpg" alt="Report visual sample"></div>
|
|
240
|
-
<p class="source-note">Media usage: supporting image, screenshot, or report visual; not a decorative hero.</p>
|
|
241
|
-
</div>
|
|
242
|
-
</div>
|
|
243
|
-
</main>
|
|
244
|
-
<div class="page-number">03</div>
|
|
245
|
-
</div>
|
|
246
|
-
</div>
|
|
247
|
-
</section>
|
|
248
|
-
|
|
249
|
-
<section class="slide" slide-qa="true" data-slide-index="4" data-preview-layout="card-grid">
|
|
250
|
-
<div class="slide-canvas">
|
|
251
|
-
<div class="page report grid-page">
|
|
252
|
-
<p class="preview-label">layout fixture / card-grid + dense state</p>
|
|
253
|
-
<header class="report-header">
|
|
254
|
-
<div class="report-title"><p class="eyebrow">Dense synthesis</p><h2>三张卡片表达一组洞察，而不是三个互不相干的装饰块</h2></div>
|
|
255
|
-
<img class="brand-watermark" src="assets/report-visual.jpg" alt="Lucent mark">
|
|
256
|
-
</header>
|
|
257
|
-
<main class="slide-grid">
|
|
258
|
-
<div class="card-grid">
|
|
259
|
-
<article class="insight-card featured" data-preview-component="box">
|
|
260
|
-
<div class="card-num">01</div>
|
|
261
|
-
<h3>Strategic signal</h3>
|
|
262
|
-
<p>购买理由从“功能兴趣”转向“路径、收益、风险”的组合判断。</p>
|
|
263
|
-
<div class="chip-row"><span class="chip">ICP fit</span><span class="chip">90d pilot</span><span class="chip">Proof gap</span></div>
|
|
264
|
-
</article>
|
|
265
|
-
<article class="insight-card">
|
|
266
|
-
<div class="card-num">02</div>
|
|
267
|
-
<h3>Operating gap</h3>
|
|
268
|
-
<p>现有内容资产不足以支撑复杂购买委员会的连续评估。</p>
|
|
269
|
-
<div class="stat-card" data-preview-component="stat-card"><div class="stat-value">3x</div><p>More proof points needed per buyer role.</p></div>
|
|
270
|
-
</article>
|
|
271
|
-
<article class="insight-card">
|
|
272
|
-
<div class="card-num">03</div>
|
|
273
|
-
<h3>Priority move</h3>
|
|
274
|
-
<p>先统一叙事主线，再重排渠道资源，避免把症状当成策略。</p>
|
|
275
|
-
<div class="chip-row"><span class="chip">Narrative</span><span class="chip">Evidence</span><span class="chip">Channel</span></div>
|
|
276
|
-
</article>
|
|
277
|
-
</div>
|
|
278
|
-
</main>
|
|
279
|
-
<div class="page-number">04</div>
|
|
280
|
-
</div>
|
|
281
|
-
</div>
|
|
282
|
-
</section>
|
|
283
|
-
|
|
284
|
-
<section class="slide" slide-qa="true" data-slide-index="5" data-preview-layout="chart-with-takeaways">
|
|
285
|
-
<div class="slide-canvas">
|
|
286
|
-
<div class="page report grid-page">
|
|
287
|
-
<p class="preview-label">layout fixture / chart-with-takeaways</p>
|
|
288
|
-
<header class="report-header">
|
|
289
|
-
<div class="report-title"><p class="eyebrow">Chart container</p><h2>数据图表占据稳定区域，解释卡片承接读法和决策含义</h2></div>
|
|
290
|
-
<img class="brand-watermark" src="assets/report-visual.jpg" alt="Lucent mark">
|
|
291
|
-
</header>
|
|
292
|
-
<main class="slide-grid">
|
|
293
|
-
<div class="chart-layout">
|
|
294
|
-
<section class="echart-panel" data-preview-component="echart-panel">
|
|
295
|
-
<div class="chart-header"><h3>Pipeline quality index</h3><p>Transparent chart background, explicit axis colors, fixed container height.</p></div>
|
|
296
|
-
<div id="channelChart" class="echart-container"></div>
|
|
297
|
-
</section>
|
|
298
|
-
<aside class="takeaway-col">
|
|
299
|
-
<div class="takeaway"><h4>Read first</h4><p>New-channel quality improves only after proof assets are introduced.</p></div>
|
|
300
|
-
<div class="takeaway coral"><h4>Watch-out</h4><p>CAC pressure rises before conversion lift appears, so the pilot needs guardrail metrics.</p></div>
|
|
301
|
-
<p class="source-note">Source note: example data for design preview, not user evidence.</p>
|
|
302
|
-
</aside>
|
|
303
|
-
</div>
|
|
304
|
-
</main>
|
|
305
|
-
<div class="page-number">05</div>
|
|
306
|
-
</div>
|
|
307
|
-
</div>
|
|
308
|
-
</section>
|
|
309
|
-
|
|
310
|
-
<section class="slide" slide-qa="true" data-slide-index="6" data-preview-layout="sankey">
|
|
311
|
-
<div class="slide-canvas">
|
|
312
|
-
<div class="page report grid-page">
|
|
313
|
-
<p class="preview-label">layout fixture / sankey</p>
|
|
314
|
-
<header class="report-header">
|
|
315
|
-
<div class="report-title"><p class="eyebrow">Flow evidence</p><h2>Sankey 保持宽图区域，右侧只解释路径含义和 caveat</h2></div>
|
|
316
|
-
<img class="brand-watermark" src="assets/report-visual.jpg" alt="Lucent mark">
|
|
317
|
-
</header>
|
|
318
|
-
<main class="slide-grid">
|
|
319
|
-
<div class="sankey-layout">
|
|
320
|
-
<section class="echart-panel">
|
|
321
|
-
<div class="chart-header"><h3>Audience path map</h3><p>Use ECharts for flow diagrams; do not fake data flow with CSS divs.</p></div>
|
|
322
|
-
<div id="sankeyChart" class="echart-container"></div>
|
|
323
|
-
</section>
|
|
324
|
-
<aside class="takeaway-col">
|
|
325
|
-
<div class="takeaway"><h4>Implication</h4><p>Most evaluation friction sits between initial interest and proof review.</p></div>
|
|
326
|
-
<div class="takeaway"><h4>Boundary</h4><p>Preview labels are illustrative; real decks must preserve source and unsupported scope.</p></div>
|
|
327
|
-
</aside>
|
|
328
|
-
</div>
|
|
329
|
-
</main>
|
|
330
|
-
<div class="page-number">06</div>
|
|
331
|
-
</div>
|
|
332
|
-
</div>
|
|
333
|
-
</section>
|
|
334
|
-
|
|
335
|
-
<section class="slide" slide-qa="true" data-slide-index="7" data-preview-layout="table">
|
|
336
|
-
<div class="slide-canvas">
|
|
337
|
-
<div class="page report grid-page">
|
|
338
|
-
<p class="preview-label">layout fixture / table</p>
|
|
339
|
-
<header class="report-header">
|
|
340
|
-
<div class="report-title"><p class="eyebrow">Tabular evidence</p><h2>表格页优先保证列对齐、数字可读和 source note 不被挤出安全区</h2></div>
|
|
341
|
-
<img class="brand-watermark" src="assets/report-visual.jpg" alt="Lucent mark">
|
|
342
|
-
</header>
|
|
343
|
-
<main class="slide-grid">
|
|
344
|
-
<section class="table-panel" data-preview-component="data-table">
|
|
345
|
-
<h3>Pilot scorecard fixture</h3>
|
|
346
|
-
<table>
|
|
347
|
-
<thead><tr><th>Workstream</th><th>Baseline</th><th>Target</th><th>Risk</th></tr></thead>
|
|
348
|
-
<tbody>
|
|
349
|
-
<tr><td>核心客群叙事</td><td>Fragmented</td><td class="positive">One story spine</td><td>Message drift</td></tr>
|
|
350
|
-
<tr><td>Evidence asset depth</td><td>4 proof points</td><td class="positive">12 proof points</td><td>Source gaps</td></tr>
|
|
351
|
-
<tr><td>Channel test rhythm</td><td>Monthly</td><td>Biweekly</td><td class="warning">Ops load</td></tr>
|
|
352
|
-
<tr><td>Decision review</td><td>Ad hoc</td><td class="positive">90d gate</td><td>Metric noise</td></tr>
|
|
353
|
-
</tbody>
|
|
354
|
-
</table>
|
|
355
|
-
<p class="source-note">Source note: dense tables keep numeric columns right-aligned and notes inside the grid-safe footer.</p>
|
|
356
|
-
</section>
|
|
357
|
-
</main>
|
|
358
|
-
<div class="page-number">07</div>
|
|
359
|
-
</div>
|
|
360
|
-
</div>
|
|
361
|
-
</section>
|
|
362
|
-
|
|
363
|
-
<section class="slide" slide-qa="true" data-slide-index="8" data-preview-layout="roadmap">
|
|
364
|
-
<div class="slide-canvas">
|
|
365
|
-
<div class="page report grid-page">
|
|
366
|
-
<p class="preview-label">layout fixture / roadmap</p>
|
|
367
|
-
<header class="report-header">
|
|
368
|
-
<div class="report-title"><p class="eyebrow">Operating sequence</p><h2>路线图使用横向时间轴，阶段卡片交替但仍保持统一基线节奏</h2></div>
|
|
369
|
-
<img class="brand-watermark" src="assets/report-visual.jpg" alt="Lucent mark">
|
|
370
|
-
</header>
|
|
371
|
-
<main class="slide-grid">
|
|
372
|
-
<section class="roadmap" data-preview-component="roadmap-horizontal">
|
|
373
|
-
<article class="roadmap-item"><h3>Week 1-2</h3><p>Define ICP, audience, and success metrics.</p></article>
|
|
374
|
-
<article class="roadmap-item"><h3>Week 3-5</h3><p>Build proof assets and map unsupported claims.</p></article>
|
|
375
|
-
<article class="roadmap-item"><h3>Week 6-9</h3><p>Run channel tests with sourced messaging.</p></article>
|
|
376
|
-
<article class="roadmap-item"><h3>Week 10-12</h3><p>Review evidence, decide whether to scale.</p></article>
|
|
377
|
-
<span class="roadmap-connector roadmap-connector--1" aria-hidden="true"></span>
|
|
378
|
-
<span class="roadmap-connector roadmap-connector--2" aria-hidden="true"></span>
|
|
379
|
-
<span class="roadmap-connector roadmap-connector--3" aria-hidden="true"></span>
|
|
380
|
-
<span class="roadmap-connector roadmap-connector--4" aria-hidden="true"></span>
|
|
381
|
-
<span class="roadmap-dot roadmap-dot--1" aria-hidden="true"></span>
|
|
382
|
-
<span class="roadmap-dot roadmap-dot--2" aria-hidden="true"></span>
|
|
383
|
-
<span class="roadmap-dot roadmap-dot--3" aria-hidden="true"></span>
|
|
384
|
-
<span class="roadmap-dot roadmap-dot--4" aria-hidden="true"></span>
|
|
385
|
-
</section>
|
|
386
|
-
</main>
|
|
387
|
-
<div class="page-number">08</div>
|
|
388
|
-
</div>
|
|
389
|
-
</div>
|
|
390
|
-
</section>
|
|
391
|
-
|
|
392
|
-
<section class="slide" slide-qa="true" data-slide-index="9" data-preview-layout="recommendation">
|
|
393
|
-
<div class="slide-canvas">
|
|
394
|
-
<div class="page report grid-page">
|
|
395
|
-
<p class="preview-label">layout fixture / recommendation</p>
|
|
396
|
-
<header class="report-header">
|
|
397
|
-
<div class="report-title"><p class="eyebrow">Decision ask</p><h2>建议页把 recommendation、rationale、next steps 明确分栏</h2></div>
|
|
398
|
-
<img class="brand-watermark" src="assets/report-visual.jpg" alt="Lucent mark">
|
|
399
|
-
</header>
|
|
400
|
-
<main class="slide-grid">
|
|
401
|
-
<div class="recommendation-layout">
|
|
402
|
-
<section class="rec-panel primary"><p class="rec-label">Recommendation</p><h3>启动 90 天叙事与证据重建试点</h3><p>选择一个重点客群和两个渠道作为验证范围，避免一次性重构全部市场动作。</p><div class="stat-card" style="margin-top:auto;"><div class="stat-value">90</div><p>days to validate the first operating loop.</p></div></section>
|
|
403
|
-
<section class="rec-panel"><p class="rec-label">Rationale</p><h3>为什么先试点</h3><p>当前最大风险不是渠道不足，而是价值叙事和证据链无法支撑复杂购买决策。</p><p class="source-note" style="margin-top:auto;">Decision boundary: preview content only.</p></section>
|
|
404
|
-
<section class="rec-panel" data-preview-component="steps"><p class="rec-label">Next steps</p><h3>下一步动作</h3><ol class="steps"><li><span>1</span><p>确认试点客群和 guardrail metrics。</p></li><li><span>2</span><p>梳理 claim、evidence、gap 和 source notes。</p></li><li><span>3</span><p>启动双周复盘并准备 scale/no-scale decision。</p></li></ol></section>
|
|
405
|
-
</div>
|
|
406
|
-
</main>
|
|
407
|
-
<div class="page-number">09</div>
|
|
408
|
-
</div>
|
|
409
|
-
</div>
|
|
410
|
-
</section>
|
|
411
|
-
|
|
412
|
-
<section class="slide" slide-qa="false" data-slide-index="10" data-slide-role="closing" data-preview-layout="closing">
|
|
413
|
-
<div class="slide-canvas">
|
|
414
|
-
<div class="hero light" data-preview-component="hero">
|
|
415
|
-
<img class="hero-bg" src="assets/closing-background.jpg" alt="Lucent closing background">
|
|
416
|
-
<div class="hero-shade light"></div>
|
|
417
|
-
<div class="hero-content">
|
|
418
|
-
<div class="hero-title">
|
|
419
|
-
<h1>Design contract first. Visual polish follows.</h1>
|
|
420
|
-
<p>Lucent remains luminous, but the preview now proves layout, component, and evidence-reading behavior.</p>
|
|
421
|
-
</div>
|
|
422
|
-
</div>
|
|
423
|
-
<div class="page-number">10</div>
|
|
424
|
-
</div>
|
|
425
|
-
</div>
|
|
426
|
-
</section>
|
|
427
|
-
|
|
428
|
-
<script>
|
|
429
|
-
class SlidePresentation {
|
|
430
|
-
constructor() {
|
|
431
|
-
this.slides = document.querySelectorAll(".slide");
|
|
432
|
-
this.currentSlide = 0;
|
|
433
|
-
this.setupScaling();
|
|
434
|
-
this.setupKeyboardNav();
|
|
435
|
-
}
|
|
436
|
-
setupScaling() {
|
|
437
|
-
const canvases = document.querySelectorAll(".slide-canvas");
|
|
438
|
-
const update = () => {
|
|
439
|
-
const scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
|
|
440
|
-
canvases.forEach((canvas) => { canvas.style.transform = `scale(${scale})`; });
|
|
441
|
-
};
|
|
442
|
-
window.addEventListener("resize", update);
|
|
443
|
-
update();
|
|
444
|
-
}
|
|
445
|
-
setupKeyboardNav() {
|
|
446
|
-
document.addEventListener("keydown", (event) => {
|
|
447
|
-
if (["ArrowDown", "ArrowRight", " ", "PageDown"].includes(event.key)) {
|
|
448
|
-
event.preventDefault();
|
|
449
|
-
this.goTo(this.currentSlide + 1);
|
|
450
|
-
} else if (["ArrowUp", "ArrowLeft", "PageUp"].includes(event.key)) {
|
|
451
|
-
event.preventDefault();
|
|
452
|
-
this.goTo(this.currentSlide - 1);
|
|
453
|
-
}
|
|
454
|
-
});
|
|
455
|
-
}
|
|
456
|
-
goTo(index) {
|
|
457
|
-
const clamped = Math.max(0, Math.min(this.slides.length - 1, index));
|
|
458
|
-
this.slides[clamped].scrollIntoView({ behavior: "smooth" });
|
|
459
|
-
this.currentSlide = clamped;
|
|
460
|
-
}
|
|
461
|
-
}
|
|
462
|
-
|
|
463
|
-
function initCharts() {
|
|
464
|
-
if (!window.echarts) return;
|
|
465
|
-
const axis = "#7b8aa0";
|
|
466
|
-
const grid = "rgba(44,70,108,.12)";
|
|
467
|
-
const channelEl = document.getElementById("channelChart");
|
|
468
|
-
if (channelEl) {
|
|
469
|
-
const chart = echarts.init(channelEl);
|
|
470
|
-
chart.setOption({
|
|
471
|
-
color: ["#315eea", "#6e5df6", "#f06370"],
|
|
472
|
-
backgroundColor: "transparent",
|
|
473
|
-
tooltip: { trigger: "axis" },
|
|
474
|
-
legend: { bottom: 0, textStyle: { color: axis, fontSize: 16 } },
|
|
475
|
-
grid: { left: 54, right: 24, top: 34, bottom: 56, containLabel: true },
|
|
476
|
-
xAxis: { type: "category", data: ["Q1","Q2","Q3","Q4","Q5","Q6"], axisLine: { lineStyle: { color: "rgba(44,70,108,.24)" } }, axisLabel: { color: axis, fontSize: 15 } },
|
|
477
|
-
yAxis: { type: "value", axisLine: { show: false }, splitLine: { lineStyle: { color: grid } }, axisLabel: { color: axis, fontSize: 15 } },
|
|
478
|
-
series: [
|
|
479
|
-
{ name: "Core channel", type: "line", smooth: true, data: [100,108,116,119,121,124], lineStyle: { width: 5 }, symbolSize: 9 },
|
|
480
|
-
{ name: "New channel", type: "line", smooth: true, data: [100,96,102,112,130,148], lineStyle: { width: 5 }, symbolSize: 9 },
|
|
481
|
-
{ name: "CAC pressure", type: "bar", data: [100,112,126,139,144,151], barWidth: 34 }
|
|
482
|
-
]
|
|
483
|
-
});
|
|
484
|
-
}
|
|
485
|
-
const sankeyEl = document.getElementById("sankeyChart");
|
|
486
|
-
if (sankeyEl) {
|
|
487
|
-
const chart = echarts.init(sankeyEl);
|
|
488
|
-
chart.setOption({
|
|
489
|
-
color: ["#315eea", "#6e5df6", "#18a8d8", "#f06370"],
|
|
490
|
-
backgroundColor: "transparent",
|
|
491
|
-
tooltip: { trigger: "item" },
|
|
492
|
-
series: [{
|
|
493
|
-
type: "sankey",
|
|
494
|
-
left: 18,
|
|
495
|
-
right: 28,
|
|
496
|
-
top: 24,
|
|
497
|
-
bottom: 24,
|
|
498
|
-
nodeGap: 18,
|
|
499
|
-
nodeWidth: 18,
|
|
500
|
-
lineStyle: { color: "gradient", curveness: .42, opacity: .28 },
|
|
501
|
-
label: { color: "#42526a", fontSize: 15 },
|
|
502
|
-
data: [
|
|
503
|
-
{ name: "Awareness" }, { name: "Problem fit" }, { name: "Proof review" }, { name: "Security" }, { name: "Decision" }
|
|
504
|
-
],
|
|
505
|
-
links: [
|
|
506
|
-
{ source: "Awareness", target: "Problem fit", value: 64 },
|
|
507
|
-
{ source: "Problem fit", target: "Proof review", value: 42 },
|
|
508
|
-
{ source: "Proof review", target: "Security", value: 24 },
|
|
509
|
-
{ source: "Proof review", target: "Decision", value: 18 },
|
|
510
|
-
{ source: "Security", target: "Decision", value: 15 }
|
|
511
|
-
]
|
|
512
|
-
}]
|
|
513
|
-
});
|
|
514
|
-
}
|
|
515
|
-
window.addEventListener("resize", () => {
|
|
516
|
-
document.querySelectorAll(".echart-container").forEach((el) => {
|
|
517
|
-
const instance = echarts.getInstanceByDom(el);
|
|
518
|
-
if (instance) instance.resize();
|
|
519
|
-
});
|
|
520
|
-
});
|
|
521
|
-
}
|
|
522
|
-
|
|
523
|
-
window.addEventListener("DOMContentLoaded", () => {
|
|
524
|
-
new SlidePresentation();
|
|
525
|
-
initCharts();
|
|
526
|
-
});
|
|
527
|
-
</script>
|
|
528
|
-
</body>
|
|
529
|
-
</html>
|