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,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
|
+
}
|
|
@@ -0,0 +1,203 @@
|
|
|
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
|
+
background: {{bg}};
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
body {
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
position: relative;
|
|
20
|
+
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Paper texture */
|
|
24
|
+
body::before {
|
|
25
|
+
content: '';
|
|
26
|
+
position: absolute; inset: 0;
|
|
27
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
|
|
28
|
+
pointer-events: none; mix-blend-mode: multiply;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.header {
|
|
32
|
+
padding: 80px 96px 0;
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
justify-content: space-between;
|
|
36
|
+
position: relative; z-index: 1;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* topic: full opacity, slightly larger */
|
|
40
|
+
.topic {
|
|
41
|
+
font-size: 30px; font-weight: 700;
|
|
42
|
+
letter-spacing: 0.16em; text-transform: uppercase;
|
|
43
|
+
color: {{accent}};
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* header-num: enough to be present, not distracting */
|
|
47
|
+
.header-num {
|
|
48
|
+
font-size: 28px; font-weight: 300;
|
|
49
|
+
color: {{ink}}; opacity: 0.35; letter-spacing: 0.1em;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.top-rule {
|
|
53
|
+
margin: 60px 96px 0;
|
|
54
|
+
height: 1px;
|
|
55
|
+
background: linear-gradient(90deg, {{accent}}, transparent);
|
|
56
|
+
opacity: 0.4;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.main {
|
|
60
|
+
flex: 1;
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-direction: column;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
padding: 0 96px;
|
|
65
|
+
position: relative; z-index: 1;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* SVG quotation mark */
|
|
69
|
+
.open-quote {
|
|
70
|
+
position: absolute;
|
|
71
|
+
top: -20px; left: 48px;
|
|
72
|
+
pointer-events: none;
|
|
73
|
+
opacity: 0.13;
|
|
74
|
+
width: 260px; height: 220px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.quote-text {
|
|
78
|
+
font-family: 'Playfair Display', 'Noto Serif CJK', Georgia, 'Times New Roman', serif;
|
|
79
|
+
font-size: 86px; font-weight: 700; font-style: italic;
|
|
80
|
+
line-height: 1.3; letter-spacing: -0.01em;
|
|
81
|
+
color: {{ink}};
|
|
82
|
+
position: relative; z-index: 1;
|
|
83
|
+
margin-bottom: 80px;
|
|
84
|
+
text-wrap: balance;
|
|
85
|
+
word-break: keep-all;
|
|
86
|
+
overflow-wrap: break-word;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* ── Attribution row — portrait + text side by side ── */
|
|
90
|
+
.attribution {
|
|
91
|
+
display: flex;
|
|
92
|
+
align-items: center;
|
|
93
|
+
gap: 48px;
|
|
94
|
+
position: relative; z-index: 1;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* Circular portrait */
|
|
98
|
+
.portrait {
|
|
99
|
+
flex: 0 0 140px;
|
|
100
|
+
width: 140px; height: 140px;
|
|
101
|
+
border-radius: 50%;
|
|
102
|
+
overflow: hidden;
|
|
103
|
+
border: 3px solid {{accent}};
|
|
104
|
+
opacity: 0.92;
|
|
105
|
+
}
|
|
106
|
+
.portrait img {
|
|
107
|
+
width: 100%; height: 100%;
|
|
108
|
+
object-fit: cover; object-position: center top;
|
|
109
|
+
display: block;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.attribution-text { display: flex; flex-direction: column; gap: 12px; }
|
|
113
|
+
|
|
114
|
+
.attr-rule { width: 64px; height: 3px; background: {{accent}}; margin-bottom: 4px; }
|
|
115
|
+
|
|
116
|
+
.author-name {
|
|
117
|
+
font-family: 'Playfair Display', 'Noto Serif CJK', Georgia, 'Times New Roman', serif;
|
|
118
|
+
font-size: 46px; font-weight: 700;
|
|
119
|
+
color: {{ink}}; letter-spacing: 0.01em;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* author-role: raised opacity and size for legibility */
|
|
123
|
+
.author-role {
|
|
124
|
+
font-size: 34px; font-weight: 400;
|
|
125
|
+
color: {{ink}}; opacity: 0.6; letter-spacing: 0.04em;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.footer {
|
|
129
|
+
padding: 0 96px 80px;
|
|
130
|
+
display: flex;
|
|
131
|
+
align-items: flex-end;
|
|
132
|
+
justify-content: space-between;
|
|
133
|
+
position: relative; z-index: 1;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.bottom-rule {
|
|
137
|
+
flex: 1; height: 1px;
|
|
138
|
+
background: {{ink}}; opacity: 0.1;
|
|
139
|
+
margin-right: 40px; margin-bottom: 8px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* slide-info: visible enough to orient the reader */
|
|
143
|
+
.slide-info {
|
|
144
|
+
font-size: 28px; font-weight: 400;
|
|
145
|
+
color: {{ink}}; opacity: 0.38;
|
|
146
|
+
letter-spacing: 0.1em; white-space: nowrap;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.corner-br {
|
|
150
|
+
position: absolute; bottom: 80px; right: 80px;
|
|
151
|
+
width: 60px; height: 60px;
|
|
152
|
+
border-right: 2px solid {{accent}};
|
|
153
|
+
border-bottom: 2px solid {{accent}};
|
|
154
|
+
opacity: 0.25;
|
|
155
|
+
}
|
|
156
|
+
.corner-tl {
|
|
157
|
+
position: absolute; top: 80px; left: 80px;
|
|
158
|
+
width: 60px; height: 60px;
|
|
159
|
+
border-left: 2px solid {{accent}};
|
|
160
|
+
border-top: 2px solid {{accent}};
|
|
161
|
+
opacity: 0.25;
|
|
162
|
+
}
|
|
163
|
+
</style>
|
|
164
|
+
</head>
|
|
165
|
+
<body>
|
|
166
|
+
<div class="corner-tl"></div>
|
|
167
|
+
<div class="corner-br"></div>
|
|
168
|
+
|
|
169
|
+
<div class="header">
|
|
170
|
+
{{#if topic}}<span class="topic">{{topic}}</span>{{else}}<span></span>{{/if}}
|
|
171
|
+
<span class="header-num">{{slideIndex}}</span>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<div class="top-rule"></div>
|
|
175
|
+
|
|
176
|
+
<div class="main">
|
|
177
|
+
<svg class="open-quote" viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
|
|
178
|
+
<path d="M20 130 C20 90 45 55 80 30 L70 15 C25 42 0 82 0 130 C0 148 12 160 28 160 C44 160 55 148 55 132 C55 116 44 104 28 104 C24 104 22 104 20 105 Z" fill="{{accent}}"/>
|
|
179
|
+
<path d="M110 130 C110 90 135 55 170 30 L160 15 C115 42 90 82 90 130 C90 148 102 160 118 160 C134 160 145 148 145 132 C145 116 134 104 118 104 C114 104 112 104 110 105 Z" fill="{{accent}}"/>
|
|
180
|
+
</svg>
|
|
181
|
+
|
|
182
|
+
<blockquote class="quote-text">{{quote}}</blockquote>
|
|
183
|
+
|
|
184
|
+
{{#if author}}
|
|
185
|
+
<div class="attribution">
|
|
186
|
+
{{#if image}}
|
|
187
|
+
<div class="portrait"><img src="{{image}}" alt="{{author}}"></div>
|
|
188
|
+
{{/if}}
|
|
189
|
+
<div class="attribution-text">
|
|
190
|
+
<div class="attr-rule"></div>
|
|
191
|
+
<div class="author-name">{{author}}</div>
|
|
192
|
+
{{#if role}}<div class="author-role">{{role}}</div>{{/if}}
|
|
193
|
+
</div>
|
|
194
|
+
</div>
|
|
195
|
+
{{/if}}
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<div class="footer">
|
|
199
|
+
<div class="bottom-rule"></div>
|
|
200
|
+
<div class="slide-info">{{slideIndex}} / {{totalSlides}}</div>
|
|
201
|
+
</div>
|
|
202
|
+
</body>
|
|
203
|
+
</html>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Quote Card",
|
|
3
|
+
"id": "quote-card",
|
|
4
|
+
"version": "1.1.0",
|
|
5
|
+
"description": "Elegant pull-quote card with large quotation marks and attribution",
|
|
6
|
+
"author": "slide-cli",
|
|
7
|
+
"aspectRatio": "9:16",
|
|
8
|
+
"width": 1080,
|
|
9
|
+
"height": 1920,
|
|
10
|
+
"tags": ["quote", "elegant", "serif"],
|
|
11
|
+
"slots": [
|
|
12
|
+
{
|
|
13
|
+
"id": "quote",
|
|
14
|
+
"type": "text",
|
|
15
|
+
"label": "Quote text",
|
|
16
|
+
"required": true,
|
|
17
|
+
"description": "The main quote (without quotation marks)"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"id": "author",
|
|
21
|
+
"type": "text",
|
|
22
|
+
"label": "Author name",
|
|
23
|
+
"required": false,
|
|
24
|
+
"default": "",
|
|
25
|
+
"description": "Who said it"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"id": "role",
|
|
29
|
+
"type": "text",
|
|
30
|
+
"label": "Author role / context",
|
|
31
|
+
"required": false,
|
|
32
|
+
"default": "",
|
|
33
|
+
"description": "e.g. CEO, Philosopher, 1984"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"id": "image",
|
|
37
|
+
"type": "image",
|
|
38
|
+
"label": "Author portrait",
|
|
39
|
+
"required": false,
|
|
40
|
+
"default": "",
|
|
41
|
+
"description": "Optional author portrait. Shown as a circle (140px) beside the author name. File path or https:// URL."
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"id": "topic",
|
|
45
|
+
"type": "text",
|
|
46
|
+
"label": "Topic tag",
|
|
47
|
+
"required": false,
|
|
48
|
+
"default": "",
|
|
49
|
+
"description": "Short category label shown at top"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"id": "bg",
|
|
53
|
+
"type": "color",
|
|
54
|
+
"label": "Background",
|
|
55
|
+
"required": false,
|
|
56
|
+
"default": "#faf7f2",
|
|
57
|
+
"description": "Card background"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"id": "ink",
|
|
61
|
+
"type": "color",
|
|
62
|
+
"label": "Text color",
|
|
63
|
+
"required": false,
|
|
64
|
+
"default": "#1a1714",
|
|
65
|
+
"description": "Main text color"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"id": "accent",
|
|
69
|
+
"type": "color",
|
|
70
|
+
"label": "Accent color",
|
|
71
|
+
"required": false,
|
|
72
|
+
"default": "#c0392b",
|
|
73
|
+
"description": "Color for quotation marks and rule"
|
|
74
|
+
}
|
|
75
|
+
]
|
|
76
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
{
|
|
2
|
+
"_template": "quote-card-wide",
|
|
3
|
+
"_description": "Elegant pull-quote card — 16:9 widescreen. Quote text on the left, author attribution on the right in a two-column layout. Best for 1–3 sentence quotes.",
|
|
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 beside the author name.",
|
|
9
|
+
"topic": "optional — short category label shown at top",
|
|
10
|
+
"bg": "optional — hex background color (default: #faf7f2, a warm off-white)",
|
|
11
|
+
"ink": "optional — hex color for all text (default: #1a1714, near-black)",
|
|
12
|
+
"accent": "optional — hex color for the quotation marks, rule, and topic tag (default: #c0392b)"
|
|
13
|
+
},
|
|
14
|
+
"title": "Words That Moved the World",
|
|
15
|
+
"slides": [
|
|
16
|
+
{
|
|
17
|
+
"layout": "quote-card-wide",
|
|
18
|
+
"topic": "On Creation",
|
|
19
|
+
"quote": "Every child is an artist. The problem is how to remain an artist once we grow up.",
|
|
20
|
+
"author": "Pablo Picasso",
|
|
21
|
+
"role": "Painter & Sculptor",
|
|
22
|
+
"bg": "#faf7f2",
|
|
23
|
+
"ink": "#1a1714",
|
|
24
|
+
"accent": "#c0392b"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"layout": "quote-card-wide",
|
|
28
|
+
"topic": "On Time",
|
|
29
|
+
"quote": "The two most powerful warriors are patience and time.",
|
|
30
|
+
"author": "Leo Tolstoy",
|
|
31
|
+
"role": "War and Peace, 1869",
|
|
32
|
+
"bg": "#f2f5fa",
|
|
33
|
+
"ink": "#141720",
|
|
34
|
+
"accent": "#2c5282"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"layout": "quote-card-wide",
|
|
38
|
+
"topic": "On Design",
|
|
39
|
+
"quote": "Design is not just what it looks like and feels like. Design is how it works.",
|
|
40
|
+
"author": "Steve Jobs",
|
|
41
|
+
"role": "Apple Inc.",
|
|
42
|
+
"bg": "#fafaf8",
|
|
43
|
+
"ink": "#181818",
|
|
44
|
+
"accent": "#2d6a4f"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"layout": "quote-card-wide",
|
|
48
|
+
"topic": "On Courage",
|
|
49
|
+
"quote": "You have power over your mind, not outside events. Realize this, and you will find strength.",
|
|
50
|
+
"author": "Marcus Aurelius",
|
|
51
|
+
"role": "Meditations, 180 AD",
|
|
52
|
+
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Marcus_Aurelius_Metropolitan_Museum.jpg/480px-Marcus_Aurelius_Metropolitan_Museum.jpg",
|
|
53
|
+
"bg": "#f5f0e8",
|
|
54
|
+
"ink": "#1a1510",
|
|
55
|
+
"accent": "#8b6914"
|
|
56
|
+
}
|
|
57
|
+
]
|
|
58
|
+
}
|