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
87 lines
3.8 KiB
JavaScript
87 lines
3.8 KiB
JavaScript
/**
|
|
* Enhanced Styling Controller for Balancer.fi-inspired Theme
|
|
*/
|
|
(function() {
|
|
// Run on page load and after small delay to ensure all elements are available
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
enhanceCosmicStyles();
|
|
|
|
// Apply once more after a slight delay to handle dynamically loaded elements
|
|
setTimeout(enhanceCosmicStyles, 500);
|
|
});
|
|
|
|
function enhanceCosmicStyles() {
|
|
// Add subtle animations to cards
|
|
const cards = document.querySelectorAll('.service-card, .step-card, .contact-method, .gallery-item');
|
|
cards.forEach(function(card) {
|
|
card.style.transition = 'all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)';
|
|
|
|
// Add hover effects if not already present
|
|
card.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-10px)';
|
|
this.style.boxShadow = '0 15px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 194, 255, 0.5)';
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0)';
|
|
this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.2)';
|
|
});
|
|
});
|
|
|
|
// Enhance form inputs for cosmic theme
|
|
const formElements = document.querySelectorAll('input:not(#chatInput), textarea, select');
|
|
formElements.forEach(function(element) {
|
|
element.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
|
|
element.style.color = 'var(--text-light)';
|
|
element.style.border = '1px solid rgba(255, 255, 255, 0.1)';
|
|
element.style.borderRadius = '6px';
|
|
element.style.padding = '1rem';
|
|
|
|
// Add focus effects
|
|
element.addEventListener('focus', function() {
|
|
this.style.borderColor = 'var(--accent-color)';
|
|
this.style.boxShadow = '0 0 0 2px rgba(0, 194, 255, 0.2)';
|
|
});
|
|
|
|
element.addEventListener('blur', function() {
|
|
this.style.borderColor = 'rgba(255, 255, 255, 0.1)';
|
|
this.style.boxShadow = 'none';
|
|
});
|
|
});
|
|
|
|
// Enhance buttons
|
|
const buttons = document.querySelectorAll('button[type="submit"], .btn-primary, .cta-button');
|
|
buttons.forEach(function(button) {
|
|
// Only apply if not already styled
|
|
if (!button.hasAttribute('data-cosmic-styled')) {
|
|
button.setAttribute('data-cosmic-styled', 'true');
|
|
|
|
// Apply gradient background if not already set
|
|
if (!button.style.background.includes('gradient')) {
|
|
button.style.background = 'linear-gradient(90deg, #5846f9, #00c2ff)';
|
|
}
|
|
|
|
button.style.color = 'white';
|
|
button.style.border = 'none';
|
|
button.style.borderRadius = '6px';
|
|
button.style.fontWeight = '600';
|
|
button.style.padding = '0.8rem 1.5rem';
|
|
button.style.cursor = 'pointer';
|
|
button.style.transition = 'all 0.3s ease';
|
|
button.style.boxShadow = '0 0 15px rgba(0, 194, 255, 0.5)';
|
|
|
|
// Add hover effects
|
|
button.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-2px)';
|
|
this.style.boxShadow = '0 0 25px rgba(0, 194, 255, 0.7)';
|
|
});
|
|
|
|
button.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0)';
|
|
this.style.boxShadow = '0 0 15px rgba(0, 194, 255, 0.5)';
|
|
});
|
|
}
|
|
});
|
|
}
|
|
})();
|