diff --git a/1920x1080/audio.mp3 b/1920x1080/audio.mp3
new file mode 100644
index 0000000..3e2fea6
Binary files /dev/null and b/1920x1080/audio.mp3 differ
diff --git a/1920x1080/blue.jpg b/1920x1080/blue.jpg
new file mode 100644
index 0000000..7e38c12
Binary files /dev/null and b/1920x1080/blue.jpg differ
diff --git a/1920x1080/index.html b/1920x1080/index.html
new file mode 100644
index 0000000..c017822
--- /dev/null
+++ b/1920x1080/index.html
@@ -0,0 +1,34 @@
+
+
+
+ Video example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/1920x1080/script.js b/1920x1080/script.js
new file mode 100644
index 0000000..642c00d
--- /dev/null
+++ b/1920x1080/script.js
@@ -0,0 +1,96 @@
+import audioFile from './audio.mp3';
+import videoFile from './video.mp4';
+
+window.RENDER = {
+ duration: 21.42,
+ audio_layers: [
+ { start: 0, file: audioFile.toString() }
+ ],
+ video_layers: [
+ { start: 0, file: videoFile.toString() }
+ ],
+ render_parts: [
+ { start: 4.5, end: 6.25 }, // Jackpot animation
+ { start: 17.5, end: 20.5 }, // Dealer animation
+ ]
+};
+
+window.FILL = async (inputs) => {
+ // Fill jackpot
+
+ const jackpotRaw = String(inputs.jackpot);
+ const jackpotDigits = jackpotRaw.replace(/\D+/g, '');
+ const jackpotPadded = '00000000' + jackpotDigits;
+ const jackpot = jackpotPadded.substr(jackpotPadded.length - 8);
+
+ let jackpotHTML = '';
+ for (let i = 0; i < 8; i++) {
+ jackpotHTML += `${jackpot[i]}
`;
+ }
+ const jackpotEl = document.querySelector('article.jackpot');
+ jackpotEl.innerHTML = jackpotHTML;
+
+ // Fill dealer info
+
+ const nameEl = document.querySelector('.dealer-name');
+ nameEl.innerHTML = `${inputs.name||''}`;
+
+ const addressEl = document.querySelector('.dealer-address');
+ addressEl.innerHTML = `${inputs.address||''}`;
+
+ const cityEl = document.querySelector('.dealer-city');
+ cityEl.innerHTML = `${inputs.postal_code||''} ${inputs.city||''}`;
+
+ const phoneEl = document.querySelector('.dealer-phone');
+ phoneEl.innerHTML = `${inputs.phone||''}`;
+
+ const urlEl = document.querySelector('.dealer-url');
+ urlEl.innerHTML = `${inputs.url||''}`;
+
+ const logoEl = document.querySelector('.dealer-logo');
+ logoEl.innerHTML = `
`;
+
+ // Jackpot animation
+
+ const digitClasses = ['.digit6', '.digit2', '.digit3', '.digit7', '.digit1', '.digit5', '.digit0', '.digit4'];
+ const digitEls = digitClasses.map((className) => {
+ return document.querySelector(className);
+ });
+
+ console.log(digitEls);
+ console.log(jackpotEl);
+
+ window.TIMELINE
+ .fromTo(jackpotEl, 2, {scale: 1.05}, {scale: 1}, 4.5)
+ .staggerFromTo(digitEls, .2, {opacity: 0}, {opacity: 1}, 0.1, 4.73)
+ .set(digitEls, {opacity: 0}, 6.24);
+
+ // Dealer info animations
+
+ function shuffle(a) {
+ for (let i = a.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [a[i], a[j]] = [a[j], a[i]];
+ }
+ return a;
+ }
+
+ const nameSplitText = new SplitText([nameEl, addressEl, cityEl, phoneEl, urlEl], {type: 'chars'});
+ const shuffledChars = shuffle(nameSplitText.chars);
+
+ console.log(shuffledChars);
+ console.log(logoEl);
+
+ const blueEl = document.querySelector('.blue');
+ console.log(blueEl);
+
+ window.TIMELINE
+ .set(nameSplitText.chars, {opacity: 0}, 0)
+ .set(logoEl, {opacity: 0}, 0)
+ .fromTo(blueEl, 0.11, {opacity: 0}, {opacity: 1}, 17.54)
+ .staggerFromTo(shuffledChars, .2, {opacity: 0, scale: 1.2, y: 10}, {opacity: 1, scale: 1, y: 0}, 0.01, 17.6)
+ .fromTo(logoEl, .2, {opacity: 0}, {opacity: 1}, 18)
+ .staggerTo(shuffledChars, .2, {opacity: 0, scale: 0.8, y: -10}, 0.01, 19.5)
+ .to(logoEl, .2, {opacity: 0}, 19.5)
+ .to(blueEl, 0.05, {opacity: 0}, 20.44);
+};
diff --git a/1920x1080/style.scss b/1920x1080/style.scss
new file mode 100644
index 0000000..1db4d4c
--- /dev/null
+++ b/1920x1080/style.scss
@@ -0,0 +1,138 @@
+$width: 1920px;
+$height: 1080px;
+
+@font-face {
+ font-family: "Calling Code";
+ font-weight: 700;
+ src: url('../assets/callingcode-bold.otf');
+}
+
+@font-face {
+ font-family: "Calling Code";
+ font-weight: 400;
+ src: url('../assets/callingcode-regular.otf');
+}
+
+@font-face {
+ font-family: DINPro;
+ font-weight: 900;
+ src: url('../assets/DINPro-Black.otf');
+}
+
+@font-face {
+ font-family: DINPro;
+ font-weight: 700;
+ src: url('../assets/DINPro-Bold.ttf');
+}
+
+@font-face {
+ font-family: DINPro;
+ font-weight: 400;
+ src: url('../assets/DINPro-Regular.ttf');
+}
+
+@font-face {
+ font-family: DINPro;
+ font-weight: 300;
+ src: url('../assets/DINPro-Light.ttf');
+}
+
+*,
+*:before,
+*:after {
+ box-sizing: border-box;
+}
+
+body {
+ padding: 0 0 100px 0;
+ margin: 0;
+ font-family: DINPro, sans-serif;
+ font-weight: 400;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+main {
+ position: relative;
+ width: $width;
+ height: $height;
+ overflow: hidden;
+ background: transparent;
+}
+
+.jackpot, .jackpot div, .blue, .dealer, .dealer article, .dealer img {
+ backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+ transform: translateZ(0);
+ will-change: transform;
+}
+
+.jackpot {
+ position: absolute;
+ top: 550px;
+ left: 825px;
+ height: 55px;
+ //outline: 1px solid red;
+ width: 435px;
+ text-align: center;
+
+ div {
+ text-align: center;
+ display: inline-block;
+ font-size: 61px;
+ line-height: 75px;
+ width: 42.5px;
+ margin: 0 5px 0 5px;
+ font-weight: 900;
+ background: #6CE9B0;
+ color: #000;
+ opacity: 0;
+ border-radius: 10px;
+ }
+}
+
+.blue {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: $width;
+ height: $height;
+ background: url("blue.jpg");
+ opacity: 0;
+ pointer-events: none;
+}
+
+.dealer-wrapper {
+ position: absolute;
+ top: 200px;
+ width: $width;
+ text-align: center;
+ height: 800px;
+}
+
+.dealer {
+ //outline: 1px solid red;
+ padding-left: 100px;
+ padding-right: 100px;
+ width: auto;
+ margin: 0 auto;
+ display: inline-block;
+ text-align: left;
+ font-size: 90px;
+ font-weight: 700;
+ color: #7E2ECB;
+ font-family: "Calling Code", sans-serif;
+
+ article {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ img {
+ width: 300px;
+ height: 200px;
+ object-fit: contain;
+ object-position: left center;
+ }
+}
diff --git a/1920x1080/video.mp4 b/1920x1080/video.mp4
new file mode 100644
index 0000000..b2d5a9f
Binary files /dev/null and b/1920x1080/video.mp4 differ
diff --git a/README.md b/README.md
index 19c01e4..eb94f8d 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,34 @@
-# video
+# Ukázková šablona pro video kreativy
+Ffmpeg helpers:
+
+```
+Install ffmpeg
+brew install ffmpeg
+
+Get info
+ffprobe video.mp4
+
+Get length of video
+ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 video.mp4
+
+Convert from mov to mp4
+ffmpeg -i input.mov output.mp4
+
+Convert to webm format
+ffmpeg -i input.mov -f webm -c:v libvpx -b:v 2M -acodec libvorbis -auto-alt-ref 0 out3.webm -hide_banner
+ffmpeg -i input.mov -c:v libvpx-vp9 -b:v 2M -pix_fmt yuva420p out4.webm
+
+Extract part of video
+ffmpeg -ss 53.8 -i video.mp4 -t 21.122667 -c copy output.mp4
+
+Extract audio from video
+ffmpeg -i video.mp4 -vn audio.mp3
+ffmpeg -i video.mp4 -vn -acodec copy audio.mp3
+
+Extract video without audio
+ffmpeg -i video.mp4 -c copy -an video-noaudio.mp4
+
+Volume up audio
+ffmpeg -y -i jingle.wav -filter_complex "[0:0]volume=2.0[out]" -map "[out]" jingle20.wav
+```
diff --git a/assets/DINPro-Black.otf b/assets/DINPro-Black.otf
new file mode 100644
index 0000000..2092a7b
Binary files /dev/null and b/assets/DINPro-Black.otf differ
diff --git a/assets/DINPro-Bold.ttf b/assets/DINPro-Bold.ttf
new file mode 100644
index 0000000..4785f8f
Binary files /dev/null and b/assets/DINPro-Bold.ttf differ
diff --git a/assets/DINPro-Light.ttf b/assets/DINPro-Light.ttf
new file mode 100644
index 0000000..508e4e7
Binary files /dev/null and b/assets/DINPro-Light.ttf differ
diff --git a/assets/DINPro-Regular.ttf b/assets/DINPro-Regular.ttf
new file mode 100644
index 0000000..227d8fe
Binary files /dev/null and b/assets/DINPro-Regular.ttf differ
diff --git a/assets/callingcode-bold.otf b/assets/callingcode-bold.otf
new file mode 100644
index 0000000..b9855cc
Binary files /dev/null and b/assets/callingcode-bold.otf differ
diff --git a/assets/callingcode-regular.otf b/assets/callingcode-regular.otf
new file mode 100644
index 0000000..c73af05
Binary files /dev/null and b/assets/callingcode-regular.otf differ
diff --git a/config.json b/config.json
new file mode 100644
index 0000000..831b70b
--- /dev/null
+++ b/config.json
@@ -0,0 +1,9 @@
+{
+ "name": "Demo Video",
+ "description": "Nastavitelný jackpot a adresa",
+ "tags": [
+ "Template",
+ "Demo"
+ ],
+ "format": "video"
+}
diff --git a/schema.json b/schema.json
new file mode 100644
index 0000000..e24d2bd
--- /dev/null
+++ b/schema.json
@@ -0,0 +1,41 @@
+{
+ "jackpot": {
+ "label": "Ukázkový jackpot",
+ "value": "96457823"
+ },
+ "name": {
+ "label": "Název pobočky",
+ "value": "Mánes a syn"
+ },
+ "address": {
+ "label": "Adresa",
+ "value": "Mánesova 625"
+ },
+ "postal_code": {
+ "label": "PSČ",
+ "value": "123 45"
+ },
+ "city": {
+ "label": "Město",
+ "value": "Benešov"
+ },
+ "phone": {
+ "label": "Telefon",
+ "value": "Tel.: 789 456 123"
+ },
+ "url": {
+ "label": "Webová adresa",
+ "value": "www.manes-a-syn.cz",
+ "type": "url"
+ },
+ "logo_horizontal": {
+ "label": "Horizontální logo",
+ "value": "https://cdn.nebe.app/demo/products/cross.svg",
+ "type": "image"
+ },
+ "logo_vertical": {
+ "label": "Vertikální logo",
+ "value": "https://cdn.nebe.app/demo/products/cross.svg",
+ "type": "image"
+ }
+}