Spaces:
Running
Running
Update index.html
Browse files- index.html +68 -0
index.html
CHANGED
|
@@ -12,6 +12,74 @@
|
|
| 12 |
|
| 13 |
</head>
|
| 14 |
<body class="bg-gray-100 font-sans">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 15 |
|
| 16 |
<div id="notification" class="notification hidden">
|
| 17 |
</div>
|
|
|
|
| 12 |
|
| 13 |
</head>
|
| 14 |
<body class="bg-gray-100 font-sans">
|
| 15 |
+
<body class="bg-gray-100 font-sans">
|
| 16 |
+
|
| 17 |
+
<div id="debug-console" style="position: fixed; bottom: 0; left: 0; right: 0; height: 25%; background: rgba(0, 0, 0, 0.8); color: white; font-family: monospace; font-size: 14px; overflow-y: scroll; padding: 10px; z-index: 9999; border-top: 2px solid #ff5e62;">
|
| 18 |
+
<h3 style="margin: 0 0 10px; padding-bottom: 5px; border-bottom: 1px solid #444;">Debug Console</h3>
|
| 19 |
+
<div id="debug-log"></div>
|
| 20 |
+
</div>
|
| 21 |
+
```
|
| 22 |
+
|
| 23 |
+
### **Step 2: Add the Debugging Logic to `app.js`**
|
| 24 |
+
|
| 25 |
+
Next, we need to tell your JavaScript to send messages and errors to this new on-screen console.
|
| 26 |
+
|
| 27 |
+
1. Open your `scripts/app.js` file.
|
| 28 |
+
2. **At the very top of the file**, paste the following code. This function will be our new logger.
|
| 29 |
+
|
| 30 |
+
```javascript
|
| 31 |
+
// scripts/app.js
|
| 32 |
+
|
| 33 |
+
// --- On-Screen Debugger ---
|
| 34 |
+
function logToScreen(message) {
|
| 35 |
+
const logContainer = document.getElementById('debug-log');
|
| 36 |
+
if (logContainer) {
|
| 37 |
+
// Convert non-string messages to a readable string format
|
| 38 |
+
if (typeof message !== 'string') {
|
| 39 |
+
message = JSON.stringify(message, null, 2);
|
| 40 |
+
}
|
| 41 |
+
logContainer.innerHTML += `<div>> ${message}</div>`;
|
| 42 |
+
// Auto-scroll to the bottom
|
| 43 |
+
logContainer.parentElement.scrollTop = logContainer.parentElement.scrollHeight;
|
| 44 |
+
}
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
// Redirect all console errors to our on-screen logger
|
| 48 |
+
window.onerror = function(message, source, lineno, colno, error) {
|
| 49 |
+
logToScreen(`ERROR: ${message} at ${source.split('/').pop()}:${lineno}`);
|
| 50 |
+
return true; // Prevents the error from stopping script execution in some browsers
|
| 51 |
+
};
|
| 52 |
+
// --- End On-Screen Debugger ---
|
| 53 |
+
|
| 54 |
+
|
| 55 |
+
// --- Module Imports ---
|
| 56 |
+
import { initUI } from './ui.js';
|
| 57 |
+
import { initChat } from './chat.js';
|
| 58 |
+
import { initVideo } from './video.js';
|
| 59 |
+
|
| 60 |
+
// --- Main App Initialization ---
|
| 61 |
+
document.addEventListener('DOMContentLoaded', () => {
|
| 62 |
+
logToScreen("DOM fully loaded. Initializing modules...");
|
| 63 |
+
|
| 64 |
+
// Make the logger globally available so other modules can use it
|
| 65 |
+
window.logToScreen = logToScreen;
|
| 66 |
+
|
| 67 |
+
try {
|
| 68 |
+
initUI();
|
| 69 |
+
logToScreen("UI module initialized successfully.");
|
| 70 |
+
|
| 71 |
+
initChat();
|
| 72 |
+
logToscreen("Chat module initialized successfully.");
|
| 73 |
+
|
| 74 |
+
initVideo();
|
| 75 |
+
logToScreen("Video module initialized successfully.");
|
| 76 |
+
|
| 77 |
+
} catch(e) {
|
| 78 |
+
logToScreen(`A critical error occurred during initialization: ${e.message}`);
|
| 79 |
+
}
|
| 80 |
+
|
| 81 |
+
logToScreen("Application setup complete.");
|
| 82 |
+
});
|
| 83 |
|
| 84 |
<div id="notification" class="notification hidden">
|
| 85 |
</div>
|