@necrolab/dashboard 0.4.61 → 0.4.208

package/static/offline.html

@@ -4,37 +4,37 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
         <title>Site Offline</title>
-        <meta name="theme-color" content="#0f1012" />
+        <meta name="theme-color" content="rgba(28, 28, 49, 1)" />
         <style>
-            :root {
-                --bg-primary: #0f1012;
-                --bg-secondary: #1a1b1e;
-                --bg-tertiary: #2e2f34;
-                --text-primary: #ffffff;
-                --text-secondary: #9ca3af;
-                --accent: #ef4444;
-                --border: #1f2937;
-                --glow: rgba(239, 68, 68, 0.15);
-            }
-
             body,
             html {
                 margin: 0;
                 padding: 0;
                 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-                background-color: var(--bg-primary);
-                color: var(--text-primary);
+                background-color: rgba(28, 28, 49, 1);
+                color: #fff;
                 height: 100%;
+            }
+
+            html,
+            body {
+                /* Prevent scrolling on both axes */
                 overflow: hidden;
                 position: fixed;
                 width: 100%;
                 height: 100%;
+
+                /* Prevent touch actions except for buttons */
                 touch-action: none;
                 -ms-touch-action: none;
+
+                /* Prevent text selection */
                 -webkit-user-select: none;
                 -moz-user-select: none;
                 -ms-user-select: none;
                 user-select: none;
+
+                /* Prevent pinch zoom */
                 -webkit-touch-callout: none;
                 -webkit-text-size-adjust: none;
             }
@@ -44,220 +44,73 @@
                 justify-content: center;
                 align-items: center;
                 min-height: 100vh;
-                background: radial-gradient(circle at center, var(--bg-secondary) 0%, var(--bg-primary) 100%);
-                position: relative;
             }
-
-            .container::before {
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231a1b1e' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-                opacity: 0.1;
-            }
-
             .error-card {
-                background-color: var(--bg-secondary);
-                border: 1px solid var(--border);
-                border-radius: 1rem;
-                padding: 2.5rem;
-                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+                background-color: rgba(39, 39, 67, 0.4);
+                border-radius: 0.5rem;
+                padding: 2rem;
+                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                 text-align: center;
-                max-width: 24rem;
+                max-width: 20rem;
                 width: 100%;
                 margin: auto;
-                animation: slideUp 0.5s ease-out;
-                position: relative;
-                overflow: hidden;
-                backdrop-filter: blur(10px);
             }
-
-            .error-card::before {
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                height: 1px;
-                background: linear-gradient(90deg, transparent, var(--accent), transparent);
-                opacity: 0.5;
-            }
-
-            .error-card::after {
-                content: "";
-                position: absolute;
-                inset: 0;
-                border-radius: 1rem;
-                padding: 1px;
-                background: linear-gradient(135deg, var(--accent), transparent);
-                -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-                mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-                -webkit-mask-composite: xor;
-                mask-composite: exclude;
-                pointer-events: none;
-            }
-
             .icon-wrapper {
-                background-color: var(--bg-tertiary);
-                width: 5rem;
-                height: 5rem;
+                background-color: #4a4a61;
+                width: 4rem;
+                height: 4rem;
                 border-radius: 50%;
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                margin: 0 auto 1.5rem;
-                font-size: 2.5rem;
-                color: var(--accent);
-                position: relative;
-                animation: pulse 2s infinite;
-                box-shadow: 0 0 20px var(--glow);
-            }
-
-            .icon-wrapper::after {
-                content: "";
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                border-radius: 50%;
-                border: 1px solid var(--accent);
-                opacity: 0.3;
-                animation: ripple 2s infinite;
+                margin: 0 auto 1rem;
+                font-size: 2rem;
+                color: #ee8282;
             }
-
             h1 {
-                font-size: 1.75rem;
-                font-weight: 600;
-                margin-bottom: 0.75rem;
-                background: linear-gradient(90deg, var(--text-primary), var(--text-secondary));
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-                text-shadow: 0 0 20px var(--glow);
+                font-size: 1.5rem;
+                margin-bottom: 0.5rem;
             }
-
             p {
-                color: var(--text-secondary);
-                margin-bottom: 2rem;
-                font-size: 1.1rem;
-                line-height: 1.5;
+                color: rgba(255, 255, 255, 0.7);
+                margin-bottom: 1.5rem;
             }
-
             .refresh-button {
-                background-color: var(--bg-tertiary);
-                color: var(--text-primary);
+                background-color: #4a4a61;
+                color: white;
                 border: none;
-                padding: 0.75rem 1.5rem;
-                border-radius: 0.5rem;
+                padding: 0.5rem 1rem;
+                border-radius: 0.25rem;
                 font-size: 1rem;
-                font-weight: 500;
                 cursor: pointer;
-                transition: all 0.3s ease;
+                transition: background-color 0.3s ease;
+                /* Enable touch actions specifically for the button */
                 touch-action: manipulation;
                 -webkit-tap-highlight-color: transparent;
-                position: relative;
-                overflow: hidden;
-                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-            }
-
-            .refresh-button::before {
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
-                transform: translateX(-100%);
+                touch-action: auto;
+                -webkit-touch-callout: none;
+                cursor: pointer;
             }
-
             .refresh-button:hover {
-                background-color: var(--bg-tertiary);
-                transform: translateY(-1px);
-                box-shadow: 0 0 15px var(--glow);
+                background-color: rgba(255, 255, 255, 0.2);
             }
-
-            .refresh-button:hover::before {
-                transform: translateX(100%);
-                transition: transform 0.6s ease;
-            }
-
             .refresh-button:focus {
                 outline: none;
-                box-shadow: 0 0 0 3px var(--glow);
+                box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
             }
-
+            /* Add active state for better touch feedback */
             .refresh-button:active {
-                transform: translateY(1px);
-                background-color: var(--bg-tertiary);
-            }
-
-            @keyframes slideUp {
-                from {
-                    opacity: 0;
-                    transform: translateY(20px);
-                }
-                to {
-                    opacity: 1;
-                    transform: translateY(0);
-                }
-            }
-
-            @keyframes pulse {
-                0% {
-                    transform: scale(1);
-                    box-shadow: 0 0 20px var(--glow);
-                }
-                50% {
-                    transform: scale(1.05);
-                    box-shadow: 0 0 30px var(--glow);
-                }
-                100% {
-                    transform: scale(1);
-                    box-shadow: 0 0 20px var(--glow);
-                }
-            }
-
-            @keyframes ripple {
-                0% {
-                    transform: scale(1);
-                    opacity: 0.3;
-                }
-                100% {
-                    transform: scale(1.5);
-                    opacity: 0;
-                }
-            }
-
-            @media (max-width: 640px) {
-                .error-card {
-                    margin: 1rem;
-                    padding: 1.5rem;
-                }
-
-                .icon-wrapper {
-                    width: 4rem;
-                    height: 4rem;
-                    font-size: 2rem;
-                }
-
-                h1 {
-                    font-size: 1.5rem;
-                }
-
-                p {
-                    font-size: 1rem;
-                }
+                background-color: rgba(255, 255, 255, 0.3);
+                transform: scale(0.98);
             }
         </style>
     </head>
     <body>
         <div class="container">
             <div class="error-card">
-                <div class="icon-wrapper">⚠️</div>
+                <div class="icon-wrapper"><span style="margin-bottom: 0.2rem">&#9888;</span></div>
                 <h1>Site Offline</h1>
-                <p>We're experiencing technical difficulties. Please try again in a moment.</p>
+                <p>We're down. Please try again.</p>
                 <button class="refresh-button" id="refreshButton">Refresh Page</button>
             </div>
         </div>
@@ -265,10 +118,12 @@
             document.addEventListener("DOMContentLoaded", function () {
                 const button = document.getElementById("refreshButton");
 
+                // Handle button click/touch
                 button.addEventListener("click", function (e) {
                     window.location.reload();
                 });
 
+                // Prevent zoom and scroll on the page but allow button interaction
                 document.addEventListener(
                     "touchstart",
                     function (e) {
@@ -297,10 +152,12 @@
                     { passive: false }
                 );
 
+                // Prevent zoom via gesture
                 document.addEventListener("gesturestart", function (e) {
                     e.preventDefault();
                 });
 
+                // Prevent zoom via mousewheel/trackpad
                 document.addEventListener(
                     "wheel",
                     function (e) {
@@ -311,6 +168,7 @@
                     { passive: false }
                 );
 
+                // Prevent double-tap zoom
                 let lastTap = 0;
                 document.addEventListener("touchend", function (e) {
                     const currentTime = new Date().getTime();

package/tailwind.config.js

@@ -1,126 +1,48 @@
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
     content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
     theme: {
         colors: {
-            transparent: "transparent",
-            white: "#ffffff",
-            pure: "#ffffff",
+            white: "#FFFFFF",
             lightgray: "#e5e7eb",
             green: {
-                300: "#4ade80",
-                400: "#22c55e",
-                500: "#16a34a"
+                400: "#44b744"
             },
             red: {
-                300: "#f87171",
-                400: "#ef4444",
-                500: "#dc2626"
-            },
-            blue: {
-                300: "#60a5fa",
-                400: "#3b82f6",
-                500: "#2563eb"
-            },
-            yellow: {
-                300: "#fbbf24",
-                400: "#f59e0b",
-                500: "#d97706"
+                400: "#EE8282"
             },
             dark: {
-                50: "#f8fafc",
-                100: "#f1f5f9",
-                200: "#e2e8f0",
-                300: "#1a1b1e", // Deep charcoal base
-                400: "#242529", // Card backgrounds
-                500: "#2e2f34", // Input backgrounds
-                550: "#35363c", // Subtle elevation
-                600: "#3d3e44", // Borders
-                650: "#44454b", // Hover states
-                700: "#4b4c53", // Active states
-                750: "#52535a", // Selected states
-                800: "#13141a", // Deep background
-                850: "#0d0e14", // Deepest background
-                900: "#06070d" // Ultra deep
+                300: "#1B1C2B",
+                400: "#2D2F4A",
+                500: "#202036",
+                550: "#292a43",
+                600: "#25263c"
             },
             light: {
-                100: "#f6f8fa",
-                200: "#e1e4e8",
-                300: "#e2e2e5", // Primary text
-                400: "#d0d0d3", // Secondary text
-                500: "#a0a0a6", // Muted text
-                600: "#71717a", // Disabled text
-                700: "#57575f", // Very muted
-                800: "#3e3e46", // Dark muted
-                900: "#27272d" // Darkest muted
-            },
-            gray: {
-                50: "#f9fafb",
-                100: "#f3f4f6",
-                200: "#e5e7eb",
-                300: "#d1d5db",
-                400: "#9ca3af",
-                500: "#6b7280",
-                600: "#4b5563",
-                700: "#374151",
-                800: "#1f2937",
-                900: "#111827"
+                300: "#4A4A61",
+                400: "#A7A8AF"
             },
-            accent: {
-                blue: "#6b7a9a",
-                purple: "#b794c0",
-                pink: "#d16d9e",
-                orange: "#d4976e",
-                yellow: "#e6d192",
-                green: "#88c999"
-            },
-            border: "#3d3e44"
+            border: "#29293F"
         },
         screens: {
-            // Mobile first approach
-            xs: "480px", // Small mobile landscape / large mobile portrait
-            sm: "640px", // Tablet portrait
-            md: "768px", // Tablet landscape / small desktop
-            lg: "1024px", // Desktop
-            xl: "1280px", // Large desktop
+            xs: "500px",
+            sm: "640px",
+            // => @media (min-width: 640px) { ... }
 
-            // Device-specific breakpoints
-            tablet: "768px", // Tablet-specific styling
-            desktop: "1024px", // Desktop-specific styling
+            md: "768px",
+            // => @media (min-width: 768px) { ... }
 
-            // Orientation-based breakpoints
-            landscape: {
-                raw: "(orientation: landscape)"
-            },
-            portrait: {
-                raw: "(orientation: portrait)"
-            },
+            ipadlg: "1000px",
+            lg: "1030px",
+            // => @media (min-width: 1024px) { ... }
 
-            // Height-based breakpoints for better mobile experience
-            "h-sm": {
-                raw: "(max-height: 500px)"
-            },
-            "h-md": {
-                raw: "(min-height: 600px)"
-            },
-            "h-lg": {
-                raw: "(min-height: 900px)"
-            },
-
-            // Combined orientation and size breakpoints
-            "mobile-landscape": {
-                raw: "(max-width: 896px) and (orientation: landscape) and (max-height: 500px)"
-            },
-            "mobile-portrait": {
-                raw: "(max-width: 480px) and (orientation: portrait)"
-            },
+            xl: "1280px",
+            // => @media (min-width: 1280px) { ... }
 
-            // Touch device detection
-            touch: {
-                raw: "(hover: none) and (pointer: coarse)"
-            },
-            "no-touch": {
-                raw: "(hover: hover) and (pointer: fine)"
+            "2xl": "1536px",
+            // => @media (min-width: 1536px) { ... }
+            landscape: {
+                raw: "(orientation: landscape)"
             }
         }
     },

package/vite.config.js

@@ -1,96 +1,39 @@
 import { fileURLToPath, URL } from "node:url";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import { readFileSync } from "node:fs";
-
-const pkg = JSON.parse(readFileSync("./package.json", "utf-8"));
+import pkg from "./package.json";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    cacheDir: './node_modules/.vite',
     build: {
         rollupOptions: {
-            output: {
-                manualChunks: {
-                    vue: ["vue", "vue-router", "pinia"],
-                    ui: ["@vueuse/core", "vue-virtual-scroller"],
-                    utils: ["@msgpack/msgpack", "websocket-heartbeat-js"]
-                }
-            }
-        },
-        target: "esnext",
-        cssCodeSplit: true,
-        sourcemap: false,
-        minify: "esbuild",
-        emptyOutDir: false
+            external: []
+        }
     },
     optimizeDeps: {
-        include: ["vue", "vue-router", "pinia", "@vueuse/core"],
-        exclude: ["sharp"]
+        exclude: ["sharp"] // Exclude 'sharp' from dependency optimization
     },
     define: {
-        __APP_VERSION__: JSON.stringify(pkg.version),
-        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
+        __APP_VERSION__: JSON.stringify(pkg.version) // Inject app version from package.json
     },
-    plugins: [
-        vue({
-            template: {
-                compilerOptions: {
-                    isCustomElement: (tag) => tag.startsWith("necro-")
-                }
-            }
-        })
-    ],
+    plugins: [vue()], // Use Vue plugin
     resolve: {
         alias: {
-            "@": fileURLToPath(new URL("./src", import.meta.url))
+            "@": fileURLToPath(new URL("./src", import.meta.url)) // Alias for src directory
+        },
+        fallback: {
+            "node-persist": false,
+            redis: false,
+            sharp: false,
+            fs: false,
+            path: false,
+            os: false
         }
     },
     css: {
         preprocessorOptions: {
             scss: {
-                api: "modern-compiler",
-                silenceDeprecations: ["legacy-js-api"]
-            }
-        },
-        devSourcemap: true
-    },
-    server: {
-        port: 5173,
-        strictPort: true,
-        host: true,
-        cors: true,
-        hmr: {
-            overlay: false
-        },
-        // Handle iOS connection resets gracefully
-        watch: {
-            usePolling: false,
-            interval: 1000
-        },
-        proxy: {
-            "/api": {
-                target: "http://localhost:8081",
-                changeOrigin: true,
-                secure: false,
-                configure: (proxy) => {
-                    proxy.on("error", (err, req, res) => {
-                        res.writeHead(503, {
-                            "Content-Type": "application/json"
-                        });
-                        res.end(JSON.stringify({ error: "Backend starting up, please wait..." }));
-                    });
-                }
-            },
-            "/ws": {
-                target: "ws://localhost:8081",
-                ws: true,
-                changeOrigin: true,
-                configure: (proxy) => {
-                    proxy.on("error", () => {
-                        // Silently handle WebSocket connection errors
-                    });
-                }
+                api: "modern-compiler" // Use modern SCSS compiler
             }
         }
     }

package/vue.config.js

@@ -0,0 +1,32 @@
+module.exports = {
+  chainWebpack: (config) => {
+    config.plugin('preload').tap((options) => {
+      options[0].as = (entry) => {
+        if (/\.css$/.test(entry)) return 'style';
+        if (/\.woff$/.test(entry)) return 'font';
+        if (/\.png$/.test(entry)) return 'image';
+        return 'script';
+      };
+      options[0].include = 'allAssets';
+      // options[0].fileWhitelist: [/\.files/, /\.to/, /\.include/]
+      // options[0].fileBlacklist: [/\.files/, /\.to/, /\.exclude/]
+      return options;
+    });
+  },
+  pwa: {
+    name: 'Russonoro',
+    themeColor: '#4DBA87',
+    msTileColor: '#000000',
+    appleMobileWebAppCapable: 'yes',
+    appleMobileWebAppStatusBarStyle: 'black',
+
+    // configure the workbox plugin
+    // workboxPluginMode: 'InjectManifest',
+    workboxPluginMode: "GenerateSW",
+    workboxOptions: {
+      // swSrc is required in InjectManifest mode.
+      swSrc: 'dev/sw.js',
+      // ...other Workbox options...
+    }
+  }
+};

package/workbox-config.js

@@ -0,0 +1,11 @@
+module.exports = {
+	globDirectory: 'public/',
+	globPatterns: [
+		'**/*.{png,ico}'
+	],
+	swDest: 'public/sw.js',
+	ignoreURLParametersMatching: [
+		/^utm_/,
+		/^fbclid$/
+	]
+};