Initial commit: Luftglanz drone website with integrated AI chat assistant
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
This commit is contained in:
Luftglanz
154
js/drone-animation.js
Normal file
154
js/drone-animation.js
Normal file
@@ -0,0 +1,154 @@
|
||||
/**
|
||||
* Drone Animation Controller
|
||||
* Creates floating drone elements with cosmic glow effects
|
||||
*/
|
||||
(function() {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Only run on the homepage
|
||||
if (window.location.pathname.endsWith('index.html') || window.location.pathname.endsWith('/')) {
|
||||
createDroneElements();
|
||||
}
|
||||
});
|
||||
|
||||
function createDroneElements() {
|
||||
const heroSection = document.querySelector('.hero');
|
||||
const servicesSection = document.getElementById('services');
|
||||
|
||||
if (heroSection) {
|
||||
// Create a container for the animated elements
|
||||
const animationContainer = document.createElement('div');
|
||||
animationContainer.className = 'animation-container';
|
||||
animationContainer.style.position = 'absolute';
|
||||
animationContainer.style.top = '0';
|
||||
animationContainer.style.left = '0';
|
||||
animationContainer.style.width = '100%';
|
||||
animationContainer.style.height = '100%';
|
||||
animationContainer.style.overflow = 'hidden';
|
||||
animationContainer.style.pointerEvents = 'none';
|
||||
animationContainer.style.zIndex = '1';
|
||||
heroSection.appendChild(animationContainer);
|
||||
|
||||
// Create floating drone elements
|
||||
createFloatingDrone(animationContainer, 'right', '15%', '20%');
|
||||
createFloatingDrone(animationContainer, 'left', '70%', '60%');
|
||||
|
||||
// Create floating particles
|
||||
for (let i = 0; i < 15; i++) {
|
||||
createGlowingParticle(animationContainer);
|
||||
}
|
||||
}
|
||||
|
||||
if (servicesSection) {
|
||||
// Create subtle background animations for services section
|
||||
const servicesBg = document.createElement('div');
|
||||
servicesBg.className = 'services-bg';
|
||||
servicesBg.style.position = 'absolute';
|
||||
servicesBg.style.top = '0';
|
||||
servicesBg.style.left = '0';
|
||||
servicesBg.style.width = '100%';
|
||||
servicesBg.style.height = '100%';
|
||||
servicesBg.style.overflow = 'hidden';
|
||||
servicesBg.style.pointerEvents = 'none';
|
||||
servicesBg.style.zIndex = '0';
|
||||
servicesSection.style.position = 'relative';
|
||||
servicesSection.insertBefore(servicesBg, servicesSection.firstChild);
|
||||
|
||||
// Create subtle floating particles
|
||||
for (let i = 0; i < 10; i++) {
|
||||
createGlowingParticle(servicesBg, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createFloatingDrone(container, direction, startX, startY) {
|
||||
const drone = document.createElement('div');
|
||||
drone.className = 'floating-drone';
|
||||
drone.style.position = 'absolute';
|
||||
drone.style.width = '80px';
|
||||
drone.style.height = '80px';
|
||||
drone.style.borderRadius = '50%';
|
||||
drone.style.background = 'radial-gradient(circle at center, rgba(88, 70, 249, 0.7), rgba(0, 194, 255, 0.4))';
|
||||
drone.style.boxShadow = '0 0 30px rgba(0, 194, 255, 0.6)';
|
||||
drone.style.left = startX;
|
||||
drone.style.top = startY;
|
||||
drone.style.filter = 'blur(5px)';
|
||||
|
||||
// Create propeller effects
|
||||
const propeller = document.createElement('div');
|
||||
propeller.className = 'propeller';
|
||||
propeller.style.position = 'absolute';
|
||||
propeller.style.width = '100px';
|
||||
propeller.style.height = '100px';
|
||||
propeller.style.left = '-10px';
|
||||
propeller.style.top = '-10px';
|
||||
propeller.style.borderRadius = '50%';
|
||||
propeller.style.border = '2px solid rgba(255, 255, 255, 0.2)';
|
||||
propeller.style.animation = 'spin 2s linear infinite';
|
||||
drone.appendChild(propeller);
|
||||
|
||||
// Add animation properties
|
||||
drone.style.animation = `float-${direction} 15s ease-in-out infinite`;
|
||||
container.appendChild(drone);
|
||||
|
||||
// Add keyframes for floating animation
|
||||
const styleSheet = document.createElement('style');
|
||||
styleSheet.type = 'text/css';
|
||||
styleSheet.innerHTML = `
|
||||
@keyframes float-${direction} {
|
||||
0% { transform: translate(0, 0) rotate(0deg); }
|
||||
25% { transform: translate(${direction === 'left' ? '-' : ''}80px, 40px) rotate(${direction === 'left' ? '-' : ''}5deg); }
|
||||
50% { transform: translate(${direction === 'left' ? '-' : ''}60px, -30px) rotate(${direction === 'left' ? '-' : ''}10deg); }
|
||||
75% { transform: translate(${direction === 'left' ? '-' : ''}100px, 50px) rotate(${direction === 'left' ? '-' : ''}3deg); }
|
||||
100% { transform: translate(0, 0) rotate(0deg); }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(styleSheet);
|
||||
}
|
||||
|
||||
function createGlowingParticle(container, subtle = false) {
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'glowing-particle';
|
||||
|
||||
// Set particle style
|
||||
const size = subtle ? Math.random() * 5 + 2 : Math.random() * 10 + 5;
|
||||
const opacity = subtle ? Math.random() * 0.3 + 0.1 : Math.random() * 0.5 + 0.2;
|
||||
|
||||
particle.style.position = 'absolute';
|
||||
particle.style.width = `${size}px`;
|
||||
particle.style.height = `${size}px`;
|
||||
particle.style.borderRadius = '50%';
|
||||
particle.style.background = 'radial-gradient(circle at center, rgba(0, 194, 255, 0.8), rgba(88, 70, 249, 0.4))';
|
||||
particle.style.boxShadow = `0 0 ${size * 2}px rgba(0, 194, 255, ${opacity})`;
|
||||
|
||||
// Random position
|
||||
particle.style.left = `${Math.random() * 100}%`;
|
||||
particle.style.top = `${Math.random() * 100}%`;
|
||||
|
||||
// Add animation with random duration
|
||||
const duration = Math.random() * 20 + 10;
|
||||
particle.style.animation = `float-particle ${duration}s ease-in-out infinite`;
|
||||
container.appendChild(particle);
|
||||
|
||||
// Add keyframes for particle animation if not already added
|
||||
if (!document.querySelector('style[data-animation="particle-float"]')) {
|
||||
const styleSheet = document.createElement('style');
|
||||
styleSheet.type = 'text/css';
|
||||
styleSheet.setAttribute('data-animation', 'particle-float');
|
||||
styleSheet.innerHTML = `
|
||||
@keyframes float-particle {
|
||||
0% { transform: translate(0, 0); }
|
||||
25% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); }
|
||||
50% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); }
|
||||
75% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); }
|
||||
100% { transform: translate(0, 0); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(styleSheet);
|
||||
}
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user