Spaces:

Vilks
/

quickwash-proclean-solutions

Running

quickwash-proclean-solutions / script.js

the bottom button is still now visable

7c2c398 verified about 1 year ago

9.48 kB

// Global JavaScript functionality
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    initializeComponents();
    setupEventListeners();
    setupIntersectionObserver();
    initBlogPreview();
    initTestimonials();
});
// Initialize all components
function initializeComponents() {
    // Initialize any global components here
    console.log('QuickWash ProClean Solutions initialized');
}

// Setup event listeners
function setupEventListeners() {
    // Back to top functionality
    const backToTopBtn = document.createElement('div');
    backToTopBtn.className = 'back-to-top';
    backToTopBtn.innerHTML = '<i data-feather="arrow-up"></i>';
    document.body.appendChild(backToTopBtn);
    window.addEventListener('scroll', function() {
        if (window.pageYOffset > 300) {
            backToTopBtn.classList.remove('hidden');
        } else {
            backToTopBtn.classList.add('hidden');
        }
    });
backToTopBtn.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    // Mobile menu toggle (handled in navbar component)
}

// Intersection Observer for animations
function setupIntersectionObserver() {
    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('fade-in-up');
            }
        });
    }, observerOptions);

    // Observe elements with animation class
    document.querySelectorAll('.animate-on-scroll').forEach(el => {
        observer.observe(el);
    });
}

// Form handling utilities
function validateForm(form) {
    const inputs = form.querySelectorAll('input[required], textarea[required], select[required]');
    let isValid = true;

    inputs.forEach(input => {
        if (!input.value.trim()) {
            isValid = false;
            input.classList.add('border-red-500');
        } else {
            input.classList.remove('border-red-500');
        }
    });

    return isValid;
}

// API utilities
async function fetchData(url, options = {}) {
    try {
        const response = await fetch(url, {
            headers: {
                'Content-Type': 'application/json',
                ...options.headers
            },
            ...options
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        return await response.json();
    } catch (error) {
        console.error('Error fetching data:', error);
        throw error;
    }
}

// Utility functions
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}
// Service data
const servicesData = {
    office: {
        title: "Office Cleaning",
        description: "Complete office space cleaning services designed to maintain a professional and healthy work environment.",
        features: [
            "Daily desk and surface cleaning",
            "Restroom sanitization",
            "Floor maintenance",
            "Window cleaning",
            "Common area upkeep"
        ],
        image: "http://static.photos/office/1200x630/1"
    },
    industrial: {
        title: "Industrial Cleaning",
        description: "Heavy-duty cleaning solutions for manufacturing facilities, warehouses, and industrial complexes.",
        features: [
            "Equipment and machinery cleaning",
            "Floor degreasing and scrubbing",
            "High-pressure washing",
            "Dust and debris removal",
            "Safety compliance cleaning"
        ],
        image: "http://static.photos/industry/1200x630/2"
    },
    medical: {
        title: "Medical Facility Cleaning",
        description: "Specialized cleaning protocols for healthcare environments requiring the highest standards of cleanliness.",
        features: [
            "Sterile surface disinfection",
            "Biohazard waste management",
            "Operating room cleaning",
            "Patient room sanitization",
            "HIPAA compliant procedures"
        ],
        image: "http://static.photos/medical/1200x630/3"
    }
};
// Blog data (mock data for demonstration)
const blogPosts = [
    {
        id: 1,
        title: "The Importance of Professional Commercial Cleaning",
        excerpt: "Discover why professional cleaning services are essential for maintaining a healthy and productive work environment.",
        date: "2024-01-15",
        image: "http://static.photos/workspace/640x360/4",
        category: "Commercial",
        slug: "importance-professional-cleaning"
    },
    {
        id: 2,
        title: "Green Cleaning: Sustainable Practices for Modern Businesses",
        excerpt: "Learn how eco-friendly cleaning solutions can benefit your business and the environment.",
        date: "2024-01-10",
        image: "http://static.photos/green/640x360/5",
        category: "Sustainability",
        slug: "green-cleaning-sustainable-practices"
    },
    {
        id: 3,
        title: "Industrial Cleaning Safety Protocols",
        excerpt: "Understanding the critical safety measures involved in industrial cleaning operations.",
        date: "2024-01-05",
        image: "http://static.photos/construction/640x360/6",
        category: "Industrial",
        slug: "industrial-cleaning-safety"
    },
    {
        id: 4,
        title: "Post-Pandemic Cleaning Standards",
        excerpt: "How cleaning protocols have evolved in response to COVID-19.",
        date: "2023-12-20",
        image: "http://static.photos/medical/640x360/7",
        category: "Medical",
        slug: "post-pandemic-cleaning-standards"
    },
    {
        id: 5,
        title: "Choosing the Right Cleaning Service for Your Business",
        excerpt: "Key factors to consider when selecting a commercial cleaning provider.",
        date: "2023-12-10",
        image: "http://static.photos/office/640x360/8",
        category: "Commercial",
        slug: "choosing-right-cleaning-service"
    }
];

// Testimonials data
const testimonials = [
    {
        id: 1,
        name: "Jessica Thompson",
        company: "Thompson Industries",
        text: "QuickWash has transformed our manufacturing facility. Their attention to detail and reliability is unmatched.",
        rating: 5
    },
    {
        id: 2,
        name: "Michael Rodriguez",
        company: "Downtown Medical Center",
        text: "As a healthcare facility, cleanliness is critical. QuickWash meets all our stringent requirements with professionalism.",
        rating: 5
    },
    {
        id: 3,
        name: "Sarah Chen",
        company: "Urban Office Spaces",
        text: "Our tenants consistently compliment how clean our buildings are thanks to QuickWash's excellent service.",
        rating: 4
    }
];

// Initialize blog preview on homepage
function initBlogPreview() {
    const blogContainer = document.querySelector('.blog-preview .grid');
    if (blogContainer) {
        const previewPosts = blogPosts.slice(0, 3);
        blogContainer.innerHTML = previewPosts.map(post => `
            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                <img src="${post.image}" alt="${post.title}" class="w-full h-48 object-cover" loading="lazy">
                <div class="p-6">
                    <span class="text-sm text-primary font-medium">${post.category}</span>
                    <h3 class="text-xl font-bold my-2">${post.title}</h3>
                    <p class="text-gray-600 mb-4">${post.excerpt}</p>
                    <a href="/blog/${post.slug}" class="text-primary font-medium hover:text-primary/80">Read More →</a>
                </div>
            </div>
        `).join('');
    }
}

// Initialize testimonials slider
function initTestimonials() {
    const slider = document.querySelector('.testimonial-slider');
    if (slider) {
        slider.innerHTML = testimonials.map(testimonial => `
            <div class="testimonial-slide bg-white p-8 rounded-lg shadow-md max-w-2xl mx-auto">
                <div class="flex mb-4">
                    ${Array(testimonial.rating).fill('<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>').join('')}
                </div>
                <p class="text-gray-700 mb-6">"${testimonial.text}"</p>
                <div class="font-medium">
                    <p>${testimonial.name}</p>
                    <p class="text-gray-600">${testimonial.company}</p>
                </div>
            </div>
        `).join('');
    }
}
// Export utilities for use in other files
window.QuickWashUtils = {
    validateForm,
    fetchData,
    debounce,
    servicesData,
    blogPosts
};

	// Global JavaScript functionality
	// Initialize when DOM is loaded
	document.addEventListener('DOMContentLoaded', function() {
	initializeComponents();
	setupEventListeners();
	setupIntersectionObserver();
	initBlogPreview();
	initTestimonials();
	});
	// Initialize all components
	function initializeComponents() {
	// Initialize any global components here
	console.log('QuickWash ProClean Solutions initialized');
	}

	// Setup event listeners
	function setupEventListeners() {
	// Back to top functionality
	const backToTopBtn = document.createElement('div');
	backToTopBtn.className = 'back-to-top';
	backToTopBtn.innerHTML = '<i data-feather="arrow-up"></i>';
	document.body.appendChild(backToTopBtn);
	window.addEventListener('scroll', function() {
	if (window.pageYOffset > 300) {
	backToTopBtn.classList.remove('hidden');
	} else {
	backToTopBtn.classList.add('hidden');
	}
	});
	backToTopBtn.addEventListener('click', function() {
	window.scrollTo({
	top: 0,
	behavior: 'smooth'
	});
	});

	// Mobile menu toggle (handled in navbar component)
	}

	// Intersection Observer for animations
	function setupIntersectionObserver() {
	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('fade-in-up');
	}
	});
	}, observerOptions);

	// Observe elements with animation class
	document.querySelectorAll('.animate-on-scroll').forEach(el => {
	observer.observe(el);
	});
	}

	// Form handling utilities
	function validateForm(form) {
	const inputs = form.querySelectorAll('input[required], textarea[required], select[required]');
	let isValid = true;

	inputs.forEach(input => {
	if (!input.value.trim()) {
	isValid = false;
	input.classList.add('border-red-500');
	} else {
	input.classList.remove('border-red-500');
	}
	});

	return isValid;
	}

	// API utilities
	async function fetchData(url, options = {}) {
	try {
	const response = await fetch(url, {
	headers: {
	'Content-Type': 'application/json',
	...options.headers
	},
	...options
	});

	if (!response.ok) {
	throw new Error(`HTTP error! status: ${response.status}`);
	}

	return await response.json();
	} catch (error) {
	console.error('Error fetching data:', error);
	throw error;
	}
	}

	// Utility functions
	function debounce(func, wait) {
	let timeout;
	return function executedFunction(...args) {
	const later = () => {
	clearTimeout(timeout);
	func(...args);
	};
	clearTimeout(timeout);
	timeout = setTimeout(later, wait);
	};
	}
	// Service data
	const servicesData = {
	office: {
	title: "Office Cleaning",
	description: "Complete office space cleaning services designed to maintain a professional and healthy work environment.",
	features: [
	"Daily desk and surface cleaning",
	"Restroom sanitization",
	"Floor maintenance",
	"Window cleaning",
	"Common area upkeep"
	],
	image: "http://static.photos/office/1200x630/1"
	},
	industrial: {
	title: "Industrial Cleaning",
	description: "Heavy-duty cleaning solutions for manufacturing facilities, warehouses, and industrial complexes.",
	features: [
	"Equipment and machinery cleaning",
	"Floor degreasing and scrubbing",
	"High-pressure washing",
	"Dust and debris removal",
	"Safety compliance cleaning"
	],
	image: "http://static.photos/industry/1200x630/2"
	},
	medical: {
	title: "Medical Facility Cleaning",
	description: "Specialized cleaning protocols for healthcare environments requiring the highest standards of cleanliness.",
	features: [
	"Sterile surface disinfection",
	"Biohazard waste management",
	"Operating room cleaning",
	"Patient room sanitization",
	"HIPAA compliant procedures"
	],
	image: "http://static.photos/medical/1200x630/3"
	}
	};
	// Blog data (mock data for demonstration)
	const blogPosts = [
	{
	id: 1,
	title: "The Importance of Professional Commercial Cleaning",
	excerpt: "Discover why professional cleaning services are essential for maintaining a healthy and productive work environment.",
	date: "2024-01-15",
	image: "http://static.photos/workspace/640x360/4",
	category: "Commercial",
	slug: "importance-professional-cleaning"
	},
	{
	id: 2,
	title: "Green Cleaning: Sustainable Practices for Modern Businesses",
	excerpt: "Learn how eco-friendly cleaning solutions can benefit your business and the environment.",
	date: "2024-01-10",
	image: "http://static.photos/green/640x360/5",
	category: "Sustainability",
	slug: "green-cleaning-sustainable-practices"
	},
	{
	id: 3,
	title: "Industrial Cleaning Safety Protocols",
	excerpt: "Understanding the critical safety measures involved in industrial cleaning operations.",
	date: "2024-01-05",
	image: "http://static.photos/construction/640x360/6",
	category: "Industrial",
	slug: "industrial-cleaning-safety"
	},
	{
	id: 4,
	title: "Post-Pandemic Cleaning Standards",
	excerpt: "How cleaning protocols have evolved in response to COVID-19.",
	date: "2023-12-20",
	image: "http://static.photos/medical/640x360/7",
	category: "Medical",
	slug: "post-pandemic-cleaning-standards"
	},
	{
	id: 5,
	title: "Choosing the Right Cleaning Service for Your Business",
	excerpt: "Key factors to consider when selecting a commercial cleaning provider.",
	date: "2023-12-10",
	image: "http://static.photos/office/640x360/8",
	category: "Commercial",
	slug: "choosing-right-cleaning-service"
	}
	];

	// Testimonials data
	const testimonials = [
	{
	id: 1,
	name: "Jessica Thompson",
	company: "Thompson Industries",
	text: "QuickWash has transformed our manufacturing facility. Their attention to detail and reliability is unmatched.",
	rating: 5
	},
	{
	id: 2,
	name: "Michael Rodriguez",
	company: "Downtown Medical Center",
	text: "As a healthcare facility, cleanliness is critical. QuickWash meets all our stringent requirements with professionalism.",
	rating: 5
	},
	{
	id: 3,
	name: "Sarah Chen",
	company: "Urban Office Spaces",
	text: "Our tenants consistently compliment how clean our buildings are thanks to QuickWash's excellent service.",
	rating: 4
	}
	];

	// Initialize blog preview on homepage
	function initBlogPreview() {
	const blogContainer = document.querySelector('.blog-preview .grid');
	if (blogContainer) {
	const previewPosts = blogPosts.slice(0, 3);
	blogContainer.innerHTML = previewPosts.map(post => `
	<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
	<img src="${post.image}" alt="${post.title}" class="w-full h-48 object-cover" loading="lazy">
	<div class="p-6">
	<span class="text-sm text-primary font-medium">${post.category}</span>
	<h3 class="text-xl font-bold my-2">${post.title}</h3>
	<p class="text-gray-600 mb-4">${post.excerpt}</p>
	<a href="/blog/${post.slug}" class="text-primary font-medium hover:text-primary/80">Read More →</a>
	</div>
	</div>
	`).join('');
	}
	}

	// Initialize testimonials slider
	function initTestimonials() {
	const slider = document.querySelector('.testimonial-slider');
	if (slider) {
	slider.innerHTML = testimonials.map(testimonial => `
	<div class="testimonial-slide bg-white p-8 rounded-lg shadow-md max-w-2xl mx-auto">
	<div class="flex mb-4">
	${Array(testimonial.rating).fill('<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>').join('')}
	</div>
	<p class="text-gray-700 mb-6">"${testimonial.text}"</p>
	<div class="font-medium">
	<p>${testimonial.name}</p>
	<p class="text-gray-600">${testimonial.company}</p>
	</div>
	</div>
	`).join('');
	}
	}
	// Export utilities for use in other files
	window.QuickWashUtils = {
	validateForm,
	fetchData,
	debounce,
	servicesData,
	blogPosts
	};