/* ========================================================= Tappt — real brand icons (Simple Icons CDN) + catalogue White glyph on the brand-colour tile. Accurate marks. ========================================================= */ /* local full-bleed brand IMAGES (the complete app icon incl. its own background) — used FIRST, before tinted-tile glyphs, for marks we want pixel-exact. */ const BRAND_IMG = { snapchat: 'assets/brand/snapchat.png', }; /* official simple-icons brand paths (white glyph) — used FIRST so common brands never depend on the CDN (which intermittently 404s). Single-path, fill #fff. */ const BRAND_PATH = { linkedin: 'M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z', instagram: 'M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.9 5.9 0 0 0-2.13 1.38A5.9 5.9 0 0 0 .63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.79.72 1.46 1.38 2.13.67.66 1.34 1.07 2.13 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.9 5.9 0 0 0 2.13-1.38 5.9 5.9 0 0 0 1.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.9 5.9 0 0 0-1.38-2.13A5.9 5.9 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.41-10.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z', tiktok: 'M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z', x: 'M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.41l-5.8-7.58-6.64 7.58H.46l8.6-9.83L0 1.15h7.59l5.24 6.93 6.07-6.93zm-1.29 19.5h2.04L6.49 3.24H4.3L17.61 20.65z', youtube: 'M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.5A3.02 3.02 0 0 0 .5 6.19C0 8.08 0 12 0 12s0 3.92.5 5.81a3.02 3.02 0 0 0 2.12 2.14c1.88.5 9.38.5 9.38.5s7.5 0 9.38-.5a3.02 3.02 0 0 0 2.12-2.14C24 15.92 24 12 24 12s0-3.92-.5-5.81zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z', spotify: 'M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.5 17.3c-.21.35-.67.46-1.02.24-2.8-1.71-6.32-2.1-10.47-1.15a.74.74 0 1 1-.33-1.44c4.54-1.04 8.44-.59 11.57 1.33.36.22.47.68.25 1.02zm1.47-3.27a.93.93 0 0 1-1.27.3c-3.2-1.97-8.08-2.54-11.87-1.39a.93.93 0 1 1-.54-1.78c4.33-1.31 9.7-.68 13.38 1.59.43.27.57.84.3 1.28zm.13-3.4C15.78 8.32 9.4 8.12 5.7 9.24a1.11 1.11 0 1 1-.65-2.13c4.25-1.29 11.3-1.04 15.75 1.6a1.11 1.11 0 0 1-1.14 1.9z', whatsapp: 'M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51-.17-.01-.37-.01-.57-.01-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.22 3.08.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.08 1.76-.72 2.01-1.41.25-.69.25-1.28.17-1.41-.07-.13-.27-.2-.57-.35zM12.04 21.5h-.01a9.46 9.46 0 0 1-4.82-1.32l-.35-.21-3.58.94.96-3.49-.23-.36a9.45 9.45 0 0 1-1.45-5.04c0-5.22 4.25-9.47 9.48-9.47 2.53 0 4.91.99 6.7 2.78a9.42 9.42 0 0 1 2.77 6.7c0 5.22-4.25 9.47-9.47 9.47zm8.06-17.53A11.39 11.39 0 0 0 12.04 0C5.6 0 .36 5.24.36 11.68c0 2.06.54 4.07 1.56 5.85L.26 24l6.62-1.74a11.66 11.66 0 0 0 5.15 1.31h.01c6.44 0 11.68-5.24 11.68-11.68 0-3.12-1.22-6.05-3.42-8.25z', facebook: 'M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z', snapchat: 'M12 2.6C8.2 2.6 5.2 5.7 5.2 9.5c0 .9 .04 2 0 2.7-.04 .65-.5 .9-1 1.15-.5 .25-.5 .9 .05 1.1 .55 .2 1 .5 1 1.15l.05 1.9c.04 .85 .5 1.45 1.2 1.4 .6-.04 .95-.5 1.5-.1 .45 .35 .55 1.05 1.3 1.1 .65 .04 1.05-.45 1.65-.2 .3 .12 .5 .45 .8 .45s.5-.33 .8-.45c.6-.25 1-.24 1.65 .2 .75-.05 .85-.75 1.3-1.1 .55-.4 .9 .06 1.5 .1 .7 .05 1.16-.55 1.2-1.4l.05-1.9c0-.65 .45-.95 1-1.15 .55-.2 .55-.85 .05-1.1-.5-.25-.96-.5-1-1.15-.04-.7 0-1.8 0-2.7 0-3.8-3-6.9-6.8-6.9z', xbox: 'M4.102 21.033C6.211 22.881 8.977 24 12 24c3.026 0 5.789-1.119 7.902-2.967 1.877-1.912-4.316-8.709-7.902-11.417-3.582 2.708-9.779 9.505-7.898 11.417zm11.16-14.406c2.5 2.961 7.484 10.313 6.076 12.912C23.002 17.36 24 14.804 24 12.004c0-3.059-1.141-5.846-3.025-7.961 0 0-.048-.066-.153-.176-.299-.313-.949-.945-1.802-.945-.799 0-1.541.426-2.072.945-.371.363-.687.696-.687.696s.563.681 1.001 1.068zm-9.621-1.07s-.316-.332-.687-.696c-.531-.519-1.273-.945-2.072-.945-.853 0-1.503.632-1.802.945-.105.111-.153.176-.153.176C-.857 6.158 0 8.945 0 12.004c0 2.8.998 5.356 2.662 7.535-1.408-2.6 3.576-9.951 6.076-12.912.438-.387 1.001-1.068 1.001-1.068zM12 3.475c1.32 0 2.741.394 2.741.394S13.4 3.139 12 3.139c-1.4 0-2.741.73-2.741.73S10.68 3.475 12 3.475z', }; /* inline feather glyphs for the non-brand link types */ const INLINE = { website: , email: , phone: , custom: , }; /* slug = Simple Icons slug · ink = glyph colour (light bgs need dark ink) */ const PLATFORMS = [ // SOCIAL { id: 'instagram', label: 'Instagram', cat: 'Social', slug: 'instagram', bg: 'linear-gradient(135deg,#feda75,#fa7e1e 28%,#d62976 58%,#962fbf 80%,#4f5bd5)', base: 'instagram.com/', ph: '@handle' }, { id: 'snapchat', label: 'Snapchat', cat: 'Social', slug: 'snapchat', ink: 'white', bg: '#FFFC00', base: 'snapchat.com/add/', ph: '@handle' }, { id: 'facebook', label: 'Facebook', cat: 'Social', slug: 'facebook', bg: '#1877F2', base: 'facebook.com/', ph: 'username' }, { id: 'x', label: 'X', cat: 'Social', slug: 'x', bg: '#000', base: 'x.com/', ph: '@handle' }, { id: 'youtube', label: 'YouTube', cat: 'Social', slug: 'youtube', bg: '#FF0000', base: 'youtube.com/@', ph: 'channel' }, { id: 'tiktok', label: 'TikTok', cat: 'Social', slug: 'tiktok', bg: '#000', base: 'tiktok.com/@', ph: '@handle' }, { id: 'threads', label: 'Threads', cat: 'Social', slug: 'threads', bg: '#000', base: 'threads.net/@', ph: '@handle' }, { id: 'pinterest', label: 'Pinterest', cat: 'Social', slug: 'pinterest', bg: '#E60023', base: 'pinterest.com/', ph: 'username' }, // BUSINESS { id: 'linkedin', label: 'LinkedIn', cat: 'Business', slug: 'linkedin', bg: '#0A66C2', base: 'linkedin.com/in/', ph: 'username' }, { id: 'telegram', label: 'Telegram', cat: 'Business', slug: 'telegram', bg: '#26A5E4', base: 't.me/', ph: '@handle' }, { id: 'whatsapp', label: 'WhatsApp', cat: 'Business', slug: 'whatsapp', bg: '#25D366', base: 'wa.me/', ph: '+44…' }, { id: 'calendly', label: 'Calendly', cat: 'Business', slug: 'calendly', bg: '#006BFF', base: 'calendly.com/', ph: 'you' }, // MUSIC { id: 'applemusic', label: 'Apple Music', cat: 'Music', slug: 'applemusic', bg: 'linear-gradient(135deg,#fa4c5f,#fb3a55)', base: 'music.apple.com/', ph: 'artist' }, { id: 'spotify', label: 'Spotify', cat: 'Music', slug: 'spotify', bg: '#1DB954', base: 'open.spotify.com/', ph: 'artist' }, { id: 'soundcloud', label: 'SoundCloud', cat: 'Music', slug: 'soundcloud', bg: '#FF5500', base: 'soundcloud.com/', ph: 'you' }, { id: 'youtubemusic', label: 'YT Music', cat: 'Music', slug: 'youtubemusic', bg: '#FF0000', base: 'music.youtube.com/', ph: 'channel' }, { id: 'audiomack', label: 'Audiomack', cat: 'Music', slug: 'audiomack', ink: 'black', bg: 'linear-gradient(135deg,#ffa200,#ff7a00)', base: 'audiomack.com/', ph: 'you' }, // PAYMENT { id: 'paypal', label: 'PayPal', cat: 'Payment', slug: 'paypal', bg: '#003087', base: 'paypal.me/', ph: 'you' }, { id: 'venmo', label: 'Venmo', cat: 'Payment', slug: 'venmo', bg: '#3D95CE', base: 'venmo.com/', ph: '@handle' }, { id: 'cashapp', label: 'Cash App', cat: 'Payment', slug: 'cashapp', bg: '#00C244', base: 'cash.app/$', ph: 'tag' }, { id: 'zelle', label: 'Zelle', cat: 'Payment', slug: 'zelle', bg: '#6D1ED4', base: '', ph: 'email / phone' }, // ENTERTAINMENT { id: 'playstation', label: 'PlayStation', cat: 'Entertainment', slug: 'playstation', bg: '#0070D1', base: '', ph: 'PSN ID' }, { id: 'xbox', label: 'Xbox', cat: 'Entertainment', slug: 'xbox', bg: '#107C10', base: '', ph: 'Gamertag' }, { id: 'steam', label: 'Steam', cat: 'Entertainment', slug: 'steam', bg: '#1B2838', base: 'steamcommunity.com/id/', ph: 'you' }, { id: 'twitch', label: 'Twitch', cat: 'Entertainment', slug: 'twitch', bg: '#9146FF', base: 'twitch.tv/', ph: 'channel' }, { id: 'kick', label: 'Kick', cat: 'Entertainment', slug: 'kick', ink: 'black', bg: '#53FC18', base: 'kick.com/', ph: 'channel' }, // LIFESTYLE { id: 'discord', label: 'Discord', cat: 'Lifestyle', slug: 'discord', bg: '#5865F2', base: 'discord.gg/', ph: 'invite' }, { id: 'doordash', label: 'DoorDash', cat: 'Lifestyle', slug: 'doordash', bg: '#FF3008', base: '', ph: 'store link' }, { id: 'yelp', label: 'Yelp', cat: 'Lifestyle', slug: 'yelp', bg: '#FF1A1A', base: 'yelp.com/biz/', ph: 'business' }, // CONTACT / CUSTOM (inline glyphs) { id: 'email', label: 'Email', cat: 'Custom', slug: null, bg: '#1D6FE0', base: 'mailto:', ph: 'you@mail.com' }, { id: 'phone', label: 'Phone', cat: 'Custom', slug: null, bg: '#34C759', base: 'tel:', ph: '+44…' }, { id: 'website', label: 'Website', cat: 'Custom', slug: null, bg: '#0B0B0C', base: 'https://', ph: 'yoursite.com' }, { id: 'custom', label: 'Custom Link', cat: 'Custom', slug: null, bg: 'linear-gradient(135deg,#6B8299,#3a4f63)', base: 'https://', ph: 'anything' }, ]; const PLAT_CATS = ['Social', 'Business', 'Music', 'Payment', 'Entertainment', 'Lifestyle', 'Custom']; const platById = (id) => PLATFORMS.find((p) => p.id === id) || PLATFORMS.find((p) => p.id === 'custom'); /* Brand icon: coloured rounded tile + real white brand glyph. If the CDN glyph fails to load, fall back to the platform initial. */ function BrandIcon({ id, size = 44, radius }) { const p = platById(id); const r = radius != null ? radius : size / 2; const ink = p.ink || 'white'; const [tries, setTries] = React.useState(0); const failed = tries >= 3; // only give up after 3 transient CDN misses const brandPath = BRAND_PATH[p.id]; const brandImg = BRAND_IMG[p.id]; const src = `https://cdn.simpleicons.org/${p.slug}/${ink}` + (tries > 0 ? '?r=' + tries : ''); return ( {brandImg ? {p.label} : brandPath ? : (p.slug && !failed ? {p.label} setTimeout(() => setTries((t) => t + 1), 250 * (tries + 1))} style={{ width: size * 0.52, height: size * 0.52, objectFit: 'contain', gridArea: '1/1', margin: 'auto', display: 'block' }} /> : (p.slug ? {p.label.charAt(0)} : {INLINE[p.id] || INLINE.custom}))} ); } Object.assign(window, { PLATFORMS, PLAT_CATS, platById, BrandIcon });