diff --git a/htdocs/assets/js/contactform-config.js b/htdocs/assets/js/contactform-config.js
new file mode 100644
index 0000000..a9e0219
--- /dev/null
+++ b/htdocs/assets/js/contactform-config.js
@@ -0,0 +1,49 @@
+//--- controls contact form submission
+
+const contactForm = document.getElementById("contactForm");
+const nameInput = document.getElementById("contactNameInput");
+const emailInput = document.getElementById("contactEmailInput");
+const messageInput = document.getElementById("contactMessageInput");
+const recaptcha = document.getElementById("recaptcha");
+const sendBtn = document.getElementById("contactSendButton");
+
+$(document).ready(function() {
+ $(contactForm).submit(function(event) {
+ event.preventDefault();
+
+ let name = nameInput.value;
+ let email = emailInput.value;
+ let message = emailInput.value;
+ let recaptchaValue = grecaptcha.getResponse();
+
+ if(name !== "" && email !== "" && message !== "") {
+ if(recaptchaValue !== "") {
+
+ }
+ else {
+ show_alert("Please check-in reCaptcha", "info")
+ }
+ }
+ else {
+ show_alert("Please fill-up all the fields", "info");
+ }
+ });
+});
+
+function show_alert(alertMessage, alertType = "default") {
+ if(alertType === "success"){
+ alertMessage = "" + alertMessage + "
"
+ }
+ else if (alertType === "info") {
+ alertMessage = "" + alertMessage + "
"
+ }
+ else if (alertType === "danger") {
+ alertMessage = "" + alertMessage + "
"
+ }
+
+ $('#contactAlert').html(alertMessage).fadeIn();
+
+ setTimeout(function() {
+ $("#contactAlert").fadeOut();
+ }, 9000);
+}
\ No newline at end of file
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index c8d4ca3..6b80cc2 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -1275,6 +1275,10 @@ video {
border-top-width: 5px;
}
+.border-l-\[7px\] {
+ border-left-width: 7px;
+}
+
.border-\[rgba\(255\2c _255\2c _255\2c _0\.15\)\] {
border-color: rgba(255, 255, 255, 0.15);
}
@@ -1302,6 +1306,21 @@ video {
border-color: rgb(217 217 217 / var(--tw-border-opacity));
}
+.border-\[rgb\(249\2c _115\2c _22\)\] {
+ --tw-border-opacity: 1;
+ border-color: rgb(249 115 22 / var(--tw-border-opacity));
+}
+
+.border-\[rgb\(255\2c _29\2c _72\)\] {
+ --tw-border-opacity: 1;
+ border-color: rgb(255 29 72 / var(--tw-border-opacity));
+}
+
+.border-\[rgb\(22\2c _163\2c _74\)\] {
+ --tw-border-opacity: 1;
+ border-color: rgb(22 163 74 / var(--tw-border-opacity));
+}
+
.border-l-accent_primary {
--tw-border-opacity: 1;
border-left-color: rgb(56 189 248 / var(--tw-border-opacity));
@@ -1345,6 +1364,56 @@ video {
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
}
+.bg-\[rgb\(249\2c _115\2c _22\)\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(249 115 22 / var(--tw-bg-opacity));
+}
+
+.bg-\[rgb\(254\2c _215\2c _170\)\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 215 170 / var(--tw-bg-opacity));
+}
+
+.bg-\[rgb\(249\2c _115\2c _22\2c _0\.3\)\] {
+ background-color: rgb(249, 115, 22, 0.3);
+}
+
+.bg-\[rgb\(255\2c _29\2c _72\2c _0\.3\)\] {
+ background-color: rgb(255, 29, 72, 0.3);
+}
+
+.bg-accent_primary_transparent {
+ background-color: rgba(56, 189, 248, 0.30);
+}
+
+.bg-\[rgb\(22\2c _163\2c _74\2c _0\.3\)\] {
+ background-color: rgb(22, 163, 74, 0.3);
+}
+
+.bg-\[rgb\(255\2c _29\2c _72\2c _0\.2\)\] {
+ background-color: rgb(255, 29, 72, 0.2);
+}
+
+.bg-\[rgb\(22\2c _163\2c _74\2c _0\.2\)\] {
+ background-color: rgb(22, 163, 74, 0.2);
+}
+
+.bg-\[rgb\(249\2c _115\2c _22\2c _0\.2\)\] {
+ background-color: rgb(249, 115, 22, 0.2);
+}
+
+.bg-\[rgba\(22\2c _163\2c _74\2c _0\.2\)\] {
+ background-color: rgba(22, 163, 74, 0.2);
+}
+
+.bg-\[rgba\(249\2c _115\2c _22\2c _0\.2\)\] {
+ background-color: rgba(249, 115, 22, 0.2);
+}
+
+.bg-\[rgba\(255\2c _29\2c _72\2c _0\.2\)\] {
+ background-color: rgba(255, 29, 72, 0.2);
+}
+
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
@@ -1576,6 +1645,26 @@ video {
color: rgb(30 41 59 / var(--tw-text-opacity));
}
+.text-\[rgb\(234\2c _88\2c _12\)\] {
+ --tw-text-opacity: 1;
+ color: rgb(234 88 12 / var(--tw-text-opacity));
+}
+
+.text-\[rgb\(249\2c _115\2c _22\)\] {
+ --tw-text-opacity: 1;
+ color: rgb(249 115 22 / var(--tw-text-opacity));
+}
+
+.text-\[rgb\(255\2c _29\2c _72\)\] {
+ --tw-text-opacity: 1;
+ color: rgb(255 29 72 / var(--tw-text-opacity));
+}
+
+.text-\[rgb\(22\2c _163\2c _74\)\] {
+ --tw-text-opacity: 1;
+ color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
.caret-accent_primary {
caret-color: #38BDF8;
}
diff --git a/htdocs/contact.php b/htdocs/contact.php
index 76d7776..9f04bfb 100644
--- a/htdocs/contact.php
+++ b/htdocs/contact.php
@@ -54,25 +54,26 @@ require 'core/query_functions.php';