appscms-tools-theme 4.5.4 → 4.5.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.
- checksums.yaml +4 -4
- data/_data/about/en/about.json +16 -16
- data/_data/blog/nav.json +14 -14
- data/_data/feature/en/batch-conversion.json +192 -192
- data/_data/feature/en/compress-pdf.json +305 -348
- data/_data/feature/en/devtools.json +321 -321
- data/_data/feature/en/face-detection.json +156 -156
- data/_data/feature/en/split-pdf.json +221 -221
- data/_data/feature/en/theframe.json +160 -160
- data/_data/footer/en/data.json +2 -2
- data/_data/header/en/data.json +412 -412
- data/_data/home/en/en.json +356 -356
- data/_data/home/en/posters.json +322 -322
- data/_includes/appscms/customblog/contenttool-recent-posts.html +94 -93
- data/_includes/appscms/customblog/pageRelatedPosts.html +62 -62
- data/_includes/appscms/customblog/recentposts.html +67 -67
- data/_includes/appscms/customblog/relatedBlogs.html +82 -82
- data/_includes/appscms/customblog/relatedposts.html +193 -192
- data/_includes/appscms/extras/appscms-postbox.html +57 -60
- data/_includes/appscms/featurePageAuthors/featurePageAuthors.html +85 -85
- data/_includes/appscms/head/bloghead.html +128 -128
- data/_includes/appscms/head/head.html +182 -72
- data/_includes/appscms/headings/contenttool-headings.html +33 -33
- data/_includes/appscms/headings/devtool-headings.html +38 -38
- data/_includes/appscms/home/contenttool-feature-boxes.html +19 -19
- data/_includes/appscms/home/devtool-feature-boxes.html +70 -70
- data/_includes/appscms/infographics/infographics.html +159 -159
- data/_includes/appscms/loaders/loader.html +4 -4
- data/_includes/appscms/navbars/devtool-navbar.html +50 -50
- data/_includes/appscms/navbars/devtool-toolbar.html +100 -100
- data/_includes/appscms/recent-posts/recent_posts.html +90 -92
- data/_includes/appscms/recent-posts/related_categories_post.html +194 -194
- data/_includes/appscms/searchbar/devtool-searchbar.html +63 -63
- data/_includes/appscms/usp/usp.html +90 -90
- data/_includes/author_bio.html +41 -41
- data/_includes/authorpagehead/index.html +47 -47
- data/_includes/authors/authors.html +39 -39
- data/_includes/batch-conversion.html +141 -141
- data/_includes/bookmark.html +6 -6
- data/_includes/cssfile/links.html +54 -54
- data/_includes/custom-head.html +138 -138
- data/_includes/customCode.html +1 -1
- data/_includes/customScripts.html +1 -1
- data/_includes/customblog/pageRelatedPosts.html +87 -87
- data/_includes/customblog/recentposts.html +67 -67
- data/_includes/customblog/relatedBlogs.html +86 -86
- data/_includes/customblog/relatedposts.html +201 -201
- data/_includes/dropdown/langdropdown.html +32 -32
- data/_includes/feature.html +39 -39
- data/_includes/featurePageAuthors/featurePageAuthors.html +101 -101
- data/_includes/footer/index.html +537 -537
- data/_includes/google-analytics.html +32 -32
- data/_includes/head/index.html +623 -623
- data/_includes/header/blogHeader.html +34 -34
- data/_includes/header/index.html +192 -192
- data/_includes/infographics/infographics.html +241 -241
- data/_includes/paginationBlogPage.html +70 -70
- data/_includes/postbox.html +65 -32
- data/_includes/script.html +493 -493
- data/_includes/section/count.html +32 -32
- data/_includes/section/recent_posts.html +94 -66
- data/_includes/section/related_categories_post.html +196 -196
- data/_includes/share/socialshare.html +21 -21
- data/_includes/userTracking.html +14 -14
- data/_layouts/aboutUs.html +175 -99
- data/_layouts/allAuthors.html +131 -131
- data/_layouts/appscms-about.html +163 -163
- data/_layouts/appscms-audio.html +33 -33
- data/_layouts/appscms-author.html +436 -436
- data/_layouts/appscms-authors.html +145 -171
- data/_layouts/appscms-batch.html +141 -141
- data/_layouts/appscms-blog.html +94 -55
- data/_layouts/appscms-calculator.html +93 -93
- data/_layouts/appscms-categories.html +26 -26
- data/_layouts/appscms-contact.html +132 -132
- data/_layouts/appscms-disclaimer.html +124 -124
- data/_layouts/appscms-download.html +289 -289
- data/_layouts/appscms-feature-result.html +96 -96
- data/_layouts/appscms-help.html +25 -25
- data/_layouts/appscms-imagekit.html +96 -96
- data/_layouts/appscms-post.html +243 -243
- data/_layouts/appscms-privacy-policy.html +781 -781
- data/_layouts/appscms-terms-and-conditions.html +646 -646
- data/_layouts/appscms-video.html +33 -33
- data/_layouts/audio.html +33 -33
- data/_layouts/author.html +409 -409
- data/_layouts/batch.html +177 -177
- data/_layouts/blog-1.html +116 -84
- data/_layouts/blog.html +131 -131
- data/_layouts/calculator.html +99 -99
- data/_layouts/contenttool-feature.html +45 -45
- data/_layouts/contenttool-home.html +53 -53
- data/_layouts/devtool-blog.html +132 -132
- data/_layouts/devtool-feature.html +54 -54
- data/_layouts/devtool-home.html +53 -53
- data/_layouts/devtools.html +57 -57
- data/_layouts/feature-1.html +406 -406
- data/_layouts/feature.html +351 -351
- data/_layouts/featureResultPage.html +82 -82
- data/_layouts/frame.html +222 -222
- data/_layouts/home.html +281 -281
- data/_layouts/homeResultPage.html +32 -32
- data/_layouts/imagekit.html +308 -308
- data/_layouts/photo-effects-home.html +190 -190
- data/_layouts/post.html +233 -233
- data/assets/app.js +75 -75
- data/assets/css/appscms-blog.css +505 -505
- data/assets/css/appscms-contenttool.css +1384 -1384
- data/assets/css/appscms-home.css +5 -5
- data/assets/css/appscms-imagekit.css +855 -855
- data/assets/css/appscms-variables.css +19 -19
- data/assets/css/blog.css +510 -510
- data/assets/css/calculators.css +46 -46
- data/assets/css/devtool-main.css +1350 -1350
- data/assets/css/devtools.css +105 -105
- data/assets/css/feature-1.css +293 -293
- data/assets/css/imagekit copy.css +848 -848
- data/assets/css/imagekit.css +848 -848
- data/assets/css/tools.css +1847 -1847
- data/assets/images/close-button.svg +31 -31
- data/assets/images/digipaint.svg +6 -6
- data/assets/images/logo.svg +2 -2
- data/assets/images/manthink.svg +3552 -3552
- data/assets/images/search-icon.svg +2 -2
- data/assets/js/batch.js +256 -256
- data/assets/js/devtools.js +81 -81
- data/assets/js/sharePage.js +65 -65
- data/assets/js/usageTracking.js +143 -143
- data/assets/js/usageTrackingEvents.js +6 -6
- data/assets/js/webvitals.js +4 -4
- metadata +3 -3
|
@@ -1,82 +1,82 @@
|
|
|
1
|
-
{% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
|
|
2
|
-
= page.folderName %} {% assign featureData= site.data[folder][lang][file] %}
|
|
3
|
-
<!DOCTYPE html>
|
|
4
|
-
<html lang="{{lang}}">
|
|
5
|
-
{% include head/index.html %}
|
|
6
|
-
|
|
7
|
-
<body>
|
|
8
|
-
{% include header/index.html %}
|
|
9
|
-
<div class="appscms-sidebar-left"></div>
|
|
10
|
-
<div class="appscms-sidebar-right"></div>
|
|
11
|
-
<div class="flex-container pb-3">
|
|
12
|
-
<div class="flex-class py-4 mt-4 mt-md-0">
|
|
13
|
-
<div class="d-flex justify-content-center align-items-center">
|
|
14
|
-
<span class="fHhdVc">
|
|
15
|
-
<div class="div-cont feature-img mr-2">
|
|
16
|
-
{%- if featureData.img -%}
|
|
17
|
-
<img
|
|
18
|
-
style="width:{{featureData.imgwidth}};height:{{featureData.imgheight}};"
|
|
19
|
-
src="{{featureData.img}}"
|
|
20
|
-
alt="{{featureData.imgalt}}"
|
|
21
|
-
{%-
|
|
22
|
-
if
|
|
23
|
-
site.crossorigin
|
|
24
|
-
-%}
|
|
25
|
-
crossorigin
|
|
26
|
-
{%-
|
|
27
|
-
endif
|
|
28
|
-
-%}
|
|
29
|
-
/>
|
|
30
|
-
{%- else -%}
|
|
31
|
-
<svg
|
|
32
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
33
|
-
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
34
|
-
viewBox="0 0 36 36"
|
|
35
|
-
fill="#000"
|
|
36
|
-
>
|
|
37
|
-
<path
|
|
38
|
-
d="M6,6 L9,18 L6,30 L18,27 L30,30 L27,18 L30,6 L18,9 L6,6 Z M3,3 L18,6.75 L33,3 L29.25,18 L33,33 L18,29.25 L3,33 L6.75,18 L3,3 Z"
|
|
39
|
-
></path>
|
|
40
|
-
</svg>
|
|
41
|
-
{%- endif -%}
|
|
42
|
-
</div>
|
|
43
|
-
</span>
|
|
44
|
-
</div>
|
|
45
|
-
<div id="heading-div" style="height: 60px"></div>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
{%- if site.noFeatureBox == true -%}
|
|
49
|
-
<div class="feature-content-box">{{content}}</div>
|
|
50
|
-
{%- else -%} {%- if page.noBox == true -%}
|
|
51
|
-
<div class="feature-content-box">{{content}}</div>
|
|
52
|
-
{%- else -%}
|
|
53
|
-
<div class="box-padding">
|
|
54
|
-
<div class="d-flex" id="__cond-922051">
|
|
55
|
-
<div class="flex-container">
|
|
56
|
-
<div class="flex-class">
|
|
57
|
-
<div class="d-flex flex-column">
|
|
58
|
-
<div
|
|
59
|
-
class="box"
|
|
60
|
-
style="background:{{featureData.color}};min-height:{{featureData.height}};width:{{featureData.width}}"
|
|
61
|
-
>
|
|
62
|
-
<div class="box-border"></div>
|
|
63
|
-
<div class="content-box">{{content}}</div>
|
|
64
|
-
</div>
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
</div>
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
|
|
71
|
-
{%- endif -%} {%- endif -%} {%- if site.userTrackingCount -%} {%- include
|
|
72
|
-
userTracking.html -%} {%- endif -%} {% include footer/index.html %} {%
|
|
73
|
-
include script.html %}
|
|
74
|
-
|
|
75
|
-
<script
|
|
76
|
-
defer
|
|
77
|
-
src="/assets/js/featureResult.js"
|
|
78
|
-
data-foldername="{{page.folderName}}"
|
|
79
|
-
data-lang="{{page.lang}}"
|
|
80
|
-
></script>
|
|
81
|
-
</body>
|
|
82
|
-
</html>
|
|
1
|
+
{% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
|
|
2
|
+
= page.folderName %} {% assign featureData= site.data[folder][lang][file] %}
|
|
3
|
+
<!DOCTYPE html>
|
|
4
|
+
<html lang="{{lang}}">
|
|
5
|
+
{% include head/index.html %}
|
|
6
|
+
|
|
7
|
+
<body>
|
|
8
|
+
{% include header/index.html %}
|
|
9
|
+
<div class="appscms-sidebar-left"></div>
|
|
10
|
+
<div class="appscms-sidebar-right"></div>
|
|
11
|
+
<div class="flex-container pb-3">
|
|
12
|
+
<div class="flex-class py-4 mt-4 mt-md-0">
|
|
13
|
+
<div class="d-flex justify-content-center align-items-center">
|
|
14
|
+
<span class="fHhdVc">
|
|
15
|
+
<div class="div-cont feature-img mr-2">
|
|
16
|
+
{%- if featureData.img -%}
|
|
17
|
+
<img
|
|
18
|
+
style="width:{{featureData.imgwidth}};height:{{featureData.imgheight}};"
|
|
19
|
+
src="{{featureData.img}}"
|
|
20
|
+
alt="{{featureData.imgalt}}"
|
|
21
|
+
{%-
|
|
22
|
+
if
|
|
23
|
+
site.crossorigin
|
|
24
|
+
-%}
|
|
25
|
+
crossorigin
|
|
26
|
+
{%-
|
|
27
|
+
endif
|
|
28
|
+
-%}
|
|
29
|
+
/>
|
|
30
|
+
{%- else -%}
|
|
31
|
+
<svg
|
|
32
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
33
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
34
|
+
viewBox="0 0 36 36"
|
|
35
|
+
fill="#000"
|
|
36
|
+
>
|
|
37
|
+
<path
|
|
38
|
+
d="M6,6 L9,18 L6,30 L18,27 L30,30 L27,18 L30,6 L18,9 L6,6 Z M3,3 L18,6.75 L33,3 L29.25,18 L33,33 L18,29.25 L3,33 L6.75,18 L3,3 Z"
|
|
39
|
+
></path>
|
|
40
|
+
</svg>
|
|
41
|
+
{%- endif -%}
|
|
42
|
+
</div>
|
|
43
|
+
</span>
|
|
44
|
+
</div>
|
|
45
|
+
<div id="heading-div" style="height: 60px"></div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
{%- if site.noFeatureBox == true -%}
|
|
49
|
+
<div class="feature-content-box">{{content}}</div>
|
|
50
|
+
{%- else -%} {%- if page.noBox == true -%}
|
|
51
|
+
<div class="feature-content-box">{{content}}</div>
|
|
52
|
+
{%- else -%}
|
|
53
|
+
<div class="box-padding">
|
|
54
|
+
<div class="d-flex" id="__cond-922051">
|
|
55
|
+
<div class="flex-container">
|
|
56
|
+
<div class="flex-class">
|
|
57
|
+
<div class="d-flex flex-column">
|
|
58
|
+
<div
|
|
59
|
+
class="box"
|
|
60
|
+
style="background:{{featureData.color}};min-height:{{featureData.height}};width:{{featureData.width}}"
|
|
61
|
+
>
|
|
62
|
+
<div class="box-border"></div>
|
|
63
|
+
<div class="content-box">{{content}}</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
{%- endif -%} {%- endif -%} {%- if site.userTrackingCount -%} {%- include
|
|
72
|
+
userTracking.html -%} {%- endif -%} {% include footer/index.html %} {%
|
|
73
|
+
include script.html %}
|
|
74
|
+
|
|
75
|
+
<script
|
|
76
|
+
defer
|
|
77
|
+
src="/assets/js/featureResult.js"
|
|
78
|
+
data-foldername="{{page.folderName}}"
|
|
79
|
+
data-lang="{{page.lang}}"
|
|
80
|
+
></script>
|
|
81
|
+
</body>
|
|
82
|
+
</html>
|
data/_layouts/frame.html
CHANGED
|
@@ -1,223 +1,223 @@
|
|
|
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
|
-
|
|
116
|
-
|
|
117
|
-
{%- endif -%}
|
|
118
|
-
|
|
119
|
-
</div>
|
|
120
|
-
<div class="row">
|
|
121
|
-
<div id="workspace" data-name="together_forever" style="display: none;">
|
|
122
|
-
<div class="row">
|
|
123
|
-
<div class="col-12 mb-4">
|
|
124
|
-
<div class="d-flex justify-content-between">
|
|
125
|
-
<div class="result-info">
|
|
126
|
-
<a href="{{page.permalink}}" target="_blank">{{page.featureName}}</a>
|
|
127
|
-
<i class="fas fa-chevron-right"></i>
|
|
128
|
-
<div>result</div>
|
|
129
|
-
</div>
|
|
130
|
-
<button id="download-button"
|
|
131
|
-
style=" background: linear-gradient(to right, var(--pink), var(--purple));"><svg
|
|
132
|
-
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
133
|
-
<path
|
|
134
|
-
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" />
|
|
135
|
-
</svg>Download</button>
|
|
136
|
-
</div>
|
|
137
|
-
|
|
138
|
-
</div>
|
|
139
|
-
<div class="col-md-12 mx-auto">
|
|
140
|
-
<div class="select-img-panel">
|
|
141
|
-
<div id="saving-data" style="display: block;">
|
|
142
|
-
<img loading="lazy" src="/assets/images/loader.gif" alt="saving"> <span
|
|
143
|
-
class="ml-2">Saving
|
|
144
|
-
your
|
|
145
|
-
images...</span>
|
|
146
|
-
</div>
|
|
147
|
-
<div id="canvas-panel">
|
|
148
|
-
</div>
|
|
149
|
-
</div>
|
|
150
|
-
</div>
|
|
151
|
-
|
|
152
|
-
</div>
|
|
153
|
-
</div>
|
|
154
|
-
</div>
|
|
155
|
-
|
|
156
|
-
<div class="crop-image-modal-container">
|
|
157
|
-
<div class="row w-100">
|
|
158
|
-
<div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
|
|
159
|
-
<div class="crop-image-modal-header" style="background:{{fileData.color}} ;">
|
|
160
|
-
<div>Select an area you would like to use</div>
|
|
161
|
-
<div>
|
|
162
|
-
<button onclick="closeModal()">
|
|
163
|
-
<i class="fas fa-times"></i>
|
|
164
|
-
</button>
|
|
165
|
-
</div>
|
|
166
|
-
</div>
|
|
167
|
-
<div class="crop-image-modal-body">
|
|
168
|
-
|
|
169
|
-
</div>
|
|
170
|
-
<div class="crop-btn-section">
|
|
171
|
-
<button id="crop" class="mx-auto my-3"
|
|
172
|
-
style=" background: linear-gradient(to right, var(--pink), var(--purple));">crop</button>
|
|
173
|
-
</div>
|
|
174
|
-
</div>
|
|
175
|
-
</div>
|
|
176
|
-
</div>
|
|
177
|
-
<div class="example-images-modal-container">
|
|
178
|
-
<div class="row w-100">
|
|
179
|
-
<div class="example-images-modal col-lg-6 col-md-8 mx-auto">
|
|
180
|
-
<div class="crop-image-modal-header" style="background:{{fileData.color}} ;">
|
|
181
|
-
<div>Examples</div>
|
|
182
|
-
<div>
|
|
183
|
-
<button onclick="closeExamplesModal()">
|
|
184
|
-
<i class="fas fa-times"></i>
|
|
185
|
-
</button>
|
|
186
|
-
</div>
|
|
187
|
-
</div>
|
|
188
|
-
<div class="example-images-modal-body">
|
|
189
|
-
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
|
|
190
|
-
<div class="carousel-inner w-75 mx-auto">
|
|
191
|
-
{%- for item in fileData.imageSamples -%}
|
|
192
|
-
{%- if forloop.index == 1 -%}
|
|
193
|
-
<div class="carousel-item active">
|
|
194
|
-
<img src="{{item}}" class="d-block w-100" alt="{{item}}">
|
|
195
|
-
</div>
|
|
196
|
-
{%- endif -%}
|
|
197
|
-
<div class="carousel-item">
|
|
198
|
-
<img src="{{item}}" class="d-block w-100" alt="{{item}}">
|
|
199
|
-
</div>
|
|
200
|
-
{%- endfor -%}
|
|
201
|
-
</div>
|
|
202
|
-
<button class="carousel-control-prev" type="button"
|
|
203
|
-
data-target="#carouselExampleFade" data-slide="prev">
|
|
204
|
-
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
205
|
-
<span class="sr-only">Previous</span>
|
|
206
|
-
</button>
|
|
207
|
-
<button class="carousel-control-next" type="button"
|
|
208
|
-
data-target="#carouselExampleFade" data-slide="next">
|
|
209
|
-
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
210
|
-
<span class="sr-only">Next</span>
|
|
211
|
-
</button>
|
|
212
|
-
</div>
|
|
213
|
-
</div>
|
|
214
|
-
|
|
215
|
-
</div>
|
|
216
|
-
</div>
|
|
217
|
-
</div>
|
|
218
|
-
|
|
219
|
-
</div>
|
|
220
|
-
</div>
|
|
221
|
-
</div>
|
|
222
|
-
|
|
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
|
+
|
|
116
|
+
|
|
117
|
+
{%- endif -%}
|
|
118
|
+
|
|
119
|
+
</div>
|
|
120
|
+
<div class="row">
|
|
121
|
+
<div id="workspace" data-name="together_forever" style="display: none;">
|
|
122
|
+
<div class="row">
|
|
123
|
+
<div class="col-12 mb-4">
|
|
124
|
+
<div class="d-flex justify-content-between">
|
|
125
|
+
<div class="result-info">
|
|
126
|
+
<a href="{{page.permalink}}" target="_blank">{{page.featureName}}</a>
|
|
127
|
+
<i class="fas fa-chevron-right"></i>
|
|
128
|
+
<div>result</div>
|
|
129
|
+
</div>
|
|
130
|
+
<button id="download-button"
|
|
131
|
+
style=" background: linear-gradient(to right, var(--pink), var(--purple));"><svg
|
|
132
|
+
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
133
|
+
<path
|
|
134
|
+
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" />
|
|
135
|
+
</svg>Download</button>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
</div>
|
|
139
|
+
<div class="col-md-12 mx-auto">
|
|
140
|
+
<div class="select-img-panel">
|
|
141
|
+
<div id="saving-data" style="display: block;">
|
|
142
|
+
<img loading="lazy" src="/assets/images/loader.gif" alt="saving"> <span
|
|
143
|
+
class="ml-2">Saving
|
|
144
|
+
your
|
|
145
|
+
images...</span>
|
|
146
|
+
</div>
|
|
147
|
+
<div id="canvas-panel">
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
<div class="crop-image-modal-container">
|
|
157
|
+
<div class="row w-100">
|
|
158
|
+
<div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
|
|
159
|
+
<div class="crop-image-modal-header" style="background:{{fileData.color}} ;">
|
|
160
|
+
<div>Select an area you would like to use</div>
|
|
161
|
+
<div>
|
|
162
|
+
<button onclick="closeModal()">
|
|
163
|
+
<i class="fas fa-times"></i>
|
|
164
|
+
</button>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
<div class="crop-image-modal-body">
|
|
168
|
+
|
|
169
|
+
</div>
|
|
170
|
+
<div class="crop-btn-section">
|
|
171
|
+
<button id="crop" class="mx-auto my-3"
|
|
172
|
+
style=" background: linear-gradient(to right, var(--pink), var(--purple));">crop</button>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="example-images-modal-container">
|
|
178
|
+
<div class="row w-100">
|
|
179
|
+
<div class="example-images-modal col-lg-6 col-md-8 mx-auto">
|
|
180
|
+
<div class="crop-image-modal-header" style="background:{{fileData.color}} ;">
|
|
181
|
+
<div>Examples</div>
|
|
182
|
+
<div>
|
|
183
|
+
<button onclick="closeExamplesModal()">
|
|
184
|
+
<i class="fas fa-times"></i>
|
|
185
|
+
</button>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="example-images-modal-body">
|
|
189
|
+
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
|
|
190
|
+
<div class="carousel-inner w-75 mx-auto">
|
|
191
|
+
{%- for item in fileData.imageSamples -%}
|
|
192
|
+
{%- if forloop.index == 1 -%}
|
|
193
|
+
<div class="carousel-item active">
|
|
194
|
+
<img src="{{item}}" class="d-block w-100" alt="{{item}}">
|
|
195
|
+
</div>
|
|
196
|
+
{%- endif -%}
|
|
197
|
+
<div class="carousel-item">
|
|
198
|
+
<img src="{{item}}" class="d-block w-100" alt="{{item}}">
|
|
199
|
+
</div>
|
|
200
|
+
{%- endfor -%}
|
|
201
|
+
</div>
|
|
202
|
+
<button class="carousel-control-prev" type="button"
|
|
203
|
+
data-target="#carouselExampleFade" data-slide="prev">
|
|
204
|
+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
205
|
+
<span class="sr-only">Previous</span>
|
|
206
|
+
</button>
|
|
207
|
+
<button class="carousel-control-next" type="button"
|
|
208
|
+
data-target="#carouselExampleFade" data-slide="next">
|
|
209
|
+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
210
|
+
<span class="sr-only">Next</span>
|
|
211
|
+
</button>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
|
|
223
223
|
</div>
|