From 11a287e24298f1875dafd36e6862d4f5743256f1 Mon Sep 17 00:00:00 2001
From: Aadhavan Srinivasan <aadhavan@twomorecents.org>
Date: Mon, 24 Feb 2025 20:45:00 -0500
Subject: [PATCH] Styling changes; moved JS to separate file

---
 index.html | 94 +++++++++++-------------------------------------------
 1 file changed, 18 insertions(+), 76 deletions(-)
diff --git a/index.html b/index.html
index dc1a7d3..ac8da07 100644
--- a/index.html
+++ b/index.html
@@ -3,18 +3,20 @@
 	<head>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>GeoJSON Map with D3.js</title>
+		<title>Indian Translate</title>
 		<script src="https://d3js.org/d3.v7.min.js"></script>
 		<style>
 			body {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				height: 100vh;
 				background-color: #f4f4f4;
 			}
+			main {
+					display: flex;
+					align-items: flex-start;
+					justify-content: space-evenly;
+			}
+
 			svg {
-				border: 1px solid #ccc;
+				border: 1px solid;
 			}
 			.state {
 				stroke: black;
@@ -27,79 +29,19 @@
 		</style>
 	</head>
 	<body>
+		<main>
+		<section id="textStuff">
+		<h1>Indian Translate</h1>
 
-		<svg width="1000" height="600"></svg>
-		<script>
-			const svg = d3.select("svg")
-			const map1 = new Map();
-
-			const color1 = "#75d795"
-			const color2 = "#ff7c7c"
-			const color3 = "#ffe77c"
-			const color4 = "#7c9dff"
-
-			// Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel
-			const colorMap = {
-					"Tamil Nadu": color1,
-					"Kerala": color2,
-					"Karnataka": color3,
-					"Andhra Pradesh": color4,
-					"Maharashtra": color4,
-					"Goa": color3,
-					"Telangana": color2,
-					"Odisha": color3,
-					"Gujarat": color1,
-					"Rajasthan": color3,
-					"Chhattisgarh": color1,
-					"Jharkhand": color2,
-					"West Bengal": color1,
-					"Assam": color2,
-					"Meghalaya": color3,
-					"Tripura": color4,
-					"Mizoram": color1,
-					"Manipur": color3,
-					"Nagaland": color1,
-					"Arunachal Pradesh": color4,
-					"Sikkim": color2,
-					"Bihar": color3,
-					"Madhya Pradesh": color2,
-					"Uttar Pradesh": color4,
-					"Uttarakhand": color2,
-					"Haryana": color1,
-					"Punjab": color4,
-					"Himachal Pradesh": color3,
-					"Ladakh": color1,
-					"Jammu and Kashmir": color2,
-			}
-
-			const colors9 = ["#75d795", "#EFDFD8", "#D5F6FB", "#E5ECF8", "#F0EBD8", "#F7DFC2", "#B4D9EF", "#F8C57C", "#A4D8D8"]
-
-			function drawMap(world) {
-				const projection = d3.geoMercator().fitSize([1000,600], world)
-				const path = d3.geoPath().projection(projection);
-
-				// Draw the map
-				svg.selectAll("path")
-					.data(world.features)
-					.enter()
-					.append("path")
-					.attr("d", path)
-					.attr("class", "state")
-					.attr("fill", d => colorMap[d.properties.name])
-					.append("title") // Tooltip
-					.text(d => d.properties.name)
-					.each(function(d) {
-						map1.set(d.properties.name, d3.geoCentroid(d));
-					})
-
-			}
-
-			// Load GeoJSON file
-			d3.json("india.json").then(drawMap)
+		<label for="toTranslate">Enter text to translate:
+			<input type="text" name="toTranslate"/>
+		</label>
+		</section>
 
-			console.log(map1)
-		</script>
+		<svg width="800" height="600"></svg>
+		</main>
 
+		<script src="index.js"></script>
 	</body>
 </html>
 
