File size: 3,940 Bytes
565dfa2 158961a 565dfa2 246bcdf 158961a 8801327 da5d623 246bcdf da5d623 8801327 da5d623 565dfa2 246bcdf 8801327 246bcdf 8801327 158961a 8801327 da5d623 8801327 da5d623 8801327 da5d623 8801327 158961a 565dfa2 8801327 da5d623 158961a 8801327 158961a 8801327 158961a da5d623 8801327 246bcdf 158961a 8801327 da5d623 8801327 da5d623 158961a 565dfa2 158961a 565dfa2 |
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 |
<!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> |