Klemek
68 lines
3.4 KiB
HTML
68 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Memory Helper</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script type="text/javascript" src="libs/vue.global.js"></script>
|
|
<script type="text/javascript" src="libs/lz-string.min.js"></script>
|
|
<script type="text/javascript" src="main.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
</head>
|
|
<body>
|
|
<main id="app" style="display:none">
|
|
<h1>Memory Helper</h1>
|
|
<div v-if="available.length > 0">
|
|
<div id='status'>Status : {{ done.length }}/{{ available.length }}</div>
|
|
<div v-if="current.length === 0">
|
|
<div class="main"><span id="question">🎉</span></div>
|
|
<div class="button-container">
|
|
<div type="button" class="button long" v-on:click="reset">Reset</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="current.length > 0">
|
|
<div class="main"><span id="question">{{question}}</span></div>
|
|
<div class="main"><span id="answer">{{showAnswer ? answer : '???'}}</span></div>
|
|
<div class="button-container">
|
|
<div type="button" class="button long" v-if="!showAnswer" v-on:click="show">Show</div>
|
|
<div type="button" class="button right" v-if="showAnswer" v-on:click="right">✔</div>
|
|
<div type="button" class="button wrong" v-if="showAnswer" v-on:click="wrong">✘</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
<hr>
|
|
</div>
|
|
<div>
|
|
<h2 v-on:click="showConfig = !showConfig" class="expand">{{showConfig ? '▾' : '▸'}} List ({{ available.length }})</h2>
|
|
<table class="config" v-if="showConfig">
|
|
<tr>
|
|
<td><input type="checkbox" v-model="q2a" @click="nextQuestion"/> Q → A</td>
|
|
<td><input type="checkbox" v-model="a2q" @click="nextQuestion"/> A → Q</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr v-for="(row, i) in available">
|
|
<td><input placeholder="question" v-bind:value="row[0]" v-on:change="row[0] = $event.target.value"></td>
|
|
<td><input placeholder="answer" v-bind:value="row[1]" v-on:change="row[1] = $event.target.value"></td>
|
|
<td><button v-on:click="deleteRow(i)">Delete</button></td>
|
|
</tr>
|
|
<tr v-if="size < 2048">
|
|
<td><input placeholder="question" v-bind:value="newRow[0]" v-on:change="newRow[0] = $event.target.value"></td>
|
|
<td><input placeholder="answer" v-bind:value="newRow[1]" v-on:change="newRow[1] = $event.target.value"></td>
|
|
<td><button v-on:click="addRow">Add</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
<progress max="2048" v-bind:value="size"></progress>
|
|
</td>
|
|
<td>
|
|
{{ size }} / 2048
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<hr>
|
|
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="https://github.com/Klemek/memory-helper" target="_blank">Github Repository</a> - {{currentYear}}</small>
|
|
</main>
|
|
</body>
|
|
</html>
|