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