Compare commits
5 Commits
poppins-fo
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
c02cb97002 | ||
| 0ed1e5b6f0 | |||
| bce498561f | |||
| e5adf4449d | |||
| db6ab4fc19 |
188
generator.html
Normal file → Executable file
188
generator.html
Normal file → Executable file
@ -10,24 +10,35 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
font-family: 'Noto Sans', sans-serif;
|
font-family: "Noto Sans", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
width: calc(var(--scale) * var(--width));
|
||||||
|
height: calc(var(--scale) * var(--height));
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
#container.overflow {
|
#container.overflow {
|
||||||
display: grid !important;
|
display: grid !important;
|
||||||
grid-template-columns:
|
--ratio: calc(var(--width-int) / var(--height-int));
|
||||||
1fr calc(
|
--thumbnail-width: calc(
|
||||||
(
|
(var(--ratio) * var(--overflow-height)) * var(--scale)
|
||||||
var(--width) / var(--height) * var(--overflow-height) - 2 *
|
);
|
||||||
var(--padding)
|
--full-width: calc(var(--scale) * var(--overflow-width));
|
||||||
) * var(--scale)
|
--margin: calc((var(--full-width) - var(--thumbnail-width)) / 2);
|
||||||
)
|
grid-template-columns: var(--margin) var(--thumbnail-width) var(
|
||||||
1fr;
|
--margin
|
||||||
width: calc(var(--scale) * var(--overflow-width)) !important;
|
);
|
||||||
|
grid-template-areas: "margin-left thumbnail margin-right" "margin-left thumbnail margin-right";
|
||||||
|
width: var(--full-width) !important;
|
||||||
height: calc(var(--scale) * var(--overflow-height)) !important;
|
height: calc(var(--scale) * var(--overflow-height)) !important;
|
||||||
grid-template-rows: 1fr 10fr;
|
grid-template-rows: 1fr 10fr;
|
||||||
background-color: var(--yellow);
|
background-color: var(--yellow);
|
||||||
@ -35,24 +46,78 @@
|
|||||||
|
|
||||||
#container.overflow #text_box {
|
#container.overflow #text_box {
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text_target {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: calc(var(--scale) * var(--padding));
|
||||||
|
margin-bottom: calc(var(--scale) * var(--padding));
|
||||||
}
|
}
|
||||||
|
|
||||||
#container.overflow #image_box {
|
#container.overflow #image_box {
|
||||||
grid-column: 1/4;
|
grid-column: 1/4;
|
||||||
|
grid-row: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
#text_box {
|
#text_box {
|
||||||
background-color: var(--yellow);
|
background-color: black;
|
||||||
color: #fff;
|
color: white;
|
||||||
display: grid;
|
border-top: var(--padding) solid var(--yellow);
|
||||||
grid-template-columns: 1fr 1fr;
|
border-bottom: var(--padding) solid var(--yellow);
|
||||||
}
|
}
|
||||||
|
|
||||||
#text_target {
|
#logo {
|
||||||
background-color: #000;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
border: 1px solid red;
|
||||||
|
z-index: 1;
|
||||||
|
text-align: center;
|
||||||
|
opacity: 60%;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay--margin {
|
||||||
|
display: none;
|
||||||
|
background-image: repeating-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
#ccc,
|
||||||
|
#ccc 30px,
|
||||||
|
#dbdbdb 30px,
|
||||||
|
#dbdbdb 60px
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guides #container:not(.overflow) .overlay--thumbnail {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body
|
<body
|
||||||
@ -63,9 +128,10 @@
|
|||||||
--width: 100px;
|
--width: 100px;
|
||||||
--height: 100px;
|
--height: 100px;
|
||||||
--overflow-width: 150px;
|
--overflow-width: 150px;
|
||||||
--overflow--height: 150px;
|
--overflow-height: 150px;
|
||||||
display: flex;
|
display: flex;
|
||||||
"
|
"
|
||||||
|
class="guides"
|
||||||
>
|
>
|
||||||
<section style="margin-right: 20px">
|
<section style="margin-right: 20px">
|
||||||
<h1>Generator kart na social media</h1>
|
<h1>Generator kart na social media</h1>
|
||||||
@ -86,39 +152,28 @@ Treść komunikatu</textarea
|
|||||||
>
|
>
|
||||||
Tryb overflow
|
Tryb overflow
|
||||||
</label>
|
</label>
|
||||||
|
<input type="checkbox" id="guides" onchange="reguides()" checked /><label
|
||||||
|
for="guides"
|
||||||
|
>
|
||||||
|
Pokaż prowadnice
|
||||||
|
</label>
|
||||||
|
<pre id="stats"></pre>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h2>Twitter</h2>
|
<h2>Twitter</h2>
|
||||||
<div
|
<div id="container" style="">
|
||||||
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">
|
<div id="text_box">
|
||||||
|
<img src="./logo.png" id="logo" />
|
||||||
<p
|
<p
|
||||||
id="text_target"
|
id="text_target"
|
||||||
style="font-size: calc(var(--scale) * 16px); padding: var(--padding);"
|
style="
|
||||||
|
font-size: calc(var(--scale) * 16px);
|
||||||
|
padding: 0 calc(var(--padding) * var(--scale));
|
||||||
|
line-height: calc(var(--padding) * var(--scale));
|
||||||
|
"
|
||||||
>
|
>
|
||||||
Treść komunikatu
|
Treść komunikatu
|
||||||
</p>
|
</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;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
id="image_box"
|
id="image_box"
|
||||||
@ -148,6 +203,13 @@ Treść komunikatu</textarea
|
|||||||
"
|
"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="overlay overlay--margin overlay--margin-left">
|
||||||
|
ucięte z lewej, widoczne tylko po kliknięciu
|
||||||
|
</div>
|
||||||
|
<div class="overlay overlay--margin overlay--margin-right">
|
||||||
|
ucięte z prawej, widoczne tylko po kliknięciu
|
||||||
|
</div>
|
||||||
|
<div class="overlay overlay--thumbnail">widoczne na miniaturce</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
@ -167,7 +229,7 @@ Treść komunikatu</textarea
|
|||||||
overflow_size: [733, 723],
|
overflow_size: [733, 723],
|
||||||
},
|
},
|
||||||
"LinkedIn - 2 zdjęcia": {
|
"LinkedIn - 2 zdjęcia": {
|
||||||
thumbnail_size: [270, 552],
|
thumbnail_size: [250, 355],
|
||||||
overflow_size: [733, 723],
|
overflow_size: [733, 723],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -191,6 +253,7 @@ Treść komunikatu</textarea
|
|||||||
|
|
||||||
function refreshText() {
|
function refreshText() {
|
||||||
text_target.innerHTML = text.value.replace(/\n/, "<br/>");
|
text_target.innerHTML = text.value.replace(/\n/, "<br/>");
|
||||||
|
restats();
|
||||||
}
|
}
|
||||||
const refreshImage = async () => {
|
const refreshImage = async () => {
|
||||||
image.style.backgroundImage = `url("${await toBase64(file.files[0])}")`;
|
image.style.backgroundImage = `url("${await toBase64(file.files[0])}")`;
|
||||||
@ -205,8 +268,11 @@ Treść komunikatu</textarea
|
|||||||
const [overflow_width, overflow_height] = sizes[size.value].overflow_size;
|
const [overflow_width, overflow_height] = sizes[size.value].overflow_size;
|
||||||
body.style.setProperty("--width", width + "px");
|
body.style.setProperty("--width", width + "px");
|
||||||
body.style.setProperty("--height", height + "px");
|
body.style.setProperty("--height", height + "px");
|
||||||
|
body.style.setProperty("--width-int", width);
|
||||||
|
body.style.setProperty("--height-int", height);
|
||||||
body.style.setProperty("--overflow-width", overflow_width + "px");
|
body.style.setProperty("--overflow-width", overflow_width + "px");
|
||||||
body.style.setProperty("--overflow-height", overflow_height + "px");
|
body.style.setProperty("--overflow-height", overflow_height + "px");
|
||||||
|
restats();
|
||||||
};
|
};
|
||||||
|
|
||||||
function rescale() {
|
function rescale() {
|
||||||
@ -214,6 +280,7 @@ Treść komunikatu</textarea
|
|||||||
.querySelector("body")
|
.querySelector("body")
|
||||||
.style.setProperty("--scale", scale_picker.value);
|
.style.setProperty("--scale", scale_picker.value);
|
||||||
resize();
|
resize();
|
||||||
|
restats();
|
||||||
}
|
}
|
||||||
|
|
||||||
function reoverflow() {
|
function reoverflow() {
|
||||||
@ -223,6 +290,39 @@ Treść komunikatu</textarea
|
|||||||
} else {
|
} else {
|
||||||
container.classList.remove("overflow");
|
container.classList.remove("overflow");
|
||||||
}
|
}
|
||||||
|
restats();
|
||||||
|
}
|
||||||
|
|
||||||
|
function reguides() {
|
||||||
|
const should_guides = guides.checked;
|
||||||
|
if (should_guides) {
|
||||||
|
body.classList.add("guides");
|
||||||
|
} else {
|
||||||
|
body.classList.remove("guides");
|
||||||
|
}
|
||||||
|
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
|
||||||
|
}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
refreshText();
|
refreshText();
|
||||||
@ -230,6 +330,8 @@ Treść komunikatu</textarea
|
|||||||
resize();
|
resize();
|
||||||
rescale();
|
rescale();
|
||||||
reoverflow();
|
reoverflow();
|
||||||
|
reguides();
|
||||||
|
restats();
|
||||||
|
|
||||||
text.oninput = refreshText;
|
text.oninput = refreshText;
|
||||||
file.onchange = refreshImage;
|
file.onchange = refreshImage;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user