source: code/trunk/web/views/index.html@ 22

Last change on this file since 22 was 22, checked in by manerakai, 22 months ago

Implemented Definitions and Translations in Web interface

File size: 5.3 KB
Line 
1<!doctype html>
2<html lang="en">
3
4<head>
5 <title>SimplyTranslate</title>
6 <link rel="shortcut icon" href="/static/favicon.ico">
7 <meta name="description" content="Experience simple and private Google translations">
8 <meta name="viewport" content="width=device-width, initial-scale=1.0">
9 <meta charset="UTF-8">
10 <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
11 <meta name="referrer" content="no-referrer">
12 <link rel="stylesheet" href="/static/style.css">
13</head>
14
15<body>
16 <header class="center">
17 <h1>SimplyTranslate</h1>
18 </header>
19
20 <form action="/?engine={{.Engine}}" method="POST" id="translation-form">
21
22 <div class="center">
23 Translation Engine
24 {{$i := 0}}
25 {{ range $k, $v := .enginesNames }}
26 <a {{ if eq $k $.Engine }}style="text-decoration:underline" {{end}} href="/?engine={{ $k }}">{{ $v }}</a>
27 {{$i = (inc $i)}}
28 {{if eq $i (len $.enginesNames)}}{{else}}|{{end}}
29 {{end}}
30 </div>
31 <br>
32
33 <div class="wrap languages">
34 <div class="language">
35 <select name="from" aria-label="Source language">
36 {{range $code, $name := .SourceLanguages}}
37 <option value="{{ $code }}" {{if eq $code $.From}}selected{{end}}>{{ $name }}</option>
38 {{end}}
39 </select>
40 </div>
41
42 <div class="switch_languages">
43 <button id="switchbutton" aria-label="Switch languages"
44 formaction="/switchlanguages/?engine={{ .Engine }}" type="submit">&lt;-&gt;</button>
45 </div>
46
47 <div class="language">
48 <select name="to" aria-label="Target language">
49 {{range $code, $name := .TargetLanguages}}
50 <option value="{{ $code }}" {{if eq $code $.To}}selected{{end}}>{{ $name }}</option>
51 {{end}}
52 </select>
53 </div>
54 </div>
55
56 <div class="wrap">
57 <div class="item-wrapper">
58 <textarea autofocus class="item" id="input" name="text" dir="auto"
59 placeholder="Enter Text Here">{{ .OriginalText }}</textarea>
60 {{if .TtsFrom}}
61 <audio controls>
62 <source type="audio/mpeg" src="{{ .TtsFrom }}">
63 </audio>
64 {{end}}
65 </div>
66
67 <div class="item-wrapper">
68 <textarea id="output" class="translation item" dir="auto" placeholder="Translation"
69 readonly>{{.Translation.TranslatedText}}</textarea>
70 {{if .TtsTo}}
71 <audio controls>
72 <source type="audio/mpeg" src="{{ .TtsTo }}">
73 </audio>
74 {{end}}
75 </div>
76 </div>
77
78 <br>
79
80 <div class="center">
81 <button type="submit">Translate with {{ .Engine }}!</button>
82 </div>
83
84 <br>
85
86 <div id="definitions_and_translations">
87 {{ if .Translation.Definitions }}
88 <div class="definitions">
89 {{ range $type, $definitions :=.Translation.Definitions }}
90 <span class="def_type">{{ $type }}</span>
91 <ol>
92 {{ range $definition_item := $definitions }}
93 <li>
94 {{ $definition_item.definition }}
95 <br>
96 {{with $definition_item.use_in_sentence}}
97 <span class="use_in_sentence">"{{$definition_item.use_in_sentence}}"</span>
98 <br>
99 {{end}}
100 {{with $definition_item.synonyms}}
101 {{ range $synonym_type, $_ := $definition_item.synonyms }}
102 <span class="syn">
103 {{if $synonym_type }}
104 <br>
105 <span class="syn_type">{{$synonym_type}}: </span>{{end}}{{ range $index, $element := index
106 $definition_item.synonyms $synonym_type}}{{if $index}}, {{end}}{{$element}}{{end}}
107 </span>
108 {{end}}
109 {{end}}
110 </li>
111 {{end}}
112 </ol>
113 {{end}}
114 </div>
115 {{ end}}
116
117 {{ if .Translation.Translations }}
118 <div class="translations">
119 {{ range $def_type, $translations := .Translation.Translations }}
120 <span class="def_type">{{ $def_type }}</span>
121 <ul>
122 {{ range $word, $word_translations := $translations }}
123 <li>
124 <span class="syn_type">{{$word}}:</span>
125 <span class="syn">{{ range $index, $element := $word_translations.words}}{{if $index}}, {{end}}{{$element}}{{end}}</span>
126 <span class="syn_type">{{$word_translations.frequency}}</span>
127 </li>
128 <br>
129 {{end}}
130 </ul>
131 {{end}}
132 </div>
133 {{end}}
134 </div>
135
136 </form>
137 <script src="/static/script.js"></script>
138</body>
139
140</html>
Note: See TracBrowser for help on using the repository browser.