Update this to auto test for compatibility

script.js

@@ -1,8 +1,35 @@
 
-// Database tables
-const dbTables = [
-    { table_name: 'documents', table_schema: 'Stores all document records' }
-];
+// Browser compatibility test
+function testCompatibility() {
+    const requiredFeatures = {
+        'Promise': window.Promise,
+        'fetch': window.fetch,
+        'Web Components': window.customElements,
+        'Shadow DOM': 'attachShadow' in Element.prototype,
+        'ES6 Modules': 'noModule' in HTMLScriptElement.prototype,
+        'CSS Variables': window.CSS && CSS.supports('color', 'var(--test)')
+    };
+
+    const missingFeatures = Object.entries(requiredFeatures)
+        .filter(([_, supported]) => !supported)
+        .map(([name]) => name);
+
+    if (missingFeatures.length > 0) {
+        const warning = document.createElement('div');
+        warning.className = 'compatibility-warning';
+        warning.innerHTML = `
+            <div class="warning-content">
+                <h3>⚠️ Compatibility Warning</h3>
+                <p>Your browser is missing these required features:</p>
+                <ul>${missingFeatures.map(f => `<li>${f}</li>`).join('')}</ul>
+                <p>Please update your browser or use a modern alternative like Chrome, Firefox, or Edge.</p>
+            </div>
+        `;
+        document.body.prepend(warning);
+        return false;
+    }
+    return true;
+}
 // Database tables with more complete default data
 const dbTables = [
     { 
@@ -90,7 +117,12 @@ function showError(message) {
 }
 // Initialize the application
 document.addEventListener('DOMContentLoaded', async () => {
-    console.log('Application initialized');
+    // Check compatibility first
+    if (!testCompatibility()) {
+        console.error('Browser missing required features');
+        return;
+    }
+console.log('Application initialized');
     
     const loading = document.getElementById('loading');
     try {

style.css

@@ -31,13 +31,40 @@ body {
 .button-scale:hover {
     transform: scale(1.02);
 }
+/* Compatibility warning styles */
+.compatibility-warning {
+    background: #ffecb3;
+    border-bottom: 1px solid #ffc107;
+    padding: 1rem;
+    text-align: center;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+.warning-content {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.warning-content h3 {
+    margin: 0 0 0.5rem 0;
+    color: #ff6f00;
+}
+
+.warning-content ul {
+    list-style: none;
+    padding: 0;
+    margin: 0.5rem 0;
+    display: inline-block;
+    text-align: left;
+}
 
 /* Fade in animation */
 @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
 }
-
 .fade-in {
     animation: fadeIn 0.3s ease-in;
 }