appscms-tools-theme 2.4.4 → 2.4.6

Sign up to get free protection for your applications and to get access to all the features.
data/_layouts/frame.html CHANGED
@@ -1,206 +1,206 @@
1
- ---
2
- layout: feature
3
- ---
4
-
5
- {%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
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-md-8">
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 class="preview-section">
66
- <img src="{{fileData.mainPreviewImage}}" alt="">
67
- </div>
68
- <h3 id="example-h3">Examples</h3>
69
- <div class="image-samples" onclick="openExamplesModal()">
70
- {%- for item in fileData.imageSamples -%}
71
- <img src="{{item}}" alt="sample">
72
- {%- endfor -%}
73
- </div>
74
-
75
- </div>
76
- <div class="col-md-4">
77
- <form id="effect-form" data-feature-name="{{page.featureName}}">
78
- {%- for item in fileData.elements -%}
79
- {%- if item.type == "image" -%}
80
- <label for="{{item.id}}">{{item.label}}</label>
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>
90
- <input class="d-none" id="file-{{forloop.index}}" type="file" onchange="fileOnChange(this)"
91
- data-index="{{forloop.index}}" accept=".webp,.png,.jpg,.jpeg" required />
92
- {%- endif -%}
93
- {%- if item.type == "text" -%}
94
- <label for="{{item.id}}">{{item.label}}</label>
95
- <input class="mb-15" type="text" placeholder="Your Text" id="{{item.id}}">
96
- {%- endif -%}
97
- {%- endfor -%}
98
- <div class="d-flex">
99
- <button class="submit-btn" type="submit">Go</button>
100
- </div>
101
- </form>
102
- </div>
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>
138
-
139
- <div class="crop-image-modal-container">
140
- <div class="row w-100">
141
- <div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
142
- <div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
143
- <div>Select an area you would like to use</div>
144
- <div>
145
- <button onclick="closeModal()">
146
- <i class="fas fa-times"></i>
147
- </button>
148
- </div>
149
- </div>
150
- <div class="crop-image-modal-body">
151
-
152
- </div>
153
- <div class="crop-btn-section">
154
- <button id="crop" class="mx-auto my-3"
155
- style="background-color: {{fileData.color}};">crop</button>
156
- </div>
157
- </div>
158
- </div>
159
- </div>
160
- <div class="example-images-modal-container">
161
- <div class="row w-100">
162
- <div class="example-images-modal col-lg-6 col-md-8 mx-auto">
163
- <div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
164
- <div>Examples</div>
165
- <div>
166
- <button onclick="closeExamplesModal()">
167
- <i class="fas fa-times"></i>
168
- </button>
169
- </div>
170
- </div>
171
- <div class="example-images-modal-body">
172
- <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
173
- <div class="carousel-inner w-75 mx-auto">
174
- {%- for item in fileData.imageSamples -%}
175
- {%- if forloop.index == 1 -%}
176
- <div class="carousel-item active">
177
- <img src="{{item}}" class="d-block w-100" alt="{{item}}">
178
- </div>
179
- {%- endif -%}
180
- <div class="carousel-item">
181
- <img src="{{item}}" class="d-block w-100" alt="{{item}}">
182
- </div>
183
- {%- endfor -%}
184
- </div>
185
- <button class="carousel-control-prev" type="button"
186
- data-target="#carouselExampleFade" data-slide="prev">
187
- <span class="carousel-control-prev-icon" aria-hidden="true"></span>
188
- <span class="sr-only">Previous</span>
189
- </button>
190
- <button class="carousel-control-next" type="button"
191
- data-target="#carouselExampleFade" data-slide="next">
192
- <span class="carousel-control-next-icon" aria-hidden="true"></span>
193
- <span class="sr-only">Next</span>
194
- </button>
195
- </div>
196
- </div>
197
-
198
- </div>
199
- </div>
200
- </div>
201
-
202
- </div>
203
- </div>
204
- </div>
205
-
1
+ ---
2
+ layout: feature
3
+ ---
4
+
5
+ {%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
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-md-8">
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 class="preview-section">
66
+ <img src="{{fileData.mainPreviewImage}}" alt="">
67
+ </div>
68
+ <h3 id="example-h3">Examples</h3>
69
+ <div class="image-samples" onclick="openExamplesModal()">
70
+ {%- for item in fileData.imageSamples -%}
71
+ <img src="{{item}}" alt="sample">
72
+ {%- endfor -%}
73
+ </div>
74
+
75
+ </div>
76
+ <div class="col-md-4">
77
+ <form id="effect-form" data-feature-name="{{page.featureName}}">
78
+ {%- for item in fileData.elements -%}
79
+ {%- if item.type == "image" -%}
80
+ <label for="{{item.id}}">{{item.label}}</label>
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>
90
+ <input class="d-none" id="file-{{forloop.index}}" type="file" onchange="fileOnChange(this)"
91
+ data-index="{{forloop.index}}" accept=".webp,.png,.jpg,.jpeg" required />
92
+ {%- endif -%}
93
+ {%- if item.type == "text" -%}
94
+ <label for="{{item.id}}">{{item.label}}</label>
95
+ <input class="mb-15" type="text" placeholder="Your Text" id="{{item.id}}">
96
+ {%- endif -%}
97
+ {%- endfor -%}
98
+ <div class="d-flex">
99
+ <button class="submit-btn" type="submit">Go</button>
100
+ </div>
101
+ </form>
102
+ </div>
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>
138
+
139
+ <div class="crop-image-modal-container">
140
+ <div class="row w-100">
141
+ <div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
142
+ <div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
143
+ <div>Select an area you would like to use</div>
144
+ <div>
145
+ <button onclick="closeModal()">
146
+ <i class="fas fa-times"></i>
147
+ </button>
148
+ </div>
149
+ </div>
150
+ <div class="crop-image-modal-body">
151
+
152
+ </div>
153
+ <div class="crop-btn-section">
154
+ <button id="crop" class="mx-auto my-3"
155
+ style="background-color: {{fileData.color}};">crop</button>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ <div class="example-images-modal-container">
161
+ <div class="row w-100">
162
+ <div class="example-images-modal col-lg-6 col-md-8 mx-auto">
163
+ <div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
164
+ <div>Examples</div>
165
+ <div>
166
+ <button onclick="closeExamplesModal()">
167
+ <i class="fas fa-times"></i>
168
+ </button>
169
+ </div>
170
+ </div>
171
+ <div class="example-images-modal-body">
172
+ <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
173
+ <div class="carousel-inner w-75 mx-auto">
174
+ {%- for item in fileData.imageSamples -%}
175
+ {%- if forloop.index == 1 -%}
176
+ <div class="carousel-item active">
177
+ <img src="{{item}}" class="d-block w-100" alt="{{item}}">
178
+ </div>
179
+ {%- endif -%}
180
+ <div class="carousel-item">
181
+ <img src="{{item}}" class="d-block w-100" alt="{{item}}">
182
+ </div>
183
+ {%- endfor -%}
184
+ </div>
185
+ <button class="carousel-control-prev" type="button"
186
+ data-target="#carouselExampleFade" data-slide="prev">
187
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
188
+ <span class="sr-only">Previous</span>
189
+ </button>
190
+ <button class="carousel-control-next" type="button"
191
+ data-target="#carouselExampleFade" data-slide="next">
192
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
193
+ <span class="sr-only">Next</span>
194
+ </button>
195
+ </div>
196
+ </div>
197
+
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
206
  </div>
@@ -1,106 +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
- {%- if page.typeOfPage == "category" -%}
67
- {%- assign photoEffectsData = site.data.photo-categories -%}
68
- {%- for item in photoEffectsData -%}
69
- {%- if item.category == page.category -%}
70
- {%- for i in item.features -%}
71
- <div class="col-md-3 px-0">
72
- <a class="photo-card" href="{{i.link}}">
73
- <div>
74
- <img src="{{i.image}}" alt="">
75
- <div class="photo-effect-feature-name">
76
- {{i.name}}
77
- </div>
78
- </div>
79
- </a>
80
- </div>
81
- {%- endfor -%}
82
- {%- endif -%}
83
- {%- endfor -%}
84
- {%- else -%}
85
- {%- assign photoEffectsData = site.data.photoeffects -%}
86
- {%- for item in photoEffectsData -%}
87
- <div class="col-md-3 px-0">
88
- <a class="photo-card" href="{{item.url}}">
89
- <div>
90
- <img src="{{item.image}}" alt="">
91
- <div class="photo-effect-feature-name">
92
- {{item.featureName}}
93
- </div>
94
- </div>
95
- </a>
96
-
97
- </div>
98
- {%- endfor -%}
99
- {%- endif -%}
100
-
101
- </div>
102
- </div>
103
- </div>
104
- </div>
105
-
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
+
106
84
  </div>