81 lines
2.6 KiB
HTML
81 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>eSentences</title>
|
|
<script src="/vue@2.6.11.js"></script>
|
|
<link rel="stylesheet" href="/chota@0.8.0.css">
|
|
<link rel="stylesheet" href="/app.css">
|
|
</head>
|
|
<body>
|
|
<div class="container" id="app">
|
|
<div class="nav">
|
|
<div class="nav-left">
|
|
<span class="brand">eSentence</span>
|
|
</div>
|
|
<div class="nav-center">
|
|
<div class="brand">
|
|
<span class="text-success">W{{ phrase.words }}</span>
|
|
<span class="px-2"></span>
|
|
<span class="text-grey">ID{{ phrase.id }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="nav-right">
|
|
<select name="level" @change="onLevelChange()" v-model="level">
|
|
<option selected disabled value="">Choose level</option>
|
|
<option v-for="(info, id) in levels" :key="id" :value="id">{{ info.name }}</option>
|
|
</select>
|
|
<button class="ml-2" @click="shutdown" title="Shutdown">❌</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phrase -->
|
|
<div class="row">
|
|
<h2 class="text-primary">{{ phrase.ru }}</h2>
|
|
</div>
|
|
<!-- Progress -->
|
|
<div class="row">
|
|
<h3 class="text-success" v-show="isValid">{{ phrase.en }}</h3>
|
|
<h3 class="text-dark" v-show="!isValid">{{ censored }}</h3>
|
|
</div>
|
|
|
|
<!-- Input mode -->
|
|
<div v-show="!partsMode">
|
|
<h5 class="row" @click="togglePartsMode">Input mode</h5>
|
|
|
|
<div class="row mt-2">
|
|
<input id="translationField"
|
|
type="text" placeholder="Enter a translation"
|
|
@keyup.enter="newPhrase" v-model="userInput"/>
|
|
</div>
|
|
|
|
<!-- Blurred tip -->
|
|
<div class="row mt-2">
|
|
<h4 class="text-dark blur">{{ phrase.en }}</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Parts mode -->
|
|
<div v-show="partsMode">
|
|
<h5 class="row" @click="togglePartsMode">Parts mode</h5>
|
|
<div class="row">
|
|
<h4 class="part userPart"
|
|
v-for="(p, id) in userParts" :key="id"
|
|
@click="removePart(p, id)">{{ p }}</h4>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<span class="part"
|
|
v-for="(p, id) in parts" :key="id"
|
|
@click="insertPart(p, id)">{{ p }}</span>
|
|
</div>
|
|
<button id="nextPhraseButton" class="mt-2"
|
|
v-show="isValid"
|
|
@click="newPhrase">Next phrase</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|