/* ========================================================== AI COMMUNITY LAB — COMPLETE CUSTOM JS V0.9C.3C + NATIVE GHL THEME BRIDGE V1.0 LOCKED - V0.8G Sidebar Branding - Nova Voice AI - V0.9A AI Team - V0.9B Resource Hub Architecture - V0.9C Resource Detail Modal NEW - V0.9C.1 Resource Hub Integrity Guard ========================================================== */ (function () { 'use strict'; /* ========================================================== CONFIG ========================================================== */ /* NATIVE GHL THEME BRIDGE V1.0 GHL Appearance is the colour source of truth. All JS-generated SmartSync360 UI consumes --cp-* theme tokens. Change the Community's native GHL colours; these components follow automatically. */ const NOVA_IMAGE = 'https://assets.cdn.filesafe.space/VTansPVRlZ6WTJoWOEXu/media/6abda0d1f88ee1436cc8569a.png'; const RESOURCE_ROUTE = 'Resource-Hub-6dXUR'; const WIDGET_ID = '6abd1df3d2e8beb1e421a515'; const WIDGET_LOADER = 'https://widgets.leadconnectorhq.com/loader.js'; const WIDGET_RESOURCES = 'https://widgets.leadconnectorhq.com/chat-widget/loader.js'; const NOVA_POSITION_KEY = 'ss360_nova_position_v07b'; const BRAND_ID = 'ss360-lab-sidebar-brand'; const NOVA_ID = 'ss360-nova'; const NOVA_WIDGET_HOST_ID = 'ss360-nova-widget-host'; const NOVA_WIDGET_SCRIPT_ID = 'ss360-nova-widget-loader'; const TEAM_TAB_ID = 'ss360-ai-team-tab'; const TEAM_MODAL_ID = 'ss360-ai-team-modal'; const RESOURCE_ID = 'ss360-resource-hub'; const RESOURCE_STYLE_ID = 'ss360-resource-hub-styles'; const RESOURCE_MODAL_ID = 'ss360-resource-detail-modal'; /* ========================================================== AI TEAM DATA ========================================================== */ const teamMembers = [ { name: 'Nova Ellison', role: 'Virtual COO', description: 'Your AI operations chief — helping coordinate people, systems and your SmartSync360 digital workforce.', image: NOVA_IMAGE, initials: 'NE', url: '' }, { name: 'Riley Carter', role: 'Lead Reactivation Specialist', description: 'Turns dormant opportunities into natural conversations and booked appointments.', image: '', initials: 'RC', url: '' }, { name: 'Callum', role: 'Prospect Intelligence', description: 'Finds evidence-based business opportunities and gives your sales team a genuine reason to start the conversation.', image: '', initials: 'C', url: '' }, { name: 'Suki', role: 'Social Media Director', description: 'Plans and creates branded social content designed to keep your business visible and consistent.', image: '', initials: 'S', url: '' } ]; /* ========================================================== RESOURCE HUB DATA ========================================================== */ const resources = [ { id: 'ai-tools', icon: '✦', category: 'AI & AUTOMATION', title: 'AI Tools', description: 'Explore useful AI and automation tools selected for practical business use.', detail: 'A curated collection of AI and automation tools designed to help small businesses save time, improve workflows and get more work done without adding unnecessary complexity.', button: 'Explore Tools', modalButton: 'Open Resource', url: '', secondaryLabel: 'Close', note: 'This is a V0.9C test resource. We will replace this with the real tool information and destination.' }, { id: 'marketing', icon: '📣', category: 'MARKETING', title: 'Marketing Resources', description: 'Templates, ideas and resources to help create and improve your marketing.', detail: 'Practical marketing resources for creating campaigns, improving messaging and maintaining a more consistent presence across your business channels.', button: 'View Resources', modalButton: 'View Marketing Resources', url: '', secondaryLabel: 'Close', note: 'This area can later contain templates, campaign resources, prompt packs and recommended marketing tools.' }, { id: 'sales', icon: '↗', category: 'SALES', title: 'Sales Resources', description: 'Practical resources designed to support prospecting, conversations and conversion.', detail: 'Resources designed to support the sales process from prospect discovery through outreach, conversations, follow-up and conversion.', button: 'View Resources', modalButton: 'View Sales Resources', url: '', secondaryLabel: 'Close', note: 'This could eventually include scripts, objection handling, outreach templates and SmartSync360 sales tools.' }, { id: 'business', icon: '▦', category: 'BUSINESS TOOLS', title: 'Business Toolkit', description: 'Useful tools, templates and references for running and growing your business.', detail: 'A practical collection of business tools, templates, checklists and references that members can use in their day-to-day operations.', button: 'Open Toolkit', modalButton: 'Open Business Toolkit', url: '', secondaryLabel: 'Close', note: 'The Resource Detail system can support external tools, downloads, guides, contacts and other resource types.' } ]; /* ========================================================== HELPERS ========================================================== */ function resourceRouteActive() { return window.location.pathname.indexOf( '/channels/' + RESOURCE_ROUTE ) !== -1; } function commonAncestor(a, b) { const ancestors = new Set(); let node = a; while (node) { ancestors.add(node); node = node.parentElement; } node = b; while (node) { if (ancestors.has(node)) return node; node = node.parentElement; } return null; } /* ========================================================== COMMUNITY BRANDING — NATIVE GHL LOGO SOURCE Independent fixed bottom-left presentation. GHL Community Branding is the source of truth. ========================================================== */ function communityBrandStorageKey() { const match = window.location.pathname.match(/\/communities\/groups\/([^/]+)/i); const community = match && match[1] ? match[1] : 'default'; return 'ss360_native_community_logo_' + community; } function nativeCommunityLogoSource() { const selectors = [ '#group-info-profile-card img[data-image-src]', '#group-info-profile-card img[src*="assetsdrm.clientclub.net/images/communities/"]', '[data-testid*="group-info-logo-overlay"] img' ]; for (const selector of selectors) { const image = document.querySelector(selector); if (!image) continue; const source = image.currentSrc || image.getAttribute('src') || image.src; if (source && !source.startsWith('data:')) { try { localStorage.setItem( communityBrandStorageKey(), source ); } catch (error) { /* localStorage unavailable — continue without cache */ } return source; } } try { return ( localStorage.getItem( communityBrandStorageKey() ) || '' ); } catch (error) { return ''; } } function ensureBrand() { let brand = document.getElementById(BRAND_ID); if (!brand) { brand = document.createElement('div'); brand.id = BRAND_ID; brand.style.cssText = ` position:fixed!important; display:none; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; left:16px!important; bottom:16px!important; width:270px!important; height:74px!important; padding:0!important; overflow:hidden!important; pointer-events:none!important; z-index:2147482000!important; `; const image = document.createElement('img'); image.alt = 'Community logo'; image.style.cssText = ` display:block!important; width:270px!important; height:270px!important; max-width:none!important; max-height:none!important; object-fit:contain!important; flex:0 0 auto!important; `; image.addEventListener('load', function () { brand.style.setProperty( 'display', 'flex', 'important' ); }); image.addEventListener('error', function () { brand.style.setProperty( 'display', 'none', 'important' ); }); brand.appendChild(image); document.body.appendChild(brand); } const image = brand.querySelector('img'); const source = nativeCommunityLogoSource(); if (!image || !source) { brand.style.setProperty( 'display', 'none', 'important' ); return brand; } if (image.src !== source) { brand.style.setProperty( 'display', 'none', 'important' ); image.src = source; } else if ( image.complete && image.naturalWidth > 0 ) { brand.style.setProperty( 'display', 'flex', 'important' ); } return brand; } function alignBrand() { const brand = ensureBrand(); brand.style.setProperty( 'left', '16px', 'important' ); brand.style.setProperty( 'bottom', '16px', 'important' ); brand.style.removeProperty('top'); } /* ========================================================== STYLES ========================================================== */ function installStyles() { if (document.getElementById(RESOURCE_STYLE_ID)) return; const style = document.createElement('style'); style.id = RESOURCE_STYLE_ID; style.textContent = ` #${TEAM_TAB_ID}{cursor:pointer!important;} #${TEAM_TAB_ID}.ss360-active{ color:var(--cp-brand-primary)!important; position:relative; } #${TEAM_TAB_ID}.ss360-active:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--cp-brand-primary); } .ss360-modal-backdrop{ position:fixed; inset:0; z-index:2147483400; display:flex; align-items:center; justify-content:center; padding:28px; box-sizing:border-box; background:rgba(15,23,42,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:ss360Fade .18s ease-out; } .ss360-modal-window{ position:relative; width:min(1050px,96vw); max-height:90vh; overflow:auto; background:var(--cp-brand-surface); border:1px solid var(--cp-primary-200); border-radius:20px; box-shadow:0 28px 80px rgba(0,0,0,.38); animation:ss360ModalIn .22s ease-out; } .ss360-modal-header{ position:relative; padding:28px 72px 26px 32px; background:linear-gradient(105deg,var(--cp-text-primary) 0%,var(--cp-primary-800) 58%,var(--cp-primary-700) 100%); border-radius:19px 19px 0 0; overflow:hidden; } .ss360-modal-header:after{ content:"✦"; position:absolute; right:60px; top:-42px; font-size:160px; line-height:1; color:rgba(94,234,212,.08); } .ss360-modal-kicker{ position:relative; z-index:1; margin-bottom:6px; color:var(--cp-primary-300)!important; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; } .ss360-modal-title{ position:relative; z-index:1; margin:0; color:var(--cp-text-on-primary)!important; font-size:29px; line-height:35px; font-weight:800; } .ss360-modal-subtitle{ position:relative; z-index:1; max-width:720px; margin:8px 0 0; color:var(--cp-primary-100)!important; font-size:14px; line-height:21px; } .ss360-modal-close{ position:absolute; z-index:5; right:20px; top:20px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(255,255,255,.10); color:var(--cp-text-on-primary)!important; font-size:24px; cursor:pointer; transition:.18s ease; } .ss360-modal-close:hover{ background:rgba(255,255,255,.20); transform:rotate(4deg) scale(1.05); } .ss360-team-body{padding:30px;} .ss360-team-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } .ss360-team-card{ display:flex; flex-direction:column; overflow:hidden; background:var(--cp-brand-background); border:1px solid var(--cp-brand-border); border-radius:16px; box-shadow:0 5px 16px rgba(15,23,42,.07); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; } .ss360-team-card:hover{ transform:translateY(-6px) scale(1.015); border-color:var(--cp-brand-primary); box-shadow:0 18px 34px color-mix(in srgb, var(--cp-brand-primary) 18%, transparent); } .ss360-team-photo{ height:210px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(145deg,var(--cp-brand-border),var(--cp-primary-50)); } .ss360-team-photo img{ width:100%; height:100%; object-fit:cover; } .ss360-team-initials{ width:92px; height:92px; display:flex; align-items:center; justify-content:center; border:3px solid var(--cp-primary-200); border-radius:50%; background:linear-gradient(135deg,var(--cp-text-primary),var(--cp-primary-700)); color:var(--cp-text-on-primary)!important; font-size:30px; font-weight:800; } .ss360-team-content{ display:flex; flex:1; flex-direction:column; padding:20px; } .ss360-team-name{ margin:0; color:var(--cp-text-primary)!important; font-size:18px; font-weight:800; } .ss360-team-role{ margin-top:5px; color:var(--cp-primary-700)!important; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; } .ss360-team-description{ flex:1; margin:13px 0 18px; color:var(--cp-text-secondary)!important; font-size:13px; line-height:19px; } #${RESOURCE_ID}{ width:100%; box-sizing:border-box; margin:0 0 28px; animation:ss360ResourceIn .22s ease-out; } .ss360-resource-shell{ overflow:hidden; background:var(--cp-brand-surface); border:1px solid var(--cp-primary-200); border-radius:16px; box-shadow:0 6px 22px rgba(15,23,42,.07); } .ss360-resource-hero{ position:relative; padding:28px 30px; overflow:hidden; background:linear-gradient(105deg,var(--cp-text-primary) 0%,var(--cp-primary-800) 58%,var(--cp-primary-700) 100%); } .ss360-resource-hero:after{ content:"✦"; position:absolute; right:30px; top:-38px; font-size:150px; color:rgba(94,234,212,.08); } .ss360-resource-kicker{ position:relative; z-index:1; display:block!important; margin-bottom:6px; color:var(--cp-primary-300)!important; font-size:11px!important; line-height:16px!important; font-weight:800!important; letter-spacing:1.5px!important; text-transform:uppercase!important; } .ss360-resource-title{ position:relative; z-index:1; display:block!important; margin:0!important; color:var(--cp-brand-background)!important; font-size:28px!important; line-height:34px!important; font-weight:800!important; } .ss360-resource-subtitle{ position:relative; z-index:1; display:block!important; max-width:650px; margin:8px 0 0!important; color:var(--cp-primary-100)!important; font-size:14px!important; line-height:21px!important; font-weight:400!important; } .ss360-resource-body{padding:26px;} .ss360-resource-section-title{ margin:0!important; color:var(--cp-text-primary)!important; font-size:20px!important; font-weight:800!important; } .ss360-resource-section-text{ margin:5px 0 18px!important; color:var(--cp-text-secondary)!important; font-size:13px!important; } .ss360-resource-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; } .ss360-resource-card{ display:flex!important; flex-direction:column!important; padding:20px!important; background:var(--cp-brand-background)!important; border:1px solid var(--cp-brand-border)!important; border-radius:14px!important; box-shadow:0 4px 14px rgba(15,23,42,.05)!important; cursor:pointer!important; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important; } .ss360-resource-card:hover{ transform:translateY(-5px); border-color:var(--cp-brand-primary)!important; box-shadow:0 16px 30px color-mix(in srgb, var(--cp-brand-primary) 15%, transparent)!important; } .ss360-resource-icon{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; border:1px solid var(--cp-primary-200); border-radius:12px; background:var(--cp-primary-50); color:var(--cp-primary-700)!important; font-size:22px; font-weight:800; transition:.22s ease; } .ss360-resource-card:hover .ss360-resource-icon{ transform:scale(1.07); background:var(--cp-primary-100); } .ss360-resource-category{ margin-bottom:5px; color:var(--cp-primary-700)!important; font-size:10px!important; font-weight:800!important; letter-spacing:.8px!important; } .ss360-resource-card-title{ margin:0!important; color:var(--cp-text-primary)!important; font-size:17px!important; line-height:22px!important; font-weight:800!important; } .ss360-resource-description{ flex:1; margin:9px 0 18px!important; color:var(--cp-text-secondary)!important; font-size:13px!important; line-height:19px!important; } .ss360-action{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; box-sizing:border-box; padding:10px 13px; border:1px solid var(--cp-brand-primary); border-radius:9px; background:var(--cp-primary-50); color:var(--cp-primary-700)!important; font-family:inherit; font-size:13px; font-weight:800; text-decoration:none; cursor:pointer; transition:.18s ease; } .ss360-action:hover{ background:var(--cp-brand-primary); color:var(--cp-brand-background)!important; } .ss360-resource-detail-body{ display:grid; grid-template-columns:180px minmax(0,1fr); gap:28px; padding:30px; } .ss360-detail-icon-panel{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:190px; padding:20px; box-sizing:border-box; background:var(--cp-primary-50); border:1px solid var(--cp-primary-200); border-radius:16px; } .ss360-detail-big-icon{ width:92px; height:92px; display:flex; align-items:center; justify-content:center; border-radius:20px; background:linear-gradient(135deg,var(--cp-text-primary),var(--cp-primary-700)); color:var(--cp-text-on-primary)!important; font-size:40px; font-weight:800; box-shadow:0 12px 24px color-mix(in srgb, var(--cp-brand-primary) 20%, transparent); } .ss360-detail-content{min-width:0;} .ss360-detail-category{ margin:0 0 6px; color:var(--cp-primary-700)!important; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; } .ss360-detail-heading{ margin:0; color:var(--cp-text-primary)!important; font-size:23px; line-height:29px; font-weight:800; } .ss360-detail-description{ margin:12px 0 0; color:var(--cp-text-secondary)!important; font-size:14px; line-height:22px; } .ss360-detail-note{ margin:20px 0 0; padding:14px 16px; background:var(--cp-brand-background); border:1px solid var(--cp-brand-border); border-left:4px solid var(--cp-brand-primary); border-radius:8px; color:var(--cp-text-secondary)!important; font-size:12px; line-height:18px; } .ss360-detail-actions{ display:flex; gap:10px; margin-top:22px; } .ss360-detail-primary, .ss360-detail-secondary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; box-sizing:border-box; min-height:42px; padding:10px 18px; border-radius:9px; font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; text-decoration:none; } .ss360-detail-primary{ border:1px solid var(--cp-brand-primary); background:var(--cp-brand-primary); color:var(--cp-brand-background)!important; } .ss360-detail-primary:hover{ background:var(--cp-primary-700); border-color:var(--cp-primary-700); } .ss360-detail-secondary{ border:1px solid var(--cp-brand-border); background:var(--cp-brand-background); color:var(--cp-text-secondary)!important; } .ss360-detail-secondary:hover{ border-color:var(--cp-brand-primary); color:var(--cp-primary-700)!important; } @keyframes ss360Fade{ from{opacity:0} to{opacity:1} } @keyframes ss360ModalIn{ from{opacity:0;transform:translateY(12px) scale(.985)} to{opacity:1;transform:translateY(0) scale(1)} } @keyframes ss360ResourceIn{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } @media(max-width:980px){ .ss360-team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:760px){ .ss360-resource-grid{ grid-template-columns:1fr!important; } .ss360-resource-detail-body{ grid-template-columns:1fr; } .ss360-detail-icon-panel{ min-height:140px; } } @media(max-width:600px){ .ss360-modal-backdrop{padding:12px;} .ss360-team-grid{ grid-template-columns:1fr; } .ss360-detail-actions{ flex-direction:column; } } `; document.head.appendChild(style); } /* ========================================================== AI TEAM TAB — V0.9A LOCKED ========================================================== */ function installTeamTab() { if (document.getElementById(TEAM_TAB_ID)) return; const desktop = document.querySelector('#group-tabs-desktop-container'); if (!desktop) return; const wrapper = desktop.querySelector('.tabs-wrapper.tabs-container') || desktop.querySelector('.tabs-wrapper'); if (!wrapper) return; const anchors = Array.from(wrapper.querySelectorAll(':scope > a')); const members = anchors.find(function (a) { return a.textContent.trim().toLowerCase() === 'members'; }); if (!members) return; const tab = members.cloneNode(true); tab.id = TEAM_TAB_ID; tab.removeAttribute('href'); tab.removeAttribute('aria-current'); tab.classList.remove( 'router-link-active', 'router-link-exact-active', 'text-on-sidebar', 'border-primary' ); tab.innerHTML = ''; tab.textContent = 'AI Team'; tab.setAttribute('role', 'button'); tab.setAttribute('tabindex', '0'); tab.addEventListener('click', function (event) { event.preventDefault(); event.stopPropagation(); openTeam(); }); tab.addEventListener('keydown', function (event) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); openTeam(); } }); wrapper.insertBefore(tab, members); } /* ========================================================== AI TEAM MODAL ========================================================== */ function closeTeam() { const modal = document.getElementById(TEAM_MODAL_ID); if (modal) modal.remove(); const tab = document.getElementById(TEAM_TAB_ID); if (tab) tab.classList.remove('ss360-active'); } function openTeam() { if (document.getElementById(TEAM_MODAL_ID)) return; const tab = document.getElementById(TEAM_TAB_ID); if (tab) tab.classList.add('ss360-active'); const backdrop = document.createElement('div'); backdrop.id = TEAM_MODAL_ID; backdrop.className = 'ss360-modal-backdrop'; const win = document.createElement('div'); win.className = 'ss360-modal-window'; const header = document.createElement('div'); header.className = 'ss360-modal-header'; header.innerHTML = ` `; const close = document.createElement('button'); close.className = 'ss360-modal-close'; close.type = 'button'; close.textContent = '×'; header.appendChild(close); const body = document.createElement('div'); body.className = 'ss360-team-body'; const grid = document.createElement('div'); grid.className = 'ss360-team-grid'; teamMembers.forEach(function (member) { const card = document.createElement('article'); card.className = 'ss360-team-card'; const photo = document.createElement('div'); photo.className = 'ss360-team-photo'; if (member.image) { const img = document.createElement('img'); img.src = member.image; img.alt = member.name; photo.appendChild(img); } else { const initials = document.createElement('div'); initials.className = 'ss360-team-initials'; initials.textContent = member.initials; photo.appendChild(initials); } const content = document.createElement('div'); content.className = 'ss360-team-content'; const name = document.createElement('h3'); name.className = 'ss360-team-name'; name.textContent = member.name; const role = document.createElement('div'); role.className = 'ss360-team-role'; role.textContent = member.role; const description = document.createElement('p'); description.className = 'ss360-team-description'; description.textContent = member.description; const action = document.createElement(member.url ? 'a' : 'button'); action.className = 'ss360-action'; if (member.url) { action.href = member.url; } else { action.type = 'button'; } action.innerHTML = 'Meet ' + member.name.split(' ')[0] + '→'; content.append(name, role, description, action); card.append(photo, content); grid.appendChild(card); }); body.appendChild(grid); win.append(header, body); backdrop.appendChild(win); document.body.appendChild(backdrop); close.addEventListener('click', closeTeam); backdrop.addEventListener('click', function (event) { if (event.target === backdrop) closeTeam(); }); } /* ========================================================== RESOURCE DETAIL MODAL — V0.9C LOCKED ========================================================== */ function closeResourceDetail() { const modal = document.getElementById(RESOURCE_MODAL_ID); if (modal) modal.remove(); } function openResourceDetail(resource) { closeResourceDetail(); const backdrop = document.createElement('div'); backdrop.id = RESOURCE_MODAL_ID; backdrop.className = 'ss360-modal-backdrop'; backdrop.setAttribute('role', 'dialog'); backdrop.setAttribute('aria-modal', 'true'); const win = document.createElement('div'); win.className = 'ss360-modal-window'; const header = document.createElement('div'); header.className = 'ss360-modal-header'; const kicker = document.createElement('div'); kicker.className = 'ss360-modal-kicker'; kicker.textContent = resource.category; const title = document.createElement('h2'); title.className = 'ss360-modal-title'; title.textContent = resource.title; const subtitle = document.createElement('p'); subtitle.className = 'ss360-modal-subtitle'; subtitle.textContent = 'SmartSync360 Resource Hub'; const close = document.createElement('button'); close.type = 'button'; close.className = 'ss360-modal-close'; close.textContent = '×'; close.setAttribute('aria-label', 'Close'); header.append(kicker, title, subtitle, close); const body = document.createElement('div'); body.className = 'ss360-resource-detail-body'; const iconPanel = document.createElement('div'); iconPanel.className = 'ss360-detail-icon-panel'; const bigIcon = document.createElement('div'); bigIcon.className = 'ss360-detail-big-icon'; bigIcon.textContent = resource.icon; iconPanel.appendChild(bigIcon); const content = document.createElement('div'); content.className = 'ss360-detail-content'; const category = document.createElement('div'); category.className = 'ss360-detail-category'; category.textContent = resource.category; const heading = document.createElement('h3'); heading.className = 'ss360-detail-heading'; heading.textContent = resource.title; const description = document.createElement('p'); description.className = 'ss360-detail-description'; description.textContent = resource.detail; content.append(category, heading, description); if (resource.note) { const note = document.createElement('div'); note.className = 'ss360-detail-note'; note.textContent = resource.note; content.appendChild(note); } const actions = document.createElement('div'); actions.className = 'ss360-detail-actions'; const primary = document.createElement(resource.url ? 'a' : 'button'); primary.className = 'ss360-detail-primary'; primary.textContent = resource.modalButton + ' →'; if (resource.url) { primary.href = resource.url; primary.target = '_blank'; primary.rel = 'noopener noreferrer'; } else { primary.type = 'button'; primary.addEventListener('click', function (event) { event.preventDefault(); }); } const secondary = document.createElement('button'); secondary.type = 'button'; secondary.className = 'ss360-detail-secondary'; secondary.textContent = resource.secondaryLabel || 'Close'; secondary.addEventListener( 'click', closeResourceDetail ); actions.append(primary, secondary); content.appendChild(actions); body.append(iconPanel, content); win.append(header, body); backdrop.appendChild(win); document.body.appendChild(backdrop); close.addEventListener( 'click', closeResourceDetail ); backdrop.addEventListener('click', function (event) { if (event.target === backdrop) { closeResourceDetail(); } }); close.focus(); } /* ========================================================== RESOURCE CARDS ========================================================== */ function buildResourceCard(resource) { const card = document.createElement('article'); card.className = 'ss360-resource-card'; card.dataset.resourceId = resource.id; card.setAttribute('tabindex', '0'); card.setAttribute('role', 'button'); const icon = document.createElement('div'); icon.className = 'ss360-resource-icon'; icon.textContent = resource.icon; const category = document.createElement('div'); category.className = 'ss360-resource-category'; category.textContent = resource.category; const title = document.createElement('h3'); title.className = 'ss360-resource-card-title'; title.textContent = resource.title; const description = document.createElement('p'); description.className = 'ss360-resource-description'; description.textContent = resource.description; const action = document.createElement('button'); action.type = 'button'; action.className = 'ss360-action'; action.innerHTML = '' + resource.button + '→'; function activate(event) { event.preventDefault(); event.stopPropagation(); openResourceDetail(resource); } card.addEventListener('click', activate); card.addEventListener('keydown', function (event) { if (event.key === 'Enter' || event.key === ' ') { activate(event); } }); action.addEventListener('click', activate); card.append( icon, category, title, description, action ); return card; } /* ========================================================== V0.9C.1 — RESOURCE HUB INTEGRITY GUARD ========================================================== */ function resourceHubIsHealthy(hub) { if (!hub) return false; const shell = hub.querySelector('.ss360-resource-shell'); const hero = hub.querySelector('.ss360-resource-hero'); const kicker = hub.querySelector('.ss360-resource-kicker'); const title = hub.querySelector('.ss360-resource-title'); const subtitle = hub.querySelector('.ss360-resource-subtitle'); const body = hub.querySelector('.ss360-resource-body'); const grid = hub.querySelector('.ss360-resource-grid'); const cards = hub.querySelectorAll('.ss360-resource-card'); if ( !shell || !hero || !kicker || !title || !subtitle || !body || !grid ) { return false; } if (cards.length !== resources.length) { return false; } if (kicker.textContent.trim() !== 'SmartSync360') { return false; } if (title.textContent.trim() !== 'Resource Hub') { return false; } if ( subtitle.textContent.trim() !== 'Tools, templates and practical resources to help you build, operate and grow your business.' ) { return false; } return true; } /* ========================================================== RESOURCE HUB — V0.9B + V0.9C.1 GUARD ========================================================== */ function mountResourceHub() { if (!resourceRouteActive()) { unmountResourceHub(); return; } const existing = document.getElementById(RESOURCE_ID); /* * IMPORTANT: * Existing is no longer enough. * * We verify that HighLevel/Vue has not partially * rewritten our custom Resource Hub. */ if (existing) { if (resourceHubIsHealthy(existing)) { hideNativeResourceContent(); return; } /* * Damaged custom Hub only. * Remove it and rebuild from our own data. */ existing.remove(); } const quick = document.querySelector('#post-editor-quick-input'); const feed = document.querySelector('#posts-regular-feed-section'); /* * HighLevel may temporarily remove these during a * Vue navigation redraw. * * Do nothing until both anchors exist again. * MutationObserver will retry automatically. */ if (!quick || !feed) return; const shared = commonAncestor(quick, feed); if ( !shared || shared === document.body || shared === document.documentElement ) return; let branch = quick; while ( branch.parentElement && branch.parentElement !== shared ) { branch = branch.parentElement; } if (branch.parentElement !== shared) return; const hub = document.createElement('section'); hub.id = RESOURCE_ID; const shell = document.createElement('div'); shell.className = 'ss360-resource-shell'; /* * HERO * * V0.9C.1 creates each important element explicitly. * We do not rely on HighLevel preserving a block of * innerHTML during navigation. */ const hero = document.createElement('div'); hero.className = 'ss360-resource-hero'; const kicker = document.createElement('div'); kicker.className = 'ss360-resource-kicker'; kicker.textContent = 'SmartSync360'; const heroTitle = document.createElement('h1'); heroTitle.className = 'ss360-resource-title'; heroTitle.textContent = 'Resource Hub'; const heroSubtitle = document.createElement('p'); heroSubtitle.className = 'ss360-resource-subtitle'; heroSubtitle.textContent = 'Tools, templates and practical resources to help you build, operate and grow your business.'; hero.append( kicker, heroTitle, heroSubtitle ); /* * BODY */ const body = document.createElement('div'); body.className = 'ss360-resource-body'; const sectionTitle = document.createElement('h2'); sectionTitle.className = 'ss360-resource-section-title'; sectionTitle.textContent = 'Explore Resources'; const sectionText = document.createElement('p'); sectionText.className = 'ss360-resource-section-text'; sectionText.textContent = 'Choose a resource area below to get started.'; const grid = document.createElement('div'); grid.className = 'ss360-resource-grid'; resources.forEach(function (resource) { grid.appendChild( buildResourceCard(resource) ); }); body.append( sectionTitle, sectionText, grid ); shell.append( hero, body ); hub.appendChild(shell); /* * SAME PROVEN V0.9B MOUNTING METHOD */ shared.insertBefore( hub, branch ); /* * Immediate integrity verification. */ if (!resourceHubIsHealthy(hub)) { hub.remove(); return; } hideNativeResourceContent(); } /* ========================================================== RESOURCE HUB ISOLATION ========================================================== */ function hideNativeResourceContent() { if (!resourceRouteActive()) return; [ document.querySelector('#post-editor-quick-input'), document.querySelector('#posts-regular-feed-section') ].forEach(function (element) { if (!element) return; element.dataset.ss360ResourceHidden = 'true'; element.style.setProperty( 'display', 'none', 'important' ); }); } function restoreNativeResourceContent() { document .querySelectorAll( '[data-ss360-resource-hidden="true"]' ) .forEach(function (element) { element.style.removeProperty('display'); delete element.dataset.ss360ResourceHidden; }); } function unmountResourceHub() { const hub = document.getElementById(RESOURCE_ID); if (hub) hub.remove(); closeResourceDetail(); restoreNativeResourceContent(); } /* ========================================================== NOVA POSITION ========================================================== */ function saveNovaPosition(element) { try { const rect = element.getBoundingClientRect(); localStorage.setItem( NOVA_POSITION_KEY, JSON.stringify({ left: rect.left, top: rect.top }) ); } catch (error) {} } function loadNovaPosition() { try { const value = localStorage.getItem(NOVA_POSITION_KEY); return value ? JSON.parse(value) : null; } catch (error) { return null; } } /* ========================================================== NOVA DRAG ========================================================== */ function makeNovaDraggable(element, handle) { let dragging = false; let moved = false; let startX = 0; let startY = 0; let startLeft = 0; let startTop = 0; handle.style.cursor = 'grab'; handle.style.userSelect = 'none'; handle.style.touchAction = 'none'; function start(event) { if ( event.target.closest( 'button,a,input,textarea' ) ) return; const point = event.touches ? event.touches[0] : event; const rect = element.getBoundingClientRect(); dragging = true; moved = false; startX = point.clientX; startY = point.clientY; startLeft = rect.left; startTop = rect.top; element.style.left = rect.left + 'px'; element.style.top = rect.top + 'px'; element.style.right = 'auto'; element.style.bottom = 'auto'; handle.style.cursor = 'grabbing'; if (!event.touches) event.preventDefault(); } function move(event) { if (!dragging) return; const point = event.touches ? event.touches[0] : event; const dx = point.clientX - startX; const dy = point.clientY - startY; if ( Math.abs(dx) > 5 || Math.abs(dy) > 5 ) moved = true; let left = startLeft + dx; let top = startTop + dy; left = Math.max( 8, Math.min( left, window.innerWidth - element.offsetWidth - 8 ) ); top = Math.max( 8, Math.min( top, window.innerHeight - element.offsetHeight - 8 ) ); element.style.left = left + 'px'; element.style.top = top + 'px'; if (event.touches) event.preventDefault(); } function end() { if (!dragging) return; dragging = false; handle.style.cursor = 'grab'; element.dataset.wasDragged = moved ? 'true' : 'false'; saveNovaPosition(element); setTimeout(function () { element.dataset.wasDragged = 'false'; }, 120); } handle.addEventListener('mousedown', start); document.addEventListener('mousemove', move); document.addEventListener('mouseup', end); handle.addEventListener( 'touchstart', start, { passive:false } ); document.addEventListener( 'touchmove', move, { passive:false } ); document.addEventListener('touchend', end); } /* ========================================================== NOVA INSTALL ========================================================== */ function installNova() { if (document.getElementById(NOVA_ID)) return; const nova = document.createElement('div'); nova.id = NOVA_ID; nova.style.cssText = ` position:fixed!important; left:32px; bottom:120px; z-index:2147483000!important; box-sizing:border-box!important; font-family:inherit!important; `; document.body.appendChild(nova); const saved = loadNovaPosition(); if ( saved && Number.isFinite(saved.left) && Number.isFinite(saved.top) ) { nova.style.left = saved.left + 'px'; nova.style.top = saved.top + 'px'; nova.style.bottom = 'auto'; nova.style.right = 'auto'; } renderNovaLauncher(); } /* ========================================================== NOVA LAUNCHER ========================================================== */ function renderNovaLauncher() { const nova = document.getElementById(NOVA_ID); if (!nova) return; nova.innerHTML = ''; nova.dataset.state = 'launcher'; nova.style.width = 'auto'; nova.style.background = 'transparent'; nova.style.border = 'none'; nova.style.boxShadow = 'none'; nova.style.overflow = 'visible'; const launcher = document.createElement('div'); launcher.style.cssText = ` display:flex!important; align-items:center!important; gap:10px!important; min-width:190px!important; padding:9px 13px!important; box-sizing:border-box!important; background:var(--cp-brand-background)!important; border:2px solid var(--cp-brand-primary)!important; border-radius:12px!important; box-shadow:0 6px 20px rgba(0,0,0,.22)!important; cursor:grab!important; `; const icon = document.createElement('div'); icon.textContent = '✦'; icon.style.cssText = ` display:flex!important; align-items:center!important; justify-content:center!important; width:36px!important; height:36px!important; border-radius:50%!important; background:var(--cp-brand-primary)!important; color:var(--cp-brand-background)!important; font-size:18px!important; font-weight:700!important; `; const text = document.createElement('div'); text.innerHTML = `

Ask Nova

Voice AI Assistant

`; launcher.append(icon, text); nova.appendChild(launcher); makeNovaDraggable(nova, launcher); launcher.addEventListener('click', function () { if (nova.dataset.wasDragged === 'true') return; renderNovaPanel(); }); } /* ========================================================== NOVA PANEL ========================================================== */ function renderNovaPanel() { const nova = document.getElementById(NOVA_ID); if (!nova) return; const rect = nova.getBoundingClientRect(); nova.innerHTML = ''; nova.dataset.state = 'panel'; nova.style.left = rect.left + 'px'; nova.style.top = rect.top + 'px'; nova.style.bottom = 'auto'; nova.style.right = 'auto'; nova.style.width = '350px'; nova.style.maxWidth = 'calc(100vw - 24px)'; nova.style.background = 'var(--cp-brand-background)'; nova.style.border = '1px solid var(--cp-brand-primary)'; nova.style.borderRadius = '16px'; nova.style.boxShadow = '0 14px 45px rgba(0,0,0,.30)'; nova.style.overflow = 'hidden'; const header = document.createElement('div'); header.style.cssText = ` display:flex!important; align-items:center!important; justify-content:space-between!important; padding:12px 14px!important; background:linear-gradient(90deg,var(--cp-text-primary),var(--cp-primary-700))!important; cursor:grab!important; `; const identity = document.createElement('div'); identity.innerHTML = `

✦ Nova

SmartSync360 Voice AI

`; const controls = document.createElement('div'); const minimise = document.createElement('button'); minimise.type = 'button'; minimise.textContent = '−'; const close = document.createElement('button'); close.type = 'button'; close.textContent = '×'; [minimise, close].forEach(function (button) { button.style.cssText = ` width:30px!important; height:30px!important; margin-left:6px!important; padding:0!important; border:1px solid rgba(255,255,255,.35)!important; border-radius:7px!important; background:rgba(255,255,255,.10)!important; color:var(--cp-text-on-primary)!important; font-size:19px!important; cursor:pointer!important; `; controls.appendChild(button); }); header.append(identity, controls); const host = document.createElement('div'); host.id = NOVA_WIDGET_HOST_ID; host.style.cssText = ` display:block!important; position:relative!important; width:100%!important; min-height:300px!important; background:var(--cp-brand-background)!important; `; nova.append(header, host); makeNovaDraggable(nova, header); minimise.addEventListener('click', function (event) { event.stopPropagation(); renderNovaLauncher(); }); close.addEventListener('click', function (event) { event.stopPropagation(); renderNovaLauncher(); }); loadNovaWidget(host); } /* ========================================================== NOVA WIDGET ========================================================== */ function loadNovaWidget(host) { const intro = document.createElement('div'); intro.id = 'ss360-nova-loading'; intro.style.cssText = ` display:flex!important; align-items:center!important; gap:12px!important; min-height:125px!important; padding:14px 16px!important; box-sizing:border-box!important; background:var(--cp-brand-background)!important; `; const image = document.createElement('img'); image.src = NOVA_IMAGE; image.alt = 'Nova'; image.style.cssText = ` width:92px!important; height:92px!important; object-fit:cover!important; border-radius:14px!important; border:2px solid var(--cp-primary-200)!important; `; const greeting = document.createElement('div'); greeting.innerHTML = `

Hi, I'm Nova.

Your SmartSync360 AI assistant.

`; intro.append(image, greeting); host.appendChild(intro); const old = document.getElementById(NOVA_WIDGET_SCRIPT_ID); if (old) old.remove(); const script = document.createElement('script'); script.id = NOVA_WIDGET_SCRIPT_ID; script.src = WIDGET_LOADER; script.setAttribute( 'data-resources-url', WIDGET_RESOURCES ); script.setAttribute( 'data-widget-id', WIDGET_ID ); host.appendChild(script); const observer = new MutationObserver(function () { const output = Array.from(host.children) .some(function (child) { return ( child.id !== 'ss360-nova-loading' && child.id !== NOVA_WIDGET_SCRIPT_ID ); }); if (output) { const loading = document.getElementById( 'ss360-nova-loading' ); if (loading) loading.remove(); observer.disconnect(); } }); observer.observe( host, { childList:true, subtree:true } ); } /* ========================================================== EVENTS — SMARTSYNC360 DATE TILES V0.5 ========================================================== */ function eventsPageActive() { return window.location.pathname.toLowerCase().indexOf('/events') !== -1; } function parseEventDateHeading(text) { const clean = String(text || '').trim().replace(/\s+/g, ' '); const match = clean.match(/^(Sun|Mon|Tue|Wed|Thu|Fri|Sat)\s+[A-Za-z]{3,9}\s+(\d{1,2})\s+\d{4}$/i); if (!match) return null; return { day: match[1].slice(0, 3).toUpperCase(), number: String(match[2]).padStart(2, '0') }; } function installEventDateTiles() { console.log('[SS360 EVENTS] 1 installEventDateTiles called', window.location.pathname); if (!eventsPageActive()) { console.log('[SS360 EVENTS] STOP: not events page'); return; } console.log('[SS360 EVENTS] 2 events page detected'); const panel = document.querySelector('.events-sidebar-panel'); if (!panel) { console.log('[SS360 EVENTS] STOP: .events-sidebar-panel not found'); return; } console.log('[SS360 EVENTS] 3 panel found', panel); const headings = Array.from(panel.querySelectorAll('p')); console.log('[SS360 EVENTS] 4 paragraph count', headings.length); headings.forEach(function (heading, index) { const raw = String(heading.textContent || '').trim().replace(/\s+/g, ' '); const parsed = parseEventDateHeading(heading.textContent); console.log('[SS360 EVENTS] P' + index, JSON.stringify(raw), 'parsed=', parsed); if (!parsed) return; const group = heading.parentElement; if (!group) { console.log('[SS360 EVENTS] STOP date matched but no parent', heading); return; } console.log('[SS360 EVENTS] 5 date matched', parsed, 'group=', group); const rows = Array.from(group.children).filter(function (child) { if (child === heading) return false; return child.matches('.event-title-btn') || !!child.querySelector('.event-title-btn'); }); console.log('[SS360 EVENTS] 6 rows found', rows.length, rows); if (!rows.length) return; group.classList.add('ss360-event-group'); heading.classList.add('ss360-event-native-date'); rows.forEach(function (row, rowIndex) { const eventButton = row.matches('.event-title-btn') ? row : row.querySelector('.event-title-btn'); console.log('[SS360 EVENTS] 7 event button row ' + rowIndex, eventButton); if (eventButton) { const nativeStripe = Array.from(eventButton.querySelectorAll('div')).find(function (element) { return element.getAttribute('style') && element.getAttribute('style').toLowerCase().indexOf('background-color') !== -1; }); console.log('[SS360 EVENTS] 8 native stripe', nativeStripe); if (nativeStripe) { nativeStripe.style.setProperty('background-color', 'var(--cp-brand-primary)', 'important'); } } if (row.querySelector(':scope > .ss360-event-date-tile')) { console.log('[SS360 EVENTS] tile already exists'); return; } const tile = document.createElement('div'); tile.className = 'ss360-event-date-tile'; tile.setAttribute('aria-hidden', 'true'); const number = document.createElement('span'); number.className = 'ss360-event-date-number'; number.textContent = parsed.number; const day = document.createElement('span'); day.className = 'ss360-event-date-day'; day.textContent = parsed.day; tile.append(number, day); row.insertBefore(tile, row.firstChild); console.log('[SS360 EVENTS] 9 TILE INSERTED', tile, 'into', row); }); }); } /* ========================================================== RESOURCE CARD INTERACTION REPAIR — V0.9C.2 ========================================================== */ function resourceFromCard(card) { if (!card) return null; const id = card.dataset.resourceId; if (!id) return null; return resources.find(function (resource) { return resource.id === id; }) || null; } document.addEventListener('click', function (event) { const card = event.target.closest('.ss360-resource-card'); if (!card || !resourceRouteActive()) return; const resource = resourceFromCard(card); if (!resource) return; event.preventDefault(); event.stopPropagation(); openResourceDetail(resource); }); document.addEventListener('keydown', function (event) { if (event.key !== 'Enter' && event.key !== ' ') return; const card = event.target.closest('.ss360-resource-card'); if (!card || !resourceRouteActive()) return; const resource = resourceFromCard(card); if (!resource) return; event.preventDefault(); event.stopPropagation(); openResourceDetail(resource); }); /* ========================================================== ESCAPE KEY ========================================================== */ document.addEventListener('keydown', function (event) { if (event.key !== 'Escape') return; if (document.getElementById(RESOURCE_MODAL_ID)) { closeResourceDetail(); return; } if (document.getElementById(TEAM_MODAL_ID)) { closeTeam(); } }); /* ========================================================== MASTER INSTALL ========================================================== */ function install() { installStyles(); ensureBrand(); alignBrand(); console.log('[SS360 EVENTS] MASTER install calling Events'); installEventDateTiles(); if (resourceRouteActive()) { mountResourceHub(); } else { unmountResourceHub(); } } /* ========================================================== INITIAL INSTALL ========================================================== */ install(); /* ========================================================== POSITION WATCHERS ========================================================== */ window.addEventListener('resize', alignBrand); window.addEventListener( 'scroll', alignBrand, true ); /* ========================================================== HIGHLEVEL / VUE WATCHER ========================================================== */ let queued = false; const observer = new MutationObserver(function () { if (queued) return; queued = true; setTimeout(function () { queued = false; install(); }, 250); }); observer.observe( document.body, { childList:true, subtree:true } ); })();

Meet Your AI Team

Testimonial for Ian Wallace Harper