diff --git a/300x600/background.jpg b/300x600/background.jpg new file mode 100644 index 0000000..4fa0476 Binary files /dev/null and b/300x600/background.jpg differ diff --git a/300x600/badge.png b/300x600/badge.png new file mode 100644 index 0000000..e5492d8 Binary files /dev/null and b/300x600/badge.png differ diff --git a/300x600/index.html b/300x600/index.html new file mode 100644 index 0000000..3ac1fc8 --- /dev/null +++ b/300x600/index.html @@ -0,0 +1,55 @@ + + + + N.E.B.E. + + + + + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+ 5 year warranty +
+
+ +
+
€
+
+ +
+
+ + +
+ +
+
+
+ + +
+ + + + + + + diff --git a/300x600/logo.png b/300x600/logo.png new file mode 100644 index 0000000..707e583 Binary files /dev/null and b/300x600/logo.png differ diff --git a/300x600/style.scss b/300x600/style.scss new file mode 100644 index 0000000..358c2db --- /dev/null +++ b/300x600/style.scss @@ -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; +} diff --git a/README.md b/README.md index 5099ab5..e9f018d 100644 --- a/README.md +++ b/README.md @@ -1,2 +1 @@ -# html - +# Ukázková šablona pro HTML kreativy diff --git a/assets/flag-orange.svg b/assets/flag-orange.svg new file mode 100644 index 0000000..bc2d246 --- /dev/null +++ b/assets/flag-orange.svg @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/assets/main.scss b/assets/main.scss new file mode 100644 index 0000000..f146da3 --- /dev/null +++ b/assets/main.scss @@ -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; +} diff --git a/assets/scripts.js b/assets/scripts.js new file mode 100644 index 0000000..867715c --- /dev/null +++ b/assets/scripts.js @@ -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 + "d" + hours + "h" + minutes + "m" + seconds + "s"; + + // If the count down is over, write some text + if (distance < 0) { + clearInterval(x); + document.getElementById("countdown").innerHTML = "SOUTĚŽ UKONČENA"; + } + }); +}; + + diff --git a/config.json b/config.json new file mode 100644 index 0000000..d550dcf --- /dev/null +++ b/config.json @@ -0,0 +1,9 @@ +{ + "name": "Demo HTML", + "description": "Template for HTML campaigns", + "tags": [ + "Demo", + "Template" + ], + "format": "html" +} diff --git a/schema.json b/schema.json new file mode 100644 index 0000000..6765fa3 --- /dev/null +++ b/schema.json @@ -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 + } +}