Skip to content

Commit 19cd4c8

Browse files
author
David Chanin
committed
improved demo
1 parent 15febe1 commit 19cd4c8

File tree

17 files changed

+261
-221
lines changed

17 files changed

+261
-221
lines changed

‎.sass-cache/59f4d76c633d2257addc3fa958d291035b4bcb40/_demo.scssc

-5.33 KB
Binary file not shown.

‎.sass-cache/59f4d76c633d2257addc3fa958d291035b4bcb40/_index.scssc

10 Bytes
Binary file not shown.

‎_includes/footer.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
</div>
99

1010
<script type="application/javascript" src="cdn/1/dist/hanzi-writer.js"></script>
11-
<script type="application/javascript" src="test.js"></script>
1211
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
1312
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
14-
<script type="application/javascript" src="demo.js"></script>
13+
14+
{% if page.js %}
15+
<script type="application/javascript" src="{{ page.js }}"></script>
16+
{% endif %}

‎_layouts/default.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</div>
2222
<div id="navbar" class="navbar-collapse collapse">
2323
<ul class="nav navbar-nav navbar-right">
24-
<li><a href="demo.html">Demo</a></li>
24+
<li><a href="demo.html">Demos</a></li>
2525
<li><a href="https://github.com/chanind/hanzi-writer">Github</a></li>
2626
</ul>
2727
</div>

‎_sass/_demo.scss

+22-75
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,37 @@
1-
// body, html {
2-
// background: #f4f0ea;
3-
// margin: 0;
4-
// padding: 0;
5-
// text-align: center;
6-
// font-family: 'Raleway', sans-serif;
7-
// font-size: 14px;
8-
// }
9-
// body {
10-
// padding-bottom: 80px;
11-
// }
12-
// * {
13-
// box-sizing: border-box;
14-
// }
15-
16-
// input, button {
17-
// outline: none;
18-
// }
19-
// button, #target, .title {
20-
// box-shadow: 0 1px 5px rgba(0,0,0,0.15);
21-
// }
22-
23-
// button, #target {
24-
// text-shadow: 0 1px 1px white;
25-
// }
26-
27-
.title {
28-
color: white;
29-
background: linear-gradient(to bottom, #333, #222);
30-
padding: 15px 0;
31-
margin: 0 0 30px;
32-
text-shadow: 0 0 15px #4B89DB;
33-
}
34-
35-
#target {
1+
.demo-target {
362
background: white;
373
clear: both;
38-
border: 1px solid black;
39-
width: 400px;
40-
height: 400px;
4+
border: 1px solid #AAA;
5+
width: 300px;
6+
height: 300px;
417
margin: 0 auto;
428
}
439

44-
.char-form {
45-
margin: 0 0 20px;
10+
.demo {
11+
margin-top: 100px;
12+
text-align: center;
4613
}
4714

48-
.char-form button {
49-
padding: 8px 5px;
50-
line-height: 14px;
51-
display: inline-block;
52-
vertical-align: top;
15+
.demo-divider {
16+
margin: 40px 0;
5317
}
5418

55-
.char-input {
56-
font-size: 16px;
57-
padding: 5px;
58-
width: 33px;
59-
text-align: center;
19+
.char-select-form {
20+
margin-bottom: 20px;
6021
}
6122

62-
.actions {
63-
width: 400px;
64-
margin: 0 auto;
23+
.demo-controls {
24+
border: 1px solid #AAA;
25+
margin: 10px auto;
26+
padding: 10px;
27+
width: 300px;
6528
}
6629

67-
.actions button {
68-
display: block;
69-
width: 97px;
70-
float: left;
71-
margin-right: 4px;
72-
margin-bottom: 4px;
30+
.demo-controls .btn {
31+
margin-left: 20px
7332
}
74-
.actions button:last-child {
75-
margin-right: 0;
76-
}
77-
78-
// button {
79-
// background: none;
80-
// border: 1px solid #444;
81-
// color: #444;
82-
// cursor: pointer;
83-
// transition: all 300ms;
84-
// }
8533

86-
// button:hover {
87-
// color: #1e6cd2;
88-
// border: 1px solid #1e6cd2;
89-
// box-shadow: none;
90-
// }
34+
.character-select {
35+
width: auto !important;
36+
display: inline-block !important;
37+
}

‎_sass/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124

125125
.wo-quiz-controls {
126126
border: 1px solid #AAA;
127-
margin: 10px auto;
127+
margin: 10px auto 30px;
128128
padding: 10px;
129129
width: 300px;
130130
}

‎_site/about/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
</div>
4444
<div id="navbar" class="navbar-collapse collapse">
4545
<ul class="nav navbar-nav navbar-right">
46-
<li><a href="demo.html">Demo</a></li>
46+
<li><a href="demo.html">Demos</a></li>
4747
<li><a href="https://github.com/chanind/hanzi-writer">Github</a></li>
4848
</ul>
4949
</div>
@@ -81,10 +81,10 @@ <h1 class="post-title">About</h1>
8181
</div>
8282

8383
<script type="application/javascript" src="cdn/1/dist/hanzi-writer.js"></script>
84-
<script type="application/javascript" src="test.js"></script>
8584
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
8685
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
87-
<script type="application/javascript" src="demo.js"></script>
86+
87+
8888

8989

9090
</body>

‎_site/css/main.css

+22-35
Original file line numberDiff line numberDiff line change
@@ -267,53 +267,40 @@ body {
267267

268268
.wo-quiz-controls {
269269
border: 1px solid #AAA;
270-
margin: 10px auto;
270+
margin: 10px auto 30px;
271271
padding: 10px;
272272
width: 300px; }
273273

274274
.wo-quiz-controls .btn {
275275
margin-left: 20px; }
276276

277-
.title {
278-
color: white;
279-
background: linear-gradient(to bottom, #333, #222);
280-
padding: 15px 0;
281-
margin: 0 0 30px;
282-
text-shadow: 0 0 15px #4B89DB; }
283-
284-
#target {
277+
.demo-target {
285278
background: white;
286279
clear: both;
287-
border: 1px solid black;
288-
width: 400px;
289-
height: 400px;
280+
border: 1px solid #AAA;
281+
width: 300px;
282+
height: 300px;
290283
margin: 0 auto; }
291284

292-
.char-form {
293-
margin: 0 0 20px; }
285+
.demo {
286+
margin-top: 100px;
287+
text-align: center; }
294288

295-
.char-form button {
296-
padding: 8px 5px;
297-
line-height: 14px;
298-
display: inline-block;
299-
vertical-align: top; }
289+
.demo-divider {
290+
margin: 40px 0; }
300291

301-
.char-input {
302-
font-size: 16px;
303-
padding: 5px;
304-
width: 33px;
305-
text-align: center; }
292+
.char-select-form {
293+
margin-bottom: 20px; }
306294

307-
.actions {
308-
width: 400px;
309-
margin: 0 auto; }
295+
.demo-controls {
296+
border: 1px solid #AAA;
297+
margin: 10px auto;
298+
padding: 10px;
299+
width: 300px; }
310300

311-
.actions button {
312-
display: block;
313-
width: 97px;
314-
float: left;
315-
margin-right: 4px;
316-
margin-bottom: 4px; }
301+
.demo-controls .btn {
302+
margin-left: 20px; }
317303

318-
.actions button:last-child {
319-
margin-right: 0; }
304+
.character-select {
305+
width: auto !important;
306+
display: inline-block !important; }

‎_site/demo.html

+48-19
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
</div>
4444
<div id="navbar" class="navbar-collapse collapse">
4545
<ul class="nav navbar-nav navbar-right">
46-
<li><a href="demo.html">Demo</a></li>
46+
<li><a href="demo.html">Demos</a></li>
4747
<li><a href="https://github.com/chanind/hanzi-writer">Github</a></li>
4848
</ul>
4949
</div>
@@ -53,22 +53,49 @@
5353
</div>
5454
</div>
5555

56-
<form class="js-char-form char-form">
57-
<label>
58-
Character
59-
<input type="text" class="js-char char-input" size="1" maxlength="1" value="我" />
60-
</label>
61-
<button type="submit">Update</button>
62-
</form>
63-
<div class="actions">
64-
<button class="js-toggle">Show/hide</button>
65-
<button class="js-toggle-hint">Outline on/off</button>
66-
<button class="js-animate">Animate</button>
67-
<button class="js-quiz">Quiz yourself</button>
68-
</div>
69-
70-
<div id="target">
71-
56+
<div class="demo container">
57+
<h1>Hanzi Writer Demos</h1>
58+
<form class="form-inline char-select-form js-char-form">
59+
<div class="form-group">
60+
<label for="character-select">
61+
Character
62+
</label>
63+
<input type="text" class="form-control character-select" id="character-select" size="1" maxlength="1" value="我" />
64+
</div>
65+
<button type="submit" class="btn btn-default">Update demos</button>
66+
</form>
67+
68+
<hr class="demo-divider" />
69+
70+
<h4>Character Animation</h4>
71+
<div class="demo-target" id="animation-target"></div>
72+
<div class="demo-controls">
73+
<form class="form-inline">
74+
<div class="checkbox">
75+
<label>
76+
<input type="checkbox" checked="checked" id="animation-show-outline" /> Show Outline
77+
</label>
78+
<button class="btn btn-primary" id="animate">Animate!</button>
79+
</div>
80+
</form>
81+
</div>
82+
83+
<hr class="demo-divider" />
84+
85+
<h4>Stroke Quiz</h4>
86+
<p>Quiz yourself by drawing the character <strong class="char-symbol"></strong> below with your mouse or finger</p>
87+
88+
<div class="demo-target" id="quiz-target"></div>
89+
<div class="demo-controls">
90+
<form class="form-inline">
91+
<div class="checkbox">
92+
<label>
93+
<input type="checkbox" checked="checked" id="quiz-show-outline" /> Show Outline
94+
</label>
95+
<button class="btn btn-primary" id="quiz-reset">Reset</button>
96+
</div>
97+
</form>
98+
</div>
7299
</div>
73100

74101
<hr class="featurette-divider" />
@@ -81,10 +108,12 @@
81108
</div>
82109

83110
<script type="application/javascript" src="cdn/1/dist/hanzi-writer.js"></script>
84-
<script type="application/javascript" src="test.js"></script>
85111
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
86112
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
87-
<script type="application/javascript" src="demo.js"></script>
113+
114+
115+
<script type="application/javascript" src="demo.js"></script>
116+
88117

89118

90119
</body>

0 commit comments

Comments
 (0)