Files
aoszdos/templates/index.html

211 lines
5.3 KiB
HTML
Raw Normal View History

2025-12-04 01:43:09 +01:00
<!doctype html>
2025-12-03 19:31:49 +01:00
<html lang="en">
2025-12-04 01:43:09 +01:00
<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;
2025-12-03 19:31:49 +01:00
text-align: center;
2025-12-04 01:43:09 +01:00
display: none;
}
#targetLine,
#qpsLine {
font-size: 1.4rem;
color: #7dff7d;
text-shadow: 0 0 8px #00ff99;
margin-bottom: 10px;
}
/* STOP button */
#stopBtn {
width: 200px;
height: 200px;
2025-12-03 19:31:49 +01:00
border-radius: 50%;
2025-12-04 01:43:09 +01:00
border: 10px solid rgba(255, 215, 0, 0.8);
background: radial-gradient(circle at 30% 30%, #ff7b7b, #990000);
box-shadow:
0 0 20px #ff2e2e,
0 0 50px #ff0000,
0 10px 20px rgba(0, 0, 0, 0.6);
font-size: 2.4rem;
2025-12-03 19:31:49 +01:00
font-weight: bold;
2025-12-04 01:43:09 +01:00
color: #fff;
2025-12-03 19:31:49 +01:00
cursor: pointer;
display: none;
2025-12-04 01:43:09 +01:00
transition: all 0.15s ease-in-out;
position: relative;
margin-top: 35px;
}
#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);
}
2025-12-03 19:31:49 +01:00
2025-12-04 01:43:09 +01:00
#stopBtn:active {
transform: translateY(6px) scale(0.96);
2025-12-03 19:31:49 +01:00
box-shadow:
2025-12-04 01:43:09 +01:00
0 0 15px #ff2e2e,
0 5px 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div id="message"></div>
<!-- Info Panel -->
<div id="infoPanel">
<div id="targetLine">Target: <strong id="targetSpan"></strong></div>
<div id="qpsLine">QPS: <strong id="qpsSpan"></strong></div>
</div>
<button id="stopBtn">STOP</button>
<script>
const attack = {{ attack }};
const target = "{{ url }}";
const qps = "{{ qps }}";
const message = document.getElementById("message");
const stopBtn = document.getElementById("stopBtn");
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>
2025-12-03 19:31:49 +01:00
</html>