This commit is contained in:
dobiadi
2025-12-04 01:43:09 +01:00
parent 0cb3f4f32a
commit 34317fec84
3 changed files with 227 additions and 74 deletions

View File

@@ -1,80 +1,210 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attack Status</title>
<style>
body {
font-family: Arial, sans-serif;
<head>
<meta charset="UTF-8" />
<title>Attack Status — Advent of Szamtech</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Segoe UI", Tahoma, sans-serif;
color: #fff;
text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
overflow: hidden;
position: relative;
transition: background-color 0.4s ease-in-out;
}
/* Cyber snowfall */
body::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(#0f0 1px, transparent 1px),
radial-gradient(#0f0 1px, transparent 1px);
background-size:
20px 20px,
25px 25px;
opacity: 0.07;
animation: snowfall 15s linear infinite;
pointer-events: none;
}
@keyframes snowfall {
from {
transform: translateY(-100px);
}
to {
transform: translateY(100px);
}
}
/* CRT scanlines */
body::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
to bottom,
rgba(255, 255, 255, 0.03) 0px,
rgba(255, 255, 255, 0.03) 2px,
transparent 3px,
transparent 4px
);
pointer-events: none;
}
/* Main status text */
#message {
font-size: 2.4rem;
margin-bottom: 20px;
animation: glowPulse 3s infinite;
}
@keyframes glowPulse {
0% {
text-shadow:
0 0 4px #fff,
0 0 12px #4fff4f;
}
50% {
text-shadow:
0 0 10px #7dff7d,
0 0 20px #00ff00;
}
100% {
text-shadow:
0 0 4px #fff,
0 0 12px #4fff4f;
}
}
/* Alert shimmer */
.alertShimmer {
animation: alertGlow 1.2s infinite alternate;
}
@keyframes alertGlow {
from {
text-shadow:
0 0 6px #ff0000,
0 0 20px #ff2020;
}
to {
text-shadow:
0 0 12px #ff4d4d,
0 0 35px #ff0000;
}
}
/* INFO PANEL under the attack text */
#infoPanel {
margin-top: 10px;
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 {
#targetLine,
#qpsLine {
font-size: 1.4rem;
color: #7dff7d;
text-shadow: 0 0 8px #00ff99;
margin-bottom: 10px;
}
/* STOP button */
#stopBtn {
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid rgba(255, 215, 0, 0.8);
background: radial-gradient(circle at 30% 30%, #ff7b7b, #990000);
box-shadow:
0 3px 0 #8c0000,
0 5px 10px rgba(0,0,0,0.4);
transform: translateY(5px);
}
</style>
</head>
<body>
0 0 20px #ff2e2e,
0 0 50px #ff0000,
0 10px 20px rgba(0, 0, 0, 0.6);
font-size: 2.4rem;
font-weight: bold;
color: #fff;
cursor: pointer;
display: none;
transition: all 0.15s ease-in-out;
position: relative;
margin-top: 35px;
}
<div id="message"></div>
<button id="stopBtn">STOP</button>
#stopBtn::before {
content: "";
position: absolute;
top: 10px;
left: 50px;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
filter: blur(12px);
}
<script>
// Server-side injected value
const attack = {{ attack }};
#stopBtn:active {
transform: translateY(6px) scale(0.96);
box-shadow:
0 0 15px #ff2e2e,
0 5px 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div id="message"></div>
const message = document.getElementById("message");
const stopBtn = document.getElementById("stopBtn");
<!-- Info Panel -->
<div id="infoPanel">
<div id="targetLine">Target: <strong id="targetSpan"></strong></div>
<div id="qpsLine">QPS: <strong id="qpsSpan"></strong></div>
</div>
const green = () => {
document.body.style.backgroundColor = "#7dff7d"; // green background
message.textContent = "✅ The attack has been stopped.";
stopBtn.style.display = "none";
}
<button id="stopBtn">STOP</button>
stopBtn.onclick = async () => {
await fetch("/stop");
green();
};
<script>
const attack = {{ attack }};
const target = "{{ url }}";
const qps = "{{ qps }}";
if (attack) {
document.body.style.backgroundColor = "#ff4d4d"; // red background
message.textContent = "⚠️ Attack in progress...";
stopBtn.style.display = "inline-block";
} else {
green();
}
</script>
const message = document.getElementById("message");
const stopBtn = document.getElementById("stopBtn");
</body>
const infoPanel = document.getElementById("infoPanel");
const targetSpan = document.getElementById("targetSpan");
const qpsSpan = document.getElementById("qpsSpan");
const green = () => {
document.body.style.backgroundColor = "#004d00";
message.innerHTML = "🎄✨ <span style='color:#7dff7d'>Sikeresen megallitottatok Gr(F)inch-et</span> ✨🎄";
message.classList.remove("alertShimmer");
stopBtn.style.display = "none";
infoPanel.style.display = "none";
};
stopBtn.onclick = async () => {
await fetch("/stop");
green();
};
if (attack) {
document.body.style.backgroundColor = "#3b0000";
message.textContent = "⚠️ Gr(F)inch anti-Karacsony DoS tamadas aktiv... ⚠️";
message.classList.add("alertShimmer");
// print target & qps
targetSpan.textContent = target;
qpsSpan.textContent = qps;
infoPanel.style.display = "block";
stopBtn.style.display = "inline-block";
} else {
green();
}
</script>
</body>
</html>