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,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
|
+
}
|
|
@@ -0,0 +1,208 @@
|
|
|
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: 1920px;
|
|
10
|
+
height: 1080px;
|
|
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
|
+
/* ── Base layout: header + content row + footer ── */
|
|
34
|
+
.zone-header {
|
|
35
|
+
flex: 0 0 auto;
|
|
36
|
+
padding: 52px 88px 0;
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
justify-content: space-between;
|
|
40
|
+
position: relative; z-index: 1;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.zone-content {
|
|
44
|
+
flex: 1 1 auto;
|
|
45
|
+
display: flex;
|
|
46
|
+
flex-direction: row;
|
|
47
|
+
min-height: 0;
|
|
48
|
+
position: relative; z-index: 1;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* ── Text column ── */
|
|
52
|
+
.zone-text {
|
|
53
|
+
flex: 1 1 0;
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: column;
|
|
56
|
+
justify-content: center;
|
|
57
|
+
padding: 32px 88px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* ── Image column / strip ── */
|
|
61
|
+
.zone-image {
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
overflow: hidden;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.slide-image {
|
|
69
|
+
display: block;
|
|
70
|
+
object-fit: contain;
|
|
71
|
+
object-position: center center;
|
|
72
|
+
max-width: 100%;
|
|
73
|
+
max-height: 100%;
|
|
74
|
+
width: auto;
|
|
75
|
+
height: auto;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* ── No image: text fills full width ── */
|
|
79
|
+
body.no-image .zone-image { display: none; }
|
|
80
|
+
body.no-image .zone-text { padding: 32px 180px; }
|
|
81
|
+
|
|
82
|
+
/* ── img-right (default): image takes right half ── */
|
|
83
|
+
body.img-right .zone-text { flex: 0 0 900px; }
|
|
84
|
+
body.img-right .zone-image {
|
|
85
|
+
flex: 1 1 0;
|
|
86
|
+
padding: 32px 48px 32px 0;
|
|
87
|
+
}
|
|
88
|
+
body.img-right .slide-image {
|
|
89
|
+
border-radius: 12px;
|
|
90
|
+
max-height: 900px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* ── img-top: thin strip above, text below ── */
|
|
94
|
+
body.img-top .zone-content { flex-direction: column; }
|
|
95
|
+
body.img-top .zone-image {
|
|
96
|
+
flex: 0 0 340px;
|
|
97
|
+
width: 100%;
|
|
98
|
+
padding: 0 88px 24px;
|
|
99
|
+
}
|
|
100
|
+
body.img-top .zone-text { flex: 1 1 0; }
|
|
101
|
+
|
|
102
|
+
/* ── img-bottom: text above, image strip below ── */
|
|
103
|
+
body.img-bottom .zone-content { flex-direction: column; }
|
|
104
|
+
body.img-bottom .zone-text { flex: 1 1 0; }
|
|
105
|
+
body.img-bottom .zone-image {
|
|
106
|
+
flex: 0 0 320px;
|
|
107
|
+
width: 100%;
|
|
108
|
+
padding: 0 88px 32px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* ── Text elements ── */
|
|
112
|
+
.label {
|
|
113
|
+
font-size: 22px;
|
|
114
|
+
font-weight: 400;
|
|
115
|
+
letter-spacing: 0.18em;
|
|
116
|
+
text-transform: uppercase;
|
|
117
|
+
color: {{accent}};
|
|
118
|
+
margin-bottom: 28px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.rule {
|
|
122
|
+
width: 64px;
|
|
123
|
+
height: 2px;
|
|
124
|
+
background: {{accent}};
|
|
125
|
+
margin-bottom: 36px;
|
|
126
|
+
opacity: 0.7;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.heading {
|
|
130
|
+
font-family: 'Fraunces', 'Noto Serif CJK', Georgia, 'Times New Roman', serif;
|
|
131
|
+
font-size: 88px;
|
|
132
|
+
font-weight: 600;
|
|
133
|
+
line-height: 1.08;
|
|
134
|
+
letter-spacing: -0.02em;
|
|
135
|
+
color: #f0ece4;
|
|
136
|
+
margin-bottom: 40px;
|
|
137
|
+
text-wrap: balance;
|
|
138
|
+
word-break: keep-all;
|
|
139
|
+
overflow-wrap: break-word;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.body-text {
|
|
143
|
+
font-family: 'DM Mono', 'Noto Sans CJK', 'Courier New', monospace;
|
|
144
|
+
font-size: 30px;
|
|
145
|
+
font-weight: 400;
|
|
146
|
+
line-height: 1.65;
|
|
147
|
+
color: #a09890;
|
|
148
|
+
max-width: 760px;
|
|
149
|
+
text-wrap: balance;
|
|
150
|
+
word-break: keep-all;
|
|
151
|
+
overflow-wrap: break-word;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* ── Footer ── */
|
|
155
|
+
.footer {
|
|
156
|
+
position: absolute;
|
|
157
|
+
bottom: 40px;
|
|
158
|
+
left: 88px;
|
|
159
|
+
right: 88px;
|
|
160
|
+
display: flex;
|
|
161
|
+
align-items: center;
|
|
162
|
+
justify-content: space-between;
|
|
163
|
+
z-index: 3;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.footer-text {
|
|
167
|
+
font-size: 22px;
|
|
168
|
+
font-weight: 300;
|
|
169
|
+
letter-spacing: 0.08em;
|
|
170
|
+
color: #5a5550;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.slide-num {
|
|
174
|
+
font-size: 20px;
|
|
175
|
+
font-weight: 300;
|
|
176
|
+
color: #484440;
|
|
177
|
+
letter-spacing: 0.12em;
|
|
178
|
+
}
|
|
179
|
+
</style>
|
|
180
|
+
</head>
|
|
181
|
+
<body class="{{#if image}}img-{{default imagePosition 'right'}}{{else}}no-image{{/if}}">
|
|
182
|
+
|
|
183
|
+
<div class="zone-header">
|
|
184
|
+
<span><!-- spacer --></span>
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
<div class="zone-content">
|
|
188
|
+
<div class="zone-text">
|
|
189
|
+
{{#if label}}<div class="label">{{label}}</div>{{/if}}
|
|
190
|
+
<div class="rule"></div>
|
|
191
|
+
<h1 class="heading">{{heading}}</h1>
|
|
192
|
+
{{#if body}}<p class="body-text">{{body}}</p>{{/if}}
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
{{#if image}}
|
|
196
|
+
<div class="zone-image">
|
|
197
|
+
<img class="slide-image" src="{{image}}" alt="">
|
|
198
|
+
</div>
|
|
199
|
+
{{/if}}
|
|
200
|
+
</div>
|
|
201
|
+
|
|
202
|
+
<footer class="footer">
|
|
203
|
+
{{#if footer}}<span class="footer-text">{{footer}}</span>{{else}}<span></span>{{/if}}
|
|
204
|
+
<span class="slide-num">{{slideIndex}} / {{totalSlides}}</span>
|
|
205
|
+
</footer>
|
|
206
|
+
|
|
207
|
+
</body>
|
|
208
|
+
</html>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Minimal Wide",
|
|
3
|
+
"id": "minimal-wide",
|
|
4
|
+
"version": "1.0.0",
|
|
5
|
+
"description": "Clean, typographic slide with a large heading and body text — 16:9 widescreen",
|
|
6
|
+
"author": "slide-cli",
|
|
7
|
+
"aspectRatio": "16:9",
|
|
8
|
+
"width": 1920,
|
|
9
|
+
"height": 1080,
|
|
10
|
+
"tags": ["minimal", "typography", "clean", "wide", "16:9"],
|
|
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. In wide layout: placed right of text (default) or full-bleed."
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"id": "imagePosition",
|
|
45
|
+
"type": "text",
|
|
46
|
+
"label": "Image position",
|
|
47
|
+
"required": false,
|
|
48
|
+
"default": "right",
|
|
49
|
+
"description": "Where to place the image: 'right' (beside text, half-width), 'top' (above text, full-width strip), or 'bottom' (below text). Default: right."
|
|
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,57 @@
|
|
|
1
|
+
{
|
|
2
|
+
"_template": "quote-card",
|
|
3
|
+
"_description": "Elegant light-background pull-quote card with large SVG quotation marks, italic serif quote text, and author attribution. Best for memorable quotes of 1–3 sentences. Customize background, text, and accent colors per slide for variety.",
|
|
4
|
+
"_slots": {
|
|
5
|
+
"quote": "REQUIRED — the quote text, without any quotation marks (they are drawn as SVG)",
|
|
6
|
+
"author": "optional — the person who said it",
|
|
7
|
+
"role": "optional — their title, context, or the source work (e.g. 'CEO', 'Meditations, 180 AD')",
|
|
8
|
+
"image": "optional — author portrait. Path or https:// URL. Displayed as a circle (140px) beside the author name. Square or portrait-oriented photos work best.",
|
|
9
|
+
"bg": "optional — hex background color (default: #faf7f2, a warm off-white)",
|
|
10
|
+
"ink": "optional — hex color for all text (default: #1a1714, near-black)",
|
|
11
|
+
"accent": "optional — hex color for the quotation marks, rule, and topic tag (default: #c0392b)"
|
|
12
|
+
},
|
|
13
|
+
"title": "Words That Moved the World",
|
|
14
|
+
"slides": [
|
|
15
|
+
{
|
|
16
|
+
"layout": "quote-card",
|
|
17
|
+
"topic": "On Creation",
|
|
18
|
+
"quote": "Every child is an artist. The problem is how to remain an artist once we grow up.",
|
|
19
|
+
"author": "Pablo Picasso",
|
|
20
|
+
"role": "Painter & Sculptor",
|
|
21
|
+
"bg": "#faf7f2",
|
|
22
|
+
"ink": "#1a1714",
|
|
23
|
+
"accent": "#c0392b"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"layout": "quote-card",
|
|
27
|
+
"topic": "On Time",
|
|
28
|
+
"quote": "The two most powerful warriors are patience and time.",
|
|
29
|
+
"author": "Leo Tolstoy",
|
|
30
|
+
"role": "War and Peace, 1869",
|
|
31
|
+
"bg": "#f2f5fa",
|
|
32
|
+
"ink": "#141720",
|
|
33
|
+
"accent": "#2c5282"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"layout": "quote-card",
|
|
37
|
+
"topic": "On Design",
|
|
38
|
+
"quote": "Design is not just what it looks like and feels like. Design is how it works.",
|
|
39
|
+
"author": "Steve Jobs",
|
|
40
|
+
"role": "Apple Inc.",
|
|
41
|
+
"bg": "#fafaf8",
|
|
42
|
+
"ink": "#181818",
|
|
43
|
+
"accent": "#2d6a4f"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"layout": "quote-card",
|
|
47
|
+
"topic": "On Courage",
|
|
48
|
+
"quote": "You have power over your mind, not outside events. Realize this, and you will find strength.",
|
|
49
|
+
"author": "Marcus Aurelius",
|
|
50
|
+
"role": "Meditations, 180 AD",
|
|
51
|
+
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Marcus_Aurelius_Metropolitan_Museum.jpg/480px-Marcus_Aurelius_Metropolitan_Museum.jpg",
|
|
52
|
+
"bg": "#f5f0e8",
|
|
53
|
+
"ink": "#1a1510",
|
|
54
|
+
"accent": "#8b6914"
|
|
55
|
+
}
|
|
56
|
+
]
|
|
57
|
+
}
|