social-media-cards/generator.html

159 lines
4.4 KiB
HTML
Raw Normal View History

2022-01-02 19:10:31 +01:00
<!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>