@ -10,7 +10,7 @@
< 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 = "anonymou s"> < / script >
< script src = " ./htmx.min.j s"> < / script >
< style >
body {
background-color: #f4f4f4;
@ -24,7 +24,16 @@
svg {
border: 1px solid;
padding: 2em;
visibility: hidden;
opacity: 0;
transition: opacity 1s, visibility 2s;
}
svg.show {
visibility: visible;
opacity: 1;
}
h1 {
margin-block: 0.67em;
font-size: 2em;
@ -66,11 +75,6 @@
visibility: visible;
}
.testClass:hover {
fill: red;
cursor: default;
}
.district {
stroke: white;
stroke-width: 0.25;
@ -108,21 +112,93 @@
fill-opacity: 1;
transition: fill-opacity 0.3s;
}
/* Position map load spinner in the middle of the SVG */
.svgContainer {
position: relative;
display: inline-block;
}
.svgContainer .mapLoadSpinner {
position: absolute;
top: 40%;
left: 40%;
}
/* Credit to https://lukehaas.me/projects/css-loaders/ */
.mapLoadSpinner,
.mapLoadSpinner:after {
border-radius: 50%;
width: 10em;
height: 10em;
transition: opacity 1s, visibility 2s;
}
.mapLoadSpinner.hide {
opacity: 0;
visibility: hidden;
}
.mapLoadSpinner {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255,158,83, 0.2);
border-right: 1.1em solid rgba(255,158,83, 0.2);
border-bottom: 1.1em solid rgba(255,158,83, 0.2);
border-left: 1.1em solid #ff9e53;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#fetchingText {
visibility: hidden;
}
< / style >
< / head >
< body >
< main >
< section id = "textStuff" >
< h1 > Indian Translate< / h1 >
< form hx-get = "/submit" hx-swap = none hx-indicator = "#loading-screen" hx-on::before-request = "hideText(event.detail.xhr.response)" hx-on::after-request = "updateTranslations(event.detail.xhr.response)" class = "translateForm" method = "get" >
< form hx-get = "/submit" hx-swap = none hx-indicator = "#loading-screen" hx-on::before-request = "hideT ranslationsAndShowT ext(event.detail.xhr.response)" 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 >
< h3 id = "fetchingText" > Fetching translations...< / h3 >
< noscript >
< h2 > This website requires javascript to work.< / h2 >
< / noscript >
< / section >
< svg id = "indiaMap" width = "1300" height = "1300" > < / svg >
< section class = "svgContainer" >
< svg id = "indiaMap" width = "1300" height = "1300" > < / svg >
< div id = "mapLoadSpinner" class = "mapLoadSpinner" > < / div >
< / section >
< / main >
< script type = "text/javascript" src = "index.js" > < / script >