-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
64 lines (64 loc) · 3.27 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
<!DOCTYPE html>
<html>
<head>
<title>Type in Japanese</title>
</head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" type="text/css" href="public/style.css">
<body>
<div class="content">
<div class="overlay-filter"></div>
<div class="main-content">
<div class="overlay-filter"></div>
<div class="card-container">
<input type="checkbox" name="change" id="change">
<div class=card id="card">
<div class="card-front">
<div class="front-heading">
<img src="public/img/noun_japanese.svg" id="jp-noun"/>
<h1>Type in Japanese</h1>
</div>
<div class="front-sub-heading">
<h2>Hiragana / Katakana あア</h2>
<div class="show-help" id="show-help"></div>
</div>
<textarea id="input" data-gramm_editor="false" autofocus></textarea>
<a class="footer-icon" href="https://github.com/prashantpiyush/typejp" target="_blank"></a>
</div>
<div class="card-back" id="card-back">
<img src="public/img/arrow.svg" height="16px" width="16px" id="go-back"/>
<img src="public/img/help.svg" height="40px" width="40px" id="help-icon"/>
<h1>How to use</h1>
<div class="howto">
<p>Type in romaji and characters will automatically get converted.</p>
<p>Use lower case letters for Hiragana:</p>
<ul>
<li>Typing 'shi' will produce - 'し'</li>
<li>Typing 'a' will produce - 'あ'</li>
</ul>
<p>Use upper case letters for Katakana:</p>
<ul>
<li>Typing 'SHI' will produce - 'シ'</li>
<li>Typing 'A' will produce - 'ア</li>
</ul>
</div>
<a class="footer-icon" href="https://github.com/prashantpiyush/typejp" target="_blank"></a>
</div>
</div>
</div>
<div class="overlay-filter"></div>
</div>
<div class="overlay-filter"></div>
</div>
<script type="text/javascript" src="public/script.js"></script>
<script>
document.getElementById("show-help").addEventListener('click', function() {
document.getElementById("change").checked = true;
});
document.getElementById("go-back").addEventListener('click', function() {
document.getElementById("change").checked = false;
});
</script>
</body>
</html>