appscms-tools-theme 5.6.6 → 5.6.7
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/_layouts/appscms-contact.html +340 -115
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1562f6f64b60c0366eb16c91fce95165a2a501a548f9795ff062d91d9e6390c7
|
|
4
|
+
data.tar.gz: 65bc82d2af36e64af4be519fef9bf01ab69456d682c24739fb0ed90ddb10882d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b8ad8f827e244dd119bbe30e2ef2fc9b4a662d4ffe882e0073bee4cf50a89a75f9deef56bb52e338cac24aba265f6fc5788a178f3614b9a54cba874f226e6b50
|
|
7
|
+
data.tar.gz: 5aa7971b4303611c067053bbdb1cdcf6e4e3b548a2270f74b83004a31841d611544498115bbc14d43d9ff487393e9b6e0ff259a6bde51b9472b8400148aa8617
|
|
@@ -12,126 +12,351 @@ assign lang = page.lang %} {% assign contactData = site.data[folder][lang][file]
|
|
|
12
12
|
>
|
|
13
13
|
{%- include appscms/navbars/navbar.html -%} {%- include
|
|
14
14
|
appscms/navbars/toolbar.html -%}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
15
|
+
<!-- Style tags for contact page styling -->
|
|
16
|
+
<style>
|
|
17
|
+
.contact-layout-wrapper {
|
|
18
|
+
background-color: #f4f6f8;
|
|
19
|
+
padding-top: 5rem !important;
|
|
20
|
+
padding-bottom: 5rem !important;
|
|
21
|
+
}
|
|
22
|
+
.contact-container {
|
|
23
|
+
max-width: 1140px;
|
|
24
|
+
margin: 0 auto;
|
|
25
|
+
}
|
|
26
|
+
.contact-title {
|
|
27
|
+
font-size: 3.5rem;
|
|
28
|
+
font-weight: 700;
|
|
29
|
+
color: #212529;
|
|
30
|
+
margin-bottom: 1.5rem;
|
|
31
|
+
}
|
|
32
|
+
.contact-subtitle {
|
|
33
|
+
font-size: 1.3rem;
|
|
34
|
+
line-height: 1.6;
|
|
35
|
+
color: #495057;
|
|
36
|
+
font-weight: 400;
|
|
37
|
+
max-width: 90%;
|
|
38
|
+
}
|
|
39
|
+
.contact-card {
|
|
40
|
+
background: #ffffff;
|
|
41
|
+
border-radius: 12px;
|
|
42
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
|
43
|
+
padding: 2.5rem;
|
|
44
|
+
border: 1px solid #eef1f5;
|
|
45
|
+
}
|
|
46
|
+
.contact-card .form-label {
|
|
47
|
+
font-weight: 600;
|
|
48
|
+
font-size: 0.95rem;
|
|
49
|
+
color: #333333;
|
|
50
|
+
margin-bottom: 0.5rem;
|
|
51
|
+
}
|
|
52
|
+
.contact-input, .contact-textarea {
|
|
53
|
+
background-color: #ffffff;
|
|
54
|
+
border: 1px solid #ced4da;
|
|
55
|
+
border-radius: 6px;
|
|
56
|
+
padding: 0.75rem 1rem;
|
|
57
|
+
font-size: 0.95rem;
|
|
58
|
+
color: #495057;
|
|
59
|
+
width: 100%;
|
|
60
|
+
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
61
|
+
}
|
|
62
|
+
.contact-input:focus, .contact-textarea:focus {
|
|
63
|
+
border-color: #3b82f6;
|
|
64
|
+
outline: 0;
|
|
65
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
|
|
66
|
+
}
|
|
67
|
+
.contact-textarea {
|
|
68
|
+
resize: vertical;
|
|
69
|
+
min-height: 120px;
|
|
70
|
+
}
|
|
71
|
+
.contact-btn {
|
|
72
|
+
background-color: #1B2DE7;
|
|
73
|
+
color: #ffffff;
|
|
74
|
+
border: none;
|
|
75
|
+
border-radius: 6px;
|
|
76
|
+
padding: 0.75rem 2rem;
|
|
77
|
+
font-weight: 600;
|
|
78
|
+
font-size: 1rem;
|
|
79
|
+
transition: background-color 0.2s ease, transform 0.1s ease;
|
|
80
|
+
box-shadow: 0 4px 6px rgba(27, 45, 231, 0.15);
|
|
81
|
+
}
|
|
82
|
+
.contact-btn:hover {
|
|
83
|
+
background-color: #1522b8;
|
|
84
|
+
color: #ffffff;
|
|
85
|
+
box-shadow: 0 6px 12px rgba(27, 45, 231, 0.25);
|
|
86
|
+
}
|
|
87
|
+
.contact-btn:active {
|
|
88
|
+
transform: translateY(1px);
|
|
89
|
+
background-color: #0d1796;
|
|
90
|
+
}
|
|
91
|
+
@media (max-width: 991.98px) {
|
|
92
|
+
.contact-layout-wrapper {
|
|
93
|
+
padding-top: 3rem !important;
|
|
94
|
+
padding-bottom: 3rem !important;
|
|
95
|
+
}
|
|
96
|
+
.contact-title {
|
|
97
|
+
font-size: 2.75rem;
|
|
98
|
+
text-align: center;
|
|
99
|
+
}
|
|
100
|
+
.contact-subtitle {
|
|
101
|
+
font-size: 1.15rem;
|
|
102
|
+
text-align: center;
|
|
103
|
+
max-width: 100%;
|
|
104
|
+
margin-bottom: 2.5rem;
|
|
105
|
+
}
|
|
106
|
+
.contact-card {
|
|
107
|
+
padding: 1.75rem;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Success Modal CSS */
|
|
112
|
+
.modal-overlay {
|
|
113
|
+
position: fixed;
|
|
114
|
+
top: 0;
|
|
115
|
+
left: 0;
|
|
116
|
+
width: 100%;
|
|
117
|
+
height: 100%;
|
|
118
|
+
background-color: rgba(15, 23, 42, 0.4);
|
|
119
|
+
backdrop-filter: blur(8px);
|
|
120
|
+
display: none;
|
|
121
|
+
align-items: center;
|
|
122
|
+
justify-content: center;
|
|
123
|
+
z-index: 9999;
|
|
124
|
+
opacity: 0;
|
|
125
|
+
transition: opacity 0.3s ease;
|
|
126
|
+
}
|
|
127
|
+
.modal-overlay.active {
|
|
128
|
+
opacity: 1;
|
|
129
|
+
}
|
|
130
|
+
.success-card {
|
|
131
|
+
background: #ffffff;
|
|
132
|
+
border-radius: 16px;
|
|
133
|
+
padding: 3rem 2.5rem;
|
|
134
|
+
text-align: center;
|
|
135
|
+
max-width: 420px;
|
|
136
|
+
width: 90%;
|
|
137
|
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
|
138
|
+
transform: scale(0.9);
|
|
139
|
+
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
140
|
+
}
|
|
141
|
+
.modal-overlay.active .success-card {
|
|
142
|
+
transform: scale(1);
|
|
143
|
+
}
|
|
144
|
+
.success-icon-container {
|
|
145
|
+
width: 80px;
|
|
146
|
+
height: 80px;
|
|
147
|
+
margin: 0 auto 1.5rem;
|
|
148
|
+
}
|
|
149
|
+
.success-checkmark {
|
|
150
|
+
width: 80px;
|
|
151
|
+
height: 80px;
|
|
152
|
+
border-radius: 50%;
|
|
153
|
+
display: block;
|
|
154
|
+
stroke-width: 2;
|
|
155
|
+
stroke: #10b981;
|
|
156
|
+
stroke-miterlimit: 10;
|
|
157
|
+
box-shadow: inset 0px 0px 0px #10b981;
|
|
158
|
+
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s forwards;
|
|
159
|
+
}
|
|
160
|
+
.success-checkmark-circle {
|
|
161
|
+
stroke-dasharray: 166;
|
|
162
|
+
stroke-dashoffset: 166;
|
|
163
|
+
stroke-width: 2;
|
|
164
|
+
stroke-miterlimit: 10;
|
|
165
|
+
stroke: #10b981;
|
|
166
|
+
fill: none;
|
|
167
|
+
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
|
|
168
|
+
}
|
|
169
|
+
.success-checkmark-check {
|
|
170
|
+
transform-origin: 50% 50%;
|
|
171
|
+
stroke-dasharray: 48;
|
|
172
|
+
stroke-dashoffset: 48;
|
|
173
|
+
stroke-width: 3;
|
|
174
|
+
stroke: #ffffff;
|
|
175
|
+
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
|
|
176
|
+
}
|
|
177
|
+
@keyframes stroke {
|
|
178
|
+
100% {
|
|
179
|
+
stroke-dashoffset: 0;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
@keyframes scale {
|
|
183
|
+
0%, 100% {
|
|
184
|
+
transform: none;
|
|
185
|
+
}
|
|
186
|
+
50% {
|
|
187
|
+
transform: scale3d(1.1, 1.1, 1);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
@keyframes fill {
|
|
191
|
+
100% {
|
|
192
|
+
box-shadow: inset 0px 0px 0px 40px #10b981;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
.success-title {
|
|
196
|
+
font-size: 1.75rem;
|
|
197
|
+
font-weight: 700;
|
|
198
|
+
color: #1e293b;
|
|
199
|
+
margin-bottom: 0.75rem;
|
|
200
|
+
}
|
|
201
|
+
.success-text {
|
|
202
|
+
color: #64748b;
|
|
203
|
+
font-size: 1rem;
|
|
204
|
+
line-height: 1.5;
|
|
205
|
+
margin-bottom: 2rem;
|
|
206
|
+
}
|
|
207
|
+
.success-btn {
|
|
208
|
+
background-color: #1B2DE7;
|
|
209
|
+
color: #ffffff;
|
|
210
|
+
border: none;
|
|
211
|
+
border-radius: 8px;
|
|
212
|
+
padding: 0.75rem 2.5rem;
|
|
213
|
+
font-weight: 600;
|
|
214
|
+
font-size: 1rem;
|
|
215
|
+
cursor: pointer;
|
|
216
|
+
transition: background-color 0.2s ease, transform 0.1s ease;
|
|
217
|
+
width: 100%;
|
|
218
|
+
box-shadow: 0 4px 6px rgba(27, 45, 231, 0.15);
|
|
219
|
+
}
|
|
220
|
+
.success-btn:hover {
|
|
221
|
+
background-color: #1522b8;
|
|
222
|
+
box-shadow: 0 6px 12px rgba(27, 45, 231, 0.25);
|
|
223
|
+
}
|
|
224
|
+
.success-btn:active {
|
|
225
|
+
transform: translateY(1px);
|
|
226
|
+
}
|
|
227
|
+
</style>
|
|
228
|
+
|
|
229
|
+
<div class="contact-layout-wrapper">
|
|
230
|
+
<div class="container contact-container">
|
|
231
|
+
<div class="row align-items-center justify-content-between">
|
|
232
|
+
<!-- Left Side: Title and Subtitle -->
|
|
233
|
+
<div class="col-lg-5 col-md-12 mb-4 mb-lg-0">
|
|
234
|
+
<h1 class="contact-title">Contact</h1>
|
|
235
|
+
<p class="contact-subtitle">
|
|
236
|
+
Contact us to report a problem, clarify any doubts about {{ site.name | default: page.companyName | default: 'SafeImageKit' }}, or just find out more.
|
|
237
|
+
</p>
|
|
238
|
+
</div>
|
|
239
|
+
|
|
240
|
+
<!-- Right Side: Contact Form Card -->
|
|
241
|
+
<div class="col-lg-6 col-md-12">
|
|
242
|
+
<div class="contact-card">
|
|
243
|
+
<form id="contact-form" action="https://script.google.com/macros/s/AKfycbxlPF3hsBtZayt4KTJNge7XDHMmeZBNSvS3PaZpeAhY2LVvcCtHU8pD4i6xon2gYhmP/exec" method="POST" target="hidden_iframe">
|
|
244
|
+
<input type="hidden" name="formType" value="contact" />
|
|
245
|
+
<div class="row">
|
|
246
|
+
<div class="col-md-6 mb-3">
|
|
247
|
+
<label for="contact-name" class="form-label">Your name*</label>
|
|
248
|
+
<input type="text" id="contact-name" name="name" class="contact-input" placeholder="Your name" required />
|
|
249
|
+
</div>
|
|
250
|
+
<div class="col-md-6 mb-3">
|
|
251
|
+
<label for="contact-email" class="form-label">Your email*</label>
|
|
252
|
+
<input type="email" id="contact-email" name="email" class="contact-input" placeholder="Your email" required />
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
<div class="mb-4">
|
|
256
|
+
<label for="contact-help" class="form-label">What do you need help with?*</label>
|
|
257
|
+
<textarea id="contact-help" name="query" class="contact-textarea" rows="5" placeholder="Describe your query..." required></textarea>
|
|
258
|
+
</div>
|
|
259
|
+
<div class="d-flex justify-content-end">
|
|
260
|
+
<button type="submit" class="contact-btn">Reach out</button>
|
|
261
|
+
</div>
|
|
262
|
+
</form>
|
|
127
263
|
</div>
|
|
128
|
-
<div></div>
|
|
129
264
|
</div>
|
|
130
|
-
{%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
|
|
131
265
|
</div>
|
|
132
266
|
</div>
|
|
133
|
-
{%- endif -%}
|
|
134
267
|
</div>
|
|
268
|
+
|
|
269
|
+
<!-- Hidden iframe to submit form asynchronously -->
|
|
270
|
+
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"></iframe>
|
|
271
|
+
|
|
272
|
+
<!-- Beautiful Success Popup Modal -->
|
|
273
|
+
<div id="success-modal" class="modal-overlay">
|
|
274
|
+
<div class="success-card">
|
|
275
|
+
<div class="success-icon-container">
|
|
276
|
+
<svg class="success-checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
|
|
277
|
+
<circle class="success-checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
|
|
278
|
+
<path class="success-checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
|
|
279
|
+
</svg>
|
|
280
|
+
</div>
|
|
281
|
+
<h3 class="success-title">Thank You!</h3>
|
|
282
|
+
<p class="success-text">Your message has been sent successfully. We will contact you soon.</p>
|
|
283
|
+
<button id="close-success-modal" class="success-btn">Close</button>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
|
|
287
|
+
<script>
|
|
288
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
289
|
+
const form = document.getElementById("contact-form");
|
|
290
|
+
const iframe = document.getElementById("hidden_iframe");
|
|
291
|
+
const submitBtn = form.querySelector(".contact-btn");
|
|
292
|
+
const successModal = document.getElementById("success-modal");
|
|
293
|
+
const closeModalBtn = document.getElementById("close-success-modal");
|
|
294
|
+
|
|
295
|
+
let isSubmitted = false;
|
|
296
|
+
|
|
297
|
+
form.addEventListener("submit", function (e) {
|
|
298
|
+
isSubmitted = true;
|
|
299
|
+
|
|
300
|
+
submitBtn.disabled = true;
|
|
301
|
+
submitBtn.textContent = "Sending...";
|
|
302
|
+
|
|
303
|
+
// Append extra context fields for the Google sheet columns
|
|
304
|
+
const domainField = document.createElement("input");
|
|
305
|
+
domainField.type = "hidden";
|
|
306
|
+
domainField.name = "domain";
|
|
307
|
+
domainField.value = window.location.hostname;
|
|
308
|
+
form.appendChild(domainField);
|
|
309
|
+
|
|
310
|
+
const urlField = document.createElement("input");
|
|
311
|
+
urlField.type = "hidden";
|
|
312
|
+
urlField.name = "url";
|
|
313
|
+
urlField.value = window.location.href;
|
|
314
|
+
form.appendChild(urlField);
|
|
315
|
+
|
|
316
|
+
const ratingField = document.createElement("input");
|
|
317
|
+
ratingField.type = "hidden";
|
|
318
|
+
ratingField.name = "rating";
|
|
319
|
+
ratingField.value = "contact-form-submission";
|
|
320
|
+
form.appendChild(ratingField);
|
|
321
|
+
});
|
|
322
|
+
|
|
323
|
+
iframe.addEventListener("load", function () {
|
|
324
|
+
if (isSubmitted) {
|
|
325
|
+
isSubmitted = false;
|
|
326
|
+
|
|
327
|
+
// Reset button
|
|
328
|
+
submitBtn.disabled = false;
|
|
329
|
+
submitBtn.textContent = "Reach out";
|
|
330
|
+
|
|
331
|
+
// Reset form
|
|
332
|
+
form.reset();
|
|
333
|
+
|
|
334
|
+
// Show Success Modal
|
|
335
|
+
successModal.style.display = "flex";
|
|
336
|
+
setTimeout(() => {
|
|
337
|
+
successModal.classList.add("active");
|
|
338
|
+
}, 10);
|
|
339
|
+
}
|
|
340
|
+
});
|
|
341
|
+
|
|
342
|
+
// Close Modal events
|
|
343
|
+
closeModalBtn.addEventListener("click", function () {
|
|
344
|
+
successModal.classList.remove("active");
|
|
345
|
+
setTimeout(() => {
|
|
346
|
+
successModal.style.display = "none";
|
|
347
|
+
}, 300);
|
|
348
|
+
});
|
|
349
|
+
|
|
350
|
+
successModal.addEventListener("click", function (e) {
|
|
351
|
+
if (e.target === successModal) {
|
|
352
|
+
successModal.classList.remove("active");
|
|
353
|
+
setTimeout(() => {
|
|
354
|
+
successModal.style.display = "none";
|
|
355
|
+
}, 300);
|
|
356
|
+
}
|
|
357
|
+
});
|
|
358
|
+
});
|
|
359
|
+
</script>
|
|
135
360
|
{% include appscms/footer/static-footer.html %} {% include script.html %}
|
|
136
361
|
</body>
|
|
137
362
|
</html>
|