//Animated Hosting Banner Component with D3.js function createAnimatedHostingBanner(){const bannerId='hosting-banner-'+Date.now();const bannerHTML=``;const styles=``;return styles+bannerHTML;}function closeAnimatedBanner(bannerId){const banner=document.getElementById(bannerId);if (banner){banner.style.animation='bannerSlideDown 0.5s ease-in forwards';setTimeout(()=>{banner.classList.add('hidden');localStorage.setItem('hostingBannerClosed','true');localStorage.setItem('hostingBannerClosedDate',new Date().toISOString());},500);}}const slideDownStyle=document.createElement('style');slideDownStyle.textContent=` @keyframes bannerSlideDown{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(50px);}}`;document.head.appendChild(slideDownStyle);function initializeBannerAnimations(bannerId){if (typeof d3==='undefined'){console.log('D3.js not loaded,skipping animations');return;}const svg=d3.select(`#banner-svg-${bannerId}`);const width=1200;const height=200;svg.attr('viewBox',`0 0 ${width}${height}`) .attr('preserveAspectRatio','xMidYMid slice');const particleCount=30;const particles=Array.from({length:particleCount},(_,i)=>({id:i,x:Math.random()*width,y:Math.random()*height,r:Math.random()*3+1,dx:(Math.random()-0.5)*2,dy:(Math.random()-0.5)*2,opacity:Math.random()*0.5+0.2}));const defs=svg.append('defs');const gradient=defs.append('linearGradient') .attr('id',`particle-gradient-${bannerId}`) .attr('x1','0%') .attr('y1','0%') .attr('x2','100%') .attr('y2','100%');gradient.append('stop') .attr('offset','0%') .style('stop-color','#FF6B35') .style('stop-opacity',0.8);gradient.append('stop') .attr('offset','100%') .style('stop-color','#FF8A50') .style('stop-opacity',0.4);const particleElements=svg.selectAll('circle') .data(particles) .enter() .append('circle') .attr('cx',d=>d.x) .attr('cy',d=>d.y) .attr('r',d=>d.r) .attr('fill',`url(#particle-gradient-${bannerId})`) .attr('opacity',d=>d.opacity);function animateParticles(){particles.forEach(p=>{p.x+=p.dx;p.y+=p.dy;if (p.x<0) p.x=width;if (p.x>width) p.x=0;if (p.y<0) p.y=height;if (p.y>height) p.y=0;});particleElements .data(particles) .attr('cx',d=>d.x) .attr('cy',d=>d.y);requestAnimationFrame(animateParticles);}animateParticles();const connectionThreshold=100;function updateConnections(){svg.selectAll('line').remove();for (let i=0;i{const bannerId='hosting-banner-'+Date.now();if (shouldShowAnimatedBanner()){initializeBannerAnimations(bannerId);}},100);});}else{setTimeout(()=>{const bannerId='hosting-banner-'+Date.now();if (shouldShowAnimatedBanner()){initializeBannerAnimations(bannerId);}},100);}}