ac7088c5ca
Features: - Complete Luftglanz drone cleaning website - AI chat assistant integrated with OpenAI API - Expert product advice for AGO Quart and Mellerud cleaning products - Formal German language support (Sie form) - Secure PHP backend for API calls - Responsive design with mobile support - Product-specific knowledge base - Safety statements from manufacturers - Multi-page integration (index, products, services, contact) Technical components: - AI chat widget (js/ai-chat.js) - Chat styling (css/components/ai-chat.css) - Backend API (ai-chat-api.php) - Product knowledge base with detailed specifications - Demo and documentation files
140 lines
7.8 KiB
JavaScript
140 lines
7.8 KiB
JavaScript
/**
|
|
* Bright Theme Elements and Visual Enhancements
|
|
*/
|
|
(function() {
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Add clean sky background to hero section
|
|
enhanceHeroSection();
|
|
|
|
// Add clean visual elements to services section
|
|
enhanceServicesSection();
|
|
|
|
// Add bright UI enhancements
|
|
applyBrightUIEnhancements();
|
|
});
|
|
|
|
function enhanceHeroSection() {
|
|
const heroSection = document.querySelector('.hero');
|
|
if (!heroSection) return;
|
|
|
|
// Create and add sky background with subtle clouds
|
|
heroSection.style.backgroundImage = 'linear-gradient(to bottom, #e6f3ff 0%, #ffffff 100%)';
|
|
heroSection.style.position = 'relative';
|
|
heroSection.style.overflow = 'hidden';
|
|
|
|
// Add subtle pattern
|
|
const pattern = document.createElement('div');
|
|
pattern.className = 'hero-pattern';
|
|
pattern.style.position = 'absolute';
|
|
pattern.style.top = 0;
|
|
pattern.style.left = 0;
|
|
pattern.style.right = 0;
|
|
pattern.style.bottom = 0;
|
|
pattern.style.opacity = 0.3;
|
|
pattern.style.backgroundImage = 'url("data:image/svg+xml,%3Csvg width=\'100\' height=\'100\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z\' fill=\'%230078d4\' fill-opacity=\'0.1\' fill-rule=\'evenodd\'/%3E%3C/svg%3E")';
|
|
heroSection.insertBefore(pattern, heroSection.firstChild);
|
|
|
|
// Add animated simple drone icon
|
|
const droneContainer = document.createElement('div');
|
|
droneContainer.className = 'drone-animation';
|
|
droneContainer.style.position = 'absolute';
|
|
droneContainer.style.top = '20%';
|
|
droneContainer.style.right = '10%';
|
|
droneContainer.style.width = '80px';
|
|
droneContainer.style.height = '80px';
|
|
droneContainer.style.zIndex = '1';
|
|
droneContainer.style.animation = 'float 6s ease-in-out infinite';
|
|
|
|
// Create drone SVG
|
|
droneContainer.innerHTML = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8Z" fill="#0078d4"/>
|
|
<path d="M4 10C5.10457 10 6 9.10457 6 8C6 6.89543 5.10457 6 4 6C2.89543 6 2 6.89543 2 8C2 9.10457 2.89543 10 4 10Z" fill="#0078d4"/>
|
|
<path d="M20 10C21.1046 10 22 9.10457 22 8C22 6.89543 21.1046 6 20 6C18.8954 6 18 6.89543 18 8C18 9.10457 18.8954 10 20 10Z" fill="#0078d4"/>
|
|
<path d="M12 20C13.1046 20 14 19.1046 14 18C14 16.8954 13.1046 16 12 16C10.8954 16 10 16.8954 10 18C10 19.1046 10.8954 20 12 20Z" fill="#0078d4"/>
|
|
<path d="M12 8V16M4 10L10 16M20 10L14 16" stroke="#0078d4" stroke-width="2" stroke-linecap="round"/>
|
|
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite" />
|
|
</svg>`;
|
|
|
|
heroSection.appendChild(droneContainer);
|
|
|
|
// Add the floating animation
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes float {
|
|
0% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-15px) rotate(2deg); }
|
|
100% { transform: translateY(0px) rotate(0deg); }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
function enhanceServicesSection() {
|
|
const servicesSection = document.getElementById('services');
|
|
if (!servicesSection) return;
|
|
|
|
// Add subtle pattern background
|
|
servicesSection.style.backgroundImage = 'linear-gradient(120deg, #ffffff 0%, #f8f9fa 100%)';
|
|
servicesSection.style.position = 'relative';
|
|
|
|
// Add cleaning icons to service cards
|
|
const serviceCards = document.querySelectorAll('.service-card');
|
|
const icons = [
|
|
'<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 21L12 12M12 12L21 3M12 12L3 3M12 12L21 21" stroke="#0078d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
|
|
'<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="9" stroke="#0078d4" stroke-width="2"/><path d="M12 7V12L15 15" stroke="#0078d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
|
|
'<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3v18M3 12h18" stroke="#0078d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
|
|
];
|
|
|
|
serviceCards.forEach((card, index) => {
|
|
const icon = document.createElement('div');
|
|
icon.className = 'service-icon';
|
|
icon.style.marginBottom = '1.5rem';
|
|
icon.innerHTML = icons[index % icons.length];
|
|
card.insertBefore(icon, card.firstChild);
|
|
});
|
|
}
|
|
|
|
function applyBrightUIEnhancements() {
|
|
// Enhance buttons
|
|
const buttons = document.querySelectorAll('.btn-primary');
|
|
buttons.forEach(button => {
|
|
button.style.background = 'var(--primary-color)';
|
|
button.style.boxShadow = '0 4px 12px rgba(0, 120, 212, 0.2)';
|
|
button.style.border = 'none';
|
|
|
|
// Add hover effect
|
|
button.addEventListener('mouseenter', function() {
|
|
this.style.background = 'var(--gradient-primary)';
|
|
this.style.transform = 'translateY(-2px)';
|
|
});
|
|
|
|
button.addEventListener('mouseleave', function() {
|
|
this.style.background = 'var(--primary-color)';
|
|
this.style.transform = 'translateY(0)';
|
|
});
|
|
});
|
|
|
|
// Add roof-related decorative elements to sections
|
|
const sections = document.querySelectorAll('.section-container');
|
|
sections.forEach(section => {
|
|
// Add subtle top decoration
|
|
const decoration = document.createElement('div');
|
|
decoration.className = 'section-decoration';
|
|
decoration.style.height = '4px';
|
|
decoration.style.width = '100px';
|
|
decoration.style.background = 'var(--gradient-primary)';
|
|
decoration.style.borderRadius = '2px';
|
|
decoration.style.marginBottom = '2rem';
|
|
|
|
const title = section.querySelector('.section-title');
|
|
if (title) {
|
|
title.style.display = 'flex';
|
|
title.style.flexDirection = 'column';
|
|
title.style.alignItems = 'center';
|
|
title.style.marginBottom = '3rem';
|
|
title.appendChild(decoration);
|
|
}
|
|
});
|
|
}
|
|
})();
|