appscms-tools-theme 2.7.1 → 2.7.2

Sign up to get free protection for your applications and to get access to all the features.
data/_layouts/frame.html CHANGED
@@ -43,11 +43,11 @@ layout: feature
43
43
  </div>
44
44
  </div>
45
45
 
46
- <div class="col-md-12 mx-auto">
46
+ <div class="col-md-11 mx-auto">
47
47
 
48
48
  <div class="row" id="upper-panel">
49
-
50
- <div class="col-md-4">
49
+ {%- if site.photoeffectsemd -%}
50
+ <div class="col-md-5">
51
51
 
52
52
  <div class="preview-section">
53
53
  <img src="{{fileData.mainPreviewImage}}" alt="">
@@ -110,6 +110,224 @@ layout: feature
110
110
  </div>
111
111
 
112
112
  </div>
113
+ {%- else -%}
114
+
115
+ <div class="col-md-3">
116
+ <div class="categories-section">
117
+ </div>
118
+ <div class="categories-list">
119
+ <ul>
120
+ <li>
121
+ <a class="category-link" href="/">All effects</a>
122
+ </li>
123
+ <li>
124
+ <a class="category-link" href="/fun-photo-effects/christmas">christmas</a>
125
+ </li>
126
+ <li>
127
+ <a class="category-link" href="/fun-photo-effects/valentines_day">Valentine's
128
+ day</a>
129
+ </li>
130
+ <li>
131
+ <a class="category-link" href="/fun-photo-effects/easter">Easter</a>
132
+ </li>
133
+ <li>
134
+ <a class="category-link" href="/fun-photo-effects/cards">cards</a>
135
+ </li>
136
+ <li>
137
+ <a class="category-link" href="/fun-photo-effects/galleries">Galleries</a>
138
+ </li>
139
+ <li>
140
+ <a class="category-link" href="/fun-photo-effects/frames">Frames</a>
141
+ </li>
142
+ <li>
143
+ <a class="category-link" href="/fun-photo-effects/tv">TV</a>
144
+ </li>
145
+ <li>
146
+ <a class="category-link" href="/fun-photo-effects/magazines">Magazines</a>
147
+ </li>
148
+ <li>
149
+ <a class="category-link" href="/fun-photo-effects/movies">Movies</a>
150
+ </li>
151
+ <li>
152
+ <a class="category-link" href="/fun-photo-effects/photography">Photography</a>
153
+ </li>
154
+ <li>
155
+ <a class="category-link" href="/fun-photo-effects/posters">Posters</a>
156
+ </li>
157
+ <li>
158
+ <a class="category-link" href="/fun-photo-effects/misc">Misc</a>
159
+ </li>
160
+ <li>
161
+ <a class="category-link" href="/fun-photo-effects/celebrities">Celebrities</a>
162
+ </li>
163
+ <li>
164
+ <a class="category-link" href="/fun-photo-effects/vintage">Vintage</a>
165
+ </li>
166
+ </ul>
167
+
168
+ </div>
169
+
170
+ </div>
171
+ <div class="col-md-9">
172
+ <div class="row" id="upper-panel">
173
+ <div class="col-md-8">
174
+ <div>
175
+ <div>
176
+ <div>
177
+ <h1 class="frame-h1">Create your own personalized festive message with
178
+ filter snow sign</h1>
179
+ </div>
180
+ <h2 class="frame-h2">Type your text for the effect of snow sign and create
181
+ stunning postcard.</h2>
182
+ </div>
183
+ </div>
184
+ <div class="preview-section">
185
+ <img src="https://d33wubrfki0l68.cloudfront.net/d90f2e076e41e31601d00e53274fd82fdb1e385d/c7fa1/assets/images/snow-sign-main.png"
186
+ alt="">
187
+ </div>
188
+ <h3 id="example-h3">Examples</h3>
189
+ <div class="image-samples" onclick="openExamplesModal()"><img
190
+ src="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png"
191
+ alt="sample"><img
192
+ src="https://d33wubrfki0l68.cloudfront.net/caa79e544fb9c16a5375c2450604287aa21b93ce/693ab/assets/images/snow-sign2.png"
193
+ alt="sample"><img
194
+ src="https://d33wubrfki0l68.cloudfront.net/c74fc74ac5b2ac2c84ddc7098a606d668a897ec2/07305/assets/images/snow-sign3.png"
195
+ alt="sample"><img
196
+ src="https://d33wubrfki0l68.cloudfront.net/645c7c7f1099c97ab4b82faac94e5ac71749d222/93692/assets/images/snow-sign4.png"
197
+ alt="sample"></div>
198
+
199
+ </div>
200
+ <div class="col-md-4">
201
+ <form id="effect-form" data-feature-name="snow-sign"><label for="text-1"></label>
202
+ <input class="mb-15" type="text" placeholder="Your Text" id="text-1">
203
+ <div class="d-flex">
204
+ <button class="submit-btn" type="submit">Go</button>
205
+ </div>
206
+ </form>
207
+ </div>
208
+ </div>
209
+ <div class="row">
210
+ <div id="workspace" data-name="together_forever" style="display: none;">
211
+ <div class="row">
212
+ <div class="col-12 mb-4">
213
+ <div class="d-flex justify-content-between">
214
+ <div class="result-info">
215
+ <a href="/fun-photo-effects/christmas-snow-sign"
216
+ target="_blank">snow-sign</a>
217
+ <i class="fas fa-chevron-right"></i>
218
+ <div>result</div>
219
+ </div>
220
+ <button id="download-button" style="background-color: #FF5554;"><svg
221
+ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
222
+ <path
223
+ 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">
224
+ </path>
225
+ </svg>Download</button>
226
+ </div>
227
+
228
+ </div>
229
+ <div class="col-md-12 mx-auto">
230
+ <div class="select-img-panel">
231
+ <div id="saving-data" style="display: block;">
232
+ <img loading="lazy"
233
+ src="https://d33wubrfki0l68.cloudfront.net/5ffee5c33dad367f7441ca96caa793eff6a95e3e/1975e/assets/images/loader.gif"
234
+ alt="saving"> <span class="ml-2">Saving
235
+ your
236
+ images...</span>
237
+ </div>
238
+ <div id="canvas-panel">
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <div class="crop-image-modal-container">
248
+ <div class="row w-100">
249
+ <div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
250
+ <div class="crop-image-modal-header" style="background-color:#FF5554 ;">
251
+ <div>Select an area you would like to use</div>
252
+ <div>
253
+ <button onclick="closeModal()">
254
+ <i class="fas fa-times"></i>
255
+ </button>
256
+ </div>
257
+ </div>
258
+ <div class="crop-image-modal-body">
259
+
260
+ </div>
261
+ <div class="crop-btn-section">
262
+ <button id="crop" class="mx-auto my-3"
263
+ style="background-color: #FF5554;">crop</button>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ <div class="example-images-modal-container">
269
+ <div class="row w-100">
270
+ <div class="example-images-modal col-lg-6 col-md-8 mx-auto">
271
+ <div class="crop-image-modal-header" style="background-color:#FF5554 ;">
272
+ <div>Examples</div>
273
+ <div>
274
+ <button onclick="closeExamplesModal()">
275
+ <i class="fas fa-times"></i>
276
+ </button>
277
+ </div>
278
+ </div>
279
+ <div class="example-images-modal-body">
280
+ <div id="carouselExampleFade" class="carousel slide carousel-fade"
281
+ data-ride="carousel">
282
+ <div class="carousel-inner w-75 mx-auto">
283
+ <div class="carousel-item active">
284
+ <img src="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png"
285
+ class="d-block w-100"
286
+ alt="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png">
287
+ </div>
288
+ <div class="carousel-item">
289
+ <img src="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png"
290
+ class="d-block w-100"
291
+ alt="https://d33wubrfki0l68.cloudfront.net/addd58e5ff7678f3b78c48cb4402f223b86842b4/8a9ad/assets/images/snow-sign1.png">
292
+ </div>
293
+ <div class="carousel-item">
294
+ <img src="https://d33wubrfki0l68.cloudfront.net/caa79e544fb9c16a5375c2450604287aa21b93ce/693ab/assets/images/snow-sign2.png"
295
+ class="d-block w-100"
296
+ alt="https://d33wubrfki0l68.cloudfront.net/caa79e544fb9c16a5375c2450604287aa21b93ce/693ab/assets/images/snow-sign2.png">
297
+ </div>
298
+ <div class="carousel-item">
299
+ <img src="https://d33wubrfki0l68.cloudfront.net/c74fc74ac5b2ac2c84ddc7098a606d668a897ec2/07305/assets/images/snow-sign3.png"
300
+ class="d-block w-100"
301
+ alt="https://d33wubrfki0l68.cloudfront.net/c74fc74ac5b2ac2c84ddc7098a606d668a897ec2/07305/assets/images/snow-sign3.png">
302
+ </div>
303
+ <div class="carousel-item">
304
+ <img src="https://d33wubrfki0l68.cloudfront.net/645c7c7f1099c97ab4b82faac94e5ac71749d222/93692/assets/images/snow-sign4.png"
305
+ class="d-block w-100"
306
+ alt="https://d33wubrfki0l68.cloudfront.net/645c7c7f1099c97ab4b82faac94e5ac71749d222/93692/assets/images/snow-sign4.png">
307
+ </div>
308
+ </div>
309
+ <button class="carousel-control-prev" type="button"
310
+ data-target="#carouselExampleFade" data-slide="prev">
311
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
312
+ <span class="sr-only">Previous</span>
313
+ </button>
314
+ <button class="carousel-control-next" type="button"
315
+ data-target="#carouselExampleFade" data-slide="next">
316
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
317
+ <span class="sr-only">Next</span>
318
+ </button>
319
+ </div>
320
+ </div>
321
+
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ </div>
327
+
328
+
329
+ {%- endif -%}
330
+
113
331
  </div>
114
332
  <div class="row">
115
333
  <div id="workspace" data-name="together_forever" style="display: none;">
data/_layouts/home.html CHANGED
@@ -192,6 +192,7 @@
192
192
  </p>
193
193
  </div>
194
194
  </li>
195
+ <hr>
195
196
  {% endfor %}
196
197
  </ul>
197
198
  </div>
@@ -7,6 +7,7 @@ layout: feature
7
7
  <div class="container mt-4">
8
8
  <div class="col-md-11 mx-auto">
9
9
  <div class="row">
10
+ {%- if site.photoeffectsemd -%}
10
11
  <div class="col-md-9">
11
12
  <div class="row" id="upper-panel">
12
13
  <div class="col-12 ">
@@ -40,7 +41,7 @@ layout: feature
40
41
  {%- for item in photoEffectsData -%}
41
42
  {%- if item.category == page.category -%}
42
43
  {%- for i in item.features -%}
43
- <div class="col-md-4 px-0 mb-0">
44
+ <div class="col-md-3 px-0 mb-0">
44
45
  <a class="photo-card" href="{{i.link}}">
45
46
  <div>
46
47
  <img src="{{i.image}}" alt="">
@@ -56,19 +57,7 @@ layout: feature
56
57
  {%- else -%}
57
58
  {%- assign photoEffectsData = site.data.photoeffects -%}
58
59
  {%- for item in photoEffectsData -%}
59
- {%- if site.photoeffects-emd -%}
60
- <div class="col-md-4 px-0">
61
- <a class="photo-card" href="{{item.url}}">
62
- <div>
63
- <img src="{{item.image}}" alt="">
64
- <div class="photo-effect-feature-name">
65
- {{item.featureName}}
66
- </div>
67
- </div>
68
- </a>
69
60
 
70
- </div>
71
- {%- else -%}
72
61
  <div class="col-md-3 px-0">
73
62
  <a class="photo-card" href="{{item.url}}">
74
63
  <div>
@@ -79,8 +68,7 @@ layout: feature
79
68
  </div>
80
69
  </a>
81
70
 
82
- </div> {%- endif -%}
83
-
71
+ </div>
84
72
  {%- endfor -%}
85
73
  {%- endif -%}
86
74
 
@@ -107,6 +95,98 @@ layout: feature
107
95
  </div>
108
96
 
109
97
  </div>
98
+ {%- else -%}
99
+
100
+
101
+ <div class="col-md-3">
102
+
103
+ <div class="categories-section">
104
+ </div>
105
+ <div class="categories-list">
106
+ <ul class="pl-0">
107
+ {%- for item in site.data.photo-categories -%}
108
+ {%- if page.category == item.category -%}
109
+ <li class="active-cat">
110
+ <a class="category-link " href="{{item.link}}">{{item.category}}</a>
111
+ </li>
112
+ {%- else -%}
113
+ <li>
114
+ <a class="category-link" href="{{item.link}}">{{item.category}}</a>
115
+ </li>
116
+ {%- endif -%}
117
+ {%- endfor -%}
118
+ </ul>
119
+
120
+ </div>
121
+
122
+ </div>
123
+ <div class="col-md-9">
124
+ <div class="row" id="upper-panel">
125
+ <div class="col-12 ">
126
+ <div>
127
+ <div>
128
+ <div>
129
+ {%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
130
+ <h1 class="frame-h1">{%- for word in frameh1-%}
131
+ {%- if forloop.first == true -%}
132
+ {{word | capitalize }}
133
+ {%- else -%}
134
+ {{word}}
135
+ {%- endif -%}
136
+ {%- endfor -%}</h1>
137
+ </div>
138
+ {%- assign frameh2 = fileData.H2 | replace: "$variable", page.value -%}
139
+ <h2 class="frame-h2">
140
+ {%- for word in frameh2 -%}
141
+ {%- if forloop.first == true -%}
142
+ {{word | capitalize }}
143
+ {%- else -%}
144
+ {{word}}
145
+ {%- endif -%}
146
+ {%- endfor -%}
147
+ </h2>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ {%- if page.typeOfPage == "category" -%}
152
+ {%- assign photoEffectsData = site.data.photo-categories -%}
153
+ {%- for item in photoEffectsData -%}
154
+ {%- if item.category == page.category -%}
155
+ {%- for i in item.features -%}
156
+ <div class="col-md-3 px-0 mb-0">
157
+ <a class="photo-card" href="{{i.link}}">
158
+ <div>
159
+ <img src="{{i.image}}" alt="">
160
+ <div class="photo-effect-feature-name">
161
+ {{i.name}}
162
+ </div>
163
+ </div>
164
+ </a>
165
+ </div>
166
+ {%- endfor -%}
167
+ {%- endif -%}
168
+ {%- endfor -%}
169
+ {%- else -%}
170
+ {%- assign photoEffectsData = site.data.photoeffects -%}
171
+ {%- for item in photoEffectsData -%}
172
+
173
+ <div class="col-md-3 px-0">
174
+ <a class="photo-card" href="{{item.url}}">
175
+ <div>
176
+ <img src="{{item.image}}" alt="">
177
+ <div class="photo-effect-feature-name">
178
+ {{item.featureName}}
179
+ </div>
180
+ </div>
181
+ </a>
182
+
183
+ </div>
184
+ {%- endfor -%}
185
+ {%- endif -%}
186
+
187
+ </div>
188
+ </div>
189
+ {%- endif -%}
110
190
 
111
191
  </div>
112
192
  </div>
@@ -1,47 +1,47 @@
1
- .calculator-workspace {
2
- width: 400px;
3
- background: #f6f6f6d2;
4
- position: relative;
5
- z-index: 1;
6
- margin: 0 auto;
7
- box-shadow: 6px 19px 23px 1pxrgb (0 0 0 / 15%);
8
- border-radius: 8px;
9
- padding: 1.5rem;
10
- }
11
-
12
- .calculator-workspace label {
13
- font-weight: 600;
14
- text-align: left;
15
- margin-top: 10px;
16
- margin-right: 8px;
17
- }
18
-
19
- .submit-button {
20
- border: none;
21
- border-radius: 4px;
22
- padding: 10px 22px;
23
- color: #fff;
24
- margin-left: auto;
25
- font-weight: 600;
26
- }
27
-
28
- .calculator-inputs {
29
- display: flex;
30
- gap: 10px;
31
- }
32
- .unit {
33
- background: #ffff;
34
- padding: 0px 10px;
35
- display: flex;
36
- align-items: center;
37
- justify-content: center;
38
- border-radius: 4px;
39
- font-weight: 600;
40
- }
41
- .calculator-tooltip {
42
- display: flex;
43
- align-items: center;
44
- }
45
- .calculator-tooltip .fa-info-circle {
46
- margin-bottom: 0px;
47
- }
1
+ .calculator-workspace {
2
+ width: 400px;
3
+ background: #f6f6f6d2;
4
+ position: relative;
5
+ z-index: 1;
6
+ margin: 0 auto;
7
+ box-shadow: 6px 19px 23px 1pxrgb (0 0 0 / 15%);
8
+ border-radius: 8px;
9
+ padding: 1.5rem;
10
+ }
11
+
12
+ .calculator-workspace label {
13
+ font-weight: 600;
14
+ text-align: left;
15
+ margin-top: 10px;
16
+ margin-right: 8px;
17
+ }
18
+
19
+ .submit-button {
20
+ border: none;
21
+ border-radius: 4px;
22
+ padding: 10px 22px;
23
+ color: #fff;
24
+ margin-left: auto;
25
+ font-weight: 600;
26
+ }
27
+
28
+ .calculator-inputs {
29
+ display: flex;
30
+ gap: 10px;
31
+ }
32
+ .unit {
33
+ background: #ffff;
34
+ padding: 0px 10px;
35
+ display: flex;
36
+ align-items: center;
37
+ justify-content: center;
38
+ border-radius: 4px;
39
+ font-weight: 600;
40
+ }
41
+ .calculator-tooltip {
42
+ display: flex;
43
+ align-items: center;
44
+ }
45
+ .calculator-tooltip .fa-info-circle {
46
+ margin-bottom: 0px;
47
+ }