82 lines
3.1 KiB
JavaScript
82 lines
3.1 KiB
JavaScript
// /workspace/assets/js/main.js
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Navbar scroll effect
|
|
const navbar = document.querySelector('.navbar');
|
|
if (navbar) {
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add('scrolled');
|
|
} else {
|
|
navbar.classList.remove('scrolled');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Contact form submission
|
|
const contactForm = document.getElementById('contactForm');
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
if (!this.checkValidity()) {
|
|
e.stopPropagation();
|
|
this.classList.add('was-validated');
|
|
return;
|
|
}
|
|
this.classList.add('was-validated');
|
|
|
|
const submitBtn = this.querySelector('button[type="submit"]');
|
|
const originalBtnText = submitBtn.innerHTML;
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Sending...';
|
|
|
|
const formData = new FormData(this);
|
|
|
|
fetch('contact.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast('Success!', 'Your message has been sent. We will get back to you shortly.', 'success');
|
|
contactForm.reset();
|
|
contactForm.classList.remove('was-validated');
|
|
} else {
|
|
showToast('Error!', data.error || 'An unknown error occurred. Please try again.', 'danger');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showToast('Error!', 'Could not reach the server. Please check your connection.', 'danger');
|
|
})
|
|
.finally(() => {
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = originalBtnText;
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
function showToast(title, message, type = 'info') {
|
|
const toastContainer = document.getElementById('toast-container');
|
|
if (!toastContainer) return;
|
|
|
|
const toastId = 'toast-' + Date.now();
|
|
const toastHTML = `
|
|
<div id="${toastId}" class="toast align-items-center text-white bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body">
|
|
<strong>${title}</strong> ${message}
|
|
</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
toastContainer.insertAdjacentHTML('beforeend', toastHTML);
|
|
|
|
const toastElement = document.getElementById(toastId);
|
|
const toast = new bootstrap.Toast(toastElement, { delay: 5000 });
|
|
toast.show();
|
|
toastElement.addEventListener('hidden.bs.toast', () => {
|
|
toastElement.remove();
|
|
});
|
|
} |