Spaces:

senku21230
/

21

Paused

App Files Files Community

senku21230 commited on 2 days ago

Commit

484bbca

verified ·

1 Parent(s): ed53ea2

Update server.js

Browse files

Files changed (1) hide show

server.js +309 -17

server.js CHANGED Viewed

@@ -455,34 +455,326 @@ app.get('/latest-frame', async (req, res) => {
 });
 // The actual HTML page you will view or embed
 app.get('/live', (req, res) => {
     res.send(`
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>AI God-Mode Live Tracker</title>
         <style>
-            body { margin: 0; background-color: #0f172a; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
-            .container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-image: radial-gradient(#1e293b 1px, transparent 1px); background-size: 20px 20px; }
-            img { max-width: 95%; max-height: 90%; object-fit: contain; border-radius: 12px; box-shadow: 0 10px 40px rgba(16, 185, 129, 0.2); border: 2px solid #10b981; transition: opacity 0.2s; }
-            .status-bar { position: absolute; top: 20px; left: 20px; color: #10b981; font-weight: bold; font-size: 15px; background: rgba(15, 23, 42, 0.8); padding: 8px 15px; border-radius: 8px; border: 1px solid #1e293b; display: flex; align-items: center; gap: 10px; backdrop-filter: blur(5px); }
-            .dot { width: 12px; height: 12px; background-color: #10b981; border-radius: 50%; animation: pulse 1.5s infinite; }
-            @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
         </style>
     </head>
     <body>
-        <div class="container">
-            <div class="status-bar"><div class="dot"></div> LIVE AI TRACKING</div>
-            <img id="stream" src="" alt="Connecting to AI Browser..." />
-        </div>
         <script>
-            const img = document.getElementById('stream');
-            // Fetch a fresh frame from the browser every 500ms
-            setInterval(() => {
-                img.src = '/latest-frame?t=' + new Date().getTime();
-            }, 500);
         </script>
     </body>
     </html>

 });
 // The actual HTML page you will view or embed
+// ==========================================
+// PREMIUM LIVE STREAM DASHBOARD (UI/UX)
+// ==========================================
 app.get('/live', (req, res) => {
     res.send(`
     <!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>AI GOD-MODE | Live Engine</title>
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
         <style>
+            :root {
+                --bg-main: #0b0f19;
+                --accent-primary: #10b981;
+                --accent-glow: rgba(16, 185, 129, 0.4);
+                --glass-bg: rgba(15, 23, 42, 0.65);
+                --glass-border: rgba(255, 255, 255, 0.08);
+                --text-main: #f8fafc;
+                --text-muted: #94a3b8;
+            }
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+                font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            }
+            body {
+                background-color: var(--bg-main);
+                background-image:
+                    radial-gradient(circle at 15% 50%, rgba(16, 185, 129, 0.05), transparent 25%),
+                    radial-gradient(circle at 85% 30%, rgba(56, 189, 248, 0.05), transparent 25%);
+                color: var(--text-main);
+                height: 100vh;
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+            }
+            /* --- Header Navigation --- */
+            header {
+                background: var(--glass-bg);
+                backdrop-filter: blur(12px);
+                -webkit-backdrop-filter: blur(12px);
+                border-bottom: 1px solid var(--glass-border);
+                padding: 1rem 1.5rem;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                z-index: 10;
+            }
+            .brand {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                font-weight: 700;
+                letter-spacing: 1px;
+                font-size: 1.1rem;
+            }
+            .brand i {
+                color: var(--accent-primary);
+                font-size: 1.4rem;
+                filter: drop-shadow(0 0 8px var(--accent-glow));
+            }
+            .status-badges {
+                display: flex;
+                gap: 10px;
+            }
+            .badge {
+                background: rgba(16, 185, 129, 0.1);
+                border: 1px solid rgba(16, 185, 129, 0.2);
+                color: var(--accent-primary);
+                padding: 4px 10px;
+                border-radius: 6px;
+                font-size: 0.75rem;
+                font-weight: 600;
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+            }
+            .live-dot {
+                width: 8px;
+                height: 8px;
+                background-color: var(--accent-primary);
+                border-radius: 50%;
+                animation: pulse 1.5s infinite;
+            }
+            /* --- Main Stage --- */
+            main {
+                flex: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 1.5rem;
+                position: relative;
+            }
+            .stream-container {
+                position: relative;
+                width: 100%;
+                max-width: 1600px;
+                height: 100%;
+                background: #000;
+                border-radius: 16px;
+                border: 1px solid var(--glass-border);
+                box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02);
+                overflow: hidden;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+            #stream {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+                z-index: 2;
+                transition: opacity 0.3s ease;
+                opacity: 0; /* Hidden until loaded */
+            }
+            .loading-state {
+                position: absolute;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 15px;
+                color: var(--text-muted);
+                z-index: 1;
+            }
+            .spinner {
+                width: 40px;
+                height: 40px;
+                border: 3px solid rgba(255,255,255,0.1);
+                border-top-color: var(--accent-primary);
+                border-radius: 50%;
+                animation: spin 1s linear infinite;
+            }
+            /* --- Bottom Controls --- */
+            .controls {
+                position: absolute;
+                bottom: 20px;
+                left: 50%;
+                transform: translateX(-50%);
+                background: var(--glass-bg);
+                backdrop-filter: blur(16px);
+                border: 1px solid var(--glass-border);
+                padding: 10px 20px;
+                border-radius: 12px;
+                display: flex;
+                gap: 20px;
+                z-index: 10;
+                box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+                opacity: 0;
+                transition: opacity 0.3s ease, transform 0.3s ease;
+            }
+            .stream-container:hover .controls {
+                opacity: 1;
+                transform: translateX(-50%) translateY(0);
+            }
+            .control-btn {
+                background: transparent;
+                border: none;
+                color: var(--text-main);
+                font-size: 1.2rem;
+                cursor: pointer;
+                transition: color 0.2s, transform 0.2s;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 40px;
+                height: 40px;
+                border-radius: 8px;
+            }
+            .control-btn:hover {
+                background: rgba(255,255,255,0.1);
+                color: var(--accent-primary);
+                transform: scale(1.05);
+            }
+            /* --- Animations --- */
+            @keyframes pulse {
+                0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
+                70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
+                100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
+            }
+            @keyframes spin {
+                to { transform: rotate(360deg); }
+            }
+            /* --- Responsive Mobile Tweaks --- */
+            @media (max-width: 768px) {
+                header { padding: 1rem; }
+                .brand { font-size: 0.9rem; }
+                .badge span { display: none; } /* Hide text, keep dot on mobile */
+                main { padding: 0.5rem; }
+                .stream-container { border-radius: 8px; border: none; }
+                .controls { opacity: 1; bottom: 10px; padding: 8px 15px; } /* Always show controls on mobile */
+            }
         </style>
     </head>
     <body>
+        <header>
+            <div class="brand">
+                <i class="fa-solid fa-microchip"></i>
+                AI GOD-MODE
+            </div>
+            <div class="status-badges">
+                <div class="badge">
+                    <i class="fa-solid fa-shield-halved"></i>
+                    <span>Secure</span>
+                </div>
+                <div class="badge">
+                    <div class="live-dot"></div>
+                    <span>Live Tracking</span>
+                </div>
+            </div>
+        </header>
+        <main>
+            <div class="stream-container" id="streamContainer">
+                <div class="loading-state" id="loadingState">
+                    <div class="spinner"></div>
+                    <div style="font-size: 0.9rem; letter-spacing: 1px;">WAITING FOR AI ENGINE...</div>
+                </div>
+                <img id="stream" src="" alt="AI Stream" />
+                <div class="controls">
+                    <button class="control-btn" id="refreshBtn" title="Force Refresh">
+                        <i class="fa-solid fa-rotate-right"></i>
+                    </button>
+                    <button class="control-btn" id="fullscreenBtn" title="Toggle Fullscreen">
+                        <i class="fa-solid fa-expand"></i>
+                    </button>
+                </div>
+            </div>
+        </main>
         <script>
+            const streamImg = document.getElementById('stream');
+            const loadingState = document.getElementById('loadingState');
+            const streamContainer = document.getElementById('streamContainer');
+            const fullscreenBtn = document.getElementById('fullscreenBtn');
+            const refreshBtn = document.getElementById('refreshBtn');
+            let errorCount = 0;
+            let streamInterval;
+            function fetchFrame() {
+                const newUrl = '/latest-frame?t=' + new Date().getTime();
+                // Preload image to avoid flickering
+                const tempImg = new Image();
+                tempImg.onload = () => {
+                    streamImg.src = newUrl;
+                    streamImg.style.opacity = '1';
+                    loadingState.style.display = 'none';
+                    errorCount = 0;
+                };
+                tempImg.onerror = () => {
+                    errorCount++;
+                    if(errorCount > 3) {
+                        streamImg.style.opacity = '0';
+                        loadingState.style.display = 'flex';
+                        loadingState.innerHTML = '<i class="fa-solid fa-triangle-exclamation" style="font-size: 2rem; color: #ef4444;"></i><div style="font-size: 0.9rem;">CONNECTION LOST. RETRYING...</div>';
+                    }
+                };
+                tempImg.src = newUrl;
+            }
+            // Start fetching frames
+            streamInterval = setInterval(fetchFrame, 500);
+            // Manual Refresh
+            refreshBtn.addEventListener('click', () => {
+                loadingState.style.display = 'flex';
+                loadingState.innerHTML = '<div class="spinner"></div><div style="font-size: 0.9rem;">RECONNECTING...</div>';
+                streamImg.style.opacity = '0';
+                fetchFrame();
+            });
+            // Fullscreen Logic
+            fullscreenBtn.addEventListener('click', () => {
+                if (!document.fullscreenElement) {
+                    streamContainer.requestFullscreen().catch(err => {
+                        console.error(\`Error attempting to enable fullscreen: \${err.message}\`);
+                    });
+                    fullscreenBtn.innerHTML = '<i class="fa-solid fa-compress"></i>';
+                } else {
+                    document.exitFullscreen();
+                    fullscreenBtn.innerHTML = '<i class="fa-solid fa-expand"></i>';
+                }
+            });
+            // Handle ESC key or system back button exiting fullscreen
+            document.addEventListener('fullscreenchange', () => {
+                if (!document.fullscreenElement) {
+                    fullscreenBtn.innerHTML = '<i class="fa-solid fa-expand"></i>';
+                }
+            });
         </script>
     </body>
     </html>