appscms-tools-theme 2.2.9 → 2.3.0
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.
- checksums.yaml +4 -4
- data/_data/feature/en/theframe.json +2 -2
- data/_data/home/en/photoeffects.json +24 -0
- data/_data/photo-categories.json +0 -117
- data/_data/photoeffects.json +117 -0
- data/_includes/script.html +3 -0
- data/_layouts/feature.html +1 -1
- data/_layouts/frame.html +54 -44
- data/_layouts/photo-effects-home.html +84 -0
- data/assets/css/frame.css +207 -31
- data/assets/images/loader.gif +0 -0
- data/assets/js/frame.js +8 -3
- metadata +5 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1f78ea3fc9eba752da1b32275ac62621b711f58dc43629c4212d82b5f4fcde6b
|
|
4
|
+
data.tar.gz: 3195c5483f102e649beaaa8eca3ca6270368fc34c947ebe283744136141f97c1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 665ec48d3a2bcbbf867698e406055de6af11c82fbfbbddfbea2717b3e59a8296723dd98b6c378a0a44f69733161a99d4fd2afe1112d6624402f70042692ae377
|
|
7
|
+
data.tar.gz: 12506bbe273d42ba90f976fc4874cb54ffae1fd3a6489bff416f6d284e2c7f9da97a7aa1475ebd3656fb3c5bf91796720ec87a0821b4aa187ee79314b50c9858
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"htmlLangAtt": "en",
|
|
4
4
|
"H1": "The frame",
|
|
5
5
|
"H2": "Upload the image and apply your favourite border",
|
|
6
|
-
"color": "#
|
|
6
|
+
"color": "#ff6131",
|
|
7
7
|
"imgwidth": "35px",
|
|
8
8
|
"imgheight": "35px",
|
|
9
9
|
"imgalt": "altvalue",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"elements": [
|
|
46
46
|
{
|
|
47
47
|
"type": "image",
|
|
48
|
-
"label": "
|
|
48
|
+
"label": "Choose Your Image"
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
51
|
"type": "text",
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"Language": "English",
|
|
3
|
+
"htmlLangAtt": "en",
|
|
4
|
+
"H1": "All effects",
|
|
5
|
+
"H2": "Largest and best collection of photo effects",
|
|
6
|
+
"color": "#ff6131",
|
|
7
|
+
"imgwidth": "35px",
|
|
8
|
+
"imgheight": "35px",
|
|
9
|
+
"imgalt": "altvalue",
|
|
10
|
+
"nofileupload": true,
|
|
11
|
+
"variant": "primary",
|
|
12
|
+
"TITLE": "Image border tool- Surround your images with a border",
|
|
13
|
+
"META": "Image border tool helps you to add a simple border frame to your image. You can customize border colour and width. Border sets the focal subject.",
|
|
14
|
+
"TEXTUAL_CONTENT": [],
|
|
15
|
+
"FAQ": [
|
|
16
|
+
{
|
|
17
|
+
"question": "",
|
|
18
|
+
"answer": ""
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"cssfilepaths": [
|
|
22
|
+
"/assets/css/frame.css"
|
|
23
|
+
]
|
|
24
|
+
}
|
data/_data/photo-categories.json
CHANGED
|
@@ -323,123 +323,6 @@
|
|
|
323
323
|
}
|
|
324
324
|
]
|
|
325
325
|
},
|
|
326
|
-
{
|
|
327
|
-
"category": "All effects",
|
|
328
|
-
"features": [
|
|
329
|
-
{
|
|
330
|
-
"name": "Calendar",
|
|
331
|
-
"link": "/calendar"
|
|
332
|
-
}
|
|
333
|
-
]
|
|
334
|
-
},
|
|
335
|
-
{
|
|
336
|
-
"category": "All effects",
|
|
337
|
-
"features": [
|
|
338
|
-
{
|
|
339
|
-
"name": "Calendar",
|
|
340
|
-
"link": "/calendar"
|
|
341
|
-
}
|
|
342
|
-
]
|
|
343
|
-
},
|
|
344
|
-
{
|
|
345
|
-
"category": "All effects",
|
|
346
|
-
"features": [
|
|
347
|
-
{
|
|
348
|
-
"name": "Calendar",
|
|
349
|
-
"link": "/calendar"
|
|
350
|
-
}
|
|
351
|
-
]
|
|
352
|
-
},
|
|
353
|
-
{
|
|
354
|
-
"category": "All effects",
|
|
355
|
-
"features": [
|
|
356
|
-
{
|
|
357
|
-
"name": "Calendar",
|
|
358
|
-
"link": "/calendar"
|
|
359
|
-
}
|
|
360
|
-
]
|
|
361
|
-
},
|
|
362
|
-
{
|
|
363
|
-
"category": "All effects",
|
|
364
|
-
"features": [
|
|
365
|
-
{
|
|
366
|
-
"name": "Calendar",
|
|
367
|
-
"link": "/calendar"
|
|
368
|
-
}
|
|
369
|
-
]
|
|
370
|
-
},
|
|
371
|
-
{
|
|
372
|
-
"category": "All effects",
|
|
373
|
-
"features": [
|
|
374
|
-
{
|
|
375
|
-
"name": "Calendar",
|
|
376
|
-
"link": "/calendar"
|
|
377
|
-
}
|
|
378
|
-
]
|
|
379
|
-
},
|
|
380
|
-
{
|
|
381
|
-
"category": "All effects",
|
|
382
|
-
"features": [
|
|
383
|
-
{
|
|
384
|
-
"name": "Calendar",
|
|
385
|
-
"link": "/calendar"
|
|
386
|
-
}
|
|
387
|
-
]
|
|
388
|
-
},
|
|
389
|
-
{
|
|
390
|
-
"category": "All effects",
|
|
391
|
-
"features": [
|
|
392
|
-
{
|
|
393
|
-
"name": "Calendar",
|
|
394
|
-
"link": "/calendar"
|
|
395
|
-
}
|
|
396
|
-
]
|
|
397
|
-
},
|
|
398
|
-
{
|
|
399
|
-
"category": "All effects",
|
|
400
|
-
"features": [
|
|
401
|
-
{
|
|
402
|
-
"name": "Calendar",
|
|
403
|
-
"link": "/calendar"
|
|
404
|
-
}
|
|
405
|
-
]
|
|
406
|
-
},
|
|
407
|
-
{
|
|
408
|
-
"category": "All effects",
|
|
409
|
-
"features": [
|
|
410
|
-
{
|
|
411
|
-
"name": "Calendar",
|
|
412
|
-
"link": "/calendar"
|
|
413
|
-
}
|
|
414
|
-
]
|
|
415
|
-
},
|
|
416
|
-
{
|
|
417
|
-
"category": "All effects",
|
|
418
|
-
"features": [
|
|
419
|
-
{
|
|
420
|
-
"name": "Calendar",
|
|
421
|
-
"link": "/calendar"
|
|
422
|
-
}
|
|
423
|
-
]
|
|
424
|
-
},
|
|
425
|
-
{
|
|
426
|
-
"category": "All effects",
|
|
427
|
-
"features": [
|
|
428
|
-
{
|
|
429
|
-
"name": "Calendar",
|
|
430
|
-
"link": "/calendar"
|
|
431
|
-
}
|
|
432
|
-
]
|
|
433
|
-
},
|
|
434
|
-
{
|
|
435
|
-
"category": "All effects",
|
|
436
|
-
"features": [
|
|
437
|
-
{
|
|
438
|
-
"name": "Calendar",
|
|
439
|
-
"link": "/calendar"
|
|
440
|
-
}
|
|
441
|
-
]
|
|
442
|
-
},
|
|
443
326
|
{
|
|
444
327
|
"category": "All effects",
|
|
445
328
|
"features": [
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"featureName": "Hot Air Balloon",
|
|
4
|
+
"url": "/",
|
|
5
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
"featureName": "Hot Air Balloon",
|
|
9
|
+
"url": "/",
|
|
10
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"featureName": "Hot Air Balloon",
|
|
14
|
+
"url": "/",
|
|
15
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"featureName": "Hot Air Balloon",
|
|
19
|
+
"url": "/",
|
|
20
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"featureName": "Hot Air Balloon",
|
|
24
|
+
"url": "/",
|
|
25
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"featureName": "Hot Air Balloon",
|
|
29
|
+
"url": "/",
|
|
30
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"featureName": "Hot Air Balloon",
|
|
34
|
+
"url": "/",
|
|
35
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"featureName": "Hot Air Balloon",
|
|
39
|
+
"url": "/",
|
|
40
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"featureName": "Hot Air Balloon",
|
|
44
|
+
"url": "/",
|
|
45
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"featureName": "Hot Air Balloon",
|
|
49
|
+
"url": "/",
|
|
50
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"featureName": "Hot Air Balloon",
|
|
54
|
+
"url": "/",
|
|
55
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"featureName": "Hot Air Balloon",
|
|
59
|
+
"url": "/",
|
|
60
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"featureName": "Hot Air Balloon",
|
|
64
|
+
"url": "/",
|
|
65
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"featureName": "Hot Air Balloon",
|
|
69
|
+
"url": "/",
|
|
70
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"featureName": "Hot Air Balloon",
|
|
74
|
+
"url": "/",
|
|
75
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"featureName": "Hot Air Balloon",
|
|
79
|
+
"url": "/",
|
|
80
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"featureName": "Hot Air Balloon",
|
|
84
|
+
"url": "/",
|
|
85
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"featureName": "Hot Air Balloon",
|
|
89
|
+
"url": "/",
|
|
90
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"featureName": "Hot Air Balloon",
|
|
94
|
+
"url": "/",
|
|
95
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"featureName": "Hot Air Balloon",
|
|
99
|
+
"url": "/",
|
|
100
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"featureName": "Hot Air Balloon",
|
|
104
|
+
"url": "/",
|
|
105
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"featureName": "Hot Air Balloon",
|
|
109
|
+
"url": "/",
|
|
110
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"featureName": "Hot Air Balloon",
|
|
114
|
+
"url": "/",
|
|
115
|
+
"image": "https://cdn.photofunia.com/effects/balloon/icons/regular.jpg"
|
|
116
|
+
}
|
|
117
|
+
]
|
data/_includes/script.html
CHANGED
|
@@ -30,6 +30,9 @@ replace: "$tool", page.tool }}
|
|
|
30
30
|
{%- if page.layout == "frame" -%}
|
|
31
31
|
{%- assign font = "PT Sans" -%}
|
|
32
32
|
{%- endif -%}
|
|
33
|
+
{%- if page.layout == "photo-effects-home" -%}
|
|
34
|
+
{%- assign font = "PT Sans" -%}
|
|
35
|
+
{%- endif -%}
|
|
33
36
|
<script>WebFont.load({ google: { families: ['{{font}}:200,300,400,500,600,700,800&display=swap'] } })</script>
|
|
34
37
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
|
35
38
|
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
|
data/_layouts/feature.html
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
</div>
|
|
28
28
|
</div>
|
|
29
29
|
{%- endif -%}
|
|
30
|
-
{%- if page.layout != "frame" -%}
|
|
30
|
+
{%- if page.layout != "frame" and page.layout != "photo-effects-home" -%}
|
|
31
31
|
<div class="flex-container pb-3">
|
|
32
32
|
<div class="flex-class py-4 mt-4 mt-md-0 ">
|
|
33
33
|
<div class="d-flex justify-content-center align-items-center"><span class="fHhdVc">
|
data/_layouts/frame.html
CHANGED
|
@@ -12,22 +12,20 @@ layout: feature
|
|
|
12
12
|
<div class="categories-list">
|
|
13
13
|
<div class="accordion" id="accordionExample">
|
|
14
14
|
{%- for item in site.data.photo-categories -%}
|
|
15
|
-
<div class="card">
|
|
15
|
+
<div class="card card-hover">
|
|
16
16
|
<div class="card-header" id="heading-{{forloop.index}}">
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
</button>
|
|
23
|
-
</h3>
|
|
17
|
+
<button class="btn btn-block text-left p-0" type="button" data-toggle="collapse"
|
|
18
|
+
data-target="#collapse-{{forloop.index}}" aria-expanded="true"
|
|
19
|
+
aria-controls="collapse-{{forloop.index}}">
|
|
20
|
+
{{item.category}} <i class="fas fa-angle-down"></i>
|
|
21
|
+
</button>
|
|
24
22
|
</div>
|
|
25
23
|
|
|
26
24
|
<div id="collapse-{{forloop.index}}" class="collapse"
|
|
27
25
|
aria-labelledby="heading-{{forloop.index}}" data-parent="#accordionExample">
|
|
28
26
|
<div class="card-body">
|
|
29
27
|
{%- for i in item.features -%}
|
|
30
|
-
<a href="{{i.link}}">{{i.name}}</a>
|
|
28
|
+
<a href="{{i.link}}">{{i.name}} </a>
|
|
31
29
|
{%- endfor -%}
|
|
32
30
|
</div>
|
|
33
31
|
</div>
|
|
@@ -38,7 +36,7 @@ layout: feature
|
|
|
38
36
|
|
|
39
37
|
</div>
|
|
40
38
|
<div class="col-md-9">
|
|
41
|
-
<div class="row">
|
|
39
|
+
<div class="row" id="upper-panel">
|
|
42
40
|
<div class="col-md-8">
|
|
43
41
|
<div>
|
|
44
42
|
<div>
|
|
@@ -80,23 +78,63 @@ layout: feature
|
|
|
80
78
|
{%- for item in fileData.elements -%}
|
|
81
79
|
{%- if item.type == "image" -%}
|
|
82
80
|
<label for="{{item.id}}">{{item.label}}</label>
|
|
83
|
-
<
|
|
84
|
-
|
|
85
|
-
|
|
81
|
+
<div class="d-flex mb-15">
|
|
82
|
+
<button class="choose-image" type="button" id="{{item.id}}"
|
|
83
|
+
data-index="{{forloop.index}}" onclick="clickInput(this)">Choose
|
|
84
|
+
image</button>
|
|
85
|
+
<button class="cam-image" id="cam-{{forloop.index}}"><i
|
|
86
|
+
class="fas fa-camera"></i></button>
|
|
87
|
+
<img class="small-image-preview" style="display: none;"
|
|
88
|
+
id="image-pre-{{forloop.index}}"></img>
|
|
89
|
+
</div>
|
|
86
90
|
<input class="d-none" id="file-{{forloop.index}}" type="file" onchange="fileOnChange(this)"
|
|
87
91
|
data-index="{{forloop.index}}" accept=".webp,.png,.jpg,.jpeg" required />
|
|
88
92
|
{%- endif -%}
|
|
89
93
|
{%- if item.type == "text" -%}
|
|
90
94
|
<label for="{{item.id}}">{{item.label}}</label>
|
|
91
|
-
<input type="text" id="{{item.id}}">
|
|
95
|
+
<input class="mb-15" type="text" placeholder="Your Text" id="{{item.id}}">
|
|
92
96
|
{%- endif -%}
|
|
93
97
|
{%- endfor -%}
|
|
94
|
-
<div>
|
|
95
|
-
<button type="submit">Go</button>
|
|
98
|
+
<div class="d-flex">
|
|
99
|
+
<button class="submit-btn" type="submit">Go</button>
|
|
96
100
|
</div>
|
|
97
101
|
</form>
|
|
98
102
|
</div>
|
|
99
103
|
</div>
|
|
104
|
+
<div class="row">
|
|
105
|
+
<div id="workspace" data-name="together_forever" style="display: none;">
|
|
106
|
+
<div class="row">
|
|
107
|
+
<div class="col-12 mb-4">
|
|
108
|
+
<div class="d-flex justify-content-between">
|
|
109
|
+
<div class="result-info">
|
|
110
|
+
<a href="{{page.permalink}}" target="_blank">{{page.featureName}}</a>
|
|
111
|
+
<i class="fas fa-chevron-right"></i>
|
|
112
|
+
<div>result</div>
|
|
113
|
+
</div>
|
|
114
|
+
<button id="download-button" style="background-color: {{fileData.color}};"><svg
|
|
115
|
+
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
116
|
+
<path
|
|
117
|
+
d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z" />
|
|
118
|
+
</svg>Download</button>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
</div>
|
|
122
|
+
<div class="col-md-12 mx-auto">
|
|
123
|
+
<div class="select-img-panel">
|
|
124
|
+
<div id="saving-data" style="display: block;">
|
|
125
|
+
<img loading="lazy" src="/assets/images/loader.gif" alt="saving"> <span
|
|
126
|
+
class="ml-2">Saving
|
|
127
|
+
your
|
|
128
|
+
images...</span>
|
|
129
|
+
</div>
|
|
130
|
+
<div id="canvas-panel">
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
100
138
|
|
|
101
139
|
<div class="crop-image-modal-container">
|
|
102
140
|
<div class="row w-100">
|
|
@@ -160,35 +198,7 @@ layout: feature
|
|
|
160
198
|
</div>
|
|
161
199
|
</div>
|
|
162
200
|
</div>
|
|
163
|
-
<div id="workspace" data-name="together_forever" style="display: none;">
|
|
164
|
-
<div class="row">
|
|
165
|
-
<div class="col-md-8 mx-auto">
|
|
166
|
-
<div class="select-img-panel">
|
|
167
|
-
<div id="saving-data" style="display: none;">
|
|
168
|
-
<img loading="lazy" src="/img/save.gif" alt="saving"> <span class="ml-2">Saving your
|
|
169
|
-
images...</span>
|
|
170
|
-
</div>
|
|
171
|
-
<div id="canvas-panel">
|
|
172
|
-
</div>
|
|
173
|
-
</div>
|
|
174
|
-
</div>
|
|
175
|
-
<div class="col-md-4">
|
|
176
|
-
<div class="options-panel">
|
|
177
|
-
<div class="title">
|
|
178
201
|
|
|
179
|
-
</div>
|
|
180
|
-
<div class="download-wrapper">
|
|
181
|
-
<button id="download-button" style="background-color: {{fileData.color}};"><svg
|
|
182
|
-
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
183
|
-
<path
|
|
184
|
-
d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z" />
|
|
185
|
-
</svg>Download</button>
|
|
186
|
-
</div>
|
|
187
|
-
</div>
|
|
188
|
-
|
|
189
|
-
</div>
|
|
190
|
-
</div>
|
|
191
|
-
</div>
|
|
192
202
|
</div>
|
|
193
203
|
</div>
|
|
194
204
|
</div>
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: feature
|
|
3
|
+
---
|
|
4
|
+
{%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
|
|
5
|
+
{%- assign photoEffectsData = site.data.photoeffects -%}
|
|
6
|
+
<div class="container mt-4">
|
|
7
|
+
<div class="col-md-11 mx-auto">
|
|
8
|
+
<div class="row">
|
|
9
|
+
<div class="col-md-3">
|
|
10
|
+
<div class="categories-section">
|
|
11
|
+
</div>
|
|
12
|
+
<div class="categories-list">
|
|
13
|
+
<div class="accordion" id="accordionExample">
|
|
14
|
+
{%- for item in site.data.photo-categories -%}
|
|
15
|
+
<div class="card card-hover">
|
|
16
|
+
<div class="card-header" id="heading-{{forloop.index}}">
|
|
17
|
+
<button class="btn btn-block text-left p-0" type="button" data-toggle="collapse"
|
|
18
|
+
data-target="#collapse-{{forloop.index}}" aria-expanded="true"
|
|
19
|
+
aria-controls="collapse-{{forloop.index}}">
|
|
20
|
+
{{item.category}} <i class="fas fa-angle-down"></i>
|
|
21
|
+
</button>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<div id="collapse-{{forloop.index}}" class="collapse"
|
|
25
|
+
aria-labelledby="heading-{{forloop.index}}" data-parent="#accordionExample">
|
|
26
|
+
<div class="card-body">
|
|
27
|
+
{%- for i in item.features -%}
|
|
28
|
+
<a href="{{i.link}}">{{i.name}} </a>
|
|
29
|
+
{%- endfor -%}
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
{%- endfor -%}
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
</div>
|
|
38
|
+
<div class="col-md-9">
|
|
39
|
+
<div class="row" id="upper-panel">
|
|
40
|
+
<div class="col-12 ">
|
|
41
|
+
<div>
|
|
42
|
+
<div>
|
|
43
|
+
<div>
|
|
44
|
+
{%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
|
|
45
|
+
<h1 class="frame-h1">{%- for word in frameh1-%}
|
|
46
|
+
{%- if forloop.first == true -%}
|
|
47
|
+
{{word | capitalize }}
|
|
48
|
+
{%- else -%}
|
|
49
|
+
{{word}}
|
|
50
|
+
{%- endif -%}
|
|
51
|
+
{%- endfor -%}</h1>
|
|
52
|
+
</div>
|
|
53
|
+
{%- assign frameh2 = fileData.H2 | replace: "$variable", page.value -%}
|
|
54
|
+
<h2 class="frame-h2">
|
|
55
|
+
{%- for word in frameh2 -%}
|
|
56
|
+
{%- if forloop.first == true -%}
|
|
57
|
+
{{word | capitalize }}
|
|
58
|
+
{%- else -%}
|
|
59
|
+
{{word}}
|
|
60
|
+
{%- endif -%}
|
|
61
|
+
{%- endfor -%}
|
|
62
|
+
</h2>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
{%- for item in photoEffectsData -%}
|
|
67
|
+
<div class="col-md-3 px-0">
|
|
68
|
+
<a class="photo-card" href="{{item.url}}">
|
|
69
|
+
<div>
|
|
70
|
+
<img src="{{item.image}}" alt="">
|
|
71
|
+
<div class="photo-effect-feature-name">
|
|
72
|
+
{{item.featureName}}
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</a>
|
|
76
|
+
|
|
77
|
+
</div>
|
|
78
|
+
{%- endfor -%}
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
</div>
|
data/assets/css/frame.css
CHANGED
|
@@ -328,26 +328,19 @@ input {
|
|
|
328
328
|
text-align: left;
|
|
329
329
|
}
|
|
330
330
|
#download-button {
|
|
331
|
-
cursor: pointer;
|
|
332
|
-
display: inline-block;
|
|
333
|
-
width: 100%;
|
|
334
|
-
padding: 14px 0;
|
|
335
|
-
margin-bottom: 20px;
|
|
336
|
-
text-align: center;
|
|
337
|
-
border-radius: 50px;
|
|
338
|
-
background: #0050e5;
|
|
339
|
-
font-size: 18px;
|
|
340
|
-
color: #fff;
|
|
341
|
-
font-weight: 700;
|
|
342
331
|
text-decoration: none;
|
|
343
|
-
|
|
344
|
-
border:
|
|
332
|
+
border-radius: 2px;
|
|
333
|
+
border: 1px solid #ff6131;
|
|
334
|
+
box-shadow: 0;
|
|
335
|
+
color: #fff;
|
|
336
|
+
margin: 3px;
|
|
337
|
+
padding: 4px 15px;
|
|
345
338
|
}
|
|
346
339
|
#download-button svg {
|
|
347
340
|
fill: #fff;
|
|
348
341
|
margin-right: 4px;
|
|
349
342
|
margin-bottom: 4px;
|
|
350
|
-
height:
|
|
343
|
+
height: 15px;
|
|
351
344
|
}
|
|
352
345
|
.download-wrapper {
|
|
353
346
|
display: flex;
|
|
@@ -359,20 +352,6 @@ input {
|
|
|
359
352
|
#canvas-panel canvas {
|
|
360
353
|
max-width: 100%;
|
|
361
354
|
}
|
|
362
|
-
.options-panel select,
|
|
363
|
-
textarea,
|
|
364
|
-
input {
|
|
365
|
-
width: 100%;
|
|
366
|
-
text-align: left;
|
|
367
|
-
background: #fff;
|
|
368
|
-
height: 34px;
|
|
369
|
-
display: flex;
|
|
370
|
-
border-radius: 4px;
|
|
371
|
-
justify-content: space-between;
|
|
372
|
-
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
|
373
|
-
color: #0f0c0c;
|
|
374
|
-
border: 1px solid #ccc;
|
|
375
|
-
}
|
|
376
355
|
.example-images-modal-container,
|
|
377
356
|
.crop-image-modal-container {
|
|
378
357
|
position: fixed;
|
|
@@ -459,18 +438,45 @@ input {
|
|
|
459
438
|
border: none;
|
|
460
439
|
border-bottom: 1px solid #f2f2f2 !important;
|
|
461
440
|
display: block;
|
|
462
|
-
|
|
441
|
+
|
|
463
442
|
color: #444;
|
|
464
443
|
text-decoration: none;
|
|
465
444
|
font-size: 0.95em;
|
|
466
445
|
border-radius: 1px;
|
|
467
446
|
}
|
|
468
|
-
.
|
|
447
|
+
.card-header:hover {
|
|
448
|
+
background: #f8f8f8 !important;
|
|
449
|
+
}
|
|
450
|
+
.categories-list .card-body {
|
|
451
|
+
padding: 0px;
|
|
452
|
+
}
|
|
453
|
+
.categories-list .card-body a {
|
|
454
|
+
width: 100%;
|
|
455
|
+
text-align: left;
|
|
456
|
+
display: block;
|
|
457
|
+
border-top: 1px solid #dadada;
|
|
458
|
+
padding: 9px 9px;
|
|
459
|
+
}
|
|
460
|
+
.categories-list .accordion > .card > .card-header {
|
|
461
|
+
display: flex;
|
|
462
|
+
justify-content: space-between;
|
|
463
|
+
background-color: transparent;
|
|
469
464
|
padding: 7px 9px;
|
|
470
465
|
}
|
|
466
|
+
.categories-list .accordion > .card > .card-header i {
|
|
467
|
+
color: #888888;
|
|
468
|
+
margin-bottom: 0;
|
|
469
|
+
font-size: 19px;
|
|
470
|
+
}
|
|
471
471
|
.categories-list .accordion > .card > .card-header {
|
|
472
472
|
height: auto;
|
|
473
473
|
}
|
|
474
|
+
.categories-list .accordion > .card > .card-header > button {
|
|
475
|
+
display: flex;
|
|
476
|
+
justify-content: space-between;
|
|
477
|
+
align-items: center;
|
|
478
|
+
width: 100%;
|
|
479
|
+
}
|
|
474
480
|
.frame-h1 {
|
|
475
481
|
margin: 0;
|
|
476
482
|
font-size: 17pt;
|
|
@@ -513,7 +519,177 @@ input {
|
|
|
513
519
|
font-weight: 600;
|
|
514
520
|
border-bottom: 1px solid #dadada;
|
|
515
521
|
}
|
|
522
|
+
.preview-section {
|
|
523
|
+
display: flex;
|
|
524
|
+
justify-content: left;
|
|
525
|
+
margin-top: 15px;
|
|
526
|
+
}
|
|
516
527
|
.preview-section img {
|
|
528
|
+
width: auto;
|
|
529
|
+
height: auto;
|
|
530
|
+
}
|
|
531
|
+
#effect-form label {
|
|
532
|
+
display: block;
|
|
533
|
+
font-weight: 600;
|
|
534
|
+
margin: 0 0 5px;
|
|
535
|
+
color: #666;
|
|
536
|
+
text-align: left;
|
|
537
|
+
text-transform: capitalize;
|
|
538
|
+
font-size: 14px;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
.submit-btn {
|
|
542
|
+
margin: 0;
|
|
543
|
+
width: 180px;
|
|
544
|
+
padding: 10px 0;
|
|
545
|
+
font-size: 13pt;
|
|
546
|
+
position: relative;
|
|
547
|
+
border: 1px solid #ff6131;
|
|
548
|
+
box-shadow: 0;
|
|
549
|
+
color: #fff;
|
|
550
|
+
padding: 4px 15px;
|
|
551
|
+
-webkit-border-radius: 2px;
|
|
552
|
+
-moz-border-radius: 2px;
|
|
553
|
+
border-radius: 2px;
|
|
554
|
+
background: #ff6d41;
|
|
555
|
+
background: -webkit-gradient(
|
|
556
|
+
linear,
|
|
557
|
+
left bottom,
|
|
558
|
+
left top,
|
|
559
|
+
color-stop(0, #ff6537),
|
|
560
|
+
color-stop(1, #ff754b)
|
|
561
|
+
);
|
|
562
|
+
background: -ms-linear-gradient(bottom, #ff6537, #ff754b);
|
|
563
|
+
background: -moz-linear-gradient(center bottom, #ff6537 0, #ff754b 100%);
|
|
564
|
+
background: -o-linear-gradient(#ff754b, #ff6537);
|
|
565
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff754b', endColorstr='#ff6537', GradientType=0);
|
|
566
|
+
}
|
|
567
|
+
.cam-image {
|
|
568
|
+
color: #666;
|
|
569
|
+
height: 40px;
|
|
570
|
+
width: 50px;
|
|
571
|
+
display: flex;
|
|
572
|
+
align-items: center;
|
|
573
|
+
justify-content: center;
|
|
574
|
+
border: 1px solid #ccc;
|
|
575
|
+
background: #eee;
|
|
576
|
+
background: -webkit-gradient(
|
|
577
|
+
linear,
|
|
578
|
+
left bottom,
|
|
579
|
+
left top,
|
|
580
|
+
color-stop(0, #ececec),
|
|
581
|
+
color-stop(1, #f6f6f6)
|
|
582
|
+
);
|
|
583
|
+
}
|
|
584
|
+
.cam-image i {
|
|
585
|
+
margin-bottom: 0px;
|
|
586
|
+
color: #666;
|
|
587
|
+
}
|
|
588
|
+
.small-image-preview {
|
|
589
|
+
height: 40px;
|
|
590
|
+
width: 50px !important;
|
|
517
591
|
width: 100%;
|
|
518
|
-
|
|
592
|
+
}
|
|
593
|
+
.choose-image {
|
|
594
|
+
color: #666;
|
|
595
|
+
margin-right: 6px;
|
|
596
|
+
border: 1px solid #ccc;
|
|
597
|
+
background: #eee;
|
|
598
|
+
background: -webkit-gradient(
|
|
599
|
+
linear,
|
|
600
|
+
left bottom,
|
|
601
|
+
left top,
|
|
602
|
+
color-stop(0, #ececec),
|
|
603
|
+
color-stop(1, #f6f6f6)
|
|
604
|
+
);
|
|
605
|
+
padding: 0;
|
|
606
|
+
width: 186px;
|
|
607
|
+
height: 40px;
|
|
608
|
+
line-height: 40px;
|
|
609
|
+
font-size: 13pt;
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
#effect-form {
|
|
613
|
+
display: flex;
|
|
614
|
+
flex-direction: column;
|
|
615
|
+
justify-content: left;
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
#effect-form input[type='text'] {
|
|
619
|
+
box-shadow: none;
|
|
620
|
+
border: 1px solid #ccc;
|
|
621
|
+
background: #fff;
|
|
622
|
+
padding: 5px 2%;
|
|
623
|
+
margin: 4px 0;
|
|
624
|
+
min-width: 190px;
|
|
625
|
+
-webkit-border-radius: 2px;
|
|
626
|
+
-moz-border-radius: 2px;
|
|
627
|
+
border-radius: 2px;
|
|
628
|
+
margin: 0;
|
|
629
|
+
width: 216px;
|
|
630
|
+
}
|
|
631
|
+
.mb-15 {
|
|
632
|
+
margin-bottom: 15px !important;
|
|
633
|
+
}
|
|
634
|
+
.btn:focus {
|
|
635
|
+
box-shadow: none !important;
|
|
636
|
+
}
|
|
637
|
+
.result-info {
|
|
638
|
+
display: flex;
|
|
639
|
+
}
|
|
640
|
+
.result-info a {
|
|
641
|
+
color: #ff754b !important;
|
|
642
|
+
cursor: pointer;
|
|
643
|
+
text-decoration: underline;
|
|
644
|
+
float: left;
|
|
645
|
+
font-size: 17pt;
|
|
646
|
+
line-height: 24pt;
|
|
647
|
+
margin: 0 0 5px;
|
|
648
|
+
font-weight: 600;
|
|
649
|
+
color: #444;
|
|
650
|
+
text-transform: capitalize;
|
|
651
|
+
}
|
|
652
|
+
.result-info i {
|
|
653
|
+
margin-left: 6px;
|
|
654
|
+
margin-right: 6px;
|
|
655
|
+
color: black;
|
|
656
|
+
font-size: 17px;
|
|
657
|
+
margin-bottom: 0px;
|
|
658
|
+
margin-top: 11px;
|
|
659
|
+
}
|
|
660
|
+
.result-info div {
|
|
661
|
+
float: left;
|
|
662
|
+
font-size: 17pt;
|
|
663
|
+
font-weight: 600;
|
|
664
|
+
text-transform: capitalize;
|
|
665
|
+
line-height: 24pt;
|
|
666
|
+
margin: 0 0 5px;
|
|
667
|
+
color: #444;
|
|
668
|
+
}
|
|
669
|
+
#saving-data {
|
|
670
|
+
display: flex;
|
|
671
|
+
flex-direction: column;
|
|
672
|
+
align-items: center;
|
|
673
|
+
}
|
|
674
|
+
#saving-data img {
|
|
675
|
+
height: 200px;
|
|
676
|
+
}
|
|
677
|
+
.photo-card {
|
|
678
|
+
display: inline-block;
|
|
679
|
+
zoom: 1;
|
|
680
|
+
margin: 10px 6px 6px;
|
|
681
|
+
padding: 8px 12px 4px;
|
|
682
|
+
border: 1px solid #e5e5e5;
|
|
683
|
+
border-bottom-color: #dcdcdc;
|
|
684
|
+
border-right-color: #e0e0e0;
|
|
685
|
+
text-decoration: none;
|
|
686
|
+
position: relative;
|
|
687
|
+
overflow: hidden;
|
|
688
|
+
-webkit-border-radius: 2px;
|
|
689
|
+
-moz-border-radius: 2px;
|
|
690
|
+
border-radius: 2px;
|
|
691
|
+
}
|
|
692
|
+
.photo-effect-feature-name {
|
|
693
|
+
text-align: center;
|
|
694
|
+
color: #777;
|
|
519
695
|
}
|
|
Binary file
|
data/assets/js/frame.js
CHANGED
|
@@ -91,6 +91,9 @@ const drawInputImage = (ctx, item, indexValue) => {
|
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
const drawImage = () => {
|
|
94
|
+
workspace.style.display = 'block'
|
|
95
|
+
document.querySelector('#upper-panel').style.display = 'none'
|
|
96
|
+
document.querySelector('#saving-data').style.display = 'flex'
|
|
94
97
|
let img = new Image()
|
|
95
98
|
img.src = featureData.effectImagePath
|
|
96
99
|
var canvas = document.createElement('canvas')
|
|
@@ -157,8 +160,8 @@ const drawImage = () => {
|
|
|
157
160
|
}
|
|
158
161
|
})
|
|
159
162
|
canvasPanel.innerHTML = ''
|
|
163
|
+
document.querySelector('#saving-data').style.display = 'none'
|
|
160
164
|
canvasPanel.appendChild(canvas)
|
|
161
|
-
workspace.style.display = 'block'
|
|
162
165
|
})
|
|
163
166
|
}
|
|
164
167
|
}
|
|
@@ -172,7 +175,6 @@ const cropImage = (result, id) => {
|
|
|
172
175
|
cropper = new Cropper(img, {
|
|
173
176
|
viewMode: 3,
|
|
174
177
|
ready() {
|
|
175
|
-
console.log(id)
|
|
176
178
|
let find = featureData.elements.find((i) => i.id === id)
|
|
177
179
|
console.log(find)
|
|
178
180
|
cropper.setAspectRatio(Number(find.width) / Number(find.height))
|
|
@@ -200,6 +202,9 @@ document.querySelector('#crop').addEventListener('click', () => {
|
|
|
200
202
|
})
|
|
201
203
|
.toDataURL()
|
|
202
204
|
files[index - 1] = cropperImg
|
|
205
|
+
document.querySelector(`#image-pre-${index}`).src = cropperImg
|
|
206
|
+
document.querySelector(`#image-pre-${index}`).style.display = 'block'
|
|
207
|
+
document.querySelector(`#cam-${index}`).style.display = 'none'
|
|
203
208
|
cropModal.style.display = 'none'
|
|
204
209
|
})
|
|
205
210
|
const openExamplesModal = () => {
|
|
@@ -233,7 +238,7 @@ download.addEventListener('click', () => {
|
|
|
233
238
|
let url = canvas.toDataURL(`image/png`)
|
|
234
239
|
let a = document.createElement('a')
|
|
235
240
|
a.href = url
|
|
236
|
-
a.download = `safeimagekit-
|
|
241
|
+
a.download = `safeimagekit-photo-effect-image.png`
|
|
237
242
|
document.body.appendChild(a)
|
|
238
243
|
a.click()
|
|
239
244
|
if (lang === 'en') {
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: appscms-tools-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 2.
|
|
4
|
+
version: 2.3.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- vivek-appscms
|
|
@@ -2374,10 +2374,12 @@ files:
|
|
|
2374
2374
|
- _data/header/hi/data.json
|
|
2375
2375
|
- _data/help/en/help.json
|
|
2376
2376
|
- _data/home/en/en.json
|
|
2377
|
+
- _data/home/en/photoeffects.json
|
|
2377
2378
|
- _data/home/hi/hi.json
|
|
2378
2379
|
- _data/languagesupport/compress-pdf-langs.json
|
|
2379
2380
|
- _data/languagesupport/index-langs.json
|
|
2380
2381
|
- _data/photo-categories.json
|
|
2382
|
+
- _data/photoeffects.json
|
|
2381
2383
|
- _data/privacy/en/privacyPolicy.json
|
|
2382
2384
|
- _data/rating/rating.json
|
|
2383
2385
|
- _data/termAndCondition/en/termAndCondition.json
|
|
@@ -2440,6 +2442,7 @@ files:
|
|
|
2440
2442
|
- _layouts/home.html
|
|
2441
2443
|
- _layouts/homeResultPage.html
|
|
2442
2444
|
- _layouts/page.html
|
|
2445
|
+
- _layouts/photo-effects-home.html
|
|
2443
2446
|
- _layouts/post.html
|
|
2444
2447
|
- _layouts/privacyPolicy.html
|
|
2445
2448
|
- _layouts/termAndCondition.html
|
|
@@ -2590,6 +2593,7 @@ files:
|
|
|
2590
2593
|
- assets/images/gallary.png
|
|
2591
2594
|
- assets/images/keshav.webp
|
|
2592
2595
|
- assets/images/krutika.jpeg
|
|
2596
|
+
- assets/images/loader.gif
|
|
2593
2597
|
- assets/images/logo.png
|
|
2594
2598
|
- assets/images/paavan.webp
|
|
2595
2599
|
- assets/images/rating.png
|