appscms-tools-theme 3.9.2 → 3.9.4

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,17 +1,15 @@
1
1
  {% assign lang = page.lang %} {% assign footerData = site.data.footer[lang].data
2
2
  %}
3
3
  <div class="appscms-product-footer">
4
- <div class="container">
5
- <!-- product heading -->
6
-
7
- <div class="container heading">
4
+ <div class="row w-100">
5
+ <div class="col-md-11 mx-auto pb-4">
8
6
  <div class="row">
9
- <div class="col-md-12 offset-md-1 offset-sm-0 pt-4 pt-sm-0 mx-auto">
7
+ <div class="col-md-12 px-0">
10
8
  <div
11
- class="d-flex align-items-center justify-content-center footer-prducts-div-heading p-4"
9
+ class="d-flex align-items-center justify-content-center footer-prducts-div-heading py-4"
12
10
  >
13
11
  <hr
14
- class="flex-grow-1 mx-4 mb-0 footer-product-line"
12
+ class="flex-grow-1 mx-5 mb-0 footer-product-line"
15
13
  style="height: 1px; background-color: #4b4b4b"
16
14
  />
17
15
  <h6 class="text-center appscms-h3 my-4">Products</h6>
@@ -21,18 +19,17 @@
21
19
  />
22
20
  </div>
23
21
  </div>
24
- </div>
25
- </div>
26
22
 
27
- <!-- -->
28
- <div class="row pb-4">
29
- {%- for item in footerData.product -%}
30
- <div class="col-md-3">
31
- <li>
32
- <a class="footer-product-link" href="{{item.url}}">{{item.name}}</a>
33
- </li>
23
+ {%- for item in footerData.product -%}
24
+ <div class="col-md-3">
25
+ <li>
26
+ <a class="footer-product-link" href="{{item.url}}">{{item.name}}</a>
27
+ </li>
28
+ </div>
29
+ {% endfor %}
34
30
  </div>
35
- {% endfor %}
36
31
  </div>
37
32
  </div>
33
+
34
+ <!-- -->
38
35
  </div>
@@ -73,12 +73,7 @@ languages/languages.html -%} {% assign dataFile= site.data[folder][lang][file]
73
73
  </div>
74
74
  <div class="col-md-12">
75
75
  <div class="d-flex justify-content-between">
76
- <div>
77
- © 2023 Copyright:
78
- <a class="text-reset fw-bold" href="{{site.siteurl}}"
79
- >{{site.name}}</a
80
- >
81
- </div>
76
+ <div id="copyright-text">© 2023 Copyright:</div>
82
77
  </div>
83
78
  </div>
84
79
  </div>
@@ -214,6 +214,7 @@
214
214
  />
215
215
 
216
216
  {%- endif -%}
217
+ <link rel="stylesheet" href="/assets/css/appscms-variables.css" />
217
218
  <link rel="stylesheet" href="/assets/css/appscms-theme.css" />
218
219
  {%- if page.layout == "appscms-calculator" -%}
219
220
  <link rel="stylesheet" href="/assets/css/appscms-feature.css" />
@@ -0,0 +1,93 @@
1
+ ---
2
+ layout: appscms-feature
3
+ ---
4
+
5
+ {% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
6
+ = page.folderName %} {% assign calculatorData=
7
+ site.data[folder][lang][file].calculatorData %}
8
+
9
+ <div class="container">
10
+ <div class="calculator-workspace">
11
+ <div class="row w-100 mx-auto">
12
+ <form id="calculator-form" class="w-100">
13
+ {%- for item in calculatorData.calculatorRow -%}
14
+ <div class="row" id="calculator-row-{{forloop.index}}">
15
+ {%- if item.labelName -%}
16
+ <div class="col-md-12">
17
+ <div class="d-flex">
18
+ <label for="{{item.labelId}}">{{item.labelName}}</label>
19
+ {%- if item.toolTip -%}
20
+ <span
21
+ class="calculator-tooltip"
22
+ data-toggle="tooltip"
23
+ data-placement="top"
24
+ title="{{item.toolTip}}"
25
+ ><i class="fas fa-info-circle"></i></span
26
+ >{%- endif -%}
27
+ </div>
28
+ </div>
29
+ {%- endif -%} {%- if item.dropDown or item.inputBox or
30
+ item.dateTimePicker -%}
31
+ <div class="col-md-12">
32
+ <div class="d-flex calculator-inputs">
33
+ {%- if item.inputBox -%} {%- assign inputBoxType = "number" -%}
34
+ {%- if item.inputType -%} {%- assign inputBoxType = item.inputType
35
+ -%} {%- endif -%}
36
+ <input
37
+ class="form-control"
38
+ type="{{inputBoxType}}"
39
+ name="{{item.inputName}}"
40
+ id="{{item.inputId}}"
41
+ />
42
+ {%- endif -%} {%- if item.dropDown -%}
43
+ <select
44
+ class="form-control"
45
+ name="{{item.dropDownName}}"
46
+ id="{{item.dropDownId}}"
47
+ ></select>
48
+ {%- endif -%} {%- if item.dateTimePicker -%}
49
+ <input
50
+ class="form-control"
51
+ type="date"
52
+ name="{{item.dateTimePicker}}"
53
+ id="{{item.dateTimePickerId}}"
54
+ />
55
+ {%- endif -%} {%- if item.unit -%}
56
+ <div class="unit">{{item.unit}}</div>
57
+ {%- endif -%}
58
+ </div>
59
+ </div>
60
+ {%- endif -%}
61
+ </div>
62
+ {%- endfor -%}
63
+ <div id="dynamic-section"></div>
64
+ </form>
65
+ </div>
66
+ <div class="row w-100 mx-auto">
67
+ {%- if calculatorData.ButtonValue -%}
68
+ <div class="col-12 mt-4 px-0">
69
+ <div class="d-flex justify-content-end">
70
+ <button
71
+ class="submit-button"
72
+ type="{{calculatorData.ButtonType}}"
73
+ id="{{calculatorData.ButtonId}}"
74
+ >
75
+ {{calculatorData.ButtonValue}}
76
+ </button>
77
+ </div>
78
+ </div>
79
+ {%- endif -%} {%- if calculatorData.resultDiv -%}
80
+ <div class="col-12 mt-3">
81
+ <div class="result-section" id="result-section"></div>
82
+ </div>
83
+ {%- endif -%}
84
+ </div>
85
+ </div>
86
+ {%- if calculatorData.calculatorWarning-%}
87
+ <div class="warning-alert-box mt-4">
88
+ <div class="alert alert-danger" role="alert">
89
+ {{ calculatorData.calculatorWarning }}
90
+ </div>
91
+ </div>
92
+ {%- endif -%}
93
+ </div>
@@ -6,78 +6,107 @@ layout: appscms-feature
6
6
  {%- assign pageData = site.data[page.folderName][page.lang][page.fileName] -%}
7
7
  {%- assign pageDisplay = page.display | default: "none" -%}
8
8
  <div class="workspace" style="display: {{pageDisplay}}">
9
- <div class="row">
10
- <div class="col-12">
11
- <div class="download-wrapper mt-3">
12
- <div class="row rowclass">
13
- <div class="col-7">
14
- <div class="d-flex align-items-center">
15
- <div class="select-format-title">image's format</div>
16
- <div class="download-format">
17
- <select name="image-format" id="image-format">
18
- {%- if pageData.downloadFormats -%} {%- for item in
19
- pageData.downloadFormats -%}
20
- <option value="{{item}}">{{item}}</option>
21
- {%- endfor -%} {%- else -%}
22
- <option value="png">png</option>
23
- <option value="jpg">jpg</option>
24
- <option value="jpeg">jpeg</option>
25
- <option value="webp">webp</option>
26
- <option value="gif">gif</option>
27
- {%- endif -%}
28
- </select>
9
+ <div class="imagekit-panel">
10
+ <div class="row">
11
+ <div class="col-12">
12
+ <div class="download-wrapper mt-3">
13
+ <div class="row rowclass">
14
+ <div class="col-7">
15
+ <div class="d-flex align-items-center">
16
+ <div class="select-format-title">image's format</div>
17
+ <div class="download-format">
18
+ <select name="image-format" id="image-format">
19
+ {%- if pageData.downloadFormats -%} {%- for item in
20
+ pageData.downloadFormats -%}
21
+ <option value="{{item}}">{{item}}</option>
22
+ {%- endfor -%} {%- else -%}
23
+ <option value="png">png</option>
24
+ <option value="jpg">jpg</option>
25
+ <option value="jpeg">jpeg</option>
26
+ <option value="webp">webp</option>
27
+ <option value="gif">gif</option>
28
+ {%- endif -%}
29
+ </select>
30
+ </div>
29
31
  </div>
30
32
  </div>
31
- </div>
32
- <div class="col-5">
33
- <div class="d-flex align-items-center">
34
- <button
35
- id="download-button"
36
- style="background-color: {{pageData.color}};"
37
- >
38
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
39
- <path
40
- 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"
41
- /></svg
42
- >Download
43
- </button>
33
+ <div class="col-5">
34
+ <div class="d-flex align-items-center">
35
+ <button
36
+ id="download-button"
37
+ style="background-color: var(--primary-color)"
38
+ >
39
+ <svg
40
+ xmlns="http://www.w3.org/2000/svg"
41
+ viewBox="0 0 512 512"
42
+ >
43
+ <path
44
+ 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"
45
+ /></svg
46
+ >Download
47
+ </button>
48
+ </div>
44
49
  </div>
45
50
  </div>
46
51
  </div>
47
52
  </div>
48
53
  </div>
49
- </div>
50
- {%- if page.commonStructure != false -%}
51
- <div class="row">
52
- <div class="col-md-7 mx-auto mb-2">
53
- <div class="select-img-panel">
54
- <div id="saving-data" style="display: none">
55
- <img
56
- loading="lazy"
57
- src="/assets/images/loader.gif"
58
- alt="saving"
59
- {%-
60
- if
61
- site.crossorigin
62
- -%}
63
- crossorigin
64
- {%-
65
- endif
66
- -%}
67
- />
68
- <span class="ml-2">Saving your images...</span>
54
+ {%- if page.commonStructure != false -%}
55
+ <div class="row">
56
+ {%- if page.optionPanel == false -%}
57
+ <div class="col-md-12 mx-auto mb-2">
58
+ <div class="select-img-panel">
59
+ <div id="saving-data" style="display: none">
60
+ <img
61
+ loading="lazy"
62
+ src="/assets/images/loader.gif"
63
+ alt="saving"
64
+ {%-
65
+ if
66
+ site.crossorigin
67
+ -%}
68
+ crossorigin
69
+ {%-
70
+ endif
71
+ -%}
72
+ />
73
+ <span class="ml-2">Saving your images...</span>
74
+ </div>
75
+ <div id="canvas-box-panel"></div>
69
76
  </div>
70
- <div id="canvas-box-panel"></div>
71
77
  </div>
72
- </div>
73
- <div class="col-md-5">
74
- <div class="options-panel">
75
- {%- if pageData.optionPanelTitle -%}
76
- <div class="title">{{pageData.optionPanelTitle}}</div>
77
- {%- endif -%} {{content}}
78
+ {%- else -%}
79
+ <div class="col-md-7 mx-auto mb-2">
80
+ <div class="select-img-panel">
81
+ <div id="saving-data" style="display: none">
82
+ <img
83
+ loading="lazy"
84
+ src="/assets/images/loader.gif"
85
+ alt="saving"
86
+ {%-
87
+ if
88
+ site.crossorigin
89
+ -%}
90
+ crossorigin
91
+ {%-
92
+ endif
93
+ -%}
94
+ />
95
+ <span class="ml-2">Saving your images...</span>
96
+ </div>
97
+ <div id="canvas-box-panel"></div>
98
+ </div>
99
+ </div>
100
+ <div class="col-md-5">
101
+ <div class="options-panel">
102
+ {%- if pageData.optionPanelTitle -%}
103
+ <div class="title">{{pageData.optionPanelTitle}}</div>
104
+ {%- endif -%} {{content}}
105
+ </div>
78
106
  </div>
107
+ {%- endif -%}
79
108
  </div>
109
+ {%- else -%} {{content}} {%- endif -%}
80
110
  </div>
81
- {%- else -%} {{content}} {%- endif -%}
82
111
  </div>
83
112
  </div>
@@ -3,7 +3,7 @@ body {
3
3
  }
4
4
 
5
5
  .appscms-h1 {
6
- margin-top: 1px;
6
+ margin-top: 30px;
7
7
  padding-top: 2px;
8
8
  font-weight: 600;
9
9
  font-size: 40px;
@@ -11,7 +11,7 @@ body {
11
11
  }
12
12
 
13
13
  #calculate_btn {
14
- background: #f94f00;
14
+ background: var(--primary-color);
15
15
  }
16
16
 
17
17
  .appscms-h2 {
@@ -20,9 +20,6 @@ body {
20
20
  font-weight: 400;
21
21
  color: rgb(118, 118, 118);
22
22
  }
23
- .appscms-toolbar {
24
- background: #f85408;
25
- }
26
23
 
27
24
  #safeui-alert {
28
25
  display: none;
@@ -55,13 +52,13 @@ body {
55
52
  border-radius: 4px;
56
53
  padding: 10px 22px;
57
54
  color: #fff;
58
- background-color: #e7510b;
55
+ background-color: var(--primary-color);
59
56
  margin-left: auto;
60
57
  font-weight: 600;
61
58
  }
62
59
 
63
60
  .list-item-dropdown li .toolbar-link:hover {
64
- color: #ff4000;
61
+ color: var(--primary-color);
65
62
  }
66
63
  .calculator-inputs {
67
64
  display: flex;
@@ -86,12 +83,12 @@ body {
86
83
  }
87
84
 
88
85
  .form-control {
89
- border-bottom: 3px solid #ff6003;
86
+ border-bottom: 3px solid var(--primary-color);
90
87
  height: calc(2em + 0.75rem + 2px);
91
88
  }
92
89
  .form-control:focus {
93
90
  border: 1.5px solid rgb(210, 210, 210);
94
- border-bottom: 4px solid #ff6003;
91
+ border-bottom: 4px solid var(--primary-color);
95
92
  height: calc(1.9em + 0.75rem + 2px);
96
93
  }
97
94
 
@@ -390,6 +390,6 @@
390
390
 
391
391
  @media (min-width: 768px) {
392
392
  .appscms-h1 {
393
- margin-top: 0px;
393
+ margin-top: 40px;
394
394
  }
395
395
  }
@@ -126,7 +126,7 @@
126
126
 
127
127
  .options-panel {
128
128
  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
129
- border-radius: 4px;
129
+ border-radius: 10px;
130
130
  padding: 30px;
131
131
  width: 100%;
132
132
  }
@@ -822,8 +822,7 @@ input[type="range"]::-moz-focus-outer {
822
822
  }
823
823
 
824
824
  .select-img-panel {
825
- border: 1px solid #ccc;
826
- padding: 30px;
825
+ border-radius: 10px;
827
826
  }
828
827
 
829
828
  @media (max-width: 768px) {
@@ -847,3 +846,9 @@ input[type="range"]::-moz-focus-outer {
847
846
  margin-left: auto;
848
847
  }
849
848
  }
849
+ .imagekit-panel {
850
+ background: var(--white-color);
851
+ padding: 25px;
852
+ box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
853
+ border-radius: 10px;
854
+ }
@@ -5,24 +5,6 @@
5
5
  font-family: "Inter", sans-serif;
6
6
  }
7
7
 
8
- :root {
9
- --primary-color: #1b2fe7;
10
- --font-size: 16px;
11
- --secondary-color: #f8f8f8;
12
- --secondary-color-1: #fafafa;
13
- --secondary-color-3: #f4f5ff;
14
- --black-color: #202020;
15
- --while-color: #ffffff;
16
- --black-light: #777777;
17
- --font-family: "Inter", sans-serif;
18
- --text-color: #303030;
19
- --success-color: #3de968;
20
- --error-color: #e33e3e;
21
- --warning-color: #efcf2a;
22
- --dark-gray: #4d4d4d;
23
- --mid-gray: #1d1d1d;
24
- --light-gray: rgb(137, 137, 137);
25
- }
26
8
  body {
27
9
  padding: 0;
28
10
  margin: 0;
@@ -38,7 +20,7 @@ body {
38
20
  }
39
21
  /* appscms navbar */
40
22
  .appscms-navbar {
41
- background-color: var(--while-color);
23
+ background-color: var(--white-color);
42
24
  height: 45px;
43
25
  position: sticky;
44
26
  top: 0;
@@ -158,7 +140,7 @@ body {
158
140
  border-bottom-right-radius: 10px;
159
141
  padding: 25px 50px 50px 50px;
160
142
  display: none;
161
- background-color: var(--while-color);
143
+ background-color: var(--white-color);
162
144
  }
163
145
 
164
146
  .list-item-dropdown-heading {
@@ -193,7 +175,7 @@ body {
193
175
  color: #323232;
194
176
  }
195
177
  .appscms-toolbar-list-item-span {
196
- color: var(--while-color);
178
+ color: var(--white-color);
197
179
  display: block;
198
180
  font-size: 15px;
199
181
  line-height: 24px;
@@ -263,7 +245,7 @@ body {
263
245
  padding-right: 10px;
264
246
  }
265
247
  .list-item-dropdown li .toolbar-link {
266
- color: var(--while-color);
248
+ color: var(--white-color);
267
249
  font-size: 15px;
268
250
  }
269
251
  .appscms-toolbar-list-item-span {
@@ -467,7 +449,7 @@ body {
467
449
  }
468
450
 
469
451
  .appscms-tool .tool-text {
470
- color: var(--while-color);
452
+ color: var(--white-color);
471
453
  padding-right: 33px;
472
454
  font-weight: 300;
473
455
  font-size: 16px;
@@ -554,6 +536,9 @@ body {
554
536
  }
555
537
 
556
538
  /* footer */
539
+ #copyright-text {
540
+ font-size: 13px !important;
541
+ }
557
542
  .footer-prducts-div-heading {
558
543
  }
559
544
 
@@ -596,7 +581,7 @@ body {
596
581
  background-color: transparent;
597
582
  transition: background-color 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
598
583
  font-weight: 400;
599
- font-size: 16px;
584
+ font-size: 13px;
600
585
  line-height: 24px;
601
586
  color: rgb(26, 26, 26);
602
587
  }
@@ -673,6 +658,7 @@ body {
673
658
  .footer-product-link {
674
659
  font-size: 12px;
675
660
  }
661
+
676
662
  /* recent post and blog section phone */
677
663
  /* blog section */
678
664
  .appscms-blogs {
@@ -852,7 +838,7 @@ body {
852
838
  font-weight: 500;
853
839
  font-size: 14px;
854
840
  line-height: 19px;
855
- padding: 15px 20px 14px 25px;
841
+ padding: 15px 20px 14px 10px;
856
842
  position: relative;
857
843
  transition: none;
858
844
  }
@@ -863,7 +849,7 @@ body {
863
849
  }
864
850
 
865
851
  .appscms-footer {
866
- background-color: var(--while-color);
852
+ background-color: var(--white-color);
867
853
  padding: 44px 10px 10px 10px;
868
854
  border-top: 1px solid rgb(148, 148, 148);
869
855
  }
@@ -916,7 +902,7 @@ body {
916
902
  }
917
903
  .go-back-block button {
918
904
  background-color: var(--primary-color);
919
- color: var(--while-color);
905
+ color: var(--white-color);
920
906
  border: none;
921
907
  border-radius: 10px;
922
908
  padding: 10px 15px;
@@ -926,7 +912,7 @@ body {
926
912
  }
927
913
  .go-back-block button i {
928
914
  color: var(--black-color);
929
- background-color: var(--while-color);
915
+ background-color: var(--white-color);
930
916
  padding: 8px;
931
917
  border-radius: 50%;
932
918
  font-size: 12px;
@@ -0,0 +1,18 @@
1
+ :root {
2
+ --primary-color: #1b2fe7;
3
+ --font-size: 16px;
4
+ --secondary-color: #f8f8f8;
5
+ --secondary-color-1: #fafafa;
6
+ --secondary-color-3: #f4f5ff;
7
+ --black-color: #202020;
8
+ --white-color: #ffffff;
9
+ --black-light: #777777;
10
+ --font-family: "Inter", sans-serif;
11
+ --text-color: #303030;
12
+ --success-color: #3de968;
13
+ --error-color: #e33e3e;
14
+ --warning-color: #efcf2a;
15
+ --dark-gray: #4d4d4d;
16
+ --mid-gray: #1d1d1d;
17
+ --light-gray: rgb(137, 137, 137);
18
+ }