pms_md 1.0.0

package/node-monitor/examples/public/js/theme.js

@@ -0,0 +1,138 @@
+/**
+ * Theme Toggle System
+ * Handles light/dark mode switching with localStorage persistence
+ */
+
+// Apply theme immediately before page renders to prevent flash
+(function() {
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const theme = savedTheme || (prefersDark ? 'dark' : 'light');
+
+    if (theme === 'dark') {
+        document.documentElement.setAttribute('data-theme', 'dark');
+    }
+})();
+
+// Initialize theme on page load - multiple events to ensure it works
+document.addEventListener('DOMContentLoaded', () => {
+    createThemeToggle();
+});
+
+// Fallback: create button when window loads
+window.addEventListener('load', () => {
+    if (!document.querySelector('.theme-toggle')) {
+        createThemeToggle();
+    }
+});
+
+// Extra fallback: create button after a short delay
+setTimeout(() => {
+    if (!document.querySelector('.theme-toggle')) {
+        createThemeToggle();
+    }
+}, 100);
+
+/**
+ * Set the theme
+ * @param {string} theme - 'light' or 'dark'
+ */
+function setTheme(theme) {
+    // Add a class to disable transitions during theme change
+    document.documentElement.classList.add('theme-transitioning');
+
+    if (theme === 'dark') {
+        document.documentElement.setAttribute('data-theme', 'dark');
+    } else {
+        document.documentElement.removeAttribute('data-theme');
+    }
+    localStorage.setItem('theme', theme);
+    updateThemeToggleButton(theme);
+
+    // Remove the transitioning class after a brief moment
+    setTimeout(() => {
+        document.documentElement.classList.remove('theme-transitioning');
+    }, 50);
+}
+
+/**
+ * Toggle between light and dark themes
+ */
+function toggleTheme() {
+    const currentTheme = localStorage.getItem('theme') || 'light';
+    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+}
+
+/**
+ * Create the theme toggle button
+ */
+function createThemeToggle() {
+    // Remove any existing button first
+    const existingButton = document.querySelector('.theme-toggle');
+    if (existingButton) {
+        existingButton.remove();
+    }
+
+    const button = document.createElement('button');
+    button.className = 'theme-toggle';
+    button.setAttribute('aria-label', 'Toggle theme');
+    button.setAttribute('title', 'Toggle light/dark mode');
+    button.onclick = toggleTheme;
+
+    // Force inline styles to ensure visibility
+    button.style.cssText = `
+        position: fixed !important;
+        top: 20px !important;
+        right: 20px !important;
+        z-index: 999999 !important;
+        display: flex !important;
+        align-items: center !important;
+        gap: 8px !important;
+        padding: 10px 20px !important;
+        background: var(--card-bg) !important;
+        color: var(--text-primary) !important;
+        border: 2px solid var(--border-color) !important;
+        border-radius: 25px !important;
+        cursor: pointer !important;
+        font-size: 0.9em !important;
+        font-weight: 600 !important;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
+        white-space: nowrap !important;
+        opacity: 1 !important;
+        visibility: visible !important;
+        pointer-events: auto !important;
+    `;
+
+    // Append to body as the last element
+    document.body.appendChild(button);
+
+    const currentTheme = localStorage.getItem('theme') || 'light';
+    updateThemeToggleButton(currentTheme);
+
+    // Log for debugging
+    console.log('Theme toggle button created at position:', button.getBoundingClientRect());
+}
+
+/**
+ * Update the theme toggle button icon
+ * @param {string} theme - Current theme
+ */
+function updateThemeToggleButton(theme) {
+    const button = document.querySelector('.theme-toggle');
+    if (button) {
+        if (theme === 'dark') {
+            button.innerHTML = '☀️ Light';
+        } else {
+            button.innerHTML = '🌙 Dark';
+        }
+    }
+}
+
+// Listen for system theme changes
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+    if (!localStorage.getItem('theme')) {
+        setTheme(e.matches ? 'dark' : 'light');
+    }
+});
+

package/node-monitor/examples/views/dashboard.ejs

@@ -0,0 +1,20 @@
+<%- include('partials/header') %>
+
+<div class="status-header">
+    <span class="status-badge" id="overallStatus">
+        <span class="status-dot"></span>
+        <span id="statusText">Loading...</span>
+    </span>
+    <button class="refresh-btn" onclick="loadDashboard()">🔄 Refresh</button>
+</div>
+
+<div id="dashboardContent">
+    <div class="loading">
+        <div class="spinner"></div>
+        <p>Loading monitoring data...</p>
+    </div>
+</div>
+
+<div class="stats-summary" id="statsSummary"></div>
+
+<%- include('partials/footer') %>