/* INSBY.TECH v1 — shell: header/footer injection, language toggle, drawer, reveals, counters, hero feed, logo wall, module grid, case cards. — root resolves shared assets, path is the page's location inside its language tree. */ (function () { const html = document.documentElement; const lang = (html.lang || 'en').toLowerCase().startsWith('sr') ? 'sr' : 'en'; const root = html.getAttribute('data-root') || '.'; const path = html.getAttribute('data-path') || 'index.html'; const page = MF_BODY().getAttribute('data-page') || ''; const D = window.INSBY || {}; const T = (D.UI || {})[lang] || {}; const L = (v) => (v && typeof v === 'object' && !Array.isArray(v)) ? (v[lang] || v.en) : v; // root of the current language tree ('.' for en pages at v1/, 'sr' folder for sr) const langRoot = lang === 'sr' ? root + '/sr' : root; const R = (p) => langRoot + '/' + p; // same-language page const A = (p) => root + '/' + p; // shared asset const altHref = lang === 'sr' ? root + '/' + path : root + '/sr/' + path; /* ---------- header ---------- */ const NAV = T.nav || []; // mockup pages declare data-root on ; on Quest the header/footer are components already in the page. // On a Quest page WITHOUT the new header (old 2024 pages still published on insby.tech) do nothing at all. const MOCKUP = html.hasAttribute('data-root'); const ON_QUEST = !MOCKUP; if (ON_QUEST && !document.querySelector('.hdr')) return; const hdr = document.querySelector('.hdr') || document.createElement('header'); hdr.className = 'hdr'; if (!ON_QUEST) hdr.innerHTML = `

EN SR

${T.start}

${NAV.map(([k, l, h]) => `${l}`).join('')}

morffeus.com ${T.drawerExt}

${T.start} ${T.join} ${lang === 'en' ? 'Srpski' : 'English'}

`; if (!ON_QUEST) MF_BODY().prepend(hdr); const burger = hdr.querySelector('.burger'); if (burger) burger.addEventListener('click', () => { const open = html.classList.toggle('nav-open'); burger.setAttribute('aria-expanded', String(open)); }); // alternate link for SEO (mockup only — Quest switches language in place) if (!ON_QUEST) { const alt = document.createElement('link'); alt.rel = 'alternate'; alt.hreflang = lang === 'en' ? 'sr-Latn' : 'en'; alt.href = altHref; document.head.append(alt); } /* ---------- footer ---------- */ const ftr = document.createElement('footer'); ftr.className = 'ftr'; const year = new Date().getFullYear(); if (!ON_QUEST) ftr.innerHTML = `

${T.fBlurb}

${T.fCompany}

${T.fWhat}

${T.fWork}

${c.client}
${T.fAllWork}

${T.fMorffeus}

`; if (!ON_QUEST) MF_BODY().append(ftr); /* ---------- reveals ---------- */ const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const observe = (els) => { if (reduce || !('IntersectionObserver' in window)) { els.forEach(el => el.classList.add('in')); return; } const io = new IntersectionObserver((es) => es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }), { rootMargin: '0px 0px -8% 0px', threshold: 0.08 }); els.forEach(el => io.observe(el)); }; observe(document.querySelectorAll('.reveal')); /* ---------- viewport fallback (Quest hydration can swap the observed nodes) ---------- */ const inView = (el) => { const r = el.getBoundingClientRect(); return r.bottom > 0 && r.top < window.innerHeight * 0.96; }; const pendingCounters = []; let ticking = false; const tick = () => { ticking = false; document.querySelectorAll('.reveal:not(.in)').forEach(el => { if (inView(el)) el.classList.add('in'); }); for (let i = pendingCounters.length - 1; i >= 0; i--) { const c = pendingCounters[i]; if (inView(c.el)) { c.run(); pendingCounters.splice(i, 1); } } }; const requestTick = () => { if (!ticking) { ticking = true; requestAnimationFrame(tick); } }; if (!reduce) { window.addEventListener('scroll', requestTick, { passive: true }); window.addEventListener('resize', requestTick); window.addEventListener('load', requestTick); [0, 400, 1200, 2500, 5000].forEach(t => setTimeout(requestTick, t)); } /* ---------- counters ---------- */ const locale = lang === 'sr' ? 'sr-Latn' : 'en-US'; const fmt = (n, dec) => n.toLocaleString(locale, { minimumFractionDigits: dec, maximumFractionDigits: dec }); document.querySelectorAll('[data-count]').forEach(el => { const target = parseFloat(el.getAttribute('data-count')); const dec = (el.getAttribute('data-count').split('.')[1] || '').length; const suffix = el.getAttribute('data-suffix') || ''; const set = (v) => { el.textContent = fmt(v, dec) + suffix; }; set(target); if (reduce) return; const run = () => { const t0 = performance.now(), dur = 1400; const step = (t) => { const p = Math.min(1, (t - t0) / dur); const e = 1 - Math.pow(1 - p, 3); set(target * e); if (p < 1) requestAnimationFrame(step); }; requestAnimationFrame(step); }; let done = false; const once = () => { if (!done) { done = true; run(); } }; const io = new IntersectionObserver((es) => { if (es[0].isIntersecting) { once(); io.disconnect(); } }, { threshold: 0.2 }); io.observe(el); pendingCounters.push({ el, run: once }); }); /* ---------- hero feed ---------- */ const feed = document.querySelector('[data-feed]'); if (feed && D.FEED) { feed.innerHTML = ''; const pool = D.FEED.slice(); let i = Math.floor(Math.random() * pool.length); const pad = (n) => String(n).padStart(2, '0'); const row = () => { const [c, en, sr, m] = pool[i++ % pool.length]; const d = new Date(); const li = document.createElement('li'); const mod = D.MOD && D.MOD[m.toLowerCase()]; li.style.setProperty('--m', mod ? mod.color : '#ED181F'); li.innerHTML = `${pad(d.getHours())}:${pad(d.getMinutes())}${c} · ${lang === 'sr' ? sr : en}${m}`; return li; }; for (let k = 0; k < 6; k++) feed.append(row()); if (!reduce) setInterval(() => { feed.prepend(row()); while (feed.children.length > 8) feed.lastChild.remove(); }, 2600); } /* ---------- logo wall ---------- */ const wall = document.querySelector('[data-logos]'); if (wall && D.CLIENTS && !wall.children.length) { const cell = (c) => `

`; const h = D.CLIENTS.map(cell).join(''); wall.innerHTML = `

${h}${h}

`; } /* ---------- module grid ---------- */ document.querySelectorAll('[data-modules]').forEach(grid => { if (grid.children.length) return; grid.innerHTML = (D.MODULES || []).map(m => ` ${m.name}${L(m.role)} `).join('') + `${T.allModules}${T.allModulesSub}`; }); /* ---------- work cards ---------- */ document.querySelectorAll('[data-cases]').forEach(grid => { if (grid.children.length) { observe(grid.querySelectorAll('.reveal')); return; } const limit = parseInt(grid.getAttribute('data-cases') || '0', 10); const list = limit ? D.CASES.slice(0, limit) : D.CASES; grid.innerHTML = list.map((c, idx) => `

${c.since}

${c.client}

${L(c.sector)}

${L(c.short)}

${c.mods.map(s => { const m = D.MOD[s]; return `${m.name}`; }).join('')}

`).join(''); observe(grid.querySelectorAll('.reveal')); }); /* ---------- Quest: move real blocks into their slots ---------- */ if (ON_QUEST) { // Language block (rendered after the header) → the pill slot inside the header island const slot = document.querySelector('.lang-slot'); const langBlock = document.querySelector('[class*="Language_main"]'); if (slot && langBlock && !slot.contains(langBlock)) slot.append(langBlock); if (langBlock) langBlock.querySelectorAll('button').forEach(b => { const t = b.textContent.trim(); if (/^[a-z]{2}[_-]/i.test(t)) b.textContent = t.slice(0, 2).toUpperCase(); }); // Form blocks (rendered after their section) → the form slots inside the section islands, in order const slots = Array.from(document.querySelectorAll('.form-slot')); const forms = Array.from(document.querySelectorAll('form')).filter(f => !f.closest('.form-slot')); slots.forEach((s, i) => { if (forms[i]) s.append(forms[i]); }); } /* ---------- Quest: reveal the page once styles, fonts and slots are ready (the site root is hidden by Quest's head css) ---------- */ if (ON_QUEST) { const reveal = () => { if (html.classList.contains('mf-ready')) return; html.classList.add('no-anim'); // first batch of reveals appears without the entrance animation tick(); html.classList.add('mf-ready'); requestAnimationFrame(() => requestAnimationFrame(() => html.classList.remove('no-anim'))); }; const styled = () => !!document.querySelector('style[data-mf], link[data-mf]') && getComputedStyle(document.querySelector('.hdr') || html).position === 'sticky'; const t0 = performance.now(); let fontsAsked = false, fontsDone = !document.fonts; const wait = () => { // the faces are only requested once the Google Fonts sheet has applied — wait for that sheet, then load both faces explicitly // fonts.load()/check() answer "done" while the @font-face rules are not in the CSSOM yet — so wait until the faces exist, then load them if (!fontsAsked && document.fonts) { const faces = Array.from(document.fonts).filter(f => /Familjen Grotesk|IBM Plex Sans/.test(f.family)); if (faces.length) { fontsAsked = true; Promise.all(faces.map(f => f.load().catch(() => {}))).then(() => { fontsDone = true; }); } } if ((styled() && fontsDone) || performance.now() - t0 > 1500) reveal(); else requestAnimationFrame(wait); }; wait(); } /* ---------- external links ---------- */ document.querySelectorAll('a[href^="http"]').forEach(a => { if (!a.target) { a.target = '_blank'; a.rel = 'noopener'; } }); })(); (window.__mfq||[]).forEach(function(f){try{f()}catch(e){console.error(e)}});window.__mfq={push:function(f){f()}};

Something like this, for your business?