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
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>