Rockingcool/india-translator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added a form, added some more styling

Browse Source
This commit is contained in:
Aadhavan Srinivasan
2025-02-27 17:45:30 -05:00
parent c7876fea3f
commit 73149275fd
1 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -23,7 +23,7 @@
.state { .state {
stroke: black; stroke: black;
fill: none; fill: none;
stroke-width: 1; stroke-width: 0.5;
} }
.language { .language {
stroke: red; stroke: red;
@@ -31,16 +31,24 @@
hover events to be recognized on the inside. */ hover events to be recognized on the inside. */
fill: black; fill: black;
fill-opacity: 0.0; fill-opacity: 0.0;
stroke-width: 2; stroke-width: 1;
}
.languageText {
visibility: hidden;
font-family: sans-serif;
font-size:1.25em;
}
.language:hover ~ .languageText {
visibility: visible;
} }
.district { .district {
stroke: white; stroke: white;
stroke-width: 0.5; stroke-width: 0.25;
transition: fill 0.3s; transition: fill 0.3s;
} }
.language:hover { .language:hover {
stroke-width: 3; stroke-width: 2;
} }
.districtText { .districtText {
visibility: hidden; visibility: hidden;
@@ -55,12 +63,13 @@
<section id="textStuff"> <section id="textStuff">
<h1>Indian Translate</h1> <h1>Indian Translate</h1>
<label for="toTranslate">Enter text to translate: <form class="translateForm" action="/submit" method="get">
<input type="text" name="toTranslate"/> <label for="query">Enter text to translate:</label>
</label> <input type="text" name="query" id="query" required/>
<input type="submit" value="Translate"/>
</section> </section>
<svg id = "indiaMap" width="700" height="700"></svg> <svg id = "indiaMap" width="1000" height="1000"></svg>
</main> </main>
<script src="index.js"></script> <script src="index.js"></script>