From 6cd33ac06d8e278b0e29cbffa5538e34e0442cc0 Mon Sep 17 00:00:00 2001
From: Aadhavan Srinivasan <aadhavan@twomorecents.org>
Date: Sun, 2 Mar 2025 20:07:09 -0500
Subject: [PATCH] Add noto fonts (unicode glyph support); use HTMX to replace
 translations on map; pointer-events for languageText to help select a state
 on the map

---
 index.html | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)
diff --git a/index.html b/index.html
index fe7a64c..1183acc 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,14 @@
 	<head>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
 		<title>Indian Translate</title>
 		<script src="https://d3js.org/d3.v7.min.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js" charset="utf-8"></script>
+		<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
 		<style>
 			body {
 				background-color: #f4f4f4;
@@ -35,12 +40,17 @@
 			}
 			.languageText {
 				visibility: hidden;
-				font-family: sans-serif;
+				font-family: "Noto Sans";
 				font-size:1.25em;
+				pointer-events: none;
 			}
 			.language:hover ~ .languageText {
 				visibility: visible;
 			}
+			.testClass:hover {
+				fill: red;
+				cursor: default;
+			}
 
 			.district {
 				stroke: white;
@@ -61,18 +71,19 @@
 	<body>
 		<main>
 		<section id="textStuff">
-		<h1>Indian Translate</h1>
-
-		<form class="translateForm" action="/submit" method="get">
-		<label for="query">Enter text to translate:</label>
-			<input type="text" name="query" id="query" required/>
-			<input type="submit" value="Translate"/>
+			<h1>Indian Translate</h1>
+			<form hx-get="/submit" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
+				<label for="query">Enter text to translate:</label>
+				<input type="text" name="query" id="query" required/>
+				<input type="submit" value="Translate"/>
+			</form>
 		</section>
 
 		<svg id = "indiaMap" width="1000" height="1000"></svg>
 		</main>
 
 		<script src="index.js"></script>
+		<script src="updateTranslations.js"></script>
 	</body>
 </html>
 
