appscms-tools-theme 2.5.0 → 2.5.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,84 +1,84 @@
1
- ---
2
- layout: feature
3
- ---
4
-
5
- {% assign file = page.fileName %}
6
- {% assign lang = page.lang %}
7
- {% assign folder = page.folderName %}
8
- {% assign calculatorData= site.data[folder][lang][file].calculatorData %}
9
-
10
- <div class="container">
11
- <div class="calculator-workspace">
12
- <div class="row w-100 mx-auto">
13
- <form id="calculator-form" class="w-100">
14
- {%- for item in calculatorData.calculatorRow -%}
15
- <div class="row" id="calculator-row-{{forloop.index}}">
16
- {%- if item.labelName -%}
17
- <div class="col-md-12">
18
- <label for="{{item.labelId}}">{{item.labelName}}</label>
19
- </div>
20
- {%- endif -%}
21
- {%- if item.dropDown or item.inputBox or item.dateTimePicker -%}
22
- <div class="col-md-12">
23
- <div class="d-flex calculator-inputs">
24
- {%- if item.inputBox -%}
25
- {%- assign inputBoxType = "number" -%}
26
- {%- if item.inputType -%}
27
- {%- assign inputBoxType = item.inputType -%}
28
- {%- endif -%}
29
- <input class="form-control" type="{{inputBoxType}}" name="{{item.inputName}}"
30
- id="{{item.inputId}}">
31
- {%- endif -%}
32
- {%- if item.dropDown -%}
33
- <select class="form-control" name="{{item.dropDownName}}" id="{{item.dropDownId}}"></select>
34
- {%- endif -%}
35
- {%- if item.dateTimePicker -%}
36
- <input class="form-control" type="date" name="{{item.dateTimePicker}}"
37
- id="{{item.dateTimePickerId}}">
38
- {%- endif -%}
39
- {%- if item.unit -%}
40
- <div class="unit">{{item.unit}}</div>
41
- {%- endif -%}
42
-
43
- </div>
44
-
45
- </div>
46
- {%- endif -%}
47
-
48
-
49
- </div>
50
- {%- endfor -%}
51
- <div id="dynamic-section"></div>
52
- </form>
53
-
54
- </div>
55
- <div class="row w-100 mx-auto">
56
- {%- if calculatorData.ButtonValue -%}
57
- <div class="col-12 mt-4 px-0">
58
- <div class="d-flex justify-content-end">
59
- <button class="submit-button" style="background-color:{{site.data[folder][lang][file].color}} ;"
60
- type="{{calculatorData.ButtonType}}"
61
- id="{{calculatorData.ButtonId}}">{{calculatorData.ButtonValue}}</button>
62
- </div>
63
-
64
- </div>
65
- {%- endif -%}
66
- {%- if calculatorData.resultDiv -%}
67
- <div class="col-12 mt-3">
68
- <div class="result-section" id="result-section">
69
-
70
- </div>
71
- </div>
72
- {%- endif -%}
73
- </div>
74
-
75
- </div>
76
- {%- if calculatorData.calculatorWarning-%}
77
- <div class="warning-alert-box mt-4">
78
- <div class="alert alert-danger" role="alert">
79
- {{ calculatorData.calculatorWarning }}
80
- </div>
81
- </div>
82
- {%- endif -%}
83
-
1
+ ---
2
+ layout: feature
3
+ ---
4
+
5
+ {% assign file = page.fileName %}
6
+ {% assign lang = page.lang %}
7
+ {% assign folder = page.folderName %}
8
+ {% assign calculatorData= site.data[folder][lang][file].calculatorData %}
9
+
10
+ <div class="container">
11
+ <div class="calculator-workspace">
12
+ <div class="row w-100 mx-auto">
13
+ <form id="calculator-form" class="w-100">
14
+ {%- for item in calculatorData.calculatorRow -%}
15
+ <div class="row" id="calculator-row-{{forloop.index}}">
16
+ {%- if item.labelName -%}
17
+ <div class="col-md-12">
18
+ <label for="{{item.labelId}}">{{item.labelName}}</label>
19
+ </div>
20
+ {%- endif -%}
21
+ {%- if item.dropDown or item.inputBox or item.dateTimePicker -%}
22
+ <div class="col-md-12">
23
+ <div class="d-flex calculator-inputs">
24
+ {%- if item.inputBox -%}
25
+ {%- assign inputBoxType = "number" -%}
26
+ {%- if item.inputType -%}
27
+ {%- assign inputBoxType = item.inputType -%}
28
+ {%- endif -%}
29
+ <input class="form-control" type="{{inputBoxType}}" name="{{item.inputName}}"
30
+ id="{{item.inputId}}">
31
+ {%- endif -%}
32
+ {%- if item.dropDown -%}
33
+ <select class="form-control" name="{{item.dropDownName}}" id="{{item.dropDownId}}"></select>
34
+ {%- endif -%}
35
+ {%- if item.dateTimePicker -%}
36
+ <input class="form-control" type="date" name="{{item.dateTimePicker}}"
37
+ id="{{item.dateTimePickerId}}">
38
+ {%- endif -%}
39
+ {%- if item.unit -%}
40
+ <div class="unit">{{item.unit}}</div>
41
+ {%- endif -%}
42
+
43
+ </div>
44
+
45
+ </div>
46
+ {%- endif -%}
47
+
48
+
49
+ </div>
50
+ {%- endfor -%}
51
+ <div id="dynamic-section"></div>
52
+ </form>
53
+
54
+ </div>
55
+ <div class="row w-100 mx-auto">
56
+ {%- if calculatorData.ButtonValue -%}
57
+ <div class="col-12 mt-4 px-0">
58
+ <div class="d-flex justify-content-end">
59
+ <button class="submit-button" style="background-color:{{site.data[folder][lang][file].color}} ;"
60
+ type="{{calculatorData.ButtonType}}"
61
+ id="{{calculatorData.ButtonId}}">{{calculatorData.ButtonValue}}</button>
62
+ </div>
63
+
64
+ </div>
65
+ {%- endif -%}
66
+ {%- if calculatorData.resultDiv -%}
67
+ <div class="col-12 mt-3">
68
+ <div class="result-section" id="result-section">
69
+
70
+ </div>
71
+ </div>
72
+ {%- endif -%}
73
+ </div>
74
+
75
+ </div>
76
+ {%- if calculatorData.calculatorWarning-%}
77
+ <div class="warning-alert-box mt-4">
78
+ <div class="alert alert-danger" role="alert">
79
+ {{ calculatorData.calculatorWarning }}
80
+ </div>
81
+ </div>
82
+ {%- endif -%}
83
+
84
84
  </div>
data/_layouts/frame.html CHANGED
@@ -1,206 +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
- <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
+ <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
+
206
198
  </div>