App Admin

Name

Type

Icon

Description

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#000000">
    
    
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="HUD V.4">

<link rel="manifest" href='data:application/manifest+json;charset=utf-8,%7B%22name%22%3A%22Tactical%20HUD%20System%22%2C%22short_name%22%3A%22HUD%22%2C%22start_url%22%3A%22.%22%2C%22display%22%3A%22standalone%22%2C%22background_color%22%3A%22%23000000%22%2C%22theme_color%22%3A%22%23000000%22%2C%22icons%22%3A%5B%7B%22src%22%3A%22https%3A%2F%2Fcdn-icons-png.flaticon.com%2F512%2F1687%2F1687766.png%22%2C%22sizes%22%3A%22512x512%22%2C%22type%22%3A%22image%2Fpng%22%7D%5D%7D'>

<title>TACTICAL HUD V.4</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {
            --hud-color: #00f0ff;
            --hud-warn: #ff3333;
            --hud-bg: rgba(0, 20, 30, 0.6);
        }

body {
            margin: 0;
            overflow: hidden; /* Prevent scrolling */
            background-color: #000;
            font-family: 'Share Tech Mono', monospace;
            color: var(--hud-color);
            -webkit-font-smoothing: antialiased;
            /* Prevent pull-to-refresh on mobile */
            overscroll-behavior: none; 
            user-select: none;
            -webkit-user-select: none;
        }

/* Camera Feed Layer */
        #camera-feed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;
            transform: scaleX(-1);
        }

/* Fallback Grid */
        #grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: 
                linear-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
            z-index: -1;
            display: none;
        }

/* Scanlines */
        .scanlines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2));
            background-size: 100% 4px;
            pointer-events: none;
            z-index: 100;
        }

.hud-text { text-shadow: 0 0 5px var(--hud-color); }
        
        .hud-border {
            border: 1px solid var(--hud-color);
            box-shadow: 0 0 10px var(--hud-color), inset 0 0 20px rgba(0, 240, 255, 0.2);
            background: rgba(0, 10, 20, 0.3);
            backdrop-filter: blur(2px);
        }

/* Animations */
        @keyframes flicker {
            0% { opacity: 0.9; }
            5% { opacity: 0.5; }
            10% { opacity: 0.9; }
            100% { opacity: 0.9; }
        }
        .animate-flicker { animation: flicker 4s infinite; }
        
        /* Reticle */
        .reticle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            border: 1px solid rgba(0, 240, 255, 0.3);
            border-radius: 50%;
            pointer-events: none;
        }
        .reticle::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--hud-color); }
        .reticle::after { content: ''; position: absolute; left: 50%; top: 0; height: 100%; width: 1px; background: var(--hud-color); }

/* Compass Strip */
        .compass-strip {
            width: 100%;
            height: 40px;
            overflow: hidden;
            position: relative;
            border-bottom: 1px solid var(--hud-color);
            background: linear-gradient(to bottom, transparent, rgba(0, 240, 255, 0.1));
        }
        .compass-ticks {
            display: flex;
            position: absolute;
            left: 50%;
            transition: transform 0.1s linear;
        }
        .tick {
            width: 60px;
            text-align: center;
            border-left: 1px solid var(--hud-color);
            height: 10px;
            margin-top: 30px;
            font-size: 12px;
            position: relative;
        }
        .tick span { position: absolute; top: -20px; left: -50%; width: 200%; }

/* Layout Utilities */
        .corner-decor { position: absolute; width: 20px; height: 20px; border: 2px solid var(--hud-color); }
        .top-left { top: -2px; left: -2px; border-right: none; border-bottom: none; }
        .top-right { top: -2px; right: -2px; border-left: none; border-bottom: none; }
        .bottom-left { bottom: -2px; left: -2px; border-right: none; border-top: none; }
        .bottom-right { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* Boot Screen */
        #boot-screen {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: black;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .boot-btn {
            margin-top: 20px;
            padding: 15px 40px;
            border: 1px solid var(--hud-color);
            color: var(--hud-color);
            background: rgba(0, 240, 255, 0.1);
            font-family: inherit;
            font-size: 1.2rem;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: 0.3s;
        }
        .boot-btn:hover { background: var(--hud-color); color: black; box-shadow: 0 0 20px var(--hud-color); }

#radar-canvas { border-radius: 50%; background: rgba(0, 20, 0, 0.5); border: 1px solid var(--hud-color); }
    </style>
</head>
<body>

<div id="boot-screen">
        <h1 class="text-4xl mb-4 text-cyan-400 hud-text">SYSTEM OFFLINE</h1>
        <p class="text-sm text-gray-400 max-w-md px-4 mb-4">
            TAP "INITIALIZE" TO ENGAGE FULLSCREEN OPTICS.<br>
            ENSURE CAMERA ACCESS IS GRANTED.
        </p>
        <button class="boot-btn" onclick="initSystem()">INITIALIZE SYSTEM</button>
        <div id="install-prompt" class="hidden mt-8 text-xs text-gray-500 border border-gray-700 p-2 rounded">
            TIP: ADD TO HOME SCREEN FOR BEST EXPERIENCE
        </div>
    </div>

<div id="hud-layer" class="hidden h-screen w-screen relative p-2 flex flex-col justify-between">
        
        
        <div class="w-full flex justify-between items-start pt-2"> 
            <div class="w-1/3 max-w-[150px] hud-border p-2 relative animate-flicker">
                <div class="corner-decor top-left"></div>
                <div class="corner-decor top-right"></div>
                <div class="corner-decor bottom-left"></div>
                <div class="corner-decor bottom-right"></div>
                <h3 class="text-xs uppercase tracking-widest border-b border-cyan-800 mb-1">PWR_LVL</h3>
                <div class="w-full h-4 bg-gray-900 border border-cyan-500 mb-1">
                    <div id="battery-bar" class="h-full bg-cyan-400" style="width: 85%"></div>
                </div>
                <div class="flex justify-between text-xs">
                    <span id="battery-text">85%</span>
                    <span id="status-text">NOMINAL</span>
                </div>
            </div>

<div class="flex-1 mx-2 relative overflow-hidden">
                <div class="text-center text-xs text-cyan-300 mb-1">HEADING <span id="heading-val">000</span>°</div>
                <div class="compass-strip">
                    <div class="compass-ticks" id="compass-strip"></div>
                    <div class="absolute top-0 left-1/2 w-0 h-full border-l-2 border-red-500 transform -translate-x-1/2 z-10"></div>
                </div>
            </div>

<div class="reticle">
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-red-500 rounded-full opacity-50"></div>
            <div id="horizon-line" class="absolute top-1/2 left-0 w-full h-px bg-cyan-300 opacity-50 transition-transform duration-100"></div>
        </div>

<div class="w-full flex justify-between items-end mt-auto pb-4"> 
            <div class="relative">
                <div class="text-xs mb-1 bg-cyan-900 inline-block px-1">LIDAR_SCAN</div>
                <canvas id="radar-canvas" width="120" height="120"></canvas>
            </div>

<div class="absolute right-4 bottom-40 flex flex-col gap-4">
            <button onclick="toggleFullscreen()" class="w-12 h-12 border border-cyan-400 rounded-full flex items-center justify-center bg-black bg-opacity-50 active:bg-cyan-900 transition-colors">
                <i class="fas fa-expand"></i>
            </button>
            <button onclick="toggleScan()" class="w-12 h-12 border border-cyan-400 rounded-full flex items-center justify-center bg-black bg-opacity-50 active:bg-cyan-900 transition-colors">
                <i class="fas fa-satellite-dish"></i>
            </button>
            <button onclick="toggleLight()" class="w-12 h-12 border border-cyan-400 rounded-full flex items-center justify-center bg-black bg-opacity-50 active:bg-cyan-900 transition-colors">
                <i class="fas fa-lightbulb"></i>
            </button>
        </div>
    </div>

async function initSystem() {
            // 1. Force Fullscreen
            toggleFullscreen();

document.getElementById('boot-screen').style.display = 'none';
            document.getElementById('hud-layer').classList.remove('hidden');
            
            log("ESTABLISHING NEURAL HANDSHAKE...");

// 2. Camera
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ 
                    video: { facingMode: 'environment' } 
                });
                const video = document.getElementById('camera-feed');
                video.srcObject = stream;
                // Fix for rear camera mirroring
                const track = stream.getVideoTracks()[0];
                const settings = track.getSettings();
                if(settings.facingMode === 'environment') {
                    video.style.transform = 'scaleX(1)';
                }
                log("OPTICAL SENSORS: ONLINE");
                document.getElementById('recording-indicator').classList.remove('hidden');
            } catch (err) {
                log("ERR: OPTICS FAILURE. ENGAGING GRID.");
                document.getElementById('grid-bg').style.display = 'block';
            }

// 3. Geolocation
            if ("geolocation" in navigator) {
                navigator.geolocation.watchPosition((pos) => {
                    state.speed = pos.coords.speed ? Math.round(pos.coords.speed * 3.6) : 0;
                    document.getElementById('speed-val').innerText = state.speed;
                    document.getElementById('lat').innerText = pos.coords.latitude.toFixed(4);
                    document.getElementById('lon').innerText = pos.coords.longitude.toFixed(4);
                }, (err) => log("GPS SIGNAL LOST"), { enableHighAccuracy: true });
            }

// 4. Orientation
            if (window.DeviceOrientationEvent) {
                window.addEventListener('deviceorientation', (event) => {
                    if (event.alpha) state.heading = event.alpha;
                    if (event.beta) state.pitch = event.beta;
                    if (event.gamma) state.roll = event.gamma;
                    updateCompass();
                    updateHorizon();
                });
                // iOS Request
                if (typeof DeviceOrientationEvent.requestPermission === 'function') {
                    DeviceOrientationEvent.requestPermission().catch(console.error);
                }
            }

// 5. Battery
            if ('getBattery' in navigator) {
                navigator.getBattery().then(battery => {
                    updateBattery(battery);
                    battery.addEventListener('levelchange', () => updateBattery(battery));
                    battery.addEventListener('chargingchange', () => updateBattery(battery));
                });
            }

// Loops
            setInterval(updateClock, 1000);
            requestAnimationFrame(renderRadar);
            generateCompassStrip();
            
            // Random Targets
            setInterval(() => {
                if(state.targets.length < 5) {
                    state.targets.push({ x: Math.random() * 120, y: Math.random() * 120, life: 1.0 });
                }
            }, 2000);
        }

// --- Fullscreen Logic ---
        function toggleFullscreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen().catch(err => {
                    console.log(`Error attempting to enable full-screen mode: ${err.message}`);
                });
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
            }
        }

// --- UI Updaters ---
        function updateBattery(battery) {
            state.battery = Math.floor(battery.level * 100);
            const bar = document.getElementById('battery-bar');
            const txt = document.getElementById('battery-text');
            const status = document.getElementById('status-text');
            bar.style.width = state.battery + '%';
            txt.innerText = state.battery + '%';
            if (battery.charging) {
                status.innerText = "CHARGING"; status.classList.add('text-green-400');
                bar.classList.replace('bg-cyan-400', 'bg-green-400');
            } else if (state.battery < 20) {
                status.innerText = "CRITICAL"; status.classList.add('text-red-500');
                bar.classList.replace('bg-cyan-400', 'bg-red-500');
            } else {
                status.innerText = "NOMINAL";
            }
        }

function updateClock() {
            const now = new Date();
            document.getElementById('clock').innerText = formatTime(now);
            document.getElementById('date').innerText = now.toLocaleDateString().toUpperCase();
        }

function updateCompass() {
            const heading = Math.round(state.heading);
            document.getElementById('heading-val').innerText = heading.toString().padStart(3, '0');
            const strip = document.getElementById('compass-strip');
            strip.style.transform = `translateX(${-heading * 4}px)`;
        }

// --- Radar ---
        const radarCanvas = document.getElementById('radar-canvas');
        const ctx = radarCanvas.getContext('2d');
        let radarAngle = 0;

function renderRadar() {
            const w = radarCanvas.width;
            const h = radarCanvas.height;
            const cx = w/2, cy = h/2;

ctx.fillStyle = 'rgba(0, 20, 10, 0.1)';
            ctx.fillRect(0, 0, w, h);
            ctx.strokeStyle = '#004433'; ctx.lineWidth = 1;
            ctx.beginPath(); ctx.arc(cx, cy, w*0.3, 0, Math.PI*2); ctx.stroke();
            ctx.beginPath(); ctx.arc(cx, cy, w*0.45, 0, Math.PI*2); ctx.stroke();
            ctx.beginPath(); ctx.moveTo(cx, 0); ctx.lineTo(cx, h); ctx.moveTo(0, cy); ctx.lineTo(w, cy); ctx.stroke();

radarAngle += 0.05;
            ctx.save(); ctx.translate(cx, cy); ctx.rotate(radarAngle);
            const gradient = ctx.createLinearGradient(0, 0, w/2, 0);
            gradient.addColorStop(0, 'rgba(0, 240, 255, 0)'); gradient.addColorStop(1, 'rgba(0, 240, 255, 0.5)');
            ctx.fillStyle = gradient; ctx.beginPath(); ctx.moveTo(0,0); ctx.arc(0,0, w/2, 0, 0.5); ctx.fill();
            ctx.restore();

ctx.fillStyle = '#ff3333';
            state.targets.forEach((t, i) => {
                t.life -= 0.01;
                if(t.life <= 0) { state.targets.splice(i, 1); return; }
                ctx.globalAlpha = t.life; ctx.beginPath(); ctx.arc(t.x, t.y, 2, 0, Math.PI*2); ctx.fill(); ctx.globalAlpha = 1.0;
            });
            requestAnimationFrame(renderRadar);
        }

Delete