mozhi/views/index.html

96 lines
2.6 KiB
HTML
Raw Normal View History

2023-06-25 00:10:57 +05:30
{{template "header" .}}
<main>
2023-09-10 17:27:22 +05:30
<!-- Need to do this custom selector thingy since <select> cant submit on click -->
<div class="custom-select">
Translate with: <a href="#" class="selected-option">{{.Engine}}</a>
<ul class="options">
{{range .enginesNames}}
<a href="/?engine={{.}}"><li>{{.}}</li></a>
{{end}}
</ul>
</div>
<br /><br />
<form action="/" method="GET" id="translation-form">
<!-- This hidden input is so that the engine gets sent in the GET request even though its not declared here -->
<input name="engine" value="{{.Engine}}" type="hidden" />
<div class="wrap languages">
<div class="language">
<select name="from" aria-label="Source language">
{{range $key, $value := .SourceLanguages}}
<option value="{{ .Id }}" {{if eq $.From .Id}}selected{{end}}>
{{ .Name }}
</option>
{{end}}
</select>
</div>
<div class="switch_languages">
<button
id="switchbutton"
aria-label="Switch languages"
formaction="/switchlanguages?engine={{ .Engine }}"
type="submit"
>
&lt;-&gt;
</button>
</div>
<div class="language">
<select name="to" aria-label="Target language">
{{range $key, $value := .TargetLanguages}}
<option value="{{ .Id }}" {{if eq $.To .Id}}selected{{end}}>
{{ .Name }}
</option>
{{end}}
</select>
</div>
</div>
<div class="wrap">
<div class="item-wrapper">
<textarea
autofocus
class="item"
id="input"
name="text"
dir="auto"
placeholder="Enter Text Here"
>
{{ .OriginalText }}</textarea
>
{{if .TtsFrom}}
<audio controls>
<source type="audio/mpeg" src="{{ .TtsFrom }}" />
</audio>
{{end}}
</div>
<div class="item-wrapper">
<textarea
id="output"
class="translation item"
dir="auto"
placeholder="Translation"
readonly
>
{{.Translation.OutputText}}</textarea
>
{{if .Translation.AutoDetect}}
<p>
Detected Language: {{.Translation.AutoDetect}}{{end}} {{if .TtsTo}}
<audio controls>
<source type="audio/mpeg" src="{{ .TtsTo }}" />
</audio>
{{end}}
</p>
</div>
</div>
<div style="text-align: center">
<button type="submit">Translate with {{ .Engine }}!</button>
</div>
</form>
2023-06-25 00:10:57 +05:30
</main>
{{ template "footer" .}}