Implement offline-compatible web dashboard with local CSS fallbacks

- Add runtime CSS loading detection for Bootstrap and Font Awesome
- Download local copies of Bootstrap 5.3.0 and Font Awesome 6.0.0
- Modify base.html to check CDN loading and fallback to local versions
- Add AI.PROMPT file with offline compatibility requirements
- Ensure web interface works when internet connection is down

mbetterclient/web_dashboard/AI.PROMPT

+AI.PROMPT - Web Dashboard Offline Compatibility Instructions
+
+CRITICAL REQUIREMENT: All web interface changes MUST maintain offline functionality.
+
+OFFLINE COMPATIBILITY CHECKLIST:
+- [ ] Any new external CSS/JS libraries must have local fallbacks with runtime detection
+- [ ] CDN links must include automatic fallback to local versions when CDN fails
+- [ ] Test interface functionality with internet disabled (simulate offline mode)
+- [ ] Ensure all assets (CSS, JS, images) work without external dependencies
+- [ ] Verify that styling and functionality remain intact when CDNs are unreachable
+
+CURRENT OFFLINE IMPLEMENTATION:
+- Bootstrap CSS/JS: Runtime detection with local fallbacks in /static/vendor/bootstrap/
+- Font Awesome: Runtime detection with local fallback in /static/vendor/fontawesome/
+- Detection mechanism: 2-second timeout checking for CSS variables and font-family properties
+- Fallback loading: Dynamic <link> injection when CDN fails
+
+FUTURE CHANGES REQUIREMENTS:
+- When adding new external dependencies, implement similar runtime detection
+- Store local copies of all external assets in /static/vendor/
+- Use the established pattern: CDN first, then runtime check, then local fallback
+- Test offline by disabling network or using browser dev tools offline mode
+- Document any new offline fallbacks in this file
+
+VIOLATION CONSEQUENCES:
+- Web interface becomes unusable when internet is down
+- Users cannot access dashboard functionality in offline scenarios
+- Breaks the application's offline-first design principle
+
+ALWAYS VERIFY: Before committing changes, test the interface with internet disabled.
\ No newline at end of file

mbetterclient/web_dashboard/templates/base.html

@@ -6,15 +6,45 @@
     <title>{% block title %}{{ page_title | default("Dashboard") }} - {{ app_name }}{% endblock %}</title>
     
     <!-- CSS with local fallback -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
-    <noscript>
-        <link rel="stylesheet" href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}">
-    </noscript>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <noscript>
-        <link rel="stylesheet" href="{{ url_for('static', filename='vendor/fontawesome/all.min.css') }}">
-    </noscript>
+    <link id="bootstrap-css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+    <link id="fontawesome-css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
+
+    <script>
+        // Check for CSS loading and load local fallbacks if CDN fails
+        setTimeout(function() {
+            // Check Bootstrap CSS
+            var testEl = document.createElement('div');
+            testEl.style.display = 'none';
+            document.body.appendChild(testEl);
+            var bsPrimary = getComputedStyle(testEl).getPropertyValue('--bs-primary');
+            document.body.removeChild(testEl);
+
+            if (!bsPrimary || bsPrimary.trim() === '') {
+                console.log('Bootstrap CDN failed, loading local version');
+                var bootstrapLink = document.createElement('link');
+                bootstrapLink.rel = 'stylesheet';
+                bootstrapLink.href = '{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}';
+                document.head.appendChild(bootstrapLink);
+            }
+
+            // Check Font Awesome CSS
+            var faTestEl = document.createElement('i');
+            faTestEl.className = 'fa fa-test';
+            faTestEl.style.display = 'none';
+            document.body.appendChild(faTestEl);
+            var faFontFamily = getComputedStyle(faTestEl).getPropertyValue('font-family');
+            document.body.removeChild(faTestEl);
+
+            if (!faFontFamily || !faFontFamily.includes('Font Awesome')) {
+                console.log('Font Awesome CDN failed, loading local version');
+                var faLink = document.createElement('link');
+                faLink.rel = 'stylesheet';
+                faLink.href = '{{ url_for('static', filename='vendor/fontawesome/all.min.css') }}';
+                document.head.appendChild(faLink);
+            }
+        }, 2000); // Wait 2 seconds for CDN to load
+    </script>
     
     <style>
         .navbar-clock {