Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <style> | |
| #mobile-console { | |
| display: none; | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 200px; | |
| background-color: #000; | |
| color: #fff; | |
| font-family: monospace; | |
| overflow-y: auto; | |
| z-index: 9999; | |
| border-top: 2px solid #444; | |
| padding: 10px; | |
| box-sizing: border-box; | |
| } | |
| #console-toggle { | |
| position: fixed; | |
| bottom: 10px; | |
| right: 10px; | |
| width: 60px; | |
| height: 60px; | |
| background-color: red; | |
| color: white; | |
| border-radius: 50%; | |
| text-align: center; | |
| line-height: 60px; | |
| font-weight: bold; | |
| z-index: 10000; | |
| cursor: pointer; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.5); | |
| user-select: none; | |
| } | |
| .log-entry { | |
| margin: 5px 0; | |
| border-bottom: 1px solid #333; | |
| padding-bottom: 5px; | |
| word-wrap: break-word; | |
| } | |
| .log-entry.error { color: #ff5252; } | |
| .log-entry.warn { color: #ffab40; } | |
| .log-entry.info { color: #2196f3; } | |
| .log-entry.log { color: #ffffff; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <!-- Mobile Console Elements --> | |
| <div id="mobile-console"></div> | |
| <div id="console-toggle">LOGS</div> | |
| <script> | |
| // Make sure the script runs even if DOMContentLoaded already fired | |
| function initMobileConsole() { | |
| var consoleEl = document.getElementById('mobile-console'); | |
| var toggleEl = document.getElementById('console-toggle'); | |
| var isVisible = false; | |
| // Create toggle functionality | |
| toggleEl.addEventListener('click', function() { | |
| isVisible = !isVisible; | |
| consoleEl.style.display = isVisible ? 'block' : 'none'; | |
| toggleEl.textContent = isVisible ? 'HIDE' : 'LOGS'; | |
| }); | |
| // Force a few test logs | |
| setTimeout(function() { | |
| console.log('Mobile console is ready!'); | |
| console.info('This is an info message'); | |
| console.warn('This is a warning message'); | |
| console.error('This is an error message'); | |
| }, 1000); | |
| // Store original console methods | |
| var originalConsole = { | |
| log: console.log, | |
| info: console.info, | |
| warn: console.warn, | |
| error: console.error | |
| }; | |
| // Override console methods | |
| console.log = function() { | |
| originalConsole.log.apply(console, arguments); | |
| addLogEntry('log', arguments); | |
| }; | |
| console.info = function() { | |
| originalConsole.info.apply(console, arguments); | |
| addLogEntry('info', arguments); | |
| }; | |
| console.warn = function() { | |
| originalConsole.warn.apply(console, arguments); | |
| addLogEntry('warn', arguments); | |
| }; | |
| console.error = function() { | |
| originalConsole.error.apply(console, arguments); | |
| addLogEntry('error', arguments); | |
| }; | |
| // Handle window errors | |
| window.onerror = function(message, source, lineno, colno, error) { | |
| console.error('ERROR:', message, 'at', source, lineno + ':' + colno); | |
| }; | |
| // Add log entry to console | |
| function addLogEntry(type, args) { | |
| var entry = document.createElement('div'); | |
| entry.className = 'log-entry ' + type; | |
| var timestamp = new Date().toLocaleTimeString(); | |
| var prefix = '[' + timestamp + '] ' + type.toUpperCase() + ': '; | |
| var text = prefix; | |
| for (var i = 0; i < args.length; i++) { | |
| if (typeof args[i] === 'object') { | |
| try { | |
| text += JSON.stringify(args[i]) + ' '; | |
| } catch (e) { | |
| text += "[Object] "; | |
| } | |
| } else { | |
| text += args[i] + ' '; | |
| } | |
| } | |
| entry.textContent = text; | |
| consoleEl.appendChild(entry); | |
| consoleEl.scrollTop = consoleEl.scrollHeight; | |
| // Flash the toggle button to indicate new log | |
| if (!isVisible) { | |
| toggleEl.style.backgroundColor = 'green'; | |
| setTimeout(function() { | |
| toggleEl.style.backgroundColor = 'red'; | |
| }, 300); | |
| } | |
| } | |
| console.log('Mobile console initialized'); | |
| } | |
| // Run the initialization | |
| if (document.readyState === 'loading') { | |
| document.addEventListener('DOMContentLoaded', initMobileConsole); | |
| } else { | |
| initMobileConsole(); | |
| } | |
| </script> | |
| </body> | |
| </html> |