social-media-cards/generator.html

341 lines
9.4 KiB
HTML
Raw Permalink 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>
2022-01-04 19:56:44 +01:00
@font-face {
font-family: Poppins;
src: url(./poppins.ttf);
}
2022-01-02 19:10:31 +01:00
* {
font-family: "Noto Sans", sans-serif;
2022-01-04 19:56:44 +01:00
}
2022-01-04 19:56:44 +01:00
p {
font-family: Poppins;
2022-01-02 19:10:31 +01:00
}
2022-01-02 20:41:44 +01:00
2022-01-20 17:18:12 +01:00
#container {
box-sizing: border-box;
display: flex;
flex-flow: column;
width: calc(var(--scale) * var(--width));
height: calc(var(--scale) * var(--height));
position: relative;
}
2022-01-02 20:41:44 +01:00
#container.overflow {
display: grid !important;
--ratio: calc(var(--width-int) / var(--height-int));
--thumbnail-width: calc(
(var(--ratio) * var(--overflow-height)) * var(--scale)
);
--full-width: calc(var(--scale) * var(--overflow-width));
--margin: calc((var(--full-width) - var(--thumbnail-width)) / 2);
grid-template-columns: var(--margin) var(--thumbnail-width) var(
--margin
);
grid-template-areas: "margin-left thumbnail margin-right" "margin-left thumbnail margin-right";
width: var(--full-width) !important;
2022-01-02 20:41:44 +01:00
height: calc(var(--scale) * var(--overflow-height)) !important;
grid-template-rows: 1fr 10fr;
background-color: var(--yellow);
}
#container.overflow #text_box {
grid-column: 2;
grid-row: 1;
2022-01-02 20:41:44 +01:00
}
2022-01-20 17:18:12 +01:00
#text_target {
margin: 0;
margin-top: calc(var(--scale) * var(--padding));
margin-bottom: calc(var(--scale) * var(--padding));
}
2022-01-02 20:41:44 +01:00
#container.overflow #image_box {
grid-column: 1/4;
grid-row: 2;
2022-01-02 20:41:44 +01:00
}
#text_box {
2022-01-20 17:18:12 +01:00
background-color: black;
color: white;
border-top: var(--padding) solid var(--yellow);
border-bottom: var(--padding) solid var(--yellow);
2022-01-02 20:41:44 +01:00
}
2022-01-04 19:56:44 +01:00
2022-01-20 17:18:12 +01:00
#logo {
float: right;
border-left: var(--padding) solid var(--yellow);
border-right: var(--padding) solid var(--yellow);
height: calc(var(--scale) * 4 * var(--padding));
width: auto;
margin: calc(var(--scale) * var(--padding)) 0;
2022-01-04 19:56:44 +01:00
}
.overlay {
border: 1px solid red;
z-index: 1;
text-align: center;
opacity: 60%;
display: none;
}
.overlay--margin {
2022-01-20 17:18:12 +01:00
display: none;
background-image: repeating-linear-gradient(
45deg,
#ccc,
#ccc 30px,
#dbdbdb 30px,
#dbdbdb 60px
);
}
2022-01-04 19:56:44 +01:00
2022-01-20 17:18:12 +01:00
.guides .overflow .overlay--margin,
.guides .overlay--thumbnail {
display: block;
}
.overlay--margin-right {
grid-area: margin-right;
}
.overlay--margin-left {
grid-area: margin-left;
}
.overlay--thumbnail {
grid-area: thumbnail;
color: blue;
}
2022-01-20 17:18:12 +01:00
.guides #container:not(.overflow) .overlay--thumbnail {
position: absolute;
height: 100%;
width: 100%;
}
2022-01-02 19:10:31 +01:00
</style>
</head>
2022-01-02 20:41:44 +01:00
<body
style="
--yellow: #ffee2c;
--scale: 2;
--padding: 20px;
--width: 100px;
--height: 100px;
--overflow-width: 150px;
--overflow-height: 150px;
2022-01-02 20:41:44 +01:00
display: flex;
"
class="guides"
2022-01-02 20:41:44 +01:00
>
2022-01-02 19:10:31 +01:00
<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>
2022-01-02 20:41:44 +01:00
<input type="checkbox" id="overflow" onchange="reoverflow()" /><label
for="overflow"
>
Tryb overflow
</label>
<input type="checkbox" id="guides" onchange="reguides()" checked /><label
for="guides"
>
Pokaż prowadnice
</label>
2022-01-20 17:18:12 +01:00
<pre id="stats"></pre>
2022-01-02 19:10:31 +01:00
</section>
<section>
<h2>Twitter</h2>
2022-01-20 17:18:12 +01:00
<div id="container" style="">
2022-01-02 20:41:44 +01:00
<div id="text_box">
2022-01-20 17:18:12 +01:00
<img src="./logo.png" id="logo" />
2022-01-04 19:56:44 +01:00
<p
id="text_target"
style="
font-size: calc(var(--scale) * 16px);
2022-01-20 17:18:12 +01:00
padding: 0 calc(var(--padding) * var(--scale));
line-height: calc(var(--padding) * var(--scale));
"
2022-01-04 19:56:44 +01:00
>
Treść komunikatu
</p>
2022-01-02 19:10:31 +01:00
</div>
<div
2022-01-02 20:41:44 +01:00
id="image_box"
style="flex-grow: 1; position: relative; overflow: hidden"
2022-01-02 19:10:31 +01:00
>
<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 class="overlay overlay--margin overlay--margin-left">
2022-01-15 21:56:11 +01:00
ucięte z lewej, widoczne tylko po kliknięciu
</div>
<div class="overlay overlay--margin overlay--margin-right">
2022-01-15 21:56:11 +01:00
ucięte z prawej, widoczne tylko po kliknięciu
</div>
<div class="overlay overlay--thumbnail">widoczne na miniaturce</div>
2022-01-02 19:10:31 +01:00
</div>
</section>
</body>
<script>
2022-01-02 20:41:44 +01:00
const body = document.querySelector("body");
2022-01-02 19:10:31 +01:00
const sizes = {
2022-01-02 20:41:44 +01:00
"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": {
2022-03-24 09:40:43 +01:00
thumbnail_size: [250, 355],
2022-01-02 20:41:44 +01:00
overflow_size: [733, 723],
},
2022-01-02 19:10:31 +01:00
};
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/>");
2022-01-20 17:18:12 +01:00
restats();
2022-01-02 19:10:31 +01:00
}
const refreshImage = async () => {
image.style.backgroundImage = `url("${await toBase64(file.files[0])}")`;
image_blur.style.backgroundImage = `url("${await toBase64(
file.files[0]
)}")`;
};
const resize = () => {
2022-01-02 20:41:44 +01:00
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("--width-int", width);
body.style.setProperty("--height-int", height);
2022-01-02 20:41:44 +01:00
body.style.setProperty("--overflow-width", overflow_width + "px");
body.style.setProperty("--overflow-height", overflow_height + "px");
2022-01-20 17:18:12 +01:00
restats();
2022-01-02 19:10:31 +01:00
};
function rescale() {
document
.querySelector("body")
.style.setProperty("--scale", scale_picker.value);
resize();
2022-01-20 17:18:12 +01:00
restats();
2022-01-02 19:10:31 +01:00
}
2022-01-02 20:41:44 +01:00
function reoverflow() {
const should_overflow = overflow.checked;
if (should_overflow) {
container.classList.add("overflow");
} else {
container.classList.remove("overflow");
}
2022-01-20 17:18:12 +01:00
restats();
2022-01-02 20:41:44 +01:00
}
function reguides() {
const should_guides = guides.checked;
if (should_guides) {
body.classList.add("guides");
} else {
body.classList.remove("guides");
}
2022-01-20 17:18:12 +01:00
restats();
}
function restats() {
const containerRect = container.getBoundingClientRect();
const thumbnailRect = document
.querySelector(".overlay--thumbnail")
.getBoundingClientRect();
const should_overflow = overflow.checked;
const overflowWidth = body.style.getPropertyValue("--overflow-width");
const overflowHeight = body.style.getPropertyValue("--overflow-height");
const basicWidth = body.style.getPropertyValue("--width-int");
const basicHeight = body.style.getPropertyValue("--height-int");
stats.textContent = `szerokość całej grafiki: ${containerRect.width}
wysokość całej grafiki: ${containerRect.height}
propocje szer/wys całej grafiki: ${
containerRect.width / containerRect.height
}
zamierzone proporcje miniaturki (szer/wys): ${basicWidth / basicHeight}
proporcje obszaru thumbnaila (szer/wys): ${
thumbnailRect.width / thumbnailRect.height
}`;
}
2022-01-02 19:10:31 +01:00
refreshText();
refreshImage();
resize();
rescale();
2022-01-02 20:41:44 +01:00
reoverflow();
reguides();
2022-01-20 17:18:12 +01:00
restats();
2022-01-02 19:10:31 +01:00
text.oninput = refreshText;
file.onchange = refreshImage;
2022-01-02 20:41:44 +01:00
/* [1014, 723] -- linked in */
2022-01-02 19:10:31 +01:00
</script>
</html>