// pictograms.jsx — Positeam piktogram-rendszer. // Blueprint keret (1px + registration tickek), konkrét ábrázoló vonalrajz, tracked // uppercase felirat. Minden jelölés az adatbázisból vezetődik le; hoverben ott a // magyarázat és az adat-alap. Ahol az összetevőlista részleges, mentességet NEM // jelölünk — hiányos listából a hiány nem bizonyíték. const { useState: usePgState, useRef: usePgRef } = React; const PG_ART = { ferment: , liposome: , micron: , retort: , glass: , spray: , jar: , layers: , cluster: , scale: , drops: , leaf: , doc: , seal: , target: , sun: , mouth: , molecule: , siliconedrop: , barrel: , perfume: , foam: , chain: , wheat: , milk: , nano: , paint: , }; // Családszínek. Nem termékenként egy szín (attól csupa zold lett), hanem // jelentéscsoportonként — a világos bone háttérhez sötétített tónusokban. const PG_FAM_TONE = { tech: '#8A6D2E', route: '#2F6E5A', struct: '#4A5A7A', notif: '#3D6B3A', free: '#4E6B34', complex: '#7D4A75', synergy: '#8E5A2F', dose: '#56537A', }; // Fokmérő-szakaszok: alsó / középső / felső harmad külön színnel — innen jön a // sávfelirat színe is. const PG_STEPS = [ [0.4, '#8C8574'], [0.7, '#9A7A1E'], [1.01, '#3D6B3A'], ]; function pgStepTone(v) { for (let i = 0; i < PG_STEPS.length; i++) { if (v < PG_STEPS[i][0]) return PG_STEPS[i][1] } return PG_STEPS[PG_STEPS.length - 1][1]; } // Sávos fokozat — nem százalék, hanem elhelyezés a skálán. const PG_BANDS = [ [0.2, 'MINIMÁLIS'], [0.4, 'ALACSONY'], [0.6, 'KÖZEPES'], [0.8, 'JELENTŐS'], [1.01, 'KIEMELKEDŐ'], ]; function pgBand(v) { for (let i = 0; i < PG_BANDS.length; i++) { if (v < PG_BANDS[i][0]) return PG_BANDS[i][1] } return PG_BANDS[PG_BANDS.length - 1][1]; } function PgIcon({ art, size = 40, cross }) { return ( ); } // Fokmérő: három színszakasz + mutató. Nem állít, csak skálán elhelyez. function PgGauge({ value = 0.5, size = 40 }) { const val = Math.min(1, Math.max(0, value)); const cx = 16, cy = 21, r = 12; const pt = (t, rad) => [cx + Math.cos(Math.PI * (1 - t)) * rad, cy - Math.sin(Math.PI * (1 - t)) * rad]; const arc = (from, to, rad) => { const [x1, y1] = pt(from, rad), [x2, y2] = pt(to, rad); return `M${x1.toFixed(2)} ${y1.toFixed(2)}A${rad} ${rad} 0 0 1 ${x2.toFixed(2)} ${y2.toFixed(2)}`; }; const [nx, ny] = pt(val, r - 2.5); const segs = [[0, 0.32, PG_STEPS[0][1]], [0.34, 0.64, PG_STEPS[1][1]], [0.66, 1, PG_STEPS[2][1]]]; return ( ); } function Pictogram({ pg, size = 40 }) { const [box, setBox] = usePgState(null); const hostRef = usePgRef(null); const open = !!box; const tone = pg.gauge != null ? pgStepTone(pg.gauge) : (PG_FAM_TONE[pg.fam] || 'var(--gold-deep)'); // A kiemelt termék keretének `overflow:hidden`-je bármilyen belső popovert levág, // ezért a magyarázat portalon, fix pozicionálással kerül a body-ra. const place = () => { const el = hostRef.current; if (!el) return; const r = el.getBoundingClientRect(); const vw = window.innerWidth, vh = window.innerHeight; const w = Math.min(320, vw - 24); const est = 210; const below = vh - r.bottom > est || r.top < est; setBox({ left: Math.max(12, Math.min(r.left, vw - w - 12)), width: w, below, top: below ? Math.round(r.bottom + 8) : null, bottom: below ? null : Math.round(vh - r.top + 8), }); }; React.useEffect(() => { if (!open) return; const close = () => setBox(null); window.addEventListener('scroll', close, { passive: true, capture: true }); window.addEventListener('resize', close); return () => { window.removeEventListener('scroll', close, { capture: true }); window.removeEventListener('resize', close); }; }, [open]); const card = open && ReactDOM.createPortal(
{pg.title}

{pg.explain}

{pg.basis &&

{pg.basis}

}
, document.body ); return (
setBox(null)}> {card}
); } const PG_GROUPS = [ { id: 'g1', title: 'A FORMULA MÉRTÉKE', fams: ['complex', 'synergy'] }, { id: 'g2', title: 'AZ ELJÁRÁS ÉS A HASZNÁLAT', fams: ['tech', 'route', 'notif'] }, { id: 'g3', title: 'A FORMULA SZERKEZETE', fams: ['struct'] }, { id: 'g4', title: 'AMIT NEM TARTALMAZ', fams: ['free'] }, ]; function PictogramSet({ product, layout }) { const list = (window.PS_BUILD_PICTOGRAMS ? window.PS_BUILD_PICTOGRAMS(product && product.id) : []) || []; if (!list.length) return null; const groups = PG_GROUPS.map((g) => ({ g, items: list.filter((p) => g.fams.indexOf(p.fam) >= 0) })).filter((x) => x.items.length); return (
{groups.map(({ g, items }) => (

{g.title}

{items.map((pg) => )}
))}

＊ A grafikai jelölések tájékoztató jellegűek — mindegyik a termék összetevő-adatlapjából vezethető le. Vidd rá a kurzort a magyarázatért.

); } Object.assign(window, { Pictogram, PictogramSet, PgIcon, PgGauge, PG_ART, PG_FAM_TONE, PG_GROUPS, pgBand, pgStepTone });