add site-newdesign configuration that generates the new design

public_html/js/index.js

@@ -0,0 +1,83 @@
+window.onload = () => {
+
+	/* scale benner image map co-ordinates */
+	
+	const image = document.querySelector('.banner-image');
+	const areas = document.querySelectorAll('.bannermap > area');	
+
+	const max_width = 1600;
+	const image_height_ratio = 0.35;
+
+	const image_map_coords = [
+		[108,187,240,343],
+		[246,187,359,343],
+		[363,187,492,343]
+	];
+
+	function calcTransform(prop) {		
+		let scale, offset;
+		prop.original_aspect = prop.original_width / prop.original_height;
+		prop.scaled_width = prop.image_height * prop.original_aspect;
+		prop.image_aspect = prop.image_width / prop.image_height;
+		if (prop.scaled_width < prop.image_width) {
+			prop.scaled_height = prop.image_height * prop.image_aspect / prop.original_aspect;
+			offset = (prop.image_height - prop.scaled_height) / 2;
+			scale = prop.scaled_height / prop.original_height;
+		} else {
+			offset = 0;
+			scale = prop.image_height / prop.original_height;
+		}
+		return [scale, offset];
+	}
+
+	function setCoords() {		
+		areas.forEach((area, index) => {
+			const [x1, y1, x2, y2] = image_map_coords[index];			
+			let prop = {
+				screen_width: (window.innerWidth),
+				contained_width: (window.innerWidth <= max_width) ? window.innerWidth : max_width,
+				screen_height: window.innerHeight,
+				image_width: image.offsetWidth,
+				image_height: image.offsetHeight,
+				original_width: image.naturalWidth,
+				original_height: image.naturalHeight
+			};
+			let [ scale, offset ] = calcTransform(prop);
+			const scaled_coords = `${x1*scale}, ${y1*scale + offset}, ${x2*scale}, ${y2*scale + offset}`;
+			area.setAttribute('coords', scaled_coords);
+		});
+	}
+	
+	new ResizeObserver(setCoords).observe(image);
+	
+	/* hamburger menu functionality */
+	const hamburger = document.getElementById('hamburger-menu');
+	const menuLinks = document.getElementById('menu-links');
+	const menuIcon = hamburger?.querySelector('.menu-icon');
+	const closeIcon = hamburger?.querySelector('.close-icon');
+	
+	if (hamburger && menuLinks && menuIcon && closeIcon) {
+		hamburger.addEventListener('click', () => {
+			const isActive = menuLinks.classList.contains('active');
+			
+			menuLinks.classList.toggle('active');
+			
+			if (isActive) {
+				menuIcon.style.display = 'block';
+				closeIcon.style.display = 'none';
+			} else {
+				menuIcon.style.display = 'none';
+				closeIcon.style.display = 'block';
+			}
+		});
+		
+		// Close menu when clicking on a link
+		menuLinks.addEventListener('click', (e) => {
+			if (e.target.tagName === 'A') {
+				menuLinks.classList.remove('active');
+				menuIcon.style.display = 'block';
+				closeIcon.style.display = 'none';
+			}
+		});
+	}
+};