<!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>