Initial commit
This commit is contained in:
commit
19b04a89cf
158
generator.html
Normal file
158
generator.html
Normal file
@ -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>
|
Loading…
Reference in New Issue
Block a user