appscms-tools-theme 2.5.4 → 2.5.5

Sign up to get free protection for your applications and to get access to all the features.
data/_layouts/frame.html CHANGED
@@ -1,198 +1,198 @@
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
- <ul>
14
- {%- for item in site.data.photo-categories -%}
15
- {%- if page.category == item.category -%}
16
- <li class="active-cat">
17
- <a class="category-link " href="{{item.link}}">{{item.category}}</a>
18
- </li>
19
- {%- else -%}
20
- <li>
21
- <a class="category-link" href="{{item.link}}">{{item.category}}</a>
22
- </li>
23
- {%- endif -%}
24
- {%- endfor -%}
25
- </ul>
26
-
27
- </div>
28
-
29
- </div>
30
- <div class="col-md-9">
31
- <div class="row" id="upper-panel">
32
- <div class="col-md-8">
33
- <div>
34
- <div>
35
- <div>
36
- {%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
37
- <h1 class="frame-h1">{%- for word in frameh1-%}
38
- {%- if forloop.first == true -%}
39
- {{word | capitalize }}
40
- {%- else -%}
41
- {{word}}
42
- {%- endif -%}
43
- {%- endfor -%}</h1>
44
- </div>
45
- {%- assign frameh2 = fileData.H2 | replace: "$variable", page.value -%}
46
- <h2 class="frame-h2">
47
- {%- for word in frameh2 -%}
48
- {%- if forloop.first == true -%}
49
- {{word | capitalize }}
50
- {%- else -%}
51
- {{word}}
52
- {%- endif -%}
53
- {%- endfor -%}
54
- </h2>
55
- </div>
56
- </div>
57
- <div class="preview-section">
58
- <img src="{{fileData.mainPreviewImage}}" alt="">
59
- </div>
60
- <h3 id="example-h3">Examples</h3>
61
- <div class="image-samples" onclick="openExamplesModal()">
62
- {%- for item in fileData.imageSamples -%}
63
- <img src="{{item}}" alt="sample">
64
- {%- endfor -%}
65
- </div>
66
-
67
- </div>
68
- <div class="col-md-4">
69
- <form id="effect-form" data-feature-name="{{page.featureName}}">
70
- {%- for item in fileData.elements -%}
71
- {%- if item.type == "image" -%}
72
- <label for="{{item.id}}">{{item.label}}</label>
73
- <div class="d-flex mb-15">
74
- <button class="choose-image" type="button" id="{{item.id}}"
75
- data-index="{{forloop.index}}" onclick="clickInput(this)">Choose
76
- image</button>
77
- <button class="cam-image" id="cam-{{forloop.index}}"><i
78
- class="fas fa-camera"></i></button>
79
- <img class="small-image-preview" style="display: none;"
80
- id="image-pre-{{forloop.index}}"></img>
81
- </div>
82
- <input class="d-none" id="file-{{forloop.index}}" type="file" onchange="fileOnChange(this)"
83
- data-index="{{forloop.index}}" accept=".webp,.png,.jpg,.jpeg" required />
84
- {%- endif -%}
85
- {%- if item.type == "text" -%}
86
- <label for="{{item.id}}">{{item.label}}</label>
87
- <input class="mb-15" type="text" placeholder="Your Text" id="{{item.id}}">
88
- {%- endif -%}
89
- {%- endfor -%}
90
- <div class="d-flex">
91
- <button class="submit-btn" type="submit">Go</button>
92
- </div>
93
- </form>
94
- </div>
95
- </div>
96
- <div class="row">
97
- <div id="workspace" data-name="together_forever" style="display: none;">
98
- <div class="row">
99
- <div class="col-12 mb-4">
100
- <div class="d-flex justify-content-between">
101
- <div class="result-info">
102
- <a href="{{page.permalink}}" target="_blank">{{page.featureName}}</a>
103
- <i class="fas fa-chevron-right"></i>
104
- <div>result</div>
105
- </div>
106
- <button id="download-button" style="background-color: {{fileData.color}};"><svg
107
- xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
108
- <path
109
- 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" />
110
- </svg>Download</button>
111
- </div>
112
-
113
- </div>
114
- <div class="col-md-12 mx-auto">
115
- <div class="select-img-panel">
116
- <div id="saving-data" style="display: block;">
117
- <img loading="lazy" src="/assets/images/loader.gif" alt="saving"> <span
118
- class="ml-2">Saving
119
- your
120
- images...</span>
121
- </div>
122
- <div id="canvas-panel">
123
- </div>
124
- </div>
125
- </div>
126
-
127
- </div>
128
- </div>
129
- </div>
130
-
131
- <div class="crop-image-modal-container">
132
- <div class="row w-100">
133
- <div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
134
- <div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
135
- <div>Select an area you would like to use</div>
136
- <div>
137
- <button onclick="closeModal()">
138
- <i class="fas fa-times"></i>
139
- </button>
140
- </div>
141
- </div>
142
- <div class="crop-image-modal-body">
143
-
144
- </div>
145
- <div class="crop-btn-section">
146
- <button id="crop" class="mx-auto my-3"
147
- style="background-color: {{fileData.color}};">crop</button>
148
- </div>
149
- </div>
150
- </div>
151
- </div>
152
- <div class="example-images-modal-container">
153
- <div class="row w-100">
154
- <div class="example-images-modal col-lg-6 col-md-8 mx-auto">
155
- <div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
156
- <div>Examples</div>
157
- <div>
158
- <button onclick="closeExamplesModal()">
159
- <i class="fas fa-times"></i>
160
- </button>
161
- </div>
162
- </div>
163
- <div class="example-images-modal-body">
164
- <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
165
- <div class="carousel-inner w-75 mx-auto">
166
- {%- for item in fileData.imageSamples -%}
167
- {%- if forloop.index == 1 -%}
168
- <div class="carousel-item active">
169
- <img src="{{item}}" class="d-block w-100" alt="{{item}}">
170
- </div>
171
- {%- endif -%}
172
- <div class="carousel-item">
173
- <img src="{{item}}" class="d-block w-100" alt="{{item}}">
174
- </div>
175
- {%- endfor -%}
176
- </div>
177
- <button class="carousel-control-prev" type="button"
178
- data-target="#carouselExampleFade" data-slide="prev">
179
- <span class="carousel-control-prev-icon" aria-hidden="true"></span>
180
- <span class="sr-only">Previous</span>
181
- </button>
182
- <button class="carousel-control-next" type="button"
183
- data-target="#carouselExampleFade" data-slide="next">
184
- <span class="carousel-control-next-icon" aria-hidden="true"></span>
185
- <span class="sr-only">Next</span>
186
- </button>
187
- </div>
188
- </div>
189
-
190
- </div>
191
- </div>
192
- </div>
193
-
194
- </div>
195
- </div>
196
- </div>
197
-
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
+ <ul>
14
+ {%- for item in site.data.photo-categories -%}
15
+ {%- if page.category == item.category -%}
16
+ <li class="active-cat">
17
+ <a class="category-link " href="{{item.link}}">{{item.category}}</a>
18
+ </li>
19
+ {%- else -%}
20
+ <li>
21
+ <a class="category-link" href="{{item.link}}">{{item.category}}</a>
22
+ </li>
23
+ {%- endif -%}
24
+ {%- endfor -%}
25
+ </ul>
26
+
27
+ </div>
28
+
29
+ </div>
30
+ <div class="col-md-9">
31
+ <div class="row" id="upper-panel">
32
+ <div class="col-md-8">
33
+ <div>
34
+ <div>
35
+ <div>
36
+ {%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
37
+ <h1 class="frame-h1">{%- for word in frameh1-%}
38
+ {%- if forloop.first == true -%}
39
+ {{word | capitalize }}
40
+ {%- else -%}
41
+ {{word}}
42
+ {%- endif -%}
43
+ {%- endfor -%}</h1>
44
+ </div>
45
+ {%- assign frameh2 = fileData.H2 | replace: "$variable", page.value -%}
46
+ <h2 class="frame-h2">
47
+ {%- for word in frameh2 -%}
48
+ {%- if forloop.first == true -%}
49
+ {{word | capitalize }}
50
+ {%- else -%}
51
+ {{word}}
52
+ {%- endif -%}
53
+ {%- endfor -%}
54
+ </h2>
55
+ </div>
56
+ </div>
57
+ <div class="preview-section">
58
+ <img src="{{fileData.mainPreviewImage}}" alt="">
59
+ </div>
60
+ <h3 id="example-h3">Examples</h3>
61
+ <div class="image-samples" onclick="openExamplesModal()">
62
+ {%- for item in fileData.imageSamples -%}
63
+ <img src="{{item}}" alt="sample">
64
+ {%- endfor -%}
65
+ </div>
66
+
67
+ </div>
68
+ <div class="col-md-4">
69
+ <form id="effect-form" data-feature-name="{{page.featureName}}">
70
+ {%- for item in fileData.elements -%}
71
+ {%- if item.type == "image" -%}
72
+ <label for="{{item.id}}">{{item.label}}</label>
73
+ <div class="d-flex mb-15">
74
+ <button class="choose-image" type="button" id="{{item.id}}"
75
+ data-index="{{forloop.index}}" onclick="clickInput(this)">Choose
76
+ image</button>
77
+ <button class="cam-image" id="cam-{{forloop.index}}"><i
78
+ class="fas fa-camera"></i></button>
79
+ <img class="small-image-preview" style="display: none;"
80
+ id="image-pre-{{forloop.index}}"></img>
81
+ </div>
82
+ <input class="d-none" id="file-{{forloop.index}}" type="file" onchange="fileOnChange(this)"
83
+ data-index="{{forloop.index}}" accept=".webp,.png,.jpg,.jpeg" required />
84
+ {%- endif -%}
85
+ {%- if item.type == "text" -%}
86
+ <label for="{{item.id}}">{{item.label}}</label>
87
+ <input class="mb-15" type="text" placeholder="Your Text" id="{{item.id}}">
88
+ {%- endif -%}
89
+ {%- endfor -%}
90
+ <div class="d-flex">
91
+ <button class="submit-btn" type="submit">Go</button>
92
+ </div>
93
+ </form>
94
+ </div>
95
+ </div>
96
+ <div class="row">
97
+ <div id="workspace" data-name="together_forever" style="display: none;">
98
+ <div class="row">
99
+ <div class="col-12 mb-4">
100
+ <div class="d-flex justify-content-between">
101
+ <div class="result-info">
102
+ <a href="{{page.permalink}}" target="_blank">{{page.featureName}}</a>
103
+ <i class="fas fa-chevron-right"></i>
104
+ <div>result</div>
105
+ </div>
106
+ <button id="download-button" style="background-color: {{fileData.color}};"><svg
107
+ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
108
+ <path
109
+ 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" />
110
+ </svg>Download</button>
111
+ </div>
112
+
113
+ </div>
114
+ <div class="col-md-12 mx-auto">
115
+ <div class="select-img-panel">
116
+ <div id="saving-data" style="display: block;">
117
+ <img loading="lazy" src="/assets/images/loader.gif" alt="saving"> <span
118
+ class="ml-2">Saving
119
+ your
120
+ images...</span>
121
+ </div>
122
+ <div id="canvas-panel">
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <div class="crop-image-modal-container">
132
+ <div class="row w-100">
133
+ <div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
134
+ <div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
135
+ <div>Select an area you would like to use</div>
136
+ <div>
137
+ <button onclick="closeModal()">
138
+ <i class="fas fa-times"></i>
139
+ </button>
140
+ </div>
141
+ </div>
142
+ <div class="crop-image-modal-body">
143
+
144
+ </div>
145
+ <div class="crop-btn-section">
146
+ <button id="crop" class="mx-auto my-3"
147
+ style="background-color: {{fileData.color}};">crop</button>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ <div class="example-images-modal-container">
153
+ <div class="row w-100">
154
+ <div class="example-images-modal col-lg-6 col-md-8 mx-auto">
155
+ <div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
156
+ <div>Examples</div>
157
+ <div>
158
+ <button onclick="closeExamplesModal()">
159
+ <i class="fas fa-times"></i>
160
+ </button>
161
+ </div>
162
+ </div>
163
+ <div class="example-images-modal-body">
164
+ <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
165
+ <div class="carousel-inner w-75 mx-auto">
166
+ {%- for item in fileData.imageSamples -%}
167
+ {%- if forloop.index == 1 -%}
168
+ <div class="carousel-item active">
169
+ <img src="{{item}}" class="d-block w-100" alt="{{item}}">
170
+ </div>
171
+ {%- endif -%}
172
+ <div class="carousel-item">
173
+ <img src="{{item}}" class="d-block w-100" alt="{{item}}">
174
+ </div>
175
+ {%- endfor -%}
176
+ </div>
177
+ <button class="carousel-control-prev" type="button"
178
+ data-target="#carouselExampleFade" data-slide="prev">
179
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
180
+ <span class="sr-only">Previous</span>
181
+ </button>
182
+ <button class="carousel-control-next" type="button"
183
+ data-target="#carouselExampleFade" data-slide="next">
184
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
185
+ <span class="sr-only">Next</span>
186
+ </button>
187
+ </div>
188
+ </div>
189
+
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
198
  </div>
@@ -1,98 +1,98 @@
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
- <ul>
14
- {%- for item in site.data.photo-categories -%}
15
- {%- if page.category == item.category -%}
16
- <li class="active-cat">
17
- <a class="category-link " href="{{item.link}}">{{item.category}}</a>
18
- </li>
19
- {%- else -%}
20
- <li>
21
- <a class="category-link" href="{{item.link}}">{{item.category}}</a>
22
- </li>
23
- {%- endif -%}
24
- {%- endfor -%}
25
- </ul>
26
-
27
- </div>
28
-
29
- </div>
30
- <div class="col-md-9">
31
- <div class="row" id="upper-panel">
32
- <div class="col-12 ">
33
- <div>
34
- <div>
35
- <div>
36
- {%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
37
- <h1 class="frame-h1">{%- for word in frameh1-%}
38
- {%- if forloop.first == true -%}
39
- {{word | capitalize }}
40
- {%- else -%}
41
- {{word}}
42
- {%- endif -%}
43
- {%- endfor -%}</h1>
44
- </div>
45
- {%- assign frameh2 = fileData.H2 | replace: "$variable", page.value -%}
46
- <h2 class="frame-h2">
47
- {%- for word in frameh2 -%}
48
- {%- if forloop.first == true -%}
49
- {{word | capitalize }}
50
- {%- else -%}
51
- {{word}}
52
- {%- endif -%}
53
- {%- endfor -%}
54
- </h2>
55
- </div>
56
- </div>
57
- </div>
58
- {%- if page.typeOfPage == "category" -%}
59
- {%- assign photoEffectsData = site.data.photo-categories -%}
60
- {%- for item in photoEffectsData -%}
61
- {%- if item.category == page.category -%}
62
- {%- for i in item.features -%}
63
- <div class="col-md-3 px-0">
64
- <a class="photo-card" href="{{i.link}}">
65
- <div>
66
- <img src="{{i.image}}" alt="">
67
- <div class="photo-effect-feature-name">
68
- {{i.name}}
69
- </div>
70
- </div>
71
- </a>
72
- </div>
73
- {%- endfor -%}
74
- {%- endif -%}
75
- {%- endfor -%}
76
- {%- else -%}
77
- {%- assign photoEffectsData = site.data.photoeffects -%}
78
- {%- for item in photoEffectsData -%}
79
- <div class="col-md-3 px-0">
80
- <a class="photo-card" href="{{item.url}}">
81
- <div>
82
- <img src="{{item.image}}" alt="">
83
- <div class="photo-effect-feature-name">
84
- {{item.featureName}}
85
- </div>
86
- </div>
87
- </a>
88
-
89
- </div>
90
- {%- endfor -%}
91
- {%- endif -%}
92
-
93
- </div>
94
- </div>
95
- </div>
96
- </div>
97
-
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
+ <ul>
14
+ {%- for item in site.data.photo-categories -%}
15
+ {%- if page.category == item.category -%}
16
+ <li class="active-cat">
17
+ <a class="category-link " href="{{item.link}}">{{item.category}}</a>
18
+ </li>
19
+ {%- else -%}
20
+ <li>
21
+ <a class="category-link" href="{{item.link}}">{{item.category}}</a>
22
+ </li>
23
+ {%- endif -%}
24
+ {%- endfor -%}
25
+ </ul>
26
+
27
+ </div>
28
+
29
+ </div>
30
+ <div class="col-md-9">
31
+ <div class="row" id="upper-panel">
32
+ <div class="col-12 ">
33
+ <div>
34
+ <div>
35
+ <div>
36
+ {%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
37
+ <h1 class="frame-h1">{%- for word in frameh1-%}
38
+ {%- if forloop.first == true -%}
39
+ {{word | capitalize }}
40
+ {%- else -%}
41
+ {{word}}
42
+ {%- endif -%}
43
+ {%- endfor -%}</h1>
44
+ </div>
45
+ {%- assign frameh2 = fileData.H2 | replace: "$variable", page.value -%}
46
+ <h2 class="frame-h2">
47
+ {%- for word in frameh2 -%}
48
+ {%- if forloop.first == true -%}
49
+ {{word | capitalize }}
50
+ {%- else -%}
51
+ {{word}}
52
+ {%- endif -%}
53
+ {%- endfor -%}
54
+ </h2>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ {%- if page.typeOfPage == "category" -%}
59
+ {%- assign photoEffectsData = site.data.photo-categories -%}
60
+ {%- for item in photoEffectsData -%}
61
+ {%- if item.category == page.category -%}
62
+ {%- for i in item.features -%}
63
+ <div class="col-md-3 px-0">
64
+ <a class="photo-card" href="{{i.link}}">
65
+ <div>
66
+ <img src="{{i.image}}" alt="">
67
+ <div class="photo-effect-feature-name">
68
+ {{i.name}}
69
+ </div>
70
+ </div>
71
+ </a>
72
+ </div>
73
+ {%- endfor -%}
74
+ {%- endif -%}
75
+ {%- endfor -%}
76
+ {%- else -%}
77
+ {%- assign photoEffectsData = site.data.photoeffects -%}
78
+ {%- for item in photoEffectsData -%}
79
+ <div class="col-md-3 px-0">
80
+ <a class="photo-card" href="{{item.url}}">
81
+ <div>
82
+ <img src="{{item.image}}" alt="">
83
+ <div class="photo-effect-feature-name">
84
+ {{item.featureName}}
85
+ </div>
86
+ </div>
87
+ </a>
88
+
89
+ </div>
90
+ {%- endfor -%}
91
+ {%- endif -%}
92
+
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
98
  </div>