${titleHTML}

${panelTitle}

${descriptionHTML} ${buttonHTML}

`; }).join(''); const html = `

${headingHTML} ${textHTML}

${stakeholderItemsHTML}

`; document.querySelector('#strategic-plan-section')?.insertAdjacentHTML('afterbegin', html); }; /** * Draws SVG connector lines between the center circle and stakeholder circles. */ const drawConnectors = () => { document.querySelectorAll('.diagram-container').forEach(container => { const centerCircle = container.querySelector('.center-circle'); if (!centerCircle) return; const stakeholderCircles = container.querySelectorAll('.stakeholder-circle'); container.querySelectorAll('.connector-svg').forEach(conn => conn.remove()); const centerRect = centerCircle.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); const centerX = centerRect.left + centerRect.width / 2 - containerRect.left; const centerY = centerRect.top + centerRect.height / 2 - containerRect.top; const svgNS = "http://www.w3.org/2000/svg"; const svgContainer = document.createElementNS(svgNS, "svg"); svgContainer.classList.add('connector-svg'); svgContainer.setAttribute('width', containerRect.width); svgContainer.setAttribute('height', containerRect.height); container.appendChild(svgContainer); stakeholderCircles.forEach(circle => { const circleRect = circle.getBoundingClientRect(); const circleX = circleRect.left + circleRect.width / 2 - containerRect.left; const circleY = circleRect.top + circleRect.height / 2 - containerRect.top; const line = document.createElementNS(svgNS, "line"); line.setAttribute('x1', centerX); line.setAttribute('y1', centerY); line.setAttribute('x2', circleX); line.setAttribute('y2', circleY); line.setAttribute('stroke', '#cf4545'); line.setAttribute('stroke-width', '3'); svgContainer.appendChild(line); }); }); }; initStrategicPlan();

Children's Day Happening Soon!