EncodeTheCode/cool_generator.htm

## cool_generator.htm
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Europe Map with Image Map</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
      }
      img {z-index:0;position:absolute;max-width:100%;height:auto;}
      #svg-overlay{z-index:-0 !important;position:absolute;}
      area {
          cursor: pointer;
      }

      /* Hover effect for the areas */
      area:hover {
          outline: 2px solid yellow;
      }

      #map-container {
        position: absolute;
        background-image:url('https://upload.wikimedia.org/wikipedia/commons/8/81/Europe_countries_map_2.png');
        background-repeat:no-repeat;
        background-size:cover;
      }
      canvas {
        display: block;
        border: 1px solid #ccc;
        cursor: crosshair;
        position:relative;
      }
      #controls {
        position: absolute;
        top: 10px;
        left: 10px;
        background-color: white;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }
      button {
        margin: 5px 0;
        display: block;
        width: 100%;
        padding: 8px;
        border: none;
        background-color: #007bff;
        color: white;
        font-size: 16px;
        cursor: pointer;
        border-radius: 3px;
      }
      button:hover {
        background-color: #0056b3;
      }
    </style>
</head>
<body>
    <div id="map-container">
        <canvas id="map-canvas" width="800" height="600" usemap="#europe-map" alt="Map of Europe"></canvas>
        <div id="controls">
            <button id="add-area-btn">Add Area</button>
            <button id="save-btn">Save Areas</button>
            <button id="clear-btn">Clear All</button>
        </div>
    </div>

    <!-- SVG overlay for drawing lines -->
    <svg id="svg-overlay"></svg>

    <map name="europe-map" id="map-areas">
        <!-- No static <area> elements here -->
    </map>

    <script>
document.addEventListener('DOMContentLoaded', function() {
    const map = document.getElementById('map-canvas');
    const mapAreas = document.getElementById('map-areas');
    const svgOverlay = document.getElementById('svg-overlay');

    // Define the areas data with names and coordinates
    const areasData = [
        { name: "Portugal", coords: "70,240,90,230,80,220,60,230" },
        { name: "Spain", coords: "120,220,140,210,150,230,130,240" },
        { name: "France", coords: "180,190,200,200,220,180,200,170" },
        { name: "Monaco", coords: "240,190,250,200,260,190,250,180" },
        { name: "Italy", coords: "270,230,290,240,300,230,290,220" },
        { name: "Switzerland", coords: "260,170,280,160,290,180,270,180" },
        { name: "Germany", coords: "280,130,300,120,310,140,290,150" },
        { name: "Luxembourg", coords: "290,150,310,140,320,150,310,160" },
        { name: "Belgium", coords: "280,160,300,150,310,160,300,170" },
        { name: "Netherlands", coords: "300,140,320,130,330,140,320,150" },
        { name: "Austria", coords: "310,180,330,190,340,180,330,170" },
        { name: "Liechtenstein", coords: "320,180,330,170,340,180,330,190" },
        { name: "Slovenia", coords: "330,210,350,220,360,210,350,200" },
        { name: "Croatia", coords: "350,200,370,210,380,200,370,190" },
        { name: "Bosnia and Herzegovina", coords: "360,190,380,200,390,190,380,180" },
        { name: "Montenegro", coords: "380,190,390,200,400,190,390,180" },
        { name: "Albania", coords: "390,180,400,190,410,180,400,170" },
        { name: "North Macedonia", coords: "400,170,410,180,420,170,410,160" },
        { name: "Kosovo", coords: "410,160,420,170,430,160,420,150" },
        { name: "Serbia", coords: "390,160,400,170,410,160,400,150" },
        { name: "Hungary", coords: "330,160,350,150,360,170,340,180" },
        { name: "Slovakia", coords: "330,170,350,160,360,180,340,190" },
        { name: "Poland", coords: "310,120,330,110,340,130,320,140" },
        { name: "Czech Republic", coords: "300,140,320,130,330,150,310,160" },
        { name: "Estonia", coords: "390,50,410,60,420,50,410,40" },
        { name: "Latvia", coords: "370,60,390,70,400,60,390,50" },
        { name: "Lithuania", coords: "360,70,380,80,390,70,370,60" },
        { name: "Sweden", coords: "131,11,131,12,131,13,131,14,131,15,131,16,131,17,131,18,131,19,131,20,131,21,131,22,131,23,131,24,131,25,131,26,131,27,131,28,132,28,133,28,134,28,135,28,136,28,137,28,138,28,139,28,140,28,141,28,142,28,143,28,144,28,144,27,144,26,144,25,144,24,144,23,144,22,144,21,144,20,144,19,144,18,144,17,144,16,144,15,144,14,144,13,144,12,144,11,143,11,142,11,141,11,140,11,139,11,138,11,137,11,136,11,135,11,134,11,133,11,132,11" },
        { name: "Finland", coords: "170,20,190,30,200,10,180,0" },
        { name: "Norway", coords: "50,40,70,50,80,30,60,20" },
        { name: "Denmark", coords: "120,70,140,80,150,60,130,50" },
        { name: "Iceland", coords: "30,60,50,70,60,50,40,40" }
    ];

    // Function to create <area> elements dynamically
    areasData.forEach(areaData => {
        const areaElement = document.createElement('area');
        areaElement.setAttribute('shape', 'poly');
        areaElement.setAttribute('coords', areaData.coords);
        areaElement.setAttribute('href', '#');
        areaElement.setAttribute('title', areaData.name);
        areaElement.setAttribute('alt', areaData.name);
        mapAreas.appendChild(areaElement);

        // Parse coordinates
        const coords = areaData.coords.split(',').map(Number);

        // Draw lines between each coordinate point
        for (let i = 0; i < coords.length; i += 2) {
            const x = coords[i];
            const y = coords[i + 1];

            // Draw line to next point
            if (i + 2 < coords.length) {
                const nextX = coords[i + 2];
                const nextY = coords[i + 3];

                drawLine(x, y, nextX, nextY, '#000'); // Replace '#000' with desired line color
            }
        }
    });

    areasData.forEach(areaData => {
        console.log(areaData.name); // Output each country name to console (you can replace this with any other logic you need)
    });

    // Function to draw a line between two points
    function drawLine(x1, y1, x2, y2, color) {
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', x1);
        line.setAttribute('y1', y1);
        line.setAttribute('x2', x2);
        line.setAttribute('y2', y2);
        line.setAttribute('stroke', color);
        line.setAttribute('stroke-width', '2');
        svgOverlay.appendChild(line);
    }
});


        // Optional JavaScript for interactivity
        document.querySelectorAll('area').forEach(area => {
            area.addEventListener('click', (e) => {
                e.preventDefault();
                alert(areaData.name);
            });
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Europe Map with Image Map</title>
	<style>
	body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-color: #f0f0f0;
	font-family: Arial, sans-serif;
	}
	img {z-index:0;position:absolute;max-width:100%;height:auto;}
	#svg-overlay{z-index:-0 !important;position:absolute;}
	area {
	cursor: pointer;
	}

	/* Hover effect for the areas */
	area:hover {
	outline: 2px solid yellow;
	}

	#map-container {
	position: absolute;
	background-image:url('https://upload.wikimedia.org/wikipedia/commons/8/81/Europe_countries_map_2.png');
	background-repeat:no-repeat;
	background-size:cover;
	}
	canvas {
	display: block;
	border: 1px solid #ccc;
	cursor: crosshair;
	position:relative;
	}
	#controls {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: white;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}
	button {
	margin: 5px 0;
	display: block;
	width: 100%;
	padding: 8px;
	border: none;
	background-color: #007bff;
	color: white;
	font-size: 16px;
	cursor: pointer;
	border-radius: 3px;
	}
	button:hover {
	background-color: #0056b3;
	}
	</style>
	</head>
	<body>
	<div id="map-container">
	<canvas id="map-canvas" width="800" height="600" usemap="#europe-map" alt="Map of Europe"></canvas>
	<div id="controls">
	<button id="add-area-btn">Add Area</button>
	<button id="save-btn">Save Areas</button>
	<button id="clear-btn">Clear All</button>
	</div>
	</div>

	<!-- SVG overlay for drawing lines -->
	<svg id="svg-overlay"></svg>

	<map name="europe-map" id="map-areas">
	<!-- No static <area> elements here -->
	</map>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	const map = document.getElementById('map-canvas');
	const mapAreas = document.getElementById('map-areas');
	const svgOverlay = document.getElementById('svg-overlay');

	// Define the areas data with names and coordinates
	const areasData = [
	{ name: "Portugal", coords: "70,240,90,230,80,220,60,230" },
	{ name: "Spain", coords: "120,220,140,210,150,230,130,240" },
	{ name: "France", coords: "180,190,200,200,220,180,200,170" },
	{ name: "Monaco", coords: "240,190,250,200,260,190,250,180" },
	{ name: "Italy", coords: "270,230,290,240,300,230,290,220" },
	{ name: "Switzerland", coords: "260,170,280,160,290,180,270,180" },
	{ name: "Germany", coords: "280,130,300,120,310,140,290,150" },
	{ name: "Luxembourg", coords: "290,150,310,140,320,150,310,160" },
	{ name: "Belgium", coords: "280,160,300,150,310,160,300,170" },
	{ name: "Netherlands", coords: "300,140,320,130,330,140,320,150" },
	{ name: "Austria", coords: "310,180,330,190,340,180,330,170" },
	{ name: "Liechtenstein", coords: "320,180,330,170,340,180,330,190" },
	{ name: "Slovenia", coords: "330,210,350,220,360,210,350,200" },
	{ name: "Croatia", coords: "350,200,370,210,380,200,370,190" },
	{ name: "Bosnia and Herzegovina", coords: "360,190,380,200,390,190,380,180" },
	{ name: "Montenegro", coords: "380,190,390,200,400,190,390,180" },
	{ name: "Albania", coords: "390,180,400,190,410,180,400,170" },
	{ name: "North Macedonia", coords: "400,170,410,180,420,170,410,160" },
	{ name: "Kosovo", coords: "410,160,420,170,430,160,420,150" },
	{ name: "Serbia", coords: "390,160,400,170,410,160,400,150" },
	{ name: "Hungary", coords: "330,160,350,150,360,170,340,180" },
	{ name: "Slovakia", coords: "330,170,350,160,360,180,340,190" },
	{ name: "Poland", coords: "310,120,330,110,340,130,320,140" },
	{ name: "Czech Republic", coords: "300,140,320,130,330,150,310,160" },
	{ name: "Estonia", coords: "390,50,410,60,420,50,410,40" },
	{ name: "Latvia", coords: "370,60,390,70,400,60,390,50" },
	{ name: "Lithuania", coords: "360,70,380,80,390,70,370,60" },
	{ name: "Sweden", coords: "131,11,131,12,131,13,131,14,131,15,131,16,131,17,131,18,131,19,131,20,131,21,131,22,131,23,131,24,131,25,131,26,131,27,131,28,132,28,133,28,134,28,135,28,136,28,137,28,138,28,139,28,140,28,141,28,142,28,143,28,144,28,144,27,144,26,144,25,144,24,144,23,144,22,144,21,144,20,144,19,144,18,144,17,144,16,144,15,144,14,144,13,144,12,144,11,143,11,142,11,141,11,140,11,139,11,138,11,137,11,136,11,135,11,134,11,133,11,132,11" },
	{ name: "Finland", coords: "170,20,190,30,200,10,180,0" },
	{ name: "Norway", coords: "50,40,70,50,80,30,60,20" },
	{ name: "Denmark", coords: "120,70,140,80,150,60,130,50" },
	{ name: "Iceland", coords: "30,60,50,70,60,50,40,40" }
	];

	// Function to create <area> elements dynamically
	areasData.forEach(areaData => {
	const areaElement = document.createElement('area');
	areaElement.setAttribute('shape', 'poly');
	areaElement.setAttribute('coords', areaData.coords);
	areaElement.setAttribute('href', '#');
	areaElement.setAttribute('title', areaData.name);
	areaElement.setAttribute('alt', areaData.name);
	mapAreas.appendChild(areaElement);

	// Parse coordinates
	const coords = areaData.coords.split(',').map(Number);

	// Draw lines between each coordinate point
	for (let i = 0; i < coords.length; i += 2) {
	const x = coords[i];
	const y = coords[i + 1];

	// Draw line to next point
	if (i + 2 < coords.length) {
	const nextX = coords[i + 2];
	const nextY = coords[i + 3];

	drawLine(x, y, nextX, nextY, '#000'); // Replace '#000' with desired line color
	}
	}
	});

	areasData.forEach(areaData => {
	console.log(areaData.name); // Output each country name to console (you can replace this with any other logic you need)
	});

	// Function to draw a line between two points
	function drawLine(x1, y1, x2, y2, color) {
	const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
	line.setAttribute('x1', x1);
	line.setAttribute('y1', y1);
	line.setAttribute('x2', x2);
	line.setAttribute('y2', y2);
	line.setAttribute('stroke', color);
	line.setAttribute('stroke-width', '2');
	svgOverlay.appendChild(line);
	}
	});


	// Optional JavaScript for interactivity
	document.querySelectorAll('area').forEach(area => {
	area.addEventListener('click', (e) => {
	e.preventDefault();
	alert(areaData.name);
	});
	});
	</script>
	</body>
	</html>