Move source code from github into gitea

master
Patrik Janosdeak 3 years ago
parent 38c426f2e3
commit 012dc063f2

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="cs" class="">
<head>
<title>N.E.B.E.</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.scss" type="text/css" media="screen"/>
<script>
window.clickTag = 'https://www.nebe.app';
</script>
</head>
<body>
<a href="javascript:window.EXIT()">
<main class="wrapper">
<div class="background"></div>
<div class="content">
<article class="headline"></article>
<article class="subheadline model"></article>
</div>
<div class="product-wrapper">
<div class="product"></div>
<div class="product__badge">
<span class="product__badge-text">5 year warranty</span>
</div>
</div>
<div class="product__price">
<article><span id="price" data-product-price></span></article>
</div>
<div class="countdown">
<div class="countdown__description"></div>
<span class="countdown__timer" id="countdown"></span>
</div>
<div class="cta">
<div class="cta__inner"></div>
</div>
<div class="logo">
<img src="logo.png" alt="N.E.B.E." width="30">
</div>
</main>
</a>
<script src="../assets/scripts.js"></script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 964 B

@ -0,0 +1,171 @@
@import '../assets/main';
$width: 300px;
$height: 600px;
.wrapper {
width: $width;
height: $height;
overflow: hidden;
font-family: DINProBold, sans-serif;
&:hover {
.cta {
transform: scale(1.1);
}
}
}
.background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(180deg, rgba(106,228,168,1) 0%, rgba(195,244,220,1) 100%);
}
.content {
width: 286px;
position: absolute;
top: 5px;
left: 6px;
height: 190px;
text-align: center;
padding: 0 20px;
}
.headline {
max-height: 2.4em;
margin-top: 20px;
font-family: CallingCodeBold, sans-serif;
color: #22a875;
font-size: 26px;
font-weight: 700;
line-height: 1.2;
overflow: hidden;
}
.subheadline {
font-family: DINProBold, sans-serif;
color: #4f46de;
font-size: 22px;
font-weight: 400;
margin-top: 30px;
}
.product-wrapper {
position: relative;
top: 180px;
left: calc((300px - 150px) / 2);
width: 150px;
height: 160px;
}
.product {
position: absolute;
top: 5px;
width: 100%;
height: 100%;
&__price {
position: absolute;
top: 340px;
right: 0;
font-family: DINProBold, sans-serif;
font-size: 27px;
font-weight: 800;
line-height: 1;
background-image: url("../assets/flag-orange.svg");
background-size: cover;
background-position: left;
background-repeat: no-repeat;
padding: 10px 10px 10px 30px;
color: $color-white;
overflow: hidden;
white-space: nowrap;
backface-visibility: hidden;
}
&__badge {
position: absolute;
top: 20px;
left: -50px;
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: url("badge.png");
background-size: contain;
overflow: hidden;
padding: 25px;
text-align: center;
z-index: 3;
&-text {
font-size: 12px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.2;
text-transform: uppercase;
color: $color-white;
}
}
}
.countdown {
position: absolute;
top: 405px;
left: calc((300px - 230px) / 2);
min-width: 230px;
color: #1c0c3e;
font-family: CallingCodeBold, sans-serif;
text-align: center;
&__description {
font-size: 18px;
font-weight: bold;
}
&__timer {
display: inline-block;
margin-top: 5px;
min-width: 220px;
font-size: 24px;
> span {
font-size: 16px;
margin-right: 8px;
}
}
}
.cta {
position: absolute;
top: 490px;
left: calc((300px - 160px) / 2);
width: 160px;
z-index: 1;
transition: transform 0.4s ease-in-out;
will-change: transform;
&__inner {
position: relative;
width: 100%;
height: 48px;
background-color: #4f46de;
display: inline-block;
text-align: center;
line-height: 48px;
font-weight: 700;
color: $color-white;
}
}
.logo {
position: absolute;
bottom: 10px;
right: 20px;
}

@ -1,2 +1 @@
# html # Ukázková šablona pro HTML kreativy

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 140.5 44.5" style="enable-background:new 0 0 140.5 44.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="22.245" x2="140.47" y2="22.245">
<stop offset="3.810000e-02" style="stop-color:#F4953C"/>
<stop offset="1" style="stop-color:#FD7F24"/>
</linearGradient>
<polygon class="st0" points="111.7,0 0,0 13.3,22.2 0,44.5 111.7,44.5 140.5,44.5 140.5,0 "/>
</svg>

After

Width:  |  Height:  |  Size: 745 B

@ -0,0 +1,47 @@
$color-white: #ffffff;
$color-black: #000000;
$color-red: #ff0000 ;
@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");
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.wrapper {
position: relative;
display: block;
font-family: 'Roboto', sans-serif;
color: $color-white;
}
a {
display: inline-block;
}
.product {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}

@ -0,0 +1,61 @@
window.FILL = async (inputs) => {
window.clickTag = inputs.link;
const backgroundeEl = document.querySelector('.background');
const headlineEl = document.querySelector('.headline');
const modellEl = document.querySelector('.model');
const badgeEl = document.querySelector('.product__badge');
const countdownTextEl = document.querySelector('.countdown__description');
const ctaEl = document.querySelector('.cta__inner');
backgroundeEl.style.background = inputs.background;
headlineEl.innerHTML = inputs.headline;
modellEl.innerHTML = inputs.model;
countdownTextEl.innerHTML = inputs.countdown_text;
ctaEl.innerHTML = inputs.cta;
if (inputs.badge === 'Ano') {
badgeEl.style.display = 'flex';
} else {
badgeEl.style.display = 'none';
}
document.querySelector('[data-product-price]').innerHTML = inputs.price;
document.querySelector('.product').style.backgroundImage = `url("${inputs.image_link}")`;
if (!document.querySelector('.product').style.backgroundImage.length) {
throw new Error('Image is not inserted into template');
}
// Set the date we're counting down to
let countDownDate = new Date(`${inputs.countdown_date}`).getTime();
// Update the count down every 1 second
let x = setInterval(function () {
// Get today's date and time
let now = new Date().getTime();
// Find the distance between now and the count down date
let distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in the element
document.getElementById("countdown").innerHTML =
days + "<span>d</span>" + hours + "<span>h</span>" + minutes + "<span>m</span>" + seconds + "<span>s</span>";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "<span>SOUTĚŽ UKONČENA</span>";
}
});
};

@ -0,0 +1,9 @@
{
"name": "Demo HTML",
"description": "Template for HTML campaigns",
"tags": [
"Demo",
"Template"
],
"format": "html"
}

@ -0,0 +1,58 @@
{
"background": {
"label": "Background CSS",
"description": "Příklad: rgba(106,228,168,1)",
"value": "linear-gradient(180deg, rgba(106,228,168,1) 0%, rgba(195,244,220,1) 100%)",
"prefill": true
},
"headline": {
"label": "Nadpis",
"value": "Kitty financial services",
"prefill": true
},
"model": {
"label": "Model",
"value": "Maneki-neko cat",
"prefill": true
},
"badge": {
"label": "Zobrazit badge",
"value": "Ano",
"type": "enum",
"options": [
"Ano",
"Ne"
],
"prefill": true
},
"image_link": {
"label": "URL obrázku",
"type": "url",
"value": "https://cdn.nebe.app/demo/print/product.svg"
},
"price": {
"label": "Cena",
"value": "80"
},
"countdown_text": {
"label": "Text: Kdy končí nabídka",
"value": "Offer expires on",
"prefill": true
},
"countdown_date": {
"label": "Hodnota: Kdy končí nabídka",
"description": "Javascript formát, např. Dec 30, 2020 00:00:00",
"value": "Dec 30, 2020 00:00:00",
"prefill": true
},
"cta": {
"label": "Text CTA tlačítka",
"value": "Buy",
"prefill": true
},
"link": {
"label": "Odkaz",
"value": "https://www.nebe.app/app",
"prefill": true
}
}
Loading…
Cancel
Save