(function() { var savedTheme = localStorage.getItem('theme-mode') || 'system'; var systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; var isDark = savedTheme === 'dark' || (savedTheme === 'system' && systemPrefersDark); var docEl = document.documentElement; var normalizedPath = window.location.pathname.replace(/\/+$/, '') || '/'; var stackQuery = new URLSearchParams(window.location.search).get('stack'); var stackPages = stackQuery ? stackQuery.split(',') : []; var topPage = stackPages.length > 0 ? stackPages[stackPages.length - 1] : 'myCard'; var isInitialMyCardRoute = normalizedPath === '/app' && topPage === 'myCard'; var defaultBackgroundColor = isDark ? '#000000' : '#ffffff'; var initialMyCardBackgroundColor = defaultBackgroundColor; var bootstrapMeshGradientConfigs = {"cool-summer":{"backgroundColor":"hsla(197,92%,60%,1)","layers":[{"id":"mesh-layer-0","x":96,"y":96,"color":"hsla(55,93%,54%,0.85)","start":5,"end":86},{"id":"mesh-layer-1","x":5,"y":90,"color":"hsla(229,71%,68%,1)","start":13,"end":65},{"id":"mesh-layer-2","x":57,"y":73,"color":"hsla(308,93%,51%,1)","start":3,"end":89},{"id":"mesh-layer-3","x":20,"y":4,"color":"hsla(318,60%,76%,1)","start":22,"end":56},{"id":"mesh-layer-4","x":74,"y":15,"color":"hsla(324,92%,59%,1)","start":13,"end":57}]},"sunset-vibes":{"backgroundColor":"#ff9a9e","layers":[{"id":"mesh-layer-0","x":50,"y":100,"color":"#fad0c4","start":0,"end":50},{"id":"mesh-layer-1","x":80,"y":20,"color":"#ffecd2","start":0,"end":40},{"id":"mesh-layer-2","x":10,"y":30,"color":"#fbc2eb","start":0,"end":60}]},"northern-lights":{"backgroundColor":"#000000","layers":[{"id":"mesh-layer-0","x":50,"y":0,"color":"#4facfe","start":0,"end":70},{"id":"mesh-layer-1","x":0,"y":50,"color":"#00f2fe","start":0,"end":50},{"id":"mesh-layer-2","x":100,"y":50,"color":"#43e97b","start":0,"end":50},{"id":"mesh-layer-3","x":50,"y":100,"color":"#38f9d7","start":0,"end":70}]},"mystic-nebula":{"backgroundColor":"#2b1055","layers":[{"id":"mesh-layer-0","x":20,"y":80,"color":"#7597de","start":0,"end":50},{"id":"mesh-layer-1","x":80,"y":20,"color":"#d53369","start":0,"end":50},{"id":"mesh-layer-2","x":50,"y":50,"color":"#daae51","start":0,"end":60}]},"spring-bloom":{"backgroundColor":"#a8edea","layers":[{"id":"mesh-layer-0","x":0,"y":0,"color":"#fed6e3","start":0,"end":50},{"id":"mesh-layer-1","x":100,"y":100,"color":"#d299c2","start":0,"end":50},{"id":"mesh-layer-2","x":50,"y":50,"color":"#fef9d7","start":0,"end":60}]},"deep-ocean":{"backgroundColor":"#0f2027","layers":[{"id":"mesh-layer-1","x":50,"y":0,"color":"#3a7bd5","start":0,"end":70}]},"glass-morphism":{"backgroundColor":"rgba(255, 255, 255, 0.4)","layers":[{"id":"mesh-layer-0","x":10,"y":10,"color":"rgba(255, 255, 255, 0.8)","start":0,"end":20},{"id":"mesh-layer-1","x":90,"y":90,"color":"rgba(255, 255, 255, 0.8)","start":0,"end":20}]},"mesh-sublime":{"backgroundColor":"#FC5C7D","layers":[{"id":"mesh-layer-0","x":10,"y":20,"color":"#6A82FB","start":0,"end":50},{"id":"mesh-layer-1","x":90,"y":80,"color":"#FC5C7D","start":0,"end":50},{"id":"mesh-layer-2","x":50,"y":50,"color":"#FF9A9E","start":0,"end":60},{"id":"mesh-layer-3","x":80,"y":10,"color":"#A18CD1","start":0,"end":40}]},"mesh-vice-city":{"backgroundColor":"#3494E6","layers":[{"id":"mesh-layer-0","x":0,"y":100,"color":"#EC6EAD","start":0,"end":60},{"id":"mesh-layer-1","x":100,"y":0,"color":"#3494E6","start":0,"end":60},{"id":"mesh-layer-2","x":50,"y":50,"color":"#9B59B6","start":0,"end":50},{"id":"mesh-layer-3","x":20,"y":20,"color":"#E55D87","start":0,"end":40}]},"mesh-cosmic-fusion":{"backgroundColor":"#ff00cc","layers":[{"id":"mesh-layer-0","x":80,"y":90,"color":"#333399","start":0,"end":70},{"id":"mesh-layer-1","x":10,"y":10,"color":"#ff00cc","start":0,"end":60},{"id":"mesh-layer-2","x":50,"y":50,"color":"#9900FF","start":0,"end":50},{"id":"mesh-layer-3","x":90,"y":10,"color":"#6600CC","start":0,"end":40}]},"mesh-citrus":{"backgroundColor":"#FDC830","layers":[{"id":"mesh-layer-0","x":90,"y":90,"color":"#F37335","start":0,"end":70},{"id":"mesh-layer-1","x":10,"y":10,"color":"#FDC830","start":0,"end":60},{"id":"mesh-layer-2","x":50,"y":50,"color":"#FFB75E","start":0,"end":50},{"id":"mesh-layer-3","x":20,"y":80,"color":"#FF8C00","start":0,"end":40}]},"mesh-summer-dog":{"backgroundColor":"#a8ff78","layers":[{"id":"mesh-layer-0","x":100,"y":100,"color":"#78ffd6","start":0,"end":60},{"id":"mesh-layer-1","x":0,"y":0,"color":"#a8ff78","start":0,"end":60},{"id":"mesh-layer-2","x":50,"y":50,"color":"#6DD5FA","start":0,"end":50},{"id":"mesh-layer-3","x":20,"y":90,"color":"#11998e","start":0,"end":30}]},"mesh-purple-love":{"backgroundColor":"#cc2b5e","layers":[{"id":"mesh-layer-0","x":90,"y":90,"color":"#753a88","start":0,"end":70},{"id":"mesh-layer-1","x":10,"y":10,"color":"#cc2b5e","start":0,"end":60},{"id":"mesh-layer-2","x":50,"y":50,"color":"#8E44AD","start":0,"end":50},{"id":"mesh-layer-3","x":80,"y":20,"color":"#D2B4DE","start":0,"end":40}]},"mesh-electric-violet":{"backgroundColor":"#4776E6","layers":[{"id":"mesh-layer-0","x":100,"y":0,"color":"#8E54E9","start":0,"end":70},{"id":"mesh-layer-1","x":0,"y":100,"color":"#4776E6","start":0,"end":60},{"id":"mesh-layer-2","x":50,"y":50,"color":"#9B59B6","start":0,"end":50},{"id":"mesh-layer-3","x":20,"y":20,"color":"#5B86E5","start":0,"end":40}]},"mesh-amin":{"backgroundColor":"#8E2DE2","layers":[{"id":"mesh-layer-0","x":100,"y":100,"color":"#4A00E0","start":0,"end":70},{"id":"mesh-layer-1","x":0,"y":0,"color":"#8E2DE2","start":0,"end":60},{"id":"mesh-layer-2","x":50,"y":50,"color":"#800080","start":0,"end":50},{"id":"mesh-layer-3","x":90,"y":10,"color":"#4B0082","start":0,"end":40}]},"mesh-titanium":{"backgroundColor":"#283048","layers":[{"id":"mesh-layer-0","x":50,"y":100,"color":"#859398","start":0,"end":80},{"id":"mesh-layer-1","x":50,"y":0,"color":"#283048","start":0,"end":60},{"id":"mesh-layer-2","x":0,"y":50,"color":"#485563","start":0,"end":50},{"id":"mesh-layer-3","x":100,"y":50,"color":"#29323c","start":0,"end":50}]},"mesh-wiretap":{"backgroundColor":"hsla(0, 0%, 100%, 1)","layers":[{"id":"mesh-layer-0","x":85,"y":80,"color":"hsla(150, 36%, 88%, 1)","start":9,"end":55},{"id":"mesh-layer-1","x":60,"y":24,"color":"hsla(219, 70%, 87%, 1)","start":5,"end":72},{"id":"mesh-layer-2","x":13,"y":82,"color":"hsla(297, 70%, 76%, 0.49)","start":5,"end":52},{"id":"mesh-layer-3","x":24,"y":7,"color":"hsla(182, 50%, 78%, 1)","start":13,"end":68}]},"mesh-warm":{"backgroundColor":"hsla(52, 51%, 88%, 1)","layers":[{"id":"mesh-layer-0","x":31,"y":78,"color":"hsla(175, 58%, 78%, 1)","start":3,"end":75},{"id":"mesh-layer-1","x":88,"y":93,"color":"hsla(101, 68%, 100%, 1)","start":3,"end":83},{"id":"mesh-layer-2","x":99,"y":8,"color":"hsla(84, 62%, 87%, 1)","start":5,"end":67},{"id":"mesh-layer-3","x":41,"y":0,"color":"hsla(36, 47%, 87%, 1)","start":8,"end":61},{"id":"mesh-layer-4","x":19,"y":59,"color":"hsla(189, 44%, 92%, 1)","start":16,"end":88}]},"mesh-ocean":{"backgroundColor":"hsla(258, 57%, 79%, 1)","layers":[{"id":"mesh-layer-0","x":11,"y":96,"color":"hsla(181, 55%, 66%, 1)","start":37,"end":90},{"id":"mesh-layer-1","x":92,"y":89,"color":"hsla(258, 70%, 75%, 1)","start":31,"end":84},{"id":"mesh-layer-2","x":58,"y":7,"color":"hsla(202, 66%, 68%, 1)","start":41,"end":61},{"id":"mesh-layer-3","x":62,"y":35,"color":"hsla(225, 53%, 66%, 1)","start":22,"end":59},{"id":"mesh-layer-4","x":2,"y":63,"color":"hsla(218, 56%, 94%, 1)","start":19,"end":70}]}}; var bootstrapMeshGradientPresetStyles = {"cool-summer":{"backgroundImage":"\n radial-gradient(circle at 96% 96%, hsla(55,93%,54%,0.85) 5%, transparent 86%),\n radial-gradient(circle at 5% 90%, hsla(229,71%,68%,1) 13%, transparent 65%),\n radial-gradient(circle at 57% 73%, hsla(308,93%,51%,1) 3%, transparent 89%),\n radial-gradient(circle at 20% 4%, hsla(318,60%,76%,1) 22%, transparent 56%),\n radial-gradient(circle at 74% 15%, hsla(324,92%,59%,1) 13%, transparent 57%)\n ","backgroundBlendMode":"normal, normal, normal, normal, normal"},"sunset-vibes":{"backgroundImage":"\n radial-gradient(circle at 50% 100%, #fad0c4 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, #ffecd2 0%, transparent 40%),\n radial-gradient(circle at 10% 30%, #fbc2eb 0%, transparent 60%)\n ","backgroundBlendMode":"normal, normal, normal"},"northern-lights":{"backgroundImage":"\n radial-gradient(circle at 50% -20%, #4facfe 0%, transparent 70%),\n radial-gradient(circle at 0% 50%, #00f2fe 0%, transparent 50%),\n radial-gradient(circle at 100% 50%, #43e97b 0%, transparent 50%),\n radial-gradient(circle at 50% 100%, #38f9d7 0%, transparent 70%)\n ","backgroundBlendMode":"screen, screen, screen, screen"},"mystic-nebula":{"backgroundImage":"\n radial-gradient(circle at 20% 80%, #7597de 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, #d53369 0%, transparent 50%),\n radial-gradient(circle at 50% 50%, #daae51 0%, transparent 60%)\n ","backgroundBlendMode":"hard-light, hard-light, hard-light"},"spring-bloom":{"backgroundImage":"\n radial-gradient(circle at 0% 0%, #fed6e3 0%, transparent 50%),\n radial-gradient(circle at 100% 100%, #d299c2 0%, transparent 50%),\n radial-gradient(circle at 50% 50%, #fef9d7 0%, transparent 60%)\n ","backgroundBlendMode":"multiply, multiply, multiply"},"deep-ocean":{"backgroundImage":"\n linear-gradient(to right, #203a43, #2c5364),\n radial-gradient(circle at 50% 0%, #3a7bd5 0%, transparent 70%)\n ","backgroundBlendMode":"overlay, screen"},"glass-morphism":{"backgroundImage":"\n radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.8) 0%, transparent 20%),\n radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.8) 0%, transparent 20%)\n ","backgroundBlendMode":""},"mesh-sublime":{"backgroundImage":"\n radial-gradient(circle at 10% 20%, #6A82FB 0%, transparent 50%),\n radial-gradient(circle at 90% 80%, #FC5C7D 0%, transparent 50%),\n radial-gradient(circle at 50% 50%, #FF9A9E 0%, transparent 60%),\n radial-gradient(circle at 80% 10%, #A18CD1 0%, transparent 40%)\n ","backgroundBlendMode":"normal, normal, screen, overlay"},"mesh-vice-city":{"backgroundImage":"\n radial-gradient(circle at 0% 100%, #EC6EAD 0%, transparent 60%),\n radial-gradient(circle at 100% 0%, #3494E6 0%, transparent 60%),\n radial-gradient(circle at 50% 50%, #9B59B6 0%, transparent 50%),\n radial-gradient(circle at 20% 20%, #E55D87 0%, transparent 40%)\n ","backgroundBlendMode":"normal, normal, soft-light, screen"},"mesh-cosmic-fusion":{"backgroundImage":"\n radial-gradient(circle at 80% 90%, #333399 0%, transparent 70%),\n radial-gradient(circle at 10% 10%, #ff00cc 0%, transparent 60%),\n radial-gradient(circle at 50% 50%, #9900FF 0%, transparent 50%),\n radial-gradient(circle at 90% 10%, #6600CC 0%, transparent 40%)\n ","backgroundBlendMode":"normal, normal, overlay, color-dodge"},"mesh-citrus":{"backgroundImage":"\n radial-gradient(circle at 90% 90%, #F37335 0%, transparent 70%),\n radial-gradient(circle at 10% 10%, #FDC830 0%, transparent 60%),\n radial-gradient(circle at 50% 50%, #FFB75E 0%, transparent 50%),\n radial-gradient(circle at 20% 80%, #FF8C00 0%, transparent 40%)\n ","backgroundBlendMode":"normal, normal, soft-light, screen"},"mesh-summer-dog":{"backgroundImage":"\n radial-gradient(circle at 100% 100%, #78ffd6 0%, transparent 60%),\n radial-gradient(circle at 0% 0%, #a8ff78 0%, transparent 60%),\n radial-gradient(circle at 50% 50%, #6DD5FA 0%, transparent 50%),\n radial-gradient(circle at 20% 90%, #11998e 0%, transparent 30%)\n ","backgroundBlendMode":"normal, normal, overlay, soft-light"},"mesh-purple-love":{"backgroundImage":"\n radial-gradient(circle at 90% 90%, #753a88 0%, transparent 70%),\n radial-gradient(circle at 10% 10%, #cc2b5e 0%, transparent 60%),\n radial-gradient(circle at 50% 50%, #8E44AD 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, #D2B4DE 0%, transparent 40%)\n ","backgroundBlendMode":"normal, normal, soft-light, screen"},"mesh-electric-violet":{"backgroundImage":"\n radial-gradient(circle at 100% 0%, #8E54E9 0%, transparent 70%),\n radial-gradient(circle at 0% 100%, #4776E6 0%, transparent 60%),\n radial-gradient(circle at 50% 50%, #9B59B6 0%, transparent 50%),\n radial-gradient(circle at 20% 20%, #5B86E5 0%, transparent 40%)\n ","backgroundBlendMode":"normal, normal, overlay, color-dodge"},"mesh-amin":{"backgroundImage":"\n radial-gradient(circle at 100% 100%, #4A00E0 0%, transparent 70%),\n radial-gradient(circle at 0% 0%, #8E2DE2 0%, transparent 60%),\n radial-gradient(circle at 50% 50%, #800080 0%, transparent 50%),\n radial-gradient(circle at 90% 10%, #4B0082 0%, transparent 40%)\n ","backgroundBlendMode":"normal, normal, soft-light, screen"},"mesh-titanium":{"backgroundImage":"\n radial-gradient(circle at 50% 100%, #859398 0%, transparent 80%),\n radial-gradient(circle at 50% 0%, #283048 0%, transparent 60%),\n radial-gradient(circle at 0% 50%, #485563 0%, transparent 50%),\n radial-gradient(circle at 100% 50%, #29323c 0%, transparent 50%)\n ","backgroundBlendMode":"normal, normal, overlay, soft-light"},"mesh-wiretap":{"backgroundImage":"\n radial-gradient(circle at 85% 80%, hsla(150, 36%, 88%, 1) 9%, transparent 55%),\n radial-gradient(circle at 60% 24%, hsla(219, 70%, 87%, 1) 5%, transparent 72%),\n radial-gradient(circle at 13% 82%, hsla(297, 70%, 76%, 0.49) 5%, transparent 52%),\n radial-gradient(circle at 24% 7%, hsla(182, 50%, 78%, 1) 13%, transparent 68%)\n ","backgroundBlendMode":"normal, normal, normal, normal"},"mesh-warm":{"backgroundImage":"\n radial-gradient(circle at 31% 78%, hsla(175, 58%, 78%, 1) 3%, transparent 75%),\n radial-gradient(circle at 88% 93%, hsla(101, 68%, 100%, 1) 3%, transparent 83%),\n radial-gradient(circle at 99% 8%, hsla(84, 62%, 87%, 1) 5%, transparent 67%),\n radial-gradient(circle at 41% 0%, hsla(36, 47%, 87%, 1) 8%, transparent 61%),\n radial-gradient(circle at 19% 59%, hsla(189, 44%, 92%, 1) 16%, transparent 88%)\n ","backgroundBlendMode":"normal"},"mesh-ocean":{"backgroundImage":"\n radial-gradient(circle at 11% 96%, hsla(181, 55%, 66%, 1) 37%, transparent 90%),\n radial-gradient(circle at 92% 89%, hsla(258, 70%, 75%, 1) 31%, transparent 84%),\n radial-gradient(circle at 58% 7%, hsla(202, 66%, 68%, 1) 41%, transparent 61%),\n radial-gradient(circle at 62% 35%, hsla(225, 53%, 66%, 1) 22%, transparent 59%),\n radial-gradient(circle at 2% 63%, hsla(218, 56%, 94%, 1) 19%, transparent 70%)\n ","backgroundBlendMode":"normal"}}; var MIN_SAMPLE_SIZE_PX = 48; var MAX_SAMPLE_SIDE_PX = 320; function clampUnit(value) { if (!isFinite(value)) return 0; return Math.max(0, Math.min(1, value)); } function clampByte(value) { return Math.min(255, Math.max(0, Math.round(value))); } function parseChannel(value) { var normalizedValue = String(value || '').trim(); if (normalizedValue.endsWith('%')) { return clampByte((parseFloat(normalizedValue) / 100) * 255); } return clampByte(parseFloat(normalizedValue)); } function parseAlpha(value) { if (value == null) return 1; var normalizedValue = String(value).trim(); if (normalizedValue.endsWith('%')) { return clampUnit(parseFloat(normalizedValue) / 100); } return clampUnit(parseFloat(normalizedValue)); } function normalizeHue(value) { var normalizedValue = value % 360; return normalizedValue < 0 ? normalizedValue + 360 : normalizedValue; } function hslToRgb(hue, saturation, lightness) { var chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation; var huePrime = hue / 60; var secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1)); var red = 0; var green = 0; var blue = 0; if (huePrime >= 0 && huePrime < 1) { red = chroma; green = secondComponent; } else if (huePrime >= 1 && huePrime < 2) { red = secondComponent; green = chroma; } else if (huePrime >= 2 && huePrime < 3) { green = chroma; blue = secondComponent; } else if (huePrime >= 3 && huePrime < 4) { green = secondComponent; blue = chroma; } else if (huePrime >= 4 && huePrime < 5) { red = secondComponent; blue = chroma; } else { red = chroma; blue = secondComponent; } var matchLightness = lightness - (chroma / 2); return { r: clampByte((red + matchLightness) * 255), g: clampByte((green + matchLightness) * 255), b: clampByte((blue + matchLightness) * 255) }; } function parseHexColor(color) { var hexValue = color.slice(1).trim(); if ([3, 4, 6, 8].indexOf(hexValue.length) === -1) { return null; } if (hexValue.length <= 4) { hexValue = hexValue.split('').map(function(char) { return char + char; }).join(''); } var red = parseInt(hexValue.slice(0, 2), 16); var green = parseInt(hexValue.slice(2, 4), 16); var blue = parseInt(hexValue.slice(4, 6), 16); var alpha = hexValue.length === 8 ? parseInt(hexValue.slice(6, 8), 16) / 255 : 1; if ([red, green, blue, alpha].some(function(value) { return Number.isNaN(value); })) { return null; } return { r: red, g: green, b: blue, a: clampUnit(alpha) }; } function parseCssColor(color) { if (!color) return null; var normalizedColor = String(color).trim(); if (!normalizedColor) return null; if (normalizedColor.startsWith('#')) { return parseHexColor(normalizedColor); } var rgbMatch = normalizedColor.match(/^rgba?(s*([^,]+)s*,s*([^,]+)s*,s*([^,]+)s*(?:,s*([^)]+))?)$/i); if (rgbMatch) { return { r: parseChannel(rgbMatch[1]), g: parseChannel(rgbMatch[2]), b: parseChannel(rgbMatch[3]), a: parseAlpha(rgbMatch[4]) }; } var hslMatch = normalizedColor.match(/^hsla?(s*([+-]?d*.?d+)(?:deg)?s*,s*([+-]?d*.?d+)%s*,s*([+-]?d*.?d+)%s*(?:,s*([^)]+))?)$/i); if (hslMatch) { var rgbColor = hslToRgb( normalizeHue(parseFloat(hslMatch[1])), clampUnit(parseFloat(hslMatch[2]) / 100), clampUnit(parseFloat(hslMatch[3]) / 100) ); return { r: rgbColor.r, g: rgbColor.g, b: rgbColor.b, a: parseAlpha(hslMatch[4]) }; } return null; } function stringifyColor(color) { if (!color) return ''; if (color.a >= 0.999) { return 'rgb(' + Math.round(color.r) + ', ' + Math.round(color.g) + ', ' + Math.round(color.b) + ')'; } return 'rgba(' + Math.round(color.r) + ', ' + Math.round(color.g) + ', ' + Math.round(color.b) + ', ' + Number(color.a.toFixed(4)) + ')'; } function normalizeSampleSize(viewportWidth, viewportHeight) { var safeViewportWidth = Math.max(1, Math.round(viewportWidth || 1)); var safeViewportHeight = Math.max(1, Math.round(viewportHeight || 1)); var dominantSide = Math.max(safeViewportWidth, safeViewportHeight); var scale = dominantSide > MAX_SAMPLE_SIDE_PX ? MAX_SAMPLE_SIDE_PX / dominantSide : 1; return { width: Math.max(MIN_SAMPLE_SIZE_PX, Math.round(safeViewportWidth * scale)), height: Math.max(MIN_SAMPLE_SIZE_PX, Math.round(safeViewportHeight * scale)) }; } function createSamplingCanvas(width, height) { if (typeof OffscreenCanvas !== 'undefined') { return new OffscreenCanvas(width, height); } var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; return canvas; } function get2dContext(canvas) { return canvas.getContext('2d', { willReadFrequently: true }); } function samplePixelColor(context, width) { var pixelData = context.getImageData(Math.max(0, Math.floor(width / 2)), 0, 1, 1).data; var alpha = pixelData[3] / 255; if (alpha >= 0.999) { return 'rgb(' + pixelData[0] + ', ' + pixelData[1] + ', ' + pixelData[2] + ')'; } return 'rgba(' + pixelData[0] + ', ' + pixelData[1] + ', ' + pixelData[2] + ', ' + Number(alpha.toFixed(4)) + ')'; } function splitTopLevelLayers(value) { var layers = []; var depth = 0; var start = 0; for (var index = 0; index < value.length; index += 1) { var char = value[index]; if (char === '(') { depth += 1; continue; } if (char === ')') { depth = Math.max(0, depth - 1); continue; } if (char === ',' && depth === 0) { layers.push(value.slice(start, index).trim()); start = index + 1; } } var finalLayer = value.slice(start).trim(); if (finalLayer) { layers.push(finalLayer); } return layers; } function getFarthestCornerRadius(centerX, centerY, width, height) { return Math.max( Math.hypot(centerX, centerY), Math.hypot(width - centerX, centerY), Math.hypot(centerX, height - centerY), Math.hypot(width - centerX, height - centerY) ); } function toTransparentColor(color) { var parsedColor = parseCssColor(color); if (!parsedColor) { return 'rgba(0, 0, 0, 0)'; } return 'rgba(' + parsedColor.r + ', ' + parsedColor.g + ', ' + parsedColor.b + ', 0)'; } function getTopEdgeFadeBackgroundImage(color) { if (!color) { return ''; } return 'linear-gradient(180deg, ' + color + ' 0px, ' + color + ' calc(env(safe-area-inset-top, 0px) + 6px), ' + toTransparentColor(color) + ' calc(env(safe-area-inset-top, 0px) + 84px))'; } function buildLinearGradientFillFromAngle(context, width, height, angle, stops) { var radians = (angle * Math.PI) / 180; var directionX = Math.sin(radians); var directionY = -Math.cos(radians); var halfWidth = width / 2; var halfHeight = height / 2; var extent = Math.min( directionX === 0 ? Number.POSITIVE_INFINITY : halfWidth / Math.abs(directionX), directionY === 0 ? Number.POSITIVE_INFINITY : halfHeight / Math.abs(directionY) ); var centerX = halfWidth; var centerY = halfHeight; var gradient = context.createLinearGradient( centerX - (directionX * extent), centerY - (directionY * extent), centerX + (directionX * extent), centerY + (directionY * extent) ); stops.forEach(function(stop) { gradient.addColorStop(Math.max(0, Math.min(1, (stop.position || 0) / 100)), stop.color); }); return gradient; } function buildRadialGradientFill(context, width, height, centerX, centerY, stops) { var radius = Math.max(1, getFarthestCornerRadius(centerX, centerY, width, height)); var gradient = context.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius); stops.forEach(function(stop) { gradient.addColorStop(Math.max(0, Math.min(1, (stop.position || 0) / 100)), stop.color); }); return gradient; } function parseRadialGradientLayer(layerValue) { var normalizedValue = layerValue.replace(/s+/g, ' ').trim(); var match = normalizedValue.match(/^radial-gradient(s*circle ats*([-d.]+)%s*([-d.]+)%,s*(.+?)s+([-d.]+)%,s*transparents+([-d.]+)%s*)$/i); if (!match) { return null; } return { x: Math.max(0, Math.min(100, parseFloat(match[1]))), y: Math.max(0, Math.min(100, parseFloat(match[2]))), color: match[3].trim(), start: Math.max(0, Math.min(100, parseFloat(match[4]))), end: Math.max(0, Math.min(100, parseFloat(match[5]))) }; } function buildMeshRadialGradientFill(context, width, height, layer) { var centerX = (Math.max(0, Math.min(100, layer.x)) / 100) * width; var centerY = (Math.max(0, Math.min(100, layer.y)) / 100) * height; var radius = Math.max(1, getFarthestCornerRadius(centerX, centerY, width, height)); var gradient = context.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius); var startPosition = Math.max(0, Math.min(1, (layer.start || 0) / 100)); var endPosition = Math.max(startPosition, Math.max(0, Math.min(1, (layer.end || 0) / 100))); var transparentColor = toTransparentColor(layer.color); gradient.addColorStop(0, layer.color); if (startPosition > 0) { gradient.addColorStop(startPosition, layer.color); } gradient.addColorStop(endPosition, transparentColor); if (endPosition < 1) { gradient.addColorStop(1, transparentColor); } return gradient; } function parseLinearGradientStop(stopValue) { var trimmedValue = stopValue.trim(); if (!trimmedValue) { return null; } var match = trimmedValue.match(/^(.*?)(?:s+([+-]?d*.?d+)%)?$/); if (!match) { return null; } return { color: match[1].trim(), position: match[2] === undefined ? undefined : Math.max(0, Math.min(1, parseFloat(match[2]) / 100)) }; } function normalizeLinearGradientStops(stops) { if (!stops.length) { return []; } var normalizedStops = stops.map(function(stop) { return { color: stop.color, position: stop.position }; }); if (normalizedStops[0].position === undefined) { normalizedStops[0].position = 0; } if (normalizedStops[normalizedStops.length - 1].position === undefined) { normalizedStops[normalizedStops.length - 1].position = 1; } var previousDefinedIndex = 0; for (var index = 1; index < normalizedStops.length; index += 1) { if (normalizedStops[index].position === undefined) { continue; } var previousPosition = normalizedStops[previousDefinedIndex].position || 0; var currentPosition = normalizedStops[index].position || previousPosition; var gap = index - previousDefinedIndex; if (gap > 1) { for (var gapIndex = 1; gapIndex < gap; gapIndex += 1) { var progress = gapIndex / gap; normalizedStops[previousDefinedIndex + gapIndex].position = previousPosition + ((currentPosition - previousPosition) * progress); } } previousDefinedIndex = index; } for (var trailingIndex = 0; trailingIndex < normalizedStops.length; trailingIndex += 1) { if (normalizedStops[trailingIndex].position !== undefined) { continue; } normalizedStops[trailingIndex].position = normalizedStops[trailingIndex - 1] && normalizedStops[trailingIndex - 1].position !== undefined ? normalizedStops[trailingIndex - 1].position : 0; } return normalizedStops; } function parseLinearGradientLayer(layerValue) { var normalizedValue = layerValue.replace(/s+/g, ' ').trim(); var match = normalizedValue.match(/^linear-gradient((.*))$/i); if (!match) { return null; } var argumentsList = splitTopLevelLayers(match[1]); if (!argumentsList.length) { return null; } var firstArgument = (argumentsList[0] || '').trim(); var hasExplicitDirection = firstArgument.indexOf('to ') === 0 || /[+-]?d*.?d+deg$/i.test(firstArgument); var stopArguments = hasExplicitDirection ? argumentsList.slice(1) : argumentsList; var parsedStops = normalizeLinearGradientStops( stopArguments .map(parseLinearGradientStop) .filter(Boolean) ); if (!parsedStops.length) { return null; } return { direction: hasExplicitDirection ? firstArgument : '180deg', stops: parsedStops }; } function getLinearGradientVector(direction) { var normalizedDirection = String(direction || '').trim().toLowerCase(); if (normalizedDirection.indexOf('to ') === 0) { var x = 0; var y = 0; normalizedDirection.slice(3).split(/s+/).forEach(function(part) { if (part === 'left') x -= 1; if (part === 'right') x += 1; if (part === 'top') y -= 1; if (part === 'bottom') y += 1; }); var magnitude = Math.hypot(x, y) || 1; return { x: x / magnitude, y: y / magnitude }; } var angleMatch = normalizedDirection.match(/([+-]?d*.?d+)deg/); var angle = angleMatch ? parseFloat(angleMatch[1]) : 180; var radians = (angle * Math.PI) / 180; return { x: Math.sin(radians), y: -Math.cos(radians) }; } function buildLinearGradientFillFromDirection(context, width, height, direction, stops) { var directionVector = getLinearGradientVector(direction); var halfWidth = width / 2; var halfHeight = height / 2; var extent = Math.min( directionVector.x === 0 ? Number.POSITIVE_INFINITY : halfWidth / Math.abs(directionVector.x), directionVector.y === 0 ? Number.POSITIVE_INFINITY : halfHeight / Math.abs(directionVector.y) ); var centerX = halfWidth; var centerY = halfHeight; var gradient = context.createLinearGradient( centerX - (directionVector.x * extent), centerY - (directionVector.y * extent), centerX + (directionVector.x * extent), centerY + (directionVector.y * extent) ); stops.forEach(function(stop) { gradient.addColorStop(Math.max(0, Math.min(1, stop.position != null ? stop.position : 0)), stop.color); }); return gradient; } function getCompositeOperation(blendMode) { var normalizedBlendMode = String(blendMode || '').trim().toLowerCase(); if (!normalizedBlendMode || normalizedBlendMode === 'normal') { return 'source-over'; } return normalizedBlendMode; } function getMeshTopEdgeTintColor(background) { var resolvedMeshConfig = background && background.meshConfig && Array.isArray(background.meshConfig.layers) ? background.meshConfig : (background && background.meshId ? bootstrapMeshGradientConfigs[background.meshId] : null); var presetStyle = background && background.meshId ? bootstrapMeshGradientPresetStyles[background.meshId] : null; if (!resolvedMeshConfig || !presetStyle) { return undefined; } var sampleSize = normalizeSampleSize(window.innerWidth, window.innerHeight); var canvas = createSamplingCanvas(sampleSize.width, sampleSize.height); var context = canvas ? get2dContext(canvas) : null; if (!context) { return resolvedMeshConfig.backgroundColor; } var sequence = splitTopLevelLayers(String(presetStyle.backgroundImage || '')); var blendModes = String(presetStyle.backgroundBlendMode || '').split(',').map(function(item) { return item.trim(); }).filter(Boolean); var sequenceItems = []; var radialLayerIndex = 0; sequence.forEach(function(sequenceValue) { var radialLayer = parseRadialGradientLayer(sequenceValue); if (radialLayer) { sequenceItems.push({ kind: 'radial', layer: Array.isArray(resolvedMeshConfig.layers) ? resolvedMeshConfig.layers[radialLayerIndex] || radialLayer : radialLayer }); radialLayerIndex += 1; return; } var linearGradientLayer = parseLinearGradientLayer(sequenceValue); if (linearGradientLayer) { sequenceItems.push({ kind: 'linear', layer: linearGradientLayer }); } }); context.clearRect(0, 0, sampleSize.width, sampleSize.height); context.globalCompositeOperation = 'source-over'; context.fillStyle = resolvedMeshConfig.backgroundColor; context.fillRect(0, 0, sampleSize.width, sampleSize.height); for (var sequenceIndex = sequenceItems.length - 1; sequenceIndex >= 0; sequenceIndex -= 1) { var sequenceItem = sequenceItems[sequenceIndex]; var fillStyle = null; if (sequenceItem.kind === 'radial') { fillStyle = buildMeshRadialGradientFill(context, sampleSize.width, sampleSize.height, sequenceItem.layer); } else if (sequenceItem.kind === 'linear') { fillStyle = buildLinearGradientFillFromDirection(context, sampleSize.width, sampleSize.height, sequenceItem.layer.direction, sequenceItem.layer.stops); } if (!fillStyle) { continue; } context.save(); context.globalCompositeOperation = getCompositeOperation(blendModes[sequenceIndex]); context.fillStyle = fillStyle; context.fillRect(0, 0, sampleSize.width, sampleSize.height); context.restore(); } return samplePixelColor(context, sampleSize.width) || resolvedMeshConfig.backgroundColor; } function getTopEdgeTintColor(background) { if (!background || background.type === 'none') { return undefined; } if (background.type === 'color') { return background.color; } if ( background.type === 'gradient' && background.gradient && Array.isArray(background.gradient.stops) && background.gradient.stops.length > 0 ) { var sortedStops = background.gradient.stops.slice().sort(function(left, right) { return (left.position || 0) - (right.position || 0); }); var sampleSize = normalizeSampleSize(window.innerWidth, window.innerHeight); var canvas = createSamplingCanvas(sampleSize.width, sampleSize.height); var context = canvas ? get2dContext(canvas) : null; if (!context) { return sortedStops[0] && sortedStops[0].color; } context.clearRect(0, 0, sampleSize.width, sampleSize.height); context.fillStyle = background.gradient.type === 'radial' ? buildRadialGradientFill(context, sampleSize.width, sampleSize.height, sampleSize.width / 2, sampleSize.height / 2, sortedStops) : buildLinearGradientFillFromAngle(context, sampleSize.width, sampleSize.height, background.gradient.angle != null ? background.gradient.angle : 90, sortedStops); context.fillRect(0, 0, sampleSize.width, sampleSize.height); return samplePixelColor(context, sampleSize.width) || (sortedStops[0] && sortedStops[0].color); } if (background.type === 'mesh') { return getMeshTopEdgeTintColor(background); } return undefined; } if (isDark) { docEl.classList.add('dark'); } else { docEl.classList.remove('dark'); } docEl.style.setProperty('--app-loading-background-color', defaultBackgroundColor); if (isInitialMyCardRoute) { try { var rawLandingCache = window.sessionStorage.getItem('zetcard:landing-cards:v2'); if (rawLandingCache) { var parsedLandingCache = JSON.parse(rawLandingCache); var cachedCards = Array.isArray(parsedLandingCache) ? parsedLandingCache : (parsedLandingCache && Array.isArray(parsedLandingCache.cards) ? parsedLandingCache.cards : []); var firstCachedCard = cachedCards[0]; var firstCachedBackground = firstCachedCard && firstCachedCard.pageBackground; if (firstCachedBackground) { var topEdgeTintColor = getTopEdgeTintColor(firstCachedBackground); if (topEdgeTintColor) { initialMyCardBackgroundColor = topEdgeTintColor; } } } } catch (error) {} var topEdgeFadeBackgroundImage = getTopEdgeFadeBackgroundImage(initialMyCardBackgroundColor); docEl.style.setProperty('--mycard-page-background-color', initialMyCardBackgroundColor); docEl.style.removeProperty('--mycard-page-background-image'); docEl.style.removeProperty('--mycard-page-background-size'); docEl.style.removeProperty('--mycard-page-background-position'); docEl.style.removeProperty('--mycard-page-background-repeat'); docEl.style.removeProperty('--mycard-page-background-blend-mode'); docEl.style.backgroundColor = initialMyCardBackgroundColor; docEl.style.backgroundImage = topEdgeFadeBackgroundImage; docEl.style.backgroundSize = topEdgeFadeBackgroundImage ? '100% 100%' : ''; docEl.style.backgroundPosition = topEdgeFadeBackgroundImage ? '0% 0%' : ''; docEl.style.backgroundRepeat = topEdgeFadeBackgroundImage ? 'no-repeat' : ''; docEl.style.backgroundBlendMode = topEdgeFadeBackgroundImage ? 'normal' : ''; return; } docEl.style.backgroundColor = defaultBackgroundColor; docEl.style.backgroundImage = ''; docEl.style.backgroundSize = ''; docEl.style.backgroundPosition = ''; docEl.style.backgroundRepeat = ''; docEl.style.backgroundBlendMode = ''; })();