|
|
<!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> |
