appscms-tools-theme 5.7.4 → 5.7.5

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 (14) hide show
  1. checksums.yaml +4 -4
  2. data/_data/feature/.DS_Store +0 -0
  3. data/_includes/.DS_Store +0 -0
  4. data/_includes/appscms/navbars/navbar.html +13 -13
  5. data/_includes/appscms/scripts/script.html +18 -15
  6. data/_includes/bookmark.html +190 -5
  7. data/_includes/contenttool_result_banner.html +326 -93
  8. data/_includes/script.html +17 -14
  9. data/_layouts/appscms-download.html +793 -251
  10. data/_layouts/appscms-home.html +1 -0
  11. data/assets/.DS_Store +0 -0
  12. data/assets/images/contenttool-icon.svg +20 -0
  13. data/assets/images/contenttool-logo.svg +84 -0
  14. metadata +5 -3
data/_layouts/appscms-download.html CHANGED
@@ -11,289 +11,831 @@
11
11
  {%- include appscms/navbars/navbar.html -%} {%- include
12
12
  appscms/navbars/toolbar.html -%}
13
13
  {%- include adsense/sidebar-ads.html -%}
14
- <div class="container">
15
- {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
16
- <div class="row">
17
- <div class="col-md-9 mx-auto">
18
- {%- endif -%}
19
- <div class="appscms-download-section">
20
- <div class="row">
21
- <div class="col-md-9 px-0 mx-auto">
22
- <div class="success-msg-cont mb-0 ">
23
- <div class="success-greeting">
24
- <p class="success-msg"> {{downloadData.successmessage | default: 'Hurray! your operation was
25
- completed'
26
- }}
27
- </p>
28
- </div>
29
14
 
30
- {% if site.show_contenttool_promo != true %}
31
- <div class="go-back-block">
32
- <button id="processing-btn">
33
- <span class="button-loader"></span> Try processing another file
34
- </button>
35
- </div>
36
- {% endif %}
37
-
15
+ <style>
16
+ .dl-page {
17
+ background: linear-gradient(180deg, #f6f8ff 0%, #ffffff 360px);
18
+ padding: 20px 0 20px;
19
+ }
38
20
 
21
+ .dl-page .dl-wrap {
22
+ max-width: 980px;
23
+ margin: 0 auto;
24
+ }
39
25
 
26
+ /* ===== Hero ===== */
27
+ .dl-hero {
28
+ position: relative;
29
+ background: #fff;
30
+ border-radius: 18px;
31
+ padding: 20px 26px 20px;
32
+ box-shadow: 0 24px 60px -30px rgba(27, 47, 231, 0.25), 0 2px 8px rgba(0, 0, 0, 0.03);
33
+ border: 1px solid rgba(27, 47, 231, 0.06);
34
+ overflow: hidden;
35
+ }
40
36
 
41
- {%- include contenttool_result_banner.html -%}
37
+ .dl-hero::before {
38
+ content: '';
39
+ position: absolute;
40
+ top: 0;
41
+ left: 0;
42
+ right: 0;
43
+ height: 3px;
44
+ background: linear-gradient(90deg, #16a34a 0%, #4cdca0 50%, #1b2fe7 100%);
45
+ }
42
46
 
47
+ .dl-hero__head {
48
+ display: flex;
49
+ align-items: center;
50
+ gap: 14px;
51
+ flex-wrap: wrap;
52
+ }
43
53
 
44
- </div>
45
- <!-- <div class="col-lg-7 col-md-9 col-sm-11 text-center mx-auto">
46
- <img id="rating-img" loading='lazy' src="/assets/images/rating.png" alt="rating-img" {%- if
47
- site.crossorigin -%} crossorigin {%- endif -%}>
48
- <div class="rating-tool" style="border: none;">
49
- <div class="rating-text mr-2">{{downloadData.rateus | default: 'Rate us'}}: </div>
50
- <div class="rating-stars">
51
- <i class="fas fa-star rating-star"></i><i class="fas fa-star rating-star"></i><i
52
- class="fas fa-star rating-star"></i><i class="fas fa-star rating-star"></i><i
53
- class="fas fa-star rating-star"></i>
54
- </div>
55
- <div class="rating-value ml-2">
56
- {%- for item in data -%}
57
- {%- if item.name ==tool -%}
58
- {%- assign rating = item.rating -%}
59
- {%- assign votes = item.votes -%}
60
- {%- endif -%}
61
- {%- endfor -%}
62
- <span class="rating"> <span id='rating'>0</span><span>/5</span> </span>
63
- &nbsp; <span class="total-ratings" id='count'>0 </span>{{downloadData.votes | default: 'votes'}}
64
- </div>
65
- </div>
66
- <script>
67
- const ratingValue = document.getElementById('rating')
68
- const count = document.getElementById('count')
69
- const setRating = async (rating) => {
70
- const name = '{{site.name}}'
71
- const urlParams = new URLSearchParams(window.location.search)
72
- let tool = urlParams.get('tool')
73
- const data = { website: name, feature: tool, rating: rating };
74
- fetch('https://ratingapi-main.netlify.app/.netlify/functions/api/v1/rating/add', {
75
- method: 'POST',
76
- headers: {
77
- 'Content-Type': 'application/json',
78
- },
79
- body: JSON.stringify(data),
80
- })
81
- .then(response => response.json())
82
- .then(data => {
83
- ratingValue.innerText = data.rating
84
- count.innerText = data.count
85
- })
86
- .catch((error) => {
87
- console.error('Error:', error);
88
- });
89
- }
90
- const urlParams = new URLSearchParams(window.location.search)
91
- let tool = urlParams.get('tool')
92
- const fetchRating = async () => {
93
- const data = await fetch(`https://ratingapi-main.netlify.app/.netlify/functions/api/v1/${tool}/rating`).then(res => res.json())
94
- ratingValue.innerText = data.rating
95
- count.innerText = data.votes
96
- }
97
- let ratingImg = document.querySelector('#rating-img');
98
- ratingImg.addEventListener('load', (event) => {
99
- fetchRating()
100
- });
101
- const ratingNode = document.getElementsByClassName('rating-star')
102
- let ratedValue = localStorage.getItem(`${tool}rating`)
103
- if (ratedValue) {
104
- Array.from(ratingNode).slice(0, ratedValue).map(item => {
105
- item.style.color = '#FF8A1F'
106
- })
107
- }
108
- Array.from(ratingNode).map(item => item.addEventListener('click', () => {
109
- const urlParams = new URLSearchParams(window.location.search)
110
- let tool = urlParams.get('tool')
111
- if (!localStorage.getItem(`${tool}rating`)) {
112
- function indexInClass(node) {
113
- var className = node.className;
114
- var num = 0;
115
- for (var i = 0; i < ratingNode.length; i++) {
116
- if (ratingNode[i] === node) {
117
- return num;
118
- }
119
- num++;
120
- }
121
- return -1;
122
- }
123
- const index = indexInClass(item)
124
- Array.from(ratingNode).slice(0, index + 1).map(item => {
125
- item.style.color = '#FF8A1F'
126
- })
127
- setRating(index + 1)
128
- localStorage.setItem(`${tool}rating`, index + 1)
129
- }
130
- }))
131
- </script>
132
- </div> -->
133
- <div class="try-more-features mt-4 ">
134
- <h2 class="appscms-heading"> {{downloadData.tryfeatureheading | default: 'You can also
135
- try
136
- These features'
137
- }} </h2>
138
- <div class="feature-showcase row">
139
- {%- if downloadData.recommendedfeatures -%}
140
- {%- for item in downloadData.recommendedfeatures -%}
141
- <div class="col-md-4 col-sm-6 col-6">
142
-
143
- <a class="px-2 feature-showcase-div w-100 d-flex justify-content-between " href="{{item.url}}">
144
- <img src="{{item.logo}}" loading="lazy" alt="feature-logo" {%- if site.crossorigin -%}
145
- crossorigin="anonymous" {%- endif -%}> <span class="ml-3 ">
146
- {{item.name}}</span> </a>
147
- </div>
148
- {%- endfor -%}
149
- {%- else -%}
150
- code2
151
- {%- endif -%}
54
+ .dl-hero__text {
55
+ flex: 1;
56
+ min-width: 220px;
57
+ }
58
+
59
+ .dl-hero__icon {
60
+ width: 44px;
61
+ height: 44px;
62
+ border-radius: 50%;
63
+ display: inline-flex;
64
+ align-items: center;
65
+ justify-content: center;
66
+ background: linear-gradient(135deg, #e8fff3 0%, #c9f6dd 100%);
67
+ border: 2px solid #4cdca0;
68
+ flex-shrink: 0;
69
+ position: relative;
70
+ }
71
+
72
+ .dl-hero__icon::after {
73
+ content: '';
74
+ position: absolute;
75
+ inset: -6px;
76
+ border-radius: 50%;
77
+ border: 2px solid rgba(76, 220, 160, 0.3);
78
+ animation: dl-ping 2.2s ease-out infinite;
79
+ }
80
+
81
+ @keyframes dl-ping {
82
+ 0% { transform: scale(0.9); opacity: 0.8; }
83
+ 100% { transform: scale(1.25); opacity: 0; }
84
+ }
85
+
86
+ .dl-hero__icon svg {
87
+ width: 22px;
88
+ height: 22px;
89
+ color: #16a34a;
90
+ }
91
+
92
+ .dl-hero__title {
93
+ font-size: clamp(17px, 1.6vw, 20px);
94
+ font-weight: 800;
95
+ line-height: 1.25;
96
+ color: #0f172a;
97
+ margin: 0 0 2px;
98
+ letter-spacing: -0.01em;
99
+ text-align: left;
100
+ }
101
+
102
+ .dl-hero__meta {
103
+ font-size: 12.5px;
104
+ color: #64748b;
105
+ display: inline-flex;
106
+ align-items: center;
107
+ gap: 6px;
108
+ }
109
+
110
+ /* Hero actions */
111
+ .dl-hero__actions {
112
+ margin-top: 0;
113
+ display: flex;
114
+ flex-wrap: wrap;
115
+ gap: 8px;
116
+ flex-shrink: 0;
117
+ }
118
+
119
+ .dl-hero .success-msg-cont {
120
+ padding: 0 !important;
121
+ display: block;
122
+ }
123
+
124
+ .dl-hero .success-greeting {
125
+ display: none;
126
+ }
127
+
128
+ .dl-hero .go-back-block {
129
+ margin: 0 !important;
130
+ }
131
+
132
+ .dl-hero #processing-btn {
133
+ height: 40px;
134
+ padding: 0 16px;
135
+ border-radius: 10px;
136
+ background: #1b2fe7;
137
+ color: #fff;
138
+ border: none;
139
+ font-size: 13px;
140
+ font-weight: 700;
141
+ display: inline-flex;
142
+ align-items: center;
143
+ gap: 7px;
144
+ cursor: pointer;
145
+ width: auto !important;
146
+ margin: 0 !important;
147
+ justify-content: center !important;
148
+ transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
149
+ box-shadow: 0 10px 24px -12px rgba(27, 47, 231, 0.6);
150
+ position: relative;
151
+ }
152
+
153
+ .dl-hero #processing-btn:hover {
154
+ background: #1526c7;
155
+ transform: translateY(-1px);
156
+ box-shadow: 0 14px 28px -12px rgba(27, 47, 231, 0.75);
157
+ }
158
+
159
+ .dl-hero .button-loader {
160
+ display: none;
161
+ }
162
+
163
+ .dl-hero__link {
164
+ height: 40px;
165
+ padding: 0 14px;
166
+ border-radius: 10px;
167
+ background: #fff;
168
+ color: #0f172a;
169
+ border: 1.5px solid #d6dbec;
170
+ font-size: 13px;
171
+ font-weight: 600;
172
+ display: inline-flex;
173
+ align-items: center;
174
+ justify-content: center;
175
+ gap: 7px;
176
+ text-decoration: none;
177
+ transition: all 0.18s ease;
178
+ }
179
+
180
+ .dl-hero__link:hover {
181
+ border-color: #1b2fe7;
182
+ color: #1b2fe7;
183
+ text-decoration: none;
184
+ transform: translateY(-1px);
185
+ }
186
+
187
+ .dl-hero__link svg {
188
+ width: 15px;
189
+ height: 15px;
190
+ }
191
+
192
+ /* ===== Hero chips row (inline recommended features) ===== */
193
+ .dl-hero__chips-row {
194
+ margin-top: 14px;
195
+ padding-top: 14px;
196
+ border-top: 1px dashed #e5e9f2;
197
+ display: flex;
198
+ align-items: center;
199
+ gap: 10px 14px;
200
+ flex-wrap: wrap;
201
+ }
202
+
203
+ .dl-hero__chips-label {
204
+ display: inline-flex;
205
+ align-items: center;
206
+ gap: 8px;
207
+ flex-shrink: 0;
208
+ }
209
+
210
+ .dl-hero__chips-label strong {
211
+ font-size: 13px;
212
+ font-weight: 700;
213
+ color: #0f172a;
214
+ letter-spacing: -0.005em;
215
+ }
216
+
217
+ .dl-hero__chips-label small {
218
+ font-size: 11px;
219
+ font-weight: 600;
220
+ color: #64748b;
221
+ padding: 2px 8px;
222
+ background: #eef1ff;
223
+ color: #1b2fe7;
224
+ border-radius: 999px;
225
+ letter-spacing: 0.03em;
226
+ text-transform: uppercase;
227
+ }
228
+
229
+ .dl-hero .dl-chips {
230
+ display: flex;
231
+ flex-wrap: wrap;
232
+ gap: 7px;
233
+ flex: 1;
234
+ min-width: 0;
235
+ margin: 0;
236
+ padding: 0;
237
+ }
238
+
239
+ .dl-hero .dl-chip {
240
+ display: inline-flex;
241
+ align-items: center;
242
+ justify-content: center;
243
+ padding: 7px 14px;
244
+ border-radius: 999px;
245
+ background: #f6f8ff;
246
+ border: 1px solid #e5e9f2;
247
+ font-size: 12.5px;
248
+ font-weight: 600;
249
+ color: #334155;
250
+ text-decoration: none;
251
+ transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
252
+ line-height: 1;
253
+ width: auto;
254
+ min-height: auto;
255
+ box-shadow: none;
256
+ }
257
+
258
+ .dl-hero .dl-chip:hover,
259
+ .dl-hero .dl-chip:focus {
260
+ background: #fff;
261
+ border-color: #1b2fe7;
262
+ color: #1b2fe7;
263
+ text-decoration: none;
264
+ transform: translateY(-1px);
265
+ box-shadow: 0 6px 16px -10px rgba(27, 47, 231, 0.45);
266
+ }
267
+
268
+ .dl-hero .dl-chip__label {
269
+ display: inline-block;
270
+ white-space: nowrap;
271
+ }
272
+
273
+ /* ===== Promo wrap (banner stays self-contained) ===== */
274
+ .dl-promo-wrap {
275
+ margin-top: 16px;
276
+ }
277
+
278
+ .dl-promo-wrap > *:first-child {
279
+ margin-top: 0 !important;
280
+ }
281
+
282
+ .dl-promo-wrap > *:last-child {
283
+ margin-bottom: 0 !important;
284
+ }
285
+
286
+ /* ===== Sections ===== */
287
+ .dl-section {
288
+ margin-top: 44px;
289
+ }
290
+
291
+ .dl-section__title {
292
+ display: flex;
293
+ align-items: center;
294
+ gap: 12px;
295
+ font-size: 18px;
296
+ font-weight: 700;
297
+ color: #0f172a;
298
+ margin: 0 0 20px;
299
+ letter-spacing: -0.01em;
300
+ }
301
+
302
+ .dl-section__title::before {
303
+ content: '';
304
+ width: 4px;
305
+ height: 20px;
306
+ border-radius: 4px;
307
+ background: linear-gradient(180deg, #1b2fe7, #667eea);
308
+ }
309
+
310
+ .dl-section__title small {
311
+ font-size: 12.5px;
312
+ font-weight: 500;
313
+ color: #64748b;
314
+ margin-left: auto;
315
+ }
316
+
317
+ /* ===== Feature grid ===== */
318
+ .dl-feature-grid {
319
+ display: grid;
320
+ grid-template-columns: repeat(3, 1fr);
321
+ gap: 14px;
322
+ }
323
+
324
+ .dl-feature-card {
325
+ display: flex;
326
+ align-items: center;
327
+ gap: 14px;
328
+ padding: 14px 16px;
329
+ background: #fff;
330
+ border: 1px solid #e5e9f2;
331
+ border-radius: 14px;
332
+ text-decoration: none;
333
+ color: #0f172a;
334
+ font-weight: 600;
335
+ font-size: 14.5px;
336
+ transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
337
+ }
338
+
339
+ .dl-feature-card:hover {
340
+ transform: translateY(-2px);
341
+ border-color: #1b2fe7;
342
+ box-shadow: 0 14px 30px -18px rgba(27, 47, 231, 0.35);
343
+ text-decoration: none;
344
+ color: #0f172a;
345
+ }
346
+
347
+ .dl-feature-card__ico {
348
+ width: 42px;
349
+ height: 42px;
350
+ border-radius: 10px;
351
+ display: inline-flex;
352
+ align-items: center;
353
+ justify-content: center;
354
+ background: linear-gradient(135deg, #eef1ff, #e8edff);
355
+ flex-shrink: 0;
356
+ overflow: hidden;
357
+ }
358
+
359
+ .dl-feature-card__ico img {
360
+ width: 24px;
361
+ height: 24px;
362
+ object-fit: contain;
363
+ }
364
+
365
+ .dl-feature-card__arrow {
366
+ margin-left: auto;
367
+ color: #cbd5e1;
368
+ transition: transform 0.2s ease, color 0.2s ease;
369
+ }
370
+
371
+ .dl-feature-card:hover .dl-feature-card__arrow {
372
+ color: #1b2fe7;
373
+ transform: translateX(2px);
374
+ }
375
+
376
+ .dl-feature-card__arrow svg {
377
+ width: 16px;
378
+ height: 16px;
379
+ }
380
+
381
+ /* ===== Site grid ===== */
382
+ .dl-site-grid {
383
+ display: grid;
384
+ grid-template-columns: repeat(4, 1fr);
385
+ gap: 14px;
386
+ }
387
+
388
+ .dl-site-card {
389
+ display: flex;
390
+ flex-direction: column;
391
+ align-items: center;
392
+ justify-content: center;
393
+ gap: 10px;
394
+ padding: 20px 14px;
395
+ background: #fff;
396
+ border: 1px solid #e5e9f2;
397
+ border-radius: 14px;
398
+ transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
399
+ text-align: center;
400
+ min-height: 128px;
401
+ }
402
+
403
+ .dl-site-card:hover {
404
+ transform: translateY(-3px);
405
+ border-color: #1b2fe7;
406
+ box-shadow: 0 14px 30px -18px rgba(27, 47, 231, 0.35);
407
+ }
408
+
409
+ .dl-site-card img {
410
+ height: 36px;
411
+ max-width: 100%;
412
+ object-fit: contain;
413
+ }
414
+
415
+ .dl-site-card a {
416
+ font-size: 13px;
417
+ font-weight: 600;
418
+ color: #334155;
419
+ text-decoration: none;
420
+ word-break: break-word;
421
+ }
422
+
423
+ .dl-site-card:hover a {
424
+ color: #1b2fe7;
425
+ }
426
+
427
+ /* ===== Tips row ===== */
428
+ .dl-tips {
429
+ margin-top: 44px;
430
+ display: grid;
431
+ grid-template-columns: repeat(3, 1fr);
432
+ gap: 14px;
433
+ }
434
+
435
+ .dl-tip {
436
+ padding: 20px;
437
+ background: #fff;
438
+ border: 1px solid #e5e9f2;
439
+ border-radius: 14px;
440
+ position: relative;
441
+ }
442
+
443
+ .dl-tip__num {
444
+ position: absolute;
445
+ top: 14px;
446
+ right: 16px;
447
+ font-size: 44px;
448
+ line-height: 1;
449
+ font-weight: 800;
450
+ color: #eef1ff;
451
+ letter-spacing: -0.03em;
452
+ }
453
+
454
+ .dl-tip__ico {
455
+ width: 36px;
456
+ height: 36px;
457
+ border-radius: 10px;
458
+ display: inline-flex;
459
+ align-items: center;
460
+ justify-content: center;
461
+ background: linear-gradient(135deg, #eef1ff, #e8edff);
462
+ color: #1b2fe7;
463
+ margin-bottom: 12px;
464
+ }
465
+
466
+ .dl-tip__ico svg {
467
+ width: 18px;
468
+ height: 18px;
469
+ }
470
+
471
+ .dl-tip h4 {
472
+ font-size: 14.5px;
473
+ font-weight: 700;
474
+ color: #0f172a;
475
+ margin: 0 0 6px;
476
+ }
477
+
478
+ .dl-tip p {
479
+ font-size: 13px;
480
+ line-height: 1.55;
481
+ color: #64748b;
482
+ margin: 0;
483
+ }
484
+
485
+ /* ===== Share ===== */
486
+ .dl-share {
487
+ margin-top: 44px;
488
+ padding: 26px 32px;
489
+ background: linear-gradient(135deg, #ffffff 0%, #f4f5ff 100%);
490
+ border: 1px solid #e4e7f5;
491
+ border-radius: 18px;
492
+ color: #0f172a;
493
+ display: grid;
494
+ grid-template-columns: 1.4fr 1fr;
495
+ gap: 24px;
496
+ align-items: center;
497
+ position: relative;
498
+ overflow: hidden;
499
+ box-shadow: 0 10px 30px -20px rgba(27, 47, 231, 0.2);
500
+ }
501
+
502
+ .dl-share__text h3 {
503
+ font-size: 17px;
504
+ font-weight: 700;
505
+ margin: 0 0 6px;
506
+ color: #0f172a;
507
+ }
508
+
509
+ .dl-share__text p {
510
+ font-size: 13.5px;
511
+ line-height: 1.6;
512
+ margin: 0;
513
+ color: #64748b;
514
+ }
152
515
 
516
+ .dl-share__icons {
517
+ display: flex;
518
+ gap: 10px;
519
+ justify-content: flex-end;
520
+ flex-wrap: wrap;
521
+ }
522
+
523
+ .dl-share__icons a {
524
+ width: 42px;
525
+ height: 42px;
526
+ border-radius: 10px;
527
+ background: #fff;
528
+ border: 1.5px solid #d6dbec;
529
+ color: #1b2fe7;
530
+ display: inline-flex;
531
+ align-items: center;
532
+ justify-content: center;
533
+ font-size: 16px;
534
+ text-decoration: none;
535
+ transition: all 0.18s ease;
536
+ }
537
+
538
+ .dl-share__icons a:hover {
539
+ background: #1b2fe7;
540
+ border-color: #1b2fe7;
541
+ color: #fff;
542
+ transform: translateY(-2px);
543
+ }
544
+
545
+ .dl-share__icons a i {
546
+ margin: 0 !important;
547
+ padding: 0 !important;
548
+ font-size: 16px;
549
+ }
550
+
551
+ /* ===== Responsive ===== */
552
+ @media (max-width: 900px) {
553
+ .dl-page {
554
+ padding: 14px 0 10px;
555
+ }
556
+ .dl-hero {
557
+ padding: 18px 16px 18px;
558
+ border-radius: 14px;
559
+ }
560
+ .dl-hero__head {
561
+ gap: 12px;
562
+ }
563
+ .dl-hero__text {
564
+ flex: 1 1 0;
565
+ min-width: 0;
566
+ text-align: left;
567
+ }
568
+ .dl-hero__icon {
569
+ width: 40px;
570
+ height: 40px;
571
+ }
572
+ .dl-hero__actions {
573
+ width: 100%;
574
+ flex: 1 1 100%;
575
+ }
576
+ .dl-hero__chips-row {
577
+ margin-top: 12px;
578
+ padding-top: 12px;
579
+ }
580
+ .dl-feature-grid {
581
+ grid-template-columns: repeat(2, 1fr);
582
+ }
583
+ .dl-site-grid {
584
+ grid-template-columns: repeat(3, 1fr);
585
+ gap: 10px;
586
+ }
587
+ .dl-site-card {
588
+ padding: 16px 10px;
589
+ min-height: 112px;
590
+ }
591
+ .dl-tips {
592
+ grid-template-columns: 1fr;
593
+ }
594
+ .dl-share {
595
+ grid-template-columns: 1fr;
596
+ padding: 22px 20px;
597
+ }
598
+ .dl-share__icons {
599
+ justify-content: flex-start;
600
+ }
601
+ .dl-hero #processing-btn,
602
+ .dl-hero__link {
603
+ flex: 1 1 auto;
604
+ }
605
+ }
606
+
607
+ @media (max-width: 540px) {
608
+ .dl-feature-grid {
609
+ grid-template-columns: 1fr;
610
+ }
611
+ .dl-site-grid {
612
+ grid-template-columns: repeat(2, 1fr);
613
+ }
614
+ .dl-hero {
615
+ padding: 16px 14px;
616
+ }
617
+ .dl-hero__head {
618
+ gap: 10px;
619
+ align-items: center;
620
+ flex-wrap: wrap;
621
+ }
622
+ .dl-hero__text {
623
+ flex: 1 1 0;
624
+ min-width: 0;
625
+ text-align: left;
626
+ }
627
+ .dl-hero__icon {
628
+ width: 36px;
629
+ height: 36px;
630
+ }
631
+ .dl-hero__icon svg {
632
+ width: 18px;
633
+ height: 18px;
634
+ }
635
+ .dl-hero__title {
636
+ font-size: 16px;
637
+ text-align: left;
638
+ }
639
+ .dl-hero__meta {
640
+ font-size: 12px;
641
+ text-align: left;
642
+ }
643
+ .dl-hero__actions {
644
+ flex-direction: column;
645
+ gap: 10px;
646
+ }
647
+ .dl-hero #processing-btn,
648
+ .dl-hero__link {
649
+ width: 100% !important;
650
+ flex: 1 1 100%;
651
+ height: 54px !important;
652
+ min-height: 54px;
653
+ line-height: 1;
654
+ font-size: 15px;
655
+ padding: 0 20px !important;
656
+ border-radius: 12px;
657
+ box-sizing: border-box;
658
+ }
659
+ .dl-hero #processing-btn svg,
660
+ .dl-hero__link svg {
661
+ width: 18px;
662
+ height: 18px;
663
+ }
664
+ .dl-hero__chips-row {
665
+ flex-direction: column;
666
+ align-items: flex-start;
667
+ gap: 10px;
668
+ }
669
+ .dl-hero__chips-label {
670
+ flex-wrap: wrap;
671
+ row-gap: 6px;
672
+ }
673
+ .dl-hero .dl-chips {
674
+ width: 100%;
675
+ gap: 6px;
676
+ }
677
+ .dl-hero .dl-chip {
678
+ padding: 6px 11px;
679
+ font-size: 12px;
680
+ }
681
+ }
682
+ </style>
683
+
684
+ <div class="dl-page">
685
+ <div class="container">
686
+ {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
687
+ <div class="row">
688
+ <div class="col-md-9 mx-auto">
689
+ {%- endif -%}
690
+
691
+ <div class="dl-wrap appscms-download-section">
692
+
693
+ <div class="dl-hero">
694
+ <div class="dl-hero__head">
695
+ <span class="dl-hero__icon" aria-hidden="true">
696
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
697
+ <polyline points="20 6 9 17 4 12"/>
698
+ </svg>
699
+ </span>
700
+ <div class="dl-hero__text">
701
+ <h1 class="dl-hero__title">
702
+ {{ downloadData.successmessage | default: 'Hurray! your operation was completed' }}
703
+ </h1>
704
+ <span class="dl-hero__meta">
705
+ Thanks for using our tool.
706
+ </span>
707
+ </div>
708
+
709
+ <div class="dl-hero__actions">
710
+ <div class="success-msg-cont mb-0">
711
+ <div class="success-greeting">
712
+ <p class="success-msg">{{ downloadData.successmessage | default: 'Hurray! your operation was completed' }}</p>
713
+ </div>
714
+ <div class="go-back-block">
715
+ <button id="processing-btn" type="button">
716
+ <span class="button-loader" aria-hidden="true"></span>
717
+ <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
718
+ Process another file
719
+ </button>
153
720
  </div>
154
721
  </div>
722
+ <a class="dl-hero__link" href="/">
723
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
724
+ Back to home
725
+ </a>
726
+ </div>
727
+ </div>
728
+
729
+ {%- if downloadData.recommendedfeatures -%}
730
+ <div class="dl-hero__chips-row">
731
+ <span class="dl-hero__chips-label">
732
+ <strong>{{ downloadData.tryfeatureheading | default: 'You can also try these features' }}</strong>
733
+ <small>Popular tools</small>
734
+ </span>
735
+ <div class="dl-chips">
736
+ {%- for item in downloadData.recommendedfeatures -%}
737
+ <a class="dl-chip" href="{{item.url}}">
738
+ <span class="dl-chip__label">{{ item.name }}</span>
739
+ </a>
740
+ {%- endfor -%}
155
741
  </div>
742
+ </div>
743
+ {%- endif -%}
744
+ </div>
156
745
 
746
+ {%- if site.show_contenttool_promo -%}
747
+ <div class="dl-promo-wrap">
748
+ {%- include contenttool_result_banner.html -%}
749
+ </div>
750
+ {%- endif -%}
751
+
752
+ <div class="dl-section">
753
+ <h2 class="dl-section__title appscms-heading">
157
754
  {%- if downloadData.recommendedsitesheading -%}
158
- <p class="appscms-heading col-12">{{downloadData.recommendedsitesheading}}</p>
755
+ {{ downloadData.recommendedsitesheading }}
159
756
  {%- else -%}
160
- <p class="appscms-heading col-12">Try our other sites for safe processing of you files ! </p>
757
+ Try our other sites for safe processing of your files
161
758
  {%- endif -%}
162
- <div class="row w-100 px-3 website-showcases">
163
- {%- if downloadData.recommendedsites -%}
164
- {%- assign recommendedsitesData = downloadData.recommendedsites -%}
165
- {%- for item in recommendedsitesData -%}
166
- <div class="col-md-4 col-sm-6 col-6">
167
- <div class="website-showcase">
168
- <img loading='lazy' class="website-img" src="{{item.logo}}" alt="{{item.name}} logo" {%- if
169
- site.crossorigin -%} crossorigin="anonymous" {%- endif -%}> <a target="_blank"
170
- href="{{item.url}}">{{item.name}}</a>
759
+ <small>Trusted &amp; free</small>
760
+ </h2>
761
+ <div class="dl-site-grid website-showcases">
762
+ {%- if downloadData.recommendedsites -%}
763
+ {%- for item in downloadData.recommendedsites -%}
764
+ <div class="dl-site-card website-showcase">
765
+ <img loading="lazy" class="website-img" src="{{item.logo}}" alt="{{item.name}} logo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}>
766
+ <a target="_blank" rel="noopener" href="{{item.url}}">{{ item.name }}</a>
171
767
  </div>
172
- </div>
173
768
  {%- endfor -%}
174
- {%- else -%}
175
- <div class="col-md-4 col-sm-6 col-6">
176
- <div class="website-showcase">
177
- <img loading='lazy' class="website-img"
178
- src="https://d33wubrfki0l68.cloudfront.net/0623ca017395ac8b757b16b645ff38a89963b01b/a43c6/assets/logo.svg"
179
- alt="safepdfkitlogo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}> <a
180
- target="_blank" href="https://safepdfkit.com">Safepdfkit.com</a>
181
- </div>
769
+ {%- else -%}
770
+ <div class="dl-site-card website-showcase">
771
+ <img loading="lazy" class="website-img" src="https://d33wubrfki0l68.cloudfront.net/0623ca017395ac8b757b16b645ff38a89963b01b/a43c6/assets/logo.svg" alt="safepdfkit logo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}>
772
+ <a target="_blank" rel="noopener" href="https://safepdfkit.com">Safepdfkit.com</a>
182
773
  </div>
183
- <div class="col-md-4 col-sm-6 col-6">
184
- <div class="website-showcase">
185
- <img class="website-img" loading='lazy'
186
- src="https://d33wubrfki0l68.cloudfront.net/796c1a01dae9c2d10224fd72a820156974b26ab1/3b885/assets/images/logo.png"
187
- alt="Safeaudiokit-logo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}> <a
188
- target="_blank" href="https://safeaudiokit.com">safeaudiokit.com</a>
189
- </div>
774
+ <div class="dl-site-card website-showcase">
775
+ <img loading="lazy" class="website-img" src="https://d33wubrfki0l68.cloudfront.net/796c1a01dae9c2d10224fd72a820156974b26ab1/3b885/assets/images/logo.png" alt="Safeaudiokit logo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}>
776
+ <a target="_blank" rel="noopener" href="https://safeaudiokit.com">safeaudiokit.com</a>
190
777
  </div>
191
- <div class="col-md-4 col-sm-6 col-6">
192
- <div class="website-showcase">
193
- <img class="website-img" loading="lazy"
194
- src="https://d33wubrfki0l68.cloudfront.net/ab0207d780c019c54db62b002396bc8c3fddddaf/9abb9/assets/safevideokit.svg"
195
- alt="Safevideokitlogo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}> <a
196
- target="_blank" href="https://safevideokit.com">safevideokit.com</a>
197
- </div>
778
+ <div class="dl-site-card website-showcase">
779
+ <img loading="lazy" class="website-img" src="https://d33wubrfki0l68.cloudfront.net/ab0207d780c019c54db62b002396bc8c3fddddaf/9abb9/assets/safevideokit.svg" alt="Safevideokit logo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}>
780
+ <a target="_blank" rel="noopener" href="https://safevideokit.com">safevideokit.com</a>
198
781
  </div>
199
- <div class="col-md-4 col-sm-6 col-6 ">
200
- <div class="website-showcase">
201
- <img loading='lazy' class="website-img"
202
- src="https://d33wubrfki0l68.cloudfront.net/2e37a1020563aa528471da7425b8e58343e2baf7/a186c/picture.png"
203
- alt="Safeimagekitlogo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}> <a
204
- target="_blank" href="https://safeimagekit.com/">safeimagekit.com</a>
205
- </div>
782
+ <div class="dl-site-card website-showcase">
783
+ <img loading="lazy" class="website-img" src="https://d33wubrfki0l68.cloudfront.net/2e37a1020563aa528471da7425b8e58343e2baf7/a186c/picture.png" alt="Safeimagekit logo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}>
784
+ <a target="_blank" rel="noopener" href="https://safeimagekit.com/">safeimagekit.com</a>
206
785
  </div>
207
- <div class="col-md-4 col-sm-6 col-6">
208
- <div class="website-showcase">
209
- <img loading='lazy' class="website-img"
210
- src="https://d33wubrfki0l68.cloudfront.net/74bf3f3836d56b30d16137169cd4c28bf15494ed/11962/js/pt.png"
211
- alt="safezipkitlogo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}> <a
212
- target="_blank" href="https://safezipkit.com/">safezipkit.com</a>
213
- </div>
786
+ <div class="dl-site-card website-showcase">
787
+ <img loading="lazy" class="website-img" src="https://d33wubrfki0l68.cloudfront.net/74bf3f3836d56b30d16137169cd4c28bf15494ed/11962/js/pt.png" alt="safezipkit logo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}>
788
+ <a target="_blank" rel="noopener" href="https://safezipkit.com/">safezipkit.com</a>
214
789
  </div>
215
- <div class="col-md-4 col-sm-6 col-6">
216
- <div class="website-showcase">
217
- <img loading='lazy' class="website-img"
218
- src="https://d33wubrfki0l68.cloudfront.net/325cdfad7de6cae4a03aecfadc70b38af754cbd0/d87f9/assets/images/logo.png"
219
- alt="Safeimageconverter logo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}> <a
220
- target="_blank" href="https://safeaudioconverter.com/">
221
- safeaudioconverter.com
222
-
223
- </a>
224
- </div>
790
+ <div class="dl-site-card website-showcase">
791
+ <img loading="lazy" class="website-img" src="https://d33wubrfki0l68.cloudfront.net/325cdfad7de6cae4a03aecfadc70b38af754cbd0/d87f9/assets/images/logo.png" alt="Safeaudioconverter logo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}>
792
+ <a target="_blank" rel="noopener" href="https://safeaudioconverter.com/">safeaudioconverter.com</a>
225
793
  </div>
226
- <div class="col-md-4 col-sm-6 col-6">
227
- <div class="website-showcase">
228
- <img loading='lazy' class="website-img" src="/assets//images/safevideoconverter.svg"
229
- alt="safevideoconverter logo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}> <a
230
- target="_blank" href="https://safevideoconverter.com/">safevideoconverter.com</a>
231
- </div>
794
+ <div class="dl-site-card website-showcase">
795
+ <img loading="lazy" class="website-img" src="/assets/images/safevideoconverter.svg" alt="safevideoconverter logo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}>
796
+ <a target="_blank" rel="noopener" href="https://safevideoconverter.com/">safevideoconverter.com</a>
232
797
  </div>
233
- <div class="col-md-4 col-sm-6 col-6">
234
- <div class="website-showcase">
235
- <img loading='lazy' class="website-img"
236
- src="https://d33wubrfki0l68.cloudfront.net/c8fef6be5192b9fa57b8503c6ad93befa361926d/a66d0/picture.svg"
237
- alt="safeimageconverter logo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}> <a
238
- target="_blank" href="https://safeimageconverter.com/">safeimageconverter</a>
239
- </div>
798
+ <div class="dl-site-card website-showcase">
799
+ <img loading="lazy" class="website-img" src="https://d33wubrfki0l68.cloudfront.net/c8fef6be5192b9fa57b8503c6ad93befa361926d/a66d0/picture.svg" alt="safeimageconverter logo" {%- if site.crossorigin -%} crossorigin="anonymous" {%- endif -%}>
800
+ <a target="_blank" rel="noopener" href="https://safeimageconverter.com/">safeimageconverter.com</a>
240
801
  </div>
241
- {%- endif -%}
242
-
243
- </div>
802
+ {%- endif -%}
803
+ </div>
804
+ </div>
244
805
 
806
+ <div class="dl-share download-social-share">
807
+ <div class="dl-share__text">
808
+ <h3>Enjoyed the tool? Share with your friends</h3>
809
+ <p>
810
+ {%- if downloadData.socialshareheading -%}
811
+ {{ downloadData.socialshareheading }}
812
+ {%- else -%}
813
+ We're a free platform for safely processing your files. Help us grow by sharing with your friends. Thanks!
814
+ {%- endif -%}
815
+ </p>
816
+ </div>
245
817
 
818
+ {%- if site.data.blog.share.platforms -%}
819
+ <div class="dl-share__icons share-icons">
820
+ {% assign url = site.url %}
821
+ {% for share in site.data.blog.share.platforms %}
822
+ {% assign link = share.link | replace: 'URL', url %}
823
+ <a id="{{share.type}}" href="{{ link }}" data-toggle="tooltip"
824
+ onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
825
+ data-placement="top" title="{{ share.type }}" aria-label="Share on {{ share.type }}">
826
+ <i class="fa-fw {{ share.icon }} mb-0"></i>
827
+ </a>
828
+ {% endfor %}
246
829
  </div>
830
+ {%- endif -%}
247
831
  </div>
248
- {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
249
832
 
250
833
  </div>
251
- </div>
252
- </div>
253
- {%- endif -%}
254
-
255
- </div>
256
-
257
834
 
258
- <div class="download-social-share">
259
- <div class="container">
260
- <div class="row">
261
- <div class="col-md-9 mx-auto">
262
- <div class="row">
263
- <div class="col-md-8">
264
- <p class=" share-heading mb-0 ">
265
- {%- if downloadData.socialshareheading -%}
266
- {{downloadData.socialshareheading}}
267
- {%- else -%}
268
- we are a free to use platform for safe processing of your files. We need to your support to grow. Help
269
- us by sharing us on social media. Thanks !
270
- {%- endif -%}
271
- </p>
272
- </div>
273
- <div class="col-md-4">
274
- {%- if site.data.blog.share.platforms -%}
275
-
276
-
277
- <div class="share-icons">
278
- {% assign url = site.url %}
279
- {% for share in site.data.blog.share.platforms %}
280
- {% assign link = share.link | replace: 'URL', url %}
281
- {{page.title}}
282
- <a id=" {{share.type}}" href="{{ link }}" data-toggle="tooltip"
283
- onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
284
- data-placement="top" title="{{ share.type }}" aria-label="{{ share.type }}">
285
- <i class="fa-fw {{ share.icon }} mb-0"></i>
286
- </a>
287
- {% endfor %}
288
- </div>
289
- </ul>
290
-
291
- {%- endif -%}
292
- </div>
293
-
294
- </div>
835
+ {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
295
836
  </div>
296
837
  </div>
838
+ {%- endif -%}
297
839
  </div>
298
840
  </div>
299
841
 
@@ -302,4 +844,4 @@
302
844
 
303
845
  </body>
304
846
 
305
- </html>
847
+ </html>