Advanced red neon sci-fi HUD overlay (scope only)
// ==UserScript==
// @name Sci-Fi HUD Scope Builder (Red) - Instant
// @namespace http://tampermonkey.net/
// @version 2.3
// @description Advanced red neon sci-fi HUD overlay (scope only)
// @license MIT
// @match https://shellshock.io/*
// @author ArhamZeeshan
// @grant none
// ==/UserScript==
(function () {
const hud = document.createElement("div");
hud.id = "hud-scope";
hud.innerHTML = `
<div class="center-ring"></div>
<div class="panel left">
<div class="title">SCANNING</div>
<div class="block"></div>
<div class="wave"></div>
</div>
<div class="panel right">
<div class="title">STATUS</div>
<div class="bars"></div>
<div class="text">SYS OK</div>
</div>
<div class="range">RANGE <span id="rangeVal">---</span>m</div>
`;
document.body.appendChild(hud);
/* RANDOM RANGE */
setInterval(() => {
const r = Math.floor(Math.random() * 900 + 100);
const el = document.getElementById("rangeVal");
if (el) el.textContent = r;
}, 600);
const css = `
#hud-scope {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0;
font-family: Orbitron, monospace;
color: #ff4d4d;
}
/* CENTER CIRCLE */
.center-ring {
position: absolute;
top: 50%;
left: 50%;
width: 70vh;
height: 70vh;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 3px solid rgba(255,50,50,0.9);
box-shadow: 0 0 20px rgba(255,0,0,0.9);
}
.center-ring::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
background:
repeating-conic-gradient(
rgba(255,0,0,0.9) 0deg,
rgba(255,0,0,0.9) 2deg,
transparent 2deg,
transparent 14deg
);
mask: radial-gradient(circle, transparent 72%, black 74%);
}
/* PANELS */
.panel {
position: absolute;
width: 220px;
height: 160px;
border: 1px solid rgba(255,0,0,0.7);
padding: 8px;
font-size: 12px;
box-shadow: inset 0 0 12px rgba(255,0,0,0.4);
}
.panel.left { left: 6%; top: 35%; }
.panel.right { right: 6%; top: 35%; }
.title {
font-size: 13px;
margin-bottom: 6px;
letter-spacing: 1px;
text-shadow: 0 0 6px rgba(255,80,80,0.9);
}
.block {
height: 60px;
background: repeating-linear-gradient(
to right,
rgba(255,0,0,0.8),
rgba(255,0,0,0.8) 4px,
transparent 4px,
transparent 10px
);
margin-bottom: 8px;
}
.wave {
height: 40px;
background: linear-gradient(
90deg,
transparent,
rgba(255,80,80,0.9),
transparent
);
animation: scan 1.2s infinite linear;
}
@keyframes scan {
from { background-position: 0 0; }
to { background-position: 200px 0; }
}
.bars {
height: 70px;
background: repeating-linear-gradient(
to top,
rgba(255,0,0,0.9),
rgba(255,0,0,0.9) 6px,
transparent 6px,
transparent 12px
);
margin-bottom: 8px;
}
.range {
position: absolute;
bottom: 18%;
left: 50%;
transform: translateX(-50%);
font-size: 18px;
letter-spacing: 2px;
color: #ff9999;
text-shadow: 0 0 10px rgba(255,0,0,0.9);
}
`;
document.head.insertAdjacentHTML("beforeend", `<style>${css}</style>`);
/* SCOPE DETECTION */
function checkScope() {
const mask = document.getElementById("maskmiddle");
if (mask) {
const visible =
mask.offsetWidth > 0 &&
getComputedStyle(mask).opacity !== "0" &&
getComputedStyle(mask).display !== "none";
hud.style.opacity = visible ? "1" : "0";
}
requestAnimationFrame(checkScope);
}
requestAnimationFrame(checkScope);
})();