Updates
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user