Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Shell and File Manager</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/basic.css" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.js"></script> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #2e2e2e; | |
| color: #ffffff; | |
| margin: 0; | |
| padding: 20px; | |
| } | |
| h1 { | |
| color: #ffffff; | |
| border-bottom: 1px solid #444; | |
| padding-bottom: 10px; | |
| } | |
| #output { | |
| border: 1px solid #444; | |
| padding: 10px; | |
| height: 200px; | |
| overflow-y: scroll; | |
| background-color: #1e1e1e; | |
| color: #ffffff; | |
| font-family: 'Courier New', Courier, monospace; | |
| white-space: pre-wrap; /* 保留空格和换行 */ | |
| } | |
| #input { | |
| width: calc(100% - 22px); | |
| padding: 10px; | |
| margin-top: 10px; | |
| border: 1px solid #444; | |
| background-color: #1e1e1e; | |
| color: #ffffff; | |
| font-family: 'Courier New', Courier, monospace; | |
| border-radius: 4px; | |
| } | |
| button { | |
| padding: 10px 15px; | |
| background-color: #444; | |
| color: #ffffff; | |
| border: none; | |
| cursor: pointer; | |
| margin-left: 5px; | |
| border-radius: 4px; | |
| } | |
| button:hover { | |
| background-color: #555; | |
| } | |
| .dropzone { | |
| border: 2px dashed #444; | |
| background-color: #1e1e1e; | |
| color: #ffffff; | |
| padding: 20px; | |
| margin-top: 20px; | |
| border-radius: 4px; | |
| } | |
| .dropzone .dz-message { | |
| color: #ffffff; | |
| } | |
| a { | |
| color: #1e90ff; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Shell</h1> | |
| <div id="output"></div> | |
| <input id="input" type="text" placeholder="Type your command here..." /> | |
| <button onclick="sendInput()">Send</button> | |
| <h1>File Upload</h1> | |
| <form action="/upload" class="dropzone" id="my-dropzone"> | |
| <div class="dz-message">Drop files here or click to upload.</div> | |
| </form> | |
| <h1>File Manager</h1> | |
| <p><a href="/files">Go to File Manager</a></p> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script> | |
| <script> | |
| var socket = io(); | |
| socket.on('output', function(data) { | |
| // 使用 <pre> 标签来保留格式 | |
| document.getElementById('output').innerHTML += data + '\n'; | |
| var outputDiv = document.getElementById('output'); | |
| outputDiv.scrollTop = outputDiv.scrollHeight; // 自动滚动到最新输出 | |
| }); | |
| function sendInput() { | |
| var input = document.getElementById('input').value; | |
| if (input.trim() !== '') { // 确保输入不为空 | |
| socket.emit('input', input); | |
| document.getElementById('input').value = ''; | |
| } | |
| } | |
| // 监听输入框的键盘事件 | |
| document.getElementById('input').addEventListener('keydown', function(event) { | |
| if (event.key === 'Enter') { | |
| sendInput(); // 按下回车时执行命令 | |
| event.preventDefault(); // 防止表单提交 | |
| } | |
| }); | |
| // Dropzone configuration | |
| Dropzone.options.myDropzone = { | |
| paramName: "file", // The name that will be used to transfer the file | |
| maxFilesize: 3, // MB | |
| acceptedFiles: "image/*,application/pdf,.zip,.tar,.gz,.txt,.csv,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.mp4,.mp3,.avi,.mov,.mkv,.jpg,.jpeg,.png,.gif", // Acceptable file types | |
| success: function(file, response) { | |
| console.log("File uploaded successfully:", response); | |
| }, | |
| error: function(file, response) { | |
| console.error("Error uploading file:", response); | |
| } | |
| }; | |
| </script> | |
| </body> | |
| </html> | |