<!-- EP Template --> <style type='text/css'> .spotPreviewDefault { width: 1920px; height: 1080px; } @font-face { font-family: 'Helvetica Neue Extra Black Condensed Oblique'; src: url('fonts/HelveticaNeueLTStd-BlkCnO.otf'); } @font-face { font-family: 'Helvetica Neue Bold Condensed'; src: url('fonts/HelveticaNeueLTStd-BdCn.otf'); } @font-face { font-family: 'Helvetica Neue Black Condensed'; src: url('fonts/HelveticaNeueLTStd-BlkCn.otf'); } @font-face { font-family: 'Helvetica Neue Medium Condensed'; src: url('fonts/HelveticaNeueLTStd-MdCn.otf'); } @font-face { font-family: 'Helvetica Neue Thin'; src: url('fonts/HelveticaNeueLTStd-Th.otf'); } @font-face { font-family: 'Helvetica Neue Light'; src: url('fonts/HelveticaNeueLTStd-Lt.otf'); } @font-face { font-family: 'Helvetica Neue Bold'; src: url('fonts/HelveticaNeueLTStd-Bd.otf'); } @font-face { font-family: 'Helvetica Neue Heavy'; src: url('fonts/HelveticaNeueLTStd-Hv.otf'); } @font-face { font-family: 'Helvetica Neue Roman'; src: url('fonts/HelveticaNeueLTStd-Roman.otf'); } {{divId}} .column { position: relative; display: block; float: left; height: 1080px; } {{divId}} #firstCol { width: 45%; display: flex; align-items: center; justify-content: center; } #secondCol { width: 55%; } {{divId}} .bigFont { font-size: 70px; } {{divId}} .productImg { position: relative; display: block; margin-left: auto; margin-right: auto; opacity: 0.0; width: 500px; height: 600px; background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; -webkit-animation: fadeIn 1.0s ease 0.4s 1 normal forwards; } @-webkit-keyframes fadeIn { from {opacity: 0.0;} to {opacity: 1.0;} } {{divId}} .headerImg { position: absolute; right: -1200px; top: 0px; -webkit-animation: animBanner 0.5s ease 0.6s 1 normal forwards; } @-webkit-keyframes animBanner { from {right: -1200px;} to {right: 0px;} } {{divId}} .title { position: absolute; top: 80px; left: 80px; height: 160px; width: 700px; opacity: 0.0; display: flex; align-items: center; -webkit-animation: fadeIn 1.0s ease 0.6s 1 normal forwards; } {{divId}} .title span { font-size: 70px; font-family: 'Helvetica Neue Light'; line-height: 0.95; color: white; } {{divId}} .title .big { font-family: 'Helvetica Neue Heavy'; } {{divId}} .logo { position: absolute; height: 60px; width: 250px; top: 290px; opacity: 0.0; background-repeat:no-repeat; background-size:contain; -webkit-animation: fadeIn 1.0s ease 1.2s 1 normal forwards; } {{divId}} .model { position: absolute; top: 360px; font-size: 36px; font-family: 'Helvetica Neue Heavy'; opacity: 0.0; -webkit-animation: fadeIn 1.0s ease 1.4s 1 normal forwards; } {{divId}} .description { position: absolute; top: 450px; font-size: 26px; font-family: 'Helvetica Neue Roman'; opacity: 0.0; margin-right: 40px; height: 220px; text-overflow: ellipsis; -webkit-animation: fadeIn 1.0s ease 1.6s 1 normal forwards; } {{divId}} .artNr { position: absolute; top: 680px; font-size: 28px; font-family: 'Helvetica Neue Black Condensed'; opacity: 0.0; -webkit-animation: fadeIn 1.0s ease 1.8s 1 normal forwards; } {{divId}} .finanzierung { position: absolute; top: 752px; left: 1200px; width: 170px; -webkit-animation: animFinanzierung 0.7s ease 1.0s 1 normal forwards; } @-webkit-keyframes animFinanzierung { 0% {left: 1200px;} 60% {left: 440px;} 100% {left: 500px;} } {{divId}} .standardPrice, {{divId}} .angebotPrice, {{divId}} .finanzPrice { position: absolute; top: 680px; left: 1200px; font-family: 'Helvetica Neue Extra Black Condensed Oblique'; -webkit-animation: animPrice 0.7s ease 0.8s 1 normal forwards; } {{divId}} .priceLabel { position: absolute; color: white; font-size: 100px; width: 440px; height: 150px; text-align: center; vertical-align: middle; background-repeat: no-repeat; background-size: contain; background-position: center; } {{divId}} .standardPrice > .priceLabel { background-image: url(img/pricelabel_1.png); } {{divId}} .angebotPrice > .priceLabel, {{divId}} .finanzPrice > .priceLabel { background-image: url(img/pricelabel_2.png); } {{divId}} .angebotPrice .priceText, {{divId}} .finanzPrice .priceText { margin-left: 30px; } {{divId}} .subLabel { position: absolute; display: flex; align-items: flex-end; justify-content: space-around; width: 260px; height: 70px; padding: 10px; top: 120px; color: #777; left: 170px; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url(img/pricelabel_4.png); } {{divId}} .finanzPrice .subLabel { align-items: center; justify-content: space-evenly; width: 250px; top: 130px; } {{divId}} .monthlyPrice { display: flex; align-items: flex-end; } {{divId}} .monthlyPrice span { font-size: 46px; height: 42px; } {{divId}} .priceText { position: absolute; height: 100%; top: 15px; left: 90px; width: 280px; display: flex; justify-content: center; align-items: center; } {{divId}} .standardPrice .priceText { left: 20px; } @-webkit-keyframes animPrice { 0% {left: 1200px;} 60% {left: -60px;} 100% {left: 0px;} } {{divId}} .myService { position: absolute; bottom: -200px; right: 70px; width: 475px; -webkit-animation: animMyService 0.4s ease 1.3s 1 normal forwards; } @-webkit-keyframes animMyService { from {bottom: -200px;} to {bottom: 0px;} } {{divId}} .overlay { position: absolute; background-image: url(img/back4.jpg); background-size: 100% 100%; width: 1920px; height: 1080px; z-index: 1; opacity: 0.0; -webkit-animation: fadeIn 1.0s ease 8.7s 1 normal forwards; } {{divId}} .disclaimer { position: absolute; bottom: 45px; left: -800px; width: 600px; opacity: 0.0; font-family: 'Helvetica Neue Roman'; font-size: 15px; -webkit-animation: fadeIn 1.0s ease 2.0s 1 normal forwards; } {{divId}} { background-image: url(img/back4.jpg); background-size: 100% 100%; } {{divId}} .extra-uvp-label { position: absolute; display: flex; align-items: baseline; justify-content: space-evenly; top: 163px; left: -60px; color: white; } </style> <div id='template99'> <div class='overlay'></div> <div class='title'><span class='bigFont'>{{{title}}}</span></div> <div class='column' id='firstCol'> <div class='productImg' style='background-image: url({{productImg}})'></div> </div> <div class='column' id='secondCol'> <img class='headerImg' src='img/helfrich_header_h.png'></img> <div class='logo' style='background-image: url({{logo}});'></div> <div class='model'>{{productName}}</div> <div class='description'>{{productDescription}}</div> {{#equals priceType 0}} <div class='angebotPrice'> <div class='priceLabel'> <div class='priceText'><span>{{priceDisplay}}</span></div> </div> </div> {{/equals}} {{#equals priceType 1}} <div class='angebotPrice'> <div class='priceLabel'> <div class='priceText'><span>{{priceDisplay}}</span></div> </div> </div> {{/equals}} {{#equals priceType 2}} <div class='angebotPrice'> <div class='priceLabel'> <div class='priceText'><span>{{priceDisplay}}</span></div> </div> {{#ifCond priceDisplay '!=' retailerPrice}} <div class='subLabel'> <div style='position: absolute; bottom: 10px; left: 30px; font-size: 32px;'>UVP</div> <div style='position: absolute; top: 22px; left: 80px; bottom: 2px; width: 170px; font-size: 60px; text-align: center;'> {{retailerPrice}} <div style='position: absolute; margin: auto; width: 175px; top: 25px; left: 0px; height: 5px; background-color: rgba(255,0,0,0.6); transform: rotate(19deg)'></div> <div style='position: absolute; margin: auto; width: 175px; top: 25px; left: 0px; height: 5px; background-color: rgba(255,0,0,0.6); transform: rotate(-19deg)'></div> </div> </div> {{/ifCond}} </div> {{/equals}} {{#equals priceType 3}} <div class='angebotPrice'> <div class='priceLabel'> <div class='priceText'><span>{{priceDisplay}}</span></div> </div> {{#ifCond priceDisplay '<' retailerPrice}} {{#ifCond retailerPrice '!=' 0}} <div class='subLabel'> <div style='font-size: 60px; line-height: 50px; text-align: center;'>{{percent}}</div> </div> {{/ifCond}} {{/ifCond}} </div> {{/equals}} {{#equals priceType 4}} <div class='angebotPrice'> <div class='priceLabel'> <div class='priceText'><span>{{priceDisplay}}</span></div> </div> {{#ifCond priceDisplay '!=' uvp}} {{#ifCond uvp '!=' 0}} <div class='subLabel'> <div style='position: absolute; bottom: 10px; left: 30px; font-size: 32px;'>UVP</div> <div style='position: absolute; top: 22px; left: 80px; bottom: 2px; width: 170px; font-size: 60px; text-align: center;'> {{uvp}} <div style='position: absolute; margin: auto; width: 175px; top: 25px; left: 0px; height: 5px; background-color: rgba(255,0,0,0.6); transform: rotate(19deg)'></div> <div style='position: absolute; margin: auto; width: 175px; top: 25px; left: 0px; height: 5px; background-color: rgba(255,0,0,0.6); transform: rotate(-19deg)'></div> </div> </div> {{/ifCond}} {{/ifCond}} </div> {{/equals}} {{#equals priceType 5}} <div class='finanzPrice'> <div class='priceLabel'> <div class='priceText'><span>{{priceDisplay}}</span></div> </div> <div class='subLabel'> <div style='padding-top: 15px; font-size: 50px;'>0%</div> <div style='padding-top: 8px; font-size: 23px; padding-right: 10px; line-height: 0.9;'>FINANZIERUNG<br>24x mtl. {{monthly}}*</div> </div> {{#ifCond uvp '!=' '0.-'}} {{#ifCond uvp '!=' priceDisplay}} <div class='extra-uvp-label'> <div style='font-size: 32px; margin-right: 10px'>UVP</div> <div style='position: relative; font-size: 60px; line-height: 50px;'>{{uvp}} <div style='position: absolute; width: 140px; top: 17px; left: 5px; height: 5px; background-color: red; transform: rotate(19deg)'></div> <div style='position: absolute; width: 140px; top: 17px; left: 5px; height: 5px; background-color: red; transform: rotate(-19deg)'></div> </div> </div> {{/ifCond}} {{/ifCond}} </div> <div class='disclaimer'><span style='font-weight: bold;'>* 0%-Finanzierungsangebot</span> – Kaufpreis entspricht dem Nettodarlehensbetrag; Gebundener Sollzinssatz (jährl.) und eff. Jahreszins 0,00 %; Laufzeit 10 bis 36 Monate. Gültig vom 27.08. bis 23.09.2017. Bonität vorausgesetzt. Kreditgeber ist die Commerz Finanz GmbH, Schwanthalerstr. 31, 80336 München, für die wir nicht ausschließlich vermittelnd tätig sind. <span style='font-weight: bold;'>Keine Mitnahmegarantie. Preis ist Abholpreis. Nur solange der Vorrat reicht.</span></div> {{/equals}} <img class='myService' src='img/myService_new.png'></img> </div> <script> function templateOnPlay{{playerId}}(player) { setTimeout(function(){ var $h = $('{{divId}} .description'); var $d = $('<div/>'); $h.wrapInner($d); var $i = $('{{divId}} .description div')[0]; var height = $h.height(); var innerHeight = $i.scrollHeight; while(innerHeight > height) { size = parseInt($h.css('font-size'), 10); $h.css('font-size', size - 1); innerHeight = $i.scrollHeight; } if(height > innerHeight) { $h.height(innerHeight); } }, 300); setTimeout(function(){ $('{{divId}} .priceText').each(function(){ var width = $(this).width(); var innerWidth = $(this).find('span').first().width(); console.log(width, innerWidth); while(innerWidth > width) { size = parseInt($(this).css('font-size'), 10); $(this).css('font-size', size - 1); innerWidth = $(this).find('span').first().width(); } }); }, 300); if({{productImgAnimated}}){ console.log('animate'); $('{{divId}} .productImg').css('background-position', '0px 0px'); $('{{divId}} .productImg').css('width', '520px'); $('{{divId}} .productImg').css('height', '580px'); $('{{divId}} .productImg').css('background-size', 'auto'); setTimeout(function(){ rotate{{playerId}}(0); }, 2000); } } function rotate{{playerId}}(i){ var stop = false; if(i == 40){ i = 0; stop = true; } var x = -520 * (i % 8); var y = -580 * parseInt(i / 8); $('{{divId}} .productImg').css('background-position', x+'px '+y+'px'); setTimeout(function(){ if(!stop)rotate{{playerId}}(i+1); }, 33); } </script> </div>