@cyber-dash-tech/revela 0.18.15 → 0.18.16
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 +28 -39
- package/README.zh-CN.md +28 -39
- package/designs/lucent/DESIGN.md +32 -1
- package/designs/lucent/preview.html +411 -494
- package/designs/monet/DESIGN.md +39 -9
- package/designs/monet/preview.html +157 -2260
- package/designs/starter/DESIGN.md +8 -5
- package/designs/starter/preview.html +70 -49
- package/designs/summit/DESIGN.md +36 -9
- package/designs/summit/preview.html +139 -2237
- package/lib/commands/designs-new.ts +9 -0
- package/lib/design/designs.ts +84 -4
- package/lib/prompt-builder.ts +4 -0
- package/lib/qa/artifact.ts +52 -7
- package/lib/qa/checks.ts +1 -1
- package/lib/qa/component-contracts.ts +90 -0
- package/package.json +1 -1
- package/plugins/revela/.codex-plugin/plugin.json +4 -4
- package/plugins/revela/hooks/revela_post_write_notice.ts +39 -9
- package/plugins/revela/mcp/revela-server.ts +2 -2
- package/plugins/revela/skills/revela/SKILL.md +3 -3
- package/plugins/revela/skills/revela-design/SKILL.md +6 -0
- package/plugins/revela/skills/revela-helper/SKILL.md +3 -3
- package/plugins/revela/skills/revela-make-deck/SKILL.md +9 -3
- package/plugins/revela/skills/revela-research/SKILL.md +1 -0
- package/skill/SKILL.md +11 -2
- package/plugins/revela/skills/revela-review/SKILL.md +0 -46
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Lucent Design System — Preview</title>
|
|
6
|
+
<title>Lucent Design System — Contract Preview</title>
|
|
7
7
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
|
|
8
8
|
<style>
|
|
9
9
|
:root {
|
|
@@ -24,485 +24,400 @@
|
|
|
24
24
|
--accent-coral: #f06370;
|
|
25
25
|
--accent-soft: #dbe8ff;
|
|
26
26
|
--shadow-soft: rgba(30, 65, 130, 0.13);
|
|
27
|
-
--font-display: DengXian,
|
|
28
|
-
--font-body: DengXian,
|
|
29
|
-
--
|
|
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;
|
|
30
49
|
}
|
|
50
|
+
|
|
31
51
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
32
52
|
html { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; }
|
|
33
|
-
body { height: 100%; background: var(--bg-frame); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
|
|
53
|
+
body { min-height: 100%; background: var(--bg-frame); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
|
|
34
54
|
.slide { min-height: 100dvh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-frame); }
|
|
35
55
|
.slide-canvas { width: 1920px; height: 1080px; flex-shrink: 0; transform-origin: center center; position: relative; overflow: hidden; padding: 0; }
|
|
36
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); }
|
|
37
|
-
.report
|
|
38
|
-
.
|
|
39
|
-
.
|
|
40
|
-
.
|
|
41
|
-
.
|
|
42
|
-
.
|
|
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); }
|
|
43
64
|
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-primary); letter-spacing: 0; }
|
|
44
|
-
h1 { font-size:
|
|
45
|
-
h2 { font-size:
|
|
46
|
-
h3 { font-size:
|
|
47
|
-
h4 { font-size:
|
|
48
|
-
p, li { font-size:
|
|
49
|
-
.eyebrow, .meta, .caption { font-size:
|
|
50
|
-
.source-note { font-family:
|
|
51
|
-
.
|
|
52
|
-
.
|
|
53
|
-
.
|
|
54
|
-
.
|
|
55
|
-
.hero-content { position: relative; z-index: 2; height: 100%; padding: 74px 86px 76px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
|
|
56
|
-
.hero-logo { align-self: flex-start; width: auto; max-width: 380px; height: 52px; object-fit: contain; }
|
|
57
|
-
.hero-title { max-width: 970px; }
|
|
58
|
-
.hero-title h1 { color: #fff; max-width: 900px; line-height: 1.08; }
|
|
59
|
-
.hero-title p { margin-top: 28px; max-width: 620px; color: rgba(255,255,255,.78); font-size: 22px; line-height: 1.5; }
|
|
60
|
-
.slide[data-slide-index="1"] .hero-content { justify-content: flex-end; padding: 0 86px 132px; }
|
|
61
|
-
.slide[data-slide-index="1"] .hero-title { max-width: 1040px; }
|
|
62
|
-
.slide[data-slide-index="1"] .hero-title h1 { max-width: 960px; }
|
|
63
|
-
.slide[data-slide-index="1"] .hero-title p { max-width: 700px; }
|
|
64
|
-
.hero-meta { display: flex; gap: 28px; color: rgba(255,255,255,.72); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
|
|
65
|
-
.report-header { position: relative; height: 164px; border-bottom: 1px solid var(--line); }
|
|
66
|
-
.chapter-label { font-size: 26px; letter-spacing: .11em; text-transform: uppercase; color: var(--accent-primary); font-weight: 700; }
|
|
67
|
-
.report-title { margin-top: 32px; max-width: 1776px; }
|
|
68
|
-
.report-title h2 { font-size: 43px; line-height: 1.18; }
|
|
69
|
-
.pnp-logo { position: absolute; top: 0; right: 0; width: auto; height: 32px; object-fit: contain; }
|
|
70
|
-
.content { position: absolute; left: 72px; right: 72px; top: 256px; height: 740px; }
|
|
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; }
|
|
71
76
|
.page-number { position: absolute; right: 34px; bottom: 26px; z-index: 10; font-size: 12px; letter-spacing: .14em; color: var(--text-muted); }
|
|
72
77
|
.page-number.light { color: rgba(255,255,255,.72); }
|
|
73
|
-
.
|
|
74
|
-
|
|
75
|
-
.
|
|
76
|
-
.
|
|
77
|
-
.
|
|
78
|
-
.
|
|
79
|
-
.
|
|
80
|
-
.
|
|
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; }
|
|
81
100
|
.toc-list strong { font-size: 34px; color: var(--text-primary); font-weight: 700; }
|
|
82
|
-
.toc-list
|
|
83
|
-
.toc-
|
|
84
|
-
|
|
85
|
-
.
|
|
86
|
-
.
|
|
87
|
-
.
|
|
88
|
-
.
|
|
89
|
-
.
|
|
90
|
-
.
|
|
91
|
-
.
|
|
92
|
-
.
|
|
93
|
-
.
|
|
94
|
-
.
|
|
95
|
-
.
|
|
96
|
-
|
|
97
|
-
.
|
|
98
|
-
.
|
|
99
|
-
.
|
|
100
|
-
.
|
|
101
|
-
.
|
|
102
|
-
|
|
103
|
-
.
|
|
104
|
-
.insight-card
|
|
105
|
-
.card
|
|
106
|
-
.insight-card {
|
|
107
|
-
.
|
|
108
|
-
.
|
|
109
|
-
.
|
|
110
|
-
|
|
111
|
-
.
|
|
112
|
-
.
|
|
113
|
-
.
|
|
114
|
-
.
|
|
115
|
-
.
|
|
116
|
-
.mini-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
|
|
117
|
-
.mini-chip { border: 1px solid rgba(49,94,234,.20); background: rgba(255,255,255,.62); border-radius: 999px; padding: 8px 12px; color: var(--text-primary); font-size: 15px; font-weight: 700; text-align: center; }
|
|
118
|
-
.card-num { font-size: 54px; line-height: 1; color: var(--accent-secondary); font-weight: 700; }
|
|
119
|
-
.card-tag { margin-top: 30px; color: var(--accent-primary); font-size: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
|
|
120
|
-
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: auto; position: relative; z-index: 1; }
|
|
121
|
-
.stat-card { padding: 18px 18px; background: rgba(255,255,255,.78); border: 1px solid var(--line); border-radius: 8px; }
|
|
122
|
-
.stat-value { font-size: 42px; line-height: .95; font-weight: 700; color: var(--accent-primary); font-variant-numeric: tabular-nums; }
|
|
123
|
-
.stat-card p { margin-top: 8px; font-size: 15px; }
|
|
124
|
-
.slide[data-slide-index="4"] .insight-card > div:first-child > p:not(.card-tag) { font-size: 24px; line-height: 1.38; }
|
|
125
|
-
.slide[data-slide-index="4"] .mini-chip { font-size: 19px; line-height: 1.15; padding: 10px 14px; }
|
|
126
|
-
.slide[data-slide-index="4"] .stat-card p { font-size: 20px; line-height: 1.34; }
|
|
127
|
-
.slide[data-slide-index="6"] .insight-card { padding: 34px 36px; gap: 28px; }
|
|
128
|
-
.slide[data-slide-index="6"] .card-num { font-size: 72px; }
|
|
129
|
-
.slide[data-slide-index="6"] .card-tag { margin-top: 34px; font-size: 22px; line-height: 1.2; letter-spacing: .10em; }
|
|
130
|
-
.slide[data-slide-index="6"] .insight-card h3 { font-size: 36px; line-height: 1.15; margin-bottom: 18px; }
|
|
131
|
-
.slide[data-slide-index="6"] .insight-card p:not(.card-tag) { font-size: 27px; line-height: 1.34; }
|
|
132
|
-
.slide[data-slide-index="6"] .mini-mosaic { gap: 16px; margin-top: 34px; }
|
|
133
|
-
.slide[data-slide-index="6"] .mini-chip { font-size: 24px; line-height: 1.15; padding: 16px 18px; }
|
|
134
|
-
.slide[data-slide-index="6"] .stat-value { font-size: 62px; }
|
|
135
|
-
.slide[data-slide-index="6"] .stat-card { padding: 24px 26px; }
|
|
136
|
-
.slide[data-slide-index="6"] .stat-card p { font-size: 24px; line-height: 1.28; }
|
|
137
|
-
.chart-layout { display: grid; grid-template-columns: 1fr 420px; gap: 36px; height: 100%; }
|
|
138
|
-
.sankey-layout { display: grid; grid-template-columns: 1fr 470px; gap: 34px; height: 746px; }
|
|
139
|
-
.echart-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 28px 32px; display: flex; flex-direction: column; min-height: 0; }
|
|
140
|
-
.chart-header { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
|
|
141
|
-
.chart-header p { margin-top: 4px; font-size: 18px; color: var(--text-muted); }
|
|
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); }
|
|
142
135
|
.echart-container { flex: 1; min-height: 0; }
|
|
143
|
-
.takeaway-col { display: flex; flex-direction: column; gap:
|
|
144
|
-
.takeaway { border-left: 4px solid var(--accent-primary);
|
|
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); }
|
|
145
138
|
.takeaway.coral { border-left-color: var(--accent-coral); }
|
|
146
|
-
.takeaway
|
|
147
|
-
|
|
148
|
-
table {
|
|
149
|
-
|
|
150
|
-
|
|
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); }
|
|
151
145
|
th:not(:first-child), td:not(:first-child) { text-align: right; }
|
|
152
146
|
.positive { color: var(--accent-primary); font-weight: 700; }
|
|
153
147
|
.warning { color: var(--accent-coral); font-weight: 700; }
|
|
154
|
-
|
|
155
|
-
.roadmap
|
|
156
|
-
.roadmap
|
|
157
|
-
.roadmap-item { position: absolute; width:
|
|
158
|
-
.roadmap-item:nth-child(1) { left: 84px; top:
|
|
159
|
-
.roadmap-item:nth-child(2) { left: 492px; top:
|
|
160
|
-
.roadmap-item:nth-child(3) { left: 900px; top:
|
|
161
|
-
.roadmap-item:nth-child(4) { right: 84px; top:
|
|
162
|
-
.roadmap-
|
|
163
|
-
.roadmap-
|
|
164
|
-
.roadmap-
|
|
165
|
-
.roadmap-
|
|
166
|
-
.roadmap-
|
|
167
|
-
.roadmap-
|
|
168
|
-
.
|
|
169
|
-
.
|
|
170
|
-
.
|
|
171
|
-
.
|
|
172
|
-
.
|
|
173
|
-
|
|
174
|
-
.
|
|
175
|
-
.
|
|
176
|
-
.
|
|
177
|
-
.
|
|
178
|
-
.
|
|
179
|
-
.
|
|
180
|
-
.
|
|
181
|
-
.
|
|
182
|
-
.layer-node.right { left: 430px; }
|
|
183
|
-
.layer-node:nth-child(1) { top: 64px; }
|
|
184
|
-
.layer-node:nth-child(2) { top: 190px; }
|
|
185
|
-
.layer-node:nth-child(3) { top: 320px; }
|
|
186
|
-
.layer-node:nth-child(4) { top: 450px; }
|
|
187
|
-
.layer-node:nth-child(5) { top: 580px; }
|
|
188
|
-
.layer-node::after { content: ''; position: absolute; top: 28px; width: 78px; height: 2px; background: rgba(49,94,234,.20); }
|
|
189
|
-
.layer-node.left::after { right: -88px; }
|
|
190
|
-
.layer-node.right::after { left: -88px; }
|
|
191
|
-
.layer-dot { position: absolute; top: 20px; width: 16px; height: 16px; border-radius: 999px; background: var(--layer-color, var(--accent-primary)); box-shadow: 0 0 0 7px rgba(49,94,234,.10); }
|
|
192
|
-
.layer-node.left .layer-dot { right: -116px; }
|
|
193
|
-
.layer-node.right .layer-dot { left: -116px; }
|
|
194
|
-
.layer-node .meta { color: var(--layer-color, var(--accent-primary)); font-weight: 700; }
|
|
195
|
-
.layer-node h3 { margin-top: 4px; font-size: 30px; line-height: 1.08; }
|
|
196
|
-
.layer-node p { margin-top: 12px; font-size: 17px; line-height: 1.35; }
|
|
197
|
-
.layer-table { position: relative; z-index: 1; padding: 30px 34px; border-radius: 12px; background: rgba(255,255,255,.76); border: 1px solid rgba(49,94,234,.16); box-shadow: 0 22px 62px rgba(30,65,130,.10); }
|
|
198
|
-
.layer-table h3 { font-size: 36px; margin-bottom: 18px; }
|
|
199
|
-
.layer-table p { font-size: 20px; line-height: 1.48; margin-bottom: 26px; }
|
|
200
|
-
.layer-table table { font-size: 20px; }
|
|
201
|
-
.layer-table th { font-size: 14px; padding-bottom: 12px; }
|
|
202
|
-
.layer-table td { padding: 14px 14px 14px 0; }
|
|
203
|
-
.layer-full { position: absolute; inset: 0; display: grid; grid-template-columns: 46% 54%; height: 100%; }
|
|
204
|
-
.layer-brand { position: absolute; left: 42px; top: 42px; width: auto; height: 32px; object-fit: contain; z-index: 4; }
|
|
205
|
-
.layer-full .layer-map { border-radius: 0; border: 0; border-right: 1px solid rgba(49,94,234,.14); box-shadow: none; background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(231,240,251,.78)); }
|
|
206
|
-
.layer-full .layer-map::before { left: 50%; top: 142px; bottom: 42px; width: 7px; transform: translateX(-50%); }
|
|
207
|
-
.layer-full .layer-node { width: 330px; }
|
|
208
|
-
.layer-full .layer-node.left { left: 54px; }
|
|
209
|
-
.layer-full .layer-node.right { left: calc(50% + 88px); }
|
|
210
|
-
.layer-full .layer-node:nth-of-type(1) { top: 205px; }
|
|
211
|
-
.layer-full .layer-node:nth-of-type(2) { top: 390px; }
|
|
212
|
-
.layer-full .layer-node:nth-of-type(3) { top: 575px; }
|
|
213
|
-
.layer-full .layer-node:nth-of-type(4) { top: 760px; }
|
|
214
|
-
.layer-full .layer-node::after { top: 27px; }
|
|
215
|
-
.layer-full .layer-node.left::after { left: 100%; width: 112px; transform: translateX(0); }
|
|
216
|
-
.layer-full .layer-node.right::after { right: 100%; width: 88px; transform: translateX(0); }
|
|
217
|
-
.layer-full .layer-node.left .layer-dot { right: auto; left: 374px; top: 14px; width: 28px; height: 28px; z-index: 3; }
|
|
218
|
-
.layer-full .layer-node.right .layer-dot { left: -102px; top: 14px; width: 28px; height: 28px; z-index: 3; }
|
|
219
|
-
.layer-full .layer-node h3 { font-size: 34px; }
|
|
220
|
-
.layer-full .layer-node p:not(.meta) { font-size: 19px; }
|
|
221
|
-
.layer-right { position: relative; padding: 78px 92px 72px 74px; background: rgba(255,255,255,.74); }
|
|
222
|
-
.layer-right .chapter-label { font-size: 26px; letter-spacing: .11em; text-transform: uppercase; color: var(--accent-primary); font-weight: 700; }
|
|
223
|
-
.layer-right h2 { margin-top: 32px; font-size: 43px; line-height: 1.18; max-width: 840px; }
|
|
224
|
-
.layer-right-copy { margin-top: 30px; max-width: 820px; font-size: 22px; line-height: 1.55; }
|
|
225
|
-
.layer-right .layer-table { margin-top: 54px; box-shadow: none; background: transparent; border: 0; border-radius: 0; padding: 0; }
|
|
226
|
-
.layer-right .layer-table table { font-size: 23px; }
|
|
227
|
-
.layer-right .layer-table th { font-size: 17px; }
|
|
228
|
-
.layer-right .layer-table td { padding: 18px 16px 18px 0; }
|
|
229
|
-
.content.narrative-page { position: absolute; top: 214px; height: 812px; z-index: 1; display: grid; grid-template-rows: 112px 1fr; gap: 18px; }
|
|
230
|
-
.narrative-page { z-index: 1; }
|
|
231
|
-
.narrative-intro { display: flex; align-items: center; padding: 0 28px; border-radius: 12px; background: rgba(255,255,255,.80); border: 1px solid rgba(49,94,234,.16); box-shadow: 0 18px 42px rgba(30,65,130,.09); }
|
|
232
|
-
.narrative-intro p { font-size: 27px; line-height: 1.36; max-width: 1520px; }
|
|
233
|
-
.module-board { display: grid; grid-template-columns: 410px 1fr; gap: 24px; min-height: 0; }
|
|
234
|
-
.setup-stack { display: flex; flex-direction: column; gap: 12px; }
|
|
235
|
-
.setup-card { padding: 16px 18px; border-radius: 10px; border: 1px solid rgba(49,94,234,.14); background: rgba(255,255,255,.72); }
|
|
236
|
-
.setup-card h4 { color: var(--accent-primary); font-size: 20px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
|
|
237
|
-
.setup-card p { font-size: 23px; line-height: 1.34; }
|
|
238
|
-
.process-panel { padding: 18px 20px; border-radius: 12px; border: 1px solid rgba(49,94,234,.16); background: linear-gradient(145deg, rgba(255,255,255,.80), rgba(231,240,251,.68)); }
|
|
239
|
-
.process-panel h3 { font-size: 38px; margin-bottom: 14px; }
|
|
240
|
-
.process-panel > p { margin: -2px 0 18px; max-width: 1140px; font-size: 25px; line-height: 1.36; color: var(--text-secondary); }
|
|
241
|
-
.process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
|
|
242
|
-
.process-card { min-height: 276px; padding: 20px 18px; border: 1px solid rgba(49,94,234,.15); background: rgba(255,255,255,.62); border-radius: 8px; }
|
|
243
|
-
.process-card:nth-child(2) { background: rgba(219,232,255,.58); }
|
|
244
|
-
.process-card:nth-child(4) { background: rgba(255,231,235,.62); border-color: rgba(240,99,112,.20); }
|
|
245
|
-
.process-card .meta { color: var(--step-color, var(--accent-primary)); font-size: 19px; font-weight: 700; }
|
|
246
|
-
.process-card h4 { font-size: 25px; margin: 12px 0 10px; line-height: 1.12; }
|
|
247
|
-
.process-card p { font-size: 21px; line-height: 1.34; }
|
|
248
|
-
.takeaway-band { margin-top: 14px; padding: 15px 18px; border-radius: 8px; background: rgba(255,255,255,.75); border: 1px solid rgba(49,94,234,.14); font-size: 23px; color: var(--text-primary); }
|
|
249
|
-
.rec-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; }
|
|
250
|
-
.rec-panel.primary { background: linear-gradient(135deg, #edf4ff 0%, #ffffff 70%); border-color: rgba(49,94,234,.28); }
|
|
251
|
-
.rec-label { font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-primary); font-weight: 700; }
|
|
252
|
-
.steps { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
|
|
253
|
-
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
|
|
254
|
-
.steps span { width: 34px; height: 34px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; }
|
|
255
|
-
.soft-texture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; pointer-events: none; }
|
|
256
|
-
.closing h1 { color: #fff; font-size: 90px; line-height: 1.08; }
|
|
257
|
-
.closing p { color: rgba(255,255,255,.78); font-size: 22px; margin-top: 22px; }
|
|
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; }
|
|
258
176
|
</style>
|
|
259
177
|
</head>
|
|
260
178
|
<body>
|
|
261
|
-
<section class="slide" slide-qa="false" data-slide-index="1" data-slide-role="cover">
|
|
179
|
+
<section class="slide" slide-qa="false" data-slide-index="1" data-slide-role="cover" data-preview-layout="cover">
|
|
262
180
|
<div class="slide-canvas">
|
|
263
|
-
<div class="
|
|
264
|
-
<
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
<p style="width: 638px; max-width: 638px">一套用于客户诊断、策略建议、项目交付和商业分析的可复用报告模板。</p>
|
|
272
|
-
</div>
|
|
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>
|
|
273
189
|
</div>
|
|
274
|
-
<div class="page-number light" data-preview-component="page-number">01</div>
|
|
275
190
|
</div>
|
|
191
|
+
<div class="page-number light" data-preview-component="page-number">01</div>
|
|
276
192
|
</div>
|
|
277
193
|
</div>
|
|
278
194
|
</section>
|
|
279
195
|
|
|
280
|
-
<section class="slide" slide-qa="false" data-slide-index="2">
|
|
196
|
+
<section class="slide" slide-qa="false" data-slide-index="2" data-preview-layout="toc">
|
|
281
197
|
<div class="slide-canvas">
|
|
282
|
-
<
|
|
283
|
-
|
|
284
|
-
<
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
<
|
|
288
|
-
<p class="source-note">Template preview only. Replace chapter names with client report structure.</p>
|
|
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>
|
|
289
204
|
</div>
|
|
290
|
-
<
|
|
291
|
-
<li><span>01</span><strong>Executive Summary<em>关键结论与管理层摘要</em></strong></li>
|
|
292
|
-
<li><span>02</span><strong>Diagnosis<em>现状、问题与机会判断</em></strong></li>
|
|
293
|
-
<li><span>03</span><strong>Evidence & Options<em>数据、方案与优先级</em></strong></li>
|
|
294
|
-
<li><span>04</span><strong>Roadmap<em>实施路径与下一步行动</em></strong></li>
|
|
295
|
-
</ol>
|
|
205
|
+
<p>TOC uses a two-zone rail: title and numbered agenda stay aligned to the same report rhythm.</p>
|
|
296
206
|
</div>
|
|
297
|
-
<
|
|
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="">
|
|
298
213
|
</div>
|
|
214
|
+
<div class="page-number">02</div>
|
|
299
215
|
</div>
|
|
300
216
|
</section>
|
|
301
217
|
|
|
302
|
-
<section class="slide" slide-qa="true" data-slide-index="3">
|
|
218
|
+
<section class="slide" slide-qa="true" data-slide-index="3" data-preview-layout="report-story">
|
|
303
219
|
<div class="slide-canvas">
|
|
304
|
-
<div class="page report-page">
|
|
305
|
-
<
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
<
|
|
314
|
-
<
|
|
315
|
-
<
|
|
316
|
-
<
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
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>
|
|
321
242
|
</div>
|
|
322
|
-
</
|
|
243
|
+
</main>
|
|
323
244
|
<div class="page-number">03</div>
|
|
324
245
|
</div>
|
|
325
246
|
</div>
|
|
326
247
|
</section>
|
|
327
248
|
|
|
328
|
-
<section class="slide" slide-qa="
|
|
249
|
+
<section class="slide" slide-qa="true" data-slide-index="4" data-preview-layout="card-grid">
|
|
329
250
|
<div class="slide-canvas">
|
|
330
|
-
<div class="page">
|
|
331
|
-
<
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
</
|
|
353
|
-
|
|
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>
|
|
354
277
|
</div>
|
|
355
|
-
</
|
|
278
|
+
</main>
|
|
356
279
|
<div class="page-number">04</div>
|
|
357
280
|
</div>
|
|
358
281
|
</div>
|
|
359
282
|
</section>
|
|
360
283
|
|
|
361
|
-
<section class="slide" slide-qa="
|
|
284
|
+
<section class="slide" slide-qa="true" data-slide-index="5" data-preview-layout="chart-with-takeaways">
|
|
362
285
|
<div class="slide-canvas">
|
|
363
|
-
<div class="page report-page">
|
|
364
|
-
<
|
|
365
|
-
|
|
366
|
-
<div class="report-title"><h2
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
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>
|
|
371
303
|
</div>
|
|
372
|
-
|
|
373
|
-
<div class="setup-stack">
|
|
374
|
-
<div class="setup-card"><h4>Story setup</h4><p>一个高优先级机会出现，但组织同时面对时间、质量和资源约束。</p></div>
|
|
375
|
-
<div class="setup-card"><h4>Operational conflict</h4><p>理想路径被占用，关键材料延迟，改序可能带来额外风险。</p></div>
|
|
376
|
-
<div class="setup-card"><h4>Management trade-off</h4><p>机会是否值得重排资源，需要被快速解释和批准。</p></div>
|
|
377
|
-
</div>
|
|
378
|
-
<div class="process-panel">
|
|
379
|
-
<h3>How the Response Works</h3>
|
|
380
|
-
<p>中间流程先交代响应逻辑：从信号进入系统，到形成选项、派发动作，再把执行结果沉淀为下一轮规则。</p>
|
|
381
|
-
<div class="process-grid">
|
|
382
|
-
<div class="process-card" style="--step-color:#315eea;"><p class="meta">1 / Sense</p><h4>Signals captured</h4><p>订单、库存、交付和约束被看见。</p></div>
|
|
383
|
-
<div class="process-card" style="--step-color:#18a8d8;"><p class="meta">2 / Context</p><h4>Context built</h4><p>把信号连接到客户、产品和资源。</p></div>
|
|
384
|
-
<div class="process-card" style="--step-color:#18a8d8;"><p class="meta">3 / Decide</p><h4>Options simulated</h4><p>比较收益、风险和执行成本。</p></div>
|
|
385
|
-
<div class="process-card" style="--step-color:#f06370;"><p class="meta">4 / Act</p><h4>Work routed</h4><p>触发责任人、系统任务和审批。</p></div>
|
|
386
|
-
<div class="process-card" style="--step-color:#6e5df6;"><p class="meta">5 / Learn</p><h4>Loop improves</h4><p>反馈进入下一轮规则和模型。</p></div>
|
|
387
|
-
</div>
|
|
388
|
-
<div class="takeaway-band"><strong>Simple takeaway:</strong> 人判断例外，系统协调响应，组织从结果中学习。</div>
|
|
389
|
-
</div>
|
|
390
|
-
</div>
|
|
391
|
-
</div>
|
|
304
|
+
</main>
|
|
392
305
|
<div class="page-number">05</div>
|
|
393
306
|
</div>
|
|
394
307
|
</div>
|
|
395
308
|
</section>
|
|
396
309
|
|
|
397
|
-
<section class="slide" slide-qa="
|
|
310
|
+
<section class="slide" slide-qa="true" data-slide-index="6" data-preview-layout="sankey">
|
|
398
311
|
<div class="slide-canvas">
|
|
399
|
-
<div class="page report-page">
|
|
400
|
-
<
|
|
401
|
-
|
|
402
|
-
<div class="report-title"><h2
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
<div class="
|
|
407
|
-
|
|
408
|
-
|
|
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>
|
|
409
330
|
<div class="page-number">06</div>
|
|
410
331
|
</div>
|
|
411
332
|
</div>
|
|
412
333
|
</section>
|
|
413
334
|
|
|
414
|
-
<section class="slide" slide-qa="true" data-slide-index="7">
|
|
335
|
+
<section class="slide" slide-qa="true" data-slide-index="7" data-preview-layout="table">
|
|
415
336
|
<div class="slide-canvas">
|
|
416
|
-
<div class="page report-page">
|
|
417
|
-
<
|
|
418
|
-
|
|
419
|
-
<div class="report-title"><h2
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
<
|
|
425
|
-
<
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
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>
|
|
433
358
|
<div class="page-number">07</div>
|
|
434
359
|
</div>
|
|
435
360
|
</div>
|
|
436
361
|
</section>
|
|
437
362
|
|
|
438
|
-
<section class="slide" slide-qa="true" data-slide-index="8">
|
|
363
|
+
<section class="slide" slide-qa="true" data-slide-index="8" data-preview-layout="roadmap">
|
|
439
364
|
<div class="slide-canvas">
|
|
440
|
-
<div class="page report-page">
|
|
441
|
-
<
|
|
442
|
-
<
|
|
443
|
-
<
|
|
444
|
-
<
|
|
445
|
-
</
|
|
446
|
-
<
|
|
447
|
-
<
|
|
448
|
-
<
|
|
449
|
-
<
|
|
450
|
-
<
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
<
|
|
454
|
-
<
|
|
455
|
-
<
|
|
456
|
-
|
|
457
|
-
|
|
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>
|
|
458
387
|
<div class="page-number">08</div>
|
|
459
388
|
</div>
|
|
460
389
|
</div>
|
|
461
390
|
</section>
|
|
462
391
|
|
|
463
|
-
<section class="slide" slide-qa="true" data-slide-index="9">
|
|
392
|
+
<section class="slide" slide-qa="true" data-slide-index="9" data-preview-layout="recommendation">
|
|
464
393
|
<div class="slide-canvas">
|
|
465
|
-
<div class="page report-page">
|
|
466
|
-
<
|
|
467
|
-
|
|
468
|
-
<div class="report-title"><h2
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
<tr><td>Channel efficiency</td><td>Stable</td><td>Improving</td><td>Medium</td><td>P2</td></tr>
|
|
477
|
-
<tr><td>Sales evidence assets</td><td>Low</td><td>High</td><td class="warning">Large</td><td class="positive">P1</td></tr>
|
|
478
|
-
<tr><td>Operating feedback loop</td><td>Slow</td><td>Bi-weekly</td><td>Medium</td><td>P2</td></tr>
|
|
479
|
-
<tr><td>Executive reporting cadence</td><td>Ad hoc</td><td>Monthly</td><td>Small</td><td>P3</td></tr>
|
|
480
|
-
</tbody>
|
|
481
|
-
</table>
|
|
482
|
-
<div style="margin-top:auto; display:grid; grid-template-columns: 1fr 1fr; gap:28px; padding-top:30px;">
|
|
483
|
-
<div class="box"><h4>读取方式</h4><p>表格不是堆数据，而是把每一项转成可以管理的差距和优先级。</p></div>
|
|
484
|
-
<p class="source-note">Note: This table uses illustrative values for template demonstration. Replace rows, metric definitions, and source notes in real reports.</p>
|
|
485
|
-
</div>
|
|
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>
|
|
486
405
|
</div>
|
|
487
|
-
</
|
|
406
|
+
</main>
|
|
488
407
|
<div class="page-number">09</div>
|
|
489
408
|
</div>
|
|
490
409
|
</div>
|
|
491
410
|
</section>
|
|
492
411
|
|
|
493
|
-
<section class="slide" slide-qa="
|
|
412
|
+
<section class="slide" slide-qa="false" data-slide-index="10" data-slide-role="closing" data-preview-layout="closing">
|
|
494
413
|
<div class="slide-canvas">
|
|
495
|
-
<div class="
|
|
496
|
-
<
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
<div class="roadmap-item"><div class="roadmap-dot"></div><p class="meta">Phase 01 / Weeks 1-2</p><h3>统一诊断口径</h3><p>整理客户目标、业务约束、核心假设和现有证据，形成问题地图。</p></div>
|
|
503
|
-
<div class="roadmap-item"><div class="roadmap-dot"></div><p class="meta">Phase 02 / Weeks 3-5</p><h3>重建价值叙事</h3><p>拆解角色、场景和购买理由，定义统一但可分发的内容模块。</p></div>
|
|
504
|
-
<div class="roadmap-item"><div class="roadmap-dot"></div><p class="meta">Phase 03 / Weeks 6-9</p><h3>渠道试点验证</h3><p>选择两个重点渠道，测试新叙事、新证据和转化动作的组合效果。</p></div>
|
|
505
|
-
<div class="roadmap-item"><div class="roadmap-dot"></div><p class="meta">Phase 04 / Weeks 10-12</p><h3>复盘与扩展</h3><p>把验证结果转成组织节奏、指标看板和下一轮资源配置建议。</p></div>
|
|
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>
|
|
506
421
|
</div>
|
|
507
422
|
</div>
|
|
508
423
|
<div class="page-number">10</div>
|
|
@@ -510,103 +425,105 @@
|
|
|
510
425
|
</div>
|
|
511
426
|
</section>
|
|
512
427
|
|
|
513
|
-
<section class="slide" slide-qa="true" data-slide-index="11">
|
|
514
|
-
<div class="slide-canvas">
|
|
515
|
-
<div class="page report-page">
|
|
516
|
-
<img class="soft-texture" src="assets/soft-texture.jpg" alt="subtle report texture">
|
|
517
|
-
<div class="report-header">
|
|
518
|
-
<p class="chapter-label">04 / Recommendation</p>
|
|
519
|
-
<div class="report-title"><h2>建议页把结论、理由和下一步动作放在同一张页面上</h2></div>
|
|
520
|
-
</div>
|
|
521
|
-
<div class="content recommendation-layout">
|
|
522
|
-
<div class="rec-panel primary reveal" data-preview-component="box"><div><p class="rec-label">Recommendation</p><h3>先做 90 天叙事与证据重建试点</h3><p>以一个重点客群和两个重点渠道作为验证范围，避免一次性重构所有市场动作。</p></div><div class="stat-card"><div class="stat-value">90</div><p>days to validate first operating loop</p></div></div>
|
|
523
|
-
<div class="rec-panel reveal"><div><p class="rec-label">Rationale</p><h3>投入前先降低策略不确定性</h3><p>当前最大风险不是单个渠道选择，而是购买理由和证据资产不匹配。</p></div><ul class="bullet-list"><li>减少无效投放。</li><li>提升销售解释效率。</li><li>建立可复用内容模块。</li></ul></div>
|
|
524
|
-
<div class="rec-panel reveal" data-preview-component="steps"><div><p class="rec-label">Next Steps</p><h3>下一步动作</h3></div><ol class="steps"><li><span>1</span><p>确认试点客群和成功指标。</p></li><li><span>2</span><p>完成价值主张与证据资产梳理。</p></li><li><span>3</span><p>启动渠道测试并按双周复盘。</p></li></ol></div>
|
|
525
|
-
</div>
|
|
526
|
-
<div class="page-number">11</div>
|
|
527
|
-
</div>
|
|
528
|
-
</div>
|
|
529
|
-
</section>
|
|
530
|
-
|
|
531
|
-
<section class="slide" slide-qa="false" data-slide-index="12" data-slide-role="closing">
|
|
532
|
-
<div class="slide-canvas">
|
|
533
|
-
<div class="page">
|
|
534
|
-
<div class="hero closing">
|
|
535
|
-
<img class="hero-bg" src="assets/closing-background.jpg" alt="closing background">
|
|
536
|
-
<div class="hero-shade"></div>
|
|
537
|
-
<div class="hero-content">
|
|
538
|
-
<div class="hero-title reveal"><h1>Thank you</h1><p>Lucent keeps the report clear, structured, and quietly branded.</p></div>
|
|
539
|
-
</div>
|
|
540
|
-
<div class="page-number light">12</div>
|
|
541
|
-
</div>
|
|
542
|
-
</div>
|
|
543
|
-
</div>
|
|
544
|
-
</section>
|
|
545
|
-
|
|
546
428
|
<script>
|
|
547
429
|
class SlidePresentation {
|
|
548
|
-
constructor() {
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
draggable: false,
|
|
579
|
-
emphasis: { focus: 'adjacency' },
|
|
580
|
-
label: { color: '#101a2b', fontSize: 17, fontWeight: 700 },
|
|
581
|
-
lineStyle: { color: 'gradient', curveness: .54, opacity: .42 },
|
|
582
|
-
data: [
|
|
583
|
-
{ name: 'Awareness' }, { name: 'Organic' }, { name: 'Paid' }, { name: 'Events' },
|
|
584
|
-
{ name: 'Qualified demand' }, { name: 'Sales proof' }, { name: 'Pilot' },
|
|
585
|
-
{ name: 'Revenue' }, { name: 'Lost / delay' }
|
|
586
|
-
],
|
|
587
|
-
links: [
|
|
588
|
-
{ source: 'Awareness', target: 'Organic', value: 32 },
|
|
589
|
-
{ source: 'Awareness', target: 'Paid', value: 26 },
|
|
590
|
-
{ source: 'Awareness', target: 'Events', value: 18 },
|
|
591
|
-
{ source: 'Organic', target: 'Qualified demand', value: 22 },
|
|
592
|
-
{ source: 'Paid', target: 'Qualified demand', value: 14 },
|
|
593
|
-
{ source: 'Events', target: 'Qualified demand', value: 12 },
|
|
594
|
-
{ source: 'Paid', target: 'Lost / delay', value: 12 },
|
|
595
|
-
{ source: 'Qualified demand', target: 'Sales proof', value: 33 },
|
|
596
|
-
{ source: 'Qualified demand', target: 'Lost / delay', value: 15 },
|
|
597
|
-
{ source: 'Sales proof', target: 'Pilot', value: 24 },
|
|
598
|
-
{ source: 'Sales proof', target: 'Lost / delay', value: 9 },
|
|
599
|
-
{ source: 'Pilot', target: 'Revenue', value: 18 },
|
|
600
|
-
{ source: 'Pilot', target: 'Lost / delay', value: 6 }
|
|
601
|
-
]
|
|
602
|
-
}]
|
|
603
|
-
});
|
|
604
|
-
charts.push(sankeyChart);
|
|
605
|
-
}
|
|
606
|
-
window.addEventListener('resize', () => charts.forEach((chart) => chart.resize()));
|
|
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;
|
|
607
460
|
}
|
|
608
461
|
}
|
|
609
|
-
|
|
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
|
+
});
|
|
610
527
|
</script>
|
|
611
528
|
</body>
|
|
612
529
|
</html>
|