115 lines
4.2 KiB
HTML
115 lines
4.2 KiB
HTML
{{template "header" .}}
|
|
<main>
|
|
<!-- Need to do this custom selector thingy since <select> cant submit on click -->
|
|
<div class="custom-select">
|
|
{{range $key, $value := .enginesNames}} {{ if eq $.Engine $key }}Translate
|
|
with: <a href="#" class="selected-option">{{$value}}</a> {{end}} {{end}}
|
|
<ul class="options">
|
|
{{range $key, $value := .enginesNames}}
|
|
<a href="/?engine={{$key}}">
|
|
<li>{{$value}}</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" id="sourceLanguage">
|
|
{{range $key, $value := .SourceLanguages}} {{if $.From}}
|
|
<option value="{{ .Id }}" {{if eq $.From .Id}}selected{{end}}>
|
|
{{ .Name }}
|
|
</option>
|
|
{{else}}
|
|
<option value="{{ .Id }}" {{if eq .Id $.defaultLang}}selected{{end}}>
|
|
{{ .Name }}
|
|
</option>
|
|
{{end}} {{end}}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="switch_languages">
|
|
<button id="switchbutton" aria-label="Switch languages" formaction="/switchlanguages?engine={{ .Engine }}"
|
|
type="submit">
|
|
<!-- https://icon-sets.iconify.design/ci/arrow-left-right/ -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="m16 13l3 3m0 0l-3 3m3-3H5m3-5L5 8m0 0l3-3M5 8h14" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="language">
|
|
<select name="to" aria-label="Target language" id="targetLanguage">
|
|
{{range $key, $value := .TargetLanguages}}
|
|
<option value="{{ .Id }}" {{if eq $.To .Id}}selected{{end}}>
|
|
{{ .Name }}
|
|
</option>
|
|
{{end}}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-wrapper">
|
|
Source Text:
|
|
<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>
|
|
|
|
{{ if .TranslateAll }}
|
|
{{range $key, $value := .TranslateAll}}
|
|
<div class="item-wrapper">
|
|
Engine: {{.Engine}}
|
|
<textarea class="translation item" dir="auto" placeholder="Translation" readonly>
|
|
{{.OutputText}}</textarea>
|
|
{{if .AutoDetect}}
|
|
Detected Language: {{.AutoDetect}}{{end}} {{if $.TtsTo}}
|
|
<audio controls>
|
|
<source type="audio/mpeg" src="{{ $.TtsTo }}" />
|
|
</audio>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
{{ else }} {{if .TranslationExists}}
|
|
<div class="item-wrapper">
|
|
<textarea class="translation item" dir="auto" placeholder="Translation" readonly>
|
|
{{.Translation.OutputText}}</textarea>
|
|
{{if .Translation.AutoDetect}}
|
|
Detected Language: {{.Translation.AutoDetect}}{{end}} {{if .TtsTo}}
|
|
<audio controls>
|
|
<source type="audio/mpeg" src="{{ .TtsTo }}" />
|
|
</audio>
|
|
{{end}}
|
|
{{end}}
|
|
{{end}}
|
|
<button class="wrap" type="submit">
|
|
Translate!
|
|
</button>
|
|
</form>
|
|
<script>
|
|
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
|
// this code submits the translation form when pressing Ctrl/Meta+Enter while focussed on the input text field
|
|
document
|
|
.getElementById("input")
|
|
.addEventListener("keydown", function (event) {
|
|
if (event.keyCode === 13 && (event.metaKey || event.ctrlKey)) {
|
|
document.getElementById("translation-form").submit();
|
|
}
|
|
});
|
|
// This code makes the select language menu searchable if js is enabled
|
|
var options = { searchable: true };
|
|
NiceSelect.bind(document.getElementById("targetLanguage"), options);
|
|
NiceSelect.bind(document.getElementById("sourceLanguage"), options);
|
|
</script>
|
|
</main>
|
|
{{ template "footer" .}}
|