| <!DOCTYPE html>
|
| <html lang="zh-CN">
|
|
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Web 命令执行</title>
|
| <script src="https://cdn.tailwindcss.com"></script>
|
| <script src="https://cdn.jsdelivr.net/npm/xss@1.0.14/dist/xss.min.js"></script>
|
| <style>
|
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
|
|
|
| body {
|
| font-family: 'Noto Sans SC', sans-serif;
|
| }
|
| </style>
|
| </head>
|
|
|
| <body class="bg-gradient-to-r from-blue-100 to-purple-100 min-h-screen flex items-center justify-center">
|
| <div class="max-w-2xl w-full mx-auto bg-white p-8 rounded-lg shadow-xl">
|
| <h1 class="text-4xl font-bold mb-6 text-center text-blue-600">Web 命令执行</h1>
|
|
|
| <div id="loginForm" class="space-y-4">
|
| <input type="text" id="username" placeholder="用户名"
|
| class="p-3 border rounded w-full focus:ring-2 focus:ring-blue-300 transition">
|
| <input type="password" id="password" placeholder="密码"
|
| class="p-3 border rounded w-full focus:ring-2 focus:ring-blue-300 transition">
|
| <button id="loginButton"
|
| class="w-full bg-blue-500 text-white px-4 py-3 rounded hover:bg-blue-600 transition">登录</button>
|
| </div>
|
|
|
| <div id="commandInterface" style="display: none;" class="space-y-6">
|
| <p class="text-gray-600">此应用允许您在服务器上执行命令。请在下方输入命令并点击"执行"或按回车键。</p>
|
| <div class="flex">
|
| <input type="text" id="command" placeholder="输入命令"
|
| class="flex-grow p-3 border rounded-l focus:outline-none focus:ring-2 focus:ring-blue-300 transition">
|
| <button id="executeButton"
|
| class="bg-green-500 text-white px-6 py-3 rounded-r hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 transition">执行</button>
|
| </div>
|
| <div id="loadingIndicator" class="text-center" style="display: none;">
|
| <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
| </div>
|
| <div id="output" class="bg-gray-100 p-4 rounded h-64 overflow-y-auto font-mono text-sm"></div>
|
| <div>
|
| <h2 class="text-2xl font-bold mb-3 text-blue-600">命令历史</h2>
|
| <ul id="history" class="list-disc pl-5 space-y-2 text-gray-700"></ul>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script src="/js/main.js"></script>
|
| </body>
|
|
|
| </html> |
