appscms-tools-theme 4.6.2 → 4.6.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (131) hide show
  1. checksums.yaml +4 -4
  2. data/_data/about/en/about.json +16 -16
  3. data/_data/blog/nav.json +14 -14
  4. data/_data/blog/relatedblogs.json +2816 -2816
  5. data/_data/feature/en/batch-conversion.json +192 -192
  6. data/_data/feature/en/compress-pdf.json +209 -305
  7. data/_data/feature/en/devtools.json +321 -321
  8. data/_data/feature/en/face-detection.json +156 -156
  9. data/_data/feature/en/split-pdf.json +221 -221
  10. data/_data/feature/en/theframe.json +160 -160
  11. data/_data/footer/en/data.json +2 -2
  12. data/_data/header/en/data.json +412 -412
  13. data/_data/home/en/en.json +324 -324
  14. data/_data/home/en/posters.json +322 -322
  15. data/_includes/appscms/customblog/contenttool-recent-posts.html +94 -94
  16. data/_includes/appscms/customblog/pageRelatedPosts.html +68 -68
  17. data/_includes/appscms/customblog/recentposts.html +67 -67
  18. data/_includes/appscms/customblog/relatedBlogs.html +82 -82
  19. data/_includes/appscms/customblog/relatedposts.html +193 -193
  20. data/_includes/appscms/extras/appscms-postbox.html +57 -57
  21. data/_includes/appscms/featurePageAuthors/featurePageAuthors.html +85 -85
  22. data/_includes/appscms/head/bloghead.html +128 -128
  23. data/_includes/appscms/headings/contenttool-headings.html +33 -33
  24. data/_includes/appscms/headings/devtool-headings.html +38 -38
  25. data/_includes/appscms/home/contenttool-feature-boxes.html +19 -19
  26. data/_includes/appscms/home/devtool-feature-boxes.html +70 -70
  27. data/_includes/appscms/infographics/infographics.html +166 -166
  28. data/_includes/appscms/loaders/loader.html +4 -4
  29. data/_includes/appscms/navbars/devtool-navbar.html +50 -50
  30. data/_includes/appscms/navbars/devtool-toolbar.html +100 -100
  31. data/_includes/appscms/navbars/toolbar.html +4 -17
  32. data/_includes/appscms/recent-posts/recent_posts.html +90 -90
  33. data/_includes/appscms/recent-posts/related_categories_post.html +194 -194
  34. data/_includes/appscms/searchbar/devtool-searchbar.html +63 -63
  35. data/_includes/appscms/usp/usp.html +90 -90
  36. data/_includes/author_bio.html +41 -41
  37. data/_includes/authorpagehead/index.html +47 -47
  38. data/_includes/authors/authors.html +39 -39
  39. data/_includes/batch-conversion.html +141 -141
  40. data/_includes/bookmark.html +6 -6
  41. data/_includes/cssfile/links.html +54 -54
  42. data/_includes/custom-head.html +138 -138
  43. data/_includes/customCode.html +1 -1
  44. data/_includes/customScripts.html +1 -1
  45. data/_includes/customblog/pageRelatedPosts.html +87 -87
  46. data/_includes/customblog/recentposts.html +67 -67
  47. data/_includes/customblog/relatedBlogs.html +86 -86
  48. data/_includes/customblog/relatedposts.html +201 -201
  49. data/_includes/dropdown/langdropdown.html +32 -32
  50. data/_includes/feature.html +39 -39
  51. data/_includes/featurePageAuthors/featurePageAuthors.html +101 -101
  52. data/_includes/footer/index.html +537 -537
  53. data/_includes/google-analytics.html +32 -32
  54. data/_includes/head/index.html +623 -623
  55. data/_includes/header/blogHeader.html +34 -34
  56. data/_includes/header/index.html +192 -192
  57. data/_includes/infographics/infographics.html +241 -241
  58. data/_includes/paginationBlogPage.html +70 -70
  59. data/_includes/postbox.html +65 -65
  60. data/_includes/script.html +493 -493
  61. data/_includes/section/count.html +32 -32
  62. data/_includes/section/recent_posts.html +94 -94
  63. data/_includes/section/related_categories_post.html +196 -196
  64. data/_includes/share/socialshare.html +21 -21
  65. data/_includes/userTracking.html +14 -14
  66. data/_layouts/aboutUs.html +175 -175
  67. data/_layouts/allAuthors.html +131 -131
  68. data/_layouts/appscms-about.html +163 -163
  69. data/_layouts/appscms-audio.html +33 -33
  70. data/_layouts/appscms-author.html +436 -436
  71. data/_layouts/appscms-authors.html +145 -145
  72. data/_layouts/appscms-batch.html +141 -141
  73. data/_layouts/appscms-calculator.html +93 -93
  74. data/_layouts/appscms-categories.html +26 -26
  75. data/_layouts/appscms-contact.html +132 -132
  76. data/_layouts/appscms-disclaimer.html +124 -124
  77. data/_layouts/appscms-download.html +289 -289
  78. data/_layouts/appscms-feature-result.html +96 -96
  79. data/_layouts/appscms-help.html +25 -25
  80. data/_layouts/appscms-imagekit.html +96 -96
  81. data/_layouts/appscms-post.html +243 -243
  82. data/_layouts/appscms-privacy-policy.html +781 -781
  83. data/_layouts/appscms-terms-and-conditions.html +646 -646
  84. data/_layouts/appscms-video.html +33 -33
  85. data/_layouts/audio.html +33 -33
  86. data/_layouts/author.html +409 -409
  87. data/_layouts/batch.html +177 -177
  88. data/_layouts/blog-1.html +116 -116
  89. data/_layouts/blog.html +131 -131
  90. data/_layouts/calculator.html +99 -99
  91. data/_layouts/contenttool-feature.html +45 -45
  92. data/_layouts/contenttool-home.html +53 -53
  93. data/_layouts/devtool-blog.html +132 -132
  94. data/_layouts/devtool-feature.html +54 -54
  95. data/_layouts/devtool-home.html +53 -53
  96. data/_layouts/devtools.html +57 -57
  97. data/_layouts/feature-1.html +406 -406
  98. data/_layouts/feature.html +351 -351
  99. data/_layouts/featureResultPage.html +82 -82
  100. data/_layouts/frame.html +222 -222
  101. data/_layouts/home.html +281 -281
  102. data/_layouts/homeResultPage.html +32 -32
  103. data/_layouts/imagekit.html +308 -308
  104. data/_layouts/photo-effects-home.html +190 -190
  105. data/_layouts/post.html +233 -233
  106. data/assets/app.js +75 -75
  107. data/assets/css/appscms-blog.css +505 -505
  108. data/assets/css/appscms-contenttool.css +1384 -1384
  109. data/assets/css/appscms-home.css +5 -5
  110. data/assets/css/appscms-imagekit.css +855 -855
  111. data/assets/css/appscms-variables.css +19 -19
  112. data/assets/css/blog.css +510 -510
  113. data/assets/css/calculators.css +46 -46
  114. data/assets/css/devtool-main.css +1350 -1350
  115. data/assets/css/devtools.css +105 -105
  116. data/assets/css/feature-1.css +293 -293
  117. data/assets/css/imagekit copy.css +848 -848
  118. data/assets/css/imagekit.css +848 -848
  119. data/assets/css/tools.css +1847 -1847
  120. data/assets/images/close-button.svg +31 -31
  121. data/assets/images/digipaint.svg +6 -6
  122. data/assets/images/logo.svg +2 -2
  123. data/assets/images/manthink.svg +3552 -3552
  124. data/assets/images/search-icon.svg +2 -2
  125. data/assets/js/batch.js +219 -219
  126. data/assets/js/devtools.js +81 -81
  127. data/assets/js/sharePage.js +65 -65
  128. data/assets/js/usageTracking.js +143 -143
  129. data/assets/js/usageTrackingEvents.js +6 -6
  130. data/assets/js/webvitals.js +4 -4
  131. metadata +3 -3
@@ -1,352 +1,352 @@
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="{{page.lang}}">
5
- {% include head/index.html %}
6
-
7
- <body>
8
- {% include header/index.html %} {%- if site.safeui -%}
9
- <div class="alert alert-{{featureData.variant | default: 'info'}} fade show text-center" role="alert"
10
- id="safeui-alert">
11
- <div class="container">
12
- {%- if featureData.alertmsg -%} {{featureData.alertmsg}} {%- else -%} We
13
- do not upload any files to server, hence your data is 100% secure. {%-
14
- endif -%}
15
- </div>
16
- </div>
17
- {%- endif -%} {%- if page.layout != "frame" and page.layout !=
18
- "photo-effects-home" and page.layout != "video" and page.layout != "audio"
19
- -%} {%- if site.newFeatureBox -%}
20
- <div class="appscms-sidebar-left"></div>
21
- <div class="appscms-sidebar-right"></div>
22
- {%- endif -%}
23
-
24
- <div class="flex-container pb-3">
25
- <div class="flex-class py-4 mt-4 mt-md-0">
26
- <div id="h1-img-wrapper" class="d-flex justify-content-center align-items-center">
27
- <span id="h1-img" class="fHhdVc">
28
- <div class="div-cont feature-img mr-2">
29
- {%- if featureData.img -%}
30
- <img style="width:{{featureData.imgwidth}};height:{{featureData.imgheight}};" src="{{featureData.img}}"
31
- alt="{{featureData.imgalt}}" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
32
- {%- else -%}
33
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 36 36"
34
- fill="#000">
35
- <path
36
- 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">
37
- </path>
38
- </svg>
39
- {%- endif -%}
40
- </div>
41
- </span>
42
- {%- assign featureh1 = featureData.H1 | replace: "$variable",
43
- page.value -%}
44
- <h1 id="feature-h1" class="feature-h1">
45
- {%- for word in featureh1-%} {%- if forloop.first == true -%} {{word
46
- | capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
47
- </h1>
48
- </div>
49
- {%- assign featureh2 = featureData.H2 | replace: "$variable", page.value
50
- -%}
51
- <h2 id="feature-h2" class="feature-h2">
52
- {%- for word in featureh2 -%} {%- if forloop.first == true -%} {{word
53
- | capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
54
- </h2>
55
- </div>
56
- </div>
57
-
58
- {%- endif -%} {%- if site.noFeatureBox == true -%}
59
- <div class="feature-content-box" id="theme-content-box">{{content}}</div>
60
- {%- elsif site.newFeatureBox and page.newBox -%}
61
- <div class="feature-content-box" id="theme-content-box">
62
- <div class="container">
63
- {%- assign boxColor =
64
- site.data[page.folderName][page.lang][page.fileName].color -%} {%- if
65
- page.removeBox != true -%}
66
- <div class="custom-box" data-color="{{boxColor}}">
67
- <div style="display: none" id="file-loader">
68
- <img src="/assets/images/spinner.gif" alt="spinner" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
69
- <p>Please Wait ,Loading Your file</p>
70
- </div>
71
- <div class="saving-file-download-wrap" style="display: none">
72
- <img loading="lazy" class="trust-img" src="/trust.svg" alt="trust" {%- if site.crossorigin -%} crossorigin {%-
73
- endif -%} />
74
- <p class="text-white my-2">Thanks for your patience</p>
75
- <button class="btn" id="download-zip">Download</button>
76
- </div>
77
- <div class="file-input" id="inputbox" style="color: #fff">
78
- <div class="m-auto">
79
- <div class="d-flex justify-content-center align-items-center">
80
- <div id="Inputbox" class="boxes" style="background: {{boxColor}};">
81
- <img height="21px" width="21px" src="/assets/images/add.svg" alt="add" {%- if site.crossorigin -%}
82
- crossorigin {%- endif -%} />
83
- <span class="ml-3 file-text">CHOOSE FILE</span>
84
- </div>
85
- <div class="file-pick-dropdown" style="background:{{boxColor}}">
86
- <i class="fas fa-angle-down arrow-sign"></i>
87
- <div class="file-picker-dropdown" style="display: none">
88
- <button id="filepicker">
89
- <svg class="mr-3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
90
- <path id="Path" d="M8.33331 3H15.6666L23 15H15.6666L8.33331 3Z" fill="#FFC107"></path>
91
- <path id="Path_2" d="M4.6012 21L8.30086 15H23L19.3333 21H4.6012Z" fill="#1976D2"></path>
92
- <path id="Path_3" d="M1 15.0625L4.60119 21L12 9L8.33333 3L1 15.0625Z" fill="#4CAF50"></path>
93
- </svg>
94
- Google Drive
95
- </button>
96
- <button id="dropbox">
97
- <svg class="mr-3" viewBox="0 0 24 24" fill="#0061FF" xmlns="http://www.w3.org/2000/svg">
98
- <path id="icon"
99
- d="M12.0146 6.57367L6.50732 10.1473L12.0146 13.721L6.50732 17.2947L1 13.6912L6.50732 10.1176L1 6.57367L6.50732 3L12.0146 6.57367ZM6.47803 18.4263L11.9854 14.8527L17.4927 18.4263L11.9854 22L6.47803 18.4263ZM12.0146 13.6912L17.522 10.1176L12.0146 6.57367L17.4927 3L23 6.57367L17.4927 10.1473L23 13.721L17.4927 17.2947L12.0146 13.6912Z">
100
- </path>
101
- </svg>
102
- Dropbox
103
- </button>
104
- </div>
105
- </div>
106
- </div>
107
- </div>
108
- <p id="dropfile" class="text-dark">or drop your file here</p>
109
- <p id="error" class="p-3"></p>
110
- </div>
111
- </div>
112
- <div class="workspace">
113
- <div class="row mx-auto">
114
- <div class="col-md-10 mx-auto">{{content}}</div>
115
- </div>
116
- </div>
117
- {%- endif -%}
118
- </div>
119
- </div>
120
- {%- else -%} {%- if page.noBox == true -%}
121
- <div class="feature-content-box" id="theme-content-box">{{content}}</div>
122
- {%- else -%}
123
- <div class="box-padding" id="theme-content-box">
124
- <div class="d-flex" id="__cond-922051">
125
- <div class="flex-container">
126
- <div class="flex-class">
127
- <div class="d-flex flex-column">
128
- <div class="box"
129
- style="background:{{featureData.color}};min-height:{{featureData.height}};width:{{featureData.width}}">
130
- <div class="box-border"></div>
131
- <div class="content-box">{{content}}</div>
132
- </div>
133
- </div>
134
- </div>
135
- </div>
136
- </div>
137
- </div>
138
- {%- endif -%} {%- endif -%} {%- if page.layout == "batch" -%}
139
- <div class="w-100 line" style="border-top: 1px solid rgb(224, 224, 224)"></div>
140
- {%- endif -%}
141
-
142
- <div class="container mt-4 mb-5">
143
- <div class="row px-0">
144
- {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
145
- <div class="col-md-9 mx-auto">
146
- <div class="row">
147
- {%- endif -%} {% assign totalHeaderCount = 0 %} {% for data in
148
- featureData.TEXTUAL_CONTENT %} {% assign words = data.header |
149
- split: " " %} {% assign word_count = words | size %} {% assign
150
- totalHeaderCount = totalHeaderCount | plus: word_count %} {% endfor
151
- %} {% for data in featureData.TEXTUAL_CONTENT %}
152
- <div
153
- class="{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%} col-md-6 my-4 {%- else -%} col-md-4 my-4 {%- endif -%}">
154
- <div>
155
- <img class="feature-card-img" src="{{data.logoUrl}}" loading="lazy" height="48px" width="48px"
156
- alt="{{data.header}}" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
157
-
158
- {%- if totalHeaderCount > site.count_of_words_in_headings -%}
159
- <h2 class="feature-card-title">
160
- {{data.header | replace: "$variable", page.value}}
161
- </h2>
162
- {%- else -%}
163
- <div class="feature-card-title">
164
- {{data.header | replace: "$variable", page.value}}
165
- </div>
166
- {%- endif -%}
167
- <div class="feature-card-desc">
168
- {{data.content | replace: "$variable", page.value}}
169
- </div>
170
- </div>
171
- </div>
172
- {% endfor %} {%- if site.monumetricId and page.url != '/' and
173
- page.lang == 'en' -%}
174
- </div>
175
- </div>
176
- {%- endif -%}
177
- </div>
178
- </div>
179
- <section class="how-to-section">
180
- <div class="container">
181
- <div class="row">
182
- {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
183
- <div class="col-md-9 mx-auto">
184
- <div class="row">
185
- {%- endif -%}
186
- <div class="col-md-6 order-0">
187
- {%- if featureData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
188
- <div class="how-to-video-wrapper">
189
- {% assign video_url =
190
- featureData.HOW_TO_CONTENT.YoutubeVideoUrl %} {% assign
191
- video_id = "" %} {% if video_url contains "youtu.be/" %} {%
192
- assign parts = video_url | split: "/" %} {% assign video_id =
193
- parts[3] %} {% elsif video_url contains "youtube.com/watch" %}
194
- {% assign params = video_url | split: "?" | last | split: "&"
195
- %} {% for param in params %} {% if param contains "v=" %} {%
196
- assign video_id = param | split: "=" | last %} {% endif %} {%
197
- endfor %} {% endif %}
198
- {%- if site.monumetricId -%}
199
- <div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
200
- <img class="youtubeVideoPlayer" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
201
- <div class="youtube-play-btn-wrapper">
202
- <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
203
- </div>
204
- </div>
205
- {%- else -%}
206
- <div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
207
- <img class="youtubeVideoPlayer" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
208
- <div class="youtube-play-btn-wrapper">
209
- <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
210
- </div>
211
- </div>
212
- {%- endif -%}
213
- </div>
214
- {%- else -%}
215
- <div class="how-to-img-wrapper">
216
- <img class="how-to-leftimg" height="180px" width="300px"
217
- src="{{featureData.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
218
- alt="{{featureData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}" {%- if site.crossorigin
219
- -%} crossorigin {%- endif -%} />
220
- </div>
221
- {%- endif -%}
222
- </div>
223
- <div class="col-md-6 order-1">
224
- <div class="how-to-right">
225
- <h3 class="how-to-title text-left">
226
- {{featureData.HOW_TO_CONTENT.heading | replace: "$variable",
227
- page.value}}
228
- </h3>
229
- <ol class="how-to-list">
230
- {% for data in featureData.HOW_TO_CONTENT.steps %}
231
-
232
- <li id="step{{forloop.index}}" class="how-to-list-item">
233
- <span>{{forloop.index}}.</span>{{data | replace:
234
- "$variable", page.value}}
235
- </li>
236
- {% endfor %}
237
- </ol>
238
- </div>
239
- </div>
240
- {%- if site.monumetricId and page.url != '/' and page.lang == 'en'
241
- -%}
242
- </div>
243
- </div>
244
- {%- endif -%}
245
- </div>
246
- </div>
247
- </section>
248
-
249
- {%- if page.layout == "feature" -%} {%- include bookmark.html -%} {%- endif
250
- -%} {%- assign showFaqs= true -%} {%- for item in site.noFaqsList -%} {%- if
251
- item == page.lang -%} {%- assign showFaqs = false -%} {%- break -%} {%- else
252
- -%} {%- assign showFaqs = true -%} {%- endif -%} {%- endfor -%} {%- if
253
- showFaqs == true -%} {%- if featureData.FAQ.size>0 -%}
254
- <section class="faq-section">
255
- <div class="container">
256
- <div class="row">
257
- <div class="col-md-8 mx-auto">
258
- <div class="faq">
259
- <h3 class="feature-h1 text-center mb-4">
260
- {{featureData.faqheading | default: 'Frequently Asked
261
- Questions'}}
262
- </h3>
263
- <ul class="list-unstyled">
264
- {% for data in featureData.FAQ %}
265
- <li>
266
- <h3 class="faq-question" itemprop="name">
267
- {{data.question | replace: "$variable", page.value}}<em style="transform: rotate(-135deg)">
268
- <i></i></em>
269
- </h3>
270
- <div style="display: block">
271
- <p class="faq-answer" itemprop="text">
272
- {{data.answer | replace: "$variable", page.value}}
273
- </p>
274
- </div>
275
- </li>
276
- {% endfor %}
277
- </ul>
278
- </div>
279
- </div>
280
- </div>
281
- </div>
282
- </section>
283
- {%- endif -%} {%- endif -%} {%- include share/socialshare.html -%} {%-
284
- include Rating/rating.html -%} {%- if featureData.infographics.size > 0 -%}
285
- {%- include infographics/infographics.html -%} {%- endif -%} {%- include
286
- /Usp/usp.html -%} {%- if featureData.display_formats -%}
287
- <div class="container compare-table">
288
- {%- include fileformat/fileformatdetail.html -%}
289
- </div>
290
- {%- endif -%} {%- if featureData.compare_formats -%}
291
- <div class="container file-detail-table">
292
- {%- include fileformat/comparisonfiles.html -%}
293
- </div>
294
-
295
- {%- endif -%} {%- if site.userTrackingCount -%} {%- include
296
- userTracking.html -%} {%- endif -%} {%- assign langen = "en" -%} {%- if
297
- site.data[folder][langen][file].categories -%} {% assign categories=
298
- site.data[folder][langen][file].categories %} {%- else -%} {% assign
299
- categories= page.categories %} {%- endif -%} {%- if
300
- site.data[folder][langen][file].tags -%} {% assign tags=
301
- site.data[folder][langen][file].tags %} {%- else -%} {% assign tags=
302
- page.tags %} {%- endif -%} {%- if featureData.posts.size > 0 -%} {%- include
303
- customblog/pageRelatedPosts.html -%} {%- else -%} {%- if categories.size > 0
304
- or tags.size > 0 -%} {%- include section/related_categories_post.html -%}
305
- {%- else -%} {%- include section/recent_posts.html -%} {%- endif -%} {%-
306
- endif -%} {%- if site.customblogdata -%} {%- if categories.size> 0 or
307
- tags.size>0-%} {%- include customblog/relatedposts.html -%} {%- else -%} {%-
308
- include customblog/recentposts.html -%} {% endif %} {%- endif -%}
309
-
310
- {%- if featureData.author.size > 0 -%}
311
- {% include featurePageAuthors/featurePageAuthors.html %}
312
- {%- endif -%}
313
-
314
- {% include
315
- footer/index.html %} {%- if site.customCode -%} {%- include customCode.html
316
- -%} {%- endif -%} {% include script.html %}
317
-
318
-
319
-
320
- {%- if featureData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
321
- <script>
322
- let videoContainer = document.querySelector('.how-to-video');
323
- let thumbnail = document.getElementById('thumbnail-img');
324
- let videoId = videoContainer.getAttribute("data-videoid")
325
- let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
326
- console.log(videoId)
327
-
328
- // Function to load video
329
- function loadVideo() {
330
- videoContainer.innerHTML = '<iframe loading="lazy" class="youtubeVideoPlayer" width="100%" height="100%" src="https://www.youtube.com/embed/' + videoId + '?autoplay=1&mute=1" allowfullscreen></iframe>';
331
- }
332
- // Function to handle lazy loading of the thumbnail
333
- function lazyLoadThumbnail(entries, observer) {
334
- entries.forEach(entry => {
335
- if (entry.isIntersecting) {
336
- // Load thumbnail when it becomes visible
337
- thumbnail.src = thumbnailUrl;
338
- // Stop observing once loaded
339
- observer.unobserve(entry.target);
340
- }
341
- });
342
- }
343
- // Set up the Intersection Observer
344
- var observer = new IntersectionObserver(lazyLoadThumbnail, { threshold: 0.1 });
345
- observer.observe(thumbnail);
346
- // Optionally, you can add an event listener to trigger video loading on click or other interactions
347
- thumbnail.addEventListener('click', loadVideo);
348
- </script>
349
- {%- endif -%}
350
- </body>
351
-
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="{{page.lang}}">
5
+ {% include head/index.html %}
6
+
7
+ <body>
8
+ {% include header/index.html %} {%- if site.safeui -%}
9
+ <div class="alert alert-{{featureData.variant | default: 'info'}} fade show text-center" role="alert"
10
+ id="safeui-alert">
11
+ <div class="container">
12
+ {%- if featureData.alertmsg -%} {{featureData.alertmsg}} {%- else -%} We
13
+ do not upload any files to server, hence your data is 100% secure. {%-
14
+ endif -%}
15
+ </div>
16
+ </div>
17
+ {%- endif -%} {%- if page.layout != "frame" and page.layout !=
18
+ "photo-effects-home" and page.layout != "video" and page.layout != "audio"
19
+ -%} {%- if site.newFeatureBox -%}
20
+ <div class="appscms-sidebar-left"></div>
21
+ <div class="appscms-sidebar-right"></div>
22
+ {%- endif -%}
23
+
24
+ <div class="flex-container pb-3">
25
+ <div class="flex-class py-4 mt-4 mt-md-0">
26
+ <div id="h1-img-wrapper" class="d-flex justify-content-center align-items-center">
27
+ <span id="h1-img" class="fHhdVc">
28
+ <div class="div-cont feature-img mr-2">
29
+ {%- if featureData.img -%}
30
+ <img style="width:{{featureData.imgwidth}};height:{{featureData.imgheight}};" src="{{featureData.img}}"
31
+ alt="{{featureData.imgalt}}" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
32
+ {%- else -%}
33
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 36 36"
34
+ fill="#000">
35
+ <path
36
+ 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">
37
+ </path>
38
+ </svg>
39
+ {%- endif -%}
40
+ </div>
41
+ </span>
42
+ {%- assign featureh1 = featureData.H1 | replace: "$variable",
43
+ page.value -%}
44
+ <h1 id="feature-h1" class="feature-h1">
45
+ {%- for word in featureh1-%} {%- if forloop.first == true -%} {{word
46
+ | capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
47
+ </h1>
48
+ </div>
49
+ {%- assign featureh2 = featureData.H2 | replace: "$variable", page.value
50
+ -%}
51
+ <h2 id="feature-h2" class="feature-h2">
52
+ {%- for word in featureh2 -%} {%- if forloop.first == true -%} {{word
53
+ | capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
54
+ </h2>
55
+ </div>
56
+ </div>
57
+
58
+ {%- endif -%} {%- if site.noFeatureBox == true -%}
59
+ <div class="feature-content-box" id="theme-content-box">{{content}}</div>
60
+ {%- elsif site.newFeatureBox and page.newBox -%}
61
+ <div class="feature-content-box" id="theme-content-box">
62
+ <div class="container">
63
+ {%- assign boxColor =
64
+ site.data[page.folderName][page.lang][page.fileName].color -%} {%- if
65
+ page.removeBox != true -%}
66
+ <div class="custom-box" data-color="{{boxColor}}">
67
+ <div style="display: none" id="file-loader">
68
+ <img src="/assets/images/spinner.gif" alt="spinner" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
69
+ <p>Please Wait ,Loading Your file</p>
70
+ </div>
71
+ <div class="saving-file-download-wrap" style="display: none">
72
+ <img loading="lazy" class="trust-img" src="/trust.svg" alt="trust" {%- if site.crossorigin -%} crossorigin {%-
73
+ endif -%} />
74
+ <p class="text-white my-2">Thanks for your patience</p>
75
+ <button class="btn" id="download-zip">Download</button>
76
+ </div>
77
+ <div class="file-input" id="inputbox" style="color: #fff">
78
+ <div class="m-auto">
79
+ <div class="d-flex justify-content-center align-items-center">
80
+ <div id="Inputbox" class="boxes" style="background: {{boxColor}};">
81
+ <img height="21px" width="21px" src="/assets/images/add.svg" alt="add" {%- if site.crossorigin -%}
82
+ crossorigin {%- endif -%} />
83
+ <span class="ml-3 file-text">CHOOSE FILE</span>
84
+ </div>
85
+ <div class="file-pick-dropdown" style="background:{{boxColor}}">
86
+ <i class="fas fa-angle-down arrow-sign"></i>
87
+ <div class="file-picker-dropdown" style="display: none">
88
+ <button id="filepicker">
89
+ <svg class="mr-3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
90
+ <path id="Path" d="M8.33331 3H15.6666L23 15H15.6666L8.33331 3Z" fill="#FFC107"></path>
91
+ <path id="Path_2" d="M4.6012 21L8.30086 15H23L19.3333 21H4.6012Z" fill="#1976D2"></path>
92
+ <path id="Path_3" d="M1 15.0625L4.60119 21L12 9L8.33333 3L1 15.0625Z" fill="#4CAF50"></path>
93
+ </svg>
94
+ Google Drive
95
+ </button>
96
+ <button id="dropbox">
97
+ <svg class="mr-3" viewBox="0 0 24 24" fill="#0061FF" xmlns="http://www.w3.org/2000/svg">
98
+ <path id="icon"
99
+ d="M12.0146 6.57367L6.50732 10.1473L12.0146 13.721L6.50732 17.2947L1 13.6912L6.50732 10.1176L1 6.57367L6.50732 3L12.0146 6.57367ZM6.47803 18.4263L11.9854 14.8527L17.4927 18.4263L11.9854 22L6.47803 18.4263ZM12.0146 13.6912L17.522 10.1176L12.0146 6.57367L17.4927 3L23 6.57367L17.4927 10.1473L23 13.721L17.4927 17.2947L12.0146 13.6912Z">
100
+ </path>
101
+ </svg>
102
+ Dropbox
103
+ </button>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ <p id="dropfile" class="text-dark">or drop your file here</p>
109
+ <p id="error" class="p-3"></p>
110
+ </div>
111
+ </div>
112
+ <div class="workspace">
113
+ <div class="row mx-auto">
114
+ <div class="col-md-10 mx-auto">{{content}}</div>
115
+ </div>
116
+ </div>
117
+ {%- endif -%}
118
+ </div>
119
+ </div>
120
+ {%- else -%} {%- if page.noBox == true -%}
121
+ <div class="feature-content-box" id="theme-content-box">{{content}}</div>
122
+ {%- else -%}
123
+ <div class="box-padding" id="theme-content-box">
124
+ <div class="d-flex" id="__cond-922051">
125
+ <div class="flex-container">
126
+ <div class="flex-class">
127
+ <div class="d-flex flex-column">
128
+ <div class="box"
129
+ style="background:{{featureData.color}};min-height:{{featureData.height}};width:{{featureData.width}}">
130
+ <div class="box-border"></div>
131
+ <div class="content-box">{{content}}</div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ {%- endif -%} {%- endif -%} {%- if page.layout == "batch" -%}
139
+ <div class="w-100 line" style="border-top: 1px solid rgb(224, 224, 224)"></div>
140
+ {%- endif -%}
141
+
142
+ <div class="container mt-4 mb-5">
143
+ <div class="row px-0">
144
+ {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
145
+ <div class="col-md-9 mx-auto">
146
+ <div class="row">
147
+ {%- endif -%} {% assign totalHeaderCount = 0 %} {% for data in
148
+ featureData.TEXTUAL_CONTENT %} {% assign words = data.header |
149
+ split: " " %} {% assign word_count = words | size %} {% assign
150
+ totalHeaderCount = totalHeaderCount | plus: word_count %} {% endfor
151
+ %} {% for data in featureData.TEXTUAL_CONTENT %}
152
+ <div
153
+ class="{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%} col-md-6 my-4 {%- else -%} col-md-4 my-4 {%- endif -%}">
154
+ <div>
155
+ <img class="feature-card-img" src="{{data.logoUrl}}" loading="lazy" height="48px" width="48px"
156
+ alt="{{data.header}}" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
157
+
158
+ {%- if totalHeaderCount > site.count_of_words_in_headings -%}
159
+ <h2 class="feature-card-title">
160
+ {{data.header | replace: "$variable", page.value}}
161
+ </h2>
162
+ {%- else -%}
163
+ <div class="feature-card-title">
164
+ {{data.header | replace: "$variable", page.value}}
165
+ </div>
166
+ {%- endif -%}
167
+ <div class="feature-card-desc">
168
+ {{data.content | replace: "$variable", page.value}}
169
+ </div>
170
+ </div>
171
+ </div>
172
+ {% endfor %} {%- if site.monumetricId and page.url != '/' and
173
+ page.lang == 'en' -%}
174
+ </div>
175
+ </div>
176
+ {%- endif -%}
177
+ </div>
178
+ </div>
179
+ <section class="how-to-section">
180
+ <div class="container">
181
+ <div class="row">
182
+ {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
183
+ <div class="col-md-9 mx-auto">
184
+ <div class="row">
185
+ {%- endif -%}
186
+ <div class="col-md-6 order-0">
187
+ {%- if featureData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
188
+ <div class="how-to-video-wrapper">
189
+ {% assign video_url =
190
+ featureData.HOW_TO_CONTENT.YoutubeVideoUrl %} {% assign
191
+ video_id = "" %} {% if video_url contains "youtu.be/" %} {%
192
+ assign parts = video_url | split: "/" %} {% assign video_id =
193
+ parts[3] %} {% elsif video_url contains "youtube.com/watch" %}
194
+ {% assign params = video_url | split: "?" | last | split: "&"
195
+ %} {% for param in params %} {% if param contains "v=" %} {%
196
+ assign video_id = param | split: "=" | last %} {% endif %} {%
197
+ endfor %} {% endif %}
198
+ {%- if site.monumetricId -%}
199
+ <div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
200
+ <img class="youtubeVideoPlayer" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
201
+ <div class="youtube-play-btn-wrapper">
202
+ <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
203
+ </div>
204
+ </div>
205
+ {%- else -%}
206
+ <div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
207
+ <img class="youtubeVideoPlayer" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
208
+ <div class="youtube-play-btn-wrapper">
209
+ <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
210
+ </div>
211
+ </div>
212
+ {%- endif -%}
213
+ </div>
214
+ {%- else -%}
215
+ <div class="how-to-img-wrapper">
216
+ <img class="how-to-leftimg" height="180px" width="300px"
217
+ src="{{featureData.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
218
+ alt="{{featureData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}" {%- if site.crossorigin
219
+ -%} crossorigin {%- endif -%} />
220
+ </div>
221
+ {%- endif -%}
222
+ </div>
223
+ <div class="col-md-6 order-1">
224
+ <div class="how-to-right">
225
+ <h3 class="how-to-title text-left">
226
+ {{featureData.HOW_TO_CONTENT.heading | replace: "$variable",
227
+ page.value}}
228
+ </h3>
229
+ <ol class="how-to-list">
230
+ {% for data in featureData.HOW_TO_CONTENT.steps %}
231
+
232
+ <li id="step{{forloop.index}}" class="how-to-list-item">
233
+ <span>{{forloop.index}}.</span>{{data | replace:
234
+ "$variable", page.value}}
235
+ </li>
236
+ {% endfor %}
237
+ </ol>
238
+ </div>
239
+ </div>
240
+ {%- if site.monumetricId and page.url != '/' and page.lang == 'en'
241
+ -%}
242
+ </div>
243
+ </div>
244
+ {%- endif -%}
245
+ </div>
246
+ </div>
247
+ </section>
248
+
249
+ {%- if page.layout == "feature" -%} {%- include bookmark.html -%} {%- endif
250
+ -%} {%- assign showFaqs= true -%} {%- for item in site.noFaqsList -%} {%- if
251
+ item == page.lang -%} {%- assign showFaqs = false -%} {%- break -%} {%- else
252
+ -%} {%- assign showFaqs = true -%} {%- endif -%} {%- endfor -%} {%- if
253
+ showFaqs == true -%} {%- if featureData.FAQ.size>0 -%}
254
+ <section class="faq-section">
255
+ <div class="container">
256
+ <div class="row">
257
+ <div class="col-md-8 mx-auto">
258
+ <div class="faq">
259
+ <h3 class="feature-h1 text-center mb-4">
260
+ {{featureData.faqheading | default: 'Frequently Asked
261
+ Questions'}}
262
+ </h3>
263
+ <ul class="list-unstyled">
264
+ {% for data in featureData.FAQ %}
265
+ <li>
266
+ <h3 class="faq-question" itemprop="name">
267
+ {{data.question | replace: "$variable", page.value}}<em style="transform: rotate(-135deg)">
268
+ <i></i></em>
269
+ </h3>
270
+ <div style="display: block">
271
+ <p class="faq-answer" itemprop="text">
272
+ {{data.answer | replace: "$variable", page.value}}
273
+ </p>
274
+ </div>
275
+ </li>
276
+ {% endfor %}
277
+ </ul>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </section>
283
+ {%- endif -%} {%- endif -%} {%- include share/socialshare.html -%} {%-
284
+ include Rating/rating.html -%} {%- if featureData.infographics.size > 0 -%}
285
+ {%- include infographics/infographics.html -%} {%- endif -%} {%- include
286
+ /Usp/usp.html -%} {%- if featureData.display_formats -%}
287
+ <div class="container compare-table">
288
+ {%- include fileformat/fileformatdetail.html -%}
289
+ </div>
290
+ {%- endif -%} {%- if featureData.compare_formats -%}
291
+ <div class="container file-detail-table">
292
+ {%- include fileformat/comparisonfiles.html -%}
293
+ </div>
294
+
295
+ {%- endif -%} {%- if site.userTrackingCount -%} {%- include
296
+ userTracking.html -%} {%- endif -%} {%- assign langen = "en" -%} {%- if
297
+ site.data[folder][langen][file].categories -%} {% assign categories=
298
+ site.data[folder][langen][file].categories %} {%- else -%} {% assign
299
+ categories= page.categories %} {%- endif -%} {%- if
300
+ site.data[folder][langen][file].tags -%} {% assign tags=
301
+ site.data[folder][langen][file].tags %} {%- else -%} {% assign tags=
302
+ page.tags %} {%- endif -%} {%- if featureData.posts.size > 0 -%} {%- include
303
+ customblog/pageRelatedPosts.html -%} {%- else -%} {%- if categories.size > 0
304
+ or tags.size > 0 -%} {%- include section/related_categories_post.html -%}
305
+ {%- else -%} {%- include section/recent_posts.html -%} {%- endif -%} {%-
306
+ endif -%} {%- if site.customblogdata -%} {%- if categories.size> 0 or
307
+ tags.size>0-%} {%- include customblog/relatedposts.html -%} {%- else -%} {%-
308
+ include customblog/recentposts.html -%} {% endif %} {%- endif -%}
309
+
310
+ {%- if featureData.author.size > 0 -%}
311
+ {% include featurePageAuthors/featurePageAuthors.html %}
312
+ {%- endif -%}
313
+
314
+ {% include
315
+ footer/index.html %} {%- if site.customCode -%} {%- include customCode.html
316
+ -%} {%- endif -%} {% include script.html %}
317
+
318
+
319
+
320
+ {%- if featureData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
321
+ <script>
322
+ let videoContainer = document.querySelector('.how-to-video');
323
+ let thumbnail = document.getElementById('thumbnail-img');
324
+ let videoId = videoContainer.getAttribute("data-videoid")
325
+ let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
326
+ console.log(videoId)
327
+
328
+ // Function to load video
329
+ function loadVideo() {
330
+ videoContainer.innerHTML = '<iframe loading="lazy" class="youtubeVideoPlayer" width="100%" height="100%" src="https://www.youtube.com/embed/' + videoId + '?autoplay=1&mute=1" allowfullscreen></iframe>';
331
+ }
332
+ // Function to handle lazy loading of the thumbnail
333
+ function lazyLoadThumbnail(entries, observer) {
334
+ entries.forEach(entry => {
335
+ if (entry.isIntersecting) {
336
+ // Load thumbnail when it becomes visible
337
+ thumbnail.src = thumbnailUrl;
338
+ // Stop observing once loaded
339
+ observer.unobserve(entry.target);
340
+ }
341
+ });
342
+ }
343
+ // Set up the Intersection Observer
344
+ var observer = new IntersectionObserver(lazyLoadThumbnail, { threshold: 0.1 });
345
+ observer.observe(thumbnail);
346
+ // Optionally, you can add an event listener to trigger video loading on click or other interactions
347
+ thumbnail.addEventListener('click', loadVideo);
348
+ </script>
349
+ {%- endif -%}
350
+ </body>
351
+
352
352
  </html>