Keyboard Event Logger

\n {events.map((event, index) => (\n

\n {event.timestamp}\n {event.type}\n \n Key: {event.key}, Code: {event.code}, KeyCode: {event.keyCode}\n \n \n Ctrl: {event.ctrlKey.toString()}, \n Alt: {event.altKey.toString()}, \n Shift: {event.shiftKey.toString()}, \n Meta: {event.metaKey.toString()}\n \n Repeat: {event.repeat.toString()}\n

\n ))}\n

Start typing to see keyboard events logged above.

\n View source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Keyboard Event Logger\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f0f0f0;\n}\n.container {\n max-width: 800px;\n margin: 0 auto;\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\nh1 {\n color: #333;\n}\n.log {\n height: 400px;\n overflow-y: auto;\n border: 1px solid #ccc;\n padding: 10px;\n margin-bottom: 20px;\n font-family: monospace;\n background-color: #f8f8f8;\n}\n.log-entry {\n margin-bottom: 5px;\n padding: 5px;\n border-bottom: 1px solid #eee;\n}\n.timestamp {\n color: #888;\n margin-right: 10px;\n}\n.event-type {\n font-weight: bold;\n margin-right: 10px;\n}\n.keydown { color: #4CAF50; }\n.keyup { color: #F44336; }\n.keypress { color: #2196F3; }\n.key-info, .modifiers, .repeat {\n margin-right: 10px;\n}\np {\n color: #666;\n}\na {\n color: #0066cc;\n text-decoration: none;\n}\na:hover {\n text-decoration: underline;\n}\n`;","deleted","label","children",[],[152],"files",[150],"counts",{"_172":32,"_173":137,"_174":32,"_175":32},"pulls","branches","forks","envVars","contents",[178],{"_102":151,"_95":152,"_153":115,"_154":-5,"_155":138,"_156":137,"_157":108,"_104":179,"_99":32,"_159":160,"_161":162,"_163":22,"_164":-5,"_98":180},["D",1745781374593],[152],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":190,"_176":195,"_198":-7,"_199":-5,"_200":-5,"_168":201,"_205":206},{"_102":103,"_95":96,"_104":191,"_106":-5,"_107":108,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":108,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":192,"_132":193,"_135":194,"_147":22},["D",1745781464346],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_102":138,"_139":103,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[196],{"_102":151,"_95":152,"_153":115,"_154":-5,"_155":138,"_156":137,"_157":108,"_104":179,"_99":32,"_159":160,"_161":162,"_163":22,"_164":-5,"_98":197},[152],"readme","upstream","pull",[202],{"_102":151,"_95":152,"_153":115,"_154":-5,"_155":138,"_156":137,"_157":108,"_104":158,"_99":32,"_159":160,"_161":162,"_163":22,"_164":-5,"_165":203,"_98":204},[],[152],"previews",[202],"actionData","errors"]