{"id":2187,"date":"2025-08-27T16:41:57","date_gmt":"2025-08-27T13:41:57","guid":{"rendered":"https:\/\/www.gizir.com\/?page_id=2187"},"modified":"2026-02-20T08:23:27","modified_gmt":"2026-02-20T05:23:27","slug":"visualizer","status":"publish","type":"page","link":"https:\/\/www.gizir.com\/fr\/visualizer\/","title":{"rendered":"Visualiseur"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2187\" class=\"elementor elementor-2187\" data-elementor-settings=\"{&quot;element_pack_global_tooltip_width&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_padding&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true}}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-988de01 e-con-full e-flex e-con e-parent\" data-id=\"988de01\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-42b6c6a elementor-widget elementor-widget-html\" data-id=\"42b6c6a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- === Gizir \u2013 Brand Picker + Color Selector (desktop + mobile) === -->\n<style>\n\/* Genel yerle\u015fim *\/\ndiv#gfWrap { max-height: 100vh !important; }\ndiv#wrapper-navbar { z-index: 99999 !important; }\n\n\/* ==== Sahne (arka plan) ==== *\/\n.gf-wrap{position:relative; overflow:hidden; background:#f5f5f5;}\n.gf-stage{position:relative; aspect-ratio:16\/9;}\n.gf-stage .layer{\n  position:absolute; inset:0; width:100%; height:100%;\n  object-fit:cover; opacity:0; transition:opacity .45s ease; will-change:opacity;\n}\n.gf-stage .layer.active{opacity:1}\n\n\/* ==== Marka se\u00e7imi ==== *\/\n.brand-screen{position:absolute; inset:0; z-index:20; display:grid; grid-template-columns: repeat(5, 1fr);}\n.brand-tile{position:relative; overflow:hidden; cursor:pointer; isolation:isolate;}\n.brand-tile::before{content:\"\"; position:absolute; inset:0; background: var(--tile) center\/cover no-repeat; filter: saturate(.9); transition: transform .4s ease; z-index:0;}\n.brand-tile::after{content:\"\"; position:absolute; inset:0; background: rgba(0,0,0,.45); transition: background .25s ease; z-index:1;}\n.brand-tile:hover::before{ transform: scale(1.04); }\n.brand-tile:hover::after{ background: rgba(0,0,0,.3); }\n\n\/* Logo yerle\u015fimi *\/\n.brand-logo{ position:absolute; inset:auto 0 12%; display:grid; place-items:center; z-index:2; }\n.brand-logo img{ max-width: 60%; max-height: 56px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }\n\n@media (max-width:1100px){\n  .brand-screen{grid-template-columns: repeat(2,1fr);}\n  .brand-logo img{ max-width:65%; max-height:52px; }\n}\n@media (max-width:600px){\n  .brand-screen{grid-template-columns: 1fr;}\n  .brand-logo{ bottom:10%; }\n  .brand-logo img{ max-width:70%; max-height:48px; }\n}\n\n\/* ==== Renk se\u00e7ici ==== *\/\n.gf-tray{ position:relative; z-index:10; } \/* tray art\u0131k referans de\u011fil; panel fixed *\/\n.gf-toggle{\n  position:fixed; right:20px; bottom:20px; z-index:1001;\n  border:0; border-radius:10px; padding:10px 14px; cursor:pointer;\n  background:#111; color:#fff; font-size:14px; line-height:1; display:none;\n  box-shadow:0 10px 30px rgba(0,0,0,.2);\n}\n\n\/* Panel: masa\u00fcst\u00fcnde de fixed + NET y\u00fckseklik, g\u00f6vde scroll *\/\n.gf-panel{\n  position:fixed; right:20px; bottom:20px; z-index:1002;\n  width: min(520px, 95vw);\n  height: min(80vh, 820px);     \/* max-height yerine net height *\/\n  background:rgba(255,255,255,.92);\n  backdrop-filter:blur(8px);\n  border:1px solid rgba(0,0,0,.08);\n  border-radius:12px; padding:16px;\n  box-shadow:0 20px 50px rgba(0,0,0,.25);\n  display:flex; flex-direction:column;\n  overflow:hidden;               \/* i\u00e7 scroll i\u00e7in kap *\/\n}\n.gf-panel.closed{display:none;}\n\n.gf-title{\n  margin:0 0 10px;\n  font:600 15px\/1.2 system-ui,-apple-system,Segoe UI,sans-serif; color:#111;\n  display:flex; gap:10px; align-items:center; justify-content:space-between;\n  flex: 0 0 auto;\n}\n.gf-left{display:flex; gap:8px; align-items:center;}\n.gf-back{border:0; background:#eee; color:#111; border-radius:8px; padding:6px 10px; cursor:pointer;}\n.gf-close{background:none; border:0; font-size:22px; line-height:1; cursor:pointer; color:#444}\n.gf-sub{font:500 12px\/1.2 system-ui; color:#666; margin-left:4px}\n\n\/* Kayd\u0131r\u0131labilir g\u00f6vde *\/\n.gf-body{\n  flex: 1 1 auto;\n  min-height: 0;                 \/* kritik *\/\n  overflow-y: auto;\n  overscroll-behavior: contain;  \/* sayfa scroll\u2019una ta\u015fmas\u0131n *\/\n  -webkit-overflow-scrolling: touch;\n}\n\n\/* Grid *\/\n.gf-swatches{\n  display:grid;\n  grid-template-columns: repeat(3, minmax(0,1fr));\n  gap:10px;\n}\n.gf-swatch{\n  display:grid; grid-template-rows:auto auto; gap:6px; place-items:center;\n  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:10px; cursor:pointer;\n  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;\n}\n.gf-swatch:hover{transform:translateY(-1px)}\n.gf-swatch[aria-pressed=\"true\"]{box-shadow:0 0 0 2px #111 inset; border-color:#111}\n.gf-dot{width:58px; height:58px; border-radius:999px; border:1px solid #ddd; background-size:cover; background-position:center}\n.gf-label{font-size:12px; color:#444; letter-spacing:.02em}\n\n\/* Mobil bottom-sheet *\/\n@media (max-width:768px){\n  .gf-stage{aspect-ratio:4\/3;}\n  .gf-swatches{ grid-template-columns: repeat(3, 1fr); }\n\n  .gf-toggle{ right:12px; bottom:max(env(safe-area-inset-bottom),12px); }\n\n  .gf-panel{\n    left:50%; right:auto;\n    bottom:max(env(safe-area-inset-bottom),12px);\n    transform:translateX(-50%);\n    width:min(520px,94vw);\n    height: min(65vh, 680px);     \/* mobilde daha k\u0131sa *\/\n    border-radius:16px;\n    padding-bottom:max(env(safe-area-inset-bottom),16px);\n  }\n  .gf-title{ position:sticky; top:0; z-index:1; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); padding-top:6px; margin-top:-6px; }\n}\n<\/style>\n\n<div class=\"gf-wrap\" id=\"gfWrap\">\n  <!-- Arka plan sahnesi -->\n  <div class=\"gf-stage\" aria-hidden=\"true\">\n    <img class=\"layer active\" id=\"gfImgA\" alt=\"\">\n    <img class=\"layer\" id=\"gfImgB\" alt=\"\">\n  <\/div>\n\n  <!-- Marka Se\u00e7imi -->\n  <div class=\"brand-screen\" id=\"brandScreen\" aria-label=\"S\u00e9lectionnez la marque\"><\/div>\n\n  <!-- Renk Se\u00e7ici -->\n  <div class=\"gf-tray\" id=\"colorTray\" style=\"display:none\">\n    <button class=\"gf-toggle\" id=\"gfToggle\">S\u00e9lecteur de couleurs<\/button>\n    <div class=\"gf-panel\" id=\"gfPanel\" aria-label=\"Options de couleur\">\n      <div class=\"gf-title\">\n        <div class=\"gf-left\">\n          <button class=\"gf-back\" id=\"gfBack\" type=\"button\">\u2190 Marques<\/button>\n          <span id=\"gfBrandName\">\u2013<\/span>\n          <span class=\"gf-sub\" id=\"gfBrandSub\"><\/span>\n        <\/div>\n        <button class=\"gf-close\" id=\"gfClose\" aria-label=\"Fermer\">\u00d7<\/button>\n      <\/div>\n\n      <!-- Kayd\u0131r\u0131labilir g\u00f6vde -->\n      <div class=\"gf-body\">\n        <div class=\"gf-swatches\" id=\"gfSwatches\" role=\"tablist\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(()=> {\n\/* =================== BRANDS (3D Panel gizli) =================== *\/\nconst BRANDS = {\n  madera: {\n    label: \"Madera\",\n    logo:  \"https:\/\/www.gizir.com\/assets\/brand-logos\/madera.png\",\n    tile:  \"https:\/\/www.gizir.com\/assets\/brand-tiles\/madera.jpg\",\n    thumbsBase: \"https:\/\/www.gizir.com\/assets\/madera-renk\/\",\n    lifeBase:   \"https:\/\/www.gizir.com\/assets\/madera-lifestyle\/\",\n    thumbExt: \".png\", lifeExt:  \".jpg\",\n    items: [\n      { code:\"VM000\", thumb:\"vm000\", life:\"VM000\" },\n      { code:\"VM500\", thumb:\"vm500\", life:\"VM500\" },\n      { code:\"VM501\", thumb:\"vm501\", life:\"VM501\" },\n      { code:\"VM502\", thumb:\"vm502\", life:\"VM502\" },\n      { code:\"VM503\", thumb:\"vm503\", life:\"VM503\" },\n      { code:\"VM504\", thumb:\"vm504\", life:\"VM504\" },\n      { code:\"VM505\", thumb:\"vm505\", life:\"VM505\" },\n      { code:\"VM506\", thumb:\"vm506\", life:\"VM506\" },\n      { code:\"VM507\", thumb:\"vm507\", life:\"VM507\" }\n    ]\n  },\n  polylac: {\n    label: \"Polylac\",\n    logo:  \"https:\/\/www.gizir.com\/assets\/brand-logos\/polylac.png\",\n    tile:  \"https:\/\/www.gizir.com\/assets\/brand-tiles\/polylac.jpg\",\n    thumbsBase: \"https:\/\/www.gizir.com\/assets\/polylac-renk-v2\/\",\n    lifeBase:   \"https:\/\/www.gizir.com\/assets\/polylac-lifestyle-v2\/\",\n    thumbExt: \".png\", lifeExt:  \".jpg\",\n    items: [\"9513\",\"9523\",\"9407\",\"9436\",\"9527\",\"9528\",\"9545\",\"9440\"]\n  },\n  technomatt: {\n    label: \"Technomatt\",\n    logo:  \"https:\/\/www.gizir.com\/assets\/brand-logos\/technomatt.png\",\n    tile:  \"https:\/\/www.gizir.com\/assets\/brand-tiles\/technomatt.jpg\",\n    thumbsBase: \"https:\/\/www.gizir.com\/assets\/technomatt-renk-v2\/\",\n    lifeBase:   \"https:\/\/www.gizir.com\/assets\/technomatt-lifestyle-v2\/\",\n    thumbExt: \".png\", lifeExt:  \".jpg\",\n    items: [\"AF10\",\"AF11\",\"AF22\",\"AF25\",\"AF30\",\"AF34\",\"AF35\",\"AF36\",\"AF37\",\"AF38\",\"AF39\",\"AF41\",\"AF50\",\"AF51\",\"AF60\",\"AF70\"]\n  },\n  ecomatt: {\n    label: \"Ecomatt\",\n    logo:  \"https:\/\/www.gizir.com\/assets\/brand-logos\/ecomatt.png\",\n    tile:  \"https:\/\/www.gizir.com\/assets\/brand-tiles\/ecomatt.jpg\",\n    thumbsBase: \"https:\/\/www.gizir.com\/assets\/ecomatt-renk\/\",\n    lifeBase:   \"https:\/\/www.gizir.com\/assets\/ecomatt-lifestyle\/\",\n    thumbExt: \".png\", lifeExt:  \".jpg\",\n    items: [\"PT10\",\"PT26\",\"PT27\",\"PT34\",\"PT36\",\"PT38\",\"PT39\",\"PT40\"]\n  }\n};\n\n\/* Item hem string hem obje olabilir *\/\nfunction itemToNames(item){\n  if (typeof item === \"string\") return { code:item, thumb:item, life:item };\n  return {\n    code:  item.code || item.thumb || item.life,\n    thumb: item.thumb || item.code || item.life,\n    life:  item.life  || item.code || item.thumb\n  };\n}\n\n\/* Elemanlar *\/\nconst imgA   = document.getElementById('gfImgA');\nconst imgB   = document.getElementById('gfImgB');\nconst brandScreen = document.getElementById('brandScreen');\nconst tray  = document.getElementById('colorTray');\nconst panel = document.getElementById('gfPanel');\nconst toggle= document.getElementById('gfToggle');\nconst close = document.getElementById('gfClose');\nconst back  = document.getElementById('gfBack');\nconst list  = document.getElementById('gfSwatches');\nconst brandNameEl = document.getElementById('gfBrandName');\nconst brandSubEl  = document.getElementById('gfBrandSub');\n\nlet currentBrandKey = null;\nlet CONFIG = null;\nlet buttons = [];\nlet showingA = true;\n\nconst uThumb = (name)=> `${CONFIG.thumbsBase}${name}${CONFIG.thumbExt}`;\nconst uLife  = (name)=> `${CONFIG.lifeBase}${name}${CONFIG.lifeExt}`;\n\nfunction crossfadeTo(src){\n  const show = showingA ? imgB : imgA;\n  const hide = showingA ? imgA : imgB;\n  const pre = new Image(); pre.decoding='async'; pre.loading='eager'; pre.src = src;\n  pre.onload = ()=>{ show.src=src; show.classList.add('active'); hide.classList.remove('active'); showingA=!showingA; };\n  pre.onerror = ()=>{ const fb=src.replace(\/\\.jpg$\/i,'.jpeg'); const p2=new Image(); p2.src=fb;\n    p2.onload=()=>{ show.src=fb; show.classList.add('active'); hide.classList.remove('active'); showingA=!showingA; }; };\n}\n\nfunction setActive(btn, pushState=true){\n  buttons.forEach(b=>b.setAttribute('aria-pressed', b===btn?'true':'false'));\n  const name = btn.dataset.name; \/\/ life ad\u0131\n  crossfadeTo(uLife(name));\n  if (pushState){\n    const url = new URL(location.href);\n    url.searchParams.set('brand', currentBrandKey);\n    url.searchParams.set('style', name);\n    history.replaceState({}, '', url);\n  }\n}\n\nfunction preloadAll(){\n  CONFIG.items.forEach(it=>{\n    const names = itemToNames(it);\n    const src = uLife(names.life);\n    const link = document.createElement('link'); link.rel='preload'; link.as='image'; link.href=src; document.head.appendChild(link);\n    const im = new Image(); im.decoding='async'; im.loading='eager'; im.src = src;\n    im.onerror = ()=>{ new Image().src = src.replace(\/\\.jpg$\/i, '.jpeg'); };\n  });\n}\n\n\/* Marka karolar\u0131 *\/\nfunction renderBrandTiles(){\n  brandScreen.innerHTML = '';\n  Object.entries(BRANDS).forEach(([key, conf])=>{\n    const tile = document.createElement('button');\n    tile.type='button'; tile.className='brand-tile';\n    tile.style.setProperty('--tile', `url('${conf.tile}')`);\n    tile.setAttribute('aria-label', conf.label);\n\n    const logoWrap = document.createElement('span');\n    logoWrap.className = 'brand-logo';\n    logoWrap.innerHTML = `<img src=\"${conf.logo}\" alt=\"${conf.label} logo\" loading=\"lazy\" decoding=\"async\">`;\n\n    tile.appendChild(logoWrap);\n    tile.addEventListener('click', ()=> loadBrand(key));\n    brandScreen.appendChild(tile);\n  });\n}\n\n\/* Marka y\u00fckle *\/\nfunction loadBrand(key, initialStyle=null){\n  currentBrandKey = key;\n  CONFIG = BRANDS[key];\n\n  brandNameEl.textContent = CONFIG.label;\n  brandSubEl.textContent  = '';\n\n  list.innerHTML = '';\n  buttons = CONFIG.items.map((it, idx)=>{\n    const names = itemToNames(it);\n    const btn = document.createElement('button');\n    btn.type='button'; btn.className='gf-swatch'; btn.dataset.name=names.life;\n    btn.setAttribute('role','tab'); btn.setAttribute('aria-pressed', idx===0?'true':'false');\n\n    const dot = document.createElement('span'); dot.className='gf-dot';\n    dot.style.backgroundImage=`url('${uThumb(names.thumb)}')`;\n    const lab = document.createElement('span'); lab.className='gf-label'; lab.textContent=names.code;\n\n    btn.append(dot, lab); list.appendChild(btn);\n    btn.addEventListener('click', ()=> setActive(btn));\n    btn.addEventListener('keydown', e=>{\n      const i = buttons.indexOf(btn);\n      if (['ArrowRight','ArrowDown'].includes(e.key)){ e.preventDefault(); const n=buttons[(i+1)%buttons.length]; n.focus(); setActive(n); }\n      if (['ArrowLeft','ArrowUp'].includes(e.key)){ e.preventDefault(); const p=buttons[(i-1+buttons.length)%buttons.length]; p.focus(); setActive(p); }\n    });\n    return btn;\n  });\n\n  const startBtn = buttons.find(b=>b.dataset.name===initialStyle) || buttons[0];\n  const firstSrc = uLife(startBtn.dataset.name);\n  imgA.src = firstSrc; imgA.classList.add('active'); imgB.src = firstSrc;\n  showingA = true;\n\n  if ('requestIdleCallback' in window) requestIdleCallback(preloadAll, {timeout:1500});\n  else setTimeout(preloadAll, 600);\n\n  brandScreen.style.display = 'none';\n  tray.style.display = '';\n  panel.classList.remove('closed');\n  toggle.style.display = 'none';\n\n  const url = new URL(location.href);\n  url.searchParams.set('brand', key);\n  url.searchParams.set('style', startBtn.dataset.name);\n  history.replaceState({}, '', url);\n}\n\n\/* Geri\/Kapat *\/\nback.addEventListener('click', ()=>{\n  tray.style.display = 'none';\n  brandScreen.style.display = '';\n  const url = new URL(location.href);\n  url.searchParams.delete('brand'); url.searchParams.delete('style');\n  history.replaceState({}, '', url);\n});\nclose.addEventListener('click', ()=>{ panel.classList.add('closed'); toggle.style.display='inline-block'; });\ntoggle.addEventListener('click', ()=>{ panel.classList.remove('closed'); toggle.style.display='none'; });\n\n\/* Ba\u015flang\u0131\u00e7 *\/\nrenderBrandTiles();\nconst qs = new URLSearchParams(location.search);\nconst qBrand = qs.get('brand');\nconst qStyle = qs.get('style');\nif (qBrand && BRANDS[qBrand]) {\n  loadBrand(qBrand, qStyle);\n} else {\n  \/\/ opsiyonel: ba\u015flang\u0131\u00e7 g\u00f6rseli\n  \/\/ imgA.src='https:\/\/www.gizir.com\/assets\/brand-tiles\/hero.jpg'; imgA.classList.add('active'); imgB.src=imgA.src;\n}\n\n\/* (Opsiyonel) Fare tekeri paneldeyken sayfaya ta\u015fmas\u0131n *\/\ndocument.querySelector('.gf-body')?.addEventListener('wheel', (e)=>{ e.stopPropagation(); }, {passive:true});\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>S\u00e9lecteur de couleurs \u2190 Marques \u2013 \u00d7<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2187","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.gizir.com\/fr\/wp-json\/wp\/v2\/pages\/2187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gizir.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.gizir.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.gizir.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gizir.com\/fr\/wp-json\/wp\/v2\/comments?post=2187"}],"version-history":[{"count":45,"href":"https:\/\/www.gizir.com\/fr\/wp-json\/wp\/v2\/pages\/2187\/revisions"}],"predecessor-version":[{"id":4431,"href":"https:\/\/www.gizir.com\/fr\/wp-json\/wp\/v2\/pages\/2187\/revisions\/4431"}],"wp:attachment":[{"href":"https:\/\/www.gizir.com\/fr\/wp-json\/wp\/v2\/media?parent=2187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}