feat(ui): PWA splash screen, animated logo, dynamic favicon, manifest shortcuts, splash-loader.js

2026-05-26 08:45:56 +00:00
parent 031c190635
commit eb107e2778
17 changed files with 187 additions and 18 deletions
--- a/pos/static/js/splash-loader.js
+++ b/pos/static/js/splash-loader.js
@@ -0,0 +1,131 @@
+/**
+ * splash-loader.js — PWA splash screen + dynamic favicon
+ * Show an animated splash while the app loads, then fade out.
+ * Also provides dynamic favicon updates for notifications / offline states.
+ */
+(function() {
+    'use strict';
+
+    // ─── Create splash element ──────────────────────────────────────────────
+    var splash = document.createElement('div');
+    splash.id = 'nx-splash';
+    splash.style.cssText = 'position:fixed;inset:0;z-index:99999;' +
+        'background:linear-gradient(135deg,#0d0d0d 0%,#1a1205 100%);' +
+        'display:flex;flex-direction:column;align-items:center;justify-content:center;' +
+        'transition:opacity 0.5s ease,visibility 0.5s ease;';
+
+    // Logo SVG (animated)
+    var logoSvg = '<svg width="80" height="80" viewBox="0 0 80 80" style="margin-bottom:24px;">' +
+        '<defs><linearGradient id="nxg" x1="0%" y1="0%" x2="100%" y2="100%">' +
+        '<stop offset="0%" style="stop-color:#F5A623"/>' +
+        '<stop offset="100%" style="stop-color:#E08E00"/>' +
+        '</linearGradient></defs>' +
+        '<circle cx="40" cy="40" r="36" fill="none" stroke="url(#nxg)" stroke-width="3" stroke-dasharray="226" stroke-dashoffset="226" style="animation:nxDraw 1.2s ease forwards;">' +
+        '<animateTransform attributeName="transform" type="rotate" from="0 40 40" to="360 40 40" dur="8s" repeatCount="indefinite"/>' +
+        '</circle>' +
+        '<text x="40" y="48" text-anchor="middle" fill="#F5A623" font-family="system-ui,sans-serif" font-weight="800" font-size="28" style="animation:nxFadeIn 0.6s 0.4s ease both;">N</text>' +
+        '</svg>';
+
+    var title = '<div style="font-family:system-ui,sans-serif;font-size:20px;font-weight:700;color:#eee;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;">Nexus</div>';
+    var subtitle = '<div style="font-family:system-ui,sans-serif;font-size:13px;color:#888;letter-spacing:4px;text-transform:uppercase;">Autoparts POS</div>';
+    var spinner = '<div class="nx-loader" style="margin-top:32px;width:32px;height:32px;"><div class="nx-loader__ring"></div><div class="nx-loader__ring"></div></div>';
+
+    splash.innerHTML = logoSvg + title + subtitle + spinner;
+
+    // Inject keyframes if not present
+    if (!document.getElementById('nx-splash-styles')) {
+        var style = document.createElement('style');
+        style.id = 'nx-splash-styles';
+        style.textContent = '@keyframes nxDraw { to { stroke-dashoffset:0; } } @keyframes nxFadeIn { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:translateY(0); } }';
+        document.head.appendChild(style);
+    }
+
+    document.body.appendChild(splash);
+
+    // Hide splash when DOM is ready + minimum display time
+    var minDisplay = 800;
+    var startTime = Date.now();
+
+    function hideSplash() {
+        var elapsed = Date.now() - startTime;
+        var remaining = Math.max(0, minDisplay - elapsed);
+        setTimeout(function() {
+            splash.style.opacity = '0';
+            splash.style.visibility = 'hidden';
+            setTimeout(function() { splash.remove(); }, 500);
+        }, remaining);
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', hideSplash);
+    } else {
+        hideSplash();
+    }
+
+    // ─── Dynamic Favicon ────────────────────────────────────────────────────
+    window.NexusFavicon = {
+        canvas: null,
+        ctx: null,
+        link: null,
+        baseColor: '#F5A623',
+
+        init: function() {
+            this.canvas = document.createElement('canvas');
+            this.canvas.width = 64;
+            this.canvas.height = 64;
+            this.ctx = this.canvas.getContext('2d');
+            this.link = document.querySelector('link[rel*="icon"]') || document.createElement('link');
+            this.link.rel = 'shortcut icon';
+            this.link.type = 'image/png';
+            document.head.appendChild(this.link);
+            this.setNormal();
+        },
+
+        draw: function(color, badge) {
+            var ctx = this.ctx;
+            var c = this.canvas;
+            ctx.clearRect(0, 0, 64, 64);
+
+            // Background circle
+            ctx.beginPath();
+            ctx.arc(32, 32, 30, 0, Math.PI * 2);
+            ctx.fillStyle = color || this.baseColor;
+            ctx.fill();
+
+            // Letter N
+            ctx.fillStyle = '#0d0d0d';
+            ctx.font = 'bold 36px system-ui,sans-serif';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText('N', 32, 33);
+
+            // Badge dot
+            if (badge) {
+                ctx.beginPath();
+                ctx.arc(52, 12, 10, 0, Math.PI * 2);
+                ctx.fillStyle = '#ef4444';
+                ctx.fill();
+                ctx.fillStyle = '#fff';
+                ctx.font = 'bold 11px system-ui,sans-serif';
+                ctx.fillText(badge > 9 ? '9+' : String(badge), 52, 13);
+            }
+
+            this.link.href = c.toDataURL('image/png');
+        },
+
+        setNormal: function() { this.draw(this.baseColor); },
+        setOffline: function() { this.draw('#666'); },
+        setNotify: function(count) { this.draw(this.baseColor, count); },
+    };
+
+    // Auto-init favicon
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() { NexusFavicon.init(); });
+    } else {
+        NexusFavicon.init();
+    }
+
+    // Update favicon on online/offline
+    window.addEventListener('online', function() { if (window.NexusFavicon) NexusFavicon.setNormal(); });
+    window.addEventListener('offline', function() { if (window.NexusFavicon) NexusFavicon.setOffline(); });
+})();
--- a/pos/static/pwa/manifest.json
+++ b/pos/static/pwa/manifest.json
@@ -1,13 +1,23 @@
 {
-  "name": "Nexus POS",
+  "name": "Nexus Autoparts POS",
  "short_name": "NexusPOS",
  "description": "Sistema de Punto de Venta para Refaccionarias",
  "start_url": "/pos/login",
  "display": "standalone",
+  "orientation": "portrait",
  "background_color": "#0d0d0d",
  "theme_color": "#F5A623",
+  "categories": ["business", "productivity"],
  "icons": [
-    {"src": "/pos/static/pwa/icon-192.png", "sizes": "192x192", "type": "image/png"},
-    {"src": "/pos/static/pwa/icon-512.png", "sizes": "512x512", "type": "image/png"}
-  ]
+    {"src": "/pos/static/pwa/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable"},
+    {"src": "/pos/static/pwa/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable"}
+  ],
+  "shortcuts": [
+    {"name": "Nueva Venta", "short_name": "Venta", "description": "Abrir punto de venta", "url": "/pos/sale", "icons": [{"src": "/pos/static/pwa/icon-192.png", "sizes": "192x192"}]},
+    {"name": "Inventario", "short_name": "Stock", "description": "Ver inventario", "url": "/pos/inventory", "icons": [{"src": "/pos/static/pwa/icon-192.png", "sizes": "192x192"}]},
+    {"name": "Dashboard", "short_name": "Dashboard", "description": "Ver resumen", "url": "/pos/dashboard", "icons": [{"src": "/pos/static/pwa/icon-192.png", "sizes": "192x192"}]}
+  ],
+  "screenshots": [],
+  "related_applications": [],
+  "prefer_related_applications": false
 }
--- a/pos/templates/accounting.html
+++ b/pos/templates/accounting.html
@@ -13,6 +13,7 @@
  <link rel="stylesheet" href="/pos/static/css/pos-glass.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
+  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />

  <link rel="stylesheet" href="/pos/static/css/accounting.css">
 </head>
@@ -490,7 +491,8 @@
  </div>

  <script src="/pos/static/js/i18n.js" defer></script>
-  <script src="/pos/static/js/app-init.js" defer></script>
+  <script src="/pos/static/js/app-init.js" defer
+  <script src="/pos/static/js/splash-loader.js?v=1" defer></script>></script>
  <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
  <script src="/pos/static/js/sidebar.js" defer></script>
  <script src="/pos/static/js/accounting.js" defer></script>
--- a/pos/templates/catalog.html
+++ b/pos/templates/catalog.html
@@ -14,6 +14,7 @@
  <link rel="stylesheet" href="/pos/static/css/onboarding.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
+  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />
  <script src="/pos/static/js/native-bridge.js" defer></script>

  <link rel="stylesheet" href="/pos/static/css/catalog.css">
@@ -286,7 +287,8 @@

  <script src="/pos/static/js/i18n.js" defer></script>
  <script src="/pos/static/js/kiosk.js" defer></script>
-  <script src="/pos/static/js/app-init.js" defer></script>
+  <script src="/pos/static/js/app-init.js" defer
+  <script src="/pos/static/js/splash-loader.js?v=1" defer></script>></script>
  <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
  <script src="/pos/static/js/sidebar.js" defer></script>
  <script src="/pos/static/js/catalog.js?v=2" defer></script>
--- a/pos/templates/config.html
+++ b/pos/templates/config.html
@@ -13,6 +13,7 @@
  <link rel="stylesheet" href="/pos/static/css/pos-glass.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
+  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />

  <link rel="stylesheet" href="/pos/static/css/config.css?v=2">
 </head>
@@ -741,7 +742,8 @@
  </div>

  <script src="/pos/static/js/i18n.js" defer></script>
-  <script src="/pos/static/js/app-init.js" defer></script>
+  <script src="/pos/static/js/app-init.js" defer
+  <script src="/pos/static/js/splash-loader.js?v=1" defer></script>></script>
  <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
  <script src="/pos/static/js/sidebar.js" defer></script>
  <script src="/pos/static/js/kiosk.js" defer></script>
--- a/pos/templates/customers.html
+++ b/pos/templates/customers.html
@@ -13,6 +13,7 @@
  <link rel="stylesheet" href="/pos/static/css/pos-glass.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
+  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />

  <link rel="stylesheet" href="/pos/static/css/customers.css">
 </head>
@@ -621,7 +622,8 @@
  </div>

  <script src="/pos/static/js/i18n.js" defer></script>
-  <script src="/pos/static/js/app-init.js" defer></script>
+  <script src="/pos/static/js/app-init.js" defer
+  <script src="/pos/static/js/splash-loader.js?v=1" defer></script>></script>
  <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
  <script src="/pos/static/js/sidebar.js" defer></script>
  <script src="/pos/static/js/virtual-scroll.js" defer></script>
--- a/pos/templates/dashboard.html
+++ b/pos/templates/dashboard.html
@@ -13,6 +13,7 @@
  <link rel="stylesheet" href="/pos/static/css/pos-glass.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
+  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />

  <link rel="stylesheet" href="/pos/static/css/dashboard.css">
 </head>
@@ -489,7 +490,8 @@

  <script src="/pos/static/js/chart.umd.min.js" defer></script>
  <script src="/pos/static/js/i18n.js" defer></script>
-  <script src="/pos/static/js/app-init.js" defer></script>
+  <script src="/pos/static/js/app-init.js" defer
+  <script src="/pos/static/js/splash-loader.js?v=1" defer></script>></script>
  <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
  <script src="/pos/static/js/sidebar.js" defer></script>
  <script src="/pos/static/js/dashboard-stats.js" defer></script>
--- a/pos/templates/diagrams.html
+++ b/pos/templates/diagrams.html
@@ -14,6 +14,7 @@
  <link rel="stylesheet" href="/pos/static/css/onboarding.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
+  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />
  <script src="/pos/static/js/native-bridge.js" defer></script>

  <link rel="stylesheet" href="/pos/static/css/diagrams.css">
@@ -150,7 +151,8 @@

  <script src="/pos/static/js/i18n.js" defer></script>
  <script src="/pos/static/js/kiosk.js" defer></script>
-  <script src="/pos/static/js/app-init.js" defer></script>
+  <script src="/pos/static/js/app-init.js" defer
+  <script src="/pos/static/js/splash-loader.js?v=1" defer></script>></script>
  <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
  <script src="/pos/static/js/sidebar.js" defer></script>
  <script src="/pos/static/js/diagrams.js" defer></script>
--- a/pos/templates/fleet.html
+++ b/pos/templates/fleet.html
@@ -13,6 +13,7 @@
  <link rel="stylesheet" href="/pos/static/css/pos-glass.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
+  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />

  <link rel="stylesheet" href="/pos/static/css/fleet.css">
 </head>
@@ -303,7 +304,8 @@
 </div>

 <script src="/pos/static/js/i18n.js" defer></script>
-<script src="/pos/static/js/app-init.js" defer></script>
+<script src="/pos/static/js/app-init.js" defer
+  <script src="/pos/static/js/splash-loader.js?v=1" defer></script>></script>
 <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
  <script src="/pos/static/js/sidebar.js" defer></script>
 <script src="/pos/static/js/fleet.js" defer></script>
--- a/pos/templates/inventory.html
+++ b/pos/templates/inventory.html
@@ -13,6 +13,7 @@
  <link rel="stylesheet" href="/pos/static/css/pos-glass.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
+  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />

  <link rel="stylesheet" href="/pos/static/css/inventory.css?v=8">
 </head>
@@ -915,7 +916,8 @@
  </div>

  <script src="/pos/static/js/i18n.js" defer></script>
-  <script src="/pos/static/js/app-init.js" defer></script>
+  <script src="/pos/static/js/app-init.js" defer
+  <script src="/pos/static/js/splash-loader.js?v=1" defer></script>></script>
  <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
  <script src="/pos/static/js/sidebar.js" defer></script>
  <script src="/pos/static/js/virtual-scroll.js?v=2" defer></script>
--- a/pos/templates/invoicing.html
+++ b/pos/templates/invoicing.html
@@ -13,6 +13,7 @@
  <link rel="stylesheet" href="/pos/static/css/pos-glass.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
+  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />

  <link rel="stylesheet" href="/pos/static/css/invoicing.css">
 </head>
@@ -1052,7 +1053,8 @@
  </div>

  <script src="/pos/static/js/i18n.js" defer></script>
-  <script src="/pos/static/js/app-init.js" defer></script>
+  <script src="/pos/static/js/app-init.js" defer
+  <script src="/pos/static/js/splash-loader.js?v=1" defer></script>></script>
  <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
  <script src="/pos/static/js/sidebar.js" defer></script>
  <script src="/pos/static/js/invoicing.js" defer></script>
--- a/pos/templates/marketplace.html
+++ b/pos/templates/marketplace.html
@@ -13,6 +13,7 @@
  <link rel="stylesheet" href="/pos/static/css/pos-glass.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
+  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />

  <link rel="stylesheet" href="/pos/static/css/marketplace.css">
 </head>
--- a/pos/templates/marketplace_external.html
+++ b/pos/templates/marketplace_external.html
@@ -14,6 +14,7 @@
  <link rel="stylesheet" href="/pos/static/css/inventory.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
+  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />
  <style>
    .meli-status { display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600; }
    .meli-status--active { background:#d4edda;color:#155724; }
@@ -315,7 +316,8 @@
  </div>

  <script src="/pos/static/js/i18n.js" defer></script>
-  <script src="/pos/static/js/app-init.js" defer></script>
+  <script src="/pos/static/js/app-init.js" defer
+  <script src="/pos/static/js/splash-loader.js?v=1" defer></script>></script>
  <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
  <script src="/pos/static/js/sidebar.js" defer></script>
  <script src="/pos/static/js/marketplace_external.js?v=4" defer></script>
--- a/pos/templates/pos.html
+++ b/pos/templates/pos.html
@@ -13,6 +13,7 @@
  <link rel="stylesheet" href="/pos/static/css/chat.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
+  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />
  <script src="/pos/static/js/native-bridge.js" defer></script>

  <link rel="stylesheet" href="/pos/static/css/pos.css?v=4">
@@ -565,7 +566,8 @@
  <script src="/pos/static/js/i18n.js" defer></script>
  <script src="/pos/static/js/kiosk.js" defer></script>
  <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
-  <script src="/pos/static/js/app-init.js" defer></script>
+  <script src="/pos/static/js/app-init.js" defer
+  <script src="/pos/static/js/splash-loader.js?v=1" defer></script>></script>
  <script src="/pos/static/js/push.js" defer></script>
  <script src="/pos/static/js/printer.js" defer></script>
  <script src="/pos/static/js/pos.js?v=5" defer></script>
--- a/pos/templates/quotations.html
+++ b/pos/templates/quotations.html
@@ -16,7 +16,8 @@
 <body>
  <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
  <script src="/pos/static/js/i18n.js" defer></script>
-  <script src="/pos/static/js/app-init.js" defer></script>
+  <script src="/pos/static/js/app-init.js" defer
+  <script src="/pos/static/js/splash-loader.js?v=1" defer></script>></script>
  <script src="/pos/static/js/sidebar.js" defer></script>

  <div class="page">
--- a/pos/templates/reports.html
+++ b/pos/templates/reports.html
@@ -13,6 +13,7 @@
  <link rel="stylesheet" href="/pos/static/css/pos-glass.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
+  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />

  <link rel="stylesheet" href="/pos/static/css/reports.css">
 </head>
@@ -318,7 +319,8 @@
  <!-- End app-shell -->

  <script src="/pos/static/js/i18n.js" defer></script>
-  <script src="/pos/static/js/app-init.js" defer></script>
+  <script src="/pos/static/js/app-init.js" defer
+  <script src="/pos/static/js/splash-loader.js?v=1" defer></script>></script>
  <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
  <script src="/pos/static/js/sidebar.js" defer></script>
  <script src="/pos/static/js/reports.js" defer></script>
--- a/pos/templates/whatsapp.html
+++ b/pos/templates/whatsapp.html
@@ -16,6 +16,7 @@
  <link rel="stylesheet" href="/pos/static/css/pos-glass.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
+  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />

  <link rel="stylesheet" href="/pos/static/css/whatsapp.css">
 </head>
@@ -132,7 +133,8 @@ function posLogout(){localStorage.removeItem('pos_token');window.location.href='

 <!-- Sidebar -->
 <script src="/pos/static/js/i18n.js" defer></script>
-<script src="/pos/static/js/app-init.js" defer></script>
+<script src="/pos/static/js/app-init.js" defer
+  <script src="/pos/static/js/splash-loader.js?v=1" defer></script>></script>
 <script src="/pos/static/js/whatsapp2.js?v=5" defer></script>
 <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
  <script src="/pos/static/js/sidebar.js" defer></script>