77b101f877
Instead of using one column layout, it's now switched to two column layout with source on one side and translation on the other side. One column layout is still used on smaller screens.
60 lines
1.8 KiB
HTML
60 lines
1.8 KiB
HTML
{{define "index"}}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Translate</title>
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
</head>
|
|
<body>
|
|
<h1 class="title">Translate</h1>
|
|
|
|
<section class="main-section">
|
|
<form action="/" method="POST" class="form">
|
|
<div class="form__line">
|
|
<div class="form__field">
|
|
<label for="from" class="item form__label">
|
|
From:
|
|
</label>
|
|
<select name="from" id="from" class="form__input">
|
|
{{range $code, $name := $.Languages}}
|
|
<option value="{{$code}}" {{if eq $code $.From}}selected{{end}}>
|
|
{{$name|title}}
|
|
</option>
|
|
{{end}}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form__field">
|
|
<label for="to" class="item form__label">
|
|
To:
|
|
</label>
|
|
<select name="to" id="to" class="form__input">
|
|
{{range $code, $name := $.Languages}}
|
|
<option value="{{$code}}" {{if eq $code $.To}}selected{{end}}>
|
|
{{$name|title}}
|
|
</option>
|
|
{{end}}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form__line">
|
|
<div class="form__field">
|
|
<textarea name="text" class="form__textarea" placeholder="Text to translate">{{.Text}}</textarea>
|
|
</div>
|
|
<div class="form__field">
|
|
<textarea class="form__textarea form__translation" readonly>{{.Translation}}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form__field">
|
|
<button type="submit" class="form__button">Translate!</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
{{end}}
|