Initial commit

2022-01-02 19:10:31 +01:00 · 2022-01-02 19:10:31 +01:00 · 19b04a89cf
commit 19b04a89cf
2 changed files with 158 additions and 0 deletions
--- a/generator.html
+++ b/generator.html
@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Generator kart na social media</title>
+    <style>
+      * {
+        font-family: sans-serif;
+      }
+    </style>
+  </head>
+  <body style="--yellow: #ffee2c; --scale: 2; --padding: 20px; 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>
+    </section>
+    <section>
+      <h2>Twitter</h2>
+      <div
+        id="container"
+        style="
+          box-sizing: border-box;
+          border: calc(var(--padding) * var(--scale)) solid var(--yellow);
+          padding: calc(var(--padding) * var(--scale))
+            calc(var(--padding) * var(--scale)) 0
+            calc(var(--padding) * var(--scale));
+          display: flex;
+          flex-flow: column;
+        "
+      >
+        <div>
+          <img
+            src="./logo.png"
+            width="80"
+            height="80"
+            style="
+              float: left;
+              height: calc(var(--scale) * 80px);
+              width: calc(var(--scale) * 80px);
+              padding-right: var(--padding);
+              margin-top: calc(-1 * var(--scale) * var(--padding));
+              margin-left: calc(-1 * var(--scale) * var(--padding));
+            "
+          />
+          <p
+            id="text_target"
+            style="margin: 0; font-size: calc(var(--scale) * 16px)"
+          >
+            Treść komunikatu
+          </p>
+        </div>
+        <div
+          style="
+            flex-grow: 1;
+            position: relative;
+            overflow: hidden;
+            margin-left: calc(-1 * var(--scale) * var(--padding));
+            margin-right: calc(-1 * var(--scale) * var(--padding));
+          "
+        >
+          <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 sizes = {
+      "Twitter - 1 zdjęcie": [512, 313],
+      "Twitter - 2 zdjęcia": [377, 434],
+      "LinkedIn - 1 zdjęcie": [540, 346],
+      "LinkedIn - 2 zdjęcia": [270, 552],
+    };
+
+    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(
+        document.querySelector("body").style.getPropertyValue("--scale")
+      );
+      const [width, height] = sizes[size.value];
+      container.style.width = scale * width + "px";
+      container.style.height = scale * height + "px";
+    };
+
+    function rescale() {
+      document
+        .querySelector("body")
+        .style.setProperty("--scale", scale_picker.value);
+      resize();
+    }
+
+    refreshText();
+    refreshImage();
+    resize();
+    rescale();
+
+    text.oninput = refreshText;
+    file.onchange = refreshImage;
+  </script>
+</html>
--- a/logo.png
+++ b/logo.png