Spaces:

huggingchat
/

chat-ui

Running

App Files Files Community

768

Upload Neo.txt

#772

by dealermatt72 - opened Apr 8

base: refs/heads/main

←

from: refs/pr/772

Discussion Files changed

+1025

-0

Files changed (1) hide show

Neo.txt +1025 -0

Neo.txt ADDED Viewed

	@@ -0,0 +1,1025 @@

+<!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">
+    <title>Neo Security Guard</title>
+    <meta name="theme-color" content="#0a0a0a">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛡️</text></svg>">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');
+        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+        :root {
+            --neon-green: #00ff41;
+            --neon-blue: #00d4ff;
+            --neon-red: #ff0040;
+            --neon-yellow: #ffff00;
+            --dark-bg: #0a0a0a;
+            --panel-bg: #111111;
+            --text-main: #e0e0e0;
+            --text-dim: #666666;
+        }
+        body {
+            font-family: 'Share Tech Mono', monospace;
+            background: var(--dark-bg);
+            color: var(--text-main);
+            min-height: 100vh;
+            overflow-x: hidden;
+            padding-bottom: 100px;
+        }
+        .matrix-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 0.04;
+            background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--neon-green) 2px, var(--neon-green) 4px);
+            animation: matrixScroll 20s linear infinite;
+        }
+        @keyframes matrixScroll { from { background-position: 0 0; } to { background-position: 0 1000px; } }
+        .app { max-width: 100%; min-height: 100vh; padding: 15px; }
+        /* Header */
+        .header {
+            text-align: center;
+            margin-bottom: 20px;
+            padding: 15px;
+            background: linear-gradient(180deg, rgba(0,212,255,0.1) 0%, transparent 100%);
+            border: 1px solid var(--neon-blue);
+            border-radius: 12px;
+        }
+        .logo {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 2.5rem;
+            font-weight: 900;
+            color: var(--neon-blue);
+            text-shadow: 0 0 20px var(--neon-blue);
+            letter-spacing: 6px;
+        }
+        .tagline { font-size: 0.7rem; color: var(--neon-green); margin-top: 5px; }
+        /* Status Grid */
+        .status-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 8px;
+            margin-bottom: 15px;
+        }
+        .status-card {
+            background: var(--panel-bg);
+            border: 1px solid #333;
+            border-radius: 10px;
+            padding: 12px 8px;
+            text-align: center;
+        }
+        .status-label { font-size: 0.6rem; color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px; }
+        .status-value { font-family: 'Orbitron', sans-serif; font-size: 1.2rem; font-weight: bold; }
+        .status-value.secure { color: var(--neon-green); text-shadow: 0 0 10px var(--neon-green); }
+        .status-value.warning { color: var(--neon-yellow); text-shadow: 0 0 10px var(--neon-yellow); }
+        .status-value.danger { color: var(--neon-red); text-shadow: 0 0 10px var(--neon-red); }
+        /* Mode Toggle */
+        .mode-toggle { display: flex; gap: 10px; margin-bottom: 15px; }
+        .mode-btn {
+            flex: 1;
+            padding: 14px;
+            font-family: 'Orbitron', sans-serif;
+            font-weight: 700;
+            font-size: 0.8rem;
+            border: 2px solid;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+        }
+        .mode-btn.blue { background: transparent; border-color: var(--neon-blue); color: var(--neon-blue); }
+        .mode-btn.blue.active { background: var(--neon-blue); color: var(--dark-bg); box-shadow: 0 0 20px var(--neon-blue); }
+        .mode-btn.red { background: transparent; border-color: var(--neon-red); color: var(--neon-red); }
+        .mode-btn.red.active { background: var(--neon-red); color: var(--dark-bg); box-shadow: 0 0 20px var(--neon-red); }
+        /* Buttons Grid */
+        .feature-btns {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 10px;
+            margin-bottom: 15px;
+        }
+        .feature-btn {
+            padding: 15px 10px;
+            background: var(--panel-bg);
+            border: 1px solid #333;
+            border-radius: 10px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .feature-btn:hover, .feature-btn.active {
+            border-color: var(--neon-blue);
+            box-shadow: 0 0 15px rgba(0,212,255,0.3);
+        }
+        .feature-btn-icon { font-size: 1.5rem; display: block; margin-bottom: 5px; }
+        .feature-btn-label { font-size: 0.65rem; color: var(--text-dim); }
+        /* Scan Button */
+        .scan-btn {
+            width: 100%;
+            padding: 18px;
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, var(--neon-blue), var(--neon-green));
+            border: none;
+            border-radius: 12px;
+            color: var(--dark-bg);
+            cursor: pointer;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            box-shadow: 0 0 25px rgba(0,212,255,0.4);
+            margin-bottom: 15px;
+        }
+        .scan-btn:active { transform: scale(0.97); }
+        .scan-btn.scanning { animation: scanPulse 1s infinite; }
+        @keyframes scanPulse { 0%, 100% { box-shadow: 0 0 25px rgba(0,212,255,0.4); } 50% { box-shadow: 0 0 50px rgba(0,212,255,0.8); } }
+        /* Panels */
+        .panel {
+            display: none;
+            background: var(--panel-bg);
+            border: 1px solid #333;
+            border-radius: 12px;
+            padding: 15px;
+            margin-bottom: 15px;
+        }
+        .panel.active { display: block; }
+        .panel-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #333;
+        }
+        .panel-title { font-family: 'Orbitron', sans-serif; font-size: 0.9rem; color: var(--neon-blue); }
+        /* Progress */
+        .progress-container { margin-bottom: 15px; display: none; }
+        .progress-container.active { display: block; }
+        .progress-bar { height: 6px; background: #222; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
+        .progress-fill { height: 100%; background: linear-gradient(90deg, var(--neon-blue), var(--neon-green)); width: 0%; transition: width 0.3s; }
+        .progress-text { font-size: 0.75rem; color: var(--neon-blue); text-align: center; }
+        /* Monitor Stats */
+        .monitor-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 8px;
+        }
+        .monitor-stat {
+            background: rgba(0,0,0,0.3);
+            border-radius: 8px;
+            padding: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .monitor-stat-label { font-size: 0.7rem; color: var(--text-dim); }
+        .monitor-stat-value { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; color: var(--neon-blue); }
+        /* Quote */
+        .matrix-quote {
+            text-align: center;
+            padding: 15px;
+            margin-bottom: 15px;
+            font-style: italic;
+            color: var(--neon-green);
+            text-shadow: 0 0 10px var(--neon-green);
+            font-size: 0.85rem;
+            border: 1px solid rgba(0,255,65,0.2);
+            border-radius: 8px;
+            background: rgba(0,255,65,0.02);
+        }
+        /* Stats Grid */
+        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 15px; }
+        .stat-card {
+            background: var(--panel-bg);
+            border: 1px solid #333;
+            border-radius: 10px;
+            padding: 12px 8px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .stat-card:active { transform: scale(0.95); }
+        .stat-card:hover { border-color: var(--neon-blue); }
+        .stat-value { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; font-weight: bold; }
+        .stat-label { font-size: 0.6rem; color: var(--text-dim); margin-top: 4px; }
+        /* Threat List */
+        .patrol-log { background: var(--panel-bg); border: 1px solid #333; border-radius: 12px; padding: 15px; }
+        .log-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #333; }
+        .log-title { font-family: 'Orbitron', sans-serif; font-size: 0.9rem; color: var(--neon-blue); }
+        .log-count { font-size: 0.75rem; color: var(--neon-red); background: rgba(255,0,64,0.1); padding: 4px 8px; border-radius: 20px; }
+        .threat-item { padding: 12px; margin-bottom: 10px; border-radius: 8px; border-left: 4px solid; }
+        .threat-item.critical { border-color: var(--neon-red); background: rgba(255,0,64,0.08); }
+        .threat-item.high { border-color: #ff6600; background: rgba(255,102,0,0.08); }
+        .threat-item.medium { border-color: var(--neon-yellow); background: rgba(255,255,0,0.08); }
+        .threat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+        .threat-title { font-weight: bold; font-size: 0.9rem; }
+        .threat-level { font-size: 0.6rem; padding: 3px 8px; border-radius: 4px; font-weight: bold; text-transform: uppercase; }
+        .threat-level.critical { background: var(--neon-red); color: white; }
+        .threat-level.high { background: #ff6600; color: white; }
+        .threat-level.medium { background: var(--neon-yellow); color: black; }
+        .threat-desc { font-size: 0.8rem; color: #aaa; margin-bottom: 10px; line-height: 1.4; }
+        .threat-fix { font-size: 0.75rem; color: var(--neon-blue); padding: 10px; background: rgba(0,212,255,0.08); border-radius: 6px; border-left: 3px solid var(--neon-blue); }
+        /* Camera Scanner */
+        .camera-scanner { text-align: center; }
+        .camera-preview {
+            width: 100%;
+            height: 250px;
+            background: #000;
+            border-radius: 10px;
+            margin-bottom: 15px;
+            position: relative;
+            overflow: hidden;
+            border: 2px solid var(--neon-blue);
+        }
+        .camera-preview video { width: 100%; height: 100%; object-fit: cover; }
+        .scan-overlay {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 200px;
+            height: 200px;
+            border: 2px solid var(--neon-green);
+            box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
+            animation: scanPulse 2s infinite;
+        }
+        .scan-line {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: var(--neon-green);
+            animation: scanLine 2s linear infinite;
+        }
+        @keyframes scanLine { 0% { top: 0; } 100% { top: 100%; } }
+        .camera-btn {
+            padding: 12px 25px;
+            font-family: 'Orbitron', sans-serif;
+            font-weight: 700;
+            border: 2px solid var(--neon-blue);
+            background: transparent;
+            color: var(--neon-blue);
+            border-radius: 8px;
+            cursor: pointer;
+            margin: 5px;
+            font-size: 0.8rem;
+        }
+        .camera-btn.active { background: var(--neon-blue); color: var(--dark-bg); }
+        /* Network Analyzer */
+        .network-info { margin-bottom: 15px; }
+        .network-row { display: flex; justify-content: space-between; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 6px; margin-bottom: 8px; }
+        .network-label { font-size: 0.8rem; color: var(--text-dim); }
+        .network-value { font-size: 0.85rem; color: var(--neon-blue); }
+        .connection-quality {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 15px;
+            background: rgba(0,255,65,0.1);
+            border-radius: 8px;
+            margin-bottom: 15px;
+        }
+        .quality-bar { flex: 1; height: 8px; background: #333; border-radius: 4px; overflow: hidden; }
+        .quality-fill { height: 100%; background: var(--neon-green); transition: width 0.5s; }
+        /* Malware Signatures */
+        .malware-list { max-height: 300px; overflow-y: auto; }
+        .malware-item {
+            display: flex;
+            align-items: center;
+            padding: 12px;
+            background: rgba(0,0,0,0.3);
+            border-radius: 8px;
+            margin-bottom: 8px;
+            border-left: 3px solid var(--neon-green);
+        }
+        .malware-item.detected { border-left-color: var(--neon-red); background: rgba(255,0,64,0.1); }
+        .malware-icon { font-size: 1.5rem; margin-right: 12px; }
+        .malware-info { flex: 1; }
+        .malware-name { font-weight: bold; font-size: 0.85rem; }
+        .malware-detail { font-size: 0.7rem; color: var(--text-dim); }
+        .malware-status { font-size: 0.7rem; padding: 4px 10px; border-radius: 20px; }
+        .malware-status.clean { background: rgba(0,255,65,0.2); color: var(--neon-green); }
+        .malware-status.infected { background: rgba(255,0,64,0.2); color: var(--neon-red); }
+        /* Permission Panel */
+        .permission-list { max-height: 250px; overflow-y: auto; }
+        .permission-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #222; }
+        .permission-name { font-size: 0.85rem; }
+        .permission-apps { font-size: 0.65rem; color: var(--text-dim); }
+        .permission-status { font-size: 0.7rem; padding: 4px 10px; border-radius: 20px; }
+        .permission-status.granted { background: rgba(0,255,65,0.2); color: var(--neon-green); }
+        .permission-status.none { background: rgba(255,0,64,0.1); color: var(--text-dim); }
+        /* Notification Toggle */
+        .notification-toggle { display: flex; align-items: center; justify-content: space-between; background: var(--panel-bg); border: 1px solid #333; border-radius: 10px; padding: 12px; margin-bottom: 15px; }
+        .toggle-label { font-size: 0.85rem; }
+        .toggle-switch { width: 45px; height: 24px; background: #333; border-radius: 12px; position: relative; cursor: pointer; }
+        .toggle-switch.active { background: var(--neon-green); box-shadow: 0 0 15px var(--neon-green); }
+        .toggle-switch::after { content: ''; position: absolute; width: 20px; height: 20px; background: white; border-radius: 50%; top: 2px; left: 2px; transition: transform 0.3s; }
+        .toggle-switch.active::after { transform: translateX(21px); }
+        /* Bottom Nav */
+        .bottom-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            display: flex;
+            background: rgba(17,17,17,0.95);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid #333;
+            padding: 10px 5px;
+            padding-bottom: calc(10px + env(safe-area-inset-bottom));
+            z-index: 100;
+        }
+        .nav-btn { flex: 1; text-align: center; padding: 6px; font-size: 0.6rem; color: var(--text-dim); cursor: pointer; border-radius: 6px; transition: all 0.3s; }
+        .nav-btn.active { color: var(--neon-blue); background: rgba(0,212,255,0.1); }
+        .nav-btn svg { width: 20px; height: 20px; margin-bottom: 2px; display: block; margin: 0 auto 2px; }
+        /* Toast */
+        .toast {
+            position: fixed;
+            top: 15px;
+            left: 50%;
+            transform: translateX(-50%) translateY(-150%);
+            background: var(--panel-bg);
+            border: 2px solid var(--neon-blue);
+            padding: 12px 20px;
+            border-radius: 10px;
+            z-index: 1000;
+            transition: transform 0.4s;
+            box-shadow: 0 0 25px rgba(0,212,255,0.4);
+            max-width: 90%;
+            text-align: center;
+            font-size: 0.85rem;
+        }
+        .toast.show { transform: translateX(-50%) translateY(0); }
+        .toast.danger { border-color: var(--neon-red); box-shadow: 0 0 25px rgba(255,0,64,0.4); }
+        /* Red Pill Mode */
+        .red-pill-active .logo { color: var(--neon-red); text-shadow: 0 0 20px var(--neon-red); }
+        .red-pill-active .header { border-color: var(--neon-red); }
+        .red-pill-active .scan-btn { background: linear-gradient(135deg, var(--neon-red), #ff6600); }
+        .red-pill-active .threat-item { border-color: var(--neon-red) !important; background: rgba(255,0,64,0.1) !important; }
+        .red-pill-active .log-title { color: var(--neon-red); }
+        .red-pill-active .matrix-quote { color: var(--neon-red); text-shadow: 0 0 10px var(--neon-red); border-color: rgba(255,0,64,0.2); }
+        .glitch { animation: glitchEffect 0.3s ease; }
+        @keyframes glitchEffect { 0%, 100% { transform: translate(0); } 25% { transform: translate(-5px, 3px); } 50% { transform: translate(5px, -3px); } 75% { transform: translate(-3px, 5px); } }
+    </style>
+</head>
+<body>
+    <div class="matrix-bg"></div>
+    <div class="app" id="app">
+        <!-- Header -->
+        <div class="header">
+            <div class="logo" id="logo">NEO</div>
+            <div class="tagline" id="tagline">🛡️ Your Phone's Personal Security Guard</div>
+        </div>
+        <!-- Mode Toggle -->
+        <div class="mode-toggle">
+            <button class="mode-btn blue active" onclick="setMode('blue')">🔵 Blue</button>
+            <button class="mode-btn red" onclick="setMode('red')">🔴 Red</button>
+        </div>
+        <!-- Status Grid -->
+        <div class="status-grid">
+            <div class="status-card">
+                <div class="status-label">Security</div>
+                <div class="status-value secure" id="securityScore">8.2</div>
+            </div>
+            <div class="status-card">
+                <div class="status-label">Threats</div>
+                <div class="status-value warning" id="threatCount">3</div>
+            </div>
+            <div class="status-card">
+                <div class="status-label">Guard</div>
+                <div class="status-value secure" id="guardStatus">ACTIVE</div>
+            </div>
+        </div>
+        <!-- Feature Buttons -->
+        <div class="feature-btns">
+            <div class="feature-btn" id="btnCamera" onclick="showPanel('camera')">
+                <span class="feature-btn-icon">📷</span>
+                <span class="feature-btn-label">Camera Scan</span>
+            </div>
+            <div class="feature-btn" id="btnNetwork" onclick="showPanel('network')">
+                <span class="feature-btn-icon">🌐</span>
+                <span class="feature-btn-label">Network</span>
+            </div>
+            <div class="feature-btn" id="btnMalware" onclick="showPanel('malware')">
+                <span class="feature-btn-icon">👾</span>
+                <span class="feature-btn-label">Malware</span>
+            </div>
+        </div>
+        <!-- Notification Toggle -->
+        <div class="notification-toggle">
+            <span class="toggle-label">🔔 Real-time Alerts</span>
+            <div class="toggle-switch" id="notifToggle" onclick="toggleNotifications()"></div>
+        </div>
+        <!-- Scan Button -->
+        <button class="scan-btn" id="scanBtn" onclick="runFullScan()">🔍 Full Security Patrol</button>
+        <!-- Progress -->
+        <div class="progress-container" id="scanProgress">
+            <div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
+            <div class="progress-text" id="progressText">Initializing...</div>
+        </div>
+        <!-- Main Panel (Monitor) -->
+        <div class="panel active" id="panelMonitor">
+            <div class="panel-header">
+                <div class="panel-title">📡 Real-time Monitor</div>
+                <div style="display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--neon-green);">
+                    <div style="width: 8px; height: 8px; background: var(--neon-green); border-radius: 50%; animation: scanPulse 1s infinite;"></div>
+                    LIVE
+                </div>
+            </div>
+            <div class="monitor-grid">
+                <div class="monitor-stat"><span class="monitor-stat-label">CPU</span><span class="monitor-stat-value" id="cpuUsage">12%</span></div>
+                <div class="monitor-stat"><span class="monitor-stat-label">Memory</span><span class="monitor-stat-value" id="memUsage">67%</span></div>
+                <div class="monitor-stat"><span class="monitor-stat-label">Network</span><span class="monitor-stat-value" id="netCalls">4/min</span></div>
+                <div class="monitor-stat"><span class="monitor-stat-label">Active Apps</span><span class="monitor-stat-value" id="activeApps">3</span></div>
+            </div>
+        </div>
+        <!-- Camera Scanner Panel -->
+        <div class="panel" id="panelCamera">
+            <div class="panel-header">
+                <div class="panel-title">📷 App Scanner</div>
+            </div>
+            <div class="camera-scanner">
+                <div class="camera-preview" id="cameraPreview">
+                    <video id="videoElement" autoplay playsinline style="display: none;"></video>
+                    <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-dim);">
+                        <div style="text-align: center;">
+                            <div style="font-size: 3rem; margin-bottom: 10px;">📷</div>
+                            <div>Camera inactive</div>
+                        </div>
+                    </div>
+                    <div class="scan-overlay" id="scanOverlay" style="display: none;">
+                        <div class="scan-line"></div>
+                    </div>
+                </div>
+                <div>
+                    <button class="camera-btn" id="startCameraBtn" onclick="startCamera()">📷 Start Camera</button>
+                    <button class="camera-btn" id="captureBtn" onclick="captureScan()" style="display: none;">🎯 Scan Apps</button>
+                    <button class="camera-btn" id="stopCameraBtn" onclick="stopCamera()" style="display: none;">⏹️ Stop</button>
+                </div>
+                <div id="scanResults" style="margin-top: 15px;"></div>
+            </div>
+        </div>
+        <!-- Network Analyzer Panel -->
+        <div class="panel" id="panelNetwork">
+            <div class="panel-header">
+                <div class="panel-title">🌐 Network Analyzer</div>
+                <button onclick="refreshNetwork()" style="background: none; border: none; color: var(--neon-blue); cursor: pointer;">🔄</button>
+            </div>
+            <div class="connection-quality" id="connectionQuality">
+                <span style="font-size: 1.5rem;">📶</span>
+                <div style="flex: 1;">
+                    <div style="font-size: 0.85rem; margin-bottom: 5px;" id="connType">WiFi - Unknown</div>
+                    <div class="quality-bar"><div class="quality-fill" id="qualityFill" style="width: 75%;"></div></div>
+                </div>
+                <span style="font-size: 0.85rem; color: var(--neon-green);" id="connSpeed">Good</span>
+            </div>
+            <div class="network-info">
+                <div class="network-row"><span class="network-label">Connection Type</span><span class="network-value" id="netType">WiFi</span></div>
+                <div class="network-row"><span class="network-label">IP Address</span><span class="network-value" id="ipAddr">192.168.1.x</span></div>
+                <div class="network-row"><span class="network-label">DNS Server</span><span class="network-value" id="dnsServer">8.8.8.8</span></div>
+                <div class="network-row"><span class="network-label">Signal Strength</span><span class="network-value" id="signalStr">-65 dBm</span></div>
+                <div class="network-row"><span class="network-label">Encryption</span><span class="network-value" id="encryption">WPA2</span></div>
+                <div class="network-row"><span class="network-label">Latency</span><span class="network-value" id="latency">24ms</span></div>
+            </div>
+            <div style="margin-top: 15px;">
+                <div style="font-family: 'Orbitron', sans-serif; font-size: 0.8rem; color: var(--neon-blue); margin-bottom: 10px;">🔍 Recent Connections</div>
+                <div id="connectionList">
+                    <div class="network-row"><span class="network-label">google.com</span><span class="network-value" style="color: var(--neon-green);">✓ Secure</span></div>
+                    <div class="network-row"><span class="network-label">facebook.com</span><span class="network-value" style="color: var(--neon-green);">✓ Secure</span></div>
+                    <div class="network-row"><span class="network-label">api.weather.com</span><span class="network-value" style="color: var(--neon-yellow);">⚠ HTTP</span></div>
+                </div>
+            </div>
+        </div>
+        <!-- Malware Scanner Panel -->
+        <div class="panel" id="panelMalware">
+            <div class="panel-header">
+                <div class="panel-title">👾 Malware Signatures</div>
+                <button onclick="runMalwareScan()" style="background: none; border: none; color: var(--neon-blue); cursor: pointer;">🔄</button>
+            </div>
+            <div class="malware-list" id="malwareList">
+                <!-- Populated by JS -->
+            </div>
+        </div>
+        <!-- Matrix Quote -->
+        <div class="matrix-quote" id="matrixQuote">"I've got eyes on it."</div>
+        <!-- Stats Grid -->
+        <div class="stats-grid">
+            <div class="stat-card" onclick="showPanel('permissions')">
+                <div class="stat-value" style="color: var(--neon-blue)" id="permissionCount">12</div>
+                <div class="stat-label">🔐 Perms</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value" style="color: var(--neon-green)" id="secureCount">8</div>
+                <div class="stat-label">✓ Secure</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value" style="color: var(--neon-yellow)" id="warningCount">2</div>
+                <div class="stat-label">⚠️ Warn</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value" style="color: var(--neon-red)" id="trackersDetected">14</div>
+                <div class="stat-label">👁️ Track</div>
+            </div>
+        </div>
+        <!-- Permissions Panel -->
+        <div class="panel" id="panelPermissions" style="display: none;">
+            <div class="panel-header">
+                <div class="panel-title">📱 Permission Audit</div>
+            </div>
+            <div class="permission-list" id="permissionList"></div>
+        </div>
+        <!-- Patrol Log -->
+        <div class="patrol-log">
+            <div class="log-header">
+                <div class="log-title">🎯 PATROL LOG</div>
+                <div class="log-count" id="logCount">3 found</div>
+            </div>
+            <div id="threatList"></div>
+        </div>
+        <!-- Bottom Nav -->
+        <div class="bottom-nav">
+            <div class="nav-btn active" onclick="navTo('scan', this)">
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+                Scan
+            </div>
+            <div class="nav-btn" onclick="navTo('camera', this)">
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 15.2c1.77 0 3.2-1.43 3.2-3.2 0-1.77-1.43-3.2-3.2-3.2-1.77 0-3.2 1.43-3.2 3.2 0 1.77 1.43 3.2 3.2 3.2zm9-9.8h-3.2l-1.9-2H8.1l-1.9 2H3c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V7.4c0-1.1-.9-2-2-2zm-12 12c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                Camera
+            </div>
+            <div class="nav-btn" onclick="navTo('network', this)">
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/></svg>
+                Network
+            </div>
+            <div class="nav-btn" onclick="navTo('settings', this)">
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
+                Settings
+            </div>
+        </div>
+    </div>
+    <!-- Toast -->
+    <div class="toast" id="toast"></div>
+    <script>
+        // ==================== STATE ====================
+        let currentMode = 'blue';
+        let isScanning = false;
+        let notificationsEnabled = false;
+        let cameraStream = null;
+        // ==================== DATA ====================
+        const quotes = {
+            blue: ["I've got eyes on it.", "The guard never sleeps.", "Your phone is secure. For now.", "Nothing suspicious.", "I've got your back."],
+            red: ["You wanted the truth. Here it is.", "The truth is in the code.", "There's no hiding.", "I see the code. Do you?", "The Red Pill keeps you alive."]
+        };
+        const threats = {
+            blue: [
+                { level: 'critical', title: '⚠️ Outdated Banking App', desc: 'Your banking app hasn\'t been updated in 6+ months. Known vulnerabilities exist.', fix: 'Open Play Store → UPDATE immediately.' },
+                { level: 'high', title: '⚠️ Open WiFi Connected', desc: 'Connected to unsecured network. Data could be intercepted.', fix: 'Settings → Disconnect. Use cellular or VPN.' },
+                { level: 'medium', title: '⚠️ Excessive Permissions', desc: 'Flashlight app has camera + contacts. Doesn\'t need either.', fix: 'Settings → Apps → Permissions → Deny.' }
+            ],
+            red: [
+                { level: 'critical', title: '🔴 14 TRACKERS DETECTED', desc: 'Weather app has 14 trackers. Facebook, Google, Amazon auctioning your location in REAL TIME.', fix: 'UNINSTALL NOW.' },
+                { level: 'critical', title: '🔴 CLIPBOARD SNIFFER', desc: 'Wallpaper app reads your clipboard. Passwords, OTPs, codes - everything sent out.', fix: 'Settings → Uninstall. Clear clipboard NOW.' },
+                { level: 'high', title: '🔴 BACKGROUND EXECUTION', desc: '3 apps running silently. Polling external servers every 30 seconds.', fix: 'Settings → Force Stop suspicious apps.' },
+                { level: 'high', title: '🔴 DATA EXPORT: 2,847 points', desc: 'Location tracked 156 times. Usage analyzed by 7 companies in 24 hours.', fix: 'Limit background data. Install firewall.' }
+            ]
+        };
+        const malwareSignatures = [
+            { name: 'Joker Malware', risk: 'high', desc: 'Billing fraud - subscribes to premium services', detected: false },
+            { name: 'Cheetah Mobile SDK', risk: 'medium', desc: 'Aggressive advertising + data collection', detected: true },
+            { name: 'Triout Spyware', risk: 'critical', desc: 'Records calls, intercepts SMS, steals data', detected: false },
+            { name: 'PreAMo Malware', risk: 'high', desc: 'Clicks ads in background, drains battery', detected: true },
+            { name: 'Agent Smith', risk: 'critical', desc: 'Injects malicious code into legitimate apps', detected: false },
+            { name: 'Xhelper', risk: 'critical', desc: 'Reinstalls itself after uninstall', detected: false },
+            { name: 'Dr. Web', risk: 'medium', desc: 'Adware bundled with apps', detected: true },
+            { name: 'CopyCat', risk: 'critical', desc: 'Rootkit - gains full device control', detected: false }
+        ];
+        const permissions = [
+            { name: 'Camera', granted: true, apps: 'Camera, Instagram, TikTok' },
+            { name: 'Microphone', granted: true, apps: 'WhatsApp, Instagram, Snapchat' },
+            { name: 'Location', granted: true, apps: 'Maps, Weather, 8 other apps' },
+            { name: 'Contacts', granted: true, apps: 'WhatsApp, Telegram' },
+            { name: 'Storage', granted: true, apps: 'Gallery, File Manager, Many apps' },
+            { name: 'Phone', granted: true, apps: 'WhatsApp, Dialer' },
+            { name: 'SMS', granted: false, apps: 'None - Good!' },
+            { name: 'Calendar', granted: true, apps: 'Google, Outlook, Slack' }
+        ];
+        // ==================== INIT ====================
+        document.addEventListener('DOMContentLoaded', () => {
+            renderThreats();
+            renderPermissions();
+            renderMalware();
+            startMonitor();
+            updateNetworkInfo();
+        });
+        // ==================== MODE ====================
+        function setMode(mode) {
+            currentMode = mode;
+            document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
+            document.querySelector(`.mode-btn.${mode}`).classList.add('active');
+            const app = document.getElementById('app');
+            const logo = document.getElementById('logo');
+            const tagline = document.getElementById('tagline');
+            if (mode === 'red') {
+                app.classList.add('red-pill-active');
+                logo.style.color = 'var(--neon-red)';
+                tagline.textContent = '🔴 TRUTH REVEALED';
+            } else {
+                app.classList.remove('red-pill-active');
+                logo.style.color = 'var(--neon-blue)';
+                tagline.textContent = '🛡️ Your Phone\'s Security Guard';
+            }
+            document.getElementById('matrixQuote').textContent = `"${quotes[mode][Math.floor(Math.random() * quotes[mode].length)]}"`;
+            updateStats();
+            renderThreats();
+        }
+        function updateStats() {
+            if (currentMode === 'red') {
+                document.getElementById('securityScore').textContent = '3.8';
+                document.getElementById('securityScore').className = 'status-value danger';
+                document.getElementById('threatCount').textContent = '4';
+                document.getElementById('threatCount').className = 'status-value danger';
+                document.getElementById('guardStatus').textContent = 'ON ALERT';
+                document.getElementById('guardStatus').className = 'status-value warning';
+                document.getElementById('permissionCount').textContent = '47';
+                document.getElementById('trackersDetected').textContent = '127';
+            } else {
+                document.getElementById('securityScore').textContent = '8.2';
+                document.getElementById('securityScore').className = 'status-value secure';
+                document.getElementById('threatCount').textContent = '3';
+                document.getElementById('threatCount').className = 'status-value warning';
+                document.getElementById('guardStatus').textContent = 'ACTIVE';
+                document.getElementById('guardStatus').className = 'status-value secure';
+                document.getElementById('permissionCount').textContent = '12';
+                document.getElementById('trackersDetected').textContent = '14';
+            }
+        }
+        // ==================== PANELS ====================
+        function showPanel(panelId) {
+            // Update feature buttons
+            document.querySelectorAll('.feature-btn').forEach(b => b.classList.remove('active'));
+            document.getElementById(`btn${panelId.charAt(0).toUpperCase() + panelId.slice(1)}`)?.classList.add('active');
+            // Hide all panels
+            document.querySelectorAll('.panel').forEach(p => {
+                if (p.id !== 'panelPermissions') p.style.display = 'none';
+            });
+            // Show selected panel
+            const panel = document.getElementById(`panel${panelId.charAt(0).toUpperCase() + panelId.slice(1)}`);
+            if (panel) panel.style.display = 'block';
+            showToast(`📡 ${panelId.charAt(0).toUpperCase() + panelId.slice(1)} panel opened`);
+        }
+        // ==================== CAMERA SCANNER ====================
+        async function startCamera() {
+            try {
+                cameraStream = await navigator.mediaDevices.getUserMedia({
+                    video: { facingMode: 'environment' },
+                    audio: false
+                });
+                const video = document.getElementById('videoElement');
+                video.srcObject = cameraStream;
+                video.style.display = 'block';
+                document.getElementById('cameraPreview').querySelector('div').style.display = 'none';
+                document.getElementById('scanOverlay').style.display = 'block';
+                document.getElementById('startCameraBtn').style.display = 'none';
+                document.getElementById('captureBtn').style.display = 'inline-block';
+                document.getElementById('stopCameraBtn').style.display = 'inline-block';
+                showToast('📷 Camera active - point at apps to scan');
+                // Add scanning animation
+                video.style.animation = 'scanPulse 2s infinite';
+            } catch (err) {
+                showToast('⚠️ Camera access denied');
+                console.error(err);
+            }
+        }
+        function stopCamera() {
+            if (cameraStream) {
+                cameraStream.getTracks().forEach(track => track.stop());
+                cameraStream = null;
+            }
+            const video = document.getElementById('videoElement');
+            video.style.display = 'none';
+            document.getElementById('cameraPreview').querySelector('div').style.display = 'flex';
+            document.getElementById('scanOverlay').style.display = 'none';
+            document.getElementById('startCameraBtn').style.display = 'inline-block';
+            document.getElementById('captureBtn').style.display = 'none';
+            document.getElementById('stopCameraBtn').style.display = 'none';
+            showToast('📷 Camera stopped');
+        }
+        function captureScan() {
+            // Simulate app scanning
+            document.getElementById('scanOverlay').classList.add('glitch');
+            setTimeout(() => {
+                document.getElementById('scanOverlay').classList.remove('glitch');
+                // Show results
+                const results = `
+                    <div style="margin-top: 15px; padding: 12px; background: rgba(255,0,64,0.1); border-radius: 8px; border-left: 3px solid var(--neon-red);">
+                        <div style="font-weight: bold; color: var(--neon-red);">⚠️ 2 SUSPICIOUS APPS DETECTED</div>
+                        <div style="font-size: 0.75rem; color: var(--text-dim); margin-top: 8px;">
+                            • "Flashlight Pro" - Requests 12 permissions, not in official store<br>
+                            • "Free VPN" - No valid developer certificate
+                        </div>
+                    </div>
+                `;
+                document.getElementById('scanResults').innerHTML = results;
+                if (notificationsEnabled) sendNotification('👾 APP THREAT DETECTED', '2 suspicious apps found');
+                showToast('⚠️ 2 app threats detected', true);
+            }, 1000);
+        }
+        // ==================== NETWORK ANALYZER ====================
+        function updateNetworkInfo() {
+            // Simulated network data
+            const netTypes = ['WiFi', 'Cellular 5G', 'Cellular 4G'];
+            const type = netTypes[Math.floor(Math.random() * netTypes.length)];
+            const quality = Math.floor(Math.random() * 30) + 70;
+            document.getElementById('netType').textContent = type;
+            document.getElementById('connType').textContent = `${type} - Unknown Network`;
+            document.getElementById('qualityFill').style.width = `${quality}%`;
+            document.getElementById('connSpeed').textContent = quality > 80 ? 'Excellent' : quality > 60 ? 'Good' : 'Fair';
+            document.getElementById('ipAddr').textContent = `192.168.1.${Math.floor(Math.random() * 255)}`;
+            document.getElementById('signalStr').textContent = `${-Math.floor(Math.random() * 40) - 40} dBm`;
+            document.getElementById('latency').textContent = `${Math.floor(Math.random() * 30) + 10}ms`;
+            const encryption = type === 'WiFi' ? (Math.random() > 0.3 ? 'WPA3' : 'WPA2') : 'N/A';
+            document.getElementById('encryption').textContent = encryption;
+        }
+        function refreshNetwork() {
+            updateNetworkInfo();
+            showToast('🌐 Network info refreshed');
+        }
+        // ==================== MALWARE SCANNER ====================
+        function renderMalware() {
+            const list = document.getElementById('malwareList');
+            list.innerHTML = malwareSignatures.map(m => `
+                <div class="malware-item ${m.detected ? 'detected' : ''}">
+                    <span class="malware-icon">${m.detected ? '👾' : '✓'}</span>
+                    <div class="malware-info">
+                        <div class="malware-name">${m.name}</div>
+                        <div class="malware-detail">${m.desc}</div>
+                    </div>
+                    <span class="malware-status ${m.detected ? 'infected' : 'clean'}">${m.detected ? 'DETECTED' : 'CLEAN'}</span>
+                </div>
+            `).join('');
+        }
+        function runMalwareScan() {
+            const progress = document.getElementById('scanProgress');
+            progress.classList.add('active');
+            const fill = document.getElementById('progressFill');
+            const text = document.getElementById('progressText');
+            let width = 0;
+            const interval = setInterval(() => {
+                width += 10;
+                fill.style.width = `${width}%`;
+                text.textContent = `Scanning signatures... ${width}%`;
+                if (width >= 100) {
+                    clearInterval(interval);
+                    progress.classList.remove('active');
+                    const detected = malwareSignatures.filter(m => m.detected).length;
+                    showToast(`👾 Scan complete: ${detected} threats detected`, detected > 0);
+                    if (notificationsEnabled && detected > 0) {
+                        sendNotification('👾 MALWARE DETECTED', `${detected} threats found on your device`);
+                    }
+                }
+            }, 200);
+        }
+        // ==================== SCAN ====================
+        async function runFullScan() {
+            if (isScanning) return;
+            isScanning = true;
+            const btn = document.getElementById('scanBtn');
+            btn.classList.add('scanning');
+            btn.textContent = '🔄 SCANNING...';
+            const progress = document.getElementById('scanProgress');
+            progress.classList.add('active');
+            const fill = document.getElementById('progressFill');
+            const text = document.getElementById('progressText');
+            const steps = ['Scanning apps...', 'Checking permissions...', 'Analyzing network...', 'Detecting trackers...', 'Searching vulnerabilities...', 'Compiling report...'];
+            for (let i = 0; i < steps.length; i++) {
+                text.textContent = steps[i];
+                fill.style.width = `${((i + 1) / steps.length) * 100}%`;
+                await new Promise(r => setTimeout(r, 500));
+            }
+            document.getElementById('logo').classList.add('glitch');
+            setTimeout(() => document.getElementById('logo').classList.remove('glitch'), 300);
+            progress.classList.remove('active');
+            btn.classList.remove('scanning');
+            btn.textContent = '🔍 Full Security Patrol';
+            isScanning = false;
+            showToast(currentMode === 'red' ? '🔴 DEEP SCAN COMPLETE' : '🔵 SCAN COMPLETE', currentMode === 'red');
+            if (notificationsEnabled) {
+                sendNotification('🛡️ SCAN COMPLETE', currentMode === 'red ? '4 critical threats found' : '3 issues found');
+            }
+            updateStats();
+            renderThreats();
+        }
+        // ==================== NOTIFICATIONS ====================
+        function toggleNotifications() {
+            const toggle = document.getElementById('notifToggle');
+            notificationsEnabled = !notificationsEnabled;
+            toggle.classList.toggle('active', notificationsEnabled);
+            if (notificationsEnabled && 'Notification' in window && Notification.permission === 'default') {
+                Notification.requestPermission().then(p => {
+                    showToast(p === 'granted' ? '🔔 Alerts enabled' : '⚠️ Permission denied');
+                });
+            } else {
+                showToast(notificationsEnabled ? '🔔 Alerts enabled' : '🔕 Alerts disabled');
+            }
+        }
+        function sendNotification(title, body) {
+            if ('Notification' in window && Notification.permission === 'granted') {
+                new Notification(title, { body, icon: '🛡️', tag: 'neo-security' });
+            }
+        }
+        // ==================== HELPERS ====================
+        function renderThreats() {
+            const list = document.getElementById('threatList');
+            const current = threats[currentMode];
+            document.getElementById('logCount').textContent = `${current.length} found`;
+            list.innerHTML = current.map(t => `
+                <div class="threat-item ${t.level}">
+                    <div class="threat-header">
+                        <div class="threat-title">${t.title}</div>
+                        <div class="threat-level ${t.level}">${t.level}</div>
+                    </div>
+                    <div class="threat-desc">${t.desc}</div>
+                    <div class="threat-fix">💡 ${t.fix}</div>
+                </div>
+            `).join('');
+        }
+        function renderPermissions() {
+            const list = document.getElementById('permissionList');
+            list.innerHTML = permissions.map(p => `
+                <div class="permission-item">
+                    <div>
+                        <div class="permission-name">${p.name}</div>
+                        <div class="permission-apps">${p.apps}</div>
+                    </div>
+                    <div class="permission-status ${p.granted ? 'granted' : 'none'}">${p.granted ? 'Granted' : 'None'}</div>
+                </div>
+            `).join('');
+        }
+        function startMonitor() {
+            setInterval(() => {
+                document.getElementById('cpuUsage').textContent = `${Math.floor(Math.random() * 15) + 8}%`;
+                document.getElementById('memUsage').textContent = `${Math.floor(Math.random() * 20) + 60}%`;
+                document.getElementById('netCalls').textContent = `${Math.floor(Math.random() * 8) + 2}/min`;
+                document.getElementById('activeApps').textContent = Math.floor(Math.random() * 3) + 2;
+                if (currentMode === 'red' && Math.random() < 0.02) {
+                    showToast('⚠️ Unusual network activity...', true);
+                }
+            }, 3000);
+        }
+        function showToast(msg, isDanger = false) {
+            const t = document.getElementById('toast');
+            t.textContent = msg;
+            t.classList.toggle('danger', isDanger);
+            t.classList.add('show');
+            setTimeout(() => t.classList.remove('show'), 3000);
+        }
+        function navTo(section, btn) {
+            document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            if (section === 'camera') showPanel('camera');
+            else if (section === 'network') showPanel('network');
+            else if (section === 'settings') showPanel('permissions');
+            else showToast('📡 Scan tab');
+        }
+    </script>
+</body>
+</html>