-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (115 loc) · 5.18 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
<!doctype html>
<html lang="en">
<head>
<link rel="icon" href="apps/media/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="apps/media/favicon.ico" type="image/x-icon">
<link href="apps/css/bootstrap.min.css" rel="stylesheet">
<link href="apps/css/style.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, shrink-to-fit=no, user-scalable=no, width=device-width">
<meta name="description" content="">
<meta name="author" content="">
<script src="apps/js/jquery-slim.min.js"></script>
<script src="apps/js/bootstrap.min.js"></script>
<script src="apps/js/polyfill.min.js"></script>
<script src="apps/js/babel.js"></script>
<title>Inkstone Chinese</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Inkstone Chinese</a>
<ul class="navbar-nav mr-auto">
</ul>
<ul class="navbar-nav">
<span class="nav-text text-info">We now also have a chat group! Visit our <a href="https://t.me/getinkstone" class="">Telegram channel</a> or #inkstone on Freenode!</span>
<li class="nav-item">
</li>
</ul>
</nav>
</header>
<main role="main">
<div id="header">
<div class="header-text col-md-6">
<div class="vertical-align">
<h1>Learn Chinese one stroke at a time</h1>
<p class="mobile">Practice writing Chinese using our clean interface. Instant feedback, daily learning goals, custom wordlists, and more.</p>
<p class="desktop">
Practice writing Chinese using our clean interface.
Get instant feedback, set daily learning goals, upload custom wordlists, and more.
There's no Internet connection required, so you can learn anywhere, anytime!
</p>
<div class="call-to-action">
<a href="https://itunes.apple.com/us/app/inkstone-chinese/id1393849167?ls=1&mt=8">
<img class="ios" src="apps/media/ios_badge.png">
</a>
<a href="https://play.google.com/store/apps/details?id=com.id126c0rsxlvjwv18cf44u">
<img src="apps/media/google-play-badge.png">
</a>
<a class="imagelike link" href="#demo">
<div class="icon">🖋</div>
<div class="text">Try the demo</div>
</a>
<a class="imagelike link desktop" href="https://github.com/skishore/inkstone">
<div class="icon">🔍</div>
<div class="text">See the code</div>
</a>
</div>
</div>
</div>
<div class="header-image col-md-3">
<img src="apps/media/demo.gif" alt="Inkstone in action">
</div>
</div>
<div class="container marketing">
<div class="row">
<div class="col-lg-4">
<h2 class="chinese-header">定制</h2>
<h2>Customization</h2>
<p>Take control of your lesson plan by mixing and matching our curated wordlists with your own. Set daily targets and learn at your own pace.</p>
</div>
<div class="col-lg-4">
<h2 class="chinese-header">练习</h2>
<h2>Guided Practice</h2>
<p>Our app guides you through the fundamentals of Chinese handwriting, including correct stroke order, and it reschedules words based on your mastery of them.</p>
</div>
<div class="col-lg-4">
<h2 class="chinese-header">低价</h2>
<h2>Low, Clear Pricing</h2>
<p>Other apps charge hefty monthly subscription fees and require an Internet connection. Inkstone is a one-time purchase and fully supports offline use.
</div>
</div>
</div>
<div id="demo" class="separator"></div>
<div class="demo-section">
<div class="text col-md-4">
<div class="vertical-align">
<h1>Demo: HSK 1</h1>
<p>
Try out our handwriting recognition and automatic grading algorithm right here!
Write the prompted word on the canvas to the right.
Tap for a hint, and double tap for the answer.
When you're done with a character, tap to continue.
</p>
<h2 id="demo-prompt-1">Loading...</h2>
<h3 id="demo-prompt-2">The prompt will appear here.</h3>
</div>
</div>
<div id="demo-container"></div>
</div>
<div class="separator"></div>
<footer class="container">
<p class="float-left" >
© 2018 Shaunak Kishore
·
<a class="desktop" href="docs/credits.html">Open-Source Credits</a>
<a class="mobile" href="docs/credits.html">Credits</a>
·
<a class="desktop" href="https://github.com/skishore/inkstone/blob/master/README.md">Project Details</a>
<a class="mobile" href="https://github.com/skishore/inkstone/blob/master/README.md">Details</a>
</p>
<p class="float-right"><a href="#">Back to top</a></p>
</footer>
</main>
</body>
</html>