81 lines
1.9 KiB
HTML
81 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Attack Status</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
text-align: center;
|
|
margin-top: 100px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
#message {
|
|
font-size: 2rem;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
/* Emergency STOP button */
|
|
#stopBtn {
|
|
width: 180px;
|
|
height: 180px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 30% 30%, #ff6b6b, #b30000);
|
|
border: 12px solid #f1c40f; /* yellow ring */
|
|
box-shadow:
|
|
0 8px 0 #8c0000, /* top shadow */
|
|
0 15px 20px rgba(0,0,0,0.5);
|
|
color: white;
|
|
font-size: 2.2rem;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: all 0.1s ease-in-out;
|
|
display: none;
|
|
}
|
|
|
|
/* Pressed effect */
|
|
#stopBtn:active {
|
|
box-shadow:
|
|
0 3px 0 #8c0000,
|
|
0 5px 10px rgba(0,0,0,0.4);
|
|
transform: translateY(5px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="message"></div>
|
|
<button id="stopBtn">STOP</button>
|
|
|
|
<script>
|
|
// Server-side injected value
|
|
const attack = {{ attack }};
|
|
|
|
const message = document.getElementById("message");
|
|
const stopBtn = document.getElementById("stopBtn");
|
|
|
|
const green = () => {
|
|
document.body.style.backgroundColor = "#7dff7d"; // green background
|
|
message.textContent = "✅ The attack has been stopped.";
|
|
stopBtn.style.display = "none";
|
|
}
|
|
|
|
stopBtn.onclick = async () => {
|
|
await fetch("/stop");
|
|
green();
|
|
};
|
|
|
|
if (attack) {
|
|
document.body.style.backgroundColor = "#ff4d4d"; // red background
|
|
message.textContent = "⚠️ Attack in progress...";
|
|
stopBtn.style.display = "inline-block";
|
|
} else {
|
|
green();
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|