<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Generator kart na social media</title>
    <style>
      @font-face {
        font-family: Poppins;
        src: url(./poppins.ttf);
      }

      * {
        font-family: 'Noto Sans', sans-serif;
      }
  
      p {
        font-family: Poppins;
      }

      #container.overflow {
        display: grid !important;
        grid-template-columns:
          1fr calc(
            (
                var(--width) / var(--height) * var(--overflow-height) - 2 *
                  var(--padding)
              ) * var(--scale)
          )
          1fr;
        width: calc(var(--scale) * var(--overflow-width)) !important;
        height: calc(var(--scale) * var(--overflow-height)) !important;
        grid-template-rows: 1fr 10fr;
        background-color: var(--yellow);
      }

      #container.overflow #text_box {
        grid-column: 2;
      }

      #container.overflow #image_box {
        grid-column: 1/4;
      }

      #text_box {
        background-color: var(--yellow);
        color: #fff;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

      #text_target {
        background-color: #000;
      }


    </style>
  </head>
  <body
    style="
      --yellow: #ffee2c;
      --scale: 2;
      --padding: 20px;
      --width: 100px;
      --height: 100px;
      --overflow-width: 150px;
      --overflow--height: 150px;
      display: flex;
    "
  >
    <section style="margin-right: 20px">
      <h1>Generator kart na social media</h1>
      <textarea id="text" style="width: 600px; height: 120px">
Treść komunikatu</textarea
      >
      <br />
      <input id="file" type="file" accept="image/png, image/jpeg" />
      <br />
      <select id="size" onchange="resize()"></select>
      <select id="scale_picker" onchange="rescale()">
        <option value="1">1x</option>
        <option value="2" selected>2x</option>
        <option value="3">3x</option>
      </select>
      <input type="checkbox" id="overflow" onchange="reoverflow()" /><label
        for="overflow"
      >
        Tryb overflow
      </label>
    </section>
    <section>
      <h2>Twitter</h2>
      <div
        id="container"
        style="
          box-sizing: border-box;
          border: calc(var(--padding) * var(--scale)) solid var(--yellow);
          border-top: calc(var(--padding) * var(--scale)/3) solid var(--yellow);
          display: flex;
          flex-flow: column;
          width: calc(var(--scale) * var(--width));
          height: calc(var(--scale) * var(--height));
        "
      >
        <div id="text_box">
          <p
            id="text_target"
            style="font-size: calc(var(--scale) * 16px); padding: var(--padding); grid-column: 1/3;"
          >
            Treść komunikatu
          </p>
          <img
            src="./logo.png"
            width="80"
            height="80"
            style="
              height: calc(var(--scale) * 80px);
              width: calc(var(--scale) * 80px);
              padding-left: var(--padding);
              justify-self: flex-end;
              grid-column: 3;
            "
          />
        </div>
        <div
          id="image_box"
          style="flex-grow: 1; position: relative; overflow: hidden"
        >
          <div
            id="image_blur"
            style="
              height: 100%;
              width: 100%;
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              position: absolute;
              filter: blur(10px);
            "
          ></div>
          <div
            id="image"
            style="
              height: 100%;
              width: 100%;
              background-size: contain;
              background-position: center;
              background-repeat: no-repeat;
              position: absolute;
            "
          ></div>
        </div>
      </div>
    </section>
  </body>
  <script>
    const body = document.querySelector("body");
    const sizes = {
      "Twitter - 1 zdjęcie": {
        thumbnail_size: [512, 313],
        overflow_size: [1024, 768],
      },
      "Twitter - 2 zdjęcia": {
        thumbnail_size: [377, 434],
        overflow_size: [1024, 768],
      },
      "LinkedIn - 1 zdjęcie": {
        thumbnail_size: [540, 346],
        overflow_size: [733, 723],
      },
      "LinkedIn - 2 zdjęcia": {
        thumbnail_size: [270, 552],
        overflow_size: [733, 723],
      },
    };

    for (const value of Object.keys(sizes)) {
      const option = document.createElement("option");
      option.value = value;
      option.textContent = value;
      size.appendChild(option);
    }

    function toBase64(file) {
      return new Promise((resolve) => {
        const FR = new FileReader();
        FR.addEventListener("load", (e) => {
          resolve(e.target.result);
        });
        FR.readAsDataURL(file);
      });
    }

    function refreshText() {
      text_target.innerHTML = text.value.replace(/\n/, "<br/>");
    }
    const refreshImage = async () => {
      image.style.backgroundImage = `url("${await toBase64(file.files[0])}")`;
      image_blur.style.backgroundImage = `url("${await toBase64(
        file.files[0]
      )}")`;
    };

    const resize = () => {
      const scale = parseInt(body.style.getPropertyValue("--scale"));
      const [width, height] = sizes[size.value].thumbnail_size;
      const [overflow_width, overflow_height] = sizes[size.value].overflow_size;
      body.style.setProperty("--width", width + "px");
      body.style.setProperty("--height", height + "px");
      body.style.setProperty("--overflow-width", overflow_width + "px");
      body.style.setProperty("--overflow-height", overflow_height + "px");
    };

    function rescale() {
      document
        .querySelector("body")
        .style.setProperty("--scale", scale_picker.value);
      resize();
    }

    function reoverflow() {
      const should_overflow = overflow.checked;
      if (should_overflow) {
        container.classList.add("overflow");
      } else {
        container.classList.remove("overflow");
      }
    }

    refreshText();
    refreshImage();
    resize();
    rescale();
    reoverflow();

    text.oninput = refreshText;
    file.onchange = refreshImage;
    /* [1014, 723] -- linked in */
  </script>
</html>