-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (99 loc) · 4.9 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
<!DOCTYPE html>
<html>
<head>
<title>Eye Gaze Keyboard</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="container">
<textarea id="write" rows="6" cols="60"></textarea>
<ul id="numpad">
<li class="inner" id*="number1"><span class="unshifted">1</span>
<span class="shifted">!</span></li>
<li class="inner" id*="number2"><span class="unshifted">2</span>
<span class="shifted">@</span></li>
<li class="inner" id*="number3"><span class="unshifted">3</span>
<span class="shifted">#</span></li>
<li class="inner" id*="number4"><span class="unshifted">4</span>
<span class="shifted">$</span></li>
<li class="inner" id*="number5"><span class="unshifted">5</span>
<span class="shifted">%</span></li>
<li class="inner" id*="number6"><span class="unshifted">6</span>
<span class="shifted">^</span></li>
<li class="inner" id*="number7"><span class="unshifted">7</span>
<span class="shifted">&</span></li>
<li class="inner" id*="number8"><span class="unshifted">8</span>
<span class="shifted">*</span></li>
<li class="inner" id*="number9"><span class="unshifted">9</span>
<span class="shifted">(</span></li>
<li class="inner" id*="number0"><span class="unshifted">0</span>
<span class="shifted">)</span></li>
</ul>
<ul id="keyboard">
<li class="outer" id="outer_top_left"><span class="on">
<ul id="topleft">
<li class="inner letter" id="inner_top_left">g</li>
<li class="inner letter" id="inner_top_mid">h</li>
<li class="inner letter" id="inner_top_right">i</li>
<li class="inner letter" id="inner_bot_left">f</li>
<li class="inner letter" id="inner_bot_mid">;</li>
<li class="inner letter" id="inner_bot_right">j</li>
</ul>
</span><span class="off letter"></span></li>
<li class="outer" id="outer_top_mid"><span class="on">
<ul id="topmid">
<li class="inner letter" id="inner_top_left">l</li>
<li class="inner letter" id="inner_top_mid">m</li>
<li class="inner letter" id="inner_top_right">n</li>
<li class="inner letter" id="inner_bot_left">k</li>
<li class="inner letter" id="inner_bot_mid">+</li>
<li class="inner letter" id="inner_bot_right">o</li>
</ul>
</span><span class="off letter"></span></li>
<li class="outer" id="outer_top_right"><span class="on">
<ul id="topright">
<li class="inner letter" id="inner_top_left">q</li>
<li class="inner letter" id="inner_top_mid">r</li>
<li class="inner letter" id="inner_top_right">s</li>
<li class="inner letter" id="inner_bot_left">p</li>
<li class="inner letter" id="inner_bot_mid">(</li>
<li class="inner letter" id="inner_bot_right">t</li>
</ul>
</span><span class="off letter"></span></li>
<li class="outer" id="outer_bot_left"><span class="on">
<ul id="botleft">
<li class="inner letter" id="inner_top_left">b</li>
<li class="inner letter" id="inner_top_mid">c</li>
<li class="inner letter" id="inner_top_right">d</li>
<li class="inner letter" id="inner_bot_left">a</li>
<li class="inner letter" id="inner_bot_mid">~</li>
<li class="inner letter" id="inner_bot_right">e</li>
</ul>
</span><span class="off letter"></span></li>
<li class="outer" id="outer_bot_mid"><span class="on">
<ul id="botmid">
<li class="inner" id="inner_top_left">.</li>
<li class="inner" id="inner_top_mid">,</li>
<li class="inner" id="inner_top_right">←</li>
<li class="inner" id="inner_bot_left">↑</li>
<li class="inner" id="inner_bot_mid">_</li>
<li class="inner" id="inner_bot_right">↵</li>
</ul>
</span><span class="off letter"></span></li>
<li class="outer" id="outer_bot_right"><span class="on">
<ul id="botright">
<li class="inner letter" id="inner_top_left">v</li>
<li class="inner letter" id="inner_top_mid">w</li>
<li class="inner letter" id="inner_top_right">x</li>
<li class="inner letter" id="inner_bot_left">u</li>
<li class="inner letter" id="inner_bot_mid">y</li>
<li class="inner letter" id="inner_bot_right">z</li>
</ul>
</span><span class="off letter"></span></li>
</ul>
</div>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/eyg.js"></script>
</body>
</html>