|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Terminator Targeting Display</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); |
|
|
|
body { |
|
background-color: black; |
|
overflow: hidden; |
|
font-family: 'Orbitron', sans-serif; |
|
cursor: none; |
|
} |
|
|
|
.scanline { |
|
position: absolute; |
|
width: 100%; |
|
height: 2px; |
|
background: rgba(255, 0, 0, 0.5); |
|
box-shadow: 0 0 10px rgba(255, 0, 0, 0.7); |
|
animation: scan 4s linear infinite; |
|
z-index: 100; |
|
} |
|
|
|
@keyframes scan { |
|
0% { top: 0%; } |
|
100% { top: 100%; } |
|
} |
|
|
|
.grid-overlay { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
background-image: |
|
linear-gradient(rgba(255, 0, 0, 0.1) 1px, transparent 1px), |
|
linear-gradient(90deg, rgba(255, 0, 0, 0.1) 1px, transparent 1px); |
|
background-size: 20px 20px; |
|
z-index: 1; |
|
} |
|
|
|
.target-box { |
|
position: absolute; |
|
border: 2px solid red; |
|
box-shadow: 0 0 15px rgba(255, 0, 0, 0.7); |
|
z-index: 10; |
|
transition: all 0.2s; |
|
} |
|
|
|
.target-box.identified { |
|
border-color: #00ff00; |
|
box-shadow: 0 0 15px rgba(0, 255, 0, 0.7); |
|
background-color: rgba(0, 255, 0, 0.1); |
|
} |
|
|
|
.target-box.destroyed { |
|
border-color: #ff0000; |
|
box-shadow: 0 0 30px rgba(255, 0, 0, 0.9); |
|
background-color: rgba(255, 0, 0, 0.3); |
|
opacity: 0.5; |
|
} |
|
|
|
.target-crosshair { |
|
position: absolute; |
|
width: 30px; |
|
height: 30px; |
|
border: 2px solid red; |
|
box-shadow: 0 0 15px rgba(255, 0, 0, 0.7); |
|
z-index: 20; |
|
pointer-events: none; |
|
} |
|
|
|
.target-crosshair:before, .target-crosshair:after { |
|
content: ''; |
|
position: absolute; |
|
background: red; |
|
box-shadow: 0 0 5px rgba(255, 0, 0, 0.7); |
|
} |
|
|
|
.target-crosshair:before { |
|
width: 2px; |
|
height: 30px; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
} |
|
|
|
.target-crosshair:after { |
|
width: 30px; |
|
height: 2px; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
} |
|
|
|
.target-crosshair.firing { |
|
animation: firing 0.3s 1; |
|
} |
|
|
|
@keyframes firing { |
|
0% { transform: translate(-50%, -50%) scale(1); } |
|
50% { transform: translate(-50%, -50%) scale(1.5); } |
|
100% { transform: translate(-50%, -50%) scale(1); } |
|
} |
|
|
|
.data-display { |
|
position: absolute; |
|
color: red; |
|
text-shadow: 0 0 5px rgba(255, 0, 0, 0.7); |
|
font-family: 'Orbitron', sans-serif; |
|
font-size: 12px; |
|
z-index: 5; |
|
} |
|
|
|
.flicker { |
|
animation: flicker 0.1s infinite alternate; |
|
} |
|
|
|
@keyframes flicker { |
|
0% { opacity: 0.7; } |
|
100% { opacity: 1; } |
|
} |
|
|
|
.glitch { |
|
position: relative; |
|
} |
|
|
|
.glitch::before, .glitch::after { |
|
content: attr(data-text); |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.glitch::before { |
|
left: 2px; |
|
text-shadow: -2px 0 #00ff00; |
|
clip: rect(44px, 450px, 56px, 0); |
|
animation: glitch-anim 5s infinite linear alternate-reverse; |
|
} |
|
|
|
.glitch::after { |
|
left: -2px; |
|
text-shadow: -2px 0 blue; |
|
clip: rect(44px, 450px, 56px, 0); |
|
animation: glitch-anim2 5s infinite linear alternate-reverse; |
|
} |
|
|
|
@keyframes glitch-anim { |
|
0% { clip: rect(31px, 9999px, 94px, 0); } |
|
10% { clip: rect(112px, 9999px, 76px, 0); } |
|
20% { clip: rect(85px, 9999px, 77px, 0); } |
|
30% { clip: rect(27px, 9999px, 97px, 0); } |
|
40% { clip: rect(64px, 9999px, 98px, 0); } |
|
50% { clip: rect(61px, 9999px, 85px, 0); } |
|
60% { clip: rect(99px, 9999px, 114px, 0); } |
|
70% { clip: rect(34px, 9999px, 115px, 0); } |
|
80% { clip: rect(98px, 9999px, 129px, 0); } |
|
90% { clip: rect(43px, 9999px, 96px, 0); } |
|
100% { clip: rect(82px, 9999px, 64px, 0); } |
|
} |
|
|
|
@keyframes glitch-anim2 { |
|
0% { clip: rect(65px, 9999px, 119px, 0); } |
|
10% { clip: rect(66px, 9999px, 101px, 0); } |
|
20% { clip: rect(33px, 9999px, 117px, 0); } |
|
30% { clip: rect(147px, 9999px, 93px, 0); } |
|
40% { clip: rect(55px, 9999px, 97px, 0); } |
|
50% { clip: rect(122px, 9999px, 113px, 0); } |
|
60% { clip: rect(15px, 9999px, 44px, 0); } |
|
70% { clip: rect(112px, 9999px, 72px, 0); } |
|
80% { clip: rect(42px, 9999px, 60px, 0); } |
|
90% { clip: rect(134px, 9999px, 99px, 0); } |
|
100% { clip: rect(78px, 9999px, 38px, 0); } |
|
} |
|
|
|
.pulse { |
|
animation: pulse 1s infinite alternate; |
|
} |
|
|
|
@keyframes pulse { |
|
0% { opacity: 0.5; } |
|
100% { opacity: 1; } |
|
} |
|
|
|
.laser-beam { |
|
position: absolute; |
|
height: 2px; |
|
background: linear-gradient(90deg, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 50%, rgba(255,0,0,0) 100%); |
|
box-shadow: 0 0 10px rgba(255, 0, 0, 0.8); |
|
z-index: 15; |
|
transform-origin: left center; |
|
pointer-events: none; |
|
} |
|
|
|
.target-id { |
|
position: absolute; |
|
color: #00ff00; |
|
font-size: 10px; |
|
text-shadow: 0 0 3px #00ff00; |
|
z-index: 11; |
|
white-space: nowrap; |
|
} |
|
|
|
.damage-effect { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
background: radial-gradient(circle, rgba(255,0,0,0.3) 0%, rgba(255,0,0,0) 70%); |
|
z-index: 25; |
|
pointer-events: none; |
|
opacity: 0; |
|
} |
|
</style> |
|
</head> |
|
<body class="h-screen w-screen bg-black relative"> |
|
<div class="scanline"></div> |
|
<div class="grid-overlay"></div> |
|
<div id="damage-effect" class="damage-effect"></div> |
|
|
|
<div id="crosshair" class="target-crosshair absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div> |
|
|
|
<div id="targets-container"></div> |
|
|
|
<div class="data-display top-4 left-4"> |
|
<div class="glitch flicker" data-text="T-800 VISUAL PROCESSOR">T-800 VISUAL PROCESSOR</div> |
|
<div class="mt-2 pulse">SYSTEMS: <span class="text-green-500">ONLINE</span></div> |
|
<div class="mt-1">TARGETS: <span id="target-count">0</span>/<span id="targets-destroyed">0</span></div> |
|
<div class="mt-1">THREAT LEVEL: <span id="threat-level">NONE</span></div> |
|
<div class="mt-1">TARGET ID: <span id="current-target-id">NONE</span></div> |
|
</div> |
|
|
|
<div class="data-display top-4 right-4 text-right"> |
|
<div class="glitch" data-text="SKYNET v3.5.7">SKYNET v3.5.7</div> |
|
<div class="mt-2">MISSION: <span class="text-red-500">TERMINATE</span></div> |
|
<div class="mt-1">T-800 UNITS: <span class="text-green-500">1</span></div> |
|
<div class="mt-1">TIME: <span id="time">00:00:00</span></div> |
|
<div class="mt-1">WEAPON: <span class="text-yellow-500">PLASMA RIFLE</span></div> |
|
</div> |
|
|
|
<div class="data-display bottom-4 left-4"> |
|
<div class="glitch" data-text="TARGET ANALYSIS">TARGET ANALYSIS</div> |
|
<div class="mt-2" id="target-info">NO TARGET LOCKED</div> |
|
<div class="mt-1" id="target-status">STATUS: UNKNOWN</div> |
|
</div> |
|
|
|
<div class="data-display bottom-4 right-4 text-right"> |
|
<div class="glitch" data-text="WEAPONS SYSTEMS">WEAPONS SYSTEMS</div> |
|
<div class="mt-2">STATUS: <span class="text-green-500">ARMED</span></div> |
|
<div class="mt-1">AMMO: <span class="text-yellow-500">∞</span></div> |
|
<div class="mt-1">FIRE MODE: <span class="text-red-500">AUTO</span></div> |
|
<div class="mt-1">LAST ACTION: <span id="last-action">NONE</span></div> |
|
</div> |
|
|
|
<div id="debug" class="data-display bottom-2 left-1/2 transform -translate-x-1/2 text-center text-xs opacity-50"> |
|
CLICK TO ADD TARGETS | RIGHT CLICK TO FIRE | MOUSE MOVE TO AIM |
|
</div> |
|
|
|
<audio id="target-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-sci-fi-positive-interface-beep-257.mp3" preload="auto"></audio> |
|
<audio id="lock-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-explosion-2759.mp3" preload="auto"></audio> |
|
<audio id="fire-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-laser-weapon-shot-1670.mp3" preload="auto"></audio> |
|
<audio id="hit-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-explosion-impact-1684.mp3" preload="auto"></audio> |
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', function() { |
|
let currentTarget = null; |
|
let identifiedTargets = []; |
|
let destroyedTargets = []; |
|
|
|
|
|
function updateTime() { |
|
const now = new Date(); |
|
const timeStr = now.toLocaleTimeString('en-US', {hour12: false}); |
|
document.getElementById('time').textContent = timeStr; |
|
} |
|
setInterval(updateTime, 1000); |
|
updateTime(); |
|
|
|
|
|
function createRandomTarget() { |
|
const target = document.createElement('div'); |
|
target.className = 'target-box absolute w-16 h-24 bg-red-500 bg-opacity-10'; |
|
|
|
|
|
const x = Math.random() * (window.innerWidth - 200) + 100; |
|
const y = Math.random() * (window.innerHeight - 200) + 100; |
|
|
|
target.style.left = `${x}px`; |
|
target.style.top = `${y}px`; |
|
|
|
|
|
const targetId = 'T-' + Math.floor(Math.random() * 1000).toString().padStart(4, '0'); |
|
target.dataset.id = targetId; |
|
|
|
|
|
const targetTypes = ['HUMAN', 'VEHICLE', 'STRUCTURE', 'THREAT']; |
|
const targetType = targetTypes[Math.floor(Math.random() * targetTypes.length)]; |
|
target.dataset.type = targetType; |
|
|
|
|
|
const threatLevels = ['LOW', 'MEDIUM', 'HIGH']; |
|
const threatLevel = threatLevels[Math.floor(Math.random() * threatLevels.length)]; |
|
target.dataset.threat = threatLevel; |
|
|
|
|
|
target.classList.add('pulse'); |
|
|
|
|
|
const idLabel = document.createElement('div'); |
|
idLabel.className = 'target-id'; |
|
idLabel.textContent = targetId; |
|
idLabel.style.top = '-15px'; |
|
idLabel.style.left = '0'; |
|
idLabel.style.opacity = '0'; |
|
target.appendChild(idLabel); |
|
|
|
return target; |
|
} |
|
|
|
|
|
for (let i = 0; i < 5; i++) { |
|
document.getElementById('targets-container').appendChild(createRandomTarget()); |
|
} |
|
updateTargetCount(); |
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
if (e.button === 0 && e.target.id !== 'targets-container') { |
|
const newTarget = createRandomTarget(); |
|
newTarget.style.left = `${e.clientX - 30}px`; |
|
newTarget.style.top = `${e.clientY - 40}px`; |
|
document.getElementById('targets-container').appendChild(newTarget); |
|
updateTargetCount(); |
|
document.getElementById('target-sound').play(); |
|
updateLastAction('TARGET ADDED'); |
|
} |
|
}); |
|
|
|
|
|
document.addEventListener('contextmenu', function(e) { |
|
e.preventDefault(); |
|
fireWeapon(e.clientX, e.clientY); |
|
return false; |
|
}); |
|
|
|
|
|
document.addEventListener('mousemove', function(e) { |
|
document.getElementById('crosshair').style.left = `${e.clientX}px`; |
|
document.getElementById('crosshair').style.top = `${e.clientY}px`; |
|
|
|
|
|
checkTargetLock(e.clientX, e.clientY); |
|
}); |
|
|
|
|
|
function fireWeapon(x, y) { |
|
|
|
document.getElementById('fire-sound').play(); |
|
|
|
|
|
const crosshair = document.getElementById('crosshair'); |
|
crosshair.classList.add('firing'); |
|
setTimeout(() => { |
|
crosshair.classList.remove('firing'); |
|
}, 300); |
|
|
|
|
|
const laser = document.createElement('div'); |
|
laser.className = 'laser-beam'; |
|
laser.style.left = `${x}px`; |
|
laser.style.top = `${y}px`; |
|
laser.style.width = '0'; |
|
laser.style.opacity = '1'; |
|
|
|
|
|
const angle = (Math.random() * 10) - 5; |
|
laser.style.transform = `rotate(${angle}deg)`; |
|
|
|
document.body.appendChild(laser); |
|
|
|
|
|
setTimeout(() => { |
|
laser.style.width = '300px'; |
|
laser.style.opacity = '0.8'; |
|
}, 10); |
|
|
|
setTimeout(() => { |
|
laser.style.opacity = '0'; |
|
setTimeout(() => { |
|
document.body.removeChild(laser); |
|
}, 300); |
|
}, 200); |
|
|
|
|
|
if (currentTarget) { |
|
destroyTarget(currentTarget); |
|
} else { |
|
updateLastAction('FIRED - NO TARGET'); |
|
showDamageEffect(x, y, false); |
|
} |
|
} |
|
|
|
|
|
function destroyTarget(target) { |
|
|
|
document.getElementById('hit-sound').play(); |
|
|
|
|
|
target.classList.remove('identified'); |
|
target.classList.add('destroyed'); |
|
target.dataset.status = 'DESTROYED'; |
|
|
|
|
|
document.getElementById('target-status').textContent = 'STATUS: DESTROYED'; |
|
document.getElementById('target-status').className = 'mt-1 text-red-500'; |
|
|
|
|
|
if (!destroyedTargets.includes(target.dataset.id)) { |
|
destroyedTargets.push(target.dataset.id); |
|
} |
|
|
|
|
|
identifiedTargets = identifiedTargets.filter(id => id !== target.dataset.id); |
|
|
|
|
|
updateTargetCount(); |
|
updateLastAction(`TARGET ${target.dataset.id} DESTROYED`); |
|
|
|
|
|
const rect = target.getBoundingClientRect(); |
|
showDamageEffect(rect.left + rect.width/2, rect.top + rect.height/2, true); |
|
} |
|
|
|
|
|
function showDamageEffect(x, y, isHit) { |
|
const damageEffect = document.getElementById('damage-effect'); |
|
damageEffect.style.left = `${x}px`; |
|
damageEffect.style.top = `${y}px`; |
|
damageEffect.style.transform = 'translate(-50%, -50%)'; |
|
damageEffect.style.opacity = '1'; |
|
damageEffect.style.background = isHit ? |
|
'radial-gradient(circle, rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 70%)' : |
|
'radial-gradient(circle, rgba(255,255,0,0.3) 0%, rgba(255,255,0,0) 70%)'; |
|
|
|
setTimeout(() => { |
|
damageEffect.style.opacity = '0'; |
|
}, 300); |
|
} |
|
|
|
|
|
function checkTargetLock(x, y) { |
|
const targets = document.querySelectorAll('.target-box:not(.destroyed)'); |
|
let lockedTarget = null; |
|
|
|
targets.forEach(target => { |
|
const rect = target.getBoundingClientRect(); |
|
const isOver = x > rect.left && x < rect.right && y > rect.top && y < rect.bottom; |
|
|
|
if (isOver) { |
|
lockedTarget = target; |
|
target.classList.add('bg-opacity-30'); |
|
|
|
|
|
const idLabel = target.querySelector('.target-id'); |
|
if (idLabel) idLabel.style.opacity = '1'; |
|
|
|
|
|
document.getElementById('target-info').innerHTML = ` |
|
ID: ${target.dataset.id}<br> |
|
TYPE: ${target.dataset.type}<br> |
|
THREAT: <span class="${getThreatColor(target.dataset.threat)}">${target.dataset.threat}</span> |
|
`; |
|
|
|
document.getElementById('current-target-id').textContent = target.dataset.id; |
|
document.getElementById('current-target-id').className = getThreatColor(target.dataset.threat); |
|
|
|
|
|
document.getElementById('threat-level').textContent = target.dataset.threat; |
|
document.getElementById('threat-level').className = getThreatColor(target.dataset.threat); |
|
|
|
|
|
if (target.classList.contains('identified')) { |
|
document.getElementById('target-status').textContent = 'STATUS: IDENTIFIED'; |
|
document.getElementById('target-status').className = 'mt-1 text-green-500'; |
|
} else if (target.classList.contains('destroyed')) { |
|
document.getElementById('target-status').textContent = 'STATUS: DESTROYED'; |
|
document.getElementById('target-status').className = 'mt-1 text-red-500'; |
|
} else { |
|
document.getElementById('target-status').textContent = 'STATUS: DETECTED'; |
|
document.getElementById('target-status').className = 'mt-1 text-yellow-500'; |
|
} |
|
|
|
|
|
if (!target.classList.contains('identified') && !target.classList.contains('destroyed')) { |
|
setTimeout(() => { |
|
if (lockedTarget === target) { |
|
identifyTarget(target); |
|
} |
|
}, 1000); |
|
} |
|
} else { |
|
target.classList.remove('bg-opacity-30'); |
|
const idLabel = target.querySelector('.target-id'); |
|
if (idLabel && !target.classList.contains('identified')) idLabel.style.opacity = '0'; |
|
} |
|
}); |
|
|
|
currentTarget = lockedTarget; |
|
|
|
if (!lockedTarget) { |
|
document.getElementById('target-info').textContent = 'NO TARGET LOCKED'; |
|
document.getElementById('target-status').textContent = 'STATUS: UNKNOWN'; |
|
document.getElementById('target-status').className = 'mt-1'; |
|
document.getElementById('current-target-id').textContent = 'NONE'; |
|
document.getElementById('current-target-id').className = ''; |
|
document.getElementById('threat-level').textContent = 'NONE'; |
|
document.getElementById('threat-level').className = ''; |
|
} |
|
} |
|
|
|
|
|
function identifyTarget(target) { |
|
if (!target.classList.contains('identified') && !target.classList.contains('destroyed')) { |
|
target.classList.add('identified'); |
|
if (!identifiedTargets.includes(target.dataset.id)) { |
|
identifiedTargets.push(target.dataset.id); |
|
} |
|
|
|
|
|
document.getElementById('lock-sound').play(); |
|
|
|
|
|
const idLabel = target.querySelector('.target-id'); |
|
if (idLabel) idLabel.style.opacity = '1'; |
|
|
|
|
|
document.getElementById('target-status').textContent = 'STATUS: IDENTIFIED'; |
|
document.getElementById('target-status').className = 'mt-1 text-green-500'; |
|
|
|
updateLastAction(`TARGET ${target.dataset.id} IDENTIFIED`); |
|
} |
|
} |
|
|
|
function getThreatColor(level) { |
|
switch(level) { |
|
case 'LOW': return 'text-green-500'; |
|
case 'MEDIUM': return 'text-yellow-500'; |
|
case 'HIGH': return 'text-red-500'; |
|
default: return ''; |
|
} |
|
} |
|
|
|
function updateTargetCount() { |
|
const total = document.querySelectorAll('.target-box').length; |
|
const destroyed = document.querySelectorAll('.target-box.destroyed').length; |
|
document.getElementById('target-count').textContent = total - destroyed; |
|
document.getElementById('targets-destroyed').textContent = destroyed; |
|
} |
|
|
|
function updateLastAction(action) { |
|
const lastAction = document.getElementById('last-action'); |
|
lastAction.textContent = action; |
|
lastAction.className = 'text-red-500'; |
|
setTimeout(() => { |
|
lastAction.className = ''; |
|
}, 2000); |
|
} |
|
|
|
|
|
setInterval(() => { |
|
const elements = document.querySelectorAll('.glitch'); |
|
elements.forEach(el => { |
|
if (Math.random() > 0.7) { |
|
el.classList.add('glitch-active'); |
|
setTimeout(() => { |
|
el.classList.remove('glitch-active'); |
|
}, 200); |
|
} |
|
}); |
|
|
|
|
|
if (Math.random() > 0.9 && document.getElementById('threat-level').textContent === 'NONE') { |
|
const randomThreat = ['LOW', 'MEDIUM', 'HIGH'][Math.floor(Math.random() * 3)]; |
|
document.getElementById('threat-level').textContent = randomThreat; |
|
document.getElementById('threat-level').className = getThreatColor(randomThreat); |
|
setTimeout(() => { |
|
document.getElementById('threat-level').textContent = 'NONE'; |
|
document.getElementById('threat-level').className = ''; |
|
}, 1000); |
|
} |
|
}, 3000); |
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MarkTheArtist/t-8000-visual-processor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
