ui.html

<style>
  *,
  *:before,
  *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  body {
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol";
    color: #000;
    margin: 0;
    padding: 0;
    margin-top: 20px;
    font-size: 14px;
  }

  .content {
    width: 100%;
    margin: 0 auto;
  }

  .title {
    font-size: 20px;
    color: #454545;
    letter-spacing: -0.06rem;
  }

  .control-image {
    width: 100%;
    height: auto;
    background-color: #454545;
  }

  .control-data {
    margin: 15px 0 20px 0;
  }

  input[type=radio] {
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
  }

  input:checked ~ .control-image {
    box-shadow: 0px 0px 0px 3px #12a0fe;
  }

  .control-data-title {
    margin-bottom: 5px;
  }

  .control-data-description {
    opacity: 0.5;
  }

  .separator {
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
  }

  .button {
    font-size: 1rem;
    font-weight: bold;
    width: 100%;
    height: 45px;
    background-color: #12a0fe;
    color: #fff;
    text-align: center;
    transition: 0.3s ease;
    cursor: pointer;
    transition: background 200ms ease;
    border: none;
  }

  .button:disabled {
    background-color: rgba(0, 0, 0, 0.3);
  }

  .button:focus {
    outline: none;
  }

  body {
    margin: 18px;
  }

  .wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 18px;
  }

  .tabs {
    padding: 0 0 18px 0;
  }

  .tabs a {
    color: #b3b3b3;
    font-weight: bold;
    margin-right: 0.7rem;
    text-decoration: none;
    font-size: 12px;
  }

  .tabs a.active {
    color: #000;
  }

  .tabContainer {
    display: none;
  }

  .tabContainer.active {
    display: block;
  }

  .checkbox {
    display: flex;
    padding: 10px 0 20px 0; 
  }
</style>

<img
  src="https://res.cloudinary.com/deeitm141/image/upload/v1597006424/iphone_klqamp.png"
  style="display: none"
  crossorigin=""
  id="mockup1"
  alt=""
/>
<img
  src="https://res.cloudinary.com/deeitm141/image/upload/v1597006424/3iphone_lenqv8.png"
  style="display: none"
  crossorigin=""
  id="mockup2"
  alt=""
/>

<img
  src="https://res.cloudinary.com/deeitm141/image/upload/v1597670635/160_ycvhjt.png"
  style="display: none"
  crossorigin=""
  id="mockup3"
  alt=""
/>
<img
  src="https://res.cloudinary.com/deeitm141/image/upload/v1597670635/156_lcxgkd.png"
  style="display: none"
  crossorigin=""
  id="mockup4"
  alt=""
/>

<img
  src="https://res.cloudinary.com/dyw3e3f2c/image/upload/v1601492721/Screeener/2x/pixel-01-1.png"
  style="display: none"
  crossorigin=""
  id="mockup5"
  alt=""
/>
<img
  src="https://res.cloudinary.com/dyw3e3f2c/image/upload/v1601492721/Screeener/2x/pixel-03.png"
  style="display: none"
  crossorigin=""
  id="mockup6"
  alt=""
/>

<img
  src="https://res.cloudinary.com/deeitm141/image/upload/v1606257950/iphonex_qniqkb.png"
  style="display: none"
  crossorigin=""
  id="mockup7"
  alt=""
/>
<img
  src="https://res.cloudinary.com/deeitm141/image/upload/v1606257950/iphonex3_gxmfjr.png"
  style="display: none"
  crossorigin=""
  id="mockup8"
  alt=""
/>

<img
  src="https://res.cloudinary.com/dyw3e3f2c/image/upload/v1620342602/Screeener/ixone-x-2.png"
  style="display: none"
  crossorigin=""
  id="mockup9"
  alt=""
/>

<img
  src="https://res.cloudinary.com/dyw3e3f2c/image/upload/v1620342602/Screeener/ixone-x.png"
  style="display: none"
  crossorigin=""
  id="mockup10"
  alt=""
/>

<canvas
  id="canvas"
  width="3840px"
  height="2160px"
  style="display: none"
></canvas>

<div class="tabs">
  <a href="#iphone" class="active">iPhone</a>
  <a href="#android">Android</a>
</div>

<div id="iphone" class="tabContainer active">
  <div class="wrap">
    <div class="content">
      <label class="control radio js-control-radio">
        <input id="radio1" name="radio" type="radio" value="iphonex" />
        <img
          class="control-image"
          src="https://res.cloudinary.com/deeitm141/image/upload/c_scale,w_486/v1606257950/iphonex_qniqkb.png"
          alt=""
        />
        <div class="control-data">
          <div class="control-data-title">iPhone X Zoom</div>
          <div class="control-data-description">450x972</div>
        </div>
      </label>
    </div>
    <div class="content">
      <label class="control radio js-control-radio">
        <input id="radio1" name="radio" type="radio" value="1iphonex" />
        <img
          class="control-image"
          src="https://res.cloudinary.com/dyw3e3f2c/image/upload/v1620342602/Screeener/ixone-x.png"
          alt=""
        />
        <div class="control-data">
          <div class="control-data-title">iPhone X</div>
          <div class="control-data-description">375x812</div>
        </div>
      </label>
    </div>
  </div>

  <div class="wrap">
    <div class="content">
      <label class="control radio js-control-radio">
        <input id="radio2" name="radio" type="radio" value="2iphonex" />
        <img
          class="control-image"
          src="https://res.cloudinary.com/dyw3e3f2c/image/upload/v1620342602/Screeener/ixone-x-2.png"
          alt=""
        />
        <div class="control-data">
          <div class="control-data-title">iPhone X (2)</div>
          <div class="control-data-description">375x812</div>
        </div>
      </label>
    </div>
    <div class="content">
      <label class="control radio js-control-radio">
        <input id="radio2" name="radio" type="radio" value="3iphonex" />
        <img
          class="control-image"
          src="https://res.cloudinary.com/deeitm141/image/upload/c_scale,w_486/v1606257950/iphonex3_gxmfjr.png"
          alt=""
        />
        <div class="control-data">
          <div class="control-data-title">iPhone X (3)</div>
          <div class="control-data-description">375x812</div>
        </div>
      </label>
    </div>
  </div>

  <div class="wrap">
    <div class="content">
      <label class="control radio js-control-radio">
        <input id="radio1" name="radio" type="radio" value="phone" />
        <img
          class="control-image"
          src="https://res.cloudinary.com/deeitm141/image/upload/c_scale,w_486/v1597006424/iphone_klqamp.png"
          alt=""
        />
        <div class="control-data">
          <div class="control-data-title">iPhone 8 Zoom</div>
          <div class="control-data-description">375x667</div>
        </div>
      </label>
    </div>
    <div class="content">
      <label class="control radio js-control-radio">
        <input id="radio2" name="radio" type="radio" value="3phones" />
        <img
          class="control-image"
          src="https://res.cloudinary.com/deeitm141/image/upload/c_scale,w_486/v1597006424/3iphone_lenqv8.png"
          alt=""
        />
        <div class="control-data">
          <div class="control-data-title">iPhone 8 (3)</div>
          <div class="control-data-description">375x667</div>
        </div>
      </label>
    </div>
  </div>
</div>

<div id="android" class="tabContainer">
  <div class="wrap">
    <div class="content">
      <label class="control radio js-control-radio">
        <input id="radio3" name="radio" type="radio" value="android" />
        <img
          class="control-image"
          src="https://res.cloudinary.com/deeitm141/image/upload/v1597670635/160_ycvhjt.png"
          alt=""
        />
        <div class="control-data">
          <div class="control-data-title">Android Zoom</div>
          <div class="control-data-description">360x760</div>
        </div>
      </label>
    </div>
    <div class="content">
      <label class="control radio js-control-radio">
        <input id="radio4" name="radio" type="radio" value="3android" />
        <img
          class="control-image"
          src="https://res.cloudinary.com/deeitm141/image/upload/v1597670635/156_lcxgkd.png"
          alt=""
        />
        <div class="control-data">
          <div class="control-data-title">Android (3)</div>
          <div class="control-data-description">360x760</div>
        </div>
      </label>
    </div>
  </div>

  <div class="wrap">
    <div class="content">
      <label class="control radio js-control-radio">
        <input id="radio3" name="radio" type="radio" value="pixel" />
        <img
          class="control-image"
          src="https://res.cloudinary.com/dyw3e3f2c/image/upload/v1601492721/Screeener/2x/pixel-01-1.png"
          alt=""
        />
        <div class="control-data">
          <div class="control-data-title">Pixel Zoom</div>
          <div class="control-data-description">360x640</div>
        </div>
      </label>
    </div>
    <div class="content">
      <label class="control radio js-control-radio">
        <input id="radio4" name="radio" type="radio" value="3pixel" />
        <img
          class="control-image"
          src="https://res.cloudinary.com/dyw3e3f2c/image/upload/v1601492721/Screeener/2x/pixel-03.png"
          alt=""
        />
        <div class="control-data">
          <div class="control-data-title">Pixel (3)</div>
          <div class="control-data-description">360x640</div>
        </div>
      </label>
    </div>
  </div>
</div>

<div class="checkbox-container">
  <label class="checkbox" for="frames">
    <input class="checkbox" type="checkbox" name="frames" checked id="frames">
    <div>
      Show frames
    </div>
  </label>
</div>

<button class="button" disabled="true" id="create">Generate</button>

<div class="separator"></div>

<script>
  //Tab system
  const tabs = document.querySelectorAll(".tabContainer");
  const tabLink = document.querySelectorAll(".tabs a");

  tabLink.forEach((t) => {
    t.addEventListener("click", (event) => {
      let activePaneId = t.getAttribute("href");
      let container = document.querySelector(activePaneId);

      tabs.forEach((c) => {
        c.classList.remove("active");
      });

      tabLink.forEach((tl) => {
        tl.classList.remove("active");
      });

      container.classList.add("active");
      event.target.classList.add("active");
      event.preventDefault();
    });
  });

  async function encode(canvas, ctx, imageData) {
    ctx.putImageData(imageData, 0, 0);
    return await new Promise((resolve, reject) => {
      canvas.toBlob((blob) => {
        const reader = new FileReader();
        reader.onload = () => resolve(new Uint8Array(reader.result));
        reader.onerror = () => reject(new Error("Could not read from blob"));
        reader.readAsArrayBuffer(blob);
      });
    });
  }

  window.onload = function () {
    const controlRadio = Array.from(
      document.querySelectorAll(".js-control-radio")
    );
    const button = document.querySelector("button");
    let checkedval;

    controlRadio.forEach((radio) => {
      const image = radio.querySelector("img");
      const input = radio.querySelector("input");
      const checkbox = document.querySelector('#frames')

      checkbox.addEventListener('click', () => {
        console.log(checkbox.checked)
      })


      input.addEventListener("click", () => {
        if (input.checked) {
          checkedval = input.value;
          button.disabled = false;

          let mockupImage;

          if (input.value === "phone") {
            mockupImage = document.getElementById("mockup1");
            // console.log("phone");
          }

          if (input.value === "3phones") {
            // console.log("3phone");
            mockupImage = document.getElementById("mockup2");
          }

          if (input.value === "android") {
            // console.log("3phone");
            mockupImage = document.getElementById("mockup3");
          }

          if (input.value === "3android") {
            // console.log("3phone");
            mockupImage = document.getElementById("mockup4");
          }

          if (input.value === "pixel") {
            // console.log("pixel");
            mockupImage = document.getElementById("mockup5");
          }

          if (input.value === "3pixel") {
            // console.log("3pixel");
            mockupImage = document.getElementById("mockup6");
          }

          if (input.value === "iphonex") {
            // console.log("iphonex");
            mockupImage = document.getElementById("mockup7");
          }

          if (input.value === "3iphonex") {
            // console.log("3iphonex");
            mockupImage = document.getElementById("mockup8");
          }

          if (input.value === "1iphonex") {
            // console.log("3iphonex");
            mockupImage = document.getElementById("mockup10");
          }

          if (input.value === "2iphonex") {
            // console.log("3iphonex");
            mockupImage = document.getElementById("mockup9");
          }


          const canvas = document.getElementById("canvas");
          const ctx = canvas.getContext("2d");
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.imageSmoothingEnabled = false;
          ctx.drawImage(mockupImage, 0, 0);
          const imageData = ctx.getImageData(0, 0, 3840, 2160);
          const newBytes = encode(canvas, ctx, imageData);

          newBytes.then((imageData) => {
            const mockup = imageData;
            document.getElementById("create").onclick = () => {
              parent.postMessage(
                {
                  pluginMessage: {
                    type: "generate-slides",
                    mockup,
                    checkedval,
                    showFrames: checkbox.checked
                  },
                },
                "*"
              );
            };
          });
        }
      });
    });
  };
</script>