<!-- EP Template Vertical --> <style type='text/css'> .spotPreviewDefault { width: 1080px; height: 1920px; } @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}} .productImg { position: relative; display: block; margin-left: auto; margin-right: auto; margin-top: 500px; opacity: 0.0; width: 900px; height: 700px; 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; left: 0px; top: 0px; opacity: 0; -webkit-animation: animBanner 0.5s ease 0.3s 1 normal forwards; } @-webkit-keyframes animBanner { from {opacity: 0.0} to {opacity: 1.0} } {{divId}} .title { font-size: 100px; font-family: 'Helvetica Neue Light'; position: absolute; top: 300px; left: 80px; height: 120px; width: 920px; opacity: 0.0; color: white; -webkit-animation: fadeIn 1.0s ease 0.6s 1 normal forwards; } {{divId}} .title .big { font-family: 'Helvetica Neue Heavy'; } {{divId}} .logo { position: absolute; height: 100px; width: 250px; top: 1410px; left: 80px; opacity: 0.0; background-repeat:no-repeat; background-size:contain; background-position: left bottom; -webkit-animation: fadeIn 1.0s ease 1.2s 1 normal forwards; } {{divId}} .model { position: absolute; top: 1520px; left: 80px; width: 920px; height: 85px; 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: 1600px; left: 80px; width: 920px; font-size: 26px; font-family: 'Helvetica Neue Roman'; opacity: 0.0; margin-right: 40px; height: 150px; text-overflow: ellipsis; -webkit-animation: fadeIn 1.0s ease 1.6s 1 normal forwards; } {{divId}} .artNr { position: absolute; top: 1670px; left: 80px; 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: 1120px; left: -300px; width: 240px; -webkit-animation: animFinanzierung 0.7s ease 1.0s 1 normal forwards; } @-webkit-keyframes animFinanzierung { 0% {left: -300px;} 60% {left: 140px;} 100% {left: 80px;} } {{divId}} .standardPrice { position: absolute; top: 1300px; left: 1200px; font-family: 'Helvetica Neue Extra Black Condensed Oblique'; -webkit-animation: animPrice 0.7s ease 0.8s 1 normal forwards; } {{divId}} .angebotPrice, {{divId}} .finanzPrice { position: absolute; top: 1300px; left: 1300px; font-family: 'Helvetica Neue Extra Black Condensed Oblique'; -webkit-animation: animPriceFinance 0.7s ease 0.8s 1 normal forwards; } {{divId}} .priceLabel { position: absolute; font-size: 100px; color: white; width: 440px; height: 150px; text-align: center; vertical-align: middle; background-repeat: no-repeat; background-size: contain; background-position: center; } {{divId}} .angebotPrice .priceLabel, {{divId}} .finanzPrice .priceLabel { width: 540px; height: 150px; } {{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 { width: 300px; left: 160px; } {{divId}} .subLabel { position: absolute; width: 260px; height: 70px; padding: 10px; top: 130px; left: 240px; color: #777; font-size: 70px; display: flex; justify-content: center; align-items: center; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url(img/pricelabel_4.png); } {{divId}} .finanzPrice .subLabel { display: flex; align-items: center; justify-content: center; width: 250px; top: 130px; } {{divId}} .priceText { position: absolute; left: 20px; width: 380px; height: 100%; display: flex; justify-content: center; align-items: center; } {{divId}} .priceText span { display: inline-block; line-height: 1px; vertical-align: middle; margin-top: 28px; } {{divId}} .monthlyPrice { position: absolute; left: 110px; top: 58px; width: 170px; font-size: 60px; text-align: center; line-height: 0px; } {{divId}} .monthlyPrice span { display: inline-block; } @-webkit-keyframes animPrice { 0% {left: 1200px;} 60% {left: 490px;} 100% {left: 580px;} } @-webkit-keyframes animPriceFinance { 0% {left: 1300px;} 60% {left: 450px;} 100% {left: 500px;} } {{divId}} .myService { position: absolute; bottom: -200px; right: 70px; width: 460px; -webkit-animation: animMyService 0.4s ease 1.3s 1 normal forwards; } {{divId}} .disclaimer { position: absolute; bottom: 45px; left: 80px; width: 460px; opacity: 0.0; font-family: 'Helvetica Neue Medium Condensed'; font-size: 15px; -webkit-animation: fadeIn 1.0s ease 2.0s 1 normal forwards; } @-webkit-keyframes animMyService { from {bottom: -200px;} to {bottom: 0px;} } {{divId}} .overlay { position: absolute; background-image: url(img/back4.jpg); top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; opacity: 0.0; -webkit-animation: fadeIn 1.0s ease 8.7s 1 normal forwards; } {{divId}} { background-image: url(img/back4.jpg); } {{divId}} .extra-uvp-label { position: absolute; display: flex; align-items: baseline; justify-content: space-evenly; top: 160px; left: 0px; color: white; } </style> <div id='template99'> <div class='overlay'></div> <img class='headerImg' src='img/1117960_header_de_5.png'></img> <div class='productImg' style='background-image: url({{{productImg}}})'></div> <div class='title'>{{{title}}}</div> <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: 20px; 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='position: absolute; top: 12px; left: 50px; bottom: 2px; width: 170px; font-size: 70px; 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: 20px; 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; padding-right: 5px'>0%</div> <div style='padding-top: 10px; padding-right: 5px; font-size: 24px; 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> <script> var firstCall = true; function templateOnPlay{{playerId}}(player) { if(firstCall){ firstCall = false; setTimeout(function(){ console.log('set size'); 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(){ var $h = $('{{divId}} .model'); var $d = $('<div/>'); $h.wrapInner($d); var $i = $('{{divId}} .model 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) { $($i).css('margin-top', parseInt((height-innerHeight)/2)); } }, 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); setTimeout(function(){ $('{{divId}} .monthlyPrice').each(function(){ var width = $(this).width(); var innerWidth = $(this).find('span').first().width(); while(innerWidth > width) { size = parseInt($(this).css('font-size'), 10); $(this).css('font-size', size - 1); innerWidth = $(this).find('span').first().width(); } }); }, 300); setTimeout(function(){ console.log('set size'); var $h = $('{{divId}} .title'); var $d = $('<div/>'); $h.wrapInner($d); var $i = $('{{divId}} .title 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); } 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'); $('{{divId}} .productImg').css('transform', 'scale(1.5)'); 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>