appscms-tools-theme 3.9.2 → 3.9.4

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.
@@ -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
+ }