{"id":1796,"date":"2026-05-30T23:14:34","date_gmt":"2026-05-30T23:14:34","guid":{"rendered":"https:\/\/www.ilmishahu.design\/?post_type=fw-portfolio&#038;p=1796"},"modified":"2026-06-01T22:33:39","modified_gmt":"2026-06-01T22:33:39","slug":"test","status":"publish","type":"fw-portfolio","link":"https:\/\/www.ilmishahu.design\/sq\/my-project\/test\/","title":{"rendered":"test"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n:not(:defined) > * {\n  display: none;\n}\n\nhtml {\n  height: 100%;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  height: 100%;\n}\n\nmodel-viewer {\n  width: 100%;\n  height: 300px;\n  background-color: #ffffff;\n}\n\n.Hotspot {\n  background: #fff;\n  border-radius: 32px;\n  border: 0;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);\n  box-sizing: border-box;\n  cursor: pointer;\n  height: 24px;\n  padding: 8px;\n  position: relative;\n  transition: opacity 0.3s;\n  width: 24px;\n}\n\n.Hotspot:not([data-visible]) {\n  background: transparent;\n  border: 4px solid #fff;\n  box-shadow: none;\n  height: 32px;\n  pointer-events: none;\n  width: 32px;\n}\n\n.Hotspot:focus {\n  border: 4px solid rgb(0, 128, 200);\n  height: 32px;\n  outline: none;\n  width: 32px;\n}\n\n.Hotspot > * {\n  opacity: 1;\n  transform: translateY(-50%);\n}\n\n.HotspotAnnotation{\n  background: #fff;\n  border-radius: 4px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);\n  color: rgba(0, 0, 0, 0.8);\n  display: block;\n  font-family: Futura, Helvetica Neue, sans-serif;\n  font-size: 18px;\n  font-weight: 700;\n  left: calc(100% + 1em);\n  max-width: 128px;\n  overflow-wrap: break-word;\n  padding: 0.5em 1em;\n  position: absolute;\n  top: 50%;\n  width: max-content;\n}\n\n.Hotspot:not([data-visible]) > * {\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(calc(-50% + 4px));\n  transition: transform 0.3s, opacity 0.3s;\n}\n\n\n.progress-bar {\n  display: block;\n  width: 33%;\n  height: 10%;\n  max-height: 2%;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate3d(-50%, -50%, 0);\n  border-radius: 25px;\n  box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5), 0px 0px 5px 1px rgba(0, 0, 0, 0.6);\n  border: 1px solid rgba(255, 255, 255, 0.9);\n  background-color: rgba(0, 0, 0, 0.5);\n}\n\n.progress-bar.hide {\n  visibility: hidden;\n  transition: visibility 0.3s;\n}\n\n.update-bar {\n  background-color: rgba(255, 255, 255, 0.9);\n  width: 0%;\n  height: 100%;\n  border-radius: 25px;\n  float: left;\n  transition: width 0.3s;\n}\n\n#ar-button {\n  background-image: url(ar_icon.png);\n  background-repeat: no-repeat;\n  background-size: 20px 20px;\n  background-position: 12px 50%;\n  background-color: #fff;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  white-space: nowrap;\n  bottom: 12px;\n  padding: 0px 16px 0px 40px;\n  font-family: Roboto Regular, Helvetica Neue, sans-serif;\n  font-size: 12px;\n  color:#4285f4;\n  height: 36px;\n  line-height: 36px;\n  border-radius: 18px;\n  border: 1px solid #DADCE0;\n}\n\n#ar-button:active {\n  background-color: #E8EAED;\n}\n\n#ar-button:focus {\n  outline: none;\n}\n\n#ar-button:focus-visible {\n  outline: 1px solid #4285f4;\n}\n\n@keyframes circle {\n  from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }\n  to   { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }\n}\n\n@keyframes elongate {\n  from { transform: translateX(100px); }\n  to   { transform: translateX(-100px); }\n}\n\nmodel-viewer > #ar-prompt {\n  position: absolute;\n  left: 50%;\n  bottom: 60px;\n  animation: elongate 2s infinite ease-in-out alternate;\n  display: none;\n}\n\nmodel-viewer[ar-status=\"session-started\"] > #ar-prompt {\n  display: block;\n}\n\nmodel-viewer > #ar-prompt > img {\n  animation: circle 4s linear infinite;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/\/ Handles loading the events for <model-viewer>'s slotted progress bar\nconst onProgress = (event) => {\n  const progressBar = event.target.querySelector('.progress-bar');\n  const updatingBar = event.target.querySelector('.update-bar');\n  updatingBar.style.width = `${event.detail.totalProgress * 100}%`;\n  if (event.detail.totalProgress === 1) {\n    progressBar.classList.add('hide');\n    event.target.removeEventListener('progress', onProgress);\n  } else {\n    progressBar.classList.remove('hide');\n  }\n};\ndocument.querySelector('model-viewer').addEventListener('progress', onProgress);\n<\/script>\n\n<model-viewer src=\"https:\/\/www.ilmishahu.design\/wp-content\/uploads\/ilmishahu.design.glb\" ar ar-modes=\"webxr scene-viewer quick-look\" camera-controls tone-mapping=\"neutral\" poster=\"poster.webp\" shadow-intensity=\"0\" exposure=\"1\" shadow-softness=\"0\" environment-image=\"legacy\">\n    <button class=\"Hotspot\" slot=\"hotspot-1\" data-position=\"0.013085221168299478m 0.01160375500441907m 0.0001499999932944797m\" data-normal=\"0m -2.2204460492503128e-16m 1m\" data-visibility-attribute=\"visible\">\n        <div class=\"HotspotAnnotation\">Spot UV Varnish<\/div>\n    <\/button><button class=\"Hotspot\" slot=\"hotspot-2\" data-position=\"-0.012494156545950243m 0.021126949257056295m -0.00014999999329447298m\" data-normal=\"0m 2.2204460492503128e-16m -1m\" data-visibility-attribute=\"visible\">\n        <div class=\"HotspotAnnotation\">Hot foil stamping<\/div>\n    <\/button><button class=\"Hotspot\" slot=\"hotspot-3\" data-position=\"-0.006754821939377707m 0.044907484127278546m -0.00014999999329446745m\" data-normal=\"-5.551115123125783e-17m 2.220446049250313e-16m -1m\" data-visibility-attribute=\"visible\">\n        <div class=\"HotspotAnnotation\">Spot UV Varnish<\/div>\n    <\/button>\n    <div class=\"progress-bar hide\" slot=\"progress-bar\">\n        <div class=\"update-bar\"><\/div>\n    <\/div>\n    <button slot=\"ar-button\" id=\"ar-button\">\n        View in your space\n    <\/button>\n    <div id=\"ar-prompt\">\n        <img decoding=\"async\" src=\"https:\/\/modelviewer.dev\/shared-assets\/icons\/hand.png\">\n    <\/div>\n<\/model-viewer>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"featured_media":0,"template":"","fw-portfolio-category":[],"class_list":["post-1796","fw-portfolio","type-fw-portfolio","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ilmishahu.design\/sq\/wp-json\/wp\/v2\/fw-portfolio\/1796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ilmishahu.design\/sq\/wp-json\/wp\/v2\/fw-portfolio"}],"about":[{"href":"https:\/\/www.ilmishahu.design\/sq\/wp-json\/wp\/v2\/types\/fw-portfolio"}],"version-history":[{"count":47,"href":"https:\/\/www.ilmishahu.design\/sq\/wp-json\/wp\/v2\/fw-portfolio\/1796\/revisions"}],"predecessor-version":[{"id":1861,"href":"https:\/\/www.ilmishahu.design\/sq\/wp-json\/wp\/v2\/fw-portfolio\/1796\/revisions\/1861"}],"wp:attachment":[{"href":"https:\/\/www.ilmishahu.design\/sq\/wp-json\/wp\/v2\/media?parent=1796"}],"wp:term":[{"taxonomy":"fw-portfolio-category","embeddable":true,"href":"https:\/\/www.ilmishahu.design\/sq\/wp-json\/wp\/v2\/fw-portfolio-category?post=1796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}