Spaces:

MarkTheArtist
/

t-8000-visual-processor

Running

App Files Files Community

MarkTheArtist commited on 12 days ago

Commit

fef040a

verified ·

1 Parent(s): a9a73a9

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +597 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: T 8000 Visual Processor
-emoji: 🚀
 colorFrom: yellow
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: t-8000-visual-processor
+emoji: 🐳
 colorFrom: yellow
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,597 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>