<!DOCTYPE html> <html lang="en"> <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; } main { display: flex; align-items: flex-start; justify-content: space-evenly; } svg { border: 1px solid; padding: 2em; } .state { stroke: black; fill: none; stroke-width: 0.5; } .language { stroke: red; /* There has to be a fill, even if it's transparent, to allow hover events to be recognized on the inside. */ /* fill: black; fill-opacity: 0.0; */ fill-opacity: 0.8; stroke-width: 1; } .languageText, .romanizationText { visibility: hidden; font-family: "Noto Sans"; font-size:1.25em; pointer-events: none; } .language:hover ~ .languageText { visibility: visible; } .language:hover ~ .romanizationText { visibility: visible; } .testClass:hover { fill: red; cursor: default; } .district { stroke: white; stroke-width: 0.25; transition: fill 0.3s; fill: none; pointer-events: none; } .language:hover { stroke-width: 2; } .districtText { visibility: hidden; } /* .district:hover ~ .districtText { visibility: visible; }*/ .loading-indicator { display: none; } .loading, .htmx-request.loading-indicator /* While request is being made */ { display: inline; } /* Dim all other states */ /* Kinda wild that you can do this in plain CSS */ #indiaMap:has(.language:hover) .language:not(:hover) { fill-opacity: 0.5; transition: fill-opacity 0.3s; } #indiaMap .language:hover { fill-opacity: 1; transition: fill-opacity 0.3s; } </style> </head> <body> <main> <section id="textStuff"> <h1>Indian Translate</h1> <form hx-get="/submit" hx-swap=none hx-indicator="#loading-screen" 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> <progress id="loading-screen" class="loading-indicator"></progress> </section> <svg id = "indiaMap" width="1200" height="1200"></svg> </main> <script type="text/javascript" src="index.js"></script> <script type="text/javascript" src="updateTranslations.js"></script> </body> </html>