3D-GAME

Running

App Files Files Community

ginipick commited on Mar 7

Commit

7318db9

verified ·

1 Parent(s): cc434dc

Update index.html

Browse files

Files changed (1) hide show

index.html +237 -342

index.html CHANGED Viewed

@@ -3,22 +3,25 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Screen Monitor Pro</title>
     <script src="https://unpkg.com/[email protected]/dist/tesseract.min.js"></script>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: -apple-system, system-ui, sans-serif;
         }
-        .app-container {
             max-width: 1200px;
             margin: 0 auto;
-            padding: 20px;
-            background: #f8fafc;
-            min-height: 100vh;
         }
         .header {
@@ -26,81 +29,61 @@
             padding: 20px;
             border-radius: 8px;
             margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
             text-align: center;
         }
-        .status-bar {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
             background: white;
-            padding: 15px;
             border-radius: 8px;
-            margin-bottom: 20px;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-        .status-indicator {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .status-dot {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            background: #cbd5e1;
-        }
-        .status-dot.active {
-            background: #22c55e;
-            animation: pulse 1s infinite;
-        }
-        @keyframes pulse {
-            0% { opacity: 1; }
-            50% { opacity: 0.5; }
-            100% { opacity: 1; }
-        }
-        .controls {
             display: flex;
             gap: 10px;
         }
         button {
             padding: 10px 20px;
             border: none;
-            border-radius: 6px;
             cursor: pointer;
-            font-weight: 500;
-            transition: all 0.2s;
-        }
-        button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
         }
         .start-btn {
-            background: #22c55e;
             color: white;
         }
         .stop-btn {
-            background: #ef4444;
             color: white;
         }
-        .preview-container {
             background: black;
             border-radius: 8px;
             overflow: hidden;
             margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
             position: relative;
         }
         #preview {
@@ -109,6 +92,23 @@
             object-fit: contain;
         }
         .logs {
             background: white;
             border-radius: 8px;
@@ -116,16 +116,9 @@
             overflow: hidden;
         }
-        .log-header {
-            background: #1e293b;
-            color: white;
-            padding: 15px;
-            font-weight: 500;
-        }
         .log-entry {
             padding: 20px;
-            border-bottom: 1px solid #e2e8f0;
             display: grid;
             grid-template-columns: 300px 1fr;
             gap: 20px;
@@ -143,10 +136,9 @@
         .change-highlight {
             position: absolute;
-            border: 2px solid #ef4444;
-            background: rgba(239, 68, 68, 0.2);
             pointer-events: none;
-            transition: all 0.3s;
         }
         .info-panel {
@@ -156,57 +148,41 @@
         }
         .timestamp {
-            color: #64748b;
-            font-size: 0.9rem;
         }
-        .analysis {
-            background: #f8fafc;
             padding: 15px;
-            border-radius: 6px;
-            font-size: 0.95rem;
-            line-height: 1.5;
-        }
-        .analysis h4 {
-            margin-bottom: 8px;
-            color: #1e293b;
-        }
-        .ocr-text {
-            font-family: monospace;
-            white-space: pre-wrap;
-            background: #f1f5f9;
-            padding: 10px;
             border-radius: 4px;
-            margin-top: 8px;
         }
         .actions {
             display: flex;
             gap: 10px;
-            margin-top: auto;
         }
         .download-btn {
-            padding: 8px 16px;
-            background: #3b82f6;
             color: white;
-            text-decoration: none;
             border-radius: 4px;
-            font-size: 0.9rem;
-            display: flex;
             align-items: center;
-            gap: 6px;
         }
-        .error-message {
-            background: #fef2f2;
-            color: #ef4444;
-            padding: 10px;
-            border-radius: 4px;
-            margin: 10px 0;
-            display: none;
         }
         @media (max-width: 768px) {
@@ -217,283 +193,202 @@
     </style>
 </head>
 <body>
-    <div class="app-container">
         <div class="header">
-            <h1>Screen Monitor Pro</h1>
-            <p>Advanced screen capture and analysis</p>
         </div>
-        <div class="status-bar">
-            <div class="status-indicator">
-                <div class="status-dot" id="statusDot"></div>
-                <span id="statusText">Ready</span>
-            </div>
-            <div class="controls">
-                <button class="start-btn" id="startBtn">Start Capture</button>
-                <button class="stop-btn" id="stopBtn" disabled>Stop</button>
-            </div>
         </div>
-        <div class="error-message" id="errorMessage"></div>
-        <div class="preview-container">
             <video id="preview" autoplay></video>
         </div>
-        <div class="logs">
-            <div class="log-header">Change Log</div>
-            <div id="logContainer"></div>
-        </div>
     </div>
     <script>
-        class ScreenAnalyzer {
-            constructor() {
-                this.mediaStream = null;
-                this.captureInterval = null;
-                this.lastImageData = null;
-                this.worker = null;
-                this.isProcessing = false;
-                this.initializeOCR();
-                this.bindElements();
-                this.bindEvents();
             }
-            async initializeOCR() {
-                try {
-                    this.worker = await Tesseract.createWorker();
-                    await this.worker.loadLanguage('eng');
-                    await this.worker.initialize('eng');
-                } catch (error) {
-                    this.showError('Failed to initialize OCR');
-                }
-            }
-            bindElements() {
-                this.elements = {
-                    startBtn: document.getElementById('startBtn'),
-                    stopBtn: document.getElementById('stopBtn'),
-                    preview: document.getElementById('preview'),
-                    logContainer: document.getElementById('logContainer'),
-                    statusDot: document.getElementById('statusDot'),
-                    statusText: document.getElementById('statusText'),
-                    errorMessage: document.getElementById('errorMessage')
-                };
-            }
-            bindEvents() {
-                this.elements.startBtn.addEventListener('click', () => this.start());
-                this.elements.stopBtn.addEventListener('click', () => this.stop());
-            }
-            updateStatus(status, isError = false) {
-                this.elements.statusDot.className = `status-dot ${status === 'recording' ? 'active' : ''}`;
-                this.elements.statusText.textContent = status.charAt(0).toUpperCase() + status.slice(1);
-                if (isError) {
-                    this.elements.errorMessage.textContent = status;
-                    this.elements.errorMessage.style.display = 'block';
-                } else {
-                    this.elements.errorMessage.style.display = 'none';
-                }
-            }
-            async start() {
-                try {
-                    this.mediaStream = await navigator.mediaDevices.getDisplayMedia({
-                        video: { cursor: "always" }
-                    });
-                    this.elements.preview.srcObject = this.mediaStream;
-                    this.elements.startBtn.disabled = true;
-                    this.elements.stopBtn.disabled = false;
-                    this.updateStatus('recording');
-                    this.captureInterval = setInterval(() => this.capture(), 1000);
-                    this.mediaStream.getVideoTracks()[0].onended = () => this.stop();
-                } catch (error) {
-                    this.showError('Failed to start screen capture');
-                }
-            }
-            stop() {
-                if (this.mediaStream) {
-                    this.mediaStream.getTracks().forEach(track => track.stop());
-                    this.elements.preview.srcObject = null;
-                }
-                clearInterval(this.captureInterval);
-                this.elements.startBtn.disabled = false;
-                this.elements.stopBtn.disabled = true;
-                this.lastImageData = null;
-                this.updateStatus('ready');
-            }
-            async capture() {
-                if (this.isProcessing) return;
-                this.isProcessing = true;
-                try {
-                    const canvas = document.createElement('canvas');
-                    canvas.width = this.elements.preview.videoWidth;
-                    canvas.height = this.elements.preview.videoHeight;
-                    const ctx = canvas.getContext('2d');
-                    ctx.drawImage(this.elements.preview, 0, 0);
-                    const currentImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-                    const changes = this.detectChanges(currentImageData);
-                    if (changes.length > 0 || !this.lastImageData) {
-                        const imageUrl = canvas.toDataURL('image/jpeg', 0.8);
-                        const ocrResults = await this.analyzeChanges(canvas, changes);
-                        this.addLogEntry(imageUrl, changes, ocrResults);
-                    }
-                    this.lastImageData = currentImageData;
-                } catch (error) {
-                    this.showError('Failed to process capture');
-                } finally {
-                    this.isProcessing = false;
-                }
             }
-            detectChanges(currentImageData) {
-                if (!this.lastImageData) return [];
-                const changes = [];
-                const blockSize = 20;
-                const threshold = 30;
-                const width = currentImageData.width;
-                const height = currentImageData.height;
-                for (let y = 0; y < height; y += blockSize) {
-                    for (let x = 0; x < width; x += blockSize) {
-                        let diffCount = 0;
-                        const maxY = Math.min(y + blockSize, height);
-                        const maxX = Math.min(x + blockSize, width);
-                        for (let py = y; py < maxY; py++) {
-                            for (let px = x; px < maxX; px++) {
-                                const i = (py * width + px) * 4;
-                                if (Math.abs(currentImageData.data[i] - this.lastImageData.data[i]) > threshold ||
-                                    Math.abs(currentImageData.data[i + 1] - this.lastImageData.data[i + 1]) > threshold ||
-                                    Math.abs(currentImageData.data[i + 2] - this.lastImageData.data[i + 2]) > threshold) {
-                                    diffCount++;
-                                }
                             }
                         }
-                        if (diffCount > (blockSize * blockSize * 0.3)) {
-                            changes.push({
-                                x: x / width * 100,
-                                y: y / height * 100,
-                                width: Math.min(blockSize / width * 100, 100 - x / width * 100),
-                                height: Math.min(blockSize / height * 100, 100 - y / height * 100),
-                                pixels: {x, y, width: maxX - x, height: maxY - y}
-                            });
-                        }
                     }
                 }
-                return changes;
             }
-            async analyzeChanges(canvas, changes) {
-                const results = [];
-                for (const change of changes) {
-                    const tempCanvas = document.createElement('canvas');
-                    tempCanvas.width = change.pixels.width;
-                    tempCanvas.height = change.pixels.height;
-                    const tempCtx = tempCanvas.getContext('2d');
-                    tempCtx.drawImage(
-                        canvas,
-                        change.pixels.x, change.pixels.y,
-                        change.pixels.width, change.pixels.height,
-                        0, 0,
-                        change.pixels.width, change.pixels.height
-                    );
-                    try {
-                        const result = await this.worker.recognize(tempCanvas);
-                        if (result.data.text.trim()) {
-                            results.push({
-                                text: result.data.text.trim(),
-                                confidence: result.data.confidence,
-                                region: change
-                            });
-                        }
-                    } catch (error) {
-                        console.error('OCR Error:', error);
-                    }
-                }
-                return results;
             }
-            addLogEntry(imageUrl, changes, ocrResults) {
-                const logEntry = document.createElement('div');
-                logEntry.className = 'log-entry';
-                const timestamp = new Date().toLocaleString();
-                logEntry.innerHTML = `
-                    <div class="screenshot-container">
-                        <img class="screenshot" src="${imageUrl}" alt="Screenshot">
-                        ${changes.map((change, index) => `
-                            <div class="change-highlight" style="
-                                left: ${change.x}%;
-                                top: ${change.y}%;
-                                width: ${change.width}%;
-                                height: ${change.height}%;
-                            "></div>
-                        `).join('')}
-                    </div>
-                    <div class="info-panel">
-                        <div class="timestamp">📅 ${timestamp}</div>
-                        <div class="analysis">
-                            <h4>Changes Detected</h4>
-                            <p>${changes.length} regions changed</p>
-                            ${ocrResults.length > 0 ? `
-                                <h4>Text Content</h4>
-                                <div class="ocr-text">
-                                    ${ocrResults.map(result =>
-                                        `[Region ${Math.round(result.confidence)}% confidence]\n${result.text}`
-                                    ).join('\n\n')}
-                                </div>
-                            ` : ''}
-                        </div>
-                        <div class="actions">
-                            <a href="${imageUrl}" download="screenshot-${Date.now()}.jpg"
-                               class="download-btn">
-                                📸 Download Screenshot
-                            </a>
-                        </div>
-                    </div>
-                `;
-                this.elements.logContainer.insertBefore(logEntry, this.elements.logContainer.firstChild);
             }
-            showError(message) {
-                this.updateStatus(message, true);
-                console.error(message);
             }
-            async cleanup() {
-                if (this.worker) {
-                    await this.worker.terminate();
-                }
-                this.stop();
-            }
         }
-        // Initialize the application
-        const analyzer = new ScreenAnalyzer();
-        window.addEventListener('beforeunload', () => analyzer.cleanup());
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Screen Analysis & OCR Tool</title>
+    <!-- Include Tesseract.js for OCR -->
     <script src="https://unpkg.com/[email protected]/dist/tesseract.min.js"></script>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
+            font-family: Arial, sans-serif;
         }
+        body {
+            background: #f0f2f5;
+            padding: 20px;
+        }
+        .container {
             max-width: 1200px;
             margin: 0 auto;
         }
         .header {
             padding: 20px;
             border-radius: 8px;
             margin-bottom: 20px;
             text-align: center;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
+        .controls {
             background: white;
+            padding: 20px;
             border-radius: 8px;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
             display: flex;
             gap: 10px;
+            flex-wrap: wrap;
         }
         button {
             padding: 10px 20px;
             border: none;
+            border-radius: 4px;
             cursor: pointer;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            min-width: 120px;
+            justify-content: center;
         }
         .start-btn {
+            background: #4CAF50;
             color: white;
         }
         .stop-btn {
+            background: #f44336;
             color: white;
         }
+        .clear-btn {
+            background: #2196F3;
+            color: white;
+        }
+        button:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+        }
+        .preview-area {
             background: black;
             border-radius: 8px;
             overflow: hidden;
             margin-bottom: 20px;
             position: relative;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
         #preview {
             object-fit: contain;
         }
+        .recording-dot {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            width: 12px;
+            height: 12px;
+            background: red;
+            border-radius: 50%;
+            animation: pulse 1s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
         .logs {
             background: white;
             border-radius: 8px;
             overflow: hidden;
         }
         .log-entry {
             padding: 20px;
+            border-bottom: 1px solid #eee;
             display: grid;
             grid-template-columns: 300px 1fr;
             gap: 20px;
         .change-highlight {
             position: absolute;
+            border: 2px solid red;
+            background: rgba(255,0,0,0.2);
             pointer-events: none;
         }
         .info-panel {
         }
         .timestamp {
+            color: #666;
+            font-size: 14px;
         }
+        .text-content {
+            background: #f8f9fa;
             padding: 15px;
             border-radius: 4px;
+            font-size: 14px;
+            line-height: 1.5;
+            max-height: 200px;
+            overflow-y: auto;
         }
         .actions {
             display: flex;
             gap: 10px;
+            margin-top: 10px;
         }
         .download-btn {
+            background: #4CAF50;
             color: white;
+            padding: 8px 16px;
             border-radius: 4px;
+            text-decoration: none;
+            display: inline-flex;
             align-items: center;
+            gap: 5px;
+            font-size: 14px;
         }
+        .processing {
+            color: #666;
+            font-style: italic;
         }
         @media (max-width: 768px) {
     </style>
 </head>
 <body>
+    <div class="container">
         <div class="header">
+            <h1>Screen Analysis & OCR Tool</h1>
+            <p>Capture, analyze, and extract text from your screen</p>
         </div>
+        <div class="controls">
+            <button id="startBtn" class="start-btn">▶ Start Capture</button>
+            <button id="stopBtn" class="stop-btn" disabled>⬛ Stop</button>
+            <button id="clearBtn" class="clear-btn">🗑 Clear Logs</button>
         </div>
+        <div class="preview-area">
             <video id="preview" autoplay></video>
+            <div class="recording-dot" style="display: none;"></div>
         </div>
+        <div class="logs" id="logContainer"></div>
     </div>
     <script>
+        let mediaStream = null;
+        let captureInterval = null;
+        let lastImageData = null;
+        // Initialize Tesseract
+        const worker = Tesseract.createWorker();
+        (async () => {
+            await worker.load();
+            await worker.loadLanguage('eng');
+            await worker.initialize('eng');
+        })();
+        const startBtn = document.getElementById('startBtn');
+        const stopBtn = document.getElementById('stopBtn');
+        const clearBtn = document.getElementById('clearBtn');
+        const preview = document.getElementById('preview');
+        const logContainer = document.getElementById('logContainer');
+        const recordingDot = document.querySelector('.recording-dot');
+        async function startCapture() {
+            try {
+                mediaStream = await navigator.mediaDevices.getDisplayMedia({
+                    video: { cursor: "always" }
+                });
+                preview.srcObject = mediaStream;
+                startBtn.disabled = true;
+                stopBtn.disabled = false;
+                recordingDot.style.display = 'block';
+                captureInterval = setInterval(captureAndAnalyze, 1000);
+                mediaStream.getVideoTracks()[0].onended = stopCapture;
+            } catch (err) {
+                console.error("Error starting capture:", err);
             }
+        }
+        function stopCapture() {
+            if (mediaStream) {
+                mediaStream.getTracks().forEach(track => track.stop());
+                preview.srcObject = null;
             }
+            clearInterval(captureInterval);
+            startBtn.disabled = false;
+            stopBtn.disabled = true;
+            recordingDot.style.display = 'none';
+            lastImageData = null;
+        }
+        function detectChanges(current, last) {
+            const blockSize = 20;
+            const threshold = 30;
+            const changes = [];
+            const width = current.width;
+            const height = current.height;
+            for (let y = 0; y < height; y += blockSize) {
+                for (let x = 0; x < width; x += blockSize) {
+                    let diffCount = 0;
+                    const maxY = Math.min(y + blockSize, height);
+                    const maxX = Math.min(x + blockSize, width);
+                    for (let py = y; py < maxY; py++) {
+                        for (let px = x; px < maxX; px++) {
+                            const i = (py * width + px) * 4;
+                            if (Math.abs(current.data[i] - last.data[i]) > threshold ||
+                                Math.abs(current.data[i + 1] - last.data[i + 1]) > threshold ||
+                                Math.abs(current.data[i + 2] - last.data[i + 2]) > threshold) {
+                                diffCount++;
                             }
                         }
+                    }
+                    if (diffCount > (blockSize * blockSize * 0.3)) {
+                        changes.push({
+                            x: x / width * 100,
+                            y: y / height * 100,
+                            width: Math.min(blockSize / width * 100, 100 - x / width * 100),
+                            height: Math.min(blockSize / height * 100, 100 - y / height * 100)
+                        });
                     }
                 }
             }
+            return changes;
+        }
+        async function captureAndAnalyze() {
+            const canvas = document.createElement('canvas');
+            canvas.width = preview.videoWidth;
+            canvas.height = preview.videoHeight;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(preview, 0, 0);
+            const currentImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            let changes = [];
+            if (lastImageData) {
+                changes = detectChanges(currentImageData, lastImageData);
             }
+            lastImageData = currentImageData;
+            if (changes.length > 0 || !lastImageData) {
+                const imageUrl = canvas.toDataURL('image/jpeg', 0.8);
+                await addLogEntry(imageUrl, changes);
             }
+        }
+        async function performOCR(imageUrl) {
+            try {
+                const result = await worker.recognize(imageUrl);
+                return result.data.text;
+            } catch (error) {
+                console.error('OCR Error:', error);
+                return 'Error performing OCR';
             }
+        }
+        async function addLogEntry(imageUrl, changes) {
+            const logEntry = document.createElement('div');
+            logEntry.className = 'log-entry';
+            const timestamp = new Date().toLocaleString();
+            // Create initial structure with loading state
+            logEntry.innerHTML = `
+                <div class="screenshot-container">
+                    <img class="screenshot" src="${imageUrl}" alt="Screenshot">
+                    ${changes.map(change => `
+                        <div class="change-highlight" style="
+                            left: ${change.x}%;
+                            top: ${change.y}%;
+                            width: ${change.width}%;
+                            height: ${change.height}%;
+                        "></div>
+                    `).join('')}
+                </div>
+                <div class="info-panel">
+                    <div class="timestamp">${timestamp}</div>
+                    <div class="text-content processing">Processing text extraction...</div>
+                    <div class="actions">
+                        <a href="${imageUrl}" download="screenshot-${Date.now()}.jpg" class="download-btn">
+                            💾 Download Image
+                        </a>
+                    </div>
+                </div>
+            `;
+            logContainer.insertBefore(logEntry, logContainer.firstChild);
+            // Perform OCR
+            const extractedText = await performOCR(imageUrl);
+            // Update text content
+            const textContent = logEntry.querySelector('.text-content');
+            textContent.classList.remove('processing');
+            textContent.textContent = extractedText || 'No text detected';
         }
+        clearBtn.addEventListener('click', () => {
+            logContainer.innerHTML = '';
+        });
+        startBtn.addEventListener('click', startCapture);
+        stopBtn.addEventListener('click', stopCapture);
+        // Cleanup when page is closed
+        window.addEventListener('beforeunload', () => {
+            worker.terminate();
+        });
     </script>
 </body>
 </html>