-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
executable file
·126 lines (116 loc) · 7.82 KB
/
index.php
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
125
126
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS Keyboard</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/icons.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="container">
<h1 class="main">CSS Keyboard</h1>
<div id="scene">
<div id="keyboard">
<figure class="key-top top left key-esc">esc</figure>
<figure class="key-top top"><i class="icon-brightness"></i><span>F1</span></figure>
<figure class="key-top top"><i class="icon-brightness"></i><span>F2</span></figure>
<figure class="key-top top"><i class="icon-personna"></i><span>F3</span></figure>
<figure class="key-top top"><i class="icon-show_dock"></i><span>F4</span></figure>
<figure class="key-top top"><span>F5</span></figure>
<figure class="key-top top"><span>F6</span></figure>
<figure class="key-top top"><i class="icon-rewind"></i><span>F7</span></figure>
<figure class="key-top top"><i class="icon-play_pause"></i><span>F8</span></figure>
<figure class="key-top top"><i class="icon-fast_forward"></i><span>F9</span></figure>
<figure class="key-top top"><i class="icon-mute"></i><span>F10</span></figure>
<figure class="key-top top"><i class="icon-volume_down"></i><span>F11</span></figure>
<figure class="key-top top"><i class="icon-volume_up"></i><span>F12</span></figure>
<figure class="key-top top right"><i class="icon-eject"></i></figure>
<figure class="key-tilde left press-tilde">~<br>`</figure>
<figure class="key-number key-1">!<br>1</figure>
<figure class="key-number key-2">@<br>2</figure>
<figure class="key-number key-3">#<br>3</figure>
<figure class="key-number key-4">$<br>4</figure>
<figure class="key-number key-5">%<br>5</figure>
<figure class="key-number key-6">^<br>6</figure>
<figure class="key-number key-7">&<br>7</figure>
<figure class="key-number key-8">*<br>8</figure>
<figure class="key-number key-9">(<br>9</figure>
<figure class="key-number key-0">)<br>0</figure>
<figure class="key-number key-minus">-<br>-</figure>
<figure class="key-number key-plus">+<br>=</figure>
<figure class="key-delete right">delete</figure>
<figure class="key-tab left press-tab">tab</figure>
<figure class="key-letter letter-q">Q</figure>
<figure class="key-letter letter-w">W</figure>
<figure class="key-letter letter-e">E</figure>
<figure class="key-letter letter-r">R</figure>
<figure class="key-letter letter-t">T</figure>
<figure class="key-letter letter-y">Y</figure>
<figure class="key-letter letter-u">U</figure>
<figure class="key-letter letter-i">I</figure>
<figure class="key-letter letter-o">O</figure>
<figure class="key-letter letter-p">P</figure>
<figure class="key-number press-left-bracket">{<br>[</figure>
<figure class="key-number press-right-bracket">}<br>]</figure>
<figure class="key-number right press-slash">|<br>\</figure>
<figure class="key-caps left press-caps">caps lock</figure>
<figure class="key-letter letter-a">A</figure>
<figure class="key-letter letter-s">S</figure>
<figure class="key-letter letter-d">D</figure>
<figure class="key-letter letter-f">F</figure>
<figure class="key-letter letter-g">G</figure>
<figure class="key-letter letter-h">H</figure>
<figure class="key-letter letter-j">J</figure>
<figure class="key-letter letter-k">K</figure>
<figure class="key-letter letter-l">L</figure>
<figure class="key-number press-colon">:<br>;</figure>
<figure class="key-number press-quote">"<br>'</figure>
<figure class="key-enter right press-return">return</figure>
<figure class="key-shift left press-shift">shift</figure>
<figure class="key-letter letter-z">Z</figure>
<figure class="key-letter letter-x">X</figure>
<figure class="key-letter letter-c">C</figure>
<figure class="key-letter letter-v">V</figure>
<figure class="key-letter letter-b">B</figure>
<figure class="key-letter letter-n">N</figure>
<figure class="key-letter letter-m">M</figure>
<figure class="key-number press-comma"><<br>,</figure>
<figure class="key-number press-dot">><br>.</figure>
<figure class="key-number press-question">?<br>/</figure>
<figure class="key-shift-right right">shift</figure>
<figure class="key-command fn left">fn</figure>
<figure class="key-command ctrl press-ctrl">ctrl</figure>
<figure class="key-command alt press-option"><span>alt</span>option</figure>
<figure class="key-command cmd press-command">command <i class="icon-command righty"></i></figure>
<figure class="key-spacebar press-spacebar"></figure>
<figure class="key-command cmd">command <i class="icon-command lefty"></i></figure>
<figure class="key-command alt"><span>alt</span>option</figure>
<figure class="arrow-left press-left"><i class="icon-arrow_left"></i></figure>
<div class="arrows">
<figure class="arrow-top press-up"><i class="icon-arrow_up"></i></figure>
<figure class="arrow-bottom press-down"><i class="icon-arrow_down"></i></figure>
</div>
<figure class="arrow-right press-right"><i class="icon-arrow_right"></i></figure>
</div>
</div>
<p class="credits">Made just for fun by: <a href="http://twitter.com/torres_jonathan" target="_blank">@torres_jonathan</a></p>
</div>
<script src="js/vendor/jquery-1.10.2.min.js"></script>
<script src="js/vendor/jquery-1.10.2.min.map"></script>
<script src="js/plugins.js"></script>
<script src="js/vendor/greensock/TweenMax.min.js"></script>
<script src="js/Keyboard.js"></script>
<script src="js/main.js"></script>
</body>
</html>