Spaces:

edsaga
/

gridland-1

Running

App Files Files Community

edsaga commited on Nov 28, 2025

Commit

89ba830

verified ·

1 Parent(s): 6e9678a

You need to *uniformly follow all of the design instructions and apply them across the entire design. There should not be random big pictures of polenta, and this project should now be called "GRIDLAND." You also need to implement the Draggabilly library so that the windows can be draggable.

Browse files

Files changed (4) hide show

components/window.js +59 -0
index.html +16 -756
script.js +23 -0
style.css +9 -6

components/window.js ADDED Viewed

	@@ -0,0 +1,59 @@

+class GridlandWindow extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .window {
+          background: white;
+          box-shadow:
+            inset -1px -1px 0 0px #0a0a0a,
+            inset 1px 1px 0 0px #dfdfdf,
+            inset -2px -2px 0 0px #808080,
+            inset 2px 2px 0 0px #ffffff;
+          position: absolute;
+          z-index: 10;
+          cursor: move;
+          width: 300px;
+        }
+        .window-title {
+          background: linear-gradient(to right, #000080, #1084d0);
+          color: white;
+          padding: 4px 8px;
+          font-weight: bold;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .window-content {
+          padding: 8px;
+        }
+        .close-btn {
+          background: white;
+          color: black;
+          border: 1px solid black;
+          width: 16px;
+          height: 16px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+        }
+      </style>
+      <div class="window">
+        <div class="window-title">
+          <span>${this.getAttribute('title') || 'Window'}</span>
+          <button class="close-btn">×</button>
+        </div>
+        <div class="window-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => {
+      this.remove();
+    });
+  }
+}
+customElements.define('gridland-window', GridlandWindow);

index.html CHANGED Viewed

@@ -1,763 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CamXploit Scanner v2.0.1</title>
-    <link rel="stylesheet" href="https://unpkg.com/@sakun/system.css">
-    <link rel="stylesheet" href="style.css">
-    <script src="https://cdn.tailwindcss.com"></script>
-<style>
-        @font-face {
-            font-family: 'Chicago';
-            src: url('https://unpkg.com/system-font-css@2.0.1/fonts/ChicagoFLF.ttf') format('truetype');
-        }
-        @font-face {
-            font-family: 'Geneva';
-            src: url('https://unpkg.com/system-font-css@2.0.1/fonts/GenevaFLF.ttf') format('truetype');
-        }
-        body {
-            background-color: #008080;
-            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AkEEjIZJpQpWQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAJUlEQVQ4y2NgGAWjYBSMglEwCkbBKBgFgw0wDnQGRsEoGAWjYBSMglEAAKZQAf+J8jRZAAAAAElFTkSuQmCC');
-            font-family: 'Geneva', monospace;
-            font-size: 9pt;
-            color: #000;
-            margin: 0;
-            padding: 0;
-            height: 100vh;
-            overflow: hidden;
-        }
-        .window {
-            box-shadow: 4px 4px 0 #404040;
-            border: 2px solid #000;
-            background: #fff;
-            margin: 20px auto;
-        }
-        .title-bar {
-            background: linear-gradient(to right, #000 0%, #000 50%, #fff 50%, #fff 100%);
-            background-size: 16px 100%;
-            padding: 4px 6px;
-            border-bottom: 2px solid #000;
-            display: flex;
-            align-items: center;
-        }
-        .title {
-            font-family: 'Chicago', sans-serif;
-            font-size: 12pt;
-            margin: 0;
-            padding: 0 8px;
-            flex-grow: 1;
-            text-align: center;
-            color: #fff;
-            mix-blend-mode: difference;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .separator {
-            height: 2px;
-            background: #000;
-        }
-        .window-pane {
-            background: #fff;
-            padding: 12px;
-        }
-        .btn {
-            font-family: 'Geneva', monospace;
-            font-size: 9pt;
-            padding: 4px 12px;
-            border: 2px solid #000;
-            background: #fff;
-            cursor: pointer;
-            outline: none;
-        }
-        .btn:active, .btn:focus {
-            background: #000;
-            color: #fff;
-        }
-        .btn:disabled {
-            color: #808080;
-            background: #fff;
-            cursor: not-allowed;
-            border-style: dotted;
-        }
-        input[type="text"] {
-            font-family: 'Geneva', monospace;
-            font-size: 9pt;
-            padding: 4px;
-            border: 2px inset #c0c0c0;
-            outline: none;
-        }
-        input[type="text"]:focus {
-            border: 2px dotted #000;
-        }
-        .menu-bar {
-            background: #fff;
-            border-bottom: 2px solid #000;
-            padding: 4px 8px;
-            display: flex;
-        }
-        .menu-bar ul {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-            display: flex;
-        }
-        .menu-bar li {
-            position: relative;
-            padding: 2px 12px;
-            cursor: default;
-        }
-        .menu-bar li:hover {
-            background: #000;
-            color: #fff;
-        }
-        .dropdown {
-            display: none;
-            position: absolute;
-            top: 100%;
-            left: 0;
-            background: #fff;
-            border: 2px solid #000;
-            min-width: 160px;
-            z-index: 100;
-            padding: 4px 0;
-        }
-        .menu-bar li:hover .dropdown {
-            display: block;
-        }
-        .dropdown li {
-            padding: 4px 12px;
-            white-space: nowrap;
-        }
-        .dropdown li.divider {
-            border-top: 1px solid #000;
-            margin-top: 4px;
-            padding-top: 8px;
-        }
-        .dropdown a {
-            color: inherit;
-            text-decoration: none;
-            display: block;
-        }
-        #results-output {
-            font-family: 'Geneva', monospace;
-            font-size: 9pt;
-            line-height: 1.4;
-            white-space: pre-wrap;
-        }
-        #results-output::-webkit-scrollbar {
-            width: 16px;
-            height: 16px;
-        }
-        #results-output::-webkit-scrollbar-track {
-            background: #fff;
-            border-left: 2px solid #000;
-        }
-        #results-output::-webkit-scrollbar-thumb {
-            background: #000;
-            border: 2px solid #fff;
-        }
-        #results-output::-webkit-scrollbar-button {
-            background: #fff;
-            border: 2px solid #000;
-            height: 16px;
-            width: 16px;
-        }
-        .field-row {
-            margin-bottom: 12px;
-            display: flex;
-            align-items: center;
-        }
-        .field-row label {
-            width: 120px;
-            display: inline-block;
-        }
-        #progress-bar {
-            height: 16px;
-            border: 1px solid #000;
-            background: #fff;
-            position: relative;
-            width: 280px;
-        }
-        #progress-bar-fill {
-            height: 100%;
-            background: #000;
-            width: 0%;
-            transition: width 0.3s;
-        }
-        #progress-text {
-            position: absolute;
-            top: 1px;
-            left: 4px;
-            font-family: 'Geneva', monospace;
-            font-size: 8pt;
-            color: #fff;
-            mix-blend-mode: difference;
-        }
-        .stream-window {
-            position: fixed;
-            top: 50px;
-            left: 50px;
-            z-index: 999;
-        }
-        @media (max-width: 768px) {
-            .window {
-                width: 95% !important;
-                margin: 10px auto;
-            }
-            .field-row {
-                flex-direction: column;
-                align-items: flex-start;
-            }
-            .field-row label {
-                margin-bottom: 4px;
-                width: auto;
-            }
-            #target-ip {
-                width: 100% !important;
-            }
-            #progress-bar {
-                width: 100% !important;
-            }
-        }
-    </style>
 </head>
 <body>
-  <custom-navbar></custom-navbar>
-    <div class="menu-bar" role="menubar" style="margin-top: 60px;">
-<ul role="menu">
-            <li role="menuitem" tabindex="0">📁 File
-                <ul role="menu" class="dropdown">
-                    <li role="menuitem"><a href="#new">New Scan</a></li>
-                    <li role="menuitem" class="divider"><a href="#export">Export Results</a></li>
-                    <li role="menuitem"><a href="#quit">Quit</a></li>
-                </ul>
-            </li>
-            <li role="menuitem" tabindex="0">⚙️ Tools
-                <ul role="menu" class="dropdown">
-                    <li role="menuitem"><a href="#shodan">Search Shodan</a></li>
-                    <li role="menuitem"><a href="#censys">Search Censys</a></li>
-                    <li role="menuitem"><a href="#google">Google Dork</a></li>
-                </ul>
-            </li>
-            <li role="menuitem" tabindex="0">❓ Help
-                <ul role="menu" class="dropdown">
-                    <li role="menuitem"><a href="#about">About CamXploit</a></li>
-                    <li role="menuitem"><a href="#usage">Usage Guide</a></li>
-                </ul>
-            </li>
-        </ul>
-    </div>
-    <div class="window" style="width: 680px; margin: 20px auto;">
-        <div class="title-bar">
-            <button aria-label="Close" class="close"></button>
-            <h1 class="title">🎥 CamXploit Scanner v2.0.1</h1>
-            <button aria-label="Resize" class="resize"></button>
-        </div>
-        <div class="separator"></div>
-        <div class="window-pane">
-            <div class="field-row">
-                <label for="target-ip">🎯 Target IP:</label>
-                <input type="text" id="target-ip" placeholder="192.168.1.1 or 192.168.1.0/24" style="width: 280px;">
-            </div>
-            <div class="field-row" style="margin-top: 16px;">
-                <button class="btn" id="start-scan" style="margin-right: 8px;">🔍 Start Scan</button>
-                <button class="btn" id="stop-scan" disabled>⏹️ Stop Scan</button>
-                <button class="btn" id="clear-results" style="margin-left: 8px;">🗑️ Clear</button>
-            </div>
-            <div class="field-row" style="margin-top: 16px;">
-                <label>📊 Status:</label>
-                <span id="scan-status" style="font-weight: bold;">Ready to scan</span>
-            </div>
-            <div class="field-row" style="margin-top: 8px;">
-                <label>⏱️ Progress:</label>
-                <div id="progress-bar">
-                    <div id="progress-bar-fill"></div>
-                    <span id="progress-text">0%</span>
-                </div>
-            </div>
-            <div class="field-row" style="margin-top: 16px; flex-direction: column;">
-                <label style="font-weight: bold; margin-bottom: 4px;">📋 Scan Results:</label>
-                <div id="results-output" style="width: 100%; height: 320px; border: 2px inset #c0c0c0; background: #fff; overflow-y: auto; padding: 8px;" tabindex="0">
-                    <!-- Scan results will appear here -->
-                </div>
-            </div>
-        </div>
-    </div>
-    <script>
-        // Global state management
-        let scanState = {
-            isScanning: false,
-            currentScan: null,
-            results: [],
-            totalFindings: 0
-        };
-        // DOM element references
-        const targetIpInput = document.getElementById('target-ip');
-        const startScanBtn = document.getElementById('start-scan');
-        const stopScanBtn = document.getElementById('stop-scan');
-        const clearResultsBtn = document.getElementById('clear-results');
-        const scanStatus = document.getElementById('scan-status');
-        const progressBarFill = document.getElementById('progress-bar-fill');
-        const progressText = document.getElementById('progress-text');
-        const resultsOutput = document.getElementById('results-output');
-        // System 6 style alert dialogs
-        function showSystemAlert(title, message, callback) {
-            const alertWindow = document.createElement('div');
-            alertWindow.className = 'window';
-            alertWindow.style.cssText = `
-                position: fixed;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 400px;
-                z-index: 1000;
-            `;
-            alertWindow.innerHTML = `
-                <div class="title-bar">
-                    <h1 class="title">⚠️ ${title}</h1>
-                </div>
-                <div class="separator"></div>
-                <div class="window-pane" style="padding: 16px; text-align: center;">
-                    <p style="margin: 16px 0; font-family: Geneva; font-size: 9pt;">${message}</p>
-                    <button class="btn" onclick="this.closest('.window').remove(); ${callback ? 'callback()' : ''}"
-                            style="margin-top: 16px;">OK</button>
-                </div>
-            `;
-            document.body.appendChild(alertWindow);
-        }
-        // IP validation with System 6 feedback
-        function validateIP(ip) {
-            const ipPattern = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\/[0-9]{1,2})?$/;
-            return ipPattern.test(ip.trim());
-        }
-        // Format scan results with System 6 styling
-        function formatScanResult(event) {
-            const timestamp = new Date().toLocaleTimeString();
-            let formattedResult = '';
-            switch(event.type) {
-                case 'status':
-                    formattedResult = `[${timestamp}] 📊 ${event.message}\n`;
-                    break;
-                case 'finding':
-                    scanState.totalFindings++;
-                    if (event.url) {
-                        formattedResult = `[${timestamp}] ✅ FOUND: ${event.message}\n`;
-                        formattedResult += `            🔗 URL: ${event.url}\n`;
-                        // Create clickable link for streams
-                        if (event.url.includes('rtsp://') || event.url.includes('http')) {
-                            const linkElement = document.createElement('a');
-                            linkElement.href = '#';
-                            linkElement.textContent = '👁️ View Stream';
-                            linkElement.style.cssText = 'color: #000; text-decoration: underline; cursor: pointer;';
-                            linkElement.onclick = () => openStreamViewer(event.url);
-                            resultsOutput.appendChild(linkElement);
-                            resultsOutput.appendChild(document.createTextNode('\n'));
-                        }
-                    } else {
-                        formattedResult = `[${timestamp}] 🔍 ${event.message}\n`;
-                    }
-                    break;
-                case 'error':
-                    formattedResult = `[${timestamp}]  ❌ ERROR: ${event.message}\n`;
-                    break;
-                case 'complete':
-                    formattedResult = `[${timestamp}] ✅ SCAN COMPLETE\n`;
-                    formattedResult += `           📊 Total findings: ${scanState.totalFindings}\n`;
-                    break;
-            }
-            return formattedResult;
-        }
-        // Stream viewer in System 6 style window
-        function openStreamViewer(streamUrl) {
-            const streamWindow = document.createElement('div');
-            streamWindow.className = 'window stream-window';
-            streamWindow.style.width = '640px';
-            const b64Url = btoa(streamUrl).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
-            streamWindow.innerHTML = `
-                <div class="title-bar">
-                    <button aria-label="Close" class="close" onclick="this.closest('.window').remove()"></button>
-                    <h1 class="title">📺 Stream Viewer</h1>
-                </div>
-                <div class="separator"></div>
-                <div class="window-pane" style="padding: 8px; height: calc(100% - 40px);">
-                    <video controls autoplay style="width: 100%; height: calc(100% - 60px); background: #000;">
-                        <source src="/stream/${b64Url}" type="application/vnd.apple.mpegurl">
-                        Your browser does not support HLS streams.
-                    </video>
-                    <div style="margin-top: 8px; font-family: Geneva; font-size: 8pt;">
-                         🔗 ${streamUrl}
-                    </div>
-                </div>
-            `;
-            document.body.appendChild(streamWindow);
-        }
-        // Main scan function with backend integration
-        async function startScan() {
-            const targetIP = targetIpInput.value.trim();
-            if (!targetIP) {
-                showSystemAlert('Input Error', 'Please enter a target IP address.');
-                return;
-            }
-            if (!validateIP(targetIP)) {
-                showSystemAlert('Input Error', 'Please enter a valid IP address or CIDR range.');
-                return;
-            }
-            // Update UI state
-            scanState.isScanning = true;
-            scanState.totalFindings = 0;
-            startScanBtn.disabled = true;
-            stopScanBtn.disabled = false;
-            targetIpInput.disabled = true;
-            // Clear previous results
-            resultsOutput.textContent = '';
-            updateProgress(0, 'Initializing scan...');
-            try {
-                const response = await fetch('/scan', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ ip: targetIP })
-                });
-                if (!response.ok) {
-                    const errorData = await response.json().catch(() => ({}));
-                    throw new Error(errorData.error || 'Server error');
-                }
-                // Process streaming response
-                const reader = response.body.getReader();
-                const decoder = new TextDecoder();
-                let buffer = '';
-                let progress = 0;
-                while (scanState.isScanning) {
-                    const { value, done } = await reader.read();
-                    if (done) break;
-                    buffer += decoder.decode(value, { stream: true });
-                    let lines = buffer.split('\n');
-                    buffer = lines.pop();
-                    for (const line of lines) {
-                        if (!line.trim()) continue;
-                        let event;
-                        try {
-                            event = JSON.parse(line);
-                        } catch (e) {
-                            continue;
-                        }
-                        // Update progress
-                        progress = Math.min(progress + 2, 95);
-                        updateProgress(progress, event.message || 'Scanning...');
-                        // Format and display result
-                        const formattedResult = formatScanResult(event);
-                        resultsOutput.textContent += formattedResult;
-                        resultsOutput.scrollTop = resultsOutput.scrollHeight;
-                        // Handle scan completion
-                        if (event.type === 'end' || event.complete) {
-                            finalizeScan();
-                            break;
-                        }
-                    }
-                }
-            } catch (error) {
-                showSystemAlert('Connection Error', `Failed to connect to scanner: ${error.message}`);
-                finalizeScan();
-            }
-        }
-        // Progress update with System 6 styling
-        function updateProgress(percentage, message) {
-            progressBarFill.style.width = `${percentage}%`;
-            progressText.textContent = `${Math.round(percentage)}%`;
-            scanStatus.textContent = message;
-        }
-        // Finalize scan state
-        function finalizeScan() {
-            scanState.isScanning = false;
-            startScanBtn.disabled = false;
-            stopScanBtn.disabled = true;
-            targetIpInput.disabled = false;
-            updateProgress(100, `Scan completed - ${scanState.totalFindings} findings`);
-        }
-        // Stop scan function
-        function stopScan() {
-            if (scanState.isScanning) {
-                scanState.isScanning = false;
-                showSystemAlert('Scan Stopped', 'Scan has been manually stopped.');
-                finalizeScan();
-            }
-        }
-        // Clear results function
-        function clearResults() {
-            resultsOutput.textContent = '';
-            scanState.results = [];
-            scanState.totalFindings = 0;
-            updateProgress(0, 'Ready to scan');
-        }
-        // Menu functions
-        function openSearchUrl(service, ip) {
-            const urls = {
-                shodan: `https://www.shodan.io/search?query=${ip}`,
-                censys: `https://search.censys.io/hosts/${ip}`,
-                google: `https://www.google.com/search?q=site:${ip}+inurl:view/view.shtml+OR+inurl:admin.html`
-            };
-            if (urls[service]) {
-                window.open(urls[service], '_blank');
-            }
-        }
-        // Event listeners
-        startScanBtn.addEventListener('click', startScan);
-        stopScanBtn.addEventListener('click', stopScan);
-        clearResultsBtn.addEventListener('click', clearResults);
-        // Enter key support for IP input
-        targetIpInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter' && !scanState.isScanning) {
-                startScan();
-            }
-        });
-        // Menu item handlers
-        document.querySelectorAll('[role="menuitem"] a').forEach(link => {
-            link.addEventListener('click', (e) => {
-                e.preventDefault();
-                const action = e.target.getAttribute('href').substring(1);
-                switch(action) {
-                    case 'new':
-                        clearResults();
-                        targetIpInput.focus();
-                        break;
-                    case 'export':
-                        exportResults();
-                        break;
-                    case 'shodan':
-                    case 'censys':
-                    case 'google':
-                        const ip = targetIpInput.value.trim();
-                        if (ip) {
-                            openSearchUrl(action, ip);
-                        } else {
-                            showSystemAlert('No Target', 'Please enter an IP address first.');
-                        }
-                        break;
-                    case 'about':
-                        showAboutDialog();
-                        break;
-                    case 'usage':
-                        showUsageDialog();
-                        break;
-                    case 'quit':
-                        showSystemAlert('Quit', 'This would close the application in a real environment.');
-                        break;
-                }
-            });
-        });
-        // Export results function
-        function exportResults() {
-            const results = resultsOutput.textContent;
-            if (!results.trim()) {
-                showSystemAlert('No Results', 'No scan results to export.');
-                return;
-            }
-            const blob = new Blob([results], { type: 'text/plain' });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = `camxploit-scan-${new Date().toISOString().slice(0,19).replace(/:/g,'-')}.txt`;
-            a.click();
-            URL.revokeObjectURL(url);
-        }
-        // About dialog
-        function showAboutDialog() {
-            const aboutWindow = document.createElement('div');
-            aboutWindow.className = 'window';
-            aboutWindow.style.cssText = `
-                position: fixed;
-                top: 30%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 500px;
-                z-index: 1000;
-            `;
-            aboutWindow.innerHTML = `
-                <div class="title-bar">
-                    <button aria-label="Close" class="close" onclick="this.closest('.window').remove()"></button>
-                    <h1 class="title">About CamXploit</h1>
-                </div>
-                <div class="separator"></div>
-                <div class="window-pane" style="padding: 16px;">
-                    <div style="text-align: center; margin-bottom: 16px;">
-                        <div style="font-size: 48px; margin-bottom: 8px;">🎥</div>
-                        <div style="font-family: Chicago; font-size: 12pt; font-weight: bold;">CamXploit Scanner</div>
-                        <div style="font-family: Geneva; font-size: 9pt;">Version 2.0.1</div>
-                    </div>
-                    <div style="font-family: Geneva; font-size: 9pt; line-height: 1.4;">
-                        <p>CamXploit is a reconnaissance tool for discovering exposed CCTV cameras and analyzing their security configurations.</p>
-                        <p><strong>Features:</strong></p>
-                        <ul style="margin-left: 20px;">
-                            <li>Comprehensive port scanning</li>
-                            <li>Camera brand detection</li>
-                            <li>Default credential testing</li>
-                            <li>Live stream discovery</li>
-                            <li>Vulnerability identification</li>
-                        </ul>
-                        <p><em>⚠️ For educational and authorized security testing only.</em></p>
-                    </div>
-                    <div style="text-align: center; margin-top: 16px;">
-                        <button class="btn" onclick="this.closest('.window').remove()">OK</button>
-                    </div>
-                </div>
-            `;
-            document.body.appendChild(aboutWindow);
-        }
-        // Usage dialog
-        function showUsageDialog() {
-            const usageWindow = document.createElement('div');
-            usageWindow.className = 'window';
-            usageWindow.style.cssText = `
-                position: fixed;
-                top: 20%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 500px;
-                z-index: 1000;
-            `;
-            usageWindow.innerHTML = `
-                <div class="title-bar">
-                    <button aria-label="Close" class="close" onclick="this.closest('.window').remove()"></button>
-                    <h1 class="title">Usage Guide</h1>
-                </div>
-                <div class="separator"></div>
-                <div class="window-pane" style="padding: 16px;">
-                    <div style="font-family: Geneva; font-size: 9pt; line-height: 1.4;">
-                        <p><strong>How to use CamXploit Scanner:</strong></p>
-                        <ol style="margin-left: 20px;">
-                            <li>Enter a target IP address or CIDR range (e.g., 192.168.1.1 or 192.168.1.0/24)</li>
-                            <li>Click "Start Scan" or press Enter</li>
-                            <li>Monitor progress in the status area</li>
-                            <li>View discovered cameras in the results panel</li>
-                            <li>Click "View Stream" links to open live feeds</li>
-                            <li>Use "Export Results" to save your findings</li>
-                        </ol>
-                        <p><strong>Keyboard Shortcuts:</strong></p>
-                        <ul style="margin-left: 20px;">
-                            <li>Enter: Start scan</li>
-                            <li>Escape: Stop scan</li>
-                            <li>Cmd/Ctrl+E: Export results</li>
-                        </ul>
-                        <p><em>Note: Always ensure you have permission to scan target networks.</em></p>
-                    </div>
-                    <div style="text-align: center; margin-top: 16px;">
-                        <button class="btn" onclick="this.closest('.window').remove()">OK</button>
-                    </div>
-                </div>
-            `;
-            document.body.appendChild(usageWindow);
-        }
-        // Initialize application
-        document.addEventListener('DOMContentLoaded', () => {
-            updateProgress(0, 'Ready to scan');
-            targetIpInput.focus();
-            // Add keyboard shortcuts
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape' && scanState.isScanning) {
-                    stopScan();
-                }
-                if ((e.ctrlKey || e.metaKey) && e.key === 'e') {
-                    exportResults();
-                    e.preventDefault();
-                }
-            });
-        });
-    </script>
-  <script src="components/navbar.js"></script>
-  <script src="components/footer.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>GRIDLAND</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <div class="container">
+    <gridland-window title="Welcome">
+      <p>Welcome to GRIDLAND. Drag windows around!</p>
+    </gridland-window>
+    <gridland-window title="Info" style="top: 100px; left: 100px;">
+      <p>This is a draggable window demo.</p>
+    </gridland-window>
+  </div>
+  <script src="components/window.js"></script>
+  <script src="script.js"></script>
 </body>
 </html>

script.js ADDED Viewed

	@@ -0,0 +1,23 @@

+// Import Draggabilly from CDN
+(function() {
+  function loadScript(url, callback) {
+    const script = document.createElement('script');
+    script.src = url;
+    script.onload = callback;
+    document.body.appendChild(script);
+  }
+  document.addEventListener('DOMContentLoaded', () => {
+    // Load Draggabilly
+    loadScript('https://unpkg.com/draggabilly@3.0.0/dist/draggabilly.pkgd.min.js', () => {
+      // Make all windows draggable
+      const windows = document.querySelectorAll('.window');
+      windows.forEach(window => {
+        new Draggabilly(window, {
+          containment: '.container',
+          handle: '.window-title'
+        });
+      });
+    });
+  });
+})();

style.css CHANGED Viewed

@@ -5,9 +5,9 @@ body {
   margin: 0;
   padding: 0;
   color: #000;
-  background-color: #C0C0C0;
-  background-image: url('http://static.photos/retro/640x360/42');
-  background-size: cover;
   background-attachment: fixed;
 }
 /* Layout */
@@ -16,18 +16,21 @@ body {
   max-width: 800px;
   margin: 2rem auto;
   padding: 2px;
-  background: white;
   box-shadow:
     inset -1px -1px 0 0px #0a0a0a,
     inset 1px 1px 0 0px #dfdfdf,
     inset -2px -2px 0 0px #808080,
     inset 2px 2px 0 0px #ffffff;
 }
 .window {
   margin: 1rem 0;
   background: white;
-  box-shadow:
     inset -1px -1px 0 0px #0a0a0a,
     inset 1px 1px 0 0px #dfdfdf,
     inset -2px -2px 0 0px #808080,

   margin: 0;
   padding: 0;
   color: #000;
+  background-color: #008080;
+  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 10px, transparent 10px, transparent 20px);
+background-size: cover;
   background-attachment: fixed;
 }
 /* Layout */
   max-width: 800px;
   margin: 2rem auto;
   padding: 2px;
+  position: relative;
+background: white;
   box-shadow:
     inset -1px -1px 0 0px #0a0a0a,
     inset 1px 1px 0 0px #dfdfdf,
     inset -2px -2px 0 0px #808080,
     inset 2px 2px 0 0px #ffffff;
 }
 .window {
   margin: 1rem 0;
   background: white;
+  position: absolute;
+  cursor: move;
+  z-index: 10;
+box-shadow:
     inset -1px -1px 0 0px #0a0a0a,
     inset 1px 1px 0 0px #dfdfdf,
     inset -2px -2px 0 0px #808080,