`; // Open a new window and write the content const win = window.open(); if (win) { win.document.write(pageHTML); win.document.close(); } else { alert("Please allow pop-ups to view product details."); } } // Attach click handlers to product cards document.querySelectorAll('.card').forEach(card => { const productId = card.getAttribute('data-product'); card.addEventListener('click', (e) => { if (e.target.classList.contains('btn-p')) e.stopPropagation(); openProductPage(productId); }); const btn = card.querySelector('.btn-p'); if (btn) { btn.addEventListener('click', (e) => { e.stopPropagation(); openProductPage(productId); }); } }); // Platform modal handling (unchanged) const platformModal = document.getElementById('platformModal'); function closePlatformModal() { platformModal.style.display = 'none'; document.body.classList.remove('modal-open'); } document.getElementById('openPlatformModal')?.addEventListener('click', () => { platformModal.style.display = 'flex'; document.body.classList.add('modal-open'); }); document.getElementById('closePlatformModalBtn')?.addEventListener('click', closePlatformModal); platformModal?.addEventListener('click', (e) => { if (e.target === platformModal) closePlatformModal(); }); document.getElementById('platformModalContact')?.addEventListener('click', () => alert("Contact koningdrone: [email protected]")); // Other interactions (unchanged) document.getElementById('exploreBtn')?.addEventListener('click', () => document.getElementById('products').scrollIntoView({ behavior: 'smooth' })); document.getElementById('footerCta')?.addEventListener('click', () => alert("Contact koningdrone: [email protected]")); document.querySelector('.nav-cta')?.addEventListener('click', () => alert("Request a demo – a koningdrone specialist will respond within 24h.")); // Interactive Radar Canvas (unchanged) const canvas = document.getElementById('liveRadarCanvas'); const ctx = canvas.getContext('2d'); let width = 500, height = 500, angle = 0, targets = []; const targetCountSpan = document.getElementById('radarTargetCount'); const bearingSpan = document.getElementById('radarBearing'); function initTargets(){ targets=[]; for(let i=0;i<5;i++) targets.push({ x: Math.random()*0.7+0.15, y: Math.random()*0.7+0.15, radius: 4+Math.random()*3, angle: Math.random()*Math.PI*2, distance: 0.2+Math.random()*0.6, blink:0 }); } function updateTargets(){ for(let t of targets){ t.distance+=(Math.random()-0.5)*0.008; t.distance=Math.min(0.85,Math.max(0.1,t.distance)); t.angle+=(Math.random()-0.5)*0.03; t.x=Math.cos(t.angle)*t.distance*0.8+0.5; t.y=Math.sin(t.angle)*t.distance*0.8+0.5; t.blink=(t.blink+1)%40; } if(Math.random()<0.02 && targets.length<8) targets.push({ x:Math.random(), y:Math.random(), radius:3+Math.random()*4, angle:Math.random()*Math.PI*2, distance:0.2+Math.random()*0.6, blink:0 }); if(targets.length>8) targets.shift(); targetCountSpan.innerText=targets.length; let bearings=targets.map(t=>Math.floor(Math.atan2(t.y-0.5, t.x-0.5)*180/Math.PI+360)%360); if(bearings.length) bearingSpan.innerText=bearings[0]+"°"; } function drawRadar(){ if(!ctx) return; ctx.clearRect(0,0,width,height); ctx.fillStyle='#030c1c'; ctx.fillRect(0,0,width,height); const centerX=width/2, centerY=height/2, maxR=width*0.45; for(let r=0.25;r<=1;r+=0.25){ ctx.beginPath(); ctx.arc(centerX,centerY,maxR*r,0,Math.PI*2); ctx.strokeStyle=`rgba(45,126,255,${0.1+0.05*r})`; ctx.lineWidth=1; ctx.stroke(); } ctx.beginPath(); ctx.moveTo(centerX-maxR*0.95,centerY); ctx.lineTo(centerX+maxR*0.95,centerY); ctx.stroke(); ctx.beginPath(); ctx.moveTo(centerX,centerY-maxR*0.95); ctx.lineTo(centerX,centerY+maxR*0.95); ctx.stroke(); for(let t of targets){ let x=centerX+(t.x-0.5)*maxR*1.8; let y=centerY+(t.y-0.5)*maxR*1.8; let alpha=0.7+Math.sin(t.blink*0.5)*0.3; ctx.beginPath(); ctx.arc(x,y,t.radius,0,Math.PI*2); ctx.fillStyle=`rgba(255,80,100,${alpha})`; ctx.fill(); ctx.shadowBlur=8; ctx.shadowColor='#ff5e7c'; ctx.beginPath(); ctx.arc(x,y,t.radius*0.6,0,Math.PI*2); ctx.fillStyle='#fff'; ctx.fill(); ctx.shadowBlur=0; } let rad=angle*Math.PI/180; let sx=centerX+Math.cos(rad)*maxR*0.98; let sy=centerY+Math.sin(rad)*maxR*0.98; ctx.beginPath(); ctx.moveTo(centerX,centerY); ctx.lineTo(sx,sy); ctx.strokeStyle='#4ade80'; ctx.lineWidth=2.5; ctx.stroke(); let grad=ctx.createLinearGradient(centerX,centerY,sx,sy); grad.addColorStop(0,'rgba(74,222,128,0.2)'); grad.addColorStop(1,'rgba(74,222,128,0)'); ctx.beginPath(); ctx.moveTo(centerX,centerY); ctx.lineTo(sx,sy); ctx.lineTo(centerX+Math.cos(rad+0.3)*maxR*0.4, centerY+Math.sin(rad+0.3)*maxR*0.4); ctx.fillStyle=grad; ctx.fill(); angle=(angle+2.5)%360; requestAnimationFrame(drawRadar); } function resizeCanvas(){ const container=canvas.parentElement; const size=Math.min(container.clientWidth,480); canvas.style.width=`${size}px`; canvas.style.height=`${size}px`; canvas.width=500; canvas.height=500; width=500; height=500; } window.addEventListener('resize',resizeCanvas); resizeCanvas(); initTargets(); setInterval(updateTargets,800); drawRadar(); document.querySelectorAll('.accordion-question').forEach(btn=>{ btn.addEventListener('click',()=>{ btn.closest('.accordion-item').classList.toggle('active'); }); });