feat(ui): PWA splash screen, animated logo, dynamic favicon, manifest shortcuts, splash-loader.js
This commit is contained in:
131
pos/static/js/splash-loader.js
Normal file
131
pos/static/js/splash-loader.js
Normal file
@@ -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(); });
|
||||
})();
|
||||
@@ -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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user