Skip to content

Commit 240192e

Browse files
zhaoxiongfeizhaoxiongfei
committed
feat: 更新示例批量转换工作流
支持本地批量生成示例演示文稿与转换报告，并同步更新示例输入输出。
1 parent 0ffa69d commit 240192e

45 files changed

Lines changed: 15545 additions & 1 deletion

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@deckflow/deckhtml",
3-
"version": "0.6.1",
3+
"version": "0.6.2",
44
"description": "Convert HTML to PPTX or PNG presentations",
55
"main": "dist/index.js",
66
"types": "dist/index.d.ts",
@@ -14,6 +14,7 @@
1414
},
1515
"scripts": {
1616
"build": "tsc",
17+
"convert:samples": "npm run build && node scripts/convert-sample-inputs.mjs",
1718
"build:font-index": "npx tsx src/bin/build-embed-font-index.ts",
1819
"build:fa-eot": "node scripts/build-fa-eot.mjs",
1920
"dev": "tsc --watch",

‎sample/inputs/Breaking News Devastating 7.4 Quake Strikes Colombia.html‎

Lines changed: 315 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,315 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Colombia Earthquake</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400&display=swap" rel="stylesheet">
10+
<style>
11+
/* Global Reset & Viewport Lock */
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
box-sizing: border-box;
16+
font-family: 'Inter', sans-serif;
17+
}
18+
19+
body {
20+
margin: 0;
21+
height: 100vh;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
background-color: #f0f0f0;
26+
-webkit-font-smoothing: antialiased;
27+
}
28+
29+
/* 16:9 Canvas Strict Constraint */
30+
.slide-container {
31+
width: 1280px;
32+
height: 720px;
33+
background-color: #ffffff;
34+
border-radius: 16px;
35+
box-shadow: 0 25px 60px rgba(0,0,0,0.2);
36+
overflow: hidden;
37+
display: flex;
38+
position: relative;
39+
border-top: 8px solid #dc2626;
40+
}
41+
42+
/* Layout Structure: Left Column (Dark/Urgent) */
43+
.col-left {
44+
width: 45%;
45+
background: linear-gradient(145deg, #111827 0%, #1e293b 100%);
46+
padding: 64px 48px;
47+
display: flex;
48+
flex-direction: column;
49+
color: #ffffff;
50+
position: relative;
51+
z-index: 2;
52+
}
53+
54+
/* Layout Structure: Right Column (Light/Data) */
55+
.col-right {
56+
width: 55%;
57+
background: #ffffff;
58+
padding: 64px 56px;
59+
display: flex;
60+
flex-direction: column;
61+
justify-content: space-between;
62+
}
63+
64+
/* Header Area (Left) */
65+
.badge {
66+
background-color: #dc2626;
67+
color: #ffffff;
68+
padding: 8px 16px;
69+
border-radius: 4px;
70+
font-size: 14px;
71+
font-weight: 700;
72+
text-transform: uppercase;
73+
letter-spacing: 2px;
74+
display: inline-flex;
75+
align-items: center;
76+
align-self: flex-start;
77+
margin-bottom: 28px;
78+
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
79+
}
80+
81+
.badge::before {
82+
content: "●";
83+
margin-right: 8px;
84+
font-size: 10px;
85+
animation: pulse 1.5s infinite;
86+
}
87+
88+
@keyframes pulse {
89+
0% { opacity: 1; }
90+
50% { opacity: 0.3; }
91+
100% { opacity: 1; }
92+
}
93+
94+
.main-title {
95+
font-size: 48px;
96+
font-weight: 900;
97+
line-height: 1.15;
98+
color: #f8fafc;
99+
margin-bottom: 24px;
100+
letter-spacing: -1px;
101+
}
102+
103+
.main-title span {
104+
color: #ef4444;
105+
}
106+
107+
.subtitle {
108+
font-size: 20px;
109+
font-weight: 300;
110+
line-height: 1.6;
111+
color: #94a3b8;
112+
margin-bottom: auto;
113+
}
114+
115+
/* Quote Block (Left) */
116+
.quote-block {
117+
background: rgba(220, 38, 38, 0.1);
118+
border-left: 4px solid #dc2626;
119+
padding: 24px 32px;
120+
border-radius: 0 12px 12px 0;
121+
margin-top: 40px;
122+
}
123+
124+
.quote-text {
125+
font-size: 18px;
126+
font-style: italic;
127+
color: #e2e8f0;
128+
line-height: 1.6;
129+
font-weight: 400;
130+
margin-bottom: 12px;
131+
}
132+
133+
.quote-author {
134+
font-size: 14px;
135+
font-weight: 700;
136+
color: #ef4444;
137+
text-transform: uppercase;
138+
letter-spacing: 1px;
139+
}
140+
141+
/* Data Area (Right) */
142+
.data-grid {
143+
display: flex;
144+
gap: 24px;
145+
margin-bottom: 48px;
146+
}
147+
148+
.data-card {
149+
flex: 1;
150+
background: #f8fafc;
151+
border: 1px solid #e2e8f0;
152+
padding: 24px 20px;
153+
border-radius: 12px;
154+
border-bottom: 4px solid #dc2626;
155+
text-align: center;
156+
box-shadow: 0 10px 25px rgba(0,0,0,0.03);
157+
}
158+
159+
.data-value {
160+
font-size: 56px;
161+
font-weight: 900;
162+
color: #0f172a;
163+
line-height: 1;
164+
margin-bottom: 8px;
165+
letter-spacing: -2px;
166+
}
167+
168+
.data-value span {
169+
font-size: 24px;
170+
color: #dc2626;
171+
margin-left: 2px;
172+
}
173+
174+
.data-label {
175+
font-size: 13px;
176+
font-weight: 700;
177+
color: #64748b;
178+
text-transform: uppercase;
179+
letter-spacing: 1px;
180+
}
181+
182+
/* Core Facts Area (Right) */
183+
.facts-list {
184+
display: flex;
185+
flex-direction: column;
186+
gap: 24px;
187+
}
188+
189+
.fact-item {
190+
display: flex;
191+
align-items: flex-start;
192+
gap: 20px;
193+
padding: 20px;
194+
background: #ffffff;
195+
border-radius: 12px;
196+
border: 1px solid #f1f5f9;
197+
box-shadow: 0 4px 15px rgba(0,0,0,0.02);
198+
}
199+
200+
.fact-icon {
201+
width: 48px;
202+
height: 48px;
203+
background: #fee2e2;
204+
color: #dc2626;
205+
border-radius: 12px;
206+
display: flex;
207+
justify-content: center;
208+
align-items: center;
209+
font-size: 24px;
210+
flex-shrink: 0;
211+
}
212+
213+
.fact-content h3 {
214+
font-size: 18px;
215+
font-weight: 800;
216+
color: #0f172a;
217+
margin-bottom: 6px;
218+
text-transform: uppercase;
219+
letter-spacing: 0.5px;
220+
}
221+
222+
.fact-content p {
223+
font-size: 16px;
224+
font-weight: 400;
225+
color: #475569;
226+
line-height: 1.5;
227+
}
228+
229+
/* Decorative Background Pattern for Left Column */
230+
.bg-pattern {
231+
position: absolute;
232+
top: 0;
233+
left: 0;
234+
width: 100%;
235+
height: 100%;
236+
background-image: radial-gradient(#ef4444 1px, transparent 1px);
237+
background-size: 24px 24px;
238+
opacity: 0.05;
239+
z-index: -1;
240+
}
241+
</style>
242+
</head>
243+
<body>
244+
245+
<div class="slide-container">
246+
247+
<!-- Left Column: Context & Urgency -->
248+
<div class="col-left">
249+
<div class="bg-pattern"></div>
250+
251+
<div class="badge">Breaking News</div>
252+
253+
<h1 class="main-title">Devastating <span>7.4</span> Quake Strikes Colombia</h1>
254+
255+
<p class="subtitle">A massive seismic event hit western Colombia early Monday, prompting the government to issue an immediate declaration of a national disaster.</p>
256+
257+
<div class="quote-block">
258+
<p class="quote-text">"The Colombian government has declared a state of national disaster to respond to the impact of the earthquake and rapidly deploy rescue operations."</p>
259+
<div class="quote-author">— President Abelardo de la Espriella</div>
260+
</div>
261+
</div>
262+
263+
<!-- Right Column: Data & Facts -->
264+
<div class="col-right">
265+
266+
<!-- Key Data Highlights -->
267+
<div class="data-grid">
268+
<div class="data-card">
269+
<div class="data-value">111</div>
270+
<div class="data-label">Fatalities</div>
271+
</div>
272+
<div class="data-card">
273+
<div class="data-value">87</div>
274+
<div class="data-label">Injured</div>
275+
</div>
276+
<div class="data-card">
277+
<div class="data-value">1,575</div>
278+
<div class="data-label">Homes Damaged</div>
279+
</div>
280+
</div>
281+
282+
<!-- Core Facts / Status Updates -->
283+
<div class="facts-list">
284+
285+
<div class="fact-item">
286+
<div class="fact-icon">📍</div>
287+
<div class="fact-content">
288+
<h3>Epicenter Details</h3>
289+
<p>The quake struck at 7:34 a.m. near San Jose del Palmar in the Choco department, originating at a severe depth of 96 kilometers.</p>
290+
</div>
291+
</div>
292+
293+
<div class="fact-item">
294+
<div class="fact-icon">⚠️</div>
295+
<div class="fact-content">
296+
<h3>National Disaster Status</h3>
297+
<p>Emergency protocols have been activated nationwide as rescue teams search collapsed structures across multiple cities.</p>
298+
</div>
299+
</div>
300+
301+
<div class="fact-item">
302+
<div class="fact-icon">✈️</div>
303+
<div class="fact-content">
304+
<h3>Infrastructure Halt</h3>
305+
<p>Commercial flight operations have been fully suspended at six regional airports due to critical infrastructure damage.</p>
306+
</div>
307+
</div>
308+
309+
</div>
310+
311+
</div>
312+
</div>
313+
314+
</body>
315+
</html>

0 commit comments

Comments
 (0)