javascript/hanzi-writer
1
0
Fork 0
mirror of https://github.com/chanind/hanzi-writer.git synced 2026-03-13 09:44:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

adding unnecessary effects that probably don't even look that great

Browse Source
This commit is contained in:
David Chanin
2014-12-05 17:26:28 -08:00
parent 89c9142d98
commit 818c3386f0
3 changed files with 114 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
demo/index.html
View File

@@ -3,33 +3,25 @@
<head>
<meta charset="utf-8">
<title>Hanzi Writer</title>
<style>
body {
text-align: center;
}
#target {
border: 1px solid black;
width: 400px;
height: 400px;
margin: 0 auto;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Hanzi Writer</h1>
<form class="js-char-form">
<input type="text" class="js-char" size="1" maxlength="1" value="我" />
<h1 class="title">Hanzi Writer</h1>
<form class="js-char-form char-form">
<label>
Charater
<input type="text" class="js-char char-input" size="1" maxlength="1" value="我" />
</label>
<button type="submit">Update</button>
</form>
<button class="js-show">show</button>
<button class="js-hide">hide</button>
<button class="js-animate">animate</button>
<button class="js-show-hint">show hint</button>
<button class="js-hide-hint">hide hint</button>
<button class="js-quiz">quiz</button>
<div class="actions">
<button class="js-toggle">Show/hide</button>
<button class="js-toggle-hint">Outline on/off</button>
<button class="js-animate">Animate</button>
<button class="js-quiz">Quiz yourself</button>
</div>
<div id="target">

90
demo/styles.css Normal file
View File

@@ -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;
}

20
demo/test.js
View File

@@ -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();