{"id":20,"date":"2026-09-02T22:13:27","date_gmt":"2026-09-02T22:13:27","guid":{"rendered":"https:\/\/martinguard.com\/?p=20"},"modified":"2026-09-02T22:57:46","modified_gmt":"2026-09-02T22:57:46","slug":"test-1","status":"publish","type":"post","link":"https:\/\/martinguard.com\/?p=20","title":{"rendered":"test 1"},"content":{"rendered":"<p>[mg_product_viewer id=&#8221;18&#8243;]<\/p>\n\n\n    <style>\r\n        .apple-showcase-container {\r\n            display: flex;\r\n            align-items: center;\r\n            background: #ffffff;\r\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n            margin: 30px 0;\r\n            direction: rtl;\r\n            gap: 20px;\r\n            border: 1px solid #eee;\r\n            padding: 20px;\r\n            border-radius: 12px;\r\n        }\r\n        .showcase-left { flex: 1; display: flex; align-items: flex-start; }\r\n        .nav-arrows { display: flex; flex-direction: column; margin-left: 20px; gap: 10px; }\r\n        .nav-arrow { background: #f5f5f7; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; }\r\n        .nav-arrow:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.15); transform: translateY(-2px); }\r\n        .hotspots-list { display: flex; flex-direction: column; gap: 15px; width: 100%; }\r\n        .hotspot-item { background: #f5f5f7; border-radius: 30px; padding: 12px 20px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.08); transition: all 0.3s ease; font-weight: bold; }\r\n        .hotspot-item.active { background: #e8e8ed; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }\r\n        .hotspot-icon { font-size: 20px; margin-left: 10px; color: #0071e3; display: inline-block; transition: transform 0.3s ease; }\r\n        .hotspot-item.active .hotspot-icon { transform: rotate(45deg); }\r\n        .hotspot-info { display: none; background: #ffffff; border-radius: 20px; padding: 15px; margin-top: 15px; font-size: 14px; font-weight: normal; color: #333; box-shadow: 0 4px 10px rgba(0,0,0,0.05); line-height: 1.6; }\r\n        .hotspot-item.active .hotspot-info { display: block; }\r\n        .showcase-right { flex: 1; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #f5f5f7; border-radius: 20px; padding: 20px; min-height: 300px; }\r\n        .product-image { max-width: 100%; height: auto; border-radius: 10px; opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease, transform 0.5s ease; display: none; }\r\n        .product-image.active { opacity: 1; transform: scale(1); display: block; }\r\n        @media (max-width: 768px) { .apple-showcase-container { flex-direction: column-reverse; } .nav-arrows { flex-direction: row; margin-left: 0; margin-bottom: 20px; width: 100%; justify-content: center; } }\r\n    <\/style>\r\n\r\n    <div class=\"apple-showcase-container\" id=\"aps-showcase-7909\">\r\n        <div class=\"showcase-left\">\r\n            <div class=\"nav-arrows\">\r\n                <button class=\"nav-arrow aps-prev\">\u25b2<\/button>\r\n                <button class=\"nav-arrow aps-next\">\u25bc<\/button>\r\n            <\/div>\r\n            <div class=\"hotspots-list\">\r\n                                    <div class=\"hotspot-item active\" data-index=\"0\">\r\n                        <span class=\"hotspot-icon\">+<\/span> \u062c\u0648\u062f\u0629 \u0627\u0644\u0635\u0648\u062a \u0627\u0644\u0641\u0627\u0626\u0642\u0629dddgf                        <div class=\"hotspot-info\">\u0648\u0635\u0641 \u062a\u062c\u0631\u064a\u0628\u064a \u0644\u0645\u064a\u0632\u0629 \u0627\u0644\u0635\u0648\u062a.fddddddddddddddddddddd<\/div>\r\n                    <\/div>\r\n                                    <div class=\"hotspot-item \" data-index=\"1\">\r\n                        <span class=\"hotspot-icon\">+<\/span> camira                        <div class=\"hotspot-info\">dffffffffffffffffffffff\r\nfddddddddddddddd<\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"showcase-right\">\r\n                            <img decoding=\"async\" src=\"https:\/\/martinguard.com\/wp-content\/uploads\/2026\/09\/51YWnoWYbkL._AC_SL1500_.jpg\" class=\"product-image active\" data-index=\"0\">\r\n                            <img decoding=\"async\" src=\"https:\/\/martinguard.com\/wp-content\/uploads\/2026\/09\/71T19sN-NJL._SL1500_.jpg\" class=\"product-image \" data-index=\"1\">\r\n                    <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        let container = document.getElementById('aps-showcase-7909');\r\n        if(!container) return;\r\n\r\n        let hotspots = container.querySelectorAll('.hotspot-item');\r\n        let images = container.querySelectorAll('.product-image');\r\n        let prevBtn = container.querySelector('.aps-prev');\r\n        let nextBtn = container.querySelector('.aps-next');\r\n        let currentIndex = 0;\r\n\r\n        function updateShowcase(index) {\r\n            hotspots.forEach(h => h.classList.remove('active'));\r\n            images.forEach(img => img.classList.remove('active'));\r\n            \r\n            hotspots[index].classList.add('active');\r\n            images[index].classList.add('active');\r\n            currentIndex = index;\r\n        }\r\n\r\n        hotspots.forEach((hotspot, index) => {\r\n            hotspot.addEventListener('click', () => updateShowcase(index));\r\n        });\r\n\r\n        prevBtn.addEventListener('click', () => {\r\n            let newIndex = currentIndex > 0 ? currentIndex - 1 : hotspots.length - 1;\r\n            updateShowcase(newIndex);\r\n        });\r\n\r\n        nextBtn.addEventListener('click', () => {\r\n            let newIndex = currentIndex < hotspots.length - 1 ? currentIndex + 1 : 0;\r\n            updateShowcase(newIndex);\r\n        });\r\n    });\r\n    <\/script>\r\n    \n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/martinguard.com\/index.php?rest_route=\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/martinguard.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/martinguard.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/martinguard.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/martinguard.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":4,"href":"https:\/\/martinguard.com\/index.php?rest_route=\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/martinguard.com\/index.php?rest_route=\/wp\/v2\/posts\/20\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/martinguard.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martinguard.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martinguard.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}