(function(){ var MOON=''; var SUN=''; function saved(){ try{ return localStorage.getItem('ws_site_theme'); }catch(e){ return null; } } function sysDark(){ try{ return window.matchMedia('(prefers-color-scheme: dark)').matches; }catch(e){ return false; } } function isDark(){ return saved()==='dark'; } /* light-first: dark only when the visitor chooses it */ var tbtn=document.getElementById('wsThemeBtn'); function paint(){ if(!tbtn) return; var d=isDark(); tbtn.innerHTML=d?SUN:MOON; tbtn.setAttribute('title', d?'Light mode':'Dark mode'); } function apply(){ document.documentElement.setAttribute('data-ws-theme', isDark()?'dark':'light'); paint(); } if(tbtn) tbtn.addEventListener('click', function(){ var d=!isDark(); try{ localStorage.setItem('ws_site_theme', d?'dark':'light'); }catch(e){} apply(); }); apply(); var burger=document.getElementById('wsBurger'), links=document.getElementById('wsLinks'); if(burger && links){ burger.addEventListener('click', function(){ var open=links.classList.toggle('open'); burger.classList.toggle('x', open); }); links.querySelectorAll('a').forEach(function(a){ a.addEventListener('click', function(){ links.classList.remove('open'); burger.classList.remove('x'); }); }); } var DATA=[]; try{ var dEl=document.getElementById('wsTemplatesData'); if(dEl) DATA=JSON.parse(dEl.textContent)||[]; }catch(e){} function el(t,c){ var e=document.createElement(t); if(c) e.className=c; return e; } var ORIGIN=(window.location&&window.location.origin)?window.location.origin:''; var DW=1280; var SB_URL='https://loazugnpnbbinzccjpdy.supabase.co'; var SB_KEY='sb_publishable_WbNG2K6PIOsOCifEWx0qTQ_RFBQPBf9'; // per-template price overrides set by the studio owner in Settings -> Template pricing var PRICE_OVR={}; try{ PRICE_OVR=JSON.parse(localStorage.getItem('ws_tpl_prices')||'{}')||{}; }catch(e){ PRICE_OVR={}; } // starting price by kind + complexity, owner override wins function priceFor(t){ if(PRICE_OVR && PRICE_OVR[t.id]!=null && PRICE_OVR[t.id]!=='') return PRICE_OVR[t.id]; if(t.price) return t.price; return 29; // base of the $29-$129 range; set t.price on a template to raise it } // ---- owner-curated card order (drag to reorder) -------------------------- // The studio owner can drag template cards into any order; the order is an // array of template ids saved to ws_settings (shared to every visitor) and // cached in localStorage. Non-owners just see the curated order, read-only. var IS_OWNER=false; try{ IS_OWNER=localStorage.getItem('ws_owner')==='1'; }catch(e){} function bearer(){ try{ var s=JSON.parse(localStorage.getItem('ws_sb_session')||'null'); return (s&&s.access_token)||SB_KEY; }catch(e){ return SB_KEY; } } var ORDER=[]; try{ ORDER=JSON.parse(localStorage.getItem('ws_tpl_order')||'[]')||[]; }catch(e){ ORDER=[]; } function orderSave(ids){ ORDER=ids; try{ localStorage.setItem('ws_tpl_order', JSON.stringify(ids)); }catch(e){} try{ fetch(SB_URL+'/rest/v1/ws_settings', { method:'POST', headers:{ 'Content-Type':'application/json','apikey':SB_KEY,'Authorization':'Bearer '+bearer(),'Prefer':'resolution=merge-duplicates,return=minimal' }, body:JSON.stringify({ key:'tpl_order', value:JSON.stringify(ids), updated_at:new Date().toISOString() }) }).catch(function(){}); }catch(e){} } function defaultSort(a,b){ return ((b.featured?1:0)-(a.featured?1:0)) || (priceFor(b)-priceFor(a)); } function applyOrder(list){ if(!ORDER.length) return list; var pos={}; ORDER.forEach(function(id,i){ pos[id]=i; }); return list.slice().sort(function(a,b){ var pa=(pos[a.id]!=null)?pos[a.id]:1e6, pb=(pos[b.id]!=null)?pos[b.id]:1e6; return pa-pb; }); } function fullOrderIds(){ var all=DATA.slice().sort(defaultSort); all=applyOrder(all); return all.map(function(t){ return t.id; }); } function reorder(draggedId, targetId){ if(draggedId===targetId) return; var ids=fullOrderIds(); var from=ids.indexOf(draggedId); if(from<0) return; ids.splice(from,1); var ti=ids.indexOf(targetId); if(ti<0) ti=ids.length; ids.splice(ti,0,draggedId); orderSave(ids); render(); } // pull the shared order from Supabase on load (public read), then re-render try{ fetch(SB_URL+'/rest/v1/ws_settings?key=eq.tpl_order&select=value', { headers:{ 'apikey':SB_KEY,'Authorization':'Bearer '+SB_KEY } }).then(function(r){ return r.json(); }).then(function(rows){ var v=rows&&rows[0]&&rows[0].value; if(v){ var arr=(typeof v==='string')?JSON.parse(v):v; if(arr&&arr.length){ ORDER=arr; try{ localStorage.setItem('ws_tpl_order', JSON.stringify(arr)); }catch(e){} if(typeof render==='function') render(); } } }).catch(function(){}); }catch(e){} var filters={ kind:'all', q:'' }; var fWrap=document.getElementById('wsTplFilters'); // kind segmented control (left) var kindWrap=el('div','ws-tpl-seg'); [['all','All'],['website','Websites'],['landing','Landing pages']].forEach(function(k){ var b=el('button','ws-tpl-segbtn'+(filters.kind===k[0]?' active':'')); b.type='button'; b.textContent=k[1]; b.addEventListener('click', function(){ filters.kind=k[0]; page=1; Array.prototype.forEach.call(kindWrap.children,function(x){ x.classList.remove('active'); }); b.classList.add('active'); render(); }); kindWrap.appendChild(b); }); fWrap.appendChild(kindWrap); // Search box on the right (replaces the style/palette dropdowns; style still shows // in each template's detail panel). Matches name, industry, style, palette and more. var fRight=el('div','ws-tpl-filters-right'); var search=el('label','ws-tpl-search'); var sIco=el('span','ws-tpl-search-ico'); sIco.innerHTML=''; var sIn=el('input','ws-tpl-search-in'); sIn.type='search'; sIn.placeholder='Search templates'; sIn.setAttribute('aria-label','Search templates'); sIn.addEventListener('input', function(){ filters.q=sIn.value; page=1; render(); }); search.appendChild(sIco); search.appendChild(sIn); fRight.appendChild(search); fWrap.appendChild(fRight); var grid=document.getElementById('wsTplGrid'); var countEl=document.getElementById('wsTplCount'); var emptyEl=document.getElementById('wsTplEmpty'); function swatch(colors){ var w=el('span','ws-tpl-sw'); (colors||[]).slice(0,3).forEach(function(c){ var d=el('span','ws-tpl-sw-d'); d.style.background=c; w.appendChild(d); }); return w; } // Load card iframes as they enter view AND release them when they leave, so only a // small window of previews is ever live. Without this, scrolling the full catalog // leaves every template (incl. WebGL shaders) running forever, the memory leak. function frameLoaded(f){ var s=f.getAttribute('src'); return !!s && s!=='about:blank'; } var io = ('IntersectionObserver' in window) ? new IntersectionObserver(function(ents){ ents.forEach(function(e){ var f=e.target, ds=f.getAttribute('data-src'); if(e.isIntersecting){ if(ds && !frameLoaded(f)) f.src=ds; } else if(frameLoaded(f)){ // scrolled away: unload to stop its scripts and free the WebGL context / memory f.src='about:blank'; } }); }, { rootMargin:'350px 0px' }) : null; // live hover preview: render the full page scaled into the card, and glide it down on hover function wireLive(head, win, ifr){ var H=0, s=0; // Render the page at a fixed 1280x800 viewport and scale it to fill the card. // 800px is one screenful, so a 100vh hero shows in full (the card head is 16:10 // to match), instead of only the top strip. // translateZ(0) forces a GPU layer so iOS Safari composites the scaled iframe // (without it, scaled preview iframes can render blank on mobile). function fit(){ var w=win.clientWidth; if(!w) return; s=w/1280; ifr.style.width='1280px'; ifr.style.height='800px'; ifr.style.transform='scale('+s+') translateZ(0)'; ifr.style.transformOrigin='top left'; } ifr.addEventListener('load', function(){ var s=ifr.getAttribute('src'); if(!s||s==='about:blank') return; fit(); setTimeout(fit,140); }); if(io) io.observe(ifr); else { ifr.src=ifr.getAttribute('data-src'); } // no hover auto-scroll: the card shows a static top-of-page preview; clicking opens the full view } function matches(t){ if(filters.kind!=='all' && t.kind!==filters.kind) return false; var q=(filters.q||'').trim().toLowerCase(); if(q){ var hay=[t.name,t.industry,t.style,t.palette,t.useCase,t.mood,t.tone,t.purpose,t.businessType,t.audience,t.desc,t.id].join(' ').toLowerCase(); if(hay.indexOf(q)<0) return false; } return true; } function card(t){ var c=el('button','ws-tpl-card'); c.type='button'; var head=el('span','ws-tpl-card-head'); if(t.src){ head.classList.add('is-live'); var win=el('span','ws-tpl-livewin'); var ifr=document.createElement('iframe'); ifr.className='ws-tpl-liveframe'; ifr.setAttribute('scrolling','no'); ifr.setAttribute('tabindex','-1'); ifr.setAttribute('aria-hidden','true'); ifr.setAttribute('title',t.name+' preview'); ifr.setAttribute('data-src',ORIGIN+t.src); win.appendChild(ifr); head.appendChild(win); var cue=el('span','ws-tpl-livecue'); cue.textContent='Live view'; head.appendChild(cue); wireLive(head, win, ifr); } else { head.style.background='linear-gradient(135deg,'+((t.primaryColors&&t.primaryColors[0])||'#888')+','+((t.primaryColors&&t.primaryColors[1])||'#ccc')+')'; var pl=el('span','ws-tpl-soon'); pl.textContent='Preview soon'; head.appendChild(pl); } if(priceFor(t) >= 99){ var pb=el('span','ws-tpl-badge prem'); pb.textContent='Premium'; head.appendChild(pb); } else if(t.featured){ var fb=el('span','ws-tpl-badge'); fb.textContent='Featured'; head.appendChild(fb); } var kb=el('span','ws-tpl-kind'); kb.textContent=(t.kind==='landing'?'Landing page':'Website'); head.appendChild(kb); var idb=el('span','ws-tpl-id'); idb.textContent=(t.id||'').replace(/-v[\d.]+$/,''); head.appendChild(idb); c.appendChild(head); var body=el('span','ws-tpl-card-body'); var nm=el('span','ws-tpl-name'); nm.textContent=t.name; body.appendChild(nm); var meta=el('span','ws-tpl-cmeta'); meta.textContent=t.style+' \u00b7 '+t.industry; body.appendChild(meta); var foot=el('span','ws-tpl-cfoot'); foot.appendChild(swatch(t.primaryColors)); var price=el('span','ws-tpl-price'); price.textContent='from $'+priceFor(t); foot.appendChild(price); body.appendChild(foot); c.appendChild(body); c.addEventListener('click', function(){ openModal(t); }); if(IS_OWNER){ c.setAttribute('draggable','true'); c.classList.add('ws-tpl-draggable'); c.addEventListener('dragstart', function(e){ c.classList.add('ws-tpl-dragging'); try{ e.dataTransfer.setData('text/plain', t.id); e.dataTransfer.effectAllowed='move'; }catch(err){} }); c.addEventListener('dragend', function(){ c.classList.remove('ws-tpl-dragging'); Array.prototype.forEach.call(grid.children,function(x){ x.classList.remove('ws-tpl-dragover'); }); }); c.addEventListener('dragover', function(e){ e.preventDefault(); try{ e.dataTransfer.dropEffect='move'; }catch(err){} c.classList.add('ws-tpl-dragover'); }); c.addEventListener('dragleave', function(){ c.classList.remove('ws-tpl-dragover'); }); c.addEventListener('drop', function(e){ e.preventDefault(); c.classList.remove('ws-tpl-dragover'); var id=''; try{ id=e.dataTransfer.getData('text/plain'); }catch(err){} if(id) reorder(id, t.id); }); } return c; } var LIST=[], CURIDX=-1, curT=null, curFrame=null, curVar=0; var mNote=document.getElementById('wsTplPayNote'); var mVersions=document.getElementById('wsTplVersions'), mVerSeg=document.getElementById('wsTplVersionsSeg'), mVerName=document.getElementById('wsTplVersionsName'); function setVariant(i){ if(!curT || !curT.variants || !curT.variants[i]) return; curVar=i; if(mVerSeg) Array.prototype.forEach.call(mVerSeg.children, function(b,bi){ b.classList.toggle('is-on', bi===i); b.setAttribute('aria-pressed', bi===i?'true':'false'); }); if(mVerName) mVerName.textContent=curT.variants[i]; // reload the preview at this variant (the template reads #v=N on load), reliable across origins livePreview(curT); } // Paginate so the page isn't one endless scroll: show a batch, reveal more on demand. var PAGE_SIZE=12, page=1; var moreWrap=document.getElementById('wsTplMore'); function render(){ grid.innerHTML=''; var shown=DATA.filter(matches); // Psychology-led default order: lead with curated/featured designs for a strong // first impression, then highest price first so the top anchors value high and the // cheaper templates further down read as deals (price anchoring). The owner's // saved drag order, when present, overrides this. shown.sort(defaultSort); shown=applyOrder(shown); LIST=shown; countEl.textContent=shown.length+' template'+(shown.length===1?'':'s')+(IS_OWNER?' \u00b7 drag to reorder':''); emptyEl.hidden = shown.length>0; var lim=Math.min(shown.length, PAGE_SIZE*page); for(var i=0;i1){ var lb=el('button','ws-tpl-more is-less'); lb.type='button'; lb.textContent='Show less'; lb.addEventListener('click', function(){ page=1; render(); grid.scrollIntoView({behavior:'smooth',block:'start'}); }); moreWrap.appendChild(lb); } } } // ---- detail modal with live, lazy preview ---- var modal=document.getElementById('wsTplModal'); var mPrev=document.getElementById('wsTplPreview'); var mKind=document.getElementById('wsTplMKind'), mName=document.getElementById('wsTplMName'), mDesc=document.getElementById('wsTplMDesc'), mMeta=document.getElementById('wsTplMMeta'), mCta=document.getElementById('wsTplMCta'), mId=document.getElementById('wsTplMId'), mPrice=document.getElementById('wsTplMPrice'), mContact=document.getElementById('wsTplMContact'); function metaRow(k,v){ if(!v) return; var dt=el('dt'); dt.textContent=k; var dd=el('dd'); dd.textContent=v; mMeta.appendChild(dt); mMeta.appendChild(dd); } var mPrem=document.getElementById('wsTplMPrem'); // full-size, scrollable live site filling the stage function livePreview(t){ mPrev.innerHTML=''; if(!t.src){ var ph=el('div','ws-tpl-prev-ph'); ph.textContent='Live preview coming soon'; mPrev.appendChild(ph); return; } var ifr=document.createElement('iframe'); ifr.className='ws-tpl-stage-frame'; ifr.setAttribute('title',(t.name||'Template')+' preview'); ifr.setAttribute('scrolling','yes'); ifr.src=ORIGIN+t.src+((t.variants && curVar>0)?'#v='+curVar:''); curFrame=ifr; mPrev.appendChild(ifr); } // desktop / mobile viewport toggle var vpDesk=document.getElementById('wsTplVpDesk'), vpMob=document.getElementById('wsTplVpMob'); function setViewport(mob){ mPrev.classList.toggle('is-mobile', mob); if(vpDesk){ vpDesk.classList.toggle('is-on', !mob); vpDesk.setAttribute('aria-pressed', mob?'false':'true'); } if(vpMob){ vpMob.classList.toggle('is-on', mob); vpMob.setAttribute('aria-pressed', mob?'true':'false'); } } if(vpDesk) vpDesk.addEventListener('click', function(){ setViewport(false); }); if(vpMob) vpMob.addEventListener('click', function(){ setViewport(true); }); // prev / next template navigation (wraps within the current filtered list) var prevBtn=document.getElementById('wsTplPrev'), nextBtn=document.getElementById('wsTplNext'); function step(dir){ if(!LIST.length) return; var i=CURIDX; if(i<0){ i=0; } i=(i+dir+LIST.length)%LIST.length; openModal(LIST[i]); } if(prevBtn) prevBtn.addEventListener('click', function(){ step(-1); }); if(nextBtn) nextBtn.addEventListener('click', function(){ step(1); }); // "Buy this template" -> Stripe hosted checkout for this template's price. // Shared by the desktop side CTA and the mobile floating Buy button. var mobBuy=document.getElementById('wsTplMobBuy'), mobContact=document.getElementById('wsTplMobContact'); // POST a set of line items to Stripe checkout and redirect there. function startCheckout(items, onErr){ fetch('/api/checkout',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ items:items })}) .then(function(r){ return r.json().then(function(d){ return {ok:r.ok,d:d}; }); }) .then(function(res){ if(res.ok && res.d && res.d.url){ window.location.href=res.d.url; } else { onErr((res.d&&res.d.error)||'Could not start checkout. Try again.'); } }) .catch(function(){ onErr('Could not reach the payment server. Check your connection and try again.'); }); } function templateItem(){ var desc='Responsive '+(curT.kind==='landing'?'landing page':'website')+' template: the full code plus step-by-step instructions to add it to your own site. Yours to keep once paid in full.'; return { amount:priceFor(curT), label:(curT.name||'Template')+', website template ('+curT.id+')', description:desc }; } // Install is a one-time service (no interval). Hosting + Care plans are monthly. Adjust prices/copy here. var ADDON_INSTALL={ amount:79, label:'Template install, done for you', description:'We add your template to your site for you, configured and live, so there is no code to touch on your end.' }; var ADDON_HOST={ amount:29, label:'Hosting, we keep your site live', interval:'month', description:'We host and run your site: SSL, uptime monitoring and backups. Best if you are new to this, you never have to worry about a thing. Cancel anytime.' }; var ADDON_CARE={ care:{ amount:99, label:'Care plan', interval:'month', description:'Security & software updates, fixes, and small content changes.' }, careplus:{ amount:199, label:'Care Plus plan', interval:'month', description:'Everything in Care, plus design & content changes.' }, caremax:{ amount:349, label:'Care Max plan', interval:'month', description:'Everything in Care Plus, with more design time each month.' } }; // After Buy: ask about hosting + a Care plan, then send template + add-ons to one checkout. // Built with createElement (not innerHTML) to avoid quote-escaping issues in this inline script. function openAddonWizard(){ if(!curT) return; var existing=document.querySelector('.ws-addon'); if(existing) existing.parentNode.removeChild(existing); var tpl=priceFor(curT); function E(t,c,txt){ var e=document.createElement(t); if(c) e.className=c; if(txt!=null) e.textContent=txt; return e; } var wrap=E('div','ws-addon'); wrap.setAttribute('role','dialog'); wrap.setAttribute('aria-modal','true'); var card=E('div','ws-addon-card'); wrap.appendChild(card); var x=E('button','ws-addon-x','\u2715'); x.type='button'; x.setAttribute('aria-label','Close'); card.appendChild(x); card.appendChild(E('h2','ws-addon-h','Before you check out')); card.appendChild(E('p','ws-addon-sub','Buying the template gets you the full code and step-by-step instructions to add it to your site. Fitting that code into your own setup takes some knowledge of HTML, CSS and how a site is hosted. Not technical? Let us handle any part below.')); var line=E('div','ws-addon-line'); line.appendChild(E('span',null,(curT.name||'Template')+' template')); line.appendChild(E('b',null,'$'+tpl)); card.appendChild(line); // delivery: instructions only (free) vs done-for-you install (+$79 one-time) var delWrap=E('div','ws-addon-care'); delWrap.appendChild(E('span','ws-addon-carel','Getting it live')); var DEL_OPTS=[['diy','Send me the instructions','free','You get the code and a setup guide to add it to your site yourself'],['install','Install it for me','$79 once','We add the template to your site for you, configured and live, no code on your end']]; var delRadios=[]; DEL_OPTS.forEach(function(o,i){ var lab=E('label','ws-addon-radio'); var r=document.createElement('input'); r.type='radio'; r.name='wsAoDel'; r.value=o[0]; if(i===0) r.checked=true; delRadios.push(r); lab.appendChild(r); var sp=E('span'); sp.appendChild(E('b',null,o[1])); if(o[2]){ sp.appendChild(document.createTextNode(' ')); sp.appendChild(E('em',null,o[2])); } if(o[3]) sp.appendChild(E('small',null,o[3])); lab.appendChild(sp); delWrap.appendChild(lab); }); card.appendChild(delWrap); // hosting toggle var hostLabel=E('label','ws-addon-opt'); var hostCb=document.createElement('input'); hostCb.type='checkbox'; hostLabel.appendChild(hostCb); var ob=E('span','ws-addon-optbody'); var orow=E('span','ws-addon-optrow'); orow.appendChild(E('b',null,'Hosting')); orow.appendChild(E('em',null,'$29/mo')); ob.appendChild(orow); ob.appendChild(E('span','ws-addon-optd','We run your site so you never have to: SSL, uptime and backups. Best if you are new to this.')); hostLabel.appendChild(ob); card.appendChild(hostLabel); // maintenance / care plan radios var careWrap=E('div','ws-addon-care'); var cl=E('span','ws-addon-carel','Maintenance '); cl.appendChild(E('em',null,'optional')); careWrap.appendChild(cl); careWrap.appendChild(E('p','ws-addon-carenote','Change or cancel your plan anytime. You are never stuck in one, no lock-in and no commitment.')); var CARE_OPTS=[['','None','',''],['care','Care','$99/mo','Updates, fixes and small content changes'],['careplus','Care Plus','$199/mo','Plus design and content changes'],['caremax','Care Max','$349/mo','Plus more design time each month']]; var careRadios=[]; CARE_OPTS.forEach(function(o,i){ var lab=E('label','ws-addon-radio'); var r=document.createElement('input'); r.type='radio'; r.name='wsAoCare'; r.value=o[0]; if(i===0) r.checked=true; careRadios.push(r); lab.appendChild(r); var sp=E('span'); sp.appendChild(E('b',null,o[1])); if(o[2]){ sp.appendChild(document.createTextNode(' ')); sp.appendChild(E('em',null,o[2])); } if(o[3]) sp.appendChild(E('small',null,o[3])); lab.appendChild(sp); careWrap.appendChild(lab); }); card.appendChild(careWrap); var mHelp=E('p','ws-addon-warn'); mHelp.innerHTML=''; mHelp.appendChild(E('span',null,'You can make small text and image edits inside the template yourself. Bigger changes to layout or features will need a developer, which is what a Care plan covers.')); card.appendChild(mHelp); // Branding is scoped per client, so it is a conversation, not a fixed product: link to the contact form. var brandHref='/request?t='+encodeURIComponent(curT.id)+'&i=contact'; var brand=E('a','ws-addon-brandlink'); brand.href=brandHref; var bbody=E('span','ws-addon-optbody'); var brow=E('span','ws-addon-optrow'); brow.appendChild(E('b',null,'Customization and branding')); brow.appendChild(E('em',null,'from $89')); bbody.appendChild(brow); bbody.appendChild(E('span','ws-addon-optd','Every brand is different, so we scope this with you first. Tap to start the conversation.')); brand.appendChild(bbody); brand.appendChild(E('span','ws-addon-brandarrow','\u203a')); card.appendChild(brand); var sum=E('div','ws-addon-sum'); card.appendChild(sum); var note=E('div','ws-addon-note'); note.setAttribute('role','status'); card.appendChild(note); var goBtn=E('button','ws-addon-go','Continue to checkout'); goBtn.type='button'; card.appendChild(goBtn); // Append inside #websuite-app so the --ws-* color tokens (scoped there) resolve; // on document.body the card would render transparent. (document.getElementById('websuite-app')||document.body).appendChild(wrap); function selCare(){ for(var i=0;itpl||mo) ? 'Continue to checkout' : 'Continue with just the template'; } card.addEventListener('change', updateSum); updateSum(); function close(){ if(wrap.parentNode) wrap.parentNode.removeChild(wrap); } x.addEventListener('click', close); wrap.addEventListener('click', function(e){ if(e.target===wrap) close(); }); function go(btn){ if(btn.getAttribute('aria-busy')==='1') return; var old=btn.textContent; btn.setAttribute('aria-busy','1'); btn.textContent='Starting checkout\u2026'; note.textContent=''; startCheckout(buildItems(), function(msg){ btn.removeAttribute('aria-busy'); btn.textContent=old; note.textContent=msg; }); } goBtn.addEventListener('click', function(){ go(goBtn); }); } function doBuy(btn){ if(!curT || btn.getAttribute('aria-busy')==='1') return; openAddonWizard(); } if(mCta) mCta.addEventListener('click', function(e){ e.preventDefault(); doBuy(mCta); }); if(mobBuy) mobBuy.addEventListener('click', function(e){ e.preventDefault(); doBuy(mobBuy); }); function openModal(t){ CURIDX=LIST.indexOf(t); curT=t; curVar=0; if(mNote){ mNote.hidden=true; mNote.textContent=''; } // version switcher (only for templates that declare variants) if(mVersions){ if(t.variants && t.variants.length>1){ mVerSeg.innerHTML=''; t.variants.forEach(function(vn,vi){ var bb=el('button','ws-tpl-ver-btn'+(vi===0?' is-on':'')); bb.type='button'; bb.textContent='V'+(vi+1); bb.title=vn; bb.setAttribute('aria-pressed', vi===0?'true':'false'); bb.addEventListener('click', function(){ setVariant(vi); }); mVerSeg.appendChild(bb); }); if(mVerName) mVerName.textContent=t.variants[0]; mVersions.hidden=false; } else { mVersions.hidden=true; } } mKind.textContent=(t.kind==='landing'?'Landing page':'Website')+' \u00b7 '+t.style; mName.textContent=t.name; mDesc.textContent=t.desc||''; mMeta.innerHTML=''; if(mPrem) mPrem.hidden = priceFor(t) < 99; metaRow('Industry',t.industry); metaRow('Best for',t.useCase); metaRow('Mood',t.mood); metaRow('Tone',t.tone); metaRow('Palette',t.palette); metaRow('Animation',t.animation); metaRow('Purpose',t.purpose); mCta.href='/request?t='+encodeURIComponent(t.id); var contactHref='/request?t='+encodeURIComponent(t.id)+'&i=contact'; if(mContact) mContact.href=contactHref; if(mobContact) mobContact.href=contactHref; if(mPrice) mPrice.textContent='$'+priceFor(t); mId.textContent=t.id; var sscroll=document.querySelector('.ws-tpl-side-scroll'); if(sscroll) sscroll.scrollTop=0; setViewport(false); livePreview(t); modal.removeAttribute('hidden'); document.body.style.overflow='hidden'; } function closeModal(){ modal.setAttribute('hidden',''); document.body.style.overflow=''; mPrev.innerHTML=''; } modal.addEventListener('click', function(e){ if(e.target && e.target.closest && e.target.closest('[data-tplclose]')) closeModal(); }); document.addEventListener('keydown', function(e){ if(modal.hasAttribute('hidden')) return; if(e.key==='Escape') closeModal(); else if(e.key==='ArrowLeft') step(-1); else if(e.key==='ArrowRight') step(1); }); render(); // Deep link: /templates?t= opens that template's modal, used by the // per-template SEO landing pages so their Buy button lands on the right template. try{ var _dl=new URLSearchParams(location.search).get('t'); if(_dl){ var _dt=DATA.filter(function(x){ return x.id===_dl || (x.id||'').replace(/-v[\d.]+$/,'')===_dl; })[0]; if(_dt) openModal(_dt); } }catch(e){} // sync the studio's published price overrides so every visitor sees the same prices try{ fetch(SB_URL+'/rest/v1/ws_settings?key=eq.tpl_prices&select=value', { headers:{ 'apikey':SB_KEY,'Authorization':'Bearer '+SB_KEY } }).then(function(r){ return r.json(); }).then(function(rows){ var v=(rows&&rows[0]&&rows[0].value); if(!v) return; var o={}; try{ o=(typeof v==='string')?JSON.parse(v):v; }catch(e){ o={}; } if(o && typeof o==='object'){ PRICE_OVR=o; try{ localStorage.setItem('ws_tpl_prices', JSON.stringify(o)); }catch(e){} render(); } }).catch(function(){}); }catch(e){} })();

Pick a starting point.