-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (126 loc) · 4.11 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Japanese Assisted Reader</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
/>
<link rel="stylesheet" href="assets/custom.css" />
</head>
<body>
<nav class="level">
<div class="level-left">
<div class="level-item">
<p class="title is-5 has-padding site-title">
Japanese Assisted Reader
</p>
</div>
</div>
<div class="level-right has-padding text-center">
<button id="load-text" class="button is-secondary">
Load New Text
</button>
</div>
</nav>
<div id="spinner">
<div>
<svg
class="spinner"
width="65px"
height="65px"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<circle
class="path"
fill="none"
stroke-width="6"
stroke-linecap="round"
cx="33"
cy="33"
r="30"
></circle>
</svg>
</div>
</div>
<main class="constrainer">
<section id="input" class="section box">
<div class="container">
<p>
Paste in the title (optional) and the content of a Japanese article
that you would like to read and click "Parse."
</p>
<br />
<div class="field">
<label for="title-input" class="label">Title</label>
<div class="control">
<input
id="title-input"
class="input"
type="text"
placeholder="Title (optional)"
/>
</div>
</div>
<div class="field">
<label for="body-input" class="label">Body</label>
<div class="control">
<textarea
id="body-input"
class="textarea"
placeholder="Paste in the Japanese text you'd like to read..."
></textarea>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button id="parse" class="button is-link">Parse</button>
</div>
<div class="control">
<button id="sample" class="button is-link is-light">
Load Sample
</button>
</div>
<div class="control">
<button id="clear" class="button is-link is-light">Clear</button>
</div>
<div class="control"></div>
</div>
</div>
</section>
<section id="reader" class="section">
<div class="container">
<h1 id="title" class="title ja-header"></h1>
<p id="body" class="ja-content"></p>
</div>
</section>
</main>
<footer class="footer really-white-bg">
<div class="content has-text-centered">
<p>
<strong>Japanese Assisted Reader</strong> by
<a href="https://www.michaelcharl.es/aubrey/"
>Michael Charles Aubrey</a
>. The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
</p>
</div>
</footer>
<script src="assets/wasm-worker.js"></script>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<div class="hidden" id="x-title">地震の影響で秋田新幹線が運転見合わせ</div>
<div class="hidden" id="x-body">
地震の影響で秋田新幹線が運転見合わせ13日午後11時8分ごろ、福島沖を震源とする地震が発生し、宮城と福島で最大震度6強を観測した。
</div>
<script src="assets/scripts.js"></script>
</body>
</html>