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,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
|
+
}
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<style>
|
|
6
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
7
|
+
|
|
8
|
+
html, body {
|
|
9
|
+
width: 1080px;
|
|
10
|
+
height: 1920px;
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
background: {{bg}};
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
position: relative;
|
|
19
|
+
font-family: 'DM Mono', 'Courier New', monospace;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* Noise texture */
|
|
23
|
+
body::before {
|
|
24
|
+
content: '';
|
|
25
|
+
position: absolute;
|
|
26
|
+
inset: 0;
|
|
27
|
+
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
|
|
28
|
+
pointer-events: none;
|
|
29
|
+
opacity: 0.35;
|
|
30
|
+
z-index: 0;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* ── Layout zones ── */
|
|
34
|
+
.zone-top { flex: 0 0 auto; padding: 100px 96px 0; position: relative; z-index: 1; }
|
|
35
|
+
.zone-image { flex: 1 1 auto; position: relative; z-index: 1; min-height: 0; }
|
|
36
|
+
.zone-bottom { flex: 0 0 auto; padding: 0 96px 140px; position: relative; z-index: 1; }
|
|
37
|
+
|
|
38
|
+
body.no-image { justify-content: center; }
|
|
39
|
+
body.no-image .zone-top { padding-top: 0; }
|
|
40
|
+
body.no-image .zone-image { display: none; }
|
|
41
|
+
body.no-image .zone-bottom { padding-bottom: 0; }
|
|
42
|
+
|
|
43
|
+
/* ── Image area ── */
|
|
44
|
+
.zone-image {
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.slide-image {
|
|
52
|
+
display: block;
|
|
53
|
+
object-fit: contain;
|
|
54
|
+
object-position: center center;
|
|
55
|
+
max-width: 100%;
|
|
56
|
+
max-height: 100%;
|
|
57
|
+
width: auto;
|
|
58
|
+
height: auto;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
body.img-top .zone-top { order: 2; padding-top: 64px; }
|
|
62
|
+
body.img-top .zone-image { order: 1; flex: 0 0 auto; max-height: 760px; min-height: 320px; width: 100%; padding: 0 48px; }
|
|
63
|
+
body.img-top .zone-bottom { order: 3; }
|
|
64
|
+
|
|
65
|
+
body.img-middle .zone-top { order: 1; }
|
|
66
|
+
body.img-middle .zone-image { order: 2; flex: 0 0 auto; max-height: 640px; min-height: 240px; width: calc(100% - 192px); margin: 32px 96px; border-radius: 16px; background: rgba(255,255,255,0.04); }
|
|
67
|
+
body.img-middle .zone-bottom { order: 3; }
|
|
68
|
+
body.img-middle .slide-image { border-radius: 12px; }
|
|
69
|
+
|
|
70
|
+
body.img-bottom .zone-top { order: 1; padding-bottom: 48px; }
|
|
71
|
+
body.img-bottom .zone-image { order: 2; flex: 1 1 auto; min-height: 320px; width: 100%; padding: 0 48px 48px; }
|
|
72
|
+
body.img-bottom .zone-bottom { display: none; }
|
|
73
|
+
|
|
74
|
+
body.img-bottom .zone-image::before {
|
|
75
|
+
content: '';
|
|
76
|
+
position: absolute;
|
|
77
|
+
top: 0; left: 0; right: 0;
|
|
78
|
+
height: 120px;
|
|
79
|
+
background: linear-gradient(to bottom, {{bg}}, transparent);
|
|
80
|
+
z-index: 2;
|
|
81
|
+
pointer-events: none;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* ── Text elements ── */
|
|
85
|
+
/* label: increased size, full opacity, heavier weight */
|
|
86
|
+
.label {
|
|
87
|
+
font-size: 32px;
|
|
88
|
+
font-weight: 400;
|
|
89
|
+
letter-spacing: 0.18em;
|
|
90
|
+
text-transform: uppercase;
|
|
91
|
+
color: {{accent}};
|
|
92
|
+
margin-bottom: 48px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.rule {
|
|
96
|
+
width: 80px;
|
|
97
|
+
height: 2px;
|
|
98
|
+
background: {{accent}};
|
|
99
|
+
margin-bottom: 56px;
|
|
100
|
+
opacity: 0.7;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* heading: unchanged — already strong */
|
|
104
|
+
.heading {
|
|
105
|
+
font-family: 'Fraunces', 'Noto Serif CJK', Georgia, 'Times New Roman', serif;
|
|
106
|
+
font-size: 118px;
|
|
107
|
+
font-weight: 600;
|
|
108
|
+
line-height: 1.08;
|
|
109
|
+
letter-spacing: -0.02em;
|
|
110
|
+
color: #f0ece4;
|
|
111
|
+
margin-bottom: 56px;
|
|
112
|
+
text-wrap: balance;
|
|
113
|
+
word-break: keep-all;
|
|
114
|
+
overflow-wrap: break-word;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* body-text: bumped to 42px, brighter colour for contrast */
|
|
118
|
+
.body-text {
|
|
119
|
+
font-family: 'DM Mono', 'Noto Sans CJK', 'Courier New', monospace;
|
|
120
|
+
font-size: 42px;
|
|
121
|
+
font-weight: 400;
|
|
122
|
+
line-height: 1.65;
|
|
123
|
+
color: #a09890;
|
|
124
|
+
max-width: 820px;
|
|
125
|
+
text-wrap: balance;
|
|
126
|
+
word-break: keep-all;
|
|
127
|
+
overflow-wrap: break-word;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* ── Footer: visually present but clearly secondary ── */
|
|
131
|
+
.footer {
|
|
132
|
+
position: absolute;
|
|
133
|
+
bottom: 64px;
|
|
134
|
+
left: 96px;
|
|
135
|
+
right: 96px;
|
|
136
|
+
display: flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
justify-content: space-between;
|
|
139
|
+
z-index: 3;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* footer-text: bigger, more contrast */
|
|
143
|
+
.footer-text {
|
|
144
|
+
font-size: 30px;
|
|
145
|
+
font-weight: 300;
|
|
146
|
+
letter-spacing: 0.08em;
|
|
147
|
+
color: #5a5550;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* slide-num: slightly more visible */
|
|
151
|
+
.slide-num {
|
|
152
|
+
font-size: 28px;
|
|
153
|
+
font-weight: 300;
|
|
154
|
+
color: #484440;
|
|
155
|
+
letter-spacing: 0.12em;
|
|
156
|
+
}
|
|
157
|
+
</style>
|
|
158
|
+
</head>
|
|
159
|
+
<body class="{{#if image}}img-{{default imagePosition 'bottom'}}{{else}}no-image{{/if}}">
|
|
160
|
+
|
|
161
|
+
<div class="zone-top">
|
|
162
|
+
{{#if label}}<div class="label">{{label}}</div>{{/if}}
|
|
163
|
+
<div class="rule"></div>
|
|
164
|
+
<h1 class="heading">{{heading}}</h1>
|
|
165
|
+
</div>
|
|
166
|
+
|
|
167
|
+
{{#if image}}
|
|
168
|
+
<div class="zone-image">
|
|
169
|
+
<img class="slide-image" src="{{image}}" alt="">
|
|
170
|
+
</div>
|
|
171
|
+
{{/if}}
|
|
172
|
+
|
|
173
|
+
<div class="zone-bottom">
|
|
174
|
+
{{#if body}}<p class="body-text">{{body}}</p>{{/if}}
|
|
175
|
+
</div>
|
|
176
|
+
|
|
177
|
+
<footer class="footer">
|
|
178
|
+
{{#if footer}}<span class="footer-text">{{footer}}</span>{{else}}<span></span>{{/if}}
|
|
179
|
+
<span class="slide-num">{{slideIndex}} / {{totalSlides}}</span>
|
|
180
|
+
</footer>
|
|
181
|
+
|
|
182
|
+
</body>
|
|
183
|
+
</html>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Minimal",
|
|
3
|
+
"id": "minimal",
|
|
4
|
+
"version": "1.1.0",
|
|
5
|
+
"description": "Clean, typographic slide with a large heading and body text",
|
|
6
|
+
"author": "slide-cli",
|
|
7
|
+
"aspectRatio": "9:16",
|
|
8
|
+
"width": 1080,
|
|
9
|
+
"height": 1920,
|
|
10
|
+
"tags": ["minimal", "typography", "clean"],
|
|
11
|
+
"slots": [
|
|
12
|
+
{
|
|
13
|
+
"id": "heading",
|
|
14
|
+
"type": "text",
|
|
15
|
+
"label": "Heading",
|
|
16
|
+
"required": true,
|
|
17
|
+
"description": "Main heading text"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"id": "body",
|
|
21
|
+
"type": "text",
|
|
22
|
+
"label": "Body text",
|
|
23
|
+
"required": false,
|
|
24
|
+
"default": "",
|
|
25
|
+
"description": "Supporting paragraph"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"id": "label",
|
|
29
|
+
"type": "text",
|
|
30
|
+
"label": "Label / tag",
|
|
31
|
+
"required": false,
|
|
32
|
+
"default": "",
|
|
33
|
+
"description": "Small label shown above the heading"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"id": "image",
|
|
37
|
+
"type": "image",
|
|
38
|
+
"label": "Image",
|
|
39
|
+
"required": false,
|
|
40
|
+
"default": "",
|
|
41
|
+
"description": "Optional image. File path (relative to data JSON) or https:// URL. Displayed as a full-width block."
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"id": "imagePosition",
|
|
45
|
+
"type": "text",
|
|
46
|
+
"label": "Image position",
|
|
47
|
+
"required": false,
|
|
48
|
+
"default": "bottom",
|
|
49
|
+
"description": "Where to place the image: 'top' (above heading, max 760px), 'middle' (rounded inset between heading and body, max 640px), or 'bottom' (fills remaining space below text). Images use object-fit:contain — never cropped. Default: bottom."
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"id": "accent",
|
|
53
|
+
"type": "color",
|
|
54
|
+
"label": "Accent color",
|
|
55
|
+
"required": false,
|
|
56
|
+
"default": "#c8b89a",
|
|
57
|
+
"description": "Color for the label and decorative line"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"id": "bg",
|
|
61
|
+
"type": "color",
|
|
62
|
+
"label": "Background color",
|
|
63
|
+
"required": false,
|
|
64
|
+
"default": "#0f0e0c",
|
|
65
|
+
"description": "Slide background color"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"id": "footer",
|
|
69
|
+
"type": "text",
|
|
70
|
+
"label": "Footer text",
|
|
71
|
+
"required": false,
|
|
72
|
+
"default": "",
|
|
73
|
+
"description": "Small text at the bottom"
|
|
74
|
+
}
|
|
75
|
+
]
|
|
76
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{
|
|
2
|
+
"_template": "minimal-wide",
|
|
3
|
+
"_description": "Dark typographic card — 16:9 widescreen. Text on the left, optional image on the right (default) or as a top/bottom strip. Each slide needs a 'heading'. All other fields are optional.",
|
|
4
|
+
"_slots": {
|
|
5
|
+
"heading": "REQUIRED — main large heading text",
|
|
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 or an https:// URL.",
|
|
9
|
+
"imagePosition": "optional — 'right' (beside text, default), 'top' (strip above), or 'bottom' (strip below).",
|
|
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-wide",
|
|
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-wide",
|
|
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-wide",
|
|
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-wide",
|
|
44
|
+
"label": "Chapter 04",
|
|
45
|
+
"heading": "Image speaks first",
|
|
46
|
+
"image": "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920",
|
|
47
|
+
"imagePosition": "right",
|
|
48
|
+
"accent": "#b0c4b8",
|
|
49
|
+
"bg": "#080d0a",
|
|
50
|
+
"footer": "Design Principles"
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|