@blockspoon/cert-badge-renderer 1.0.3 → 1.0.5

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 (30) hide show
  1. package/README.md +13 -13
  2. package/dist/interface/index.d.ts +1 -3
  3. package/dist/templates/badges/BadgeType1.js +21 -3
  4. package/dist/templates/badges/BadgeType15.js +13 -12
  5. package/dist/templates/badges/BadgeType21.js +41 -39
  6. package/dist/templates/badges/BadgeType35.js +7 -13
  7. package/dist/templates/badges/BadgeType63.d.ts +1 -1
  8. package/dist/templates/badges/BadgeType63.js +33 -42
  9. package/dist/templates/badges/BadgeType7.js +37 -16
  10. package/dist/templates/svgTemplate.js +8 -83
  11. package/dist/utils/generateAchievementHTML.d.ts +1 -1
  12. package/dist/utils/generateAchievementHTML.js +9 -7
  13. package/dist/utils/getBindingValue.js +7 -8
  14. package/package.json +1 -1
  15. package/src/browser/index.ts +1 -0
  16. package/src/interface/index.ts +1 -3
  17. package/src/templates/badges/BadgeType1.ts +22 -4
  18. package/src/templates/badges/BadgeType15.ts +13 -12
  19. package/src/templates/badges/BadgeType21.ts +41 -39
  20. package/src/templates/badges/BadgeType35.ts +7 -13
  21. package/src/templates/badges/BadgeType63.ts +37 -43
  22. package/src/templates/badges/BadgeType7.ts +38 -17
  23. package/src/templates/svgTemplate.ts +8 -102
  24. package/src/utils/generateAchievementHTML.ts +9 -6
  25. package/src/utils/generateDesignHTML.ts +12 -44
  26. package/src/utils/getBindingValue.ts +13 -15
  27. package/test/certificate.html +294 -236
  28. package/test/certificate.png +0 -0
  29. package/test/certificate_base64.png +0 -0
  30. package/test/test.js +203 -554
package/test/certificate.html CHANGED
@@ -1,66 +1,66 @@
1
1
 
2
- <!DOCTYPE html>
3
- <html lang="ko">
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Certificate</title>
8
- <style>
9
- @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
10
- * {
11
- margin: 0;
12
- padding: 0;
13
- box-sizing: border-box;
14
- }
15
- body {
16
- font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
17
- -webkit-font-smoothing: antialiased;
18
- -moz-osx-font-smoothing: grayscale;
19
- }
20
- </style>
21
- </head>
22
- <body style="
2
+ <!DOCTYPE html>
3
+ <html lang="ko">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Certificate</title>
8
+ <style>
9
+ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+ body {
16
+ font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
17
+ -webkit-font-smoothing: antialiased;
18
+ -moz-osx-font-smoothing: grayscale;
19
+ }
20
+ </style>
21
+ </head>
22
+ <body style="
23
+ width: 300px;
24
+ height: 300px;
25
+ overflow: hidden;
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ ">
30
+ <div
31
+ style="
23
32
  width: 300px;
24
33
  height: 300px;
25
- overflow: hidden;
26
- display: flex;
27
- align-items: center;
28
- justify-content: center;
29
- ">
30
- <div
31
- style="
32
- width: 300px;
33
- height: 300px;
34
- aspect-ratio: 1;
35
-
36
- "
37
- >
38
- <div style="
39
- position: relative;
40
- width: 600px;
41
- height: 600px;
42
- overflow: hidden;
43
- transform: scale(0.5);
44
- transform-origin: top left;
45
- ">
46
- <div style="
47
- position: absolute;
48
- top: 3px;
49
- left: 31.00006103515625px;
50
- width: 538px;
51
- height: 594px;
52
- isolation: isolate;
53
- display: flex;
54
- align-items: center;
55
- justify-content: center;
56
- will-change: transform, contents;
57
- transform: translateZ(0);
58
- backface-visibility: hidden;
59
- ">
34
+ aspect-ratio: 1;
35
+
36
+ "
37
+ >
38
+ <div style="
39
+ position: relative;
40
+ width: 600px;
41
+ height: 600px;
42
+ overflow: hidden;
43
+ transform: scale(0.5);
44
+ transform-origin: top left;
45
+ ">
46
+ <div style="
47
+ position: absolute;
48
+ top: 44px;
49
+ left: 48px;
50
+ width: 500px;
51
+ height: 530px;
52
+ isolation: isolate;
53
+ display: flex;
54
+ align-items: center;
55
+ justify-content: center;
56
+ will-change: transform, contents;
57
+ transform: translateZ(0);
58
+ backface-visibility: hidden;
59
+ ">
60
60
  <svg
61
61
  width="100%"
62
62
  height="100%"
63
- viewBox="0 0 528 528"
63
+ viewBox="0 0 537 537"
64
64
  fill="none"
65
65
  xmlns="http://www.w3.org/2000/svg"
66
66
  preserveAspectRatio="xMidYMid meet"
@@ -72,165 +72,74 @@
72
72
  display: block;
73
73
  "
74
74
  >
75
- <g filter="url(#filter0_d_2407_140)">
76
- <path
77
- d="M12 264C12 124.824 124.824 12 264 12C403.176 12 516 124.824 516 264V416C516 471.228 471.228 516 416 516H112C56.7715 516 12 471.228 12 416V264Z"
78
- fill="white"
79
- />
80
- </g>
75
+ <defs>
76
+ <clipPath id="clip0_linear_iabotl8v4">
77
+ <path
78
+ d="M23 347.403H514V362.403C514 446.35 445.947 514.403 362 514.403H55C37.3269 514.403 23 500.076 23 482.403V347.403Z"
79
+ fill="green"
80
+ />
81
+ </clipPath>
82
+ </defs>
81
83
  <path
82
- d="M32 264C32 135.87 135.87 32 264 32C392.13 32 496 135.87 496 264V403.2C496 454.452 454.452 496 403.2 496H124.8C73.548 496 32 454.452 32 403.2V264Z"
83
- fill="#322899"
84
+ d="M6 40.403C6 21.6253 21.2223 6.40302 40 6.40302H377C462.052 6.40302 531 75.3512 531 160.403V377.403C531 462.455 462.052 531.403 377 531.403H40C21.2223 531.403 6 516.181 6 497.403V40.403Z"
85
+ fill="#FF1B64"
86
+ stroke="#FF1B64"
87
+ strokeWidth="12"
84
88
  />
85
89
  <path
86
- d="M52 264C52 146.916 146.916 52 264 52C381.084 52 476 146.916 476 264V391.2C476 438.034 438.034 476 391.2 476H136.8C89.9663 476 52 438.034 52 391.2V264Z"
87
- fill="#7368E8"
90
+ d="M15 53.403C15 32.4162 32.0132 15.403 53 15.403H364C451.261 15.403 522 86.142 522 173.403V364.403C522 451.664 451.261 522.403 364 522.403H53C32.0132 522.403 15 505.39 15 484.403V53.403Z"
91
+ stroke="green"
92
+ strokeWidth="4"
88
93
  />
89
- <mask
90
- id="mask0_2407_140"
91
- style="mask-type:alpha"
92
- maskUnits="userSpaceOnUse"
93
- x="52"
94
- y="52"
95
- width="424"
96
- height="424"
97
- >
94
+ <path
95
+ d="M23 55.403C23 37.7299 37.3269 23.403 55 23.403H362C445.947 23.403 514 91.4557 514 175.403V362.403C514 446.35 445.947 514.403 362 514.403H55C37.3269 514.403 23 500.076 23 482.403V55.403Z"
96
+ fill="green"
97
+ />
98
+ <rect
99
+ x="23"
100
+ y="175.65"
101
+ width="439"
102
+ height="3.50499"
103
+ fill="#FF1B64"
104
+ />
105
+ <g clip-path="url(#clip0_linear_iabotl8v4)">
98
106
  <path
99
- d="M52 264C52 146.916 146.916 52 264 52C381.084 52 476 146.916 476 264V391.2C476 438.034 438.034 476 391.2 476H136.8C89.9663 476 52 438.034 52 391.2V264Z"
100
- fill="white"
101
- />
102
- </mask>
103
- <g mask="url(#mask0_2407_140)">
104
- <ellipse cx="81" cy="397.5" rx="105" ry="84.5" fill="white" />
105
- <ellipse cx="447.012" cy="397.5" rx="106" ry="84.5" fill="white" />
106
- <ellipse cx="413" cy="347.5" rx="51" ry="57.5" fill="white" />
107
- <ellipse cx="113.5" cy="343.5" rx="48.5" ry="57.5" fill="white" />
108
- <ellipse
109
- cx="41.6091"
110
- cy="58.9546"
111
- rx="41.6091"
112
- ry="58.9546"
113
- transform="matrix(0.916188 0.400749 -0.476857 0.878981 143.273 299.098)"
114
- fill="white"
115
- />
116
- <ellipse
117
- cx="36.2033"
118
- cy="58.9546"
119
- rx="36.2033"
120
- ry="58.9546"
121
- transform="matrix(-0.916188 0.400749 0.476857 0.878981 383.719 299.312)"
122
- fill="white"
123
- />
124
- <ellipse
125
- cx="47.9925"
126
- cy="58.9546"
127
- rx="47.9925"
128
- ry="58.9546"
129
- transform="matrix(0.916188 0.400749 -0.476857 0.878981 178.953 318.684)"
130
- fill="white"
107
+ d="M350.872 379.324C406.16 342.877 482.659 344.955 513.997 350.55V514.403H21.836L21.8388 429.929C22.1044 432.831 32.4456 440.889 68.0071 452.059C113.812 466.446 281.762 424.883 350.872 379.324Z"
108
+ fill="#FF1B64"
131
109
  />
132
- <ellipse
133
- cx="47.9925"
134
- cy="58.9546"
135
- rx="47.9925"
136
- ry="58.9546"
137
- transform="matrix(-0.916188 0.400749 0.476857 0.878981 357.941 314.566)"
138
- fill="white"
110
+ <path
111
+ fillRule="evenodd"
112
+ clipRule="evenodd"
113
+ d="M514.104 350.55C482.766 344.955 406.267 342.877 350.979 379.324C290.856 418.959 147.138 502.753 80.619 514.403H80.6172C80.622 514.403 80.619 514.403 80.619 514.403H514.104V350.55Z"
114
+ fill="#FF91B2"
139
115
  />
140
116
  <path
141
- d="M300 344.5C280.5 360 249.019 356.346 234.54 346.058L67 485.5L461.5 491.5L300 344.5Z"
142
- fill="white"
117
+ fillRule="evenodd"
118
+ clipRule="evenodd"
119
+ d="M514.101 425.679C479.612 419.218 438.775 419.581 393.111 430.105C380.412 433.506 341.625 445.676 288.07 467.153C225.943 492.068 189.771 503.867 128.328 514.403L514.101 514.403V425.679Z"
120
+ fill="yellow"
143
121
  />
144
122
  </g>
145
- <path
146
- d="M143.58 324.96C131.116 308.011 110.966 311.251 102.449 314.99C126.878 314.99 136.725 327.037 138.594 333.06C150.061 329.072 164.976 334.722 171 338.045C162.525 324.087 149.188 323.506 143.58 324.96Z"
147
- fill="black"
148
- fill-opacity="0.11"
149
- />
150
- <path
151
- d="M85 353C91.8551 347.807 108.681 339.167 121.145 346.146C113.251 339.499 94.971 331.564 85 353Z"
152
- fill="black"
153
- fill-opacity="0.11"
154
- />
155
- <path
156
- d="M384.42 324.96C396.884 308.011 417.034 311.251 425.551 314.99C401.122 314.99 391.275 327.037 389.406 333.06C377.939 329.072 363.024 334.722 357 338.045C365.475 324.087 378.812 323.506 384.42 324.96Z"
157
- fill="black"
158
- fill-opacity="0.11"
159
- />
160
- <path
161
- d="M443 353C436.145 347.807 419.319 339.167 406.855 346.146C414.749 339.499 433.029 331.564 443 353Z"
162
- fill="black"
163
- fill-opacity="0.11"
164
- />
165
- <circle cx="410" cy="239" r="43" fill="white" />
166
- <circle cx="410" cy="239" r="40" fill="#7368E8" />
167
- <circle cx="410" cy="239" r="38" fill="white" />
168
- <path
169
- fill-rule="evenodd"
170
- clip-rule="evenodd"
171
- d="M143.2 248.641C140.466 249.502 137.541 249.969 134.5 249.969C119.312 249.969 107 238.328 107 223.969C107 216.998 109.901 210.669 114.624 206C98.6943 206.719 86 219.862 86 235.969C86 252.538 99.4315 265.969 116 265.969C128.04 265.969 138.424 258.876 143.2 248.641Z"
172
- fill="white"
173
- />
174
- <circle cx="139" cy="202" r="4" fill="white" />
175
- <circle cx="67" cy="291" r="3" fill="white" />
176
- <circle cx="362" cy="293" r="3" fill="white" />
177
- <circle cx="465" cy="268" r="4" fill="white" />
178
- <defs>
179
- <filter
180
- id="filter0_d_2407_140"
181
- x="0"
182
- y="0"
183
- width="528"
184
- height="528"
185
- filterUnits="userSpaceOnUse"
186
- color-interpolation-filters="sRGB"
187
- >
188
- <feFlood flood-opacity="0" result="BackgroundImageFix" />
189
- <feColorMatrix
190
- in="SourceAlpha"
191
- type="matrix"
192
- values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
193
- result="hardAlpha"
194
- />
195
- <feOffset />
196
- <feGaussianBlur stdDeviation="6" />
197
- <feComposite in2="hardAlpha" operator="out" />
198
- <feColorMatrix
199
- type="matrix"
200
- values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
201
- />
202
- <feBlend
203
- mode="normal"
204
- in2="BackgroundImageFix"
205
- result="effect1_dropShadow_2407_140"
206
- />
207
- <feBlend
208
- mode="normal"
209
- in="SourceGraphic"
210
- in2="effect1_dropShadow_2407_140"
211
- result="shape"
212
- />
213
- </filter>
214
- </defs>
123
+
215
124
  </svg>
216
125
  </div><div style="
217
- position: absolute;
218
- top: 134px;
219
- left: 188px;
220
- width: 240px;
221
- height: 222px;
222
- isolation: isolate;
223
- display: flex;
224
- align-items: center;
225
- justify-content: center;
226
- will-change: transform, contents;
227
- transform: translateZ(0);
228
- backface-visibility: hidden;
229
- ">
126
+ position: absolute;
127
+ top: 195px;
128
+ left: 45px;
129
+ width: 510px;
130
+ height: 210px;
131
+ isolation: isolate;
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: center;
135
+ will-change: transform, contents;
136
+ transform: translateZ(0);
137
+ backface-visibility: hidden;
138
+ ">
230
139
  <svg
231
140
  width="100%"
232
141
  height="100%"
233
- viewBox="0 0 168 130"
142
+ viewBox="0 0 502 199"
234
143
  fill="none"
235
144
  xmlns="http://www.w3.org/2000/svg"
236
145
  preserveAspectRatio="xMidYMid meet"
@@ -245,46 +154,195 @@
245
154
  display: block;
246
155
  "
247
156
  >
157
+ <path d="M26.1447 0H495V170L11 35.5L26.1447 0Z" fill="white" />
248
158
  <path
249
- d="M69.4104 4.62765L11.0048 33.1152C-13.088 44.8024 11.0048 56.8549 11.0048 56.8549V81.325C2.97475 85.7081 4.06985 94.4735 10.2754 100.317L0.419504 129.535H36.923L27.4314 101.778L28.5272 101.048C45.3188 135.014 111.39 140.857 138.403 102.874C138.403 102.874 139.236 101.246 139.498 100.317C139.846 99.0816 139.863 96.5515 139.863 96.5515V66.3512L162.495 54.2987C167.606 51.3774 169.796 40.0549 163.224 36.037L100.438 4.62765C88.1383 -1.54443 81.3913 -1.54067 69.4104 4.62765Z"
250
- fill="#ffffff"
159
+ fill-rule="evenodd"
160
+ clip-rule="evenodd"
161
+ d="M14.8398 6C7.10786 6 0.839844 12.268 0.839844 20V162C0.839844 162.03 0.839939 162.06 0.840128 162.09V182.635C1.93276 181.298 6.78412 176.901 17.4946 176H484.494C495.204 176.901 500.056 181.298 501.148 182.635V162.592C501.157 162.396 501.161 162.198 501.161 162V20C501.161 12.268 494.893 6 487.161 6H14.8398Z"
162
+ fill="url(#paint0_linear_1t8r3zjsx)"
251
163
  />
252
164
  <path
253
- d="M10.5997 42.8066L78.72 10.0214L87.827 8.56433L159.59 42.8066V46.0851L133.726 60.2921V99.9985L119.884 111.291L87.827 121.855L65.6059 119.67L42.6563 106.556L35.735 99.9985L34.2778 60.2921L9.87109 46.8137L10.5997 42.8066Z"
254
- fill="#322899"
165
+ d="M0.839844 25.1651C5.05834 19.9148 8.77052 18.8231 17.0894 18.9453H487.107C494.077 19.6574 497.205 21.2604 501.16 27.3069V167.679C496.025 163.48 489.896 162.805 476.177 162.941H14.0422C7.88738 163.423 5.08344 164.87 0.839844 168.689V25.1651Z"
166
+ fill="white"
167
+ fill-opacity="0.3"
255
168
  />
169
+ <mask
170
+ id="mask0_2481_282"
171
+ style="mask-type: alpha"
172
+ maskUnits="userSpaceOnUse"
173
+ x="0"
174
+ y="6"
175
+ width="502"
176
+ height="170"
177
+ >
178
+ <path
179
+ d="M0.839844 20C0.839844 12.268 7.10786 6 14.8398 6H487.161C494.893 6 501.161 12.268 501.161 20V176H0.839844V20Z"
180
+ fill="url(#paint0_linear_1t8r3zjsx)"
181
+ />
182
+ </mask>
183
+ <g mask="url(#mask0_2481_282)">
184
+ <path
185
+ d="M-0.107422 24.8841C4.22475 19.5386 7.41907 18.1694 14.1601 18.0085L483.561 18.0085C492.634 17.8688 496.914 19.3999 502.109 27"
186
+ stroke="white"
187
+ stroke-width="2"
188
+ stroke-linecap="round"
189
+ />
190
+ <path
191
+ d="M-0.751953 173.805C-0.125749 168.939 7.4186 163.83 14.1596 163.991L483.561 163.991C492.634 164.13 502.108 166.022 502.108 172.533"
192
+ stroke="white"
193
+ stroke-width="2"
194
+ stroke-linecap="round"
195
+ />
196
+ </g>
256
197
  <path
257
- d="M85.9602 124.404H81.677C81.1294 124.321 80.5817 124.227 80.031 124.16C76.4974 123.729 72.9178 123.534 69.4393 122.838C55.0874 119.963 43.0363 113.035 33.3011 102.124C32.0468 100.717 31.4563 99.2616 31.4685 97.3358C31.5481 86.785 31.3706 76.2282 31.594 65.6806C31.6582 62.7079 30.9148 61.0416 28.0481 60.0954C26.0135 59.424 24.1473 58.2581 22.0149 57.2174V58.8716C22.0149 66.3276 22.0302 73.7866 21.9965 81.2426C21.9904 82.2528 22.2413 82.8144 23.208 83.3638C28.9567 86.6202 29.024 94.8575 23.3304 98.1842C22.33 98.7702 22.2994 99.2493 22.6084 100.205C25.1936 108.259 27.7299 116.331 30.2815 124.398H7.63855C10.1748 116.38 12.6958 108.36 15.2657 100.351C15.6053 99.2982 15.5533 98.7519 14.4733 98.0774C8.8715 94.592 9.02754 86.6141 14.7579 83.3485C15.7491 82.7839 15.9235 82.1796 15.9205 81.1938C15.8929 72.7734 15.8654 64.353 15.9449 55.9325C15.9572 54.5469 15.5288 53.8969 14.2806 53.3475C10.701 51.7696 7.01136 50.2528 5.5 46.1509V43.7154C6.48514 40.6024 8.8715 38.936 11.6801 37.6054C32.316 27.8329 52.9244 17.9933 73.5695 8.23307C80.9152 4.75991 88.3466 4.78127 95.677 8.33378C115.726 18.0483 135.743 27.8207 155.798 37.5169C158.753 38.9452 161.226 40.697 162.14 44.0267V46.157C161.118 49.0228 158.952 50.7167 156.291 51.9924C150.056 54.9864 143.885 58.1086 137.628 61.0507C136.15 61.7435 135.737 62.5767 135.75 64.1424C135.823 75.2516 135.756 86.3608 135.82 97.467C135.829 99.2738 135.275 100.672 134.101 101.999C130.579 105.976 126.697 109.544 122.309 112.553C113.74 118.428 104.314 122.154 93.9851 123.534C91.3204 123.891 88.6372 124.114 85.9633 124.398L85.9602 124.404ZM11.1018 44.8386C11.4567 45.3086 11.5638 45.5955 11.7657 45.6962C15.3208 47.4816 18.4996 50.3901 23.0092 49.3097C24.1381 49.0381 25.3344 49.0351 26.4969 48.8977C36.4615 47.7288 46.4292 46.5568 56.3938 45.3849C65.2968 44.338 74.1997 43.2729 83.1027 42.2474C84.9996 42.0277 86.3396 43.0226 86.5568 44.6646C86.7618 46.212 85.7338 47.4389 83.8645 47.7257C81.9003 48.0248 79.924 48.2324 77.9506 48.4613C67.1233 49.7248 56.2959 50.9853 45.4716 52.2488C40.1818 52.8653 34.889 53.4879 29.1984 54.1563C29.9633 54.5683 30.3794 54.8155 30.8138 55.0261C45.8663 62.2135 60.9065 69.4284 75.9803 76.5701C81.5913 79.2283 87.3064 79.2741 92.9296 76.5639C106.697 69.9259 120.44 63.242 134.186 56.5643C140.59 53.4543 146.978 50.3108 153.372 47.1794C153.92 46.9109 154.473 46.6453 154.987 46.3218C156.731 45.2231 156.722 44.5639 154.963 43.572C154.476 43.2973 153.969 43.0623 153.464 42.8182C133.479 33.0976 113.489 23.3892 93.5109 13.6534C87.5756 10.7601 81.6617 10.7449 75.7203 13.5801C72.3243 15.2007 68.9314 16.8275 65.5354 18.4481C48.3291 26.6701 31.1198 34.8891 13.9226 43.1295C12.9559 43.5934 12.0809 44.2404 11.1018 44.8416V44.8386ZM37.5966 64.417C37.5048 64.765 37.4344 64.9054 37.4344 65.0427C37.4253 75.7948 37.413 86.55 37.4528 97.3022C37.4528 97.8363 37.774 98.5047 38.1687 98.877C40.9712 101.529 43.6084 104.416 46.7076 106.678C62.7085 118.352 80.5175 121.343 99.6298 116.752C111.271 113.957 121.119 107.941 129.132 99.0479C129.643 98.4802 129.979 97.5433 129.983 96.7742C130.038 86.5775 130.019 76.3839 130.016 66.1872C130.016 65.7141 129.961 65.238 129.924 64.6246C129.212 64.9481 128.658 65.18 128.119 65.4425C117.102 70.8079 106.101 76.2038 95.0651 81.5356C88.0223 84.9386 80.8846 84.7982 73.8204 81.6302C68.858 79.4023 63.9843 76.9729 59.0739 74.6351C51.9607 71.2504 44.8444 67.8627 37.5997 64.414L37.5966 64.417Z"
258
- fill="#7468e8"
259
- fill={subColor}
198
+ d="M29.8435 198.084C15.0673 196.321 0.0959688 190.089 0.855885 182.644C4.09354 175.31 11.1137 175.994 21 176.034L25.5 188.034L29.8435 198.084Z"
199
+ fill="#FF1B64"
260
200
  />
201
+ <path
202
+ d="M29.8435 198.084C15.0673 196.321 0.0959688 190.089 0.855885 182.644C4.09354 175.31 11.1137 175.994 21 176.034L25.5 188.034L29.8435 198.084Z"
203
+ fill="black"
204
+ fill-opacity="0.4"
205
+ />
206
+ <path
207
+ d="M472 198.084C486.776 196.321 501.748 190.089 500.988 182.644C497.75 175.31 490.73 175.994 480.844 176.034L476.344 188.034L472 198.084Z"
208
+ fill="#FF1B64"
209
+ />
210
+ <path
211
+ d="M472 198.084C486.776 196.321 501.748 190.089 500.988 182.644C497.75 175.31 490.73 175.994 480.844 176.034L476.344 188.034L472 198.084Z"
212
+ fill="black"
213
+ fill-opacity="0.4"
214
+ />
215
+ <defs>
216
+ <linearGradient
217
+ id="paint0_linear_1t8r3zjsx"
218
+ x1="6.9991"
219
+ y1="14"
220
+ x2="505.119"
221
+ y2="151.122"
222
+ gradientUnits="userSpaceOnUse"
223
+ >
224
+ <stop stop-color="#FF1B64" />
225
+ <stop offset="1" stop-color="#FF91B2" />
226
+ </linearGradient>
227
+ <linearGradient
228
+ id="paint1_linear_tne5wt5eb"
229
+ x1="6.9991"
230
+ y1="14"
231
+ x2="505.119"
232
+ y2="151.122"
233
+ gradientUnits="userSpaceOnUse"
234
+ >
235
+ <stop stop-color="#FF1B64" />
236
+ <stop offset="1" stop-color="#FF91B2" />
237
+ </linearGradient>
238
+ </defs>
261
239
  </svg>
262
240
  </div><div style="
263
- position: absolute;
264
- top: 122px;
265
- left: 135px;
266
- width: 332px;
267
- height: 50px;
268
- background: transparent;
269
- font-size: 16px;
270
- font-weight: 600;
271
- font-style: normal;
272
- text-decoration: none;
273
- text-align: center;
274
- font-family: Pretendard, sans-serif;
275
- color: white;
276
- border: none;
277
- padding: "0";
278
- display: flex;
279
- align-items: start;
280
- justify-content: center;
281
- padding-left: "0";
282
- padding-right: "0";
283
- word-break: break-word;
284
- white-space: pre-wrap;
285
- ">· CERTIFICATE of COMPLETION ·</div>
286
- </div>
287
- </div>
288
- </body>
289
- </html>
290
-
241
+ position: absolute;
242
+ top: 405px;
243
+ left: 135px;
244
+ width: 335px;
245
+ height: 50px;
246
+ background: transparent;
247
+ font-size: 28px;
248
+ font-weight: 700;
249
+ font-style: normal;
250
+ text-decoration: none;
251
+ text-align: center;
252
+ font-family: Pretendard, sans-serif;
253
+ color: black;
254
+ border: none;
255
+ padding: 0;
256
+ display: flex;
257
+ align-items: start;
258
+ justify-content: center;
259
+ padding-left: "0";
260
+ padding-right: "0";
261
+ word-break: break-word;
262
+ white-space: pre-wrap;
263
+ ">미세먼지 그만</div><div style="
264
+ position: absolute;
265
+ top: 86px;
266
+ left: 423px;
267
+ width: 90px;
268
+ height: 90px;
269
+ background: transparent;
270
+ font-size: 16px;
271
+ font-weight: 400;
272
+ font-style: normal;
273
+ text-decoration: none;
274
+ text-align: center;
275
+ font-family: Pretendard, sans-serif;
276
+ color: black;
277
+ border: none;
278
+ padding: 0;
279
+ display: flex;
280
+ align-items: start;
281
+ justify-content: center;
282
+ padding-left: "0";
283
+ padding-right: "0";
284
+ word-break: break-word;
285
+ white-space: pre-wrap;
286
+ "><img
287
+ src="https://ufcglnoegwgklehhpzlj.supabase.co/storage/v1/object/public/blockspoon_images/uploads/club/symbol/8a4656a6-eda5-4356-8240-155e70982e0e"
288
+ alt="Uploaded"
289
+ style="
290
+ width: 100%;
291
+ height: 100%;
292
+ max-width: 100%;
293
+ max-height: 100%;
294
+ object-fit: contain;
295
+ align-self: center;
296
+ "
297
+ /></div><div style="
298
+ position: absolute;
299
+ top: 172px;
300
+ left: 162px;
301
+ width: 279px;
302
+ height: 38px;
303
+ background: transparent;
304
+ font-size: 16px;
305
+ font-weight: 600;
306
+ font-style: normal;
307
+ text-decoration: none;
308
+ text-align: center;
309
+ font-family: Pretendard, sans-serif;
310
+ color: black;
311
+ border: none;
312
+ padding: 0;
313
+ display: flex;
314
+ align-items: start;
315
+ justify-content: center;
316
+ padding-left: "0";
317
+ padding-right: "0";
318
+ word-break: break-word;
319
+ white-space: pre-wrap;
320
+ ">· CERTIFICATE of COMPLETION ·</div><div style="
321
+ position: absolute;
322
+ top: 240px;
323
+ left: 125px;
324
+ width: 360px;
325
+ height: 120px;
326
+ background: transparent;
327
+ font-size: 48px;
328
+ font-weight: 700;
329
+ font-style: normal;
330
+ text-decoration: none;
331
+ text-align: center;
332
+ font-family: Pretendard, sans-serif;
333
+ color: black;
334
+ border: none;
335
+ padding: 0;
336
+ display: flex;
337
+ align-items: start;
338
+ justify-content: center;
339
+ padding-left: "0";
340
+ padding-right: "0";
341
+ word-break: break-word;
342
+ white-space: pre-wrap;
343
+ ">OpenApi 테스트 인증서</div>
344
+ </div>
345
+ </div>
346
+ </body>
347
+ </html>
348
+
package/test/certificate.png CHANGED
Binary file
package/test/certificate_base64.png CHANGED
Binary file