<!-- JT Empfang template 2 --> <style type='text/css'> .spotPreviewDefault { width: 1080px; height: 3840px; } @font-face { font-family: 'RobotoLight'; src: url('fonts/Roboto-Light.ttf'); } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto-Medium.ttf'); } @font-face { font-family: 'RobotoThin'; src: url('fonts/Roboto-Thin.ttf'); } {{divId}} .container { background-color: #fff; overflow:hidden; width: 100%; height: 100%; {{#equals border 'ja'}} margin: 33px; {{/equals}} } {{divId}} #videoPlayer { height: 100%; width: 100%; object-fit: cover; z-index: -100; right: 0; bottom: 0; overflow: hidden; } {{divId}} #logo { background-image: url(http://ds.jumptomorrow.tv/content/media/retailer/39/spot_image_591bff3f7e124.png); background-size: contain; background-position: 50% 50%; position: absolute; width: 200px; height: 200px; left: 100px; top: 100px; opacity: 0.7; } {{divId}} #bottom_screen { position: absolute; top: 1920px; left: 100px; right: 100px; width: 880px; height: 1920px; opacity: 0.7; } {{divId}} .clock { position: absolute; opacity: 0.7; top: 100px; right: 100px; color: white; } {{divId}} .time { position: relative; font-family: 'RobotoThin'; font-size: 110px; margin-bottom: -2px; } {{divId}} .day { position: relative; font-family: 'RobotoLight'; font-size: 30px; text-align: right; margin-bottom: 2px; } {{divId}} .date { position: relative; font-family: 'RobotoLight'; font-size: 30px; text-align: right; } {{divId}} #statistic_container { position: absolute; width: 880px; left: 100px; right: 100px; top: 500px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end; font-family: 'RobotoLight'; font-size: 40px; color: white; opacity: 0.7; } {{divId}} .statistic { display: block; width: 400px; margin-top: 150px; text-align: right; } {{divId}} .stat_val { font-size: 44px; } {{divId}} .stat_title { font-size: 36px; } {{divId}} .stat_icon { font-size: 50px; } {{divId}} .top_line { display: flex; justify-content: space-between; align-items: flex-end; } </style> <div class='container'> <video id='videoPlayer' crossOrigin='anonymous' loop> <source src='{{{video}}}' type='video/mp4'> </video> <div id='logo'></div> <div class='clock'> <div class='time'>15:35</div> <div class='day'>Monday</div> <div class='date'>15.05.2017</div> </div> <div id='statistic_container'> </div> <div id='bottom_screen'> </div> </div> <script> Date.prototype.stdTimezoneOffset = function() { var jan = new Date(this.getFullYear(), 0, 1); var jul = new Date(this.getFullYear(), 6, 1); return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset()); }; Date.prototype.dst = function() { return this.getTimezoneOffset() < this.stdTimezoneOffset(); }; /*Create unique namespace for template to avoid name collisions*/ var {{playerId}} = new function(){ var stats = []; var that = this; this.createStatDivs = function(){ var counter = 0; stats.forEach(function(stat){ var div = $('<div></div>'); div.addClass('statistic'); div.attr('id', 'stat'+counter); var topLine = $('<div></div>'); topLine.addClass('top_line'); var divIcon = $('<div></div>'); divIcon.addClass('stat_icon'); divIcon.append($('<i class="fa '+stat.icon+'" aria-hidden="true"></i>')); topLine.append(divIcon); var divVal = $('<div></div>'); divVal.addClass('stat_val'); topLine.append(divVal); div.append(topLine); div.append($('<hr />')); var divTitle = $('<div></div>'); divTitle.addClass('stat_title'); divTitle.text(stat.title); div.append(divTitle); $('{{divId}} #statistic_container').append(div); counter++; }); }; this.updateStats = function(){ var date = new Date(); var start = new Date(date.getFullYear(), date.getMonth(), date.getDate()); var ms = (date - start) / 1000; counter = 0; stats.forEach(function(stat){ stat.curVal = stat.speed * ms; var val = parseInt(stat.curVal)+''; var output = ''; for(var i=0; i<val.length; i++){ output += val.charAt(i); if((val.length - i) % 3 == 1 && i != val.length - 1)output += '.'; } $('{{divId}} #stat'+counter+' .stat_val').text(output); counter++; }); setTimeout(function(){that.updateStats();}, 50); }; stats.push({title: 'Tweets today', icon: 'fa-twitter', speed: 7617, curVal: 0}); stats.push({title: 'Google searches today', icon: 'fa-google', speed: 60366, curVal:  0}); stats.push({title: 'YouTube views today', icon: 'fa-youtube-play', speed: 69284, curVal: 0}); stats.push({title: 'GB Traffic today', icon: 'fa-globe', speed: 44717, curVal: 0}); stats.push({title: 'Skype calls today', icon: 'fa-skype', speed: 2589, curVal: 0}); stats.push({title: 'Emails sent today', icon: 'fa-envelope-o', speed: 2590098, curVal: 0}); this.createStatDivs(); this.updateStats(); this.updateClock = function(){ var d = new Date(); var dayNames = [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ]; var monthNames = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; var hour = d.getUTCHours(); if(d.dst()){ hour = hour+2; }else{ hour = hour+1; } hour = hour % 24; if(hour < 10)hour = '0'+hour; var minutes = d.getUTCMinutes(); if(minutes < 10)minutes = '0'+minutes; var day = d.getDay(); day = dayNames[day]; var date = d.getDate(); if(date < 10)date = '0'+date; var month = d.getMonth() + 1; if(month < 10)month = '0'+month; var year = d.getFullYear(); $('{{divId}} .time').first().text(hour+':'+minutes); $('{{divId}} .day').first().text(day); $('{{divId}} .date').first().text(date+'.'+month+'.'+year); setTimeout(function(){that.updateClock();}, 1000); }; }; $( document ).ready(function(){ {{playerId}}.updateClock(); }); </script>