Patrik Janosdeak
3 years ago
parent
8b06c84646
commit
c0a8af44c0
|
After Width: | Height: | Size: 83 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="cs">
|
||||||
|
<head>
|
||||||
|
<title>N.E.B.E.</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="stylesheet" href="style.scss" type="text/css" media="screen">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<!-- Tags <aside> will not get rendered -->
|
||||||
|
<!-- For development, toggle preview by pressing "d" -->
|
||||||
|
<aside class="background">
|
||||||
|
<img src="background.jpg" alt="">
|
||||||
|
<img src="preview.jpg" class="development" alt="">
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Bleed marks wrapper -->
|
||||||
|
<div class="marks">
|
||||||
|
<!-- Slots -->
|
||||||
|
<article data-slot="headline" contenteditable="true">Kitty financial services</article>
|
||||||
|
<article data-slot="discount" contenteditable="true">20</article>
|
||||||
|
<article data-image-slot="image"><img src="../assets/product.svg" alt=""></article>
|
||||||
|
<article data-slot="name">Maneki-neko cat</article>
|
||||||
|
<article data-slot="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, ipsum!</article>
|
||||||
|
|
||||||
|
<div class="price-old-wrapper">
|
||||||
|
<img src="../assets/flag-blue.svg" class="ribbon" alt="">
|
||||||
|
<article data-slot="price_old" contenteditable="true">89</article>
|
||||||
|
<img src="../assets/line-blue.svg" class="line" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-wrapper">
|
||||||
|
<img src="../assets/flag-orange.svg" class="ribbon" alt="">
|
||||||
|
<article data-slot="price" contenteditable="true">79</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
<script src="https://cdn.nebe.app/store/utils/dist/fit.min.js"></script>
|
||||||
|
<script src="../assets/scripts.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 247 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,152 @@
|
|||||||
|
$leftMarks: 0mm;
|
||||||
|
$rightMarks: 0mm;
|
||||||
|
$topMarks: 0mm;
|
||||||
|
$bottomMarks: 0mm;
|
||||||
|
|
||||||
|
// Rozměry tiskoviny bez ořezek (stejné jako název složky)
|
||||||
|
$width: 210mm;
|
||||||
|
$height: 297mm;
|
||||||
|
|
||||||
|
@import '../assets/main';
|
||||||
|
@import '../assets/fonts';
|
||||||
|
|
||||||
|
article[data-slot="headline"] {
|
||||||
|
position: absolute;
|
||||||
|
width: 170mm;
|
||||||
|
height: 2.6em;
|
||||||
|
top: 23mm;
|
||||||
|
left: 20mm;
|
||||||
|
color: #22a875;
|
||||||
|
font-family: CallingCodeBold, sans-serif;
|
||||||
|
font-size: 54pt;
|
||||||
|
line-height: 52pt;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
article[data-slot="name"] {
|
||||||
|
position: absolute;
|
||||||
|
width: 107mm;
|
||||||
|
top: 223mm;
|
||||||
|
left: 14mm;
|
||||||
|
font-family: CallingCodeBold, sans-serif;
|
||||||
|
font-size: 21pt;
|
||||||
|
color: #4f46de;
|
||||||
|
}
|
||||||
|
|
||||||
|
article[data-slot="description"] {
|
||||||
|
position: absolute;
|
||||||
|
width: 107mm;
|
||||||
|
top: 235mm;
|
||||||
|
left: 14mm;
|
||||||
|
font-family: DINProRegular, sans-serif;
|
||||||
|
font-size: 11.4pt;
|
||||||
|
line-height: 19pt;
|
||||||
|
color: #1c0c3e;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 6.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
article[data-slot="price_old"] {
|
||||||
|
position: relative;
|
||||||
|
color: #ffffff;
|
||||||
|
padding-left: 12mm;
|
||||||
|
font-family: DINProBold, sans-serif;
|
||||||
|
font-size: 20pt;
|
||||||
|
line-height: 1;
|
||||||
|
text-align: right;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-size: 37pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-old-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 208mm;
|
||||||
|
right: 2mm;
|
||||||
|
height: 16mm;
|
||||||
|
padding: 1.2mm 4mm 0 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: left center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 224mm;
|
||||||
|
right: 2mm;
|
||||||
|
padding: 2.5mm 5mm;
|
||||||
|
height: 31mm;
|
||||||
|
|
||||||
|
img {
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: left center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
article[data-slot="price"] {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 8mm;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: DINProBold, sans-serif;
|
||||||
|
font-size: 38pt;
|
||||||
|
line-height: 1;
|
||||||
|
text-align: right;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-size: 72pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 20pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
article[data-slot="discount"] {
|
||||||
|
position: absolute;
|
||||||
|
top: 80mm;
|
||||||
|
left: 150mm;
|
||||||
|
height: 39mm;
|
||||||
|
width: 45mm;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-family: DINProBold, sans-serif;
|
||||||
|
font-size: 59pt;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: -1mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
article[data-image-slot="image"] {
|
||||||
|
position: absolute;
|
||||||
|
top: 70mm;
|
||||||
|
left: 30mm;
|
||||||
|
width: 145mm;
|
||||||
|
height: 145mm;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: center center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,2 +1,6 @@
|
|||||||
# print
|
# Ukázková šablona pro tiskové kreativy
|
||||||
|
|
||||||
|
Při vyměně souborů `preview.pdf` a `background.pdf` je vždy potřeba přegenerovat
|
||||||
|
PNG náhledy příkazem `nebe convert-pdf`
|
||||||
|
|
||||||
|
Před prvním použitím je ale potřeba zadat tyto příkazy: `brew install graphicsmagick` a `brew install ghostscript`
|
||||||
|
|||||||
|
After Width: | Height: | Size: 508 B |
|
After Width: | Height: | Size: 745 B |
@ -0,0 +1,14 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: DINProRegular;
|
||||||
|
src: url(https://cdn.nebe.app/demo/fonts/DINPro-Regular.ttf) format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: DINProBold;
|
||||||
|
src: url(https://cdn.nebe.app/demo/fonts/DINPro-Bold.ttf) format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: CallingCodeBold;
|
||||||
|
src: url(https://cdn.nebe.app/demo/fonts/callingcode-bold.otf) format("opentype");
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 485 B |
@ -0,0 +1,109 @@
|
|||||||
|
/**
|
||||||
|
* Tento soubor není potřeba upravovat
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Základní tiskové styly
|
||||||
|
*/
|
||||||
|
$totalWidth: $width + $leftMarks + $rightMarks;
|
||||||
|
$totalHeight: $height + $topMarks + $bottomMarks;
|
||||||
|
|
||||||
|
@page {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
size: $totalWidth $totalHeight;
|
||||||
|
marks: none;
|
||||||
|
bleed: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
-webkit-print-color-adjust: exact;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-rendering: geometricprecision !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body, html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hlavní oblast obsahující sloty
|
||||||
|
*/
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
width: $totalWidth;
|
||||||
|
height: $totalHeight;
|
||||||
|
|
||||||
|
html.is-development & {
|
||||||
|
outline: 1px solid blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Netisknutelné elementy (pozadí/náhled)
|
||||||
|
*/
|
||||||
|
aside {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: $totalWidth;
|
||||||
|
height: $totalHeight;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.development {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
html.is-development & {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Dynamický slot
|
||||||
|
*/
|
||||||
|
article {
|
||||||
|
&.is-highlighted {
|
||||||
|
background-color: rgba(75, 168, 46, .8);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.is-development & {
|
||||||
|
outline: 1px solid red;
|
||||||
|
background-color: rgba(255, 0, 0, .2);
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ořezová oblast
|
||||||
|
*/
|
||||||
|
.marks {
|
||||||
|
position: absolute;
|
||||||
|
top: $topMarks;
|
||||||
|
left: $leftMarks;
|
||||||
|
width: $width;
|
||||||
|
height: $height;
|
||||||
|
|
||||||
|
html.is-development & {
|
||||||
|
outline: 1px solid green;
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 9.1 KiB |
@ -0,0 +1,60 @@
|
|||||||
|
document.addEventListener('keydown', (event) => {
|
||||||
|
if (event.key.toLowerCase() === 'd') {
|
||||||
|
document.querySelector('html').classList.toggle('is-development');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.LOAD_IMAGE = src => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
let img = new Image();
|
||||||
|
img.onload = () => resolve(img);
|
||||||
|
img.onerror = (error) => reject(error);
|
||||||
|
img.src = src;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
window.FILL = async (inputs) => {
|
||||||
|
window.clickTag = inputs.url;
|
||||||
|
|
||||||
|
const textSlots = ['headline', 'price', 'price_old', 'discount', 'name', 'description'];
|
||||||
|
|
||||||
|
textSlots.forEach((slotName) => {
|
||||||
|
const slotElement = document.querySelector(`article[data-slot="${slotName}"]`);
|
||||||
|
|
||||||
|
if (slotElement) {
|
||||||
|
slotElement.innerHTML = inputs[slotName];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const imageEl = document.querySelector(`article[data-image-slot="image"]`);
|
||||||
|
const hasImage = inputs.image && inputs.image.indexOf('http') === 0;
|
||||||
|
|
||||||
|
if (hasImage) {
|
||||||
|
await window.LOAD_IMAGE(inputs.image);
|
||||||
|
imageEl.innerHTML = `<img src="${inputs.image}" alt="">`;
|
||||||
|
imageEl.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
console.warn(`Nebylo definován obrázek`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reformat old price
|
||||||
|
const priceOldEl = document.querySelector(`article[data-slot="price_old"]`);
|
||||||
|
const priceOld = priceOldEl.textContent.replace(/\D/g, '');
|
||||||
|
priceOldEl.innerHTML= `<strong>${parseInt(priceOld).toLocaleString('cs')}</strong> €`;
|
||||||
|
|
||||||
|
// Reformat price
|
||||||
|
const priceEl = document.querySelector(`article[data-slot="price"]`);
|
||||||
|
const price = priceEl.textContent.replace(/\D/g, '');
|
||||||
|
priceEl.innerHTML = `<small>only</small> <strong>${parseInt(price).toLocaleString('cs')}</strong> €`;
|
||||||
|
|
||||||
|
// Reformat discount
|
||||||
|
const discountEl = document.querySelector(`article[data-slot="discount"]`);
|
||||||
|
const discount = discountEl.textContent.replace(/\D/g, '');
|
||||||
|
discountEl.textContent = `-${parseInt(discount).toLocaleString('cs')}`;
|
||||||
|
|
||||||
|
// Headline
|
||||||
|
await window.FIT(document.querySelector('article[data-slot="headline"]'));
|
||||||
|
|
||||||
|
// Name
|
||||||
|
await window.FIT(document.querySelector('article[data-slot="name"]'));
|
||||||
|
};
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"name": "Demo Print",
|
||||||
|
"format": "print",
|
||||||
|
"description": "Template for creating print campaigns",
|
||||||
|
"tags": [
|
||||||
|
"Demo"
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"price_old": {
|
||||||
|
"label": "Old price",
|
||||||
|
"value": "89",
|
||||||
|
"prefill": true
|
||||||
|
},
|
||||||
|
"price": {
|
||||||
|
"label": "Price",
|
||||||
|
"value": "79",
|
||||||
|
"prefill": true
|
||||||
|
},
|
||||||
|
"discount": {
|
||||||
|
"label": "Discount",
|
||||||
|
"value": "20",
|
||||||
|
"prefill": true
|
||||||
|
},
|
||||||
|
"headline": {
|
||||||
|
"label": "Headline",
|
||||||
|
"value": "Kitty financial services"
|
||||||
|
},
|
||||||
|
"name": {
|
||||||
|
"label": "Name",
|
||||||
|
"value": "Maneki-neko cat"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"label": "Description",
|
||||||
|
"value": "Dolor at venenatis convallis lorem curae id curae inceptos interdum sociosqu lobortis maecenas lobortis cras consectetur dictum mi nascetur nulla torquent integer fusce."
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"label": "Product image",
|
||||||
|
"value": "https://cdn.nebe.app/demo/products/cat.svg",
|
||||||
|
"type": "image"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue