-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (153 loc) · 5.81 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Keystroke Logger</title>
<link rel="stylesheet" href="styles/output.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/python/python.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/monokai.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/dracula.min.css"
/>
<link
id="favicon"
rel="icon"
type="image/svg"
href="https://www.svgrepo.com/show/702/keyboard.svg"
/>
</head>
<body
class="text-slate-900 dark:text-white bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500"
>
<div class="w-4/5 h-4/5 mx-auto">
<div
class="flex flex-col md:flex-row items-center md:items-start space-y-14 md:space-y-0 mt-10 mb-10 md:mt-20 justify-center mx-auto md:space-x-20"
>
<div
class="flex flex-col h-1/4 w-1/2 rounded-xl gap-4 border border-slate-600 dark:border-indigo-300"
>
<h2
class="text-xl px-4 border border-b-1 border-l-0 border-r-0 border-t-0 border-slate-600 dark:border-indigo-300"
>
Record area
</h2>
<textarea
id="inputArea"
rows="10"
cols="50"
placeholder="Type here..."
class="w-full h-32 dark:bg-slate-800 border border-slate-600 dark:border-indigo-300"
></textarea>
<div
class="flex flex-col md:flex-row items-center mx-auto md:w-1/2 p-3 md:justify-center"
>
<button
class="text-xs mb-4 md:mr-4 px-5 py-2 rounded-lg btn bg-gray-700 border border-red-700 hover hover:bg-gray-500 active:bg-gray-500"
id="record-start"
>
⭕
</button>
<button
class="text-xs mb-4 md:mr-4 px-5 py-2 rounded-lg btn bg-red-700 border border-red-700 hover hover:bg-red-500 active:bg-red-500"
id="record-stop"
>
▐▐
</button>
<button
class="text-md mb-4 md:mr-4 px-5 py-1 rounded-lg btn bg-blue-600 border border-blue-700 hover hover:bg-blue-500"
id="record-clear"
>
↻
</button>
<div
class="border border-slate-600 dark:border-indigo-300 px-4 mb-4"
id="timer-display-id"
>
<h1>Time</h1>
<p id="record-timer">00:00</p>
</div>
</div>
<div
class="border border-b-0 border-l-0 border-r-0 border-t-1 border-slate-600 dark:border-indigo-300 h-1/4"
>
<div id="log"></div>
</div>
</div>
<div
class="flex flex-col h-1/4 w-1/2 rounded-xl gap-4 border border-slate-600 dark:border-indigo-300"
>
<h2
class="text-xl px-4 border border-b-1 border-l-0 border-r-0 border-t-0 border-slate-600 dark:border-indigo-300"
>
Replay area
</h2>
<textarea
class="w-full h-32 dark:bg-slate-800 border border-slate-600 dark:border-indigo-300"
id="outputArea"
></textarea>
<div class="flex flex-col items-center justify-center">
<div
class="relative h-1/4 w-1/2 right-3 bottom-0 pt-8"
id="replay-scanner"
>
<div
class="absolute bottom-4 h-1 w-full bg-cyan-500 opacity-75"
id="scanner-bar"
></div>
<div class="absolute bottom-3 left-0" id="scanner-pointer">
<div
class="tranistion ease-in-out w-3 h-3 rounded-lg bg-red-500 hover hover:scale-150 hover:bg-indigo-500 duration-300"
id="scanner-pointer-element"
></div>
</div>
</div>
<div
class="flex flex-col md:flex-row items-center justify-center mx-auto md:w-1/2 p-3 md:justify-center"
>
<button
class="text-lg mb-4 md:mr-4 px-5 py-0.5 rounded-lg btn bg-green-700 border border-green-700 hover hover:bg-green-500 active:bg-green-500"
id="replay-start"
>
▶
</button>
<button
class="text-xs mb-4 md:mr-4 px-5 py-2 rounded-lg btn bg-red-700 border border-red-700 hover hover:bg-red-500 active:bg-red-500"
id="replay-stop"
>
▐▐
</button>
<button
class="text-xs mb-4 md:mr-4 px-5 py-2 rounded-lg btn bg-blue-700 border border-blue-700 hover hover:bg-blue-500 active:bg-blue-500"
id="copyButton"
>
Copy
</button>
<div
class="border border-slate-600 dark:border-indigo-300 px-4 mb-4"
id="timer-display-id"
>
<h1>Time</h1>
<p id="replay-timer">00:00</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="js/storage.js"></script>
<script type="module" src="js/record.js"></script>
<script type="module" src="js/replay.js"></script>
<script type="module" src="js/codemirror.js"></script>
<script type="module" src="js/scanner.js"></script>
</body>
</html>