<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Entrega Banners - Comprovante</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<header>
<div class="header-in">
<div class="logos">Entregas</div>
<div class="header-info">
<p>
<strong>Cliente:</strong>
</p>
<p>
<strong>Agência:</strong>
</p>
<p>
<strong>Campanha:</strong>
</p>
<p>
<strong>Data:</strong>
</p>
</div>
</div>
</header>
<section class="banner-info">
<div style="display: flex;justfy-content: space-between;">
<div class="legenda" style="display: flex; justify-content: space-between; gap: 1em; align-items: center;">
<div style="display: flex; align-items: center;">
<div style="background-color: yellow; width: 20px;height: 20px; margin-right: 10px;"></div>
<p>Réplica</p>
</div>
<div style="display: flex; align-items: center;">
<div style="background-color: yellowgreen; width: 20px;height: 20px; margin-right: 10px;"></div>
<p>Desenvolvimento</p>
</div>
<div style="display: flex; align-items: center;">
<div style="background-color: cyan; width: 20px;height: 20px; margin-right: 10px;"></div>
<p>Adaptação</p>
</div>
</div>
<!--<p class="print-btn" onclick="prints();">imprimir <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAaCAYAAACtv5zzAAAAxElEQVRIie1UsQ3CQAy8jxiADf6lnyUVFExBz2RUaahYJFIyASOEJkjosX3JKy4icaX/7862bAcQ5JgeAFr2rx+HIMUbIj4BuGnkJVCJOaZLEbpbQloSB4NjCi6FZQBAz+yDuY31BkyAwb0Cd1hTtCozc4pKsdq5l3Qazx7mmCZzk7eAu0HwHrP9t+hvQCEeu602WTX4IhwBvIhu14/DWXtkLWLiAHCyHlWDNQto/fU/FVKw9nxIw/FTQY7pWiM+c59l7A0bjDnGSE1EzgAAAABJRU5ErkJggg==" alt="impressora">
</p> -->
</div>
<section id="doBanner">
<div class="banner-header">
<div>item</div>
<div>linha criativa</div>
<div>veículo</div>
<div>dimensão</div>
<div>peso</div>
<div>tempo</div>
<div>looping</div>
<div>complexidade</div>
<div>tipo</div>
<div id="showAll" class="last-header">
<a>Ver todos</a>
</div>
</div>
<div class="banner desenvolvimento"><div class="banner-row"><div>1</div><div>Salvador</div><div>-</div><div>300 X 50px</div><div>-</div><div>indeterminado</div><div>indeterminado</div><div>HTML</div><div>desenvolvimento</div><div class="last-header"><a onclick="viewBanner(this)">Visualizar</a><div class="icon-header" onclick="refreshBanner(this)"><img alt=></div></div></div><iframe src="banner2.html" width="300px" height="50px" frameborder="0" style="height:0" scrolling="no"></iframe></div>
<div class="banner desenvolvimento"><div class="banner-row"><div>2</div><div>Salvador</div><div>-</div><div>300 X 250px</div><div>-</div><div>indeterminado</div><div>indeterminado</div><div>HTML</div><div>desenvolvimento</div><div class="last-header"><a onclick="viewBanner(this)">Visualizar</a><div class="icon-header" onclick="refreshBanner(this)"><img alt=></div></div></div><iframe src="banners/300x250/index.html" width="300px" height="250px" frameborder="0" style="height:0" scrolling="no"></iframe></div>
<div class="banner desenvolvimento"><div class="banner-row"><div>4</div><div>Salvador</div><div>-</div><div>320 X 50px</div><div>-</div><div>indeterminado</div><div>indeterminado</div><div>HTML</div><div>desenvolvimento</div><div class="last-header"><a onclick="viewBanner(this)">Visualizar</a><div class="icon-header" onclick="refreshBanner(this)"><img alt=></div></div></div><iframe src="banners/320x50/index.html" width="320px" height="50px" frameborder="0" style="height:0" scrolling="no"></iframe></div>
<div class="banner desenvolvimento"><div class="banner-row"><div>5</div><div>Salvador</div><div>-</div><div>728 X 90px</div><div>-</div><div>indeterminado</div><div>indeterminado</div><div>HTML</div><div>desenvolvimento</div><div class="last-header"><a onclick="viewBanner(this)">Visualizar</a><div class="icon-header" onclick="refreshBanner(this)"><img alt=></div></div></div><iframe src="banners/728x90/index.html" width="728px" height="90px" frameborder="0" style="height:0" scrolling="no"></iframe></div>
<div class="banner desenvolvimento"><div class="banner-row"><div>6</div><div>Salvador</div><div>-</div><div>970 X 90px</div><div>-</div><div>indeterminado</div><div>indeterminado</div><div>HTML</div><div>desenvolvimento</div><div class="last-header"><a onclick="viewBanner(this)">Visualizar</a><div class="icon-header" onclick="refreshBanner(this)"><img alt=></div></div></div><iframe src="banners/970x90/index.html" width="970px" height="90px" frameborder="0" style="height:0" scrolling="no"></iframe></div>
</section>
<div style="height: 200px;"></div>
<script type="application/javascript">
var btnShow = document.getElementById('showAll');
var iframes = document.getElementsByTagName('iframe');
var cacheStyle = [];
var isOpen;
var singleOpen;
var iconEye = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAICAYAAAAm06XyAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAO1JREFUGJVd0b8rhWEYxvHPexKR3WTzYzWZlc3yvFmQko7Bcgb5kclg4axKMpwT/4B67/IfWKXIxGizYJMBy/PWy7U9V9f3vq/up9BQSmWBBaxhGu8YxyeucRpRvdT5VgOcwW0OPWM2oprDJE6wi6eUyq2aKTK4jWMMIiKqMqVyBxu4QQddbGeuj80ipbKL/Ub7VdzjseG18ZCb1TpvYdRf/WDonzeMgX/eSCui6uAA39lciajucs1XXOESiw3wAu2ifqVUzuMMUzjEUUT1lX9gHT18YC+i6pMP1hgwgGUsYSJvHsNbbtCLqN7r/C+KREJSOwrw5wAAAABJRU5ErkJggg==';
var iconRefresh = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAQCAYAAADNo/U5AAABQklEQVQokYXSMWtVURAE4G8usVCIKKIgSSyER0oLBQMKBm3tImJlaWk6W3+BhWJlbyG2ghZGLCy1kiAGrASRQCCSIMYia+G58b1wJQunmJ0Zds6eo6oMHSxhZojr/L+mcTfJqf3EhCl/a5TkOs7iGJaTHJ/QtSiSnMFtzA1M/VhVjycmJRnhXjP8xgd8bZpNPE2y2HSmkhzGHRzCFzypqs0kN9u9HuAkbmE7yf0pLOIo1vGoqn61Cdt4WFXrSX7gO07jaofzTfRizACvquobVNUOXrb+uQ4zDXwav3lV7e5bRs/Pdf6tfWdga+O1x3ctO8weYOoTbXVYbeDKAaae/9zhTQMXk1waUidZwEKDK6kq7U2uteZ7vMMGTuAyLjTudVU9700dbowZh+otnlXV7t7fazFGzTiPI/iJNaxU1Vqv+wMqeYFxDfBetgAAAABJRU5ErkJggg==';
for(var x = 0; x < iframes.length; x++) {
var cacheProps = {
width: iframes[x].width,
height: iframes[x].height
};
console.log(iframes[x].width)
cacheStyle.push(cacheProps);
}
function toggleIframe(style) {
var btn = document.querySelectorAll('.banner-row > .last-header');
if(!isOpen) {
for(var x in style) {
iframes[x].style.height = 0;
btn[x].firstChild.innerText = 'Visualizar';
btn[x].lastElementChild.firstElementChild.src = iconEye;
singleOpen = false;
}
return isOpen = true;
}
if(isOpen) {
for(var x in style) {
iframes[x].style.height = style[x].height;
iframes[x].src = iframes[x].src;
}
return isOpen = false;
}
}
toggleIframe(cacheStyle);
btnShow.addEventListener('click', function() {
return toggleIframe(cacheStyle);
})
function viewBanner(elem) {
var buttons = document.querySelectorAll('.banner-row > .last-header');
for(var x in cacheStyle) {
iframes[x].style.height = 0;
buttons[x].firstChild.innerText = 'Visualizar';
buttons[x].lastElementChild.firstElementChild.src = iconEye;
}
if(!singleOpen) {
elem.parentElement.parentElement.nextElementSibling.src = elem.parentElement.parentElement.nextElementSibling.src;
elem.parentElement.parentElement.nextElementSibling.style.height = elem.parentElement.parentElement.nextElementSibling.height;
elem.innerText = 'Fechar';
elem.nextElementSibling.firstElementChild.src = iconRefresh;
return singleOpen = true;
} else {
elem.parentElement.parentElement.nextElementSibling.style.height = 0;
elem.firstChild.innerText = 'Visualizar';
elem.nextElementSibling.firstElementChild.src = iconEye;
return singleOpen = false;
}
}
function refreshBanner(elem) {
elem.parentElement.parentElement.nextElementSibling.src = elem.parentElement.parentElement.nextElementSibling.src;
}
function prints() {
var style = cacheStyle;
for(var x in style) {
iframes[x].style.height = style[x].height;
iframes[x].src = iframes[x].src;
}
setTimeout(window.print(), 2000);
}
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="script.js">
let currentIndex = 0;
const banners = document.querySelectorAll('.banner');
const totalBanners = banners.length;
function showBanner(index) {
banners.forEach((banner, i) => {
banner.classList.remove('active');
if (i === index) {
banner.classList.add('active');
}
});
// Reinicia as animações de cada banner quando ele é ativado
const activeBanner = banners[index];
const elements = activeBanner.querySelectorAll('*');
elements.forEach(el => {
el.style.animation = 'none'; // Para a animaçãoo
el.offsetHeight; // Força o reflow (refluxo) para resetar a animaçãoo
el.style.animation = ''; // Reinicia a animação
});
}
function nextBanner() {
currentIndex = (currentIndex + 1) % totalBanners;
showBanner(currentIndex);
}
setInterval(nextBanner, 4500); // Troca de imagem a cada 4 segundos
// Mostrar o primeiro banner ao carregar a página
showBanner(currentIndex);
</script>
</body></html>
Menu