1939bf2ef4
- Progressive Web App with Express + JSON backend - PIN-based auth, multi-device sync - Invoice + Statement PDF generation (branded, Grandstander + Nunito) - Mobile + Desktop responsive layouts - n8n backup integration - Custom logo upload - Settings for business info, fees, banking - Bulk invoice generation - Web Share API integration
76 lines
2.9 KiB
JavaScript
76 lines
2.9 KiB
JavaScript
/* Slim Uiltjies — Inline SVG icons & logo
|
|
Used throughout the app for the owl brand mark and small UI icons.
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
|
|
// The brand owl — small inline version for the header
|
|
function brandOwl(size = 42) {
|
|
return `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="${size}" height="${size}">
|
|
<defs>
|
|
<linearGradient id="bgGrad" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stop-color="#6B4FE0"/>
|
|
<stop offset="100%" stop-color="#4A2FB8"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="100" height="100" rx="22" fill="url(#bgGrad)"/>
|
|
<ellipse cx="50" cy="60" rx="30" ry="32" fill="#8B5A3C"/>
|
|
<ellipse cx="50" cy="64" rx="22" ry="25" fill="#F5E6D3"/>
|
|
<path d="M 26 42 Q 26 18 50 18 Q 74 18 74 42 Z" fill="#8B5A3C"/>
|
|
<path d="M 30 28 L 36 12 L 46 28 Z" fill="#8B5A3C"/>
|
|
<path d="M 70 28 L 64 12 L 54 28 Z" fill="#8B5A3C"/>
|
|
<circle cx="38" cy="42" r="11" fill="#FFFFFF"/>
|
|
<circle cx="62" cy="42" r="11" fill="#FFFFFF"/>
|
|
<circle cx="38" cy="42" r="7" fill="#3D2817"/>
|
|
<circle cx="62" cy="42" r="7" fill="#3D2817"/>
|
|
<circle cx="40" cy="40" r="2" fill="#FFFFFF"/>
|
|
<circle cx="64" cy="40" r="2" fill="#FFFFFF"/>
|
|
<path d="M 50 48 L 46 56 L 54 56 Z" fill="#FF8C42"/>
|
|
<ellipse cx="50" cy="22" rx="22" ry="3" fill="#2C1810"/>
|
|
<path d="M 50 12 L 72 19 L 50 24 L 28 19 Z" fill="#2C1810"/>
|
|
<circle cx="50" cy="13" r="1.5" fill="#FFD700"/>
|
|
</svg>`;
|
|
}
|
|
|
|
function smallOwl(size = 36) {
|
|
return `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="${size}" height="${size}">
|
|
<circle cx="50" cy="50" r="46" fill="#6B4FE0"/>
|
|
<ellipse cx="50" cy="58" rx="24" ry="26" fill="#8B5A3C"/>
|
|
<ellipse cx="50" cy="62" rx="17" ry="19" fill="#F5E6D3"/>
|
|
<circle cx="40" cy="46" r="9" fill="#FFFFFF"/>
|
|
<circle cx="60" cy="46" r="9" fill="#FFFFFF"/>
|
|
<circle cx="40" cy="46" r="5" fill="#3D2817"/>
|
|
<circle cx="60" cy="46" r="5" fill="#3D2817"/>
|
|
<circle cx="42" cy="44" r="1.5" fill="#FFFFFF"/>
|
|
<circle cx="62" cy="44" r="1.5" fill="#FFFFFF"/>
|
|
<path d="M 50 51 L 47 58 L 53 58 Z" fill="#FF8C42"/>
|
|
</svg>`;
|
|
}
|
|
|
|
// Inject the brand owl into the splash + header
|
|
function mount() {
|
|
const splash = document.getElementById('splashOwl');
|
|
if (splash) splash.innerHTML = brandOwl(120);
|
|
const brand = document.getElementById('brandOwl');
|
|
if (brand) {
|
|
// If business has a custom logo, use it; otherwise default owl
|
|
(async () => {
|
|
try {
|
|
const b = await window.SUDB?.getBusiness?.();
|
|
if (b && b.logoDataUrl) {
|
|
brand.innerHTML = `<img src="${b.logoDataUrl}" alt="Logo" style="width:100%;height:100%;object-fit:cover;border-radius:inherit" />`;
|
|
brand.style.overflow = 'hidden';
|
|
} else {
|
|
brand.innerHTML = smallOwl(42);
|
|
}
|
|
} catch {
|
|
brand.innerHTML = smallOwl(42);
|
|
}
|
|
})();
|
|
}
|
|
}
|
|
|
|
window.SUIcons = { brandOwl, smallOwl, mount };
|
|
})();
|