Add templates/client.html

2025-02-10 07:57:00 +00:00 · 2025-02-10 07:57:00 +00:00 · fe82dd64d7
commit fe82dd64d7
parent 2b5a5acff9
1 changed files with 127 additions and 0 deletions
--- a/templates/client.html
+++ b/templates/client.html
@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web Telnet Terminal</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.css" />
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            background-color: #1e1e1e;
+            color: #fff;
+            font-family: Arial, sans-serif;
+        }
+        #terminal-container {
+            width: 800px;
+            height: 600px;
+            margin: 0 auto;
+            padding: 10px;
+            background-color: #000;
+            border-radius: 5px;
+        }
+        #connection-form {
+            margin: 0 auto 20px;
+            width: 800px;
+            display: flex;
+            gap: 10px;
+        }
+        input, button {
+            padding: 8px;
+            border: 1px solid #444;
+            border-radius: 4px;
+            background-color: #2d2d2d;
+            color: #fff;
+        }
+        input {
+            flex: 1;
+        }
+        button {
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #3d3d3d;
+        }
+    </style>
+</head>
+<body>
+    <div id="connection-form">
+        <input type="text" id="host" placeholder="Host" value="towel.blinkenlights.nl">
+        <input type="text" id="port" placeholder="Port" value="23">
+        <button onclick="connect()">Connect</button>
+        <button onclick="disconnect()">Disconnect</button>
+    </div>
+    <div id="terminal-container"></div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.js"></script>
+    <script>
+        let term = new Terminal({
+            cursorBlink: true,
+            theme: {
+                background: '#000',
+                foreground: '#fff'
+            }
+        });
+        let socket = null;
+        
+        term.open(document.getElementById('terminal-container'));
+        term.writeln('Welcome to Web Telnet Terminal');
+        term.writeln('Enter host and port, then click Connect');
+        
+        // Handle terminal input
+        term.onData(data => {
+            if (socket && socket.readyState === WebSocket.OPEN) {
+                socket.send(JSON.stringify({ type: 'input', data }));
+            }
+        });
+
+        function connect() {
+            const host = document.getElementById('host').value;
+            const port = document.getElementById('port').value;
+            
+            if (!host || !port) {
+                term.writeln('\r\nPlease enter both host and port');
+                return;
+            }
+
+            // Using a WebSocket proxy server for telnet connection
+            // Note: You'll need to set up a WebSocket proxy server to handle the actual telnet connection
+            const wsUrl = `ws://your-websocket-proxy-server/telnet?host=${encodeURIComponent(host)}&port=${port}`;
+            
+            try {
+                socket = new WebSocket(wsUrl);
+                
+                socket.onopen = () => {
+                    term.writeln(`\r\nConnected to ${host}:${port}`);
+                };
+                
+                socket.onmessage = (event) => {
+                    const message = JSON.parse(event.data);
+                    if (message.type === 'data') {
+                        term.write(message.data);
+                    }
+                };
+                
+                socket.onclose = () => {
+                    term.writeln('\r\nConnection closed');
+                };
+                
+                socket.onerror = (error) => {
+                    term.writeln('\r\nConnection error: ' + error.message);
+                };
+            } catch (error) {
+                term.writeln('\r\nFailed to connect: ' + error.message);
+            }
+        }
+
+        function disconnect() {
+            if (socket) {
+                socket.close();
+                socket = null;
+                term.writeln('\r\nDisconnected');
+            }
+        }
+    </script>
+</body>
+</html>