-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (120 loc) · 4.31 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
125
<!--
Project Name - Virtual Interactive Keyboard
Author - Devang Joshi
-->
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta
name="description"
content="A Virtual Interactive Keyboard which replicates every key you press and a Text-Area in which everything is written and can be copied to the clipboard with a click of a button"
/>
<meta
name="keywords"
content="HTML, CSS, JavaScript, Virtual, Interactive, Keyboard, Web, Application"
/>
<meta name="author" content="Devang Joshi" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Virtual Interactive Keyboard</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body class="transition">
<div class="themeMode transition">
<input type="checkbox" name="themeMode" id="themeMode" />
<label for="themeMode" class="transition">Light/Dark Mode</label>
</div>
<div class="main">
<div class="textdiv">
<textarea
id="textArea"
class="transition"
placeholder="Hey Write Up Something..."
disabled
></textarea>
<i class="material-icons transition">content_copy</i>
</div>
<div class="bgKeyboard transition">
<div class="startMsg transition">Press any key to Continue...</div>
<div class="keyboard">
<div class="row numberLine">
<div class="blacktick">`</div>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
<div class="seven">7</div>
<div class="eight">8</div>
<div class="nine">9</div>
<div class="zero">0</div>
<div class="minus">-</div>
<div class="equalsTo">=</div>
<div class="backspace">BACKSPACE</div>
</div>
<div class="row alphaUpperLine">
<div class="tab">TAB</div>
<div class="q">Q</div>
<div class="w">W</div>
<div class="e">E</div>
<div class="r">R</div>
<div class="t">T</div>
<div class="y">Y</div>
<div class="u">U</div>
<div class="i">I</div>
<div class="o">O</div>
<div class="p">P</div>
<div class="openedBracket">[</div>
<div class="closedBracket">]</div>
<div class="backSlash">\</div>
</div>
<div class="row alphaMiddleLine">
<div class="capslock">CAPS<br />LOCK</div>
<div class="a">A</div>
<div class="s">S</div>
<div class="d">D</div>
<div class="f">F</div>
<div class="g">G</div>
<div class="h">H</div>
<div class="j">J</div>
<div class="k">K</div>
<div class="l">L</div>
<div class="semicolon">;</div>
<div class="quote">'</div>
<div class="enter">ENTER</div>
</div>
<div class="row alphaLowerLine">
<div class="lShift">SHIFT</div>
<div class="z">Z</div>
<div class="x">X</div>
<div class="c">C</div>
<div class="v">V</div>
<div class="b">B</div>
<div class="n">N</div>
<div class="m">M</div>
<div class="comma">,</div>
<div class="fullstop">.</div>
<div class="frontSlash">/</div>
<div class="rShift">SHIFT</div>
</div>
<div class="row BottomLine">
<div class="lCtrl">CTRL</div>
<div class="lFunction">FN</div>
<div class="win">WIN</div>
<div class="lAlt">ALT</div>
<div class="space">SPACE</div>
<div class="rAlt">ALT</div>
<div class="rFunction">FN</div>
<div class="rCtrl">CTRL</div>
</div>
</div>
</div>
</div>
</body>
</html>