-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
55 lines (55 loc) · 2.37 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/index.css?v=10">
<title>NCE</title>
</head>
<body>
<div id="app">
</div>
<template id="main">
<section>
<div v-show="loading">Loading...</div>
<div v-show="!loading">
<a :href="videoLink" target="nce-bilibili"><h1>{{title.en}}</h1></a>
<audio ref="audio" :src="`//tim-zhang.gitee.io/nce-resource${uk ? '-uk' : ''}/mp3/${id}.mp3`" controls controlsList="nodownload"></audio>
<div class="line" v-for="(line, idx) in lines">
<input autocomplete="nope" autocorrect="off" autocapitalize="off" spellcheck="false"
ref="line" v-if="!line.diff" type="text" v-model="line.answer"
:placeholder="line.placeholder" :autofocus="idx === 0"
@keydown.up="gotoPrevLine"
@keydown.down="gotoNextLine"
@keydown.enter.exact="gotoNextLine"
@keydown="onLineKeydown(line, $event)"
@focus="onLineFocus(idx)"
@paste="onPaste(idx, $event)"
>
<div v-else :class="{current: line.current}" @click="onLineKeydown(line, $event)">
<span v-for="d in line.diff"
:class="[d.added ? 'added' : d.removed ? 'removed' : 'equal', {highlight: shouldHighlight(d)}]"
>{{d.value}}</span>
</div>
</div>
<div class="controls">
<input type="button" value="Submit" @click="submit" v-show="!lines[0] || !lines[0].diff"/>
<input type="button" value="Restore" @click="restore" v-show="lines[0] && lines[0].diff"/>
<select v-model="id">
<option v-for="i in lessons" :value="i.id">{{i.id}} {{i.title}}</option>
</select>
<a @click.prevent="showHelp" href="###" title="Shortcuts" class="help">❓</a>
</div>
</div>
<footer>{{id}}</footer>
</section>
</template>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.bootcss.com/jsdiff/3.5.0/diff.min.js"></script>
<script src="js/titles.js?v=3"></script>
<script src="js/helper.js?v=12"></script>
<script src="js/lrc.js?v=12"></script>
<script src="js/index.js?v=15"></script>
</body>
</html