<!-- Mömax Menu Template --> <style type='text/css'> .spotPreviewDefault { width: 1920px; height: 1080px; } @font-face { font-family: 'Quintus'; src: url('fonts/Quintus_BOLD.ttf'); font-weight: 700; } @font-face { font-family: 'Quintus'; src: url('fonts/Quintus_REG.ttf'); font-weight: 500; } @font-face { font-family: 'ManusTrial'; src: url('fonts/Manus.ttf'); font-weight: 500; } {{divId}} .container { position: relative; width: 100%; height: 100%; overflow: hidden; background-image: url({{{mediaPath}}}content/media/public/media/moemax_tafel_bg_logo.png); color: white; } {{divId}} .content-wrapper { width: 100%; height: 100%; /*animation: fadeOut 1.0s ease 8.9s both;*/ } {{divId}} .text-header { position: absolute; top: 81px; left: 80px; font-family: 'ManusTrial'; font-size: 110px; max-width: 75%; animation: fadeIn 1s linear 0.5s both; } {{divId}} .product-container { position: absolute; left: 80px; top: 320px; } {{divId}} .item { position: relative; white-space: nowrap; height: 120px; width: 1450px; font-family: 'ManusTrial'; font-size: 90px; letter-spacing: -0.3px; color: #fff; } {{divId}} .labelField { position: relative; display: inline-block; height: 100px; width: auto; margin-right: 20px; } {{divId}} .subField { position: relative; display: inline-block; height: 100px; font-size: 55px; } {{divId}} .priceField { position: absolute; display: inline-block; top: 0px; left: 1448px; width: 300px; text-align: right; letter-spacing: 1px; height: 100px; } {{divId}} .item:nth-child(1) { animation: fadeIn 1.0s linear 1.0s both; } {{divId}} .item:nth-child(2) { animation: fadeIn 1.0s linear 1.2s both; } {{divId}} .item:nth-child(3) { animation: fadeIn 1.0s linear 1.4s both; } {{divId}} .item:nth-child(4) { animation: fadeIn 1.0s linear 1.6s both; } {{divId}} .item:nth-child(5) { animation: fadeIn 1.0s linear 1.8s both; } {{divId}} .item:nth-child(6) { animation: fadeIn 1.0s linear 2.0s both; } @keyframes fadeIn { from {opacity: 0;} to {opacity: 1.0;} } </style> <div class='container'> <div class='content-wrapper'> <div class='text-header'> <span>{{ headline }}</span> </div> <div class='product-container'> <div class='item'> <span class='labelField'>{{name1}}</span> <span class='subField'>{{sideDish1}}</span> <div class='priceField'>{{price1}}</div> </div> <div class='item'> <span class='labelField'>{{name2}}</span> <span class='subField'>{{sideDish2}}</span> <div class='priceField'>{{price2}}</div> </div> <div class='item'> <span class='labelField'>{{name3}}</span> <span class='subField'>{{sideDish3}}</span> <div class='priceField'>{{price3}}</div> </div> <div class='item'> <span class='labelField'>{{name4}}</span> <span class='subField'>{{sideDish4}}</span> <div class='priceField'>{{price4}}</div> </div> <div class='item'> <span class='labelField'>{{name5}}</span> <span class='subField'>{{sideDish5}}</span> <div class='priceField'>{{price5}}</div> </div> <div class='item'> <span class='labelField'>{{name6}}</span> <span class='subField'>{{sideDish6}}</span> <div class='priceField'>{{price6}}</div> </div> </div> </div> </div> <script type='text/javascript'> /*Split price by comma*/ function templateOnPlay{{playerId}}(player) { setTimeout(function(){ //Scale header text var header = fitty('.text-header span', { minSize: 60, maxSize: 110 }); header[0].fit(); //Scale product labels var widthSum = []; var counter = 0; $('.labelField').each(function(){ widthSum.push($(this).width()); }); $('.subField').each(function(){ widthSum[counter++] += $(this).width(); }); for(var idx in widthSum){ var factor = widthSum[idx]/($('.item').width()); if(factor > 1.0){ console.log('scale: '+idx+' by '+factor); var element = $($('.labelField').get(idx)); var currentSize = parseInt(element.css('font-size')); element.css('font-size', (currentSize / factor)+'px'); element = $($('.subField').get(idx)); currentSize = parseInt(element.css('font-size')); element.css('font-size', (currentSize / factor)+'px'); } } }, 100); } </script>