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