https://alastin.com/cdn/shop/t/816/assets/before-after.min.js?v=51992141417333727331787681281

1(()=>{var n=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});let t=document.createElement("div");t.classList.add("modal");let o=document.createElement("div");o.classList.add("modal-content");let e=document.createElement("span");e.classList.add("close-button"),e.innerHTML="×",o.appendChild(e),o.appendChild(document.createElement("slot")),t.appendChild(o),this.shadowRoot.append(t);let a=document.createElement("style");a.textContent=`
2      .modal {
3        display: none;
4        position: fixed;
5        z-index: 9999;
6        left: 0;
7        top: 0;
8        width: 100%;
9        height: 100%;
10        overflow: auto;
11        background-color: rgb(0,0,0);
12        background-color: rgba(0,0,0,0.4);
13      }
14      .modal-content {
15        position: relative;
16        top: 50%;
17        transform: translateY(-50%);
18        font-family: proxima-nova;
19        background-color: #fefefe;
20        margin-inline: auto;
21        padding: 20px;
22        border: 1px solid #888;
23        width: 340px;
24      }
25      .close-button {
26        color: #aaa;
27        float: right;
28        font-size: 28px;
29        font-weight: bold;
30        margin-top: -19px;
31        margin-right: -7px;
32      }
33      .close-button:hover,
34      .close-button:focus {
35        color: black;
36        text-decoration: none;
37        cursor: pointer;
38      }
39    `,this.shadowRoot.append(a),e.addEventListener("click",()=>this.hide()),t.addEventListener("click",d=>{d.target===t&&this.hide()})}show(){this.shadowRoot.querySelector(".modal").style.display="block"}hide(){this.shadowRoot.querySelector(".modal").style.display="none"}};customElements.define("modal-component",n);})();