109 lines
3.3 KiB
JavaScript
109 lines
3.3 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const contactForm = document.getElementById('contactForm');
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const submitBtn = contactForm.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(contactForm);
|
|
|
|
fetch('api/contact.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast('Success', 'Your message has been sent successfully!', 'success');
|
|
contactForm.reset();
|
|
} else {
|
|
showToast('Error', data.message || 'Something went wrong.', 'danger');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showToast('Error', 'Network error. Please try again.', 'danger');
|
|
})
|
|
.finally(() => {
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = originalBtnText;
|
|
});
|
|
});
|
|
}
|
|
|
|
// Interactive Background Animation
|
|
const canvas = document.getElementById('bg-canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
let particles = [];
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
|
|
window.addEventListener('resize', resize);
|
|
resize();
|
|
|
|
class Particle {
|
|
constructor() {
|
|
this.reset();
|
|
}
|
|
reset() {
|
|
this.x = Math.random() * canvas.width;
|
|
this.y = Math.random() * canvas.height;
|
|
this.size = Math.random() * 2 + 1;
|
|
this.speedX = Math.random() * 1 - 0.5;
|
|
this.speedY = Math.random() * 1 - 0.5;
|
|
}
|
|
update() {
|
|
this.x += this.speedX;
|
|
this.y += this.speedY;
|
|
if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height) this.reset();
|
|
}
|
|
draw() {
|
|
ctx.fillStyle = 'rgba(37, 99, 235, 0.2)';
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i < 50; i++) particles.push(new Particle());
|
|
|
|
function animate() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
particles.forEach(p => { p.update(); p.draw(); });
|
|
requestAnimationFrame(animate);
|
|
}
|
|
animate();
|
|
});
|
|
|
|
function showToast(title, message, type) {
|
|
const toastContainer = document.getElementById('toastContainer');
|
|
if (!toastContainer) return;
|
|
|
|
const toastHtml = `
|
|
<div class="toast show 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>
|
|
`;
|
|
|
|
const toastWrapper = document.createElement('div');
|
|
toastWrapper.innerHTML = toastHtml;
|
|
const toastElement = toastWrapper.firstElementChild;
|
|
|
|
toastContainer.appendChild(toastElement);
|
|
|
|
setTimeout(() => {
|
|
toastElement.classList.remove('show');
|
|
setTimeout(() => toastElement.remove(), 500);
|
|
}, 5000);
|
|
} |