appscms-tools-theme 2.7.3 → 2.7.4
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.
- checksums.yaml +4 -4
- data/LICENSE.txt +21 -21
- data/README.md +50 -50
- data/_data/about/en/about.json +16 -16
- data/_data/blog/alertbar.yml +3 -3
- data/_data/blog/authors.yml +11 -11
- data/_data/blog/blog.yml +4 -4
- data/_data/blog/nav.json +13 -13
- data/_data/blog/share.yml +28 -28
- data/_data/calculators/en/biology-calc/bulb-spacing.json +78 -78
- data/_data/calculators/en/biology-calc/cat-chocolate-toxicity.json +52 -52
- data/_data/calculators/en/chemistry-calc/activation-energy.json +44 -44
- data/_data/calculators/en/finance-calc/401k.json +122 -122
- data/_data/contact/en/contact.json +38 -38
- data/_data/disclaimer/en/disclaimer.json +37 -37
- data/_data/download/en/download.json +35 -35
- data/_data/feature/en/3_shop_posters.json +351 -351
- data/_data/feature/en/allele-frequency.json +246 -246
- data/_data/feature/en/batch-conversion.json +77 -77
- data/_data/feature/en/compress-pdf.json +202 -202
- data/_data/feature/en/face-detection.json +52 -52
- data/_data/feature/en/split-pdf.json +115 -115
- data/_data/feature/en/theframe.json +56 -56
- data/_data/feature/hi/compress-pdf.json +81 -81
- data/_data/feature/tr/compress-pdf.json +80 -80
- data/_data/filecomparison/en/filecomparison.json +38 -38
- data/_data/fileinfo/en/fileinfo.json +15 -15
- data/_data/footer/en/data.json +166 -166
- data/_data/footer/hi/data.json +68 -68
- data/_data/footer/networksites.json +15 -15
- data/_data/header/en/data.json +174 -174
- data/_data/header/hi/data.json +144 -144
- data/_data/home/en/en.json +285 -285
- data/_data/home/en/photoeffects.json +23 -23
- data/_data/home/en/posters.json +323 -323
- data/_data/home/hi/hi.json +86 -86
- data/_data/home-1/en/en.json +229 -229
- data/_data/languagesupport/compress-pdf-langs.json +11 -11
- data/_data/languagesupport/index-langs.json +13 -13
- data/_data/photo-categories.json +104 -104
- data/_data/photoeffects.json +31 -31
- data/_data/privacy/en/privacyPolicy.json +265 -265
- data/_data/termAndCondition/en/termAndCondition.json +358 -358
- data/_includes/Rating/rating.html +92 -92
- data/_includes/Rating/structureddata.html +53 -53
- data/_includes/Usp/usp.html +95 -95
- data/_includes/adblocker.html +135 -135
- data/_includes/adsense/adsense.html +7 -7
- data/_includes/alternates/alternates.html +45 -45
- data/_includes/author_bio.html +16 -16
- data/_includes/authors/authors.html +67 -67
- data/_includes/batch-conversion.html +65 -65
- data/_includes/cssfile/links.html +11 -11
- data/_includes/custom-head.html +136 -136
- data/_includes/customblog/recentposts.html +67 -69
- data/_includes/customblog/relatedposts.html +203 -203
- data/_includes/disqus_comments.html +10 -10
- data/_includes/dropdown/langdropdown.html +22 -22
- data/_includes/feature.html +37 -37
- data/_includes/fileformat/Tabularcompariosn.html +158 -158
- data/_includes/fileformat/comparisonfiles.html +151 -151
- data/_includes/fileformat/fileformatdetail.html +101 -101
- data/_includes/fileformat/fileinfoformat.html +93 -93
- data/_includes/footer/index.html +534 -529
- data/_includes/google-analytics.html +22 -22
- data/_includes/head/index.html +235 -235
- data/_includes/header/blogHeader.html +34 -34
- data/_includes/header/index.html +188 -188
- data/_includes/languages/languages.html +60 -60
- data/_includes/monumetric/ads.html +57 -57
- data/_includes/monumetric/monumetric.html +57 -57
- data/_includes/monumetric/profitablecpmgate.html +51 -51
- data/_includes/nofiletransfer/nofiletransfer.html +38 -38
- data/_includes/paginationBlogPage.html +71 -71
- data/_includes/paginationPostPage.html +14 -14
- data/_includes/postauthorbio.html +17 -17
- data/_includes/postbox.html +31 -31
- data/_includes/script.html +63 -63
- data/_includes/section/alertbar.html +11 -11
- data/_includes/section/count.html +36 -36
- data/_includes/section/recent_posts.html +65 -67
- data/_includes/section/related_categories_post.html +198 -198
- data/_includes/share/socialshare.html +20 -20
- data/_includes/staticfooter.html +67 -67
- data/_layouts/aboutUs.html +34 -34
- data/_layouts/batch.html +102 -102
- data/_layouts/blog-1.html +83 -85
- data/_layouts/blog.html +94 -96
- data/_layouts/calculator.html +89 -89
- data/_layouts/categories.html +33 -33
- data/_layouts/contactUs.html +124 -124
- data/_layouts/default.html +1 -1
- data/_layouts/disclaimer.html +123 -123
- data/_layouts/download.html +299 -299
- data/_layouts/feature-1.html +320 -320
- data/_layouts/feature-download.html +308 -308
- data/_layouts/feature.html +258 -259
- data/_layouts/featureResultPage.html +58 -58
- data/_layouts/fileInfo.html +39 -39
- data/_layouts/filecomparison.html +85 -85
- data/_layouts/frame.html +434 -434
- data/_layouts/help.html +23 -23
- data/_layouts/home-1.html +229 -229
- data/_layouts/home.html +249 -250
- data/_layouts/homeResultPage.html +31 -31
- data/_layouts/imagekit.html +125 -125
- data/_layouts/page.html +5 -5
- data/_layouts/photo-effects-home.html +193 -193
- data/_layouts/post.html +177 -177
- data/_layouts/privacyPolicy.html +637 -637
- data/_layouts/termAndCondition.html +646 -646
- data/assets/cross.svg +4 -4
- data/assets/css/adblocker.css +187 -187
- data/assets/css/batch.css +437 -437
- data/assets/css/blog-1.css +65 -65
- data/assets/css/blog.css +491 -491
- data/assets/css/bootstrap.min.css +6 -6
- data/assets/css/calculators.css +47 -47
- data/assets/css/common.css +550 -550
- data/assets/css/feature-1.css +290 -290
- data/assets/css/filecomparison.css +25 -25
- data/assets/css/frame.css +781 -781
- data/assets/css/home-1.css +187 -187
- data/assets/css/imagekit.css +840 -840
- data/assets/css/tools.css +1282 -1282
- data/assets/facebook.svg +4 -4
- data/assets/images/abp.svg +41 -41
- data/assets/images/adblock.svg +266 -266
- data/assets/images/addimg.svg +2 -2
- data/assets/images/convert.svg +8 -8
- data/assets/images/safevideoconverter.svg +23 -23
- data/assets/images/uo.svg +41 -41
- data/assets/images/vectorpaint.svg +5 -5
- data/assets/instagram.svg +4 -4
- data/assets/js/TopScroll.js +8 -8
- data/assets/js/adBlocker.js +44 -44
- data/assets/js/ads.js +8 -8
- data/assets/js/append-div.js +10 -10
- data/assets/js/batch.js +229 -229
- data/assets/js/calculator-tooltip.js +3 -3
- data/assets/js/face-api.js +38064 -38064
- data/assets/js/face-detection.js +303 -303
- data/assets/js/featureResult.js +42 -42
- data/assets/js/frame.js +262 -262
- data/assets/js/googledrive.js +155 -155
- data/assets/js/homeResult.js +36 -36
- data/assets/js/manifest.json +16 -16
- data/assets/js/multiselect.js +157 -157
- data/assets/js/perspective.min.js +182 -182
- data/assets/js/photo-effects.json +84 -84
- data/assets/js/redirectResult.js +9 -9
- data/assets/js/testing-batch.js +39 -39
- data/assets/js/theme.js +44 -44
- data/assets/linkdin.svg +4 -4
- data/assets/noserverupload.svg +4 -4
- data/assets/pdf.svg +20 -20
- data/assets/secure.svg +43 -43
- data/assets/star.svg +4 -4
- data/assets/twitter.svg +4 -4
- data/assets/youtube.svg +4 -4
- metadata +7 -7
data/_layouts/frame.html
CHANGED
|
@@ -1,435 +1,435 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: feature
|
|
3
|
-
---
|
|
4
|
-
<style>
|
|
5
|
-
.frame-h2 {
|
|
6
|
-
max-width: 100%;
|
|
7
|
-
margin-bottom: 40px;
|
|
8
|
-
}
|
|
9
|
-
</style>
|
|
10
|
-
{%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
|
|
11
|
-
<div class="container mt-4">
|
|
12
|
-
<div class="col-md-11 mx-auto">
|
|
13
|
-
<div class="row">
|
|
14
|
-
<div class="col-12">
|
|
15
|
-
<div class="col-12">
|
|
16
|
-
<div>
|
|
17
|
-
<div>
|
|
18
|
-
<div>
|
|
19
|
-
{%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
|
|
20
|
-
<h1 class="frame-h1 text-center">{%- for word in frameh1-%}
|
|
21
|
-
{%- if forloop.first == true -%}
|
|
22
|
-
{{word | capitalize }}
|
|
23
|
-
{%- else -%}
|
|
24
|
-
{{word}}
|
|
25
|
-
{%- endif -%}
|
|
26
|
-
{%- endfor -%}</h1>
|
|
27
|
-
</div>
|
|
28
|
-
{%- assign frameh2 = fileData.H2 | replace: "$variable", page.value -%}
|
|
29
|
-
<div>
|
|
30
|
-
<h2 class="frame-h2 text-center">
|
|
31
|
-
{%- for word in frameh2 -%}
|
|
32
|
-
{%- if forloop.first == true -%}
|
|
33
|
-
{{word | capitalize }}
|
|
34
|
-
{%- else -%}
|
|
35
|
-
{{word}}
|
|
36
|
-
{%- endif -%}
|
|
37
|
-
{%- endfor -%}
|
|
38
|
-
</h2>
|
|
39
|
-
</div>
|
|
40
|
-
|
|
41
|
-
</div>
|
|
42
|
-
</div>
|
|
43
|
-
</div>
|
|
44
|
-
</div>
|
|
45
|
-
|
|
46
|
-
<div class="col-md-11 mx-auto">
|
|
47
|
-
|
|
48
|
-
<div class="row" id="upper-panel">
|
|
49
|
-
{%- if site.photoeffectsemd -%}
|
|
50
|
-
<div class="col-md-5">
|
|
51
|
-
|
|
52
|
-
<div class="preview-section">
|
|
53
|
-
<img src="{{fileData.mainPreviewImage}}" alt="">
|
|
54
|
-
</div>
|
|
55
|
-
<h3 id="example-h3">Examples</h3>
|
|
56
|
-
<div class="image-samples" onclick="openExamplesModal()">
|
|
57
|
-
{%- for item in fileData.imageSamples -%}
|
|
58
|
-
<img src="{{item}}" alt="sample">
|
|
59
|
-
{%- endfor -%}
|
|
60
|
-
</div>
|
|
61
|
-
|
|
62
|
-
</div>
|
|
63
|
-
|
|
64
|
-
<div class="col-md-4">
|
|
65
|
-
<form id="effect-form" data-feature-name="{{page.featureName}}">
|
|
66
|
-
{%- for item in fileData.elements -%}
|
|
67
|
-
{%- if item.type == "image" -%}
|
|
68
|
-
<label for="{{item.id}}">{{item.label}}</label>
|
|
69
|
-
<div class="d-flex mb-15">
|
|
70
|
-
<button class="choose-image" type="button" id="{{item.id}}"
|
|
71
|
-
data-index="{{forloop.index}}" onclick="clickInput(this)">Choose
|
|
72
|
-
image</button>
|
|
73
|
-
<button class="cam-image" id="cam-{{forloop.index}}"><i
|
|
74
|
-
class="fas fa-camera"></i></button>
|
|
75
|
-
<img class="small-image-preview" style="display: none;"
|
|
76
|
-
id="image-pre-{{forloop.index}}"></img>
|
|
77
|
-
</div>
|
|
78
|
-
<input class="d-none" id="file-{{forloop.index}}" type="file" onchange="fileOnChange(this)"
|
|
79
|
-
data-index="{{forloop.index}}" accept=".webp,.png,.jpg,.jpeg" required />
|
|
80
|
-
{%- endif -%}
|
|
81
|
-
{%- if item.type == "text" -%}
|
|
82
|
-
<label for="{{item.id}}">{{item.label}}</label>
|
|
83
|
-
<input class="mb-15" type="text" placeholder="Your Text" id="{{item.id}}">
|
|
84
|
-
{%- endif -%}
|
|
85
|
-
{%- endfor -%}
|
|
86
|
-
<div class="d-flex">
|
|
87
|
-
<button class="submit-btn" type="submit">Go</button>
|
|
88
|
-
</div>
|
|
89
|
-
</form>
|
|
90
|
-
</div>
|
|
91
|
-
<div class="col-md-3">
|
|
92
|
-
<div class="categories-section">
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
<div class="categories-list">
|
|
96
|
-
<ul class="pl-0">
|
|
97
|
-
{%- for item in site.data.photo-categories -%}
|
|
98
|
-
{%- if page.category == item.category -%}
|
|
99
|
-
<li class="active-cat">
|
|
100
|
-
<a class="category-link " href="{{item.link}}">{{item.category}}</a>
|
|
101
|
-
</li>
|
|
102
|
-
{%- else -%}
|
|
103
|
-
<li>
|
|
104
|
-
<a class="category-link" href="{{item.link}}">{{item.category}}</a>
|
|
105
|
-
</li>
|
|
106
|
-
{%- endif -%}
|
|
107
|
-
{%- endfor -%}
|
|
108
|
-
</ul>
|
|
109
|
-
|
|
110
|
-
</div>
|
|
111
|
-
|
|
112
|
-
</div>
|
|
113
|
-
{%- else -%}
|
|
114
|
-
|
|
115
|
-
<div class="col-md-3">
|
|
116
|
-
<div class="categories-section">
|
|
117
|
-
</div>
|
|
118
|
-
<div class="categories-list">
|
|
119
|
-
<ul>
|
|
120
|
-
<li>
|
|
121
|
-
<a class="category-link" href="/">All effects</a>
|
|
122
|
-
</li>
|
|
123
|
-
<li>
|
|
124
|
-
<a class="category-link" href="/fun-photo-effects/christmas">christmas</a>
|
|
125
|
-
</li>
|
|
126
|
-
<li>
|
|
127
|
-
<a class="category-link" href="/fun-photo-effects/valentines_day">Valentine's
|
|
128
|
-
day</a>
|
|
129
|
-
</li>
|
|
130
|
-
<li>
|
|
131
|
-
<a class="category-link" href="/fun-photo-effects/easter">Easter</a>
|
|
132
|
-
</li>
|
|
133
|
-
<li>
|
|
134
|
-
<a class="category-link" href="/fun-photo-effects/cards">cards</a>
|
|
135
|
-
</li>
|
|
136
|
-
<li>
|
|
137
|
-
<a class="category-link" href="/fun-photo-effects/galleries">Galleries</a>
|
|
138
|
-
</li>
|
|
139
|
-
<li>
|
|
140
|
-
<a class="category-link" href="/fun-photo-effects/frames">Frames</a>
|
|
141
|
-
</li>
|
|
142
|
-
<li>
|
|
143
|
-
<a class="category-link" href="/fun-photo-effects/tv">TV</a>
|
|
144
|
-
</li>
|
|
145
|
-
<li>
|
|
146
|
-
<a class="category-link" href="/fun-photo-effects/magazines">Magazines</a>
|
|
147
|
-
</li>
|
|
148
|
-
<li>
|
|
149
|
-
<a class="category-link" href="/fun-photo-effects/movies">Movies</a>
|
|
150
|
-
</li>
|
|
151
|
-
<li>
|
|
152
|
-
<a class="category-link" href="/fun-photo-effects/photography">Photography</a>
|
|
153
|
-
</li>
|
|
154
|
-
<li>
|
|
155
|
-
<a class="category-link" href="/fun-photo-effects/posters">Posters</a>
|
|
156
|
-
</li>
|
|
157
|
-
<li>
|
|
158
|
-
<a class="category-link" href="/fun-photo-effects/misc">Misc</a>
|
|
159
|
-
</li>
|
|
160
|
-
<li>
|
|
161
|
-
<a class="category-link" href="/fun-photo-effects/celebrities">Celebrities</a>
|
|
162
|
-
</li>
|
|
163
|
-
<li>
|
|
164
|
-
<a class="category-link" href="/fun-photo-effects/vintage">Vintage</a>
|
|
165
|
-
</li>
|
|
166
|
-
</ul>
|
|
167
|
-
|
|
168
|
-
</div>
|
|
169
|
-
|
|
170
|
-
</div>
|
|
171
|
-
<div class="col-md-9">
|
|
172
|
-
<div class="row" id="upper-panel">
|
|
173
|
-
<div class="col-md-8">
|
|
174
|
-
<div>
|
|
175
|
-
<div>
|
|
176
|
-
<div>
|
|
177
|
-
<h1 class="frame-h1">Create your own personalized festive message with
|
|
178
|
-
filter snow sign</h1>
|
|
179
|
-
</div>
|
|
180
|
-
<h2 class="frame-h2">Type your text for the effect of snow sign and create
|
|
181
|
-
stunning postcard.</h2>
|
|
182
|
-
</div>
|
|
183
|
-
</div>
|
|
184
|
-
<div class="preview-section">
|
|
185
|
-
<img src="https://d33wubrfki0l68.cloudfront.net/d90f2e076e41e31601d00e53274fd82fdb1e385d/c7fa1/assets/images/snow-sign-main.png"
|
|
186
|
-
alt="">
|
|
187
|
-
</div>
|
|
188
|
-
<h3 id="example-h3">Examples</h3>
|
|
189
|
-
<div class="image-samples" onclick="openExamplesModal()"><img
|
|
190
|
-
src="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png"
|
|
191
|
-
alt="sample"><img
|
|
192
|
-
src="https://d33wubrfki0l68.cloudfront.net/caa79e544fb9c16a5375c2450604287aa21b93ce/693ab/assets/images/snow-sign2.png"
|
|
193
|
-
alt="sample"><img
|
|
194
|
-
src="https://d33wubrfki0l68.cloudfront.net/c74fc74ac5b2ac2c84ddc7098a606d668a897ec2/07305/assets/images/snow-sign3.png"
|
|
195
|
-
alt="sample"><img
|
|
196
|
-
src="https://d33wubrfki0l68.cloudfront.net/645c7c7f1099c97ab4b82faac94e5ac71749d222/93692/assets/images/snow-sign4.png"
|
|
197
|
-
alt="sample"></div>
|
|
198
|
-
|
|
199
|
-
</div>
|
|
200
|
-
<div class="col-md-4">
|
|
201
|
-
<form id="effect-form" data-feature-name="snow-sign"><label for="text-1"></label>
|
|
202
|
-
<input class="mb-15" type="text" placeholder="Your Text" id="text-1">
|
|
203
|
-
<div class="d-flex">
|
|
204
|
-
<button class="submit-btn" type="submit">Go</button>
|
|
205
|
-
</div>
|
|
206
|
-
</form>
|
|
207
|
-
</div>
|
|
208
|
-
</div>
|
|
209
|
-
<div class="row">
|
|
210
|
-
<div id="workspace" data-name="together_forever" style="display: none;">
|
|
211
|
-
<div class="row">
|
|
212
|
-
<div class="col-12 mb-4">
|
|
213
|
-
<div class="d-flex justify-content-between">
|
|
214
|
-
<div class="result-info">
|
|
215
|
-
<a href="/fun-photo-effects/christmas-snow-sign"
|
|
216
|
-
target="_blank">snow-sign</a>
|
|
217
|
-
<i class="fas fa-chevron-right"></i>
|
|
218
|
-
<div>result</div>
|
|
219
|
-
</div>
|
|
220
|
-
<button id="download-button" style="background-color: #FF5554;"><svg
|
|
221
|
-
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
222
|
-
<path
|
|
223
|
-
d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z">
|
|
224
|
-
</path>
|
|
225
|
-
</svg>Download</button>
|
|
226
|
-
</div>
|
|
227
|
-
|
|
228
|
-
</div>
|
|
229
|
-
<div class="col-md-12 mx-auto">
|
|
230
|
-
<div class="select-img-panel">
|
|
231
|
-
<div id="saving-data" style="display: block;">
|
|
232
|
-
<img loading="lazy"
|
|
233
|
-
src="https://d33wubrfki0l68.cloudfront.net/5ffee5c33dad367f7441ca96caa793eff6a95e3e/1975e/assets/images/loader.gif"
|
|
234
|
-
alt="saving"> <span class="ml-2">Saving
|
|
235
|
-
your
|
|
236
|
-
images...</span>
|
|
237
|
-
</div>
|
|
238
|
-
<div id="canvas-panel">
|
|
239
|
-
</div>
|
|
240
|
-
</div>
|
|
241
|
-
</div>
|
|
242
|
-
|
|
243
|
-
</div>
|
|
244
|
-
</div>
|
|
245
|
-
</div>
|
|
246
|
-
|
|
247
|
-
<div class="crop-image-modal-container">
|
|
248
|
-
<div class="row w-100">
|
|
249
|
-
<div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
|
|
250
|
-
<div class="crop-image-modal-header" style="background-color:#FF5554 ;">
|
|
251
|
-
<div>Select an area you would like to use</div>
|
|
252
|
-
<div>
|
|
253
|
-
<button onclick="closeModal()">
|
|
254
|
-
<i class="fas fa-times"></i>
|
|
255
|
-
</button>
|
|
256
|
-
</div>
|
|
257
|
-
</div>
|
|
258
|
-
<div class="crop-image-modal-body">
|
|
259
|
-
|
|
260
|
-
</div>
|
|
261
|
-
<div class="crop-btn-section">
|
|
262
|
-
<button id="crop" class="mx-auto my-3"
|
|
263
|
-
style="background-color: #FF5554;">crop</button>
|
|
264
|
-
</div>
|
|
265
|
-
</div>
|
|
266
|
-
</div>
|
|
267
|
-
</div>
|
|
268
|
-
<div class="example-images-modal-container">
|
|
269
|
-
<div class="row w-100">
|
|
270
|
-
<div class="example-images-modal col-lg-6 col-md-8 mx-auto">
|
|
271
|
-
<div class="crop-image-modal-header" style="background-color:#FF5554 ;">
|
|
272
|
-
<div>Examples</div>
|
|
273
|
-
<div>
|
|
274
|
-
<button onclick="closeExamplesModal()">
|
|
275
|
-
<i class="fas fa-times"></i>
|
|
276
|
-
</button>
|
|
277
|
-
</div>
|
|
278
|
-
</div>
|
|
279
|
-
<div class="example-images-modal-body">
|
|
280
|
-
<div id="carouselExampleFade" class="carousel slide carousel-fade"
|
|
281
|
-
data-ride="carousel">
|
|
282
|
-
<div class="carousel-inner w-75 mx-auto">
|
|
283
|
-
<div class="carousel-item active">
|
|
284
|
-
<img src="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png"
|
|
285
|
-
class="d-block w-100"
|
|
286
|
-
alt="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png">
|
|
287
|
-
</div>
|
|
288
|
-
<div class="carousel-item">
|
|
289
|
-
<img src="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png"
|
|
290
|
-
class="d-block w-100"
|
|
291
|
-
alt="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png">
|
|
292
|
-
</div>
|
|
293
|
-
<div class="carousel-item">
|
|
294
|
-
<img src="https://d33wubrfki0l68.cloudfront.net/caa79e544fb9c16a5375c2450604287aa21b93ce/693ab/assets/images/snow-sign2.png"
|
|
295
|
-
class="d-block w-100"
|
|
296
|
-
alt="https://d33wubrfki0l68.cloudfront.net/caa79e544fb9c16a5375c2450604287aa21b93ce/693ab/assets/images/snow-sign2.png">
|
|
297
|
-
</div>
|
|
298
|
-
<div class="carousel-item">
|
|
299
|
-
<img src="https://d33wubrfki0l68.cloudfront.net/c74fc74ac5b2ac2c84ddc7098a606d668a897ec2/07305/assets/images/snow-sign3.png"
|
|
300
|
-
class="d-block w-100"
|
|
301
|
-
alt="https://d33wubrfki0l68.cloudfront.net/c74fc74ac5b2ac2c84ddc7098a606d668a897ec2/07305/assets/images/snow-sign3.png">
|
|
302
|
-
</div>
|
|
303
|
-
<div class="carousel-item">
|
|
304
|
-
<img src="https://d33wubrfki0l68.cloudfront.net/645c7c7f1099c97ab4b82faac94e5ac71749d222/93692/assets/images/snow-sign4.png"
|
|
305
|
-
class="d-block w-100"
|
|
306
|
-
alt="https://d33wubrfki0l68.cloudfront.net/645c7c7f1099c97ab4b82faac94e5ac71749d222/93692/assets/images/snow-sign4.png">
|
|
307
|
-
</div>
|
|
308
|
-
</div>
|
|
309
|
-
<button class="carousel-control-prev" type="button"
|
|
310
|
-
data-target="#carouselExampleFade" data-slide="prev">
|
|
311
|
-
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
312
|
-
<span class="sr-only">Previous</span>
|
|
313
|
-
</button>
|
|
314
|
-
<button class="carousel-control-next" type="button"
|
|
315
|
-
data-target="#carouselExampleFade" data-slide="next">
|
|
316
|
-
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
317
|
-
<span class="sr-only">Next</span>
|
|
318
|
-
</button>
|
|
319
|
-
</div>
|
|
320
|
-
</div>
|
|
321
|
-
|
|
322
|
-
</div>
|
|
323
|
-
</div>
|
|
324
|
-
</div>
|
|
325
|
-
|
|
326
|
-
</div>
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
{%- endif -%}
|
|
330
|
-
|
|
331
|
-
</div>
|
|
332
|
-
<div class="row">
|
|
333
|
-
<div id="workspace" data-name="together_forever" style="display: none;">
|
|
334
|
-
<div class="row">
|
|
335
|
-
<div class="col-12 mb-4">
|
|
336
|
-
<div class="d-flex justify-content-between">
|
|
337
|
-
<div class="result-info">
|
|
338
|
-
<a href="{{page.permalink}}" target="_blank">{{page.featureName}}</a>
|
|
339
|
-
<i class="fas fa-chevron-right"></i>
|
|
340
|
-
<div>result</div>
|
|
341
|
-
</div>
|
|
342
|
-
<button id="download-button"
|
|
343
|
-
style=" background: linear-gradient(to right, var(--pink), var(--purple));"><svg
|
|
344
|
-
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
345
|
-
<path
|
|
346
|
-
d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z" />
|
|
347
|
-
</svg>Download</button>
|
|
348
|
-
</div>
|
|
349
|
-
|
|
350
|
-
</div>
|
|
351
|
-
<div class="col-md-12 mx-auto">
|
|
352
|
-
<div class="select-img-panel">
|
|
353
|
-
<div id="saving-data" style="display: block;">
|
|
354
|
-
<img loading="lazy" src="/assets/images/loader.gif" alt="saving"> <span
|
|
355
|
-
class="ml-2">Saving
|
|
356
|
-
your
|
|
357
|
-
images...</span>
|
|
358
|
-
</div>
|
|
359
|
-
<div id="canvas-panel">
|
|
360
|
-
</div>
|
|
361
|
-
</div>
|
|
362
|
-
</div>
|
|
363
|
-
|
|
364
|
-
</div>
|
|
365
|
-
</div>
|
|
366
|
-
</div>
|
|
367
|
-
|
|
368
|
-
<div class="crop-image-modal-container">
|
|
369
|
-
<div class="row w-100">
|
|
370
|
-
<div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
|
|
371
|
-
<div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
|
|
372
|
-
<div>Select an area you would like to use</div>
|
|
373
|
-
<div>
|
|
374
|
-
<button onclick="closeModal()">
|
|
375
|
-
<i class="fas fa-times"></i>
|
|
376
|
-
</button>
|
|
377
|
-
</div>
|
|
378
|
-
</div>
|
|
379
|
-
<div class="crop-image-modal-body">
|
|
380
|
-
|
|
381
|
-
</div>
|
|
382
|
-
<div class="crop-btn-section">
|
|
383
|
-
<button id="crop" class="mx-auto my-3"
|
|
384
|
-
style=" background: linear-gradient(to right, var(--pink), var(--purple));">crop</button>
|
|
385
|
-
</div>
|
|
386
|
-
</div>
|
|
387
|
-
</div>
|
|
388
|
-
</div>
|
|
389
|
-
<div class="example-images-modal-container">
|
|
390
|
-
<div class="row w-100">
|
|
391
|
-
<div class="example-images-modal col-lg-6 col-md-8 mx-auto">
|
|
392
|
-
<div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
|
|
393
|
-
<div>Examples</div>
|
|
394
|
-
<div>
|
|
395
|
-
<button onclick="closeExamplesModal()">
|
|
396
|
-
<i class="fas fa-times"></i>
|
|
397
|
-
</button>
|
|
398
|
-
</div>
|
|
399
|
-
</div>
|
|
400
|
-
<div class="example-images-modal-body">
|
|
401
|
-
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
|
|
402
|
-
<div class="carousel-inner w-75 mx-auto">
|
|
403
|
-
{%- for item in fileData.imageSamples -%}
|
|
404
|
-
{%- if forloop.index == 1 -%}
|
|
405
|
-
<div class="carousel-item active">
|
|
406
|
-
<img src="{{item}}" class="d-block w-100" alt="{{item}}">
|
|
407
|
-
</div>
|
|
408
|
-
{%- endif -%}
|
|
409
|
-
<div class="carousel-item">
|
|
410
|
-
<img src="{{item}}" class="d-block w-100" alt="{{item}}">
|
|
411
|
-
</div>
|
|
412
|
-
{%- endfor -%}
|
|
413
|
-
</div>
|
|
414
|
-
<button class="carousel-control-prev" type="button"
|
|
415
|
-
data-target="#carouselExampleFade" data-slide="prev">
|
|
416
|
-
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
417
|
-
<span class="sr-only">Previous</span>
|
|
418
|
-
</button>
|
|
419
|
-
<button class="carousel-control-next" type="button"
|
|
420
|
-
data-target="#carouselExampleFade" data-slide="next">
|
|
421
|
-
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
422
|
-
<span class="sr-only">Next</span>
|
|
423
|
-
</button>
|
|
424
|
-
</div>
|
|
425
|
-
</div>
|
|
426
|
-
|
|
427
|
-
</div>
|
|
428
|
-
</div>
|
|
429
|
-
</div>
|
|
430
|
-
|
|
431
|
-
</div>
|
|
432
|
-
</div>
|
|
433
|
-
</div>
|
|
434
|
-
|
|
1
|
+
---
|
|
2
|
+
layout: feature
|
|
3
|
+
---
|
|
4
|
+
<style>
|
|
5
|
+
.frame-h2 {
|
|
6
|
+
max-width: 100%;
|
|
7
|
+
margin-bottom: 40px;
|
|
8
|
+
}
|
|
9
|
+
</style>
|
|
10
|
+
{%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
|
|
11
|
+
<div class="container mt-4">
|
|
12
|
+
<div class="col-md-11 mx-auto">
|
|
13
|
+
<div class="row">
|
|
14
|
+
<div class="col-12">
|
|
15
|
+
<div class="col-12">
|
|
16
|
+
<div>
|
|
17
|
+
<div>
|
|
18
|
+
<div>
|
|
19
|
+
{%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
|
|
20
|
+
<h1 class="frame-h1 text-center">{%- for word in frameh1-%}
|
|
21
|
+
{%- if forloop.first == true -%}
|
|
22
|
+
{{word | capitalize }}
|
|
23
|
+
{%- else -%}
|
|
24
|
+
{{word}}
|
|
25
|
+
{%- endif -%}
|
|
26
|
+
{%- endfor -%}</h1>
|
|
27
|
+
</div>
|
|
28
|
+
{%- assign frameh2 = fileData.H2 | replace: "$variable", page.value -%}
|
|
29
|
+
<div>
|
|
30
|
+
<h2 class="frame-h2 text-center">
|
|
31
|
+
{%- for word in frameh2 -%}
|
|
32
|
+
{%- if forloop.first == true -%}
|
|
33
|
+
{{word | capitalize }}
|
|
34
|
+
{%- else -%}
|
|
35
|
+
{{word}}
|
|
36
|
+
{%- endif -%}
|
|
37
|
+
{%- endfor -%}
|
|
38
|
+
</h2>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<div class="col-md-11 mx-auto">
|
|
47
|
+
|
|
48
|
+
<div class="row" id="upper-panel">
|
|
49
|
+
{%- if site.photoeffectsemd -%}
|
|
50
|
+
<div class="col-md-5">
|
|
51
|
+
|
|
52
|
+
<div class="preview-section">
|
|
53
|
+
<img src="{{fileData.mainPreviewImage}}" alt="">
|
|
54
|
+
</div>
|
|
55
|
+
<h3 id="example-h3">Examples</h3>
|
|
56
|
+
<div class="image-samples" onclick="openExamplesModal()">
|
|
57
|
+
{%- for item in fileData.imageSamples -%}
|
|
58
|
+
<img src="{{item}}" alt="sample">
|
|
59
|
+
{%- endfor -%}
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<div class="col-md-4">
|
|
65
|
+
<form id="effect-form" data-feature-name="{{page.featureName}}">
|
|
66
|
+
{%- for item in fileData.elements -%}
|
|
67
|
+
{%- if item.type == "image" -%}
|
|
68
|
+
<label for="{{item.id}}">{{item.label}}</label>
|
|
69
|
+
<div class="d-flex mb-15">
|
|
70
|
+
<button class="choose-image" type="button" id="{{item.id}}"
|
|
71
|
+
data-index="{{forloop.index}}" onclick="clickInput(this)">Choose
|
|
72
|
+
image</button>
|
|
73
|
+
<button class="cam-image" id="cam-{{forloop.index}}"><i
|
|
74
|
+
class="fas fa-camera"></i></button>
|
|
75
|
+
<img class="small-image-preview" style="display: none;"
|
|
76
|
+
id="image-pre-{{forloop.index}}"></img>
|
|
77
|
+
</div>
|
|
78
|
+
<input class="d-none" id="file-{{forloop.index}}" type="file" onchange="fileOnChange(this)"
|
|
79
|
+
data-index="{{forloop.index}}" accept=".webp,.png,.jpg,.jpeg" required />
|
|
80
|
+
{%- endif -%}
|
|
81
|
+
{%- if item.type == "text" -%}
|
|
82
|
+
<label for="{{item.id}}">{{item.label}}</label>
|
|
83
|
+
<input class="mb-15" type="text" placeholder="Your Text" id="{{item.id}}">
|
|
84
|
+
{%- endif -%}
|
|
85
|
+
{%- endfor -%}
|
|
86
|
+
<div class="d-flex">
|
|
87
|
+
<button class="submit-btn" type="submit">Go</button>
|
|
88
|
+
</div>
|
|
89
|
+
</form>
|
|
90
|
+
</div>
|
|
91
|
+
<div class="col-md-3">
|
|
92
|
+
<div class="categories-section">
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div class="categories-list">
|
|
96
|
+
<ul class="pl-0">
|
|
97
|
+
{%- for item in site.data.photo-categories -%}
|
|
98
|
+
{%- if page.category == item.category -%}
|
|
99
|
+
<li class="active-cat">
|
|
100
|
+
<a class="category-link " href="{{item.link}}">{{item.category}}</a>
|
|
101
|
+
</li>
|
|
102
|
+
{%- else -%}
|
|
103
|
+
<li>
|
|
104
|
+
<a class="category-link" href="{{item.link}}">{{item.category}}</a>
|
|
105
|
+
</li>
|
|
106
|
+
{%- endif -%}
|
|
107
|
+
{%- endfor -%}
|
|
108
|
+
</ul>
|
|
109
|
+
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
</div>
|
|
113
|
+
{%- else -%}
|
|
114
|
+
|
|
115
|
+
<div class="col-md-3">
|
|
116
|
+
<div class="categories-section">
|
|
117
|
+
</div>
|
|
118
|
+
<div class="categories-list">
|
|
119
|
+
<ul>
|
|
120
|
+
<li>
|
|
121
|
+
<a class="category-link" href="/">All effects</a>
|
|
122
|
+
</li>
|
|
123
|
+
<li>
|
|
124
|
+
<a class="category-link" href="/fun-photo-effects/christmas">christmas</a>
|
|
125
|
+
</li>
|
|
126
|
+
<li>
|
|
127
|
+
<a class="category-link" href="/fun-photo-effects/valentines_day">Valentine's
|
|
128
|
+
day</a>
|
|
129
|
+
</li>
|
|
130
|
+
<li>
|
|
131
|
+
<a class="category-link" href="/fun-photo-effects/easter">Easter</a>
|
|
132
|
+
</li>
|
|
133
|
+
<li>
|
|
134
|
+
<a class="category-link" href="/fun-photo-effects/cards">cards</a>
|
|
135
|
+
</li>
|
|
136
|
+
<li>
|
|
137
|
+
<a class="category-link" href="/fun-photo-effects/galleries">Galleries</a>
|
|
138
|
+
</li>
|
|
139
|
+
<li>
|
|
140
|
+
<a class="category-link" href="/fun-photo-effects/frames">Frames</a>
|
|
141
|
+
</li>
|
|
142
|
+
<li>
|
|
143
|
+
<a class="category-link" href="/fun-photo-effects/tv">TV</a>
|
|
144
|
+
</li>
|
|
145
|
+
<li>
|
|
146
|
+
<a class="category-link" href="/fun-photo-effects/magazines">Magazines</a>
|
|
147
|
+
</li>
|
|
148
|
+
<li>
|
|
149
|
+
<a class="category-link" href="/fun-photo-effects/movies">Movies</a>
|
|
150
|
+
</li>
|
|
151
|
+
<li>
|
|
152
|
+
<a class="category-link" href="/fun-photo-effects/photography">Photography</a>
|
|
153
|
+
</li>
|
|
154
|
+
<li>
|
|
155
|
+
<a class="category-link" href="/fun-photo-effects/posters">Posters</a>
|
|
156
|
+
</li>
|
|
157
|
+
<li>
|
|
158
|
+
<a class="category-link" href="/fun-photo-effects/misc">Misc</a>
|
|
159
|
+
</li>
|
|
160
|
+
<li>
|
|
161
|
+
<a class="category-link" href="/fun-photo-effects/celebrities">Celebrities</a>
|
|
162
|
+
</li>
|
|
163
|
+
<li>
|
|
164
|
+
<a class="category-link" href="/fun-photo-effects/vintage">Vintage</a>
|
|
165
|
+
</li>
|
|
166
|
+
</ul>
|
|
167
|
+
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
</div>
|
|
171
|
+
<div class="col-md-9">
|
|
172
|
+
<div class="row" id="upper-panel">
|
|
173
|
+
<div class="col-md-8">
|
|
174
|
+
<div>
|
|
175
|
+
<div>
|
|
176
|
+
<div>
|
|
177
|
+
<h1 class="frame-h1">Create your own personalized festive message with
|
|
178
|
+
filter snow sign</h1>
|
|
179
|
+
</div>
|
|
180
|
+
<h2 class="frame-h2">Type your text for the effect of snow sign and create
|
|
181
|
+
stunning postcard.</h2>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
<div class="preview-section">
|
|
185
|
+
<img src="https://d33wubrfki0l68.cloudfront.net/d90f2e076e41e31601d00e53274fd82fdb1e385d/c7fa1/assets/images/snow-sign-main.png"
|
|
186
|
+
alt="">
|
|
187
|
+
</div>
|
|
188
|
+
<h3 id="example-h3">Examples</h3>
|
|
189
|
+
<div class="image-samples" onclick="openExamplesModal()"><img
|
|
190
|
+
src="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png"
|
|
191
|
+
alt="sample"><img
|
|
192
|
+
src="https://d33wubrfki0l68.cloudfront.net/caa79e544fb9c16a5375c2450604287aa21b93ce/693ab/assets/images/snow-sign2.png"
|
|
193
|
+
alt="sample"><img
|
|
194
|
+
src="https://d33wubrfki0l68.cloudfront.net/c74fc74ac5b2ac2c84ddc7098a606d668a897ec2/07305/assets/images/snow-sign3.png"
|
|
195
|
+
alt="sample"><img
|
|
196
|
+
src="https://d33wubrfki0l68.cloudfront.net/645c7c7f1099c97ab4b82faac94e5ac71749d222/93692/assets/images/snow-sign4.png"
|
|
197
|
+
alt="sample"></div>
|
|
198
|
+
|
|
199
|
+
</div>
|
|
200
|
+
<div class="col-md-4">
|
|
201
|
+
<form id="effect-form" data-feature-name="snow-sign"><label for="text-1"></label>
|
|
202
|
+
<input class="mb-15" type="text" placeholder="Your Text" id="text-1">
|
|
203
|
+
<div class="d-flex">
|
|
204
|
+
<button class="submit-btn" type="submit">Go</button>
|
|
205
|
+
</div>
|
|
206
|
+
</form>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
<div class="row">
|
|
210
|
+
<div id="workspace" data-name="together_forever" style="display: none;">
|
|
211
|
+
<div class="row">
|
|
212
|
+
<div class="col-12 mb-4">
|
|
213
|
+
<div class="d-flex justify-content-between">
|
|
214
|
+
<div class="result-info">
|
|
215
|
+
<a href="/fun-photo-effects/christmas-snow-sign"
|
|
216
|
+
target="_blank">snow-sign</a>
|
|
217
|
+
<i class="fas fa-chevron-right"></i>
|
|
218
|
+
<div>result</div>
|
|
219
|
+
</div>
|
|
220
|
+
<button id="download-button" style="background-color: #FF5554;"><svg
|
|
221
|
+
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
222
|
+
<path
|
|
223
|
+
d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z">
|
|
224
|
+
</path>
|
|
225
|
+
</svg>Download</button>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
</div>
|
|
229
|
+
<div class="col-md-12 mx-auto">
|
|
230
|
+
<div class="select-img-panel">
|
|
231
|
+
<div id="saving-data" style="display: block;">
|
|
232
|
+
<img loading="lazy"
|
|
233
|
+
src="https://d33wubrfki0l68.cloudfront.net/5ffee5c33dad367f7441ca96caa793eff6a95e3e/1975e/assets/images/loader.gif"
|
|
234
|
+
alt="saving"> <span class="ml-2">Saving
|
|
235
|
+
your
|
|
236
|
+
images...</span>
|
|
237
|
+
</div>
|
|
238
|
+
<div id="canvas-panel">
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
</div>
|
|
246
|
+
|
|
247
|
+
<div class="crop-image-modal-container">
|
|
248
|
+
<div class="row w-100">
|
|
249
|
+
<div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
|
|
250
|
+
<div class="crop-image-modal-header" style="background-color:#FF5554 ;">
|
|
251
|
+
<div>Select an area you would like to use</div>
|
|
252
|
+
<div>
|
|
253
|
+
<button onclick="closeModal()">
|
|
254
|
+
<i class="fas fa-times"></i>
|
|
255
|
+
</button>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
<div class="crop-image-modal-body">
|
|
259
|
+
|
|
260
|
+
</div>
|
|
261
|
+
<div class="crop-btn-section">
|
|
262
|
+
<button id="crop" class="mx-auto my-3"
|
|
263
|
+
style="background-color: #FF5554;">crop</button>
|
|
264
|
+
</div>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
<div class="example-images-modal-container">
|
|
269
|
+
<div class="row w-100">
|
|
270
|
+
<div class="example-images-modal col-lg-6 col-md-8 mx-auto">
|
|
271
|
+
<div class="crop-image-modal-header" style="background-color:#FF5554 ;">
|
|
272
|
+
<div>Examples</div>
|
|
273
|
+
<div>
|
|
274
|
+
<button onclick="closeExamplesModal()">
|
|
275
|
+
<i class="fas fa-times"></i>
|
|
276
|
+
</button>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
<div class="example-images-modal-body">
|
|
280
|
+
<div id="carouselExampleFade" class="carousel slide carousel-fade"
|
|
281
|
+
data-ride="carousel">
|
|
282
|
+
<div class="carousel-inner w-75 mx-auto">
|
|
283
|
+
<div class="carousel-item active">
|
|
284
|
+
<img src="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png"
|
|
285
|
+
class="d-block w-100"
|
|
286
|
+
alt="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png">
|
|
287
|
+
</div>
|
|
288
|
+
<div class="carousel-item">
|
|
289
|
+
<img src="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png"
|
|
290
|
+
class="d-block w-100"
|
|
291
|
+
alt="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png">
|
|
292
|
+
</div>
|
|
293
|
+
<div class="carousel-item">
|
|
294
|
+
<img src="https://d33wubrfki0l68.cloudfront.net/caa79e544fb9c16a5375c2450604287aa21b93ce/693ab/assets/images/snow-sign2.png"
|
|
295
|
+
class="d-block w-100"
|
|
296
|
+
alt="https://d33wubrfki0l68.cloudfront.net/caa79e544fb9c16a5375c2450604287aa21b93ce/693ab/assets/images/snow-sign2.png">
|
|
297
|
+
</div>
|
|
298
|
+
<div class="carousel-item">
|
|
299
|
+
<img src="https://d33wubrfki0l68.cloudfront.net/c74fc74ac5b2ac2c84ddc7098a606d668a897ec2/07305/assets/images/snow-sign3.png"
|
|
300
|
+
class="d-block w-100"
|
|
301
|
+
alt="https://d33wubrfki0l68.cloudfront.net/c74fc74ac5b2ac2c84ddc7098a606d668a897ec2/07305/assets/images/snow-sign3.png">
|
|
302
|
+
</div>
|
|
303
|
+
<div class="carousel-item">
|
|
304
|
+
<img src="https://d33wubrfki0l68.cloudfront.net/645c7c7f1099c97ab4b82faac94e5ac71749d222/93692/assets/images/snow-sign4.png"
|
|
305
|
+
class="d-block w-100"
|
|
306
|
+
alt="https://d33wubrfki0l68.cloudfront.net/645c7c7f1099c97ab4b82faac94e5ac71749d222/93692/assets/images/snow-sign4.png">
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
<button class="carousel-control-prev" type="button"
|
|
310
|
+
data-target="#carouselExampleFade" data-slide="prev">
|
|
311
|
+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
312
|
+
<span class="sr-only">Previous</span>
|
|
313
|
+
</button>
|
|
314
|
+
<button class="carousel-control-next" type="button"
|
|
315
|
+
data-target="#carouselExampleFade" data-slide="next">
|
|
316
|
+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
317
|
+
<span class="sr-only">Next</span>
|
|
318
|
+
</button>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
|
|
326
|
+
</div>
|
|
327
|
+
|
|
328
|
+
|
|
329
|
+
{%- endif -%}
|
|
330
|
+
|
|
331
|
+
</div>
|
|
332
|
+
<div class="row">
|
|
333
|
+
<div id="workspace" data-name="together_forever" style="display: none;">
|
|
334
|
+
<div class="row">
|
|
335
|
+
<div class="col-12 mb-4">
|
|
336
|
+
<div class="d-flex justify-content-between">
|
|
337
|
+
<div class="result-info">
|
|
338
|
+
<a href="{{page.permalink}}" target="_blank">{{page.featureName}}</a>
|
|
339
|
+
<i class="fas fa-chevron-right"></i>
|
|
340
|
+
<div>result</div>
|
|
341
|
+
</div>
|
|
342
|
+
<button id="download-button"
|
|
343
|
+
style=" background: linear-gradient(to right, var(--pink), var(--purple));"><svg
|
|
344
|
+
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
345
|
+
<path
|
|
346
|
+
d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z" />
|
|
347
|
+
</svg>Download</button>
|
|
348
|
+
</div>
|
|
349
|
+
|
|
350
|
+
</div>
|
|
351
|
+
<div class="col-md-12 mx-auto">
|
|
352
|
+
<div class="select-img-panel">
|
|
353
|
+
<div id="saving-data" style="display: block;">
|
|
354
|
+
<img loading="lazy" src="/assets/images/loader.gif" alt="saving"> <span
|
|
355
|
+
class="ml-2">Saving
|
|
356
|
+
your
|
|
357
|
+
images...</span>
|
|
358
|
+
</div>
|
|
359
|
+
<div id="canvas-panel">
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
</div>
|
|
363
|
+
|
|
364
|
+
</div>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
|
|
368
|
+
<div class="crop-image-modal-container">
|
|
369
|
+
<div class="row w-100">
|
|
370
|
+
<div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
|
|
371
|
+
<div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
|
|
372
|
+
<div>Select an area you would like to use</div>
|
|
373
|
+
<div>
|
|
374
|
+
<button onclick="closeModal()">
|
|
375
|
+
<i class="fas fa-times"></i>
|
|
376
|
+
</button>
|
|
377
|
+
</div>
|
|
378
|
+
</div>
|
|
379
|
+
<div class="crop-image-modal-body">
|
|
380
|
+
|
|
381
|
+
</div>
|
|
382
|
+
<div class="crop-btn-section">
|
|
383
|
+
<button id="crop" class="mx-auto my-3"
|
|
384
|
+
style=" background: linear-gradient(to right, var(--pink), var(--purple));">crop</button>
|
|
385
|
+
</div>
|
|
386
|
+
</div>
|
|
387
|
+
</div>
|
|
388
|
+
</div>
|
|
389
|
+
<div class="example-images-modal-container">
|
|
390
|
+
<div class="row w-100">
|
|
391
|
+
<div class="example-images-modal col-lg-6 col-md-8 mx-auto">
|
|
392
|
+
<div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
|
|
393
|
+
<div>Examples</div>
|
|
394
|
+
<div>
|
|
395
|
+
<button onclick="closeExamplesModal()">
|
|
396
|
+
<i class="fas fa-times"></i>
|
|
397
|
+
</button>
|
|
398
|
+
</div>
|
|
399
|
+
</div>
|
|
400
|
+
<div class="example-images-modal-body">
|
|
401
|
+
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
|
|
402
|
+
<div class="carousel-inner w-75 mx-auto">
|
|
403
|
+
{%- for item in fileData.imageSamples -%}
|
|
404
|
+
{%- if forloop.index == 1 -%}
|
|
405
|
+
<div class="carousel-item active">
|
|
406
|
+
<img src="{{item}}" class="d-block w-100" alt="{{item}}">
|
|
407
|
+
</div>
|
|
408
|
+
{%- endif -%}
|
|
409
|
+
<div class="carousel-item">
|
|
410
|
+
<img src="{{item}}" class="d-block w-100" alt="{{item}}">
|
|
411
|
+
</div>
|
|
412
|
+
{%- endfor -%}
|
|
413
|
+
</div>
|
|
414
|
+
<button class="carousel-control-prev" type="button"
|
|
415
|
+
data-target="#carouselExampleFade" data-slide="prev">
|
|
416
|
+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
417
|
+
<span class="sr-only">Previous</span>
|
|
418
|
+
</button>
|
|
419
|
+
<button class="carousel-control-next" type="button"
|
|
420
|
+
data-target="#carouselExampleFade" data-slide="next">
|
|
421
|
+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
422
|
+
<span class="sr-only">Next</span>
|
|
423
|
+
</button>
|
|
424
|
+
</div>
|
|
425
|
+
</div>
|
|
426
|
+
|
|
427
|
+
</div>
|
|
428
|
+
</div>
|
|
429
|
+
</div>
|
|
430
|
+
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
</div>
|
|
434
|
+
|
|
435
435
|
</div>
|