appscms-tools-theme 4.5.9 → 4.6.0

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/feature/en/batch-conversion.json +192 -192
  5. data/_data/feature/en/compress-pdf.json +305 -305
  6. data/_data/feature/en/devtools.json +321 -321
  7. data/_data/feature/en/face-detection.json +156 -156
  8. data/_data/feature/en/split-pdf.json +221 -221
  9. data/_data/feature/en/theframe.json +160 -160
  10. data/_data/footer/en/data.json +2 -2
  11. data/_data/header/en/data.json +412 -412
  12. data/_data/home/en/en.json +324 -324
  13. data/_data/home/en/posters.json +322 -322
  14. data/_includes/alternates/alternates.html +46 -43
  15. data/_includes/appscms/customblog/contenttool-recent-posts.html +94 -94
  16. data/_includes/appscms/customblog/pageRelatedPosts.html +62 -62
  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/head/head.html +3 -2
  24. data/_includes/appscms/headings/contenttool-headings.html +33 -33
  25. data/_includes/appscms/headings/devtool-headings.html +38 -38
  26. data/_includes/appscms/home/contenttool-feature-boxes.html +19 -19
  27. data/_includes/appscms/home/devtool-feature-boxes.html +70 -70
  28. data/_includes/appscms/infographics/infographics.html +166 -166
  29. data/_includes/appscms/loaders/loader.html +4 -4
  30. data/_includes/appscms/navbars/devtool-navbar.html +50 -50
  31. data/_includes/appscms/navbars/devtool-toolbar.html +100 -100
  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
data/_layouts/home.html CHANGED
@@ -1,282 +1,282 @@
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 id="safeui-alert" class="alert alert-{{homeData.variant | default: 'info'}} fade show text-center" role="alert">
10
- <div class="container">
11
- {%- if homeData.alertmsg -%} {{homeData.alertmsg}} {%- else -%} We do
12
- not upload any files to server, hence your data is 100% secure. {%-
13
- endif -%}
14
- </div>
15
- </div>
16
- {%- endif -%} {%- if homeData.h1 or homeData.h2 -%}
17
- <div class="flex-container mb-1">
18
- <div class="flex-class py-5">
19
- <div class="d-flex justify-content-center align-items-center">
20
- <span class="fHhdVc">
21
- <div class="div-cont feature-img mr-2">
22
- {%- if homeData.img -%}
23
- <img loading="lazy" style="width:{{homeData.imgwidth}};height:{{homeData.imgheight}};"
24
- src="{{homeData.img}}" alt="{{homeData.imgalt}}" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
25
- {%- endif -%}
26
- </div>
27
- </span>
28
- <h1 class="home-top-h1">
29
- {%- for word in homeData.h1 -%} {%- if forloop.first == true -%}
30
- {{word | capitalize }} {%- else -%} {{word}} {%- endif -%} {%-
31
- endfor -%}
32
- </h1>
33
- </div>
34
- <h2 class="home-top-h2">
35
- {%- for word in homeData.h2 -%} {%- if forloop.first == true -%}
36
- {{word | capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor
37
- -%}
38
- </h2>
39
- </div>
40
- </div>
41
- {%- endif -%} {%- if homeData.features -%} {%- if site.monumetricId and
42
- page.url != '/' and page.lang == "en" -%}
43
- <div class="container">
44
- <div class="row">
45
- <div class="col-md-9 mx-auto">
46
- {%- endif -%}
47
- <div class="flex-container">
48
- <div class="flex-class">
49
- <ul class="home-features">
50
- {% for product in homeData.features %}
51
- <li style="background:{{product.color}}" class="home-feature-box">
52
- <div class="home-inner-box">
53
- <div class="div-cont feature-img" height="36px" width="36px">
54
- <img loading="lazy" src="{{product.icon}}" height="36px" width="36px" alt="star icon" {%- if
55
- site.crossorigin -%} crossorigin {%- endif -%} />
56
- </div>
57
- </div>
58
- <div class="home-feature-desc">{{product.description}}</div>
59
- <a class="home-feature-name" href="{{product.url}}">{{product.name}}</a>
60
- </li>
61
- {% endfor %}
62
- </ul>
63
- </div>
64
- </div>
65
- {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
66
- </div>
67
- </div>
68
- </div>
69
- {%- endif -%} {%- endif -%}
70
- <div class="home-content-box" id="theme-content-box">{{content}}</div>
71
- {%- if homeData.TEXTUAL_CONTENT -%}
72
- <div class="container mt-4 mb-4">
73
- <div class="row px-0">
74
- {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
75
- <div class="col-md-9 mx-auto">
76
- <div class="row">
77
- {%- endif -%} {% assign totalHeaderCount = 0 %} {% for data in
78
- homeData.TEXTUAL_CONTENT %} {% assign words = data.header | split: "
79
- " %} {% assign word_count = words | size %} {% assign
80
- totalHeaderCount = totalHeaderCount | plus: word_count %} {% endfor
81
- %} {% for data in homeData.TEXTUAL_CONTENT %}
82
- <div
83
- class="{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%} col-md-6 my-4 {%- else -%} col-md-4 my-4 {%- endif -%}">
84
- <div>
85
- <img class="feature-card-img" height="48px" width="48px" loading="lazy" src="{{data.logoUrl}}"
86
- alt="{{data.header}}" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
87
-
88
- {%- if totalHeaderCount > site.count_of_words_in_headings -%}
89
- <h2 class="feature-card-title">
90
- {{data.header | replace: "$variable", page.value}}
91
- </h2>
92
- {%- else -%}
93
- <div class="feature-card-title">
94
- {{data.header | replace: "$variable", page.value}}
95
- </div>
96
- {%- endif -%}
97
- <div class="feature-card-desc">
98
- {{data.content | replace: "$variable", page.value}}
99
- </div>
100
- </div>
101
- </div>
102
- {% endfor %} {%- if site.monumetricId and page.url != '/' and
103
- page.lang == "en" -%}
104
- </div>
105
- </div>
106
- {%- endif -%}
107
- </div>
108
- </div>
109
- {%- endif -%} {%- if homeData.HOW_TO_CONTENT -%}
110
- <section class="how-to-section">
111
- <div class="container">
112
- <div class="row">
113
- {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
114
- <div class="col-md-9 mx-auto">
115
- <div class="row">
116
- {%- endif -%}
117
- <div class="col-md-6 order-0">
118
- {%- if homeData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
119
- <div class="how-to-video-wrapper">
120
- {% assign video_url = homeData.HOW_TO_CONTENT.YoutubeVideoUrl %}
121
- {% assign video_id = "" %}
122
- {% if video_url contains "youtu.be/" %}
123
- {% assign parts = video_url | split: "/" %}
124
- {% assign video_id = parts[3] %}
125
- {% elsif video_url contains "youtube.com/watch" %}
126
- {% assign params = video_url | split: "?" | last | split: "&" %}
127
- {% for param in params %}
128
- {% if param contains "v=" %}
129
- {% assign video_id = param | split: "=" | last %}
130
- {% endif %}
131
- {% endfor %}
132
- {% endif %}
133
-
134
- {%- if site.monumetricId -%}
135
- <div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
136
- <img class="youtubeVideoPlayer" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
137
- <div class="youtube-play-btn-wrapper">
138
- <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
139
- </div>
140
- </div>
141
- {%- else -%}
142
- <div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
143
- <img class="youtubeVideoPlayer" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
144
- <div class="youtube-play-btn-wrapper">
145
- <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
146
- </div>
147
- </div>
148
- {%- endif -%}
149
- </div>
150
- {%- else -%}
151
- <div class="how-to-img-wrapper">
152
- <img class="how-to-leftimg" height="180px" width="300px" src="{{homeData.HOW_TO_CONTENT.logoImageUrl}}"
153
- loading="lazy" alt="{{homeData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}" {%- if
154
- site.crossorigin -%} crossorigin {%- endif -%} />
155
- </div>
156
- {%- endif -%}
157
- </div>
158
- <div class="col-md-6 order-1">
159
- <div class="how-to-right">
160
- <h3 class="how-to-title text-left">
161
- {{homeData.HOW_TO_CONTENT.heading | replace: "$variable",
162
- page.value}}
163
- </h3>
164
- <ol class="how-to-list">
165
- {% for data in homeData.HOW_TO_CONTENT.steps %}
166
-
167
- <li id="step{{forloop.index}}" class="how-to-list-item">
168
- <span>{{forloop.index}}.</span>{{data | replace:
169
- "$variable", page.value}}
170
- </li>
171
- {% endfor %}
172
- </ol>
173
- </div>
174
- </div>
175
- {%- if site.monumetricId and page.url != '/' and page.lang == 'en'
176
- -%}
177
- </div>
178
- </div>
179
- {%- endif -%}
180
- </div>
181
- </div>
182
- </section>
183
- {%- endif -%} {%- assign showFaqs = true -%} {%- for item in site.noFaqsList
184
- -%} {%- if item == page.lang -%} {%- assign showFaqs = false -%} {%- break
185
- -%} {%- else -%} {%- assign showFaqs = true -%} {%- endif -%} {%- endfor -%}
186
- {%- if showFaqs == true -%} {%- if homeData.FAQ -%}
187
- <section class="faq-section">
188
- <div class="container">
189
- <div class="row">
190
- <div class="col-md-8 mx-auto">
191
- <div class="faq">
192
- {%- if homeData.FAQ.size>0 -%}
193
- <h3 class="feature-h1 text-center mb-4">
194
- {{homeData.faqheading | default: 'Frequently Asked Questions'}}
195
- </h3>
196
- {%- endif -%}
197
- <ul class="list-unstyled">
198
- {% for data in homeData.FAQ %}
199
- <li>
200
- <h3 class="faq-question" itemprop="name">
201
- {{data.question | replace: "$variable", page.value}}<em style="transform: rotate(-135deg)">
202
- <i></i></em>
203
- </h3>
204
- <div style="display: block">
205
- <p class="faq-answer" itemprop="text">
206
- {{data.answer | replace: "$variable", page.value}}
207
- </p>
208
- </div>
209
- </li>
210
- {% endfor %}
211
- </ul>
212
- </div>
213
- </div>
214
- </div>
215
- </div>
216
- </section>
217
- {%- endif -%} {%- endif -%} {%- include share/socialshare.html -%} {%-
218
- include Rating/rating.html -%}
219
- {%- if homeData.infographics.size > 0 -%}
220
- {%- include /appscms/infographics/infographics.html -%}
221
- {%- endif -%}
222
-
223
- {%- if homeData.USPS -%} {%- include
224
- /Usp/usp.html -%} {%- endif -%} {%- if homeData.display_formats -%}
225
- <div class="container file-detail-table">
226
- {%- include fileformat/fileformatdetail.html -%}
227
- </div>
228
- {%- endif -%} {%- if homeData.compare_formats -%}
229
- <div class="container compare-table">
230
- {%- include fileformat/comparisonfiles.html -%}
231
- </div>
232
- {%- endif -%} {%- assign langen = "en" -%} {%- if
233
- site.data[folder][langen][file].categories -%} {%- assign categories =
234
- site.data[folder][langen][file].categories -%} {%- else -%} {%- assign
235
- categories = page.categories -%} {%- endif -%} {%- if
236
- site.data[folder][langen][file].tags -%} {%- assign tags =
237
- site.data[folder][langen][file].tags -%} {%- else -%} {%- assign tags =
238
- page.tags -%} {%- endif -%} {%- if homeData.posts.size > 0 -%} {%- include
239
- customblog/pageRelatedPosts.html -%} {%- else -%} {%- if categories.size > 0
240
- or tags.size > 0 -%} {%- include section/related_categories_post.html -%}
241
- {%- else -%} {%- include section/recent_posts.html -%} {%- endif -%} {%-
242
- endif -%} {%- if site.customblogdata -%} {%- if categories.size > 0 or
243
- tags.size > 0 -%} {%- include customblog/relatedposts.html -%} {%- else -%}
244
- {%- include customblog/recentposts.html -%} {%- endif -%} {%- endif -%} {%-
245
- if homeData.author.size > 0 -%} {%- include
246
- featurePageAuthors/featurePageAuthors.html -%} {%- endif -%} {%- include
247
- footer/index.html -%} {%- if site.customCode -%} {%- include customCode.html
248
- -%} {%- endif -%} {%- include script.html -%}
249
- </body>
250
-
251
- {%- if homeData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
252
- <script>
253
- let videoContainer = document.querySelector('.how-to-video');
254
- let thumbnail = document.getElementById('thumbnail-img');
255
- let videoId = videoContainer.getAttribute("data-videoid")
256
- let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
257
- console.log(videoId)
258
-
259
- // Function to load video
260
- function loadVideo() {
261
- videoContainer.innerHTML = '<iframe loading="lazy" class="youtubeVideoPlayer" width="100%" height="100%" src="https://www.youtube.com/embed/' + videoId + '?autoplay=1&mute=1" allowfullscreen></iframe>';
262
- }
263
- // Function to handle lazy loading of the thumbnail
264
- function lazyLoadThumbnail(entries, observer) {
265
- entries.forEach(entry => {
266
- if (entry.isIntersecting) {
267
- // Load thumbnail when it becomes visible
268
- thumbnail.src = thumbnailUrl;
269
- // Stop observing once loaded
270
- observer.unobserve(entry.target);
271
- }
272
- });
273
- }
274
- // Set up the Intersection Observer
275
- var observer = new IntersectionObserver(lazyLoadThumbnail, { threshold: 0.1 });
276
- observer.observe(thumbnail);
277
- // Optionally, you can add an event listener to trigger video loading on click or other interactions
278
- thumbnail.addEventListener('click', loadVideo);
279
- </script>
280
- {%- endif -%}
281
-
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 id="safeui-alert" class="alert alert-{{homeData.variant | default: 'info'}} fade show text-center" role="alert">
10
+ <div class="container">
11
+ {%- if homeData.alertmsg -%} {{homeData.alertmsg}} {%- else -%} We do
12
+ not upload any files to server, hence your data is 100% secure. {%-
13
+ endif -%}
14
+ </div>
15
+ </div>
16
+ {%- endif -%} {%- if homeData.h1 or homeData.h2 -%}
17
+ <div class="flex-container mb-1">
18
+ <div class="flex-class py-5">
19
+ <div class="d-flex justify-content-center align-items-center">
20
+ <span class="fHhdVc">
21
+ <div class="div-cont feature-img mr-2">
22
+ {%- if homeData.img -%}
23
+ <img loading="lazy" style="width:{{homeData.imgwidth}};height:{{homeData.imgheight}};"
24
+ src="{{homeData.img}}" alt="{{homeData.imgalt}}" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
25
+ {%- endif -%}
26
+ </div>
27
+ </span>
28
+ <h1 class="home-top-h1">
29
+ {%- for word in homeData.h1 -%} {%- if forloop.first == true -%}
30
+ {{word | capitalize }} {%- else -%} {{word}} {%- endif -%} {%-
31
+ endfor -%}
32
+ </h1>
33
+ </div>
34
+ <h2 class="home-top-h2">
35
+ {%- for word in homeData.h2 -%} {%- if forloop.first == true -%}
36
+ {{word | capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor
37
+ -%}
38
+ </h2>
39
+ </div>
40
+ </div>
41
+ {%- endif -%} {%- if homeData.features -%} {%- if site.monumetricId and
42
+ page.url != '/' and page.lang == "en" -%}
43
+ <div class="container">
44
+ <div class="row">
45
+ <div class="col-md-9 mx-auto">
46
+ {%- endif -%}
47
+ <div class="flex-container">
48
+ <div class="flex-class">
49
+ <ul class="home-features">
50
+ {% for product in homeData.features %}
51
+ <li style="background:{{product.color}}" class="home-feature-box">
52
+ <div class="home-inner-box">
53
+ <div class="div-cont feature-img" height="36px" width="36px">
54
+ <img loading="lazy" src="{{product.icon}}" height="36px" width="36px" alt="star icon" {%- if
55
+ site.crossorigin -%} crossorigin {%- endif -%} />
56
+ </div>
57
+ </div>
58
+ <div class="home-feature-desc">{{product.description}}</div>
59
+ <a class="home-feature-name" href="{{product.url}}">{{product.name}}</a>
60
+ </li>
61
+ {% endfor %}
62
+ </ul>
63
+ </div>
64
+ </div>
65
+ {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
66
+ </div>
67
+ </div>
68
+ </div>
69
+ {%- endif -%} {%- endif -%}
70
+ <div class="home-content-box" id="theme-content-box">{{content}}</div>
71
+ {%- if homeData.TEXTUAL_CONTENT -%}
72
+ <div class="container mt-4 mb-4">
73
+ <div class="row px-0">
74
+ {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
75
+ <div class="col-md-9 mx-auto">
76
+ <div class="row">
77
+ {%- endif -%} {% assign totalHeaderCount = 0 %} {% for data in
78
+ homeData.TEXTUAL_CONTENT %} {% assign words = data.header | split: "
79
+ " %} {% assign word_count = words | size %} {% assign
80
+ totalHeaderCount = totalHeaderCount | plus: word_count %} {% endfor
81
+ %} {% for data in homeData.TEXTUAL_CONTENT %}
82
+ <div
83
+ class="{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%} col-md-6 my-4 {%- else -%} col-md-4 my-4 {%- endif -%}">
84
+ <div>
85
+ <img class="feature-card-img" height="48px" width="48px" loading="lazy" src="{{data.logoUrl}}"
86
+ alt="{{data.header}}" {%- if site.crossorigin -%} crossorigin {%- endif -%} />
87
+
88
+ {%- if totalHeaderCount > site.count_of_words_in_headings -%}
89
+ <h2 class="feature-card-title">
90
+ {{data.header | replace: "$variable", page.value}}
91
+ </h2>
92
+ {%- else -%}
93
+ <div class="feature-card-title">
94
+ {{data.header | replace: "$variable", page.value}}
95
+ </div>
96
+ {%- endif -%}
97
+ <div class="feature-card-desc">
98
+ {{data.content | replace: "$variable", page.value}}
99
+ </div>
100
+ </div>
101
+ </div>
102
+ {% endfor %} {%- if site.monumetricId and page.url != '/' and
103
+ page.lang == "en" -%}
104
+ </div>
105
+ </div>
106
+ {%- endif -%}
107
+ </div>
108
+ </div>
109
+ {%- endif -%} {%- if homeData.HOW_TO_CONTENT -%}
110
+ <section class="how-to-section">
111
+ <div class="container">
112
+ <div class="row">
113
+ {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
114
+ <div class="col-md-9 mx-auto">
115
+ <div class="row">
116
+ {%- endif -%}
117
+ <div class="col-md-6 order-0">
118
+ {%- if homeData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
119
+ <div class="how-to-video-wrapper">
120
+ {% assign video_url = homeData.HOW_TO_CONTENT.YoutubeVideoUrl %}
121
+ {% assign video_id = "" %}
122
+ {% if video_url contains "youtu.be/" %}
123
+ {% assign parts = video_url | split: "/" %}
124
+ {% assign video_id = parts[3] %}
125
+ {% elsif video_url contains "youtube.com/watch" %}
126
+ {% assign params = video_url | split: "?" | last | split: "&" %}
127
+ {% for param in params %}
128
+ {% if param contains "v=" %}
129
+ {% assign video_id = param | split: "=" | last %}
130
+ {% endif %}
131
+ {% endfor %}
132
+ {% endif %}
133
+
134
+ {%- if site.monumetricId -%}
135
+ <div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
136
+ <img class="youtubeVideoPlayer" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
137
+ <div class="youtube-play-btn-wrapper">
138
+ <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
139
+ </div>
140
+ </div>
141
+ {%- else -%}
142
+ <div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
143
+ <img class="youtubeVideoPlayer" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
144
+ <div class="youtube-play-btn-wrapper">
145
+ <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
146
+ </div>
147
+ </div>
148
+ {%- endif -%}
149
+ </div>
150
+ {%- else -%}
151
+ <div class="how-to-img-wrapper">
152
+ <img class="how-to-leftimg" height="180px" width="300px" src="{{homeData.HOW_TO_CONTENT.logoImageUrl}}"
153
+ loading="lazy" alt="{{homeData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}" {%- if
154
+ site.crossorigin -%} crossorigin {%- endif -%} />
155
+ </div>
156
+ {%- endif -%}
157
+ </div>
158
+ <div class="col-md-6 order-1">
159
+ <div class="how-to-right">
160
+ <h3 class="how-to-title text-left">
161
+ {{homeData.HOW_TO_CONTENT.heading | replace: "$variable",
162
+ page.value}}
163
+ </h3>
164
+ <ol class="how-to-list">
165
+ {% for data in homeData.HOW_TO_CONTENT.steps %}
166
+
167
+ <li id="step{{forloop.index}}" class="how-to-list-item">
168
+ <span>{{forloop.index}}.</span>{{data | replace:
169
+ "$variable", page.value}}
170
+ </li>
171
+ {% endfor %}
172
+ </ol>
173
+ </div>
174
+ </div>
175
+ {%- if site.monumetricId and page.url != '/' and page.lang == 'en'
176
+ -%}
177
+ </div>
178
+ </div>
179
+ {%- endif -%}
180
+ </div>
181
+ </div>
182
+ </section>
183
+ {%- endif -%} {%- assign showFaqs = true -%} {%- for item in site.noFaqsList
184
+ -%} {%- if item == page.lang -%} {%- assign showFaqs = false -%} {%- break
185
+ -%} {%- else -%} {%- assign showFaqs = true -%} {%- endif -%} {%- endfor -%}
186
+ {%- if showFaqs == true -%} {%- if homeData.FAQ -%}
187
+ <section class="faq-section">
188
+ <div class="container">
189
+ <div class="row">
190
+ <div class="col-md-8 mx-auto">
191
+ <div class="faq">
192
+ {%- if homeData.FAQ.size>0 -%}
193
+ <h3 class="feature-h1 text-center mb-4">
194
+ {{homeData.faqheading | default: 'Frequently Asked Questions'}}
195
+ </h3>
196
+ {%- endif -%}
197
+ <ul class="list-unstyled">
198
+ {% for data in homeData.FAQ %}
199
+ <li>
200
+ <h3 class="faq-question" itemprop="name">
201
+ {{data.question | replace: "$variable", page.value}}<em style="transform: rotate(-135deg)">
202
+ <i></i></em>
203
+ </h3>
204
+ <div style="display: block">
205
+ <p class="faq-answer" itemprop="text">
206
+ {{data.answer | replace: "$variable", page.value}}
207
+ </p>
208
+ </div>
209
+ </li>
210
+ {% endfor %}
211
+ </ul>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </section>
217
+ {%- endif -%} {%- endif -%} {%- include share/socialshare.html -%} {%-
218
+ include Rating/rating.html -%}
219
+ {%- if homeData.infographics.size > 0 -%}
220
+ {%- include /appscms/infographics/infographics.html -%}
221
+ {%- endif -%}
222
+
223
+ {%- if homeData.USPS -%} {%- include
224
+ /Usp/usp.html -%} {%- endif -%} {%- if homeData.display_formats -%}
225
+ <div class="container file-detail-table">
226
+ {%- include fileformat/fileformatdetail.html -%}
227
+ </div>
228
+ {%- endif -%} {%- if homeData.compare_formats -%}
229
+ <div class="container compare-table">
230
+ {%- include fileformat/comparisonfiles.html -%}
231
+ </div>
232
+ {%- endif -%} {%- assign langen = "en" -%} {%- if
233
+ site.data[folder][langen][file].categories -%} {%- assign categories =
234
+ site.data[folder][langen][file].categories -%} {%- else -%} {%- assign
235
+ categories = page.categories -%} {%- endif -%} {%- if
236
+ site.data[folder][langen][file].tags -%} {%- assign tags =
237
+ site.data[folder][langen][file].tags -%} {%- else -%} {%- assign tags =
238
+ page.tags -%} {%- endif -%} {%- if homeData.posts.size > 0 -%} {%- include
239
+ customblog/pageRelatedPosts.html -%} {%- else -%} {%- if categories.size > 0
240
+ or tags.size > 0 -%} {%- include section/related_categories_post.html -%}
241
+ {%- else -%} {%- include section/recent_posts.html -%} {%- endif -%} {%-
242
+ endif -%} {%- if site.customblogdata -%} {%- if categories.size > 0 or
243
+ tags.size > 0 -%} {%- include customblog/relatedposts.html -%} {%- else -%}
244
+ {%- include customblog/recentposts.html -%} {%- endif -%} {%- endif -%} {%-
245
+ if homeData.author.size > 0 -%} {%- include
246
+ featurePageAuthors/featurePageAuthors.html -%} {%- endif -%} {%- include
247
+ footer/index.html -%} {%- if site.customCode -%} {%- include customCode.html
248
+ -%} {%- endif -%} {%- include script.html -%}
249
+ </body>
250
+
251
+ {%- if homeData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
252
+ <script>
253
+ let videoContainer = document.querySelector('.how-to-video');
254
+ let thumbnail = document.getElementById('thumbnail-img');
255
+ let videoId = videoContainer.getAttribute("data-videoid")
256
+ let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
257
+ console.log(videoId)
258
+
259
+ // Function to load video
260
+ function loadVideo() {
261
+ videoContainer.innerHTML = '<iframe loading="lazy" class="youtubeVideoPlayer" width="100%" height="100%" src="https://www.youtube.com/embed/' + videoId + '?autoplay=1&mute=1" allowfullscreen></iframe>';
262
+ }
263
+ // Function to handle lazy loading of the thumbnail
264
+ function lazyLoadThumbnail(entries, observer) {
265
+ entries.forEach(entry => {
266
+ if (entry.isIntersecting) {
267
+ // Load thumbnail when it becomes visible
268
+ thumbnail.src = thumbnailUrl;
269
+ // Stop observing once loaded
270
+ observer.unobserve(entry.target);
271
+ }
272
+ });
273
+ }
274
+ // Set up the Intersection Observer
275
+ var observer = new IntersectionObserver(lazyLoadThumbnail, { threshold: 0.1 });
276
+ observer.observe(thumbnail);
277
+ // Optionally, you can add an event listener to trigger video loading on click or other interactions
278
+ thumbnail.addEventListener('click', loadVideo);
279
+ </script>
280
+ {%- endif -%}
281
+
282
282
  </html>
@@ -1,33 +1,33 @@
1
- <!DOCTYPE html>
2
- <html>
3
- {% include head/index.html %}
4
-
5
- <body>
6
- {% include header/index.html %}
7
- <div class="appscms-sidebar-left"></div>
8
- <div class="appscms-sidebar-right"></div>
9
- <div class="flex-container mb-1">
10
- <div class="flex-class py-5">
11
- <div class="d-flex justify-content-center align-items-center"><span class="fHhdVc">
12
- <div class="div-cont feature-img mr-2">
13
- <img class="home-img" src="" alt="" {%- if site.crossorigin -%} crossorigin {%- endif -%}>
14
- </div>
15
- </span>
16
- <h1 class="home-top-h1"></h1>
17
- </div>
18
- <h2 class="home-top-h2"></h2>
19
- </div>
20
- </div>
21
-
22
- <div>
23
- {{content}}
24
- </div>
25
-
26
- {% include footer/index.html %}
27
- {% include script.html %}
28
-
29
- <script defer src="/assets/js/homeResult.js" data-foldername="{{page.folderName}}"
30
- data-lang="{{page.lang}}"></script>
31
- </body>
32
-
1
+ <!DOCTYPE html>
2
+ <html>
3
+ {% include head/index.html %}
4
+
5
+ <body>
6
+ {% include header/index.html %}
7
+ <div class="appscms-sidebar-left"></div>
8
+ <div class="appscms-sidebar-right"></div>
9
+ <div class="flex-container mb-1">
10
+ <div class="flex-class py-5">
11
+ <div class="d-flex justify-content-center align-items-center"><span class="fHhdVc">
12
+ <div class="div-cont feature-img mr-2">
13
+ <img class="home-img" src="" alt="" {%- if site.crossorigin -%} crossorigin {%- endif -%}>
14
+ </div>
15
+ </span>
16
+ <h1 class="home-top-h1"></h1>
17
+ </div>
18
+ <h2 class="home-top-h2"></h2>
19
+ </div>
20
+ </div>
21
+
22
+ <div>
23
+ {{content}}
24
+ </div>
25
+
26
+ {% include footer/index.html %}
27
+ {% include script.html %}
28
+
29
+ <script defer src="/assets/js/homeResult.js" data-foldername="{{page.folderName}}"
30
+ data-lang="{{page.lang}}"></script>
31
+ </body>
32
+
33
33
  </html>