{"id":45614,"date":"2025-11-03T10:35:46","date_gmt":"2025-11-03T07:35:46","guid":{"rendered":"https:\/\/agga.md\/?page_id=45614"},"modified":"2025-11-06T18:55:14","modified_gmt":"2025-11-06T15:55:14","slug":"agga-ai-stylist","status":"publish","type":"page","link":"https:\/\/agga.md\/ro\/agga-ai-stylist\/","title":{"rendered":"AGGA AI Stylist"},"content":{"rendered":"    <div id=\"agga-ai-stylist\" class=\"ai-stylist\" data-api=\"https:\/\/agga.md\/ro\/wp-json\/wc\/store\/v1\/products?category=195&#038;per_page=50\">\n      <div class=\"ai-topbar\">\n        <label>\u041f\u0440\u0435\u0434\u043c\u0435\u0442:&nbsp;\n          <select id=\"ai-item\">\n            <option value=\"jacket\">\u041f\u0438\u0434\u0436\u0430\u043a<\/option>\n            <option value=\"pants\">\u0411\u0440\u044e\u043a\u0438<\/option>\n            <option value=\"suit\">\u041a\u043e\u0441\u0442\u044e\u043c<\/option>\n          <\/select>\n        <\/label>\n      <\/div>\n\n      <div class=\"ai-stage\">\n        <img decoding=\"async\" id=\"ai-base\" src=\"https:\/\/agga.md\/wp-content\/uploads\/2025\/11\/vertical-shot-blonde-female-posing-elegant-white-pantsuit-scaled.jpg\" alt=\"\u041c\u043e\u0434\u0435\u043b\u044c\">\n        <!-- \u0421\u043b\u043e\u0439 \u0442\u043a\u0430\u043d\u0438 \u043d\u0430 \u0436\u0430\u043a\u0435\u0442\u0435 -->\n        <div id=\"ai-overlay-jacket\"\n             data-mask=\"https:\/\/agga.md\/wp-content\/uploads\/2025\/11\/zhaket1.png\"><\/div>\n        <!-- \u0421\u043b\u043e\u0439 \u0442\u043a\u0430\u043d\u0438 \u043d\u0430 \u0431\u0440\u044e\u043a\u0430\u0445 -->\n        <div id=\"ai-overlay-pants\"\n             data-mask=\"https:\/\/agga.md\/wp-content\/uploads\/2025\/11\/bryuki.png\"><\/div>\n      <\/div>\n\n      <div class=\"ai-controls\">\n        <button id=\"ai-prev\" type=\"button\">\u2190<\/button>\n        <div class=\"ai-swatch\">\n          <img id=\"ai-swatch-img\" alt=\"\u0422\u043a\u0430\u043d\u044c\">\n        <\/div>\n        <button id=\"ai-next\" type=\"button\">\u2192<\/button>\n      <\/div>\n\n      <div class=\"ai-meta\">\n        <a id=\"ai-title\" href=\"#\" target=\"_blank\" rel=\"nofollow noopener\">\u2014<\/a>\n      <\/div>\n    <\/div>\n\n    <style>\n      \/* \u0421\u0446\u0435\u043d\u0430 *\/\n      #agga-ai-stylist{max-width:520px;margin:0 auto;font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}\n      #agga-ai-stylist .ai-topbar{display:flex;justify-content:flex-end;margin:8px 0 6px}\n      #agga-ai-stylist .ai-stage{position:relative;width:100%;aspect-ratio:2\/3;border-radius:12px;overflow:hidden;background:#f7f7f9}\n      #agga-ai-stylist #ai-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}\n\n      \/* \u0414\u0432\u0430 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u043e\u0432\u0435\u0440\u043b\u0435\u044f \u0441 \u043c\u0430\u0441\u043a\u0430\u043c\u0438 *\/\n      #agga-ai-stylist #ai-overlay-jacket,\n      #agga-ai-stylist #ai-overlay-pants{\n        position:absolute; inset:0;\n        background-repeat:no-repeat; background-position:center; background-size:cover;\n        mix-blend-mode:multiply; opacity:1; pointer-events:none;\n        \/* CSS-\u043c\u0430\u0441\u043a\u0430 (\u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b) *\/\n        -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:100% 100%;\n        mask-repeat:no-repeat; mask-position:center; mask-size:100% 100%;\n      }\n\n      \/* \u041f\u0430\u043d\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0442\u043a\u0430\u043d\u0435\u0439 *\/\n      #agga-ai-stylist .ai-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}\n      #agga-ai-stylist button{background:#2e85f0;color:#fff;border:0;border-radius:8px;padding:8px 12px;font-weight:600;cursor:pointer}\n      #agga-ai-stylist button:hover{background:#1c6ed6}\n      #agga-ai-stylist .ai-swatch{width:96px;height:96px;border-radius:10px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.15)}\n      #agga-ai-stylist #ai-swatch-img{width:100%;height:100%;object-fit:cover}\n      #agga-ai-stylist .ai-meta{margin-top:8px;text-align:center}\n      #agga-ai-stylist .ai-meta a{color:#2e85f0;text-decoration:none;font-weight:600}\n    <\/style>\n\n    <script>\n    (function(){\n      const root   = document.getElementById('agga-ai-stylist');\n      const apiUrl = root.dataset.api;\n\n      const itemSel = document.getElementById('ai-item');\n      const base    = document.getElementById('ai-base');\n      const jacket  = document.getElementById('ai-overlay-jacket');\n      const pants   = document.getElementById('ai-overlay-pants');\n\n      const prevBtn = document.getElementById('ai-prev');\n      const nextBtn = document.getElementById('ai-next');\n      const swatch  = document.getElementById('ai-swatch-img');\n      const titleEl = document.getElementById('ai-title');\n\n      \/\/ \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043c\u0430\u0441\u043a\u0438 \u0438\u0437 data-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432\n      const jacketMask = jacket.getAttribute('data-mask');\n      const pantsMask  = pants.getAttribute('data-mask');\n\n      \/\/ mask-image + fallback \u0447\u0435\u0440\u0435\u0437 background-clip \u043d\u0430 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u2014\n      \/\/ \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0439 \u043c\u0430\u0441\u043a\u0438. \u041d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0434\u0432\u043e\u0439\u043d\u0443\u044e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443.\n      function applyMask(el, maskUrl){\n        el.style.webkitMaskImage = `url('${maskUrl}')`;\n        el.style.maskImage       = `url('${maskUrl}')`;\n      }\n      applyMask(jacket, jacketMask);\n      applyMask(pants,  pantsMask);\n\n      \/\/ \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0441\u043b\u043e\u0451\u0432 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u044b\u0431\u043e\u0440\u0430\n      function updateVisible(){\n        const val = itemSel.value;\n        jacket.style.display = (val === 'jacket' || val === 'suit') ? 'block' : 'none';\n        pants .style.display = (val === 'pants'  || val === 'suit') ? 'block' : 'none';\n      }\n      itemSel.addEventListener('change', updateVisible);\n      updateVisible();\n\n      \/\/ \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0442\u043a\u0430\u043d\u0435\u0439 \u0438\u0437 Store API\n      const fabrics = []; \/\/ {img, name, link}\n      fetch(apiUrl).then(r=>r.json()).then(products=>{\n        (products||[]).forEach(p=>{\n          if (p && p.images && p.images[0]) {\n            fabrics.push({\n              img:  p.images[0].src,\n              name: p.name || '\u0422\u043a\u0430\u043d\u044c',\n              link: p.permalink || '#'\n            });\n          }\n        });\n        if (!fabrics.length) {\n          \/\/ \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 (\u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439 \u043f\u0443\u0441\u0442\u043e\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438)\n          fabrics.push(\n            {img:'https:\/\/picsum.photos\/seed\/agga-tweed\/800\/800', name:'Tweed demo', link:'#'},\n            {img:'https:\/\/picsum.photos\/seed\/agga-sequin\/800\/800', name:'Sequin demo', link:'#'}\n          );\n        }\n        initCarousel();\n      }).catch(err=>{\n        console.error('Store API error:', err);\n        \/\/ fallback\n        fabrics.push(\n          {img:'https:\/\/picsum.photos\/seed\/agga-tweed\/800\/800', name:'Tweed demo', link:'#'},\n          {img:'https:\/\/picsum.photos\/seed\/agga-sequin\/800\/800', name:'Sequin demo', link:'#'}\n        );\n        initCarousel();\n      });\n\n      function setTexture(url){\n        swatch.src = url;\n        jacket.style.backgroundImage = `url('${url}')`;\n        pants .style.backgroundImage = `url('${url}')`;\n      }\n\n      function initCarousel(){\n        let i = 0;\n        function update(){\n          setTexture(fabrics[i].img);\n          titleEl.textContent = fabrics[i].name;\n          titleEl.href        = fabrics[i].link || '#';\n        }\n        prevBtn.onclick = ()=>{ i = (i - 1 + fabrics.length) % fabrics.length; update(); };\n        nextBtn.onclick = ()=>{ i = (i + 1) % fabrics.length; update(); };\n        update();\n      }\n    })();\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-45614","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/agga.md\/ro\/wp-json\/wp\/v2\/pages\/45614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agga.md\/ro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/agga.md\/ro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/agga.md\/ro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agga.md\/ro\/wp-json\/wp\/v2\/comments?post=45614"}],"version-history":[{"count":0,"href":"https:\/\/agga.md\/ro\/wp-json\/wp\/v2\/pages\/45614\/revisions"}],"wp:attachment":[{"href":"https:\/\/agga.md\/ro\/wp-json\/wp\/v2\/media?parent=45614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}