@myissue/vue-website-page-builder 3.4.8 → 3.4.10
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/dist/style.css +1 -1
- package/dist/vue-website-page-builder.js +2350 -2396
- package/dist/vue-website-page-builder.umd.cjs +303 -308
- package/package.json +1 -1
- package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +8 -2
- package/src/css/style.css +1 -0
- package/src/tests/DefaultComponents/DefaultBuilderComponents.vue +6 -9
- package/src/tests/PageBuilderTest.vue +1 -1
- package/src/utils/html-elements/component.ts +308 -24
- package/src/utils/componentPreviews.ts +0 -369
package/package.json
CHANGED
|
@@ -210,8 +210,14 @@ const handleModalIframeSrc = function () {
|
|
|
210
210
|
<div class="pbx-myInputGroup">
|
|
211
211
|
<div class="pbx-myPrimaryFormOrganizationHeaderDescriptionSection">
|
|
212
212
|
<div class="pbx-myPrimaryFormOrganizationHeader">
|
|
213
|
-
<label for="video" class="pbx-myPrimaryInputLabel">Video url:</label>
|
|
214
|
-
<input
|
|
213
|
+
<label for="youtube-video" class="pbx-myPrimaryInputLabel">Video url:</label>
|
|
214
|
+
<input
|
|
215
|
+
id="youtube-video"
|
|
216
|
+
v-model="iframeSrc"
|
|
217
|
+
type="text"
|
|
218
|
+
class="pbx-myPrimaryInput"
|
|
219
|
+
name="video"
|
|
220
|
+
/>
|
|
215
221
|
<div
|
|
216
222
|
v-if="urlError"
|
|
217
223
|
class="pbx-min-h-[2.5rem] pbx-flex pbx-items-center pbx-justify-start"
|
package/src/css/style.css
CHANGED
|
@@ -3,10 +3,8 @@ import { ref, computed } from 'vue'
|
|
|
3
3
|
import componentHelpers from '../../utils/html-elements/componentHelpers'
|
|
4
4
|
import components from '../../utils/html-elements/component'
|
|
5
5
|
import { usePageBuilderModal } from '../../composables/usePageBuilderModal'
|
|
6
|
-
import { generateComponentPreview } from '../../utils/componentPreviews'
|
|
7
6
|
import type { ComponentObject } from '../../types'
|
|
8
7
|
import { getPageBuilder } from '../../composables/builderInstance'
|
|
9
|
-
|
|
10
8
|
import { useTranslations } from '../../composables/useTranslations'
|
|
11
9
|
|
|
12
10
|
const { translate } = useTranslations()
|
|
@@ -70,11 +68,6 @@ const convertToComponentObject = function (comp: any): ComponentObject {
|
|
|
70
68
|
title: comp.title,
|
|
71
69
|
}
|
|
72
70
|
}
|
|
73
|
-
|
|
74
|
-
// Get SVG preview for component
|
|
75
|
-
const getSvgPreview = (title: string) => {
|
|
76
|
-
return generateComponentPreview(title)
|
|
77
|
-
}
|
|
78
71
|
</script>
|
|
79
72
|
|
|
80
73
|
<style scoped>
|
|
@@ -148,7 +141,11 @@ const getSvgPreview = (title: string) => {
|
|
|
148
141
|
:key="category"
|
|
149
142
|
@click="selectedCategory = category"
|
|
150
143
|
class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
|
|
151
|
-
:class="
|
|
144
|
+
:class="[
|
|
145
|
+
selectedCategory === category
|
|
146
|
+
? 'pbx-bg-myPrimaryLinkColor pbx-text-white hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white'
|
|
147
|
+
: 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white',
|
|
148
|
+
]"
|
|
152
149
|
>
|
|
153
150
|
{{ translate(category) }}
|
|
154
151
|
</button>
|
|
@@ -168,7 +165,7 @@ const getSvgPreview = (title: string) => {
|
|
|
168
165
|
<!-- Use SVG preview instead of external images -->
|
|
169
166
|
<div
|
|
170
167
|
class="pbx-max-h-72 pbx-cursor-pointer pbx-bg-white pbx-mx-auto pbx-flex pbx-items-center pbx-justify-center"
|
|
171
|
-
v-html="
|
|
168
|
+
v-html="comp.cover_image"
|
|
172
169
|
></div>
|
|
173
170
|
</div>
|
|
174
171
|
<div class="pbx-p-3">
|
|
@@ -27,7 +27,7 @@ const translatedComponents = computed(() => {
|
|
|
27
27
|
watch(currentTranslations, async () => {
|
|
28
28
|
const { components: newComponents, pageSettings: pageSettings } =
|
|
29
29
|
pageBuilderService.parsePageBuilderHTML(
|
|
30
|
-
'<div id="pagebuilder" class="
|
|
30
|
+
'<div id="pagebuilder" class="" style="">' +
|
|
31
31
|
translatedComponents.value.map((c) => c.html_code).join('\n') +
|
|
32
32
|
'</div>',
|
|
33
33
|
)
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { getPlaceholderImageDataUrl } from '../componentPreviews'
|
|
2
|
-
|
|
3
1
|
interface ComponentData {
|
|
4
2
|
title: string
|
|
5
3
|
html_code: string
|
|
@@ -13,8 +11,27 @@ interface Components {
|
|
|
13
11
|
}
|
|
14
12
|
}
|
|
15
13
|
|
|
16
|
-
//
|
|
17
|
-
const
|
|
14
|
+
// Generate placeholder image data URL from Single Image SVG
|
|
15
|
+
const getPlaceholderImageDataUrl = (): string => {
|
|
16
|
+
const singleImageSvg = `
|
|
17
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150">
|
|
18
|
+
<defs>
|
|
19
|
+
<style>
|
|
20
|
+
.bg { fill: #384152; }
|
|
21
|
+
.fg { fill: #718096; }
|
|
22
|
+
</style>
|
|
23
|
+
</defs>
|
|
24
|
+
<rect class="bg" width="200" height="150"/>
|
|
25
|
+
<polygon class="fg" points="65 90.01 90 60.01 115 90.01"/>
|
|
26
|
+
<polygon class="fg" points="110 90.01 122.5 75.01 135 90.01"/>
|
|
27
|
+
<circle class="fg" cx="122.5" cy="64.15" r="4.16"/>
|
|
28
|
+
</svg>
|
|
29
|
+
`
|
|
30
|
+
|
|
31
|
+
// Convert SVG to data URL
|
|
32
|
+
const encodedSvg = encodeURIComponent(singleImageSvg.trim())
|
|
33
|
+
return `data:image/svg+xml,${encodedSvg}`
|
|
34
|
+
}
|
|
18
35
|
|
|
19
36
|
const component: Components[] = [
|
|
20
37
|
{
|
|
@@ -22,63 +39,330 @@ const component: Components[] = [
|
|
|
22
39
|
data: [
|
|
23
40
|
{
|
|
24
41
|
title: 'Single Image',
|
|
25
|
-
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${
|
|
26
|
-
cover_image: null,
|
|
42
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"></div></div></div></div>\n</section>`,
|
|
27
43
|
category: 'Image',
|
|
44
|
+
cover_image: `
|
|
45
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150">
|
|
46
|
+
<defs>
|
|
47
|
+
<style>
|
|
48
|
+
.bg { fill: #384152; }
|
|
49
|
+
.fg { fill: #718096; }
|
|
50
|
+
</style>
|
|
51
|
+
</defs>
|
|
52
|
+
<rect class="bg" width="200" height="150"/>
|
|
53
|
+
<polygon class="fg" points="65 90.01 90 60.01 115 90.01"/>
|
|
54
|
+
<polygon class="fg" points="110 90.01 122.5 75.01 135 90.01"/>
|
|
55
|
+
<circle class="fg" cx="122.5" cy="64.15" r="4.16"/>
|
|
56
|
+
</svg>
|
|
57
|
+
`,
|
|
28
58
|
},
|
|
29
59
|
{
|
|
30
60
|
title: 'Two Vertical Images',
|
|
31
|
-
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${
|
|
32
|
-
cover_image: null,
|
|
61
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> </div> </div> </div>\n</section>`,
|
|
33
62
|
category: 'Image',
|
|
63
|
+
cover_image: `
|
|
64
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133.88 122.11">
|
|
65
|
+
<defs>
|
|
66
|
+
<style>
|
|
67
|
+
.cls-1 {
|
|
68
|
+
fill: #384152;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.cls-2 {
|
|
72
|
+
fill: #718096;
|
|
73
|
+
}
|
|
74
|
+
</style>
|
|
75
|
+
</defs>
|
|
76
|
+
<g>
|
|
77
|
+
<rect class="cls-1" width="63.93" height="122.11"/>
|
|
78
|
+
<g>
|
|
79
|
+
<polygon class="cls-2" points="8.68 71.04 25.31 51.08 41.94 71.04 8.68 71.04"/>
|
|
80
|
+
<polygon class="cls-2" points="38.62 71.04 46.93 61.06 55.24 71.04 38.62 71.04"/>
|
|
81
|
+
<circle class="cls-2" cx="46.93" cy="53.84" r="2.77"/>
|
|
82
|
+
</g>
|
|
83
|
+
</g>
|
|
84
|
+
<g>
|
|
85
|
+
<rect class="cls-1" x="69.95" width="63.93" height="122.11"/>
|
|
86
|
+
<g>
|
|
87
|
+
<polygon class="cls-2" points="78.64 71.04 95.27 51.08 111.89 71.04 78.64 71.04"/>
|
|
88
|
+
<polygon class="cls-2" points="108.57 71.04 116.88 61.06 125.2 71.04 108.57 71.04"/>
|
|
89
|
+
<circle class="cls-2" cx="116.88" cy="53.84" r="2.77"/>
|
|
90
|
+
</g>
|
|
91
|
+
</g>
|
|
92
|
+
</svg>
|
|
93
|
+
`,
|
|
34
94
|
},
|
|
35
95
|
{
|
|
36
96
|
title: 'Two Square Images',
|
|
37
|
-
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${
|
|
38
|
-
cover_image: null,
|
|
97
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
39
98
|
category: 'Image',
|
|
99
|
+
cover_image: `
|
|
100
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120.18 57.68">
|
|
101
|
+
<defs>
|
|
102
|
+
<style>
|
|
103
|
+
.cls-1 {
|
|
104
|
+
fill: #384152;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.cls-2 {
|
|
108
|
+
fill: #718096;
|
|
109
|
+
}
|
|
110
|
+
</style>
|
|
111
|
+
</defs>
|
|
112
|
+
<g>
|
|
113
|
+
<rect class="cls-1" width="57.68" height="57.68"/>
|
|
114
|
+
<g>
|
|
115
|
+
<polygon class="cls-2" points="8.77 37.45 23.11 20.25 37.44 37.45 8.77 37.45"/>
|
|
116
|
+
<polygon class="cls-2" points="34.58 37.45 41.74 28.85 48.91 37.45 34.58 37.45"/>
|
|
117
|
+
<circle class="cls-2" cx="41.74" cy="22.62" r="2.39"/>
|
|
118
|
+
</g>
|
|
119
|
+
</g>
|
|
120
|
+
<g>
|
|
121
|
+
<rect class="cls-1" x="62.5" width="57.68" height="57.68"/>
|
|
122
|
+
<g>
|
|
123
|
+
<polygon class="cls-2" points="71.27 37.45 85.61 20.25 99.94 37.45 71.27 37.45"/>
|
|
124
|
+
<polygon class="cls-2" points="97.07 37.45 104.24 28.85 111.41 37.45 97.07 37.45"/>
|
|
125
|
+
<circle class="cls-2" cx="104.24" cy="22.62" r="2.39"/>
|
|
126
|
+
</g>
|
|
127
|
+
</g>
|
|
128
|
+
</svg>
|
|
129
|
+
`,
|
|
40
130
|
},
|
|
41
131
|
{
|
|
42
132
|
title: 'Three Square Images',
|
|
43
|
-
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${
|
|
44
|
-
cover_image: null,
|
|
133
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
45
134
|
category: 'Image',
|
|
135
|
+
cover_image: `
|
|
136
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 53.92">
|
|
137
|
+
<defs>
|
|
138
|
+
<style>
|
|
139
|
+
.bg { fill: #384152; }
|
|
140
|
+
.fg { fill: #718096; }
|
|
141
|
+
</style>
|
|
142
|
+
</defs>
|
|
143
|
+
<rect class="bg" width="53.92" height="53.92"/>
|
|
144
|
+
<rect class="bg" x="62.15" width="53.92" height="53.92"/>
|
|
145
|
+
<rect class="bg" x="123.37" width="53.92" height="53.92"/>
|
|
146
|
+
<polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
|
|
147
|
+
<polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
|
|
148
|
+
<circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
|
|
149
|
+
<polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
|
|
150
|
+
<polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
|
|
151
|
+
<circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
|
|
152
|
+
<polygon class="fg" points="131.57 35 144.96 18.92 158.36 35"/>
|
|
153
|
+
<polygon class="fg" points="155.68 35 162.38 26.96 169.08 35"/>
|
|
154
|
+
<circle class="fg" cx="162.38" cy="21.15" r="2.23"/>
|
|
155
|
+
</svg>
|
|
156
|
+
`,
|
|
46
157
|
},
|
|
47
158
|
{
|
|
48
159
|
title: 'Four Square Images',
|
|
49
|
-
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"> <div class="mx-auto max-w-7xl"> <div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4"> <div><img class="object-cover w-full object-top aspect-square " src="${
|
|
50
|
-
cover_image: null,
|
|
160
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"> <div class="mx-auto max-w-7xl"> <div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4"> <div><img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"></div> </div> </div> </div>\n</section>`,
|
|
51
161
|
category: 'Image',
|
|
162
|
+
cover_image: `
|
|
163
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190.34 42.55">
|
|
164
|
+
<defs>
|
|
165
|
+
<style>
|
|
166
|
+
.cls-1 {
|
|
167
|
+
fill: #394152;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.cls-2 {
|
|
171
|
+
fill: #718096;
|
|
172
|
+
}
|
|
173
|
+
</style>
|
|
174
|
+
</defs>
|
|
175
|
+
<rect class="cls-1" width="42.55" height="42.55"/>
|
|
176
|
+
<rect class="cls-1" x="49.05" width="42.55" height="42.55"/>
|
|
177
|
+
<rect class="cls-1" x="97.35" width="42.55" height="42.55"/>
|
|
178
|
+
<rect class="cls-1" x="147.79" width="42.55" height="42.55"/>
|
|
179
|
+
<polygon class="cls-2" points="6.47 27.62 17.04 14.93 27.62 27.62 6.47 27.62"/>
|
|
180
|
+
<polygon class="cls-2" points="25.5 27.62 30.79 21.28 36.07 27.62 25.5 27.62"/>
|
|
181
|
+
<circle class="cls-2" cx="30.79" cy="16.69" r="1.76"/>
|
|
182
|
+
<polygon class="cls-2" points="55.52 27.62 66.09 14.93 76.66 27.62 55.52 27.62"/>
|
|
183
|
+
<polygon class="cls-2" points="74.55 27.62 79.83 21.28 85.12 27.62 74.55 27.62"/>
|
|
184
|
+
<circle class="cls-2" cx="79.83" cy="16.69" r="1.76"/>
|
|
185
|
+
<polygon class="cls-2" points="103.82 27.62 114.39 14.93 124.97 27.62 103.82 27.62"/>
|
|
186
|
+
<polygon class="cls-2" points="122.85 27.62 128.14 21.28 133.42 27.62 122.85 27.62"/>
|
|
187
|
+
<circle class="cls-2" cx="128.14" cy="16.69" r="1.76"/>
|
|
188
|
+
<polygon class="cls-2" points="154.26 27.62 164.83 14.93 175.4 27.62 154.26 27.62"/>
|
|
189
|
+
<polygon class="cls-2" points="173.29 27.62 178.57 21.28 183.86 27.62 173.29 27.62"/>
|
|
190
|
+
<circle class="cls-2" cx="178.57" cy="16.69" r="1.76"/>
|
|
191
|
+
</svg>
|
|
192
|
+
`,
|
|
52
193
|
},
|
|
53
194
|
{
|
|
54
195
|
title: 'Six Square Images Grid',
|
|
55
|
-
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2">\n<div class="mx-auto max-w-7xl">\n<div class="grid grid-cols-2 md:grid-cols-3 myPrimaryGap">\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${
|
|
56
|
-
cover_image: null,
|
|
196
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2">\n<div class="mx-auto max-w-7xl">\n<div class="grid grid-cols-2 md:grid-cols-3 myPrimaryGap">\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="image">\n</div>\n\n</div>\n</div>\n</div>\n</section>`,
|
|
57
197
|
category: 'Image',
|
|
198
|
+
cover_image: `
|
|
199
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 120.27">
|
|
200
|
+
<defs>
|
|
201
|
+
<style>
|
|
202
|
+
.bg { fill: #384152; }
|
|
203
|
+
.fg { fill: #718096; }
|
|
204
|
+
</style>
|
|
205
|
+
</defs>
|
|
206
|
+
<rect class="bg" width="53.92" height="53.92"/>
|
|
207
|
+
<rect class="bg" x="62.15" width="53.92" height="53.92"/>
|
|
208
|
+
<rect class="bg" x="123.37" width="53.92" height="53.92"/>
|
|
209
|
+
<rect class="bg" y="66.35" width="53.92" height="53.92"/>
|
|
210
|
+
<rect class="bg" x="62.15" y="66.35" width="53.92" height="53.92"/>
|
|
211
|
+
<rect class="bg" x="123.37" y="66.35" width="53.92" height="53.92"/>
|
|
212
|
+
<polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
|
|
213
|
+
<polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
|
|
214
|
+
<circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
|
|
215
|
+
<polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
|
|
216
|
+
<polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
|
|
217
|
+
<circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
|
|
218
|
+
<polygon class="fg" points="131.57 35 144.96 18.92 158.36 35"/>
|
|
219
|
+
<polygon class="fg" points="155.68 35 162.38 26.96 169.08 35"/>
|
|
220
|
+
<circle class="fg" cx="162.38" cy="21.15" r="2.23"/>
|
|
221
|
+
<polygon class="fg" points="8.2 101.35 21.6 85.28 35 101.35"/>
|
|
222
|
+
<polygon class="fg" points="32.32 101.35 39.02 93.32 45.71 101.35"/>
|
|
223
|
+
<circle class="fg" cx="39.02" cy="87.5" r="2.23"/>
|
|
224
|
+
<polygon class="fg" points="70.36 101.35 83.75 85.28 97.15 101.35"/>
|
|
225
|
+
<polygon class="fg" points="94.47 101.35 101.17 93.32 107.87 101.35"/>
|
|
226
|
+
<circle class="fg" cx="101.17" cy="87.5" r="2.23"/>
|
|
227
|
+
<polygon class="fg" points="131.57 101.35 144.96 85.28 158.36 101.35"/>
|
|
228
|
+
<polygon class="fg" points="155.68 101.35 162.38 93.32 169.08 101.35"/>
|
|
229
|
+
<circle class="fg" cx="162.38" cy="87.5" r="2.23"/>
|
|
230
|
+
</svg>
|
|
231
|
+
`,
|
|
58
232
|
},
|
|
59
233
|
{
|
|
60
234
|
title: 'Two Square Images With Text',
|
|
61
|
-
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl">\n<div class="myPrimaryGap lg:flex lg:justify-center"><div class="flex-1 py-2">\n<div class="grid myPrimaryGap grid-cols-1 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${
|
|
62
|
-
cover_image: null,
|
|
235
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl">\n<div class="myPrimaryGap lg:flex lg:justify-center"><div class="flex-1 py-2">\n<div class="grid myPrimaryGap grid-cols-1 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> </div> </div>\n\n<div class="flex-1 py-2"> <div class="break-words py-2"><p>Start customizing by editing this default text directly in the editor.</p></div></div> \n</div></div></div>\n</section>`,
|
|
63
236
|
category: 'Image & Text',
|
|
237
|
+
cover_image: `
|
|
238
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.99 53.92">
|
|
239
|
+
<defs>
|
|
240
|
+
<style>
|
|
241
|
+
.bg { fill: #384152; }
|
|
242
|
+
.fg { fill: #718096; }
|
|
243
|
+
</style>
|
|
244
|
+
</defs>
|
|
245
|
+
<rect class="bg" width="53.92" height="53.92"/>
|
|
246
|
+
<rect class="bg" x="62.15" width="53.92" height="53.92"/>
|
|
247
|
+
<polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
|
|
248
|
+
<polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
|
|
249
|
+
<circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
|
|
250
|
+
<polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
|
|
251
|
+
<polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
|
|
252
|
+
<circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
|
|
253
|
+
<rect class="bg" x="126.07" width="53.92" height="2.93"/>
|
|
254
|
+
<rect class="bg" x="126.07" y="4" width="53.92" height="2.93"/>
|
|
255
|
+
<rect class="bg" x="126.07" y="7.99" width="53.92" height="2.93"/>
|
|
256
|
+
<rect class="bg" x="126.07" y="11.99" width="53.92" height="2.93"/>
|
|
257
|
+
<rect class="bg" x="126.07" y="15.99" width="53.92" height="2.93"/>
|
|
258
|
+
</svg>
|
|
259
|
+
`,
|
|
64
260
|
},
|
|
65
261
|
{
|
|
66
262
|
title: 'Three Vertical Images',
|
|
67
|
-
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${
|
|
68
|
-
cover_image: null,
|
|
263
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${getPlaceholderImageDataUrl()}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
69
264
|
category: 'Image',
|
|
265
|
+
cover_image: `
|
|
266
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.84 110.72">
|
|
267
|
+
<defs>
|
|
268
|
+
<style>
|
|
269
|
+
.bg { fill: #384152; }
|
|
270
|
+
.fg { fill: #718096; }
|
|
271
|
+
</style>
|
|
272
|
+
</defs>
|
|
273
|
+
<rect class="bg" width="54.28" height="110.72"/>
|
|
274
|
+
<rect class="bg" x="62.79" width="54.28" height="110.72"/>
|
|
275
|
+
<rect class="bg" x="125.56" width="54.28" height="110.72"/>
|
|
276
|
+
<polygon class="fg" points="7.37 63.83 21.49 46.89 35.61 63.83"/>
|
|
277
|
+
<polygon class="fg" points="32.79 63.83 39.85 55.36 46.91 63.83"/>
|
|
278
|
+
<circle class="fg" cx="39.85" cy="49.23" r="2.35"/>
|
|
279
|
+
<polygon class="fg" points="70.17 63.83 84.29 46.89 98.4 63.83"/>
|
|
280
|
+
<polygon class="fg" points="95.58 63.83 102.64 55.36 109.7 63.83"/>
|
|
281
|
+
<circle class="fg" cx="102.64" cy="49.23" r="2.35"/>
|
|
282
|
+
<polygon class="fg" points="132.94 63.83 147.06 46.89 161.18 63.83"/>
|
|
283
|
+
<polygon class="fg" points="158.35 63.83 165.41 55.36 172.47 63.83"/>
|
|
284
|
+
<circle class="fg" cx="165.41" cy="49.23" r="2.35"/>
|
|
285
|
+
</svg>
|
|
286
|
+
`,
|
|
70
287
|
},
|
|
71
288
|
{
|
|
72
289
|
title: 'Four Square Images With Text',
|
|
73
|
-
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${
|
|
74
|
-
cover_image: null,
|
|
290
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"><div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
75
291
|
category: 'Image & Text',
|
|
292
|
+
cover_image: `
|
|
293
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190.33 55.9">
|
|
294
|
+
<defs>
|
|
295
|
+
<style>
|
|
296
|
+
.bg { fill: #384152; }
|
|
297
|
+
.fg { fill: #718096; }
|
|
298
|
+
</style>
|
|
299
|
+
</defs>
|
|
300
|
+
<rect class="bg" width="42.55" height="42.55"/>
|
|
301
|
+
<rect class="bg" x="49.05" width="42.55" height="42.55"/>
|
|
302
|
+
<rect class="bg" x="97.35" width="42.55" height="42.55"/>
|
|
303
|
+
<rect class="bg" x="147.79" width="42.55" height="42.55"/>
|
|
304
|
+
<polygon class="fg" points="6.47 27.62 17.04 14.93 27.62 27.62"/>
|
|
305
|
+
<polygon class="fg" points="25.5 27.62 30.79 21.28 36.07 27.62"/>
|
|
306
|
+
<circle class="fg" cx="30.79" cy="16.69" r="1.76"/>
|
|
307
|
+
<polygon class="fg" points="55.52 27.62 66.09 14.93 76.66 27.62"/>
|
|
308
|
+
<polygon class="fg" points="74.55 27.62 79.83 21.28 85.12 27.62"/>
|
|
309
|
+
<circle class="fg" cx="79.83" cy="16.69" r="1.76"/>
|
|
310
|
+
<polygon class="fg" points="103.82 27.62 114.39 14.93 124.97 27.62"/>
|
|
311
|
+
<polygon class="fg" points="122.85 27.62 128.14 21.28 133.42 27.62"/>
|
|
312
|
+
<circle class="fg" cx="128.14" cy="16.69" r="1.76"/>
|
|
313
|
+
<polygon class="fg" points="154.26 27.62 164.83 14.93 175.4 27.62"/>
|
|
314
|
+
<polygon class="fg" points="173.29 27.62 178.57 21.28 183.86 27.62"/>
|
|
315
|
+
<circle class="fg" cx="178.57" cy="16.69" r="1.76"/>
|
|
316
|
+
<rect class="bg" y="47.28" width="42.55" height="2.31"/>
|
|
317
|
+
<rect class="bg" y="50.43" width="42.55" height="2.31"/>
|
|
318
|
+
<rect class="bg" y="53.59" width="42.55" height="2.31"/>
|
|
319
|
+
<rect class="bg" x="49.05" y="47.28" width="42.55" height="2.31"/>
|
|
320
|
+
<rect class="bg" x="49.05" y="50.43" width="42.55" height="2.31"/>
|
|
321
|
+
<rect class="bg" x="49.05" y="53.59" width="42.55" height="2.31"/>
|
|
322
|
+
<rect class="bg" x="97.35" y="47.28" width="42.55" height="2.31"/>
|
|
323
|
+
<rect class="bg" x="97.35" y="50.43" width="42.55" height="2.31"/>
|
|
324
|
+
<rect class="bg" x="97.35" y="53.59" width="42.55" height="2.31"/>
|
|
325
|
+
<rect class="bg" x="147.79" y="47.28" width="42.55" height="2.31"/>
|
|
326
|
+
<rect class="bg" x="147.79" y="50.43" width="42.55" height="2.31"/>
|
|
327
|
+
<rect class="bg" x="147.79" y="53.59" width="42.55" height="2.31"/>
|
|
328
|
+
</svg>
|
|
329
|
+
`,
|
|
76
330
|
},
|
|
77
331
|
{
|
|
78
332
|
title: 'Three Square Images With Text',
|
|
79
|
-
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${
|
|
80
|
-
cover_image: null,
|
|
333
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
81
334
|
category: 'Image & Text',
|
|
335
|
+
cover_image: `
|
|
336
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 70.84">
|
|
337
|
+
<defs>
|
|
338
|
+
<style>
|
|
339
|
+
.bg { fill: #384152; }
|
|
340
|
+
.fg { fill: #718096; }
|
|
341
|
+
</style>
|
|
342
|
+
</defs>
|
|
343
|
+
<rect class="bg" width="53.92" height="53.92"/>
|
|
344
|
+
<rect class="bg" x="62.15" width="53.92" height="53.92"/>
|
|
345
|
+
<rect class="bg" x="123.37" width="53.92" height="53.92"/>
|
|
346
|
+
<polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
|
|
347
|
+
<polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
|
|
348
|
+
<circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
|
|
349
|
+
<polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
|
|
350
|
+
<polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
|
|
351
|
+
<circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
|
|
352
|
+
<polygon class="fg" points="131.57 35 144.96 18.92 158.36 35"/>
|
|
353
|
+
<polygon class="fg" points="155.68 35 162.38 26.96 169.08 35"/>
|
|
354
|
+
<circle class="fg" cx="162.38" cy="21.15" r="2.23"/>
|
|
355
|
+
<rect class="bg" y="59.92" width="53.92" height="2.93"/>
|
|
356
|
+
<rect class="bg" y="63.91" width="53.92" height="2.93"/>
|
|
357
|
+
<rect class="bg" y="67.91" width="53.92" height="2.93"/>
|
|
358
|
+
<rect class="bg" x="62.15" y="59.92" width="53.92" height="2.93"/>
|
|
359
|
+
<rect class="bg" x="62.15" y="63.91" width="53.92" height="2.93"/>
|
|
360
|
+
<rect class="bg" x="62.15" y="67.91" width="53.92" height="2.93"/>
|
|
361
|
+
<rect class="bg" x="123.37" y="59.92" width="53.92" height="2.93"/>
|
|
362
|
+
<rect class="bg" x="123.37" y="63.91" width="53.92" height="2.93"/>
|
|
363
|
+
<rect class="bg" x="123.37" y="67.91" width="53.92" height="2.93"/>
|
|
364
|
+
</svg>
|
|
365
|
+
`,
|
|
82
366
|
},
|
|
83
367
|
],
|
|
84
368
|
},
|