95 lines
2.6 KiB
HTML
95 lines
2.6 KiB
HTML
{{template "header" .}}
|
|
<main>
|
|
<!-- 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"
|
|
>
|
|
<->
|
|
</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>
|
|
</main>
|
|
{{ template "footer" .}}
|