slide-cli 1.0.0
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 +184 -0
- package/TEMPLATE_GUIDE.md +661 -0
- package/dist/TEMPLATE_GUIDE.md +661 -0
- package/dist/index.js +277058 -0
- package/dist/scripts/build.js +41 -0
- package/dist/scripts/download-fonts.js +123 -0
- package/dist/templates/bold-title/sample.json +57 -0
- package/dist/templates/bold-title/template.html +212 -0
- package/dist/templates/bold-title/template.json +76 -0
- package/dist/templates/bold-title-wide/sample.json +58 -0
- package/dist/templates/bold-title-wide/template.html +224 -0
- package/dist/templates/bold-title-wide/template.json +76 -0
- package/dist/templates/minimal/sample.json +53 -0
- package/dist/templates/minimal/template.html +183 -0
- package/dist/templates/minimal/template.json +76 -0
- package/dist/templates/minimal-wide/sample.json +53 -0
- package/dist/templates/minimal-wide/template.html +208 -0
- package/dist/templates/minimal-wide/template.json +76 -0
- package/dist/templates/quote-card/sample.json +57 -0
- package/dist/templates/quote-card/template.html +203 -0
- package/dist/templates/quote-card/template.json +76 -0
- package/dist/templates/quote-card-wide/sample.json +58 -0
- package/dist/templates/quote-card-wide/template.html +215 -0
- package/dist/templates/quote-card-wide/template.json +76 -0
- package/package.json +66 -0
- package/scripts/build.js +41 -0
- package/scripts/download-fonts.js +123 -0
- package/templates/bold-title/sample.json +57 -0
- package/templates/bold-title/template.html +212 -0
- package/templates/bold-title/template.json +76 -0
- package/templates/bold-title-wide/sample.json +58 -0
- package/templates/bold-title-wide/template.html +224 -0
- package/templates/bold-title-wide/template.json +76 -0
- package/templates/minimal/sample.json +53 -0
- package/templates/minimal/template.html +183 -0
- package/templates/minimal/template.json +76 -0
- package/templates/minimal-wide/sample.json +53 -0
- package/templates/minimal-wide/template.html +208 -0
- package/templates/minimal-wide/template.json +76 -0
- package/templates/quote-card/sample.json +57 -0
- package/templates/quote-card/template.html +203 -0
- package/templates/quote-card/template.json +76 -0
- package/templates/quote-card-wide/sample.json +58 -0
- package/templates/quote-card-wide/template.html +215 -0
- package/templates/quote-card-wide/template.json +76 -0
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<style>
|
|
6
|
+
|
|
7
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
8
|
+
|
|
9
|
+
html, body {
|
|
10
|
+
width: 1080px;
|
|
11
|
+
height: 1920px;
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
position: relative;
|
|
19
|
+
font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* ── Full-bleed background image (optional, behind everything) ── */
|
|
23
|
+
.bg-image {
|
|
24
|
+
position: absolute;
|
|
25
|
+
inset: 0;
|
|
26
|
+
z-index: 0;
|
|
27
|
+
}
|
|
28
|
+
.bg-image img {
|
|
29
|
+
width: 100%;
|
|
30
|
+
height: 100%;
|
|
31
|
+
object-fit: cover;
|
|
32
|
+
display: block;
|
|
33
|
+
}
|
|
34
|
+
/* Darken image so text always stays readable */
|
|
35
|
+
.bg-image::after {
|
|
36
|
+
content: '';
|
|
37
|
+
position: absolute;
|
|
38
|
+
inset: 0;
|
|
39
|
+
background: rgba(0, 0, 0, 0.52);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* ── Gradient layer (on top of image if present) ── */
|
|
43
|
+
.gradient-layer {
|
|
44
|
+
position: absolute;
|
|
45
|
+
inset: 0;
|
|
46
|
+
background: linear-gradient(160deg, {{colorA}} 0%, {{colorB}} 100%);
|
|
47
|
+
z-index: 1;
|
|
48
|
+
/* When image is present, blend the gradient on top */
|
|
49
|
+
mix-blend-mode: multiply;
|
|
50
|
+
}
|
|
51
|
+
body.has-image .gradient-layer {
|
|
52
|
+
opacity: 0.82;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Grid overlay */
|
|
56
|
+
.grid-layer {
|
|
57
|
+
position: absolute;
|
|
58
|
+
inset: 0;
|
|
59
|
+
background-image:
|
|
60
|
+
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
|
61
|
+
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
|
62
|
+
background-size: 80px 80px;
|
|
63
|
+
z-index: 2;
|
|
64
|
+
pointer-events: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Radial glow */
|
|
68
|
+
.glow-layer {
|
|
69
|
+
position: absolute;
|
|
70
|
+
top: -200px; left: -200px;
|
|
71
|
+
width: 900px; height: 900px;
|
|
72
|
+
background: radial-gradient(circle, {{highlight}}22 0%, transparent 70%);
|
|
73
|
+
z-index: 2;
|
|
74
|
+
pointer-events: none;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* All content sits above the background layers */
|
|
78
|
+
.top-bar, .main, .bottom { position: relative; z-index: 3; }
|
|
79
|
+
|
|
80
|
+
.top-bar {
|
|
81
|
+
display: flex;
|
|
82
|
+
align-items: center;
|
|
83
|
+
justify-content: space-between;
|
|
84
|
+
padding: 72px 88px 0;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.brand-dot {
|
|
88
|
+
width: 24px; height: 24px;
|
|
89
|
+
border-radius: 50%;
|
|
90
|
+
background: {{highlight}};
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* counter: bumped opacity for legibility */
|
|
94
|
+
.slide-counter {
|
|
95
|
+
font-size: 30px; font-weight: 300;
|
|
96
|
+
color: rgba(255,255,255,0.45);
|
|
97
|
+
letter-spacing: 0.12em;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.main {
|
|
101
|
+
flex: 1;
|
|
102
|
+
display: flex;
|
|
103
|
+
flex-direction: column;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
padding: 0 88px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.eyebrow {
|
|
109
|
+
display: inline-flex;
|
|
110
|
+
align-items: center;
|
|
111
|
+
gap: 20px;
|
|
112
|
+
margin-bottom: 52px;
|
|
113
|
+
}
|
|
114
|
+
.eyebrow-line { width: 60px; height: 3px; background: {{highlight}}; }
|
|
115
|
+
/* eyebrow: bigger and heavier for mobile legibility */
|
|
116
|
+
.eyebrow-text {
|
|
117
|
+
font-family: 'Outfit', 'Noto Sans CJK', 'Helvetica Neue', Arial, sans-serif;
|
|
118
|
+
font-size: 36px; font-weight: 700;
|
|
119
|
+
letter-spacing: 0.14em; text-transform: uppercase;
|
|
120
|
+
color: {{highlight}};
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.title {
|
|
124
|
+
font-family: 'Bebas Neue', 'Noto Sans CJK', Impact, 'Arial Narrow', sans-serif;
|
|
125
|
+
font-size: 176px;
|
|
126
|
+
font-weight: 900;
|
|
127
|
+
line-height: 1.0;
|
|
128
|
+
color: #ffffff;
|
|
129
|
+
margin-bottom: 60px;
|
|
130
|
+
text-wrap: pretty;
|
|
131
|
+
word-break: keep-all;
|
|
132
|
+
overflow-wrap: break-word;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* subtitle: higher opacity, slightly larger */
|
|
136
|
+
.subtitle {
|
|
137
|
+
font-family: 'Outfit', 'Noto Sans CJK', 'Helvetica Neue', Arial, sans-serif;
|
|
138
|
+
font-size: 50px;
|
|
139
|
+
font-weight: 700;
|
|
140
|
+
line-height: 1.5;
|
|
141
|
+
color: rgba(255,255,255,0.72);
|
|
142
|
+
max-width: 840px;
|
|
143
|
+
text-wrap: balance;
|
|
144
|
+
word-break: keep-all;
|
|
145
|
+
overflow-wrap: break-word;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.bottom { padding: 0 88px 80px; }
|
|
149
|
+
|
|
150
|
+
.bottom-rule {
|
|
151
|
+
width: 100%; height: 1px;
|
|
152
|
+
background: linear-gradient(90deg, {{highlight}}88, transparent);
|
|
153
|
+
margin-bottom: 48px;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/* cta: larger and full opacity */
|
|
157
|
+
.cta-text {
|
|
158
|
+
font-size: 40px; font-weight: 700;
|
|
159
|
+
letter-spacing: 0.12em; text-transform: uppercase;
|
|
160
|
+
color: rgba(255,255,255,0.92);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.bg-num {
|
|
164
|
+
position: absolute;
|
|
165
|
+
right: -20px; bottom: 100px;
|
|
166
|
+
font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
|
|
167
|
+
font-size: 600px; line-height: 1;
|
|
168
|
+
color: rgba(255,255,255,0.03);
|
|
169
|
+
pointer-events: none;
|
|
170
|
+
z-index: 3;
|
|
171
|
+
user-select: none;
|
|
172
|
+
}
|
|
173
|
+
</style>
|
|
174
|
+
</head>
|
|
175
|
+
<body class="{{#if image}}has-image{{/if}}">
|
|
176
|
+
|
|
177
|
+
{{#if image}}
|
|
178
|
+
<div class="bg-image"><img src="{{image}}" alt=""></div>
|
|
179
|
+
{{/if}}
|
|
180
|
+
|
|
181
|
+
<div class="gradient-layer"></div>
|
|
182
|
+
<div class="grid-layer"></div>
|
|
183
|
+
<div class="glow-layer"></div>
|
|
184
|
+
|
|
185
|
+
<div class="top-bar">
|
|
186
|
+
<div class="brand-dot"></div>
|
|
187
|
+
<div class="slide-counter">{{slideIndex}} / {{totalSlides}}</div>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
<div class="main">
|
|
191
|
+
{{#if eyebrow}}
|
|
192
|
+
<div class="eyebrow">
|
|
193
|
+
<div class="eyebrow-line"></div>
|
|
194
|
+
<span class="eyebrow-text">{{eyebrow}}</span>
|
|
195
|
+
</div>
|
|
196
|
+
{{/if}}
|
|
197
|
+
|
|
198
|
+
<h1 class="title">{{title}}</h1>
|
|
199
|
+
|
|
200
|
+
{{#if subtitle}}
|
|
201
|
+
<p class="subtitle">{{subtitle}}</p>
|
|
202
|
+
{{/if}}
|
|
203
|
+
</div>
|
|
204
|
+
|
|
205
|
+
<div class="bottom">
|
|
206
|
+
<div class="bottom-rule"></div>
|
|
207
|
+
{{#if cta}}<div class="cta-text">{{cta}}</div>{{/if}}
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
<div class="bg-num">{{slideIndex}}</div>
|
|
211
|
+
</body>
|
|
212
|
+
</html>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Bold Title",
|
|
3
|
+
"id": "bold-title",
|
|
4
|
+
"version": "1.1.0",
|
|
5
|
+
"description": "High-contrast editorial card with large bold title and gradient background",
|
|
6
|
+
"author": "slide-cli",
|
|
7
|
+
"aspectRatio": "9:16",
|
|
8
|
+
"width": 1080,
|
|
9
|
+
"height": 1920,
|
|
10
|
+
"tags": ["bold", "editorial", "gradient", "impact"],
|
|
11
|
+
"slots": [
|
|
12
|
+
{
|
|
13
|
+
"id": "title",
|
|
14
|
+
"type": "text",
|
|
15
|
+
"label": "Title",
|
|
16
|
+
"required": true,
|
|
17
|
+
"description": "Main bold display title at 192px. text-wrap:balance keeps multi-line titles visually even. Context and detail belong in subtitle, not here."
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"id": "subtitle",
|
|
21
|
+
"type": "text",
|
|
22
|
+
"label": "Subtitle",
|
|
23
|
+
"required": false,
|
|
24
|
+
"default": "",
|
|
25
|
+
"description": "Supporting line below the title"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"id": "eyebrow",
|
|
29
|
+
"type": "text",
|
|
30
|
+
"label": "Eyebrow text",
|
|
31
|
+
"required": false,
|
|
32
|
+
"default": "",
|
|
33
|
+
"description": "Small text above the title"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"id": "colorA",
|
|
37
|
+
"type": "color",
|
|
38
|
+
"label": "Gradient start",
|
|
39
|
+
"required": false,
|
|
40
|
+
"default": "#1a0533",
|
|
41
|
+
"description": "Top gradient color"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"id": "colorB",
|
|
45
|
+
"type": "color",
|
|
46
|
+
"label": "Gradient end",
|
|
47
|
+
"required": false,
|
|
48
|
+
"default": "#0d1f3c",
|
|
49
|
+
"description": "Bottom gradient color"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"id": "highlight",
|
|
53
|
+
"type": "color",
|
|
54
|
+
"label": "Highlight color",
|
|
55
|
+
"required": false,
|
|
56
|
+
"default": "#ff6b35",
|
|
57
|
+
"description": "Accent color for eyebrow and decorations"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"id": "image",
|
|
61
|
+
"type": "image",
|
|
62
|
+
"label": "Background image",
|
|
63
|
+
"required": false,
|
|
64
|
+
"default": "",
|
|
65
|
+
"description": "Optional full-bleed background image layered behind the gradient. Dark atmospheric photos work best. File path or https:// URL."
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"id": "cta",
|
|
69
|
+
"type": "text",
|
|
70
|
+
"label": "CTA / bottom text",
|
|
71
|
+
"required": false,
|
|
72
|
+
"default": "",
|
|
73
|
+
"description": "Call-to-action or bottom tagline"
|
|
74
|
+
}
|
|
75
|
+
]
|
|
76
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
{
|
|
2
|
+
"_template": "bold-title-wide",
|
|
3
|
+
"_description": "High-impact editorial card with a gradient background — 16:9 widescreen. Title sits on the left, subtitle on the right in a two-column layout. Best for short punchy titles (1–4 words).",
|
|
4
|
+
"_slots": {
|
|
5
|
+
"title": "REQUIRED — the bold display title. Shown at 148px. Keep it punchy. Put context in subtitle.",
|
|
6
|
+
"subtitle": "optional — one sentence of supporting text shown to the right of the title",
|
|
7
|
+
"eyebrow": "optional — small uppercase label with a decorative line shown above the title",
|
|
8
|
+
"colorA": "optional — hex color for left of the gradient background (default: #1a0533)",
|
|
9
|
+
"colorB": "optional — hex color for right of the gradient background (default: #0d1f3c)",
|
|
10
|
+
"highlight": "optional — hex accent color used for the eyebrow text, dot, and rule (default: #ff6b35)",
|
|
11
|
+
"image": "optional — path or https:// URL. Used as a full-bleed background image behind the gradient.",
|
|
12
|
+
"cta": "optional — call-to-action text shown at the bottom"
|
|
13
|
+
},
|
|
14
|
+
"title": "The Future Deck",
|
|
15
|
+
"slides": [
|
|
16
|
+
{
|
|
17
|
+
"layout": "bold-title-wide",
|
|
18
|
+
"eyebrow": "The future is",
|
|
19
|
+
"title": "NOW",
|
|
20
|
+
"subtitle": "Everything you thought would take a decade is happening this year.",
|
|
21
|
+
"colorA": "#0d0221",
|
|
22
|
+
"colorB": "#1a0f2e",
|
|
23
|
+
"highlight": "#ff6b35",
|
|
24
|
+
"cta": "Stay curious →"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"layout": "bold-title-wide",
|
|
28
|
+
"eyebrow": "Rule No. 2",
|
|
29
|
+
"title": "SHIP FAST",
|
|
30
|
+
"subtitle": "A good product shipped today beats a perfect product shipped never.",
|
|
31
|
+
"colorA": "#0a1628",
|
|
32
|
+
"colorB": "#051020",
|
|
33
|
+
"highlight": "#00d4ff",
|
|
34
|
+
"cta": "Move fast, learn faster"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"layout": "bold-title-wide",
|
|
38
|
+
"eyebrow": "The bottom line",
|
|
39
|
+
"title": "BUILD",
|
|
40
|
+
"subtitle": "Ideas are worthless without execution. Start before you're ready.",
|
|
41
|
+
"colorA": "#1a0a00",
|
|
42
|
+
"colorB": "#0d1a00",
|
|
43
|
+
"highlight": "#f5c400",
|
|
44
|
+
"cta": "Start today"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"layout": "bold-title-wide",
|
|
48
|
+
"eyebrow": "With image",
|
|
49
|
+
"title": "RISE",
|
|
50
|
+
"subtitle": "Great things are built one day at a time.",
|
|
51
|
+
"colorA": "#0a0a14",
|
|
52
|
+
"colorB": "#141428",
|
|
53
|
+
"highlight": "#a78bfa",
|
|
54
|
+
"image": "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1920",
|
|
55
|
+
"cta": "Keep climbing"
|
|
56
|
+
}
|
|
57
|
+
]
|
|
58
|
+
}
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<style>
|
|
6
|
+
|
|
7
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
8
|
+
|
|
9
|
+
html, body {
|
|
10
|
+
width: 1920px;
|
|
11
|
+
height: 1080px;
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
position: relative;
|
|
19
|
+
font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* ── Full-bleed background image (optional, behind everything) ── */
|
|
23
|
+
.bg-image {
|
|
24
|
+
position: absolute;
|
|
25
|
+
inset: 0;
|
|
26
|
+
z-index: 0;
|
|
27
|
+
}
|
|
28
|
+
.bg-image img {
|
|
29
|
+
width: 100%;
|
|
30
|
+
height: 100%;
|
|
31
|
+
object-fit: cover;
|
|
32
|
+
display: block;
|
|
33
|
+
}
|
|
34
|
+
.bg-image::after {
|
|
35
|
+
content: '';
|
|
36
|
+
position: absolute;
|
|
37
|
+
inset: 0;
|
|
38
|
+
background: rgba(0, 0, 0, 0.52);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* ── Gradient layer ── */
|
|
42
|
+
.gradient-layer {
|
|
43
|
+
position: absolute;
|
|
44
|
+
inset: 0;
|
|
45
|
+
background: linear-gradient(130deg, {{colorA}} 0%, {{colorB}} 100%);
|
|
46
|
+
z-index: 1;
|
|
47
|
+
mix-blend-mode: multiply;
|
|
48
|
+
}
|
|
49
|
+
body.has-image .gradient-layer {
|
|
50
|
+
opacity: 0.82;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Grid overlay */
|
|
54
|
+
.grid-layer {
|
|
55
|
+
position: absolute;
|
|
56
|
+
inset: 0;
|
|
57
|
+
background-image:
|
|
58
|
+
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
|
59
|
+
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
|
60
|
+
background-size: 80px 80px;
|
|
61
|
+
z-index: 2;
|
|
62
|
+
pointer-events: none;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* Radial glow */
|
|
66
|
+
.glow-layer {
|
|
67
|
+
position: absolute;
|
|
68
|
+
top: -160px; left: -160px;
|
|
69
|
+
width: 800px; height: 800px;
|
|
70
|
+
background: radial-gradient(circle, {{highlight}}22 0%, transparent 70%);
|
|
71
|
+
z-index: 2;
|
|
72
|
+
pointer-events: none;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* All content sits above the background layers */
|
|
76
|
+
.top-bar, .main, .bottom { position: relative; z-index: 3; }
|
|
77
|
+
|
|
78
|
+
.top-bar {
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
justify-content: space-between;
|
|
82
|
+
padding: 48px 80px 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.brand-dot {
|
|
86
|
+
width: 18px; height: 18px;
|
|
87
|
+
border-radius: 50%;
|
|
88
|
+
background: {{highlight}};
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.slide-counter {
|
|
92
|
+
font-size: 22px; font-weight: 300;
|
|
93
|
+
color: rgba(255,255,255,0.45);
|
|
94
|
+
letter-spacing: 0.12em;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.main {
|
|
98
|
+
flex: 1;
|
|
99
|
+
display: flex;
|
|
100
|
+
flex-direction: row;
|
|
101
|
+
align-items: center;
|
|
102
|
+
padding: 0 80px;
|
|
103
|
+
gap: 80px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/* Left column: eyebrow + title */
|
|
107
|
+
.main-left {
|
|
108
|
+
flex: 1 1 0;
|
|
109
|
+
display: flex;
|
|
110
|
+
flex-direction: column;
|
|
111
|
+
justify-content: center;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* Right column: subtitle */
|
|
115
|
+
.main-right {
|
|
116
|
+
flex: 0 0 540px;
|
|
117
|
+
display: flex;
|
|
118
|
+
flex-direction: column;
|
|
119
|
+
justify-content: center;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.eyebrow {
|
|
123
|
+
display: inline-flex;
|
|
124
|
+
align-items: center;
|
|
125
|
+
gap: 16px;
|
|
126
|
+
margin-bottom: 32px;
|
|
127
|
+
}
|
|
128
|
+
.eyebrow-line { width: 48px; height: 3px; background: {{highlight}}; }
|
|
129
|
+
.eyebrow-text {
|
|
130
|
+
font-family: 'Outfit', 'Noto Sans CJK', 'Helvetica Neue', Arial, sans-serif;
|
|
131
|
+
font-size: 24px; font-weight: 700;
|
|
132
|
+
letter-spacing: 0.14em; text-transform: uppercase;
|
|
133
|
+
color: {{highlight}};
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.title {
|
|
137
|
+
font-family: 'Bebas Neue', 'Noto Sans CJK', Impact, 'Arial Narrow', sans-serif;
|
|
138
|
+
font-size: 148px;
|
|
139
|
+
font-weight: 900;
|
|
140
|
+
line-height: 0.95;
|
|
141
|
+
color: #ffffff;
|
|
142
|
+
text-wrap: balance;
|
|
143
|
+
word-break: keep-all;
|
|
144
|
+
overflow-wrap: break-word;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.subtitle {
|
|
148
|
+
font-family: 'Outfit', 'Noto Sans CJK', 'Helvetica Neue', Arial, sans-serif;
|
|
149
|
+
font-size: 32px;
|
|
150
|
+
font-weight: 700;
|
|
151
|
+
line-height: 1.55;
|
|
152
|
+
color: rgba(255,255,255,0.72);
|
|
153
|
+
text-wrap: balance;
|
|
154
|
+
word-break: keep-all;
|
|
155
|
+
overflow-wrap: break-word;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.bottom { padding: 0 80px 48px; }
|
|
159
|
+
|
|
160
|
+
.bottom-rule {
|
|
161
|
+
width: 100%; height: 1px;
|
|
162
|
+
background: linear-gradient(90deg, {{highlight}}88, transparent);
|
|
163
|
+
margin-bottom: 28px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.cta-text {
|
|
167
|
+
font-size: 26px; font-weight: 700;
|
|
168
|
+
letter-spacing: 0.12em; text-transform: uppercase;
|
|
169
|
+
color: rgba(255,255,255,0.92);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.bg-num {
|
|
173
|
+
position: absolute;
|
|
174
|
+
right: -10px; bottom: 40px;
|
|
175
|
+
font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
|
|
176
|
+
font-size: 380px; line-height: 1;
|
|
177
|
+
color: rgba(255,255,255,0.03);
|
|
178
|
+
pointer-events: none;
|
|
179
|
+
z-index: 3;
|
|
180
|
+
user-select: none;
|
|
181
|
+
}
|
|
182
|
+
</style>
|
|
183
|
+
</head>
|
|
184
|
+
<body class="{{#if image}}has-image{{/if}}">
|
|
185
|
+
|
|
186
|
+
{{#if image}}
|
|
187
|
+
<div class="bg-image"><img src="{{image}}" alt=""></div>
|
|
188
|
+
{{/if}}
|
|
189
|
+
|
|
190
|
+
<div class="gradient-layer"></div>
|
|
191
|
+
<div class="grid-layer"></div>
|
|
192
|
+
<div class="glow-layer"></div>
|
|
193
|
+
|
|
194
|
+
<div class="top-bar">
|
|
195
|
+
<div class="brand-dot"></div>
|
|
196
|
+
<div class="slide-counter">{{slideIndex}} / {{totalSlides}}</div>
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
<div class="main">
|
|
200
|
+
<div class="main-left">
|
|
201
|
+
{{#if eyebrow}}
|
|
202
|
+
<div class="eyebrow">
|
|
203
|
+
<div class="eyebrow-line"></div>
|
|
204
|
+
<span class="eyebrow-text">{{eyebrow}}</span>
|
|
205
|
+
</div>
|
|
206
|
+
{{/if}}
|
|
207
|
+
<h1 class="title">{{title}}</h1>
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
{{#if subtitle}}
|
|
211
|
+
<div class="main-right">
|
|
212
|
+
<p class="subtitle">{{subtitle}}</p>
|
|
213
|
+
</div>
|
|
214
|
+
{{/if}}
|
|
215
|
+
</div>
|
|
216
|
+
|
|
217
|
+
<div class="bottom">
|
|
218
|
+
<div class="bottom-rule"></div>
|
|
219
|
+
{{#if cta}}<div class="cta-text">{{cta}}</div>{{/if}}
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<div class="bg-num">{{slideIndex}}</div>
|
|
223
|
+
</body>
|
|
224
|
+
</html>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Bold Title Wide",
|
|
3
|
+
"id": "bold-title-wide",
|
|
4
|
+
"version": "1.0.0",
|
|
5
|
+
"description": "High-contrast editorial card with large bold title and gradient background — 16:9 widescreen",
|
|
6
|
+
"author": "slide-cli",
|
|
7
|
+
"aspectRatio": "16:9",
|
|
8
|
+
"width": 1920,
|
|
9
|
+
"height": 1080,
|
|
10
|
+
"tags": ["bold", "editorial", "gradient", "impact", "wide", "16:9"],
|
|
11
|
+
"slots": [
|
|
12
|
+
{
|
|
13
|
+
"id": "title",
|
|
14
|
+
"type": "text",
|
|
15
|
+
"label": "Title",
|
|
16
|
+
"required": true,
|
|
17
|
+
"description": "Main bold display title. Keep it short — this is a wide layout and text-wrap:balance keeps multi-line titles visually even."
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"id": "subtitle",
|
|
21
|
+
"type": "text",
|
|
22
|
+
"label": "Subtitle",
|
|
23
|
+
"required": false,
|
|
24
|
+
"default": "",
|
|
25
|
+
"description": "Supporting line below the title"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"id": "eyebrow",
|
|
29
|
+
"type": "text",
|
|
30
|
+
"label": "Eyebrow text",
|
|
31
|
+
"required": false,
|
|
32
|
+
"default": "",
|
|
33
|
+
"description": "Small text above the title"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"id": "colorA",
|
|
37
|
+
"type": "color",
|
|
38
|
+
"label": "Gradient start",
|
|
39
|
+
"required": false,
|
|
40
|
+
"default": "#1a0533",
|
|
41
|
+
"description": "Left gradient color"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"id": "colorB",
|
|
45
|
+
"type": "color",
|
|
46
|
+
"label": "Gradient end",
|
|
47
|
+
"required": false,
|
|
48
|
+
"default": "#0d1f3c",
|
|
49
|
+
"description": "Right gradient color"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"id": "highlight",
|
|
53
|
+
"type": "color",
|
|
54
|
+
"label": "Highlight color",
|
|
55
|
+
"required": false,
|
|
56
|
+
"default": "#ff6b35",
|
|
57
|
+
"description": "Accent color for eyebrow and decorations"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"id": "image",
|
|
61
|
+
"type": "image",
|
|
62
|
+
"label": "Background image",
|
|
63
|
+
"required": false,
|
|
64
|
+
"default": "",
|
|
65
|
+
"description": "Optional full-bleed background image layered behind the gradient. Dark atmospheric photos work best. File path or https:// URL."
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"id": "cta",
|
|
69
|
+
"type": "text",
|
|
70
|
+
"label": "CTA / bottom text",
|
|
71
|
+
"required": false,
|
|
72
|
+
"default": "",
|
|
73
|
+
"description": "Call-to-action or bottom tagline"
|
|
74
|
+
}
|
|
75
|
+
]
|
|
76
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{
|
|
2
|
+
"_template": "minimal",
|
|
3
|
+
"_description": "Dark typographic card. Each slide needs a 'heading'. All other fields are optional and have defaults. Use 'accent' and 'bg' to give each slide its own color personality.",
|
|
4
|
+
"_slots": {
|
|
5
|
+
"heading": "REQUIRED — main large heading text (1–6 words work best)",
|
|
6
|
+
"body": "optional — supporting paragraph shown below the heading",
|
|
7
|
+
"label": "optional — small uppercase tag shown above the heading (e.g. 'Chapter 01')",
|
|
8
|
+
"image": "optional — path to a local image file (relative to data JSON) or an https:// URL. Shown as a full-width photo block.",
|
|
9
|
+
"imagePosition": "optional — where to place the image: 'top' (above heading, capped at 760px), 'middle' (rounded inset between heading and body, capped at 640px), or 'bottom' (fills remaining lower space). Images always use object-fit:contain — they are never cropped. Default: bottom.",
|
|
10
|
+
"bg": "optional — hex background color (default: #0f0e0c)",
|
|
11
|
+
"footer": "optional — small text anchored to the bottom-left corner"
|
|
12
|
+
},
|
|
13
|
+
"title": "Design Principles",
|
|
14
|
+
"slides": [
|
|
15
|
+
{
|
|
16
|
+
"layout": "minimal",
|
|
17
|
+
"label": "Chapter 01",
|
|
18
|
+
"heading": "Less is more",
|
|
19
|
+
"body": "Simplicity is the ultimate sophistication. Remove everything that does not serve the message.",
|
|
20
|
+
"accent": "#c8b89a",
|
|
21
|
+
"bg": "#0f0e0c",
|
|
22
|
+
"footer": "Design Principles"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"layout": "minimal",
|
|
26
|
+
"label": "Chapter 02",
|
|
27
|
+
"heading": "White space breathes",
|
|
28
|
+
"body": "Empty space is not wasted space. It gives the eye room to rest and the mind room to think.",
|
|
29
|
+
"accent": "#8eb8a0",
|
|
30
|
+
"bg": "#080f0c",
|
|
31
|
+
"footer": "Design Principles"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"layout": "minimal",
|
|
35
|
+
"label": "Chapter 03",
|
|
36
|
+
"heading": "Type is voice",
|
|
37
|
+
"body": "Your choice of typeface communicates before anyone reads a word.",
|
|
38
|
+
"accent": "#a8b8d0",
|
|
39
|
+
"bg": "#090c14",
|
|
40
|
+
"footer": "Design Principles"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"layout": "minimal",
|
|
44
|
+
"label": "Chapter 04",
|
|
45
|
+
"heading": "Image speaks first",
|
|
46
|
+
"image": "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1080",
|
|
47
|
+
"imagePosition": "bottom",
|
|
48
|
+
"accent": "#b0c4b8",
|
|
49
|
+
"bg": "#080d0a",
|
|
50
|
+
"footer": "Design Principles"
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|