Spaces:
Paused
Paused
File size: 4,245 Bytes
643de08 f6340fc d94c431 e44d5f8 f6340fc 21266ea f6340fc 21266ea f6340fc 21266ea f6340fc 21266ea 34b0949 21266ea 34b0949 21266ea 34b0949 21266ea 34b0949 21266ea f6340fc e44d5f8 643de08 f6340fc e44d5f8 21266ea f6340fc 34b0949 f6340fc 643de08 f6340fc 643de08 e44d5f8 34b0949 21266ea e44d5f8 643de08 f6340fc 34b0949 f6340fc d94c431 34b0949 d94c431 643de08 e44d5f8 |
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 |
<!DOCTYPE html>
<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>
|