@ohos-ports/slides-grab 1.5.0-beta.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.
Files changed (115) hide show
  1. package/LICENSE +21 -0
  2. package/README-ko.md +292 -0
  3. package/README.md +301 -0
  4. package/bin/ohos-postinstall.cjs +118 -0
  5. package/bin/ppt-agent.js +620 -0
  6. package/convert.cjs +20 -0
  7. package/native/@img/sharp-libvips-openharmony-arm64/lib/glib-2.0/include/glibconfig.h +220 -0
  8. package/native/@img/sharp-libvips-openharmony-arm64/lib/index.js +1 -0
  9. package/native/@img/sharp-libvips-openharmony-arm64/lib/libexpat.so +0 -0
  10. package/native/@img/sharp-libvips-openharmony-arm64/lib/libffi.so +0 -0
  11. package/native/@img/sharp-libvips-openharmony-arm64/lib/libjpeg.so +0 -0
  12. package/native/@img/sharp-libvips-openharmony-arm64/lib/libpcre2-8.so.0 +0 -0
  13. package/native/@img/sharp-libvips-openharmony-arm64/lib/libvips-cpp.so.42.20.3 +0 -0
  14. package/native/@img/sharp-libvips-openharmony-arm64/lib/libvips.so.42.20.3 +0 -0
  15. package/native/@img/sharp-libvips-openharmony-arm64/package.json +13 -0
  16. package/native/@img/sharp-openharmony-arm64/lib/sharp-openharmony-arm64.node +0 -0
  17. package/native/@img/sharp-openharmony-arm64/package.json +16 -0
  18. package/package.json +95 -0
  19. package/runtimes/claude-code/agents/design-critic-agent.md +23 -0
  20. package/runtimes/codex/agents/slides-grab-design-critic.md +22 -0
  21. package/scripts/build-viewer.js +444 -0
  22. package/scripts/design-gate.js +258 -0
  23. package/scripts/download-video.js +213 -0
  24. package/scripts/editor-server.js +1167 -0
  25. package/scripts/figma-export.js +169 -0
  26. package/scripts/generate-image.js +116 -0
  27. package/scripts/generate-images.js +164 -0
  28. package/scripts/html2pdf.js +822 -0
  29. package/scripts/html2png.js +246 -0
  30. package/scripts/html2pptx.js +162 -0
  31. package/scripts/import-template.js +86 -0
  32. package/scripts/install-runtime.js +216 -0
  33. package/scripts/render-tldraw.js +44 -0
  34. package/scripts/validate-slides.js +221 -0
  35. package/skills/slides-grab/SKILL.md +65 -0
  36. package/skills/slides-grab/references/presentation-workflow-reference.md +61 -0
  37. package/skills/slides-grab-card-news/SKILL.md +35 -0
  38. package/skills/slides-grab-design/SKILL.md +88 -0
  39. package/skills/slides-grab-design/references/beautiful-slide-defaults.md +88 -0
  40. package/skills/slides-grab-design/references/design-gate.md +349 -0
  41. package/skills/slides-grab-design/references/design-rules.md +76 -0
  42. package/skills/slides-grab-design/references/design-system-full.md +568 -0
  43. package/skills/slides-grab-design/references/detailed-design-rules.md +70 -0
  44. package/skills/slides-grab-export/SKILL.md +55 -0
  45. package/skills/slides-grab-export/references/export-rules.md +27 -0
  46. package/skills/slides-grab-export/references/html2pptx.md +627 -0
  47. package/skills/slides-grab-export/references/ooxml.md +427 -0
  48. package/skills/slides-grab-export/references/pptx-skill-reference.md +189 -0
  49. package/skills/slides-grab-html/SKILL.md +67 -0
  50. package/skills/slides-grab-image/SKILL.md +82 -0
  51. package/skills/slides-grab-plan/SKILL.md +68 -0
  52. package/skills/slides-grab-plan/references/design-md-to-slides-conversion.md +135 -0
  53. package/skills/slides-grab-plan/references/outline-format.md +47 -0
  54. package/skills/slides-grab-plan/references/plan-workflow-reference.md +140 -0
  55. package/src/codex-imagen.js +182 -0
  56. package/src/design-diversity-data.js +6932 -0
  57. package/src/design-gate-report.js +244 -0
  58. package/src/design-gate-state.js +329 -0
  59. package/src/design-import.js +164 -0
  60. package/src/design-md-parser.js +415 -0
  61. package/src/design-styles-data.js +1928 -0
  62. package/src/design-styles.js +209 -0
  63. package/src/editor/codex-edit.js +584 -0
  64. package/src/editor/edit-subprocess.js +170 -0
  65. package/src/editor/editor-codex-prompt.md +50 -0
  66. package/src/editor/editor.html +1785 -0
  67. package/src/editor/js/editor-bbox.js +332 -0
  68. package/src/editor/js/editor-chat.js +56 -0
  69. package/src/editor/js/editor-direct-edit.js +238 -0
  70. package/src/editor/js/editor-dom.js +59 -0
  71. package/src/editor/js/editor-init.js +405 -0
  72. package/src/editor/js/editor-navigation.js +54 -0
  73. package/src/editor/js/editor-select.js +558 -0
  74. package/src/editor/js/editor-send.js +175 -0
  75. package/src/editor/js/editor-sse.js +163 -0
  76. package/src/editor/js/editor-state.js +41 -0
  77. package/src/editor/js/editor-type.js +71 -0
  78. package/src/editor/js/editor-utils.js +167 -0
  79. package/src/editor/js/model-registry.js +37 -0
  80. package/src/editor/screenshot.js +82 -0
  81. package/src/export-resolution.cjs +68 -0
  82. package/src/figma.js +71 -0
  83. package/src/html2pptx-scale.cjs +120 -0
  84. package/src/html2pptx.cjs +1262 -0
  85. package/src/image-contract.js +329 -0
  86. package/src/image-native.js +468 -0
  87. package/src/nano-banana.js +841 -0
  88. package/src/ohos-browser-bridge.cjs +272 -0
  89. package/src/pptx-raster-export.cjs +299 -0
  90. package/src/resolve.js +110 -0
  91. package/src/slide-mode.cjs +72 -0
  92. package/src/template-fidelity.js +267 -0
  93. package/src/template-import.js +505 -0
  94. package/src/template-layout.js +261 -0
  95. package/src/template-pack.js +255 -0
  96. package/src/tldraw/render.js +473 -0
  97. package/src/validation/cli.js +120 -0
  98. package/src/validation/core.js +1023 -0
  99. package/templates/chart.html +121 -0
  100. package/templates/closing.html +54 -0
  101. package/templates/content.html +50 -0
  102. package/templates/contents.html +60 -0
  103. package/templates/cover.html +64 -0
  104. package/templates/custom/.gitkeep +0 -0
  105. package/templates/custom/README.md +7 -0
  106. package/templates/design-styles/README.md +20 -0
  107. package/templates/design-styles/preview.html +4438 -0
  108. package/templates/diagram-tldraw.html +56 -0
  109. package/templates/diagram.html +98 -0
  110. package/templates/quote.html +31 -0
  111. package/templates/section-divider.html +43 -0
  112. package/templates/split-layout.html +43 -0
  113. package/templates/statistics.html +55 -0
  114. package/templates/team.html +49 -0
  115. package/templates/timeline.html +59 -0
package/templates/diagram-tldraw.html ADDED
@@ -0,0 +1,56 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #ffffff;
12
+ color: #111827;
13
+ padding: 34pt 40pt 28pt;
14
+ display: flex;
15
+ flex-direction: column;
16
+ gap: 12pt;
17
+ }
18
+ .diagram-frame {
19
+ flex: 1;
20
+ min-height: 0;
21
+ border: 1pt solid #e5e7eb;
22
+ border-radius: 14pt;
23
+ background: #f8fafc;
24
+ padding: 12pt;
25
+ display: flex;
26
+ align-items: center;
27
+ justify-content: center;
28
+ overflow: hidden;
29
+ }
30
+ .diagram-frame img {
31
+ display: block;
32
+ width: 100%;
33
+ height: 100%;
34
+ object-fit: contain;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body>
39
+ <div style="display: flex; justify-content: space-between; align-items: baseline;">
40
+ <h2 style="font-size: 28pt; font-weight: 700; letter-spacing: -0.01em;">System Diagram</h2>
41
+ <p style="font-size: 10pt; color: #6b7280;">DIAGRAM / TLDRAW</p>
42
+ </div>
43
+
44
+ <p style="font-size: 12pt; color: #4b5563;">
45
+ Render a current-format local .tldr file with slides-grab tldraw, then reference the generated SVG asset below.
46
+ </p>
47
+
48
+ <div class="diagram-frame">
49
+ <img src="./assets/diagram.svg" alt="System architecture diagram" />
50
+ </div>
51
+
52
+ <p style="font-size: 9pt; color: #9ca3af;">
53
+ Example asset path: ./assets/diagram.svg
54
+ </p>
55
+ </body>
56
+ </html>
package/templates/diagram.html ADDED
@@ -0,0 +1,98 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
6
+ <style>
7
+ * { margin: 0; padding: 0; box-sizing: border-box; }
8
+ body {
9
+ width: 720pt;
10
+ height: 405pt;
11
+ font-family: 'Pretendard', sans-serif;
12
+ background: #ffffff;
13
+ padding: 36pt 40pt;
14
+ display: flex;
15
+ flex-direction: column;
16
+ color: #111827;
17
+ }
18
+ .diagram-grid {
19
+ flex: 1;
20
+ min-height: 0;
21
+ display: grid;
22
+ grid-template-columns: 1fr 1fr;
23
+ gap: 14pt;
24
+ margin-top: 18pt;
25
+ }
26
+ .diagram-card {
27
+ border: 1px solid #e5e7eb;
28
+ border-radius: 10pt;
29
+ padding: 10pt;
30
+ display: flex;
31
+ flex-direction: column;
32
+ min-height: 0;
33
+ }
34
+ .diagram-wrap {
35
+ flex: 1;
36
+ min-height: 0;
37
+ overflow: hidden;
38
+ }
39
+ pre.mermaid {
40
+ width: 100%;
41
+ height: 100%;
42
+ font-family: 'Pretendard', sans-serif;
43
+ background: #ffffff;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body>
48
+ <div style="display: flex; justify-content: space-between; align-items: baseline;">
49
+ <h2 style="font-size: 28pt; font-weight: 700; letter-spacing: -0.01em;">Process Diagram</h2>
50
+ <p style="font-size: 10pt; color: #6b7280;">DIAGRAM / MERMAID</p>
51
+ </div>
52
+
53
+ <p style="font-size: 12pt; color: #4b5563; margin-top: 8pt;">
54
+ Flowchart와 sequence diagram을 한 장에 배치하는 템플릿
55
+ </p>
56
+
57
+ <div class="diagram-grid">
58
+ <div class="diagram-card">
59
+ <p style="font-size: 10pt; color: #374151; margin-bottom: 6pt;">Flowchart</p>
60
+ <div class="diagram-wrap">
61
+ <pre class="mermaid">
62
+ flowchart TD
63
+ A[요청 수신] --> B[아웃라인 생성]
64
+ B --> C[디자인 슬라이드 생성]
65
+ C --> D[PPTX 변환]
66
+ D --> E[검토]
67
+ </pre>
68
+ </div>
69
+ </div>
70
+ <div class="diagram-card">
71
+ <p style="font-size: 10pt; color: #374151; margin-bottom: 6pt;">Sequence Diagram</p>
72
+ <div class="diagram-wrap">
73
+ <pre class="mermaid">
74
+ sequenceDiagram
75
+ participant User
76
+ participant Agent
77
+ participant Converter
78
+ User->>Agent: 슬라이드 생성 요청
79
+ Agent->>Converter: HTML 전달
80
+ Converter-->>Agent: PPTX 반환
81
+ Agent-->>User: 결과 전달
82
+ </pre>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ <p style="font-size: 9pt; color: #9ca3af; margin-top: 10pt;">Rendered with Mermaid</p>
88
+
89
+ <script>
90
+ mermaid.initialize({
91
+ startOnLoad: true,
92
+ securityLevel: 'loose',
93
+ theme: 'default',
94
+ fontFamily: 'Pretendard'
95
+ });
96
+ </script>
97
+ </body>
98
+ </html>
package/templates/quote.html ADDED
@@ -0,0 +1,31 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #1a1a1a;
12
+ padding: 64pt;
13
+ display: flex;
14
+ flex-direction: column;
15
+ justify-content: center;
16
+ align-items: center;
17
+ text-align: center;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body>
22
+ <p style="font-size: 48pt; color: #444; margin-bottom: 24pt;">"</p>
23
+ <h2 style="font-size: 28pt; font-weight: 400; color: #ffffff; letter-spacing: -0.01em; line-height: 1.5; max-width: 540pt;">
24
+ The best way to predict the future is to create it.
25
+ </h2>
26
+ <div style="margin-top: 40pt;">
27
+ <p style="font-size: 13pt; font-weight: 500; color: #ffffff;">Peter Drucker</p>
28
+ <p style="font-size: 11pt; color: #666; margin-top: 4pt;">Management Consultant</p>
29
+ </div>
30
+ </body>
31
+ </html>
package/templates/section-divider.html ADDED
@@ -0,0 +1,43 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #1a1a1a;
12
+ padding: 48pt;
13
+ display: flex;
14
+ flex-direction: column;
15
+ justify-content: space-between;
16
+ }
17
+ </style>
18
+ </head>
19
+ <body>
20
+ <!-- 상단 섹션 정보 -->
21
+ <div style="display: flex; justify-content: space-between; align-items: flex-start;">
22
+ <div>
23
+ <p style="display: inline-block; padding: 4pt 10pt; background: #fff; color: #1a1a1a; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</p>
24
+ </div>
25
+ <p style="font-size: 9pt; color: #666;">©2025 YOUR BRAND</p>
26
+ </div>
27
+
28
+ <!-- 메인 타이틀 -->
29
+ <div>
30
+ <h1 style="font-size: 64pt; font-weight: 500; color: #ffffff; letter-spacing: -0.02em; line-height: 1.1;">
31
+ Introduction
32
+ </h1>
33
+ <p style="font-size: 16pt; color: #888; margin-top: 16pt; max-width: 400pt; line-height: 1.6;">
34
+ Brief description of what this section covers and why it matters.
35
+ </p>
36
+ </div>
37
+
38
+ <!-- 페이지 번호 -->
39
+ <div style="display: flex; justify-content: flex-end;">
40
+ <p style="font-size: 10pt; color: #666;">01</p>
41
+ </div>
42
+ </body>
43
+ </html>
package/templates/split-layout.html ADDED
@@ -0,0 +1,43 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #ffffff;
12
+ display: grid;
13
+ grid-template-columns: 1fr 1fr;
14
+ }
15
+ </style>
16
+ </head>
17
+ <body>
18
+ <!-- 이미지 영역 -->
19
+ <div style="background: #e5e5e0; display: flex; align-items: center; justify-content: center; position: relative;">
20
+ <div data-image-placeholder style="width: 100%; height: 100%; border: 1pt dashed #b8b8b0; background: #d9d9d2; display: flex; align-items: center; justify-content: center;">
21
+ <p style="font-size: 11pt; font-weight: 600; letter-spacing: 0.06em; color: #5f5f58; text-transform: uppercase;">Image Placeholder</p>
22
+ </div>
23
+ <p style="position: absolute; bottom: 16pt; left: 16pt; font-size: 9pt; color: #666;">©2025 YOUR BRAND</p>
24
+ </div>
25
+
26
+ <!-- 텍스트 영역 -->
27
+ <div style="padding: 48pt; display: flex; flex-direction: column; justify-content: center;">
28
+ <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600; margin-bottom: 24pt; align-self: flex-start;">FEATURE</p>
29
+ <h2 style="font-size: 32pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 20pt;">
30
+ Transform Your Business
31
+ </h2>
32
+ <p style="font-size: 14pt; color: #666; line-height: 1.7;">
33
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
34
+ </p>
35
+ <div style="margin-top: 32pt; display: flex; align-items: center; gap: 12pt;">
36
+ <p style="font-size: 12pt; font-weight: 500; color: #1a1a1a;">Learn more</p>
37
+ <div style="width: 28pt; height: 28pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
38
+ <p style="font-size: 12pt; color: #1a1a1a;">→</p>
39
+ </div>
40
+ </div>
41
+ </div>
42
+ </body>
43
+ </html>
package/templates/statistics.html ADDED
@@ -0,0 +1,55 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #f5f5f0;
12
+ padding: 40pt 48pt;
13
+ display: flex;
14
+ flex-direction: column;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body>
19
+ <!-- 헤더 -->
20
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
21
+ <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Key Metrics</h2>
22
+ <p style="font-size: 10pt; color: #999;">03</p>
23
+ </div>
24
+
25
+ <!-- 통계 카드 그리드 -->
26
+ <div style="flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24pt;">
27
+ <div style="background: #1a1a1a; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between;">
28
+ <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Revenue Growth</p>
29
+ <div>
30
+ <p style="font-size: 48pt; font-weight: 600; color: #ffffff; letter-spacing: -0.02em;">85%</p>
31
+ <p style="font-size: 11pt; color: #666; margin-top: 8pt;">Year over year</p>
32
+ </div>
33
+ </div>
34
+ <div style="background: #ffffff; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e5e5e0;">
35
+ <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Active Users</p>
36
+ <div>
37
+ <p style="font-size: 48pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.02em;">2.4M</p>
38
+ <p style="font-size: 11pt; color: #888; margin-top: 8pt;">+340K this quarter</p>
39
+ </div>
40
+ </div>
41
+ <div style="background: #ffffff; border-radius: 12pt; padding: 28pt; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e5e5e0;">
42
+ <p style="font-size: 10pt; color: #888; text-transform: uppercase; letter-spacing: 0.05em;">Customer Satisfaction</p>
43
+ <div>
44
+ <p style="font-size: 48pt; font-weight: 600; color: #1a1a1a; letter-spacing: -0.02em;">4.9</p>
45
+ <p style="font-size: 11pt; color: #888; margin-top: 8pt;">Out of 5.0 rating</p>
46
+ </div>
47
+ </div>
48
+ </div>
49
+
50
+ <!-- 푸터 -->
51
+ <div style="display: flex; justify-content: flex-end; padding-top: 16pt;">
52
+ <p style="font-size: 9pt; color: #999;">Source: Internal Analytics 2025</p>
53
+ </div>
54
+ </body>
55
+ </html>
package/templates/team.html ADDED
@@ -0,0 +1,49 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #f5f5f0;
12
+ padding: 40pt 48pt;
13
+ display: flex;
14
+ flex-direction: column;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body>
19
+ <!-- 헤더 -->
20
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
21
+ <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Our Team</h2>
22
+ <p style="font-size: 10pt; color: #999;">05</p>
23
+ </div>
24
+
25
+ <!-- 팀원 그리드 -->
26
+ <div style="flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20pt;">
27
+ <div style="text-align: center;">
28
+ <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
29
+ <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">John Smith</p>
30
+ <p style="font-size: 10pt; color: #888; margin-top: 4pt;">CEO & Founder</p>
31
+ </div>
32
+ <div style="text-align: center;">
33
+ <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
34
+ <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Sarah Johnson</p>
35
+ <p style="font-size: 10pt; color: #888; margin-top: 4pt;">CTO</p>
36
+ </div>
37
+ <div style="text-align: center;">
38
+ <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
39
+ <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Mike Chen</p>
40
+ <p style="font-size: 10pt; color: #888; margin-top: 4pt;">Design Lead</p>
41
+ </div>
42
+ <div style="text-align: center;">
43
+ <div style="width: 100%; aspect-ratio: 1; background: #d0d0c8; border-radius: 8pt; margin-bottom: 12pt;"></div>
44
+ <p style="font-size: 13pt; font-weight: 600; color: #1a1a1a;">Emily Davis</p>
45
+ <p style="font-size: 10pt; color: #888; margin-top: 4pt;">Marketing</p>
46
+ </div>
47
+ </div>
48
+ </body>
49
+ </html>
package/templates/timeline.html ADDED
@@ -0,0 +1,59 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
5
+ <style>
6
+ * { margin: 0; padding: 0; box-sizing: border-box; }
7
+ body {
8
+ width: 720pt;
9
+ height: 405pt;
10
+ font-family: 'Pretendard', sans-serif;
11
+ background: #ffffff;
12
+ padding: 40pt 48pt;
13
+ display: flex;
14
+ flex-direction: column;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body>
19
+ <!-- 헤더 -->
20
+ <div style="margin-bottom: 32pt;">
21
+ <h2 style="font-size: 28pt; font-weight: 600; color: #1a1a1a;">Our Journey</h2>
22
+ </div>
23
+
24
+ <!-- 타임라인 -->
25
+ <div style="flex: 1; display: flex; align-items: center;">
26
+ <div style="display: flex; width: 100%; justify-content: space-between; position: relative;">
27
+ <!-- 연결선 -->
28
+ <div style="position: absolute; top: 12pt; left: 40pt; right: 40pt; height: 2pt; background: #e5e5e0;"></div>
29
+
30
+ <!-- 타임라인 아이템들 -->
31
+ <div style="text-align: center; z-index: 1;">
32
+ <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
33
+ <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2020</p>
34
+ <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Company Founded</p>
35
+ </div>
36
+ <div style="text-align: center; z-index: 1;">
37
+ <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
38
+ <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2021</p>
39
+ <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">First Product Launch</p>
40
+ </div>
41
+ <div style="text-align: center; z-index: 1;">
42
+ <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
43
+ <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2023</p>
44
+ <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Series A Funding</p>
45
+ </div>
46
+ <div style="text-align: center; z-index: 1;">
47
+ <div style="width: 24pt; height: 24pt; background: #1a1a1a; border-radius: 50%; margin: 0 auto 16pt;"></div>
48
+ <p style="font-size: 18pt; font-weight: 600; color: #1a1a1a;">2025</p>
49
+ <p style="font-size: 11pt; color: #888; margin-top: 8pt; max-width: 100pt;">Global Expansion</p>
50
+ </div>
51
+ </div>
52
+ </div>
53
+
54
+ <!-- 푸터 -->
55
+ <div style="display: flex; justify-content: flex-end; padding-top: 16pt;">
56
+ <p style="font-size: 10pt; color: #999;">06</p>
57
+ </div>
58
+ </body>
59
+ </html>