diff --git a/demo/index.html b/demo/index.html
index 83fa5937..e780b3c0 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -3,33 +3,25 @@
Hanzi Writer
-
+
+
- Hanzi Writer
-
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/demo/styles.css b/demo/styles.css
new file mode 100644
index 00000000..8358177d
--- /dev/null
+++ b/demo/styles.css
@@ -0,0 +1,90 @@
+body, html {
+ background: #f4f0ea;
+ margin: 0;
+ padding: 0;
+ text-align: center;
+ font-family: 'Raleway', sans-serif;
+ font-size: 14px;
+}
+body {
+ padding-bottom: 80px;
+}
+* {
+ box-sizing: border-box;
+}
+
+input, button {
+ outline: none;
+}
+button, #target, .title {
+ box-shadow: 0 1px 5px rgba(0,0,0,0.15);
+}
+
+button, #target {
+ text-shadow: 0 1px 1px white;
+}
+
+.title {
+ color: white;
+ background: linear-gradient(to bottom, #333, #222);
+ padding: 15px 0;
+ margin: 0 0 30px;
+ text-shadow: 0 0 15px #4B89DB;
+}
+
+#target {
+ background: white;
+ clear: both;
+ border: 1px solid black;
+ width: 400px;
+ height: 400px;
+ margin: 0 auto;
+}
+
+.char-form {
+ margin: 0 0 20px;
+}
+
+.char-form button {
+ padding: 8px 5px;
+ line-height: 14px;
+ display: inline-block;
+ vertical-align: top;
+}
+
+.char-input {
+ font-size: 16px;
+ padding: 5px;
+ width: 33px;
+ text-align: center;
+}
+
+.actions {
+ width: 400px;
+ margin: 0 auto;
+}
+
+.actions button {
+ display: block;
+ width: 97px;
+ float: left;
+ margin-right: 4px;
+ margin-bottom: 4px;
+}
+.actions button:last-child {
+ margin-right: 0;
+}
+
+button {
+ background: none;
+ border: 1px solid #444;
+ color: #444;
+ cursor: pointer;
+ transition: all 300ms;
+}
+
+button:hover {
+ color: #1e6cd2;
+ border: 1px solid #1e6cd2;
+ box-shadow: none;
+}
\ No newline at end of file
diff --git a/demo/test.js b/demo/test.js
index 86b74a20..9f469fc8 100644
--- a/demo/test.js
+++ b/demo/test.js
@@ -1,4 +1,6 @@
var writer;
+var isCharVisible;
+var isHintVisible;
function updateCharacter() {
document.querySelector('#target').innerHTML = '';
@@ -10,6 +12,8 @@ function updateCharacter() {
});
writer.showHint();
writer.showCharacter();
+ isCharVisible = true;
+ isHintVisible = true;
window.writer = writer;
}
@@ -21,17 +25,13 @@ window.onload = function() {
updateCharacter();
});
- document.querySelector('.js-show').addEventListener('click', function() {
- writer.showCharacter();
+ document.querySelector('.js-toggle').addEventListener('click', function() {
+ isCharVisible ? writer.hideCharacter() : writer.showCharacter();
+ isCharVisible = !isCharVisible;
});
- document.querySelector('.js-hide').addEventListener('click', function() {
- writer.hideCharacter();
- });
- document.querySelector('.js-show-hint').addEventListener('click', function() {
- writer.showHint();
- });
- document.querySelector('.js-hide-hint').addEventListener('click', function() {
- writer.hideHint();
+ document.querySelector('.js-toggle-hint').addEventListener('click', function() {
+ isHintVisible ? writer.hideHint() : writer.showHint();
+ isHintVisible = !isHintVisible;
});
document.querySelector('.js-animate').addEventListener('click', function() {
writer.animateCharacter();