appscms-tools-theme 2.2.9 → 2.3.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1b523701948b5c98ba153ea9273e0ac3d4e4e869c69c7239d12950e006cfb044
4
- data.tar.gz: b0b8321dcb0b19fbe5a96f2bcd467bc152528a6cd97717da8fe6323cc4d0890e
3
+ metadata.gz: 1f78ea3fc9eba752da1b32275ac62621b711f58dc43629c4212d82b5f4fcde6b
4
+ data.tar.gz: 3195c5483f102e649beaaa8eca3ca6270368fc34c947ebe283744136141f97c1
5
5
  SHA512:
6
- metadata.gz: 4dd9896964d15ae2bd312e44b1ef65d8a11d99017af1f5050dcffb3860f0d49e44fc33cda5c13f0e3e6e08b5f17640de380228c83937c28c609e131d82d2ce61
7
- data.tar.gz: fe51f0f1792bb51e48424fc1a29d0b1a5773f7ea853dd4eabb28e586ea680f418d0db821bf4f0cfa41cb39973df302f9155af139ae78ce37a92f9060b40ff8c3
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": "#FF5554",
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": "1."
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
+ }
@@ -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
+ ]
@@ -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=="
@@ -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
- <h3 class="mb-0">
18
- <button class="btn btn-block text-left p-0" type="button" data-toggle="collapse"
19
- data-target="#collapse-{{forloop.index}}" aria-expanded="true"
20
- aria-controls="collapse-{{forloop.index}}">
21
- {{item.category}}
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
- <button type="button" id="{{item.id}}" data-index="{{forloop.index}}"
84
- onclick="clickInput(this)">Choose
85
- image</button>
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
- transition: all 0.3s;
344
- border: none;
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: 20px;
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
- padding: 7px 9px;
441
+
463
442
  color: #444;
464
443
  text-decoration: none;
465
444
  font-size: 0.95em;
466
445
  border-radius: 1px;
467
446
  }
468
- .categories-list .card {
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
- height: 100%;
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-border-image.${inputFile.type.split('/')[1]}`
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.2.9
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