-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (113 loc) · 4.2 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
<!doctype html>
<html>
<head>
<title>T9</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/phone.css" />
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-MGGQXF"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MGGQXF');</script>
<!-- End Google Tag Manager -->
<div class="title">
<h1>
<span class="tribute">A tribute to</span>
<span class="T9">T9</span>
</h1>
<p>
T9, which stands for Text on 9 keys, is a predictive text technology for mobile phones (specifically those that contain a 3x4 numeric keypad)</p>
<p>
So simple, yet so effective that you could even touch type once you get the hang of it.
<br/><br/> <strong>T9, Thou shalt be missed!</strong> <br/><br/>
<a href="https://en.wikipedia.org/wiki/T9_(predictive_text)"><i>Read more @ [Wikipedia]</i></a>
</p>
</div>
<div class="phone" id="phone">
<div class="top-panel">
<div class="ear-piece"></div>
<div class="screen"></div>
<textarea readonly id="result" class="text-area" placeholder="use numpad to type.."></textarea>
</div>
<div class="btn-group">
<div class="nav-pad">
<button class="btn btn-left"></button>
<button class="btn btn-right"></button>
<button class="btn btn-green"></button>
<button class="btn btn-red"></button>
<button class="btn-nav">
<div class="triangle-up"></div>
<div class="triangle-down"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</button>
</div>
<div class="num-pad">
<table>
<tr>
<td>
<button data-value="1" class="key">1
<span>. , !</span>
</button>
</td>
<td>
<button data-value="2" class="key">2
<span>a b c</span>
</button>
</td>
<td>
<button data-value="3" class="key">3
<span>d e f</span>
</button>
</td>
</tr>
<tr>
<td>
<button data-value="4" class="key">4
<span>g h i</span>
</button>
</td>
<td>
<button data-value="5" class="key">5
<span>j k l</span>
</button>
</td>
<td>
<button data-value="6" class="key">6
<span>m n o</span>
</button>
</td>
</tr>
<tr>
<td><button data-value="7" class="key">7
<span>p q r s</span>
</button>
</td>
<td>
<button data-value="8" class="key">8
<span>t u v</span>
</button>
</td>
<td>
<button data-value="9" class="key">9
<span>w x y z</span>
</button>
</td>
</tr>
<tr>
<td><button data-value="*" class="key">*</button></td>
<td><button data-value="0" class="key">0<span> _</span></button></td>
<td><button data-value="#" class="key">#</button></td>
</tr>
</table>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/phone.js"></script>
</body>
</html>