initial
This commit is contained in:
451
script.js
Normal file
451
script.js
Normal file
@@ -0,0 +1,451 @@
|
||||
// Mobile Navigation Toggle
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const hamburger = document.querySelector('.hamburger');
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
|
||||
hamburger.addEventListener('click', function() {
|
||||
hamburger.classList.toggle('active');
|
||||
navMenu.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking on a link
|
||||
document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => {
|
||||
hamburger.classList.remove('active');
|
||||
navMenu.classList.remove('active');
|
||||
}));
|
||||
});
|
||||
|
||||
// Smooth Scrolling for Navigation Links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Portfolio Filter Functionality
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const filterButtons = document.querySelectorAll('.filter-btn');
|
||||
const portfolioItems = document.querySelectorAll('.portfolio-item');
|
||||
|
||||
filterButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
// Remove active class from all buttons
|
||||
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||||
// Add active class to clicked button
|
||||
this.classList.add('active');
|
||||
|
||||
const filterValue = this.getAttribute('data-filter');
|
||||
|
||||
portfolioItems.forEach(item => {
|
||||
if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
|
||||
item.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
item.style.opacity = '1';
|
||||
item.style.transform = 'scale(1)';
|
||||
}, 100);
|
||||
} else {
|
||||
item.style.opacity = '0';
|
||||
item.style.transform = 'scale(0.8)';
|
||||
setTimeout(() => {
|
||||
item.style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Form Handling with EmailJS
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Check if EmailJS is loaded
|
||||
if (typeof emailjs === 'undefined') {
|
||||
console.error('EmailJS not loaded. Please check the script tag.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize EmailJS
|
||||
emailjs.init("QznwPi5vZti7xnjRj"); // Replace with your EmailJS public key
|
||||
|
||||
console.log('EmailJS initialized successfully');
|
||||
|
||||
const quoteForm = document.getElementById('quoteForm');
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
|
||||
// Function to send email via EmailJS
|
||||
function sendEmail(templateId, templateParams) {
|
||||
console.log('Attempting to send email with EmailJS:', templateId);
|
||||
console.log('Template parameters:', templateParams);
|
||||
|
||||
return emailjs.send('service_c51669d', templateId, templateParams)
|
||||
.then(function(response) {
|
||||
console.log('EmailJS Success:', response.status, response.text);
|
||||
return response;
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.error('EmailJS Error:', error);
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
// Quote Form Submission
|
||||
if (quoteForm) {
|
||||
quoteForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get form data
|
||||
const formData = new FormData(this);
|
||||
const data = {};
|
||||
for (let [key, value] of formData.entries()) {
|
||||
data[key] = value;
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
const submitBtn = this.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
submitBtn.textContent = 'Submitting...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// Prepare EmailJS template parameters
|
||||
const templateParams = {
|
||||
to_email: 'oli@ptslondon.co.uk',
|
||||
from_name: data.name,
|
||||
reply_to: data.email,
|
||||
customer_name: data.name,
|
||||
customer_email: data.email,
|
||||
customer_phone: data.phone || 'Not provided',
|
||||
customer_company: data.company || 'Not provided',
|
||||
service_type: data.service,
|
||||
project_location: data.location,
|
||||
preferred_date: data.date || 'Not specified',
|
||||
budget_range: data.budget || 'Not specified',
|
||||
project_description: data.description,
|
||||
form_type: 'Quote Request'
|
||||
};
|
||||
|
||||
// Send email using EmailJS
|
||||
sendEmail('quote_template', templateParams)
|
||||
.then((result) => {
|
||||
console.log('Quote email sent successfully:', result);
|
||||
showNotification('Thank you for your quote request! We will contact you within 24 hours.', 'success');
|
||||
this.reset();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('EmailJS error:', error);
|
||||
let errorMessage = 'There was an error sending your quote request. ';
|
||||
|
||||
if (error.text && error.text.includes('template')) {
|
||||
errorMessage += 'Email template not found. ';
|
||||
} else if (error.text && error.text.includes('service')) {
|
||||
errorMessage += 'Email service configuration error. ';
|
||||
}
|
||||
|
||||
errorMessage += 'Please contact us directly at oli@ptslondon.co.uk.';
|
||||
showNotification(errorMessage, 'error');
|
||||
})
|
||||
.finally(() => {
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.disabled = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Contact Form Submission
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get form data
|
||||
const formData = new FormData(this);
|
||||
const data = {};
|
||||
for (let [key, value] of formData.entries()) {
|
||||
data[key] = value;
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
const submitBtn = this.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
submitBtn.textContent = 'Sending...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// Prepare EmailJS template parameters
|
||||
const templateParams = {
|
||||
to_email: 'oli@ptslondon.co.uk',
|
||||
from_name: data.contact_name,
|
||||
reply_to: data.contact_email,
|
||||
customer_name: data.contact_name,
|
||||
customer_email: data.contact_email,
|
||||
message_subject: data.subject,
|
||||
message_content: data.message,
|
||||
form_type: 'Contact Message'
|
||||
};
|
||||
|
||||
// Send email using EmailJS
|
||||
sendEmail('contact_template', templateParams)
|
||||
.then((result) => {
|
||||
console.log('Contact email sent successfully:', result);
|
||||
showNotification('Thank you for your message! We will get back to you soon.', 'success');
|
||||
this.reset();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Contact EmailJS error:', error);
|
||||
let errorMessage = 'There was an error sending your message. ';
|
||||
|
||||
if (error.text && error.text.includes('template')) {
|
||||
errorMessage += 'Email template not found. ';
|
||||
} else if (error.text && error.text.includes('service')) {
|
||||
errorMessage += 'Email service configuration error. ';
|
||||
}
|
||||
|
||||
errorMessage += 'Please contact us directly at oli@ptslondon.co.uk.';
|
||||
showNotification(errorMessage, 'error');
|
||||
})
|
||||
.finally(() => {
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.disabled = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Navbar Background on Scroll
|
||||
window.addEventListener('scroll', function() {
|
||||
const header = document.querySelector('.header');
|
||||
if (window.scrollY > 100) {
|
||||
header.style.background = 'rgba(255, 255, 255, 0.98)';
|
||||
header.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
|
||||
} else {
|
||||
header.style.background = 'rgba(255, 255, 255, 0.95)';
|
||||
header.style.boxShadow = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Intersection Observer for Animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements for animation
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const animateElements = document.querySelectorAll('.service-card, .portfolio-item, .about-content, .contact-item');
|
||||
animateElements.forEach(el => {
|
||||
el.classList.add('fade-in');
|
||||
observer.observe(el);
|
||||
});
|
||||
});
|
||||
|
||||
// Form Validation
|
||||
function validateEmail(email) {
|
||||
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return re.test(email);
|
||||
}
|
||||
|
||||
function validatePhone(phone) {
|
||||
const re = /^[\+]?[1-9][\d]{0,15}$/;
|
||||
return re.test(phone.replace(/\s/g, ''));
|
||||
}
|
||||
|
||||
// Real-time form validation
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const emailInputs = document.querySelectorAll('input[type="email"]');
|
||||
const phoneInputs = document.querySelectorAll('input[type="tel"]');
|
||||
|
||||
emailInputs.forEach(input => {
|
||||
input.addEventListener('blur', function() {
|
||||
if (this.value && !validateEmail(this.value)) {
|
||||
this.style.borderColor = '#ff6b6b';
|
||||
this.style.boxShadow = '0 0 0 3px rgba(255, 107, 107, 0.1)';
|
||||
} else {
|
||||
this.style.borderColor = '#ddd';
|
||||
this.style.boxShadow = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
phoneInputs.forEach(input => {
|
||||
input.addEventListener('blur', function() {
|
||||
if (this.value && !validatePhone(this.value)) {
|
||||
this.style.borderColor = '#ff6b6b';
|
||||
this.style.boxShadow = '0 0 0 3px rgba(255, 107, 107, 0.1)';
|
||||
} else {
|
||||
this.style.borderColor = '#ddd';
|
||||
this.style.boxShadow = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Set minimum date for date inputs to today
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const dateInput = document.getElementById('date');
|
||||
if (dateInput) {
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
dateInput.setAttribute('min', today);
|
||||
}
|
||||
});
|
||||
|
||||
// Lazy loading for images
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const images = document.querySelectorAll('img[data-src]');
|
||||
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
img.removeAttribute('data-src');
|
||||
imageObserver.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
images.forEach(img => imageObserver.observe(img));
|
||||
});
|
||||
|
||||
// Add loading states for buttons
|
||||
function addLoadingState(button, loadingText = 'Loading...') {
|
||||
const originalText = button.textContent;
|
||||
button.textContent = loadingText;
|
||||
button.disabled = true;
|
||||
button.classList.add('loading');
|
||||
|
||||
return function removeLoadingState() {
|
||||
button.textContent = originalText;
|
||||
button.disabled = false;
|
||||
button.classList.remove('loading');
|
||||
};
|
||||
}
|
||||
|
||||
// Enhanced form submission with better error handling
|
||||
function submitForm(form, endpoint) {
|
||||
const submitButton = form.querySelector('button[type="submit"]');
|
||||
const removeLoading = addLoadingState(submitButton);
|
||||
|
||||
const formData = new FormData(form);
|
||||
|
||||
// Convert FormData to regular object
|
||||
const data = {};
|
||||
for (let [key, value] of formData.entries()) {
|
||||
data[key] = value;
|
||||
}
|
||||
|
||||
// Simulate API call (replace with actual endpoint)
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
// Simulate success/failure
|
||||
if (Math.random() > 0.1) { // 90% success rate
|
||||
resolve(data);
|
||||
} else {
|
||||
reject(new Error('Network error'));
|
||||
}
|
||||
}, 2000);
|
||||
})
|
||||
.then(result => {
|
||||
removeLoading();
|
||||
showNotification('Form submitted successfully!', 'success');
|
||||
form.reset();
|
||||
return result;
|
||||
})
|
||||
.catch(error => {
|
||||
removeLoading();
|
||||
showNotification('There was an error submitting the form. Please try again.', 'error');
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
// Notification system
|
||||
function showNotification(message, type = 'info') {
|
||||
// Remove existing notifications
|
||||
const existingNotifications = document.querySelectorAll('.notification');
|
||||
existingNotifications.forEach(notification => notification.remove());
|
||||
|
||||
const notification = document.createElement('div');
|
||||
notification.className = `notification notification-${type}`;
|
||||
notification.innerHTML = `
|
||||
<span>${message}</span>
|
||||
<button class="notification-close">×</button>
|
||||
`;
|
||||
|
||||
// Add styles
|
||||
Object.assign(notification.style, {
|
||||
position: 'fixed',
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
padding: '1rem 1.5rem',
|
||||
borderRadius: '5px',
|
||||
color: 'white',
|
||||
fontWeight: '500',
|
||||
zIndex: '10000',
|
||||
animation: 'slideInRight 0.3s ease',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '1rem',
|
||||
maxWidth: '300px'
|
||||
});
|
||||
|
||||
// Set background color based on type
|
||||
const colors = {
|
||||
success: '#28a745',
|
||||
error: '#dc3545',
|
||||
warning: '#ffc107',
|
||||
info: '#17a2b8'
|
||||
};
|
||||
notification.style.backgroundColor = colors[type] || colors.info;
|
||||
|
||||
// Add close functionality
|
||||
const closeBtn = notification.querySelector('.notification-close');
|
||||
closeBtn.style.background = 'none';
|
||||
closeBtn.style.border = 'none';
|
||||
closeBtn.style.color = 'white';
|
||||
closeBtn.style.fontSize = '1.5rem';
|
||||
closeBtn.style.cursor = 'pointer';
|
||||
closeBtn.style.padding = '0';
|
||||
closeBtn.style.marginLeft = 'auto';
|
||||
|
||||
closeBtn.addEventListener('click', () => notification.remove());
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Auto remove after 5 seconds
|
||||
setTimeout(() => {
|
||||
if (document.body.contains(notification)) {
|
||||
notification.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Add CSS for notification animation
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
Reference in New Issue
Block a user