forked from dmotz/TuringType
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (118 loc) · 3.8 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Dan Motzenbecker">
<title>TuringType</title>
<style>
*{
box-sizing: border-box;
}
html{
background-color: #fff;
font-size: 10px;
padding: 0;
text-rendering: optimizeLegibility;
font-smoothing: antialiased;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
body{
padding: 0;
margin: 0;
}
textarea{
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
position: absolute;
top: 0;
bottom: 0;
color: #333;
background-color: transparent;
outline: none;
border: none;
padding: 2rem;
font-size: 5rem;
font-weight: 900;
width: 100%;
height: 100%;
resize: none;
}
#links{
position: fixed;
right: 0;
padding: 1rem;
z-index: 100;
}
#links a{
background-color: #333;
color: #fff;
padding: 0.5rem;
text-decoration: none;
font-size: 1.3rem;
position: relative;
}
#links a:hover{
background-color: #555;
}
#links a:active{
top: 1px;
}
</style>
</head>
<body>
<div id="links">
<a href="http://github.com/dmotz/TuringType">fork me on Github</a>
<a href="http://oxism.com">more projects</a>
<a href="http://twitter.com/dcmotz">@dcmotz</a>
</div>
<textarea id="test"></textarea>
<script src="turingtype.js"></script>
<script>
var corpus1 =
"Hello.\n\
I am TuringType.\n\
I am a naïve simulation of a human typing. I was written in a few minutes (and a few lines of CoffeeScript), so I'm not meant to be very accurate. I'm just a parlor trick you can use in your own projects.\n\
Notice that I occasionally make mistakes. Please excuse me, and note that you can easily change my typing accuracy level and speed.\n\
Watch this...";
var corpus2 =
"Use me like this:\n\
\n\
new TuringType(domElement, 'Just some text.');\n\
\n\
Or pass some options if you feel like it:\n\
\n\
new TuringType(domElement, 'Terrible but fast typist.', { accuracy: 0.3, interval: 20, callback: allDone });\n\
\n\
Enjoy. Click the Github link in the upper right to see my code.";
var cb1 = function(){
setTimeout(function(){
el.value = '';
new TuringType(el, 'You can set me to be wildly inaccurate.', { accuracy: .5, callback: cb2 });
}, 2000);
}
var cb2 = function(){
setTimeout(function(){
el.value = '';
new TuringType(el, 'Or maybe wildly inaccurate and very fast for an interesting effect.', { accuracy: .3, interval: 15, callback: cb3 });
}, 2000);
}
var cb3 = function(){
setTimeout(function(){
el.value = '';
new TuringType(el, corpus2);
}, 2000);
}
var el = document.getElementById('test');
new TuringType(el, corpus1, { callback: cb1 });
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30392798-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>