appscms-tools-theme 4.8.2 → 4.8.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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 -20
  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
data/_layouts/home.html CHANGED
@@ -1,375 +1,375 @@
1
- {% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
2
- = page.folderName %} {% assign homeData= 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 homeData.nofileupload -%}
9
- <div
10
- id="safeui-alert"
11
- class="alert alert-{{homeData.variant | default: 'info'}} fade show text-center"
12
- role="alert"
13
- >
14
- <div class="container">
15
- {%- if homeData.alertmsg -%} {{homeData.alertmsg}} {%- else -%} We do
16
- not upload any files to server, hence your data is 100% secure. {%-
17
- endif -%}
18
- </div>
19
- </div>
20
- {%- endif -%} {%- if homeData.h1 or homeData.h2 -%}
21
- <div class="flex-container mb-1">
22
- <div class="flex-class py-5">
23
- <div class="d-flex justify-content-center align-items-center">
24
- <span class="fHhdVc">
25
- <div class="div-cont feature-img mr-2">
26
- {%- if homeData.img -%}
27
- <img
28
- loading="lazy"
29
- style="width:{{homeData.imgwidth}};height:{{homeData.imgheight}};"
30
- src="{{homeData.img}}"
31
- alt="{{homeData.imgalt}}"
32
- {%-
33
- if
34
- site.crossorigin
35
- -%}
36
- crossorigin
37
- {%-
38
- endif
39
- -%}
40
- />
41
- {%- endif -%}
42
- </div>
43
- </span>
44
- <h1 class="home-top-h1">
45
- {%- for word in homeData.h1 -%} {%- if forloop.first == true -%}
46
- {{word | capitalize }} {%- else -%} {{word}} {%- endif -%} {%-
47
- endfor -%}
48
- </h1>
49
- </div>
50
- <h2 class="home-top-h2">
51
- {%- for word in homeData.h2 -%} {%- if forloop.first == true -%}
52
- {{word | capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor
53
- -%}
54
- </h2>
55
- </div>
56
- </div>
57
- {%- endif -%} {%- if homeData.features -%} {%- if site.monumetricId and
58
- page.url != '/' and page.lang == "en" -%}
59
- <div class="container">
60
- <div class="row">
61
- <div class="col-md-9 mx-auto">
62
- {%- endif -%}
63
- <div class="flex-container">
64
- <div class="flex-class">
65
- <ul class="home-features">
66
- {% for product in homeData.features %}
67
- <li
68
- style="background:{{product.color}}"
69
- class="home-feature-box"
70
- >
71
- <div class="home-inner-box">
72
- <div
73
- class="div-cont feature-img"
74
- height="36px"
75
- width="36px"
76
- >
77
- <img
78
- loading="lazy"
79
- src="{{product.icon}}"
80
- height="36px"
81
- width="36px"
82
- alt="star icon"
83
- {%-
84
- if
85
- site.crossorigin
86
- -%}
87
- crossorigin
88
- {%-
89
- endif
90
- -%}
91
- />
92
- </div>
93
- </div>
94
- <div class="home-feature-desc">{{product.description}}</div>
95
- <a class="home-feature-name" href="{{product.url}}"
96
- >{{product.name}}</a
97
- >
98
- </li>
99
- {% endfor %}
100
- </ul>
101
- </div>
102
- </div>
103
- {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
104
- </div>
105
- </div>
106
- </div>
107
- {%- endif -%} {%- endif -%}
108
- <div class="home-content-box" id="theme-content-box">{{content}}</div>
109
- {%- if homeData.TEXTUAL_CONTENT -%}
110
- <div class="container mt-4 mb-4">
111
- <div class="row px-0">
112
- {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
113
- <div class="col-md-9 mx-auto">
114
- <div class="row">
115
- {%- endif -%} {% assign totalHeaderCount = 0 %} {% for data in
116
- homeData.TEXTUAL_CONTENT %} {% assign words = data.header | split: "
117
- " %} {% assign word_count = words | size %} {% assign
118
- totalHeaderCount = totalHeaderCount | plus: word_count %} {% endfor
119
- %} {% for data in homeData.TEXTUAL_CONTENT %}
120
- <div
121
- class="{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%} col-md-6 my-4 {%- else -%} col-md-4 my-4 {%- endif -%}"
122
- >
123
- <div>
124
- <img
125
- class="feature-card-img"
126
- height="48px"
127
- width="48px"
128
- loading="lazy"
129
- src="{{data.logoUrl}}"
130
- alt="{{data.header}}"
131
- {%-
132
- if
133
- site.crossorigin
134
- -%}
135
- crossorigin
136
- {%-
137
- endif
138
- -%}
139
- />
140
-
141
- {%- if totalHeaderCount > site.count_of_words_in_headings -%}
142
- <h2 class="feature-card-title">
143
- {{data.header | replace: "$variable", page.value}}
144
- </h2>
145
- {%- else -%}
146
- <div class="feature-card-title">
147
- {{data.header | replace: "$variable", page.value}}
148
- </div>
149
- {%- endif -%}
150
- <div class="feature-card-desc">
151
- {{data.content | replace: "$variable", page.value}}
152
- </div>
153
- </div>
154
- </div>
155
- {% endfor %} {%- if site.monumetricId and page.url != '/' and
156
- page.lang == "en" -%}
157
- </div>
158
- </div>
159
- {%- endif -%}
160
- </div>
161
- </div>
162
- {%- endif -%} {%- if homeData.HOW_TO_CONTENT -%}
163
- <section class="how-to-section">
164
- <div class="container">
165
- <div class="row">
166
- {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
167
- <div class="col-md-9 mx-auto">
168
- <div class="row">
169
- {%- endif -%}
170
- <div class="col-md-6 order-0">
171
- {%- if homeData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
172
- <div class="how-to-video-wrapper">
173
- {% assign video_url = homeData.HOW_TO_CONTENT.YoutubeVideoUrl
174
- %} {% assign video_id = "" %} {% if video_url contains
175
- "youtu.be/" %} {% assign parts = video_url | split: "/" %} {%
176
- assign video_id = parts[3] %} {% elsif video_url contains
177
- "youtube.com/watch" %} {% assign params = video_url | split:
178
- "?" | last | split: "&" %} {% for param in params %} {% if
179
- param contains "v=" %} {% assign video_id = param | split: "="
180
- | last %} {% endif %} {% endfor %} {% endif %} {%- if
181
- site.monumetricId -%}
182
- <div
183
- class="how-to-video h-100 w-100"
184
- data-videoid="{{video_id}}"
185
- >
186
- <img
187
- class="youtubeVideoPlayer"
188
- width="100%"
189
- height="100%"
190
- id="thumbnail-img"
191
- alt="thumbnail-img"
192
- />
193
- <div class="youtube-play-btn-wrapper">
194
- <button
195
- class="play-btn btn btn-primary"
196
- onClick="loadVideo()"
197
- >
198
-
199
- </button>
200
- </div>
201
- </div>
202
- {%- else -%}
203
- <div
204
- class="how-to-video h-100 w-100"
205
- data-videoid="{{video_id}}"
206
- >
207
- <img
208
- class="youtubeVideoPlayer"
209
- width="100%"
210
- height="100%"
211
- id="thumbnail-img"
212
- alt="thumbnail-img"
213
- />
214
- <div class="youtube-play-btn-wrapper">
215
- <button
216
- class="play-btn btn btn-primary"
217
- onClick="loadVideo()"
218
- >
219
-
220
- </button>
221
- </div>
222
- </div>
223
- {%- endif -%}
224
- </div>
225
- {%- else -%}
226
- <div class="how-to-img-wrapper">
227
- <img
228
- class="how-to-leftimg"
229
- height="180px"
230
- width="300px"
231
- src="{{homeData.HOW_TO_CONTENT.logoImageUrl}}"
232
- loading="lazy"
233
- alt="{{homeData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}"
234
- {%-
235
- if
236
- site.crossorigin
237
- -%}
238
- crossorigin
239
- {%-
240
- endif
241
- -%}
242
- />
243
- </div>
244
- {%- endif -%}
245
- </div>
246
- <div class="col-md-6 order-1">
247
- <div class="how-to-right">
248
- <h3 class="how-to-title text-left">
249
- {{homeData.HOW_TO_CONTENT.heading | replace: "$variable",
250
- page.value}}
251
- </h3>
252
- <ol class="how-to-list">
253
- {% for data in homeData.HOW_TO_CONTENT.steps %}
254
-
255
- <li id="step{{forloop.index}}" class="how-to-list-item">
256
- <span>{{forloop.index}}.</span>{{data | replace:
257
- "$variable", page.value}}
258
- </li>
259
- {% endfor %}
260
- </ol>
261
- </div>
262
- </div>
263
- {%- if site.monumetricId and page.url != '/' and page.lang == 'en'
264
- -%}
265
- </div>
266
- </div>
267
- {%- endif -%}
268
- </div>
269
- </div>
270
- </section>
271
- {%- endif -%} {%- assign showFaqs = true -%} {%- for item in site.noFaqsList
272
- -%} {%- if item == page.lang -%} {%- assign showFaqs = false -%} {%- break
273
- -%} {%- else -%} {%- assign showFaqs = true -%} {%- endif -%} {%- endfor -%}
274
- {%- if showFaqs == true -%} {%- if homeData.FAQ -%}
275
- <section class="faq-section">
276
- <div class="container">
277
- <div class="row">
278
- <div class="col-md-8 mx-auto">
279
- <div class="faq">
280
- {%- if homeData.FAQ.size>0 -%}
281
- <h3 class="feature-h1 text-center mb-4">
282
- {{homeData.faqheading | default: 'Frequently Asked Questions'}}
283
- </h3>
284
- {%- endif -%}
285
- <ul class="list-unstyled">
286
- {% for data in homeData.FAQ %}
287
- <li>
288
- <h3 class="faq-question" itemprop="name">
289
- {{data.question | replace: "$variable", page.value}}<em
290
- style="transform: rotate(-135deg)"
291
- >
292
- <i></i
293
- ></em>
294
- </h3>
295
- <div style="display: block">
296
- <p class="faq-answer" itemprop="text">
297
- {{data.answer | replace: "$variable", page.value}}
298
- </p>
299
- </div>
300
- </li>
301
- {% endfor %}
302
- </ul>
303
- </div>
304
- </div>
305
- </div>
306
- </div>
307
- </section>
308
- {%- endif -%} {%- endif -%} {%- include share/socialshare.html -%} {%-
309
- include Rating/rating.html -%} {%- if homeData.infographics.size > 0 -%} {%-
310
- include /appscms/infographics/infographics.html -%} {%- endif -%} {%- if
311
- homeData.USPS -%} {%- include /Usp/usp.html -%} {%- endif -%} {%- if
312
- homeData.display_formats -%}
313
- <div class="container file-detail-table">
314
- {%- include fileformat/fileformatdetail.html -%}
315
- </div>
316
- {%- endif -%} {%- if homeData.compare_formats -%}
317
- <div class="container compare-table">
318
- {%- include fileformat/comparisonfiles.html -%}
319
- </div>
320
- {%- endif -%} {%- assign langen = "en" -%} {%- if
321
- site.data[folder][langen][file].categories -%} {%- assign categories =
322
- site.data[folder][langen][file].categories -%} {%- else -%} {%- assign
323
- categories = page.categories -%} {%- endif -%} {%- if
324
- site.data[folder][langen][file].tags -%} {%- assign tags =
325
- site.data[folder][langen][file].tags -%} {%- else -%} {%- assign tags =
326
- page.tags -%} {%- endif -%} {%- if homeData.posts.size > 0 -%} {%- include
327
- customblog/pageRelatedPosts.html -%} {%- else -%} {%- if categories.size > 0
328
- or tags.size > 0 -%} {%- include section/related_categories_post.html -%}
329
- {%- else -%} {%- include section/recent_posts.html -%} {%- endif -%} {%-
330
- endif -%} {%- if site.customblogdata -%} {%- if categories.size > 0 or
331
- tags.size > 0 -%} {%- include customblog/relatedposts.html -%} {%- else -%}
332
- {%- include customblog/recentposts.html -%} {%- endif -%} {%- endif -%} {%-
333
- if homeData.author.size > 0 -%} {%- include
334
- featurePageAuthors/featurePageAuthors.html -%} {%- endif -%} {%- include
335
- footer/index.html -%} {%- if site.customCode -%} {%- include customCode.html
336
- -%} {%- endif -%} {%- include script.html -%}
337
- </body>
338
-
339
- {%- if homeData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
340
- <script>
341
- let videoContainer = document.querySelector(".how-to-video");
342
- let thumbnail = document.getElementById("thumbnail-img");
343
- let videoId = videoContainer.getAttribute("data-videoid");
344
- let thumbnailUrl =
345
- "https://img.youtube.com/vi/" + videoId + "/maxresdefault.jpg";
346
- console.log(videoId);
347
-
348
- // Function to load video
349
- function loadVideo() {
350
- videoContainer.innerHTML =
351
- '<iframe loading="lazy" class="youtubeVideoPlayer" width="100%" height="100%" src="https://www.youtube.com/embed/' +
352
- videoId +
353
- '?autoplay=1&mute=1" allowfullscreen></iframe>';
354
- }
355
- // Function to handle lazy loading of the thumbnail
356
- function lazyLoadThumbnail(entries, observer) {
357
- entries.forEach((entry) => {
358
- if (entry.isIntersecting) {
359
- // Load thumbnail when it becomes visible
360
- thumbnail.src = thumbnailUrl;
361
- // Stop observing once loaded
362
- observer.unobserve(entry.target);
363
- }
364
- });
365
- }
366
- // Set up the Intersection Observer
367
- var observer = new IntersectionObserver(lazyLoadThumbnail, {
368
- threshold: 0.1,
369
- });
370
- observer.observe(thumbnail);
371
- // Optionally, you can add an event listener to trigger video loading on click or other interactions
372
- thumbnail.addEventListener("click", loadVideo);
373
- </script>
374
- {%- endif -%}
375
- </html>
1
+ {% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
2
+ = page.folderName %} {% assign homeData= 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 homeData.nofileupload -%}
9
+ <div
10
+ id="safeui-alert"
11
+ class="alert alert-{{homeData.variant | default: 'info'}} fade show text-center"
12
+ role="alert"
13
+ >
14
+ <div class="container">
15
+ {%- if homeData.alertmsg -%} {{homeData.alertmsg}} {%- else -%} We do
16
+ not upload any files to server, hence your data is 100% secure. {%-
17
+ endif -%}
18
+ </div>
19
+ </div>
20
+ {%- endif -%} {%- if homeData.h1 or homeData.h2 -%}
21
+ <div class="flex-container mb-1">
22
+ <div class="flex-class py-5">
23
+ <div class="d-flex justify-content-center align-items-center">
24
+ <span class="fHhdVc">
25
+ <div class="div-cont feature-img mr-2">
26
+ {%- if homeData.img -%}
27
+ <img
28
+ loading="lazy"
29
+ style="width:{{homeData.imgwidth}};height:{{homeData.imgheight}};"
30
+ src="{{homeData.img}}"
31
+ alt="{{homeData.imgalt}}"
32
+ {%-
33
+ if
34
+ site.crossorigin
35
+ -%}
36
+ crossorigin
37
+ {%-
38
+ endif
39
+ -%}
40
+ />
41
+ {%- endif -%}
42
+ </div>
43
+ </span>
44
+ <h1 class="home-top-h1">
45
+ {%- for word in homeData.h1 -%} {%- if forloop.first == true -%}
46
+ {{word | capitalize }} {%- else -%} {{word}} {%- endif -%} {%-
47
+ endfor -%}
48
+ </h1>
49
+ </div>
50
+ <h2 class="home-top-h2">
51
+ {%- for word in homeData.h2 -%} {%- if forloop.first == true -%}
52
+ {{word | capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor
53
+ -%}
54
+ </h2>
55
+ </div>
56
+ </div>
57
+ {%- endif -%} {%- if homeData.features -%} {%- if site.monumetricId and
58
+ page.url != '/' and page.lang == "en" -%}
59
+ <div class="container">
60
+ <div class="row">
61
+ <div class="col-md-9 mx-auto">
62
+ {%- endif -%}
63
+ <div class="flex-container">
64
+ <div class="flex-class">
65
+ <ul class="home-features">
66
+ {% for product in homeData.features %}
67
+ <li
68
+ style="background:{{product.color}}"
69
+ class="home-feature-box"
70
+ >
71
+ <div class="home-inner-box">
72
+ <div
73
+ class="div-cont feature-img"
74
+ height="36px"
75
+ width="36px"
76
+ >
77
+ <img
78
+ loading="lazy"
79
+ src="{{product.icon}}"
80
+ height="36px"
81
+ width="36px"
82
+ alt="star icon"
83
+ {%-
84
+ if
85
+ site.crossorigin
86
+ -%}
87
+ crossorigin
88
+ {%-
89
+ endif
90
+ -%}
91
+ />
92
+ </div>
93
+ </div>
94
+ <div class="home-feature-desc">{{product.description}}</div>
95
+ <a class="home-feature-name" href="{{product.url}}"
96
+ >{{product.name}}</a
97
+ >
98
+ </li>
99
+ {% endfor %}
100
+ </ul>
101
+ </div>
102
+ </div>
103
+ {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
104
+ </div>
105
+ </div>
106
+ </div>
107
+ {%- endif -%} {%- endif -%}
108
+ <div class="home-content-box" id="theme-content-box">{{content}}</div>
109
+ {%- if homeData.TEXTUAL_CONTENT -%}
110
+ <div class="container mt-4 mb-4">
111
+ <div class="row px-0">
112
+ {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
113
+ <div class="col-md-9 mx-auto">
114
+ <div class="row">
115
+ {%- endif -%} {% assign totalHeaderCount = 0 %} {% for data in
116
+ homeData.TEXTUAL_CONTENT %} {% assign words = data.header | split: "
117
+ " %} {% assign word_count = words | size %} {% assign
118
+ totalHeaderCount = totalHeaderCount | plus: word_count %} {% endfor
119
+ %} {% for data in homeData.TEXTUAL_CONTENT %}
120
+ <div
121
+ class="{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%} col-md-6 my-4 {%- else -%} col-md-4 my-4 {%- endif -%}"
122
+ >
123
+ <div>
124
+ <img
125
+ class="feature-card-img"
126
+ height="48px"
127
+ width="48px"
128
+ loading="lazy"
129
+ src="{{data.logoUrl}}"
130
+ alt="{{data.header}}"
131
+ {%-
132
+ if
133
+ site.crossorigin
134
+ -%}
135
+ crossorigin
136
+ {%-
137
+ endif
138
+ -%}
139
+ />
140
+
141
+ {%- if totalHeaderCount > site.count_of_words_in_headings -%}
142
+ <h2 class="feature-card-title">
143
+ {{data.header | replace: "$variable", page.value}}
144
+ </h2>
145
+ {%- else -%}
146
+ <div class="feature-card-title">
147
+ {{data.header | replace: "$variable", page.value}}
148
+ </div>
149
+ {%- endif -%}
150
+ <div class="feature-card-desc">
151
+ {{data.content | replace: "$variable", page.value}}
152
+ </div>
153
+ </div>
154
+ </div>
155
+ {% endfor %} {%- if site.monumetricId and page.url != '/' and
156
+ page.lang == "en" -%}
157
+ </div>
158
+ </div>
159
+ {%- endif -%}
160
+ </div>
161
+ </div>
162
+ {%- endif -%} {%- if homeData.HOW_TO_CONTENT -%}
163
+ <section class="how-to-section">
164
+ <div class="container">
165
+ <div class="row">
166
+ {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
167
+ <div class="col-md-9 mx-auto">
168
+ <div class="row">
169
+ {%- endif -%}
170
+ <div class="col-md-6 order-0">
171
+ {%- if homeData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
172
+ <div class="how-to-video-wrapper">
173
+ {% assign video_url = homeData.HOW_TO_CONTENT.YoutubeVideoUrl
174
+ %} {% assign video_id = "" %} {% if video_url contains
175
+ "youtu.be/" %} {% assign parts = video_url | split: "/" %} {%
176
+ assign video_id = parts[3] %} {% elsif video_url contains
177
+ "youtube.com/watch" %} {% assign params = video_url | split:
178
+ "?" | last | split: "&" %} {% for param in params %} {% if
179
+ param contains "v=" %} {% assign video_id = param | split: "="
180
+ | last %} {% endif %} {% endfor %} {% endif %} {%- if
181
+ site.monumetricId -%}
182
+ <div
183
+ class="how-to-video h-100 w-100"
184
+ data-videoid="{{video_id}}"
185
+ >
186
+ <img
187
+ class="youtubeVideoPlayer"
188
+ width="100%"
189
+ height="100%"
190
+ id="thumbnail-img"
191
+ alt="thumbnail-img"
192
+ />
193
+ <div class="youtube-play-btn-wrapper">
194
+ <button
195
+ class="play-btn btn btn-primary"
196
+ onClick="loadVideo()"
197
+ >
198
+
199
+ </button>
200
+ </div>
201
+ </div>
202
+ {%- else -%}
203
+ <div
204
+ class="how-to-video h-100 w-100"
205
+ data-videoid="{{video_id}}"
206
+ >
207
+ <img
208
+ class="youtubeVideoPlayer"
209
+ width="100%"
210
+ height="100%"
211
+ id="thumbnail-img"
212
+ alt="thumbnail-img"
213
+ />
214
+ <div class="youtube-play-btn-wrapper">
215
+ <button
216
+ class="play-btn btn btn-primary"
217
+ onClick="loadVideo()"
218
+ >
219
+
220
+ </button>
221
+ </div>
222
+ </div>
223
+ {%- endif -%}
224
+ </div>
225
+ {%- else -%}
226
+ <div class="how-to-img-wrapper">
227
+ <img
228
+ class="how-to-leftimg"
229
+ height="180px"
230
+ width="300px"
231
+ src="{{homeData.HOW_TO_CONTENT.logoImageUrl}}"
232
+ loading="lazy"
233
+ alt="{{homeData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}"
234
+ {%-
235
+ if
236
+ site.crossorigin
237
+ -%}
238
+ crossorigin
239
+ {%-
240
+ endif
241
+ -%}
242
+ />
243
+ </div>
244
+ {%- endif -%}
245
+ </div>
246
+ <div class="col-md-6 order-1">
247
+ <div class="how-to-right">
248
+ <h3 class="how-to-title text-left">
249
+ {{homeData.HOW_TO_CONTENT.heading | replace: "$variable",
250
+ page.value}}
251
+ </h3>
252
+ <ol class="how-to-list">
253
+ {% for data in homeData.HOW_TO_CONTENT.steps %}
254
+
255
+ <li id="step{{forloop.index}}" class="how-to-list-item">
256
+ <span>{{forloop.index}}.</span>{{data | replace:
257
+ "$variable", page.value}}
258
+ </li>
259
+ {% endfor %}
260
+ </ol>
261
+ </div>
262
+ </div>
263
+ {%- if site.monumetricId and page.url != '/' and page.lang == 'en'
264
+ -%}
265
+ </div>
266
+ </div>
267
+ {%- endif -%}
268
+ </div>
269
+ </div>
270
+ </section>
271
+ {%- endif -%} {%- assign showFaqs = true -%} {%- for item in site.noFaqsList
272
+ -%} {%- if item == page.lang -%} {%- assign showFaqs = false -%} {%- break
273
+ -%} {%- else -%} {%- assign showFaqs = true -%} {%- endif -%} {%- endfor -%}
274
+ {%- if showFaqs == true -%} {%- if homeData.FAQ -%}
275
+ <section class="faq-section">
276
+ <div class="container">
277
+ <div class="row">
278
+ <div class="col-md-8 mx-auto">
279
+ <div class="faq">
280
+ {%- if homeData.FAQ.size>0 -%}
281
+ <h3 class="feature-h1 text-center mb-4">
282
+ {{homeData.faqheading | default: 'Frequently Asked Questions'}}
283
+ </h3>
284
+ {%- endif -%}
285
+ <ul class="list-unstyled">
286
+ {% for data in homeData.FAQ %}
287
+ <li>
288
+ <h3 class="faq-question" itemprop="name">
289
+ {{data.question | replace: "$variable", page.value}}<em
290
+ style="transform: rotate(-135deg)"
291
+ >
292
+ <i></i
293
+ ></em>
294
+ </h3>
295
+ <div style="display: block">
296
+ <p class="faq-answer" itemprop="text">
297
+ {{data.answer | replace: "$variable", page.value}}
298
+ </p>
299
+ </div>
300
+ </li>
301
+ {% endfor %}
302
+ </ul>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </section>
308
+ {%- endif -%} {%- endif -%} {%- include share/socialshare.html -%} {%-
309
+ include Rating/rating.html -%} {%- if homeData.infographics.size > 0 -%} {%-
310
+ include /appscms/infographics/infographics.html -%} {%- endif -%} {%- if
311
+ homeData.USPS -%} {%- include /Usp/usp.html -%} {%- endif -%} {%- if
312
+ homeData.display_formats -%}
313
+ <div class="container file-detail-table">
314
+ {%- include fileformat/fileformatdetail.html -%}
315
+ </div>
316
+ {%- endif -%} {%- if homeData.compare_formats -%}
317
+ <div class="container compare-table">
318
+ {%- include fileformat/comparisonfiles.html -%}
319
+ </div>
320
+ {%- endif -%} {%- assign langen = "en" -%} {%- if
321
+ site.data[folder][langen][file].categories -%} {%- assign categories =
322
+ site.data[folder][langen][file].categories -%} {%- else -%} {%- assign
323
+ categories = page.categories -%} {%- endif -%} {%- if
324
+ site.data[folder][langen][file].tags -%} {%- assign tags =
325
+ site.data[folder][langen][file].tags -%} {%- else -%} {%- assign tags =
326
+ page.tags -%} {%- endif -%} {%- if homeData.posts.size > 0 -%} {%- include
327
+ customblog/pageRelatedPosts.html -%} {%- else -%} {%- if categories.size > 0
328
+ or tags.size > 0 -%} {%- include section/related_categories_post.html -%}
329
+ {%- else -%} {%- include section/recent_posts.html -%} {%- endif -%} {%-
330
+ endif -%} {%- if site.customblogdata -%} {%- if categories.size > 0 or
331
+ tags.size > 0 -%} {%- include customblog/relatedposts.html -%} {%- else -%}
332
+ {%- include customblog/recentposts.html -%} {%- endif -%} {%- endif -%} {%-
333
+ if homeData.author.size > 0 -%} {%- include
334
+ featurePageAuthors/featurePageAuthors.html -%} {%- endif -%} {%- include
335
+ footer/index.html -%} {%- if site.customCode -%} {%- include customCode.html
336
+ -%} {%- endif -%} {%- include script.html -%}
337
+ </body>
338
+
339
+ {%- if homeData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
340
+ <script>
341
+ let videoContainer = document.querySelector(".how-to-video");
342
+ let thumbnail = document.getElementById("thumbnail-img");
343
+ let videoId = videoContainer.getAttribute("data-videoid");
344
+ let thumbnailUrl =
345
+ "https://img.youtube.com/vi/" + videoId + "/maxresdefault.jpg";
346
+ console.log(videoId);
347
+
348
+ // Function to load video
349
+ function loadVideo() {
350
+ videoContainer.innerHTML =
351
+ '<iframe loading="lazy" class="youtubeVideoPlayer" width="100%" height="100%" src="https://www.youtube.com/embed/' +
352
+ videoId +
353
+ '?autoplay=1&mute=1" allowfullscreen></iframe>';
354
+ }
355
+ // Function to handle lazy loading of the thumbnail
356
+ function lazyLoadThumbnail(entries, observer) {
357
+ entries.forEach((entry) => {
358
+ if (entry.isIntersecting) {
359
+ // Load thumbnail when it becomes visible
360
+ thumbnail.src = thumbnailUrl;
361
+ // Stop observing once loaded
362
+ observer.unobserve(entry.target);
363
+ }
364
+ });
365
+ }
366
+ // Set up the Intersection Observer
367
+ var observer = new IntersectionObserver(lazyLoadThumbnail, {
368
+ threshold: 0.1,
369
+ });
370
+ observer.observe(thumbnail);
371
+ // Optionally, you can add an event listener to trigger video loading on click or other interactions
372
+ thumbnail.addEventListener("click", loadVideo);
373
+ </script>
374
+ {%- endif -%}
375
+ </html>