appscms-tools-theme 2.4.9 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_data/feature/en/allele-frequency.json +244 -244
- data/_data/feature/en/compress-pdf.json +2 -1
- data/_data/feature/en/theframe.json +27 -27
- data/_data/home/en/photoeffects.json +23 -23
- data/_data/photo-categories.json +51 -51
- data/_data/photoeffects.json +116 -116
- data/_includes/monumetric/ads.html +57 -57
- data/_includes/monumetric/profitablecpmgate.html +51 -51
- data/_layouts/calculator.html +83 -83
- data/_layouts/feature-1.html +1 -3
- data/_layouts/frame.html +205 -205
- data/_layouts/photo-effects-home.html +105 -105
- data/assets/css/calculators.css +40 -40
- data/assets/css/feature-1.css +2 -2
- data/assets/css/frame.css +695 -695
- data/assets/css/imagekit.css +757 -757
- data/assets/images/addimg.svg +2 -2
- data/assets/js/ads.js +8 -8
- data/assets/js/append-div.js +10 -10
- data/assets/js/photo-effects.json +32 -32
- data/assets/js/theme.js +27 -27
- metadata +7 -7
data/_layouts/calculator.html
CHANGED
|
@@ -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/feature-1.html
CHANGED
|
@@ -164,7 +164,7 @@
|
|
|
164
164
|
Saving your images...
|
|
165
165
|
</span>
|
|
166
166
|
</div>
|
|
167
|
-
<div id="canvas-panel"
|
|
167
|
+
<div id="canvas-box-panel"></div>
|
|
168
168
|
</div>
|
|
169
169
|
</div>
|
|
170
170
|
<div class="col-md-5 col-12">
|
|
@@ -187,8 +187,6 @@
|
|
|
187
187
|
{%- endif -%}
|
|
188
188
|
|
|
189
189
|
</div>
|
|
190
|
-
<input class="d-none" onchange="fileOnChange()" type="file" id="file" accept=".jpg,.jpeg,.png,.webp"
|
|
191
|
-
class="file" />
|
|
192
190
|
</div>
|
|
193
191
|
{%- endif -%}
|
|
194
192
|
{%- endif -%}
|
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>
|