| <!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>
|
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Fira+Code&display=swap"
|
| rel="stylesheet">
|
| <style>
|
| body {
|
| font-family: 'Inter', sans-serif;
|
| }
|
|
|
| .terminal {
|
| font-family: 'Fira Code', monospace;
|
| }
|
|
|
| @keyframes glow {
|
| 0% {
|
| box-shadow: 0 0 5px rgba(66, 153, 225, 0.5);
|
| }
|
|
|
| 50% {
|
| box-shadow: 0 0 20px rgba(66, 153, 225, 0.8);
|
| }
|
|
|
| 100% {
|
| box-shadow: 0 0 5px rgba(66, 153, 225, 0.5);
|
| }
|
| }
|
|
|
| .glow-effect {
|
| animation: glow 2s infinite;
|
| }
|
| </style>
|
| </head>
|
|
|
| <body
|
| class="bg-gradient-to-br from-gray-900 via-blue-900 to-blue-700 min-h-screen flex items-center justify-center p-4">
|
| <div
|
| class="max-w-4xl w-full mx-auto bg-gray-800 p-8 rounded-3xl shadow-2xl transition-all duration-300 ease-in-out hover:shadow-3xl border border-blue-500">
|
| <h1 class="text-5xl font-bold mb-8 text-center text-blue-400 tracking-tight glow-effect">Web 命令执行器</h1>
|
|
|
| <div id="loginForm" class="space-y-6">
|
| <input type="text" id="username" placeholder="用户名"
|
| class="p-4 border-2 border-blue-500 rounded-lg w-full bg-gray-700 text-white focus:ring-2 focus:ring-blue-300 transition-all duration-200 ease-in-out placeholder-gray-400">
|
| <input type="password" id="password" placeholder="密码"
|
| class="p-4 border-2 border-blue-500 rounded-lg w-full bg-gray-700 text-white focus:ring-2 focus:ring-blue-300 transition-all duration-200 ease-in-out placeholder-gray-400">
|
| <button id="loginButton"
|
| class="w-full bg-blue-600 text-white px-6 py-4 rounded-lg hover:bg-blue-700 transition-all duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">登录</button>
|
| </div>
|
|
|
| <div id="commandInterface" style="display: none;" class="space-y-8">
|
| <p class="text-blue-300 text-center text-lg">在下方输入命令并点击"执行"或按回车键来在服务器上执行命令。</p>
|
| <div class="flex">
|
| <input type="text" id="command" placeholder="输入命令"
|
| class="flex-grow p-4 border-2 border-blue-500 rounded-l-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all duration-200 ease-in-out placeholder-gray-400 terminal">
|
| <button id="executeButton"
|
| class="bg-green-500 text-white px-8 py-4 rounded-r-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 transition-all duration-200 ease-in-out transform hover:scale-105">执行</button>
|
| </div>
|
| <div id="loadingIndicator" class="text-center" style="display: none;">
|
| <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-blue-500">
|
| </div>
|
| </div>
|
| <div id="output"
|
| class="bg-gray-900 p-6 rounded-lg h-80 overflow-y-auto terminal text-green-400 text-sm leading-relaxed">
|
| </div>
|
| <div>
|
| <h2 class="text-3xl font-bold mb-4 text-blue-400">命令历史</h2>
|
| <ul id="history" class="space-y-2 text-gray-300"></ul>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script src="/js/main.js"></script>
|
| </body>
|
|
|
| </html> |
