<div class="container input-container">
<p class="tryme">Try some of these:
<a href="#">火</a>
<a href="#">水</a>
<a href="#">木</a>
<a href="#">心</a>
<a href="#">愛</a>
<a href="#">幸</a>
<a href="#">貓魚</a>
<a href="#">使高興</a>
<a href="#">色情網站</a>
<a href="#">中國</a>
<a href="#">香港</a>
</p>
<input type="text" id="input" placeholder="中文" value="中文"/>
</div>
<div class="error-container">Some characters could not be found.<br>The input only accepts Chinese Characters, try one of these: 火 , 水 , 日 , 月</div>
<p class="help">If you pasted more than one character, they might be in slightly the wrong order.<br> Press <code>SPACE</code> once and they should be arranged correctly.</p>
<div class="container output-container">
</div>
<p class="help">Click on a character for a direct-link to it.</p>
<div class="container goodchars">
<a href="https://service.goodcharacters.com" class="logo" title="All images come from Good Characters"></a>
<p class="intro">Type some Chinese Characters into the input box, and using
the amazing .gifs from <a href="https://service.goodcharacters.com">Good Characters</a> you can learn
how to correctly draw the strokes.</p>
</div>@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Oxygen:300,700);
/*
Try some of the simple Chinese Radicals
I've listed below (copy/paste):
火 = Fire;
水 = Water;
日 = Sun;
月 = Moon;
Alternatively, find some more and
start learning today at:
http://chineasy.org/
*/
$color: #fefefe;
$colorInactive: rgba(255,255,255,0.6);
$border: transparentize($color,0.7);
$borderActive: transparentize($color,0.4);
body {
background: #cc0000;
font-family: Oxygen, Arial, sans-serif;
color: $color; font-size: 20px;
padding: 10px 0 100px;
}
.goodchars {
text-align: center;
}
.logo {
vertical-align: middle;
display: inline-block;
width: 110px;
height: 110px;
background: url(https://service.goodcharacters.com/images/icons-nav/nav-top-2013-07.png);
}
.intro {
vertical-align: middle;
display: inline-block;
font-size: 13px;
opacity: 0.8;
width: 240px;
padding: 0;
margin: 0;
text-align: left;
a {
font-weight: 700;
color: rgba(255,255,255,1); }
}
.container {
width: auto;
margin: auto;
padding: 20px;
}
.tryme {
font-size: 0.7em;
line-height: 2;
a {
margin: 0 3px;
padding: 5px;
color: white;
text-decoration: none;
border-bottom: 1px dotted;
}
}
.input-container {
position: relative; padding: 10px;
width: 600px;
border-bottom: 2px solid;
border-color: $border;
&:after,
&:before {
content: " "; width: 2px; height: 6px;
position: absolute; left: 0; bottom: 0; z-index: 1;
border-left: 2px solid $border;
}
&:after {
left: auto; right: 0;
border-left: none;
border-right: 2px solid $border;
}
input {
width: 100%; border: none;
margin: 0; padding: 0;
background: transparent; border: none;
color: $colorInactive; transition: 0.4s color;
font-family: 'AR PL UKai HK','AR PL UKai CN','AR PL ZenKai Uni','AR PL KaitiM Big5','DFKai-SB','KaiTi','FangSong','AR PL UMing','MingLiu';
font-size: 65px; letter-spacing: -0px;
text-align: center;
&:focus { outline: none; color: $color; }
}
&.active {
animation: 2.5s pulse ease infinite;
&:before, &:after {
animation: 2.5s pulse ease infinite;
}
}
}
.error-container,
.help {
width: 600px; font-size: 12px; padding-top: 10px;
display: block; margin: auto; text-align: center;
height: 0; overflow: hidden;
transition: height 0.2s ease;
&.show { height: 30px; }
}
.output-container {
width: 700px; text-align: center;
a {
display: inline-block; max-width: 120px;
margin: 5px;
img { border-radius: 6px; max-width: 100%; }
}
}
@keyframes pulse {
0% { border-color: $border; }
23% { border-color: $borderActive; }
100% { border-color: $border; }
}
@media screen and (max-width: 800px) {
.intro { display: none; }
}
::-webkit-input-placeholder { /* WebKit browsers */
color: transparentize($color,0.5);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: transparentize($color,0.5);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: transparentize($color,0.5);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: transparentize($color,0.5);
}
@media screen and (max-width: 560px) {
body { padding: 0; vertical-align: top; }
.logo { position: static; display: inline-block; }
.intro { position: static; display: inline-block; max-width: 220px; width: 220px; }
.container { width: auto; margin: 20px; }
.input-container input { width: 100%; }
.error-container,
.help { width: auto; }
}/*
I'm sort of half-learning Chinese.
There's a really good website for
learning the strokes of Chinese
Characters (https://service.goodcharacters.com)
but it's nearly impossible to find the
one you want, except they have
a really simple URL system.
I am using that URL system to
find and display the characters
using an input-field to grab
them.
*/
var $input = $('input');
$input.on({
"focus": function(e) {
$(".input-container").addClass("active");
},
"blur": function(e) {
$(".input-container").removeClass("active");
}
});
var previous = null;
setInterval( function() {
if( previous !== $input.val()
|| "" === $input.val()) {
getGoodCharacters( $input );
previous = $input.val();
}
}, 500);
function getGoodCharacters( $this ) {
var output = $this.val().trim();
var letters = output.split("");
var url = "https://service.goodcharacters.com/images/han/$$$.gif";
$(".error-container, .help").removeClass("show");
$(".output-container").empty();
for( letter in letters ) {
var img = letters[letter] + "";
var newurl = url.replace("$$$",img);
loadCharacter( newurl , img );
}
}
function loadCharacter( url , letter ) {
var img = new Image();
var $output = $(".output-container");
var $a = $("<a/>");
var l = $("input").val().length;
var cwidth = "120px";
if( l > 7 ) { cwidth = "70px"; }
else if( l > 6 ) { cwidth = "90px"; }
else if( l > 5 ) { cwidth = "100px"; }
$(img).load(function(){
$a.attr({
"href": url,
"title": "Good Character Chinese Symbol: "+ letter + ""
}).css("width", cwidth ).append( $(this) ).appendTo($output);
$(".help").addClass("show");
}).attr({
src: url
}).error(function(){
$(".error-container").addClass("show");
});
}
var $try = $(".tryme a").on("click", function(e) {
e.preventDefault();
$input.val( $(this).text() );
});
External CSS
This Pen doesn't use any external CSS resources.