appscms-tools-theme 4.8.3 → 4.8.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (145) hide show
  1. checksums.yaml +4 -4
  2. data/_data/.DS_Store +0 -0
  3. data/_data/about/en/about.json +16 -16
  4. data/_data/blog/nav.json +14 -14
  5. data/_data/blog/relatedblogs.json +2816 -2816
  6. data/_data/feature/en/batch-conversion.json +192 -192
  7. data/_data/feature/en/compress-pdf.json +223 -223
  8. data/_data/feature/en/devtools.json +321 -321
  9. data/_data/feature/en/face-detection.json +156 -156
  10. data/_data/feature/en/split-pdf.json +221 -221
  11. data/_data/feature/en/theframe.json +160 -160
  12. data/_data/footer/en/data.json +264 -264
  13. data/_data/header/en/data.json +672 -672
  14. data/_data/home/en/en.json +250 -250
  15. data/_data/home/en/posters.json +322 -322
  16. data/_data/home-1/en/en.json +236 -236
  17. data/_data/noindexURLs.json +23 -0
  18. data/_includes/.DS_Store +0 -0
  19. data/_includes/alternates/alternates.html +64 -89
  20. data/_includes/appscms/customblog/contenttool-recent-posts.html +94 -94
  21. data/_includes/appscms/customblog/pageRelatedPosts.html +68 -68
  22. data/_includes/appscms/customblog/recentposts.html +67 -67
  23. data/_includes/appscms/customblog/relatedBlogs.html +82 -82
  24. data/_includes/appscms/customblog/relatedposts.html +193 -193
  25. data/_includes/appscms/extras/appscms-postbox.html +57 -57
  26. data/_includes/appscms/featurePageAuthors/featurePageAuthors.html +85 -85
  27. data/_includes/appscms/head/bloghead.html +128 -128
  28. data/_includes/appscms/headings/contenttool-headings.html +33 -33
  29. data/_includes/appscms/headings/devtool-headings.html +38 -38
  30. data/_includes/appscms/home/contenttool-feature-boxes.html +19 -19
  31. data/_includes/appscms/home/devtool-feature-boxes.html +70 -70
  32. data/_includes/appscms/infographics/infographics.html +241 -32
  33. data/_includes/appscms/loaders/loader.html +4 -4
  34. data/_includes/appscms/navbars/devtool-navbar.html +50 -50
  35. data/_includes/appscms/navbars/devtool-toolbar.html +100 -100
  36. data/_includes/appscms/navbars/navbar.html +129 -75
  37. data/_includes/appscms/navbars/toolbar.html +326 -139
  38. data/_includes/appscms/recent-posts/recent_posts.html +90 -90
  39. data/_includes/appscms/recent-posts/related_categories_post.html +194 -194
  40. data/_includes/appscms/searchbar/devtool-searchbar.html +63 -63
  41. data/_includes/appscms/usp/usp.html +90 -90
  42. data/_includes/author_bio.html +41 -41
  43. data/_includes/authorpagehead/index.html +47 -47
  44. data/_includes/authors/authors.html +39 -39
  45. data/_includes/batch-conversion.html +141 -141
  46. data/_includes/bookmark.html +6 -6
  47. data/_includes/cssfile/links.html +54 -54
  48. data/_includes/custom-head.html +138 -138
  49. data/_includes/customCode.html +1 -1
  50. data/_includes/customScripts.html +1 -1
  51. data/_includes/customblog/pageRelatedPosts.html +87 -87
  52. data/_includes/customblog/recentposts.html +67 -67
  53. data/_includes/customblog/relatedBlogs.html +86 -86
  54. data/_includes/customblog/relatedposts.html +201 -201
  55. data/_includes/dropdown/langdropdown.html +32 -32
  56. data/_includes/feature.html +39 -39
  57. data/_includes/featurePageAuthors/featurePageAuthors.html +101 -101
  58. data/_includes/footer/index.html +537 -537
  59. data/_includes/google-analytics.html +32 -32
  60. data/_includes/head/index.html +627 -627
  61. data/_includes/header/blogHeader.html +34 -34
  62. data/_includes/header/index.html +152 -152
  63. data/_includes/infographics/infographics.html +244 -244
  64. data/_includes/internationalization-section.html +64 -47
  65. data/_includes/paginationBlogPage.html +70 -70
  66. data/_includes/postbox.html +65 -65
  67. data/_includes/script.html +493 -493
  68. data/_includes/section/count.html +32 -32
  69. data/_includes/section/recent_posts.html +94 -94
  70. data/_includes/section/related_categories_post.html +196 -196
  71. data/_includes/share/socialshare.html +21 -21
  72. data/_includes/userTracking.html +14 -14
  73. data/_layouts/aboutUs.html +175 -175
  74. data/_layouts/allAuthors.html +131 -131
  75. data/_layouts/appscms-about.html +163 -163
  76. data/_layouts/appscms-audio.html +33 -33
  77. data/_layouts/appscms-author.html +436 -436
  78. data/_layouts/appscms-authors.html +145 -145
  79. data/_layouts/appscms-batch.html +141 -141
  80. data/_layouts/appscms-calculator.html +93 -93
  81. data/_layouts/appscms-categories.html +26 -26
  82. data/_layouts/appscms-contact.html +132 -132
  83. data/_layouts/appscms-disclaimer.html +124 -124
  84. data/_layouts/appscms-download.html +289 -289
  85. data/_layouts/appscms-feature-result.html +96 -96
  86. data/_layouts/appscms-help.html +25 -25
  87. data/_layouts/appscms-imagekit.html +96 -96
  88. data/_layouts/appscms-post.html +243 -243
  89. data/_layouts/appscms-privacy-policy.html +781 -781
  90. data/_layouts/appscms-terms-and-conditions.html +646 -646
  91. data/_layouts/appscms-video.html +33 -33
  92. data/_layouts/audio.html +33 -33
  93. data/_layouts/author.html +409 -409
  94. data/_layouts/batch.html +177 -177
  95. data/_layouts/blog-1.html +116 -116
  96. data/_layouts/blog.html +131 -131
  97. data/_layouts/calculator.html +99 -99
  98. data/_layouts/contenttool-feature.html +42 -42
  99. data/_layouts/contenttool-home.html +53 -53
  100. data/_layouts/devtool-blog.html +132 -132
  101. data/_layouts/devtool-feature.html +54 -54
  102. data/_layouts/devtool-home.html +53 -53
  103. data/_layouts/devtools.html +57 -57
  104. data/_layouts/feature-1.html +285 -285
  105. data/_layouts/feature.html +351 -351
  106. data/_layouts/featureResultPage.html +82 -82
  107. data/_layouts/frame.html +222 -222
  108. data/_layouts/home-1.html +186 -186
  109. data/_layouts/home.html +375 -375
  110. data/_layouts/homeResultPage.html +32 -32
  111. data/_layouts/imagekit.html +308 -308
  112. data/_layouts/photo-effects-home.html +190 -190
  113. data/_layouts/post.html +233 -233
  114. data/assets/.DS_Store +0 -0
  115. data/assets/app.js +75 -75
  116. data/assets/css/appscms-blog.css +505 -505
  117. data/assets/css/appscms-contenttool.css +1384 -1384
  118. data/assets/css/appscms-home.css +5 -5
  119. data/assets/css/appscms-imagekit.css +855 -855
  120. data/assets/css/appscms-theme.css +11 -251
  121. data/assets/css/appscms-variables.css +24 -24
  122. data/assets/css/blog.css +510 -510
  123. data/assets/css/calculators.css +46 -46
  124. data/assets/css/common.css +944 -944
  125. data/assets/css/devtool-main.css +1350 -1350
  126. data/assets/css/devtools.css +105 -105
  127. data/assets/css/feature-1.css +293 -293
  128. data/assets/css/home-1.css +188 -188
  129. data/assets/css/imagekit copy.css +848 -848
  130. data/assets/css/imagekit.css +848 -848
  131. data/assets/css/tools.css +1846 -1846
  132. data/assets/images/close-button.svg +31 -31
  133. data/assets/images/digipaint.svg +6 -6
  134. data/assets/images/iconn.svg +12 -12
  135. data/assets/images/logo.svg +2 -2
  136. data/assets/images/manthink.svg +3552 -3552
  137. data/assets/images/search-icon.svg +2 -2
  138. data/assets/js/appscms-infographics.js +49 -49
  139. data/assets/js/batch.js +219 -219
  140. data/assets/js/devtools.js +81 -81
  141. data/assets/js/sharePage.js +65 -65
  142. data/assets/js/usageTracking.js +143 -143
  143. data/assets/js/usageTrackingEvents.js +6 -6
  144. data/assets/js/webvitals.js +4 -4
  145. metadata +5 -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>