Spaces:

MarkTheArtist
/

t-8000-visual-processor

Running

File size: 26,182 Bytes

fef040a

<!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 = [];
            
            // Update time
            function updateTime() {
                const now = new Date();
                const timeStr = now.toLocaleTimeString('en-US', {hour12: false});
                document.getElementById('time').textContent = timeStr;
            }
            setInterval(updateTime, 1000);
            updateTime();
            
            // Create random targets
            function createRandomTarget() {
                const target = document.createElement('div');
                target.className = 'target-box absolute w-16 h-24 bg-red-500 bg-opacity-10';
                
                // Random position but not too close to edges
                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`;
                
                // Add target identifier
                const targetId = 'T-' + Math.floor(Math.random() * 1000).toString().padStart(4, '0');
                target.dataset.id = targetId;
                
                // Add target info
                const targetTypes = ['HUMAN', 'VEHICLE', 'STRUCTURE', 'THREAT'];
                const targetType = targetTypes[Math.floor(Math.random() * targetTypes.length)];
                target.dataset.type = targetType;
                
                // Add threat level
                const threatLevels = ['LOW', 'MEDIUM', 'HIGH'];
                const threatLevel = threatLevels[Math.floor(Math.random() * threatLevels.length)];
                target.dataset.threat = threatLevel;
                
                // Add pulsing animation
                target.classList.add('pulse');
                
                // Add target ID label
                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;
            }
            
            // Add initial targets
            for (let i = 0; i < 5; i++) {
                document.getElementById('targets-container').appendChild(createRandomTarget());
            }
            updateTargetCount();
            
            // Click to add new targets
            document.addEventListener('click', function(e) {
                if (e.button === 0 && e.target.id !== 'targets-container') { // Left click
                    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');
                }
            });
            
            // Right click to fire
            document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
                fireWeapon(e.clientX, e.clientY);
                return false;
            });
            
            // Mouse move to aim
            document.addEventListener('mousemove', function(e) {
                document.getElementById('crosshair').style.left = `${e.clientX}px`;
                document.getElementById('crosshair').style.top = `${e.clientY}px`;
                
                // Check for target lock
                checkTargetLock(e.clientX, e.clientY);
            });
            
            // Fire weapon
            function fireWeapon(x, y) {
                // Play fire sound
                document.getElementById('fire-sound').play();
                
                // Add firing animation to crosshair
                const crosshair = document.getElementById('crosshair');
                crosshair.classList.add('firing');
                setTimeout(() => {
                    crosshair.classList.remove('firing');
                }, 300);
                
                // Create laser beam effect
                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';
                
                // Random angle for dramatic effect
                const angle = (Math.random() * 10) - 5;
                laser.style.transform = `rotate(${angle}deg)`;
                
                document.body.appendChild(laser);
                
                // Animate laser beam
                setTimeout(() => {
                    laser.style.width = '300px';
                    laser.style.opacity = '0.8';
                }, 10);
                
                setTimeout(() => {
                    laser.style.opacity = '0';
                    setTimeout(() => {
                        document.body.removeChild(laser);
                    }, 300);
                }, 200);
                
                // Check if we hit a target
                if (currentTarget) {
                    destroyTarget(currentTarget);
                } else {
                    updateLastAction('FIRED - NO TARGET');
                    showDamageEffect(x, y, false);
                }
            }
            
            // Destroy target
            function destroyTarget(target) {
                // Play hit sound
                document.getElementById('hit-sound').play();
                
                // Mark as destroyed
                target.classList.remove('identified');
                target.classList.add('destroyed');
                target.dataset.status = 'DESTROYED';
                
                // Update target info
                document.getElementById('target-status').textContent = 'STATUS: DESTROYED';
                document.getElementById('target-status').className = 'mt-1 text-red-500';
                
                // Add to destroyed targets
                if (!destroyedTargets.includes(target.dataset.id)) {
                    destroyedTargets.push(target.dataset.id);
                }
                
                // Remove from identified targets
                identifiedTargets = identifiedTargets.filter(id => id !== target.dataset.id);
                
                // Update counters
                updateTargetCount();
                updateLastAction(`TARGET ${target.dataset.id} DESTROYED`);
                
                // Show damage effect
                const rect = target.getBoundingClientRect();
                showDamageEffect(rect.left + rect.width/2, rect.top + rect.height/2, true);
            }
            
            // Show damage effect
            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);
            }
            
            // Check if crosshair is over a target
            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');
                        
                        // Show target ID
                        const idLabel = target.querySelector('.target-id');
                        if (idLabel) idLabel.style.opacity = '1';
                        
                        // Update target info display
                        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);
                        
                        // Update threat level
                        document.getElementById('threat-level').textContent = target.dataset.threat;
                        document.getElementById('threat-level').className = getThreatColor(target.dataset.threat);
                        
                        // Update status
                        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';
                        }
                        
                        // Identify target if not already identified
                        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 = '';
                }
            }
            
            // Identify target
            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);
                    }
                    
                    // Play lock sound
                    document.getElementById('lock-sound').play();
                    
                    // Keep ID label visible for identified targets
                    const idLabel = target.querySelector('.target-id');
                    if (idLabel) idLabel.style.opacity = '1';
                    
                    // Update status
                    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);
            }
            
            // Random glitch effect
            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);
                    }
                });
                
                // Randomly change threat level when no target is locked
                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>