Fullscreen com jQuery e CSS
Dica publicada em Javascript / Avançado
Por Renan Martins Pimentel em 23/11/2011
Fullscreen com jQuery e CSS
Fazendo um projeto aqui, surgiu uma coisa um pouco diferente: um site sem menu, apenas usando setas.
Você deve estar pensando que é algo meio confuso ou sem pé nem cabeça. Foi o que pensei, mas depois de ver como ficou, achei uma ideia legal para os famosos Hotsites.
Usando este tutorial, você vai poder mostrar para o seu cliente, uma forma diferente dele mostrar o seu produto.
O esboço usado aqui está totalmente cru, ou seja, sem um layout apresentável; mas com um pouco de criatividade vocês podem tudo.
Vamos criar o arquivo 'funcoes.js', onde uma função em jQuery para pegar a altura total da página e uma função que vai fazer toda mágica da transição de 'div' (páginas):
Você deve estar pensando que é algo meio confuso ou sem pé nem cabeça. Foi o que pensei, mas depois de ver como ficou, achei uma ideia legal para os famosos Hotsites.
Usando este tutorial, você vai poder mostrar para o seu cliente, uma forma diferente dele mostrar o seu produto.
O esboço usado aqui está totalmente cru, ou seja, sem um layout apresentável; mas com um pouco de criatividade vocês podem tudo.
Vamos criar o arquivo 'funcoes.js', onde uma função em jQuery para pegar a altura total da página e uma função que vai fazer toda mágica da transição de 'div' (páginas):
\* PEGAR ALTURA TOTAL DA PAGINA *\
$(document).ready(function(){
var altura = $(document).height();
$(".alturaTotal").height(altura);
});
$(function() {
function slidePanel( newPanel, direction ) {
\\ define the offset of the slider obj, vis a vis the document
var offsetLeft = $slider.offset().left;
\\ offset required to hide the content off to the left \ right
var hideLeft = -1 * ( offsetLeft + $slider.width() );
var hideRight = $(window).width() - offsetLeft;
\\ change the current \ next positions based on the direction of the animation
if ( direction == 'esquerda' ) {
currPos = hideLeft;
nextPos = hideRight;
}
else {
currPos = hideRight;
nextPos = hideLeft;
}
\\ slide out the current panel, then remove the active class
$slider.children('.paginas-total.ativa').animate({
left: currPos
}, 10, function() {
$(this).removeClass('ativa');
});
\\ slide in the next panel after adding the active class
$( $sliderPanels[newPanel] ).css('esquerda', nextPos).addClass('ativa').animate({
left: 0
}, 10 );
}
var $slider = $('#fundo-total');
var $sliderPanels = $slider.children('.paginas-total');
var $navWrap = $('
<\div>').appendTo( $slider );
var $navLeft = $('
<\div>').appendTo( $navWrap );
var $navRight = $('
Agora vamos criar o arquivo css.css, que vai auxiliar o funcoes.js e dar uma "cara" pro nosso site:
E por final, vamos unir os dois arquivos no HTML e ver como fica:
Imagem FullScreen \ Mudar de Páginas<\title>
<link rel="stylesheet" type="text\css" href="css.css">
<script type="text\javascript" src="https:\\ajax.googleapis.com\ajax\libs\jquery\1.7.0\jquery.min.js"><\script>
<script type="text\javascript" src="funcoes.js"><\script>
<\head>
<body>
<div id="fundo-total" class="alturaTotal">
<div class="paginas-total fundo01 ativa"> <\div>
<div class="paginas-total fundo02"> <\div>
<div class="paginas-total fundo03"> <\div>
<div class="paginas-total fundo04"> <\div>
<div class="paginas-total fundo05"> <\div>
<div class="paginas-total fundo06"> <\div>
<\div>
<\body>
<\html>
</div>
<br/>
Demostração online:
<ul>
<li> <a href="http://www.renanmpimentel.com.br/exemplos/fullscreen/" rel="nofollow" target="_blank"" rel="nofollow" target="_blank"">www.renanmpimentel.com.br/exemplos/fullscreen</a>
</ul><br/>
Previamente publicado em:
<ul>
<li> <a href="http://www.renanmpimentel.com.br/fullscreen-com-jquery-e-css/" rel="nofollow" target="_blank"" rel="nofollow" target="_blank"">www.renanmpimentel.com.br - Fullscreen com jQuery e CSS</a>
</ul><br/>
</div>
</section>
</article>
<section class="article-view__section" aria-labelledby="article-author-title">
<h2 id="article-author-title" class="article-view__section-label">Outras dicas deste autor</h2>
<p class="recomendado"> <a href="/dica/Autenticacao-e-Criptografia-de-Senhas-usando-PHP"><i class="fa fa-chevron-circle-right"></i> Autenticação e criptografia de senhas usando PHP</a></p>
<p class="recomendado"> <a href="/dica/Cadastrar-eventos-compromissos-no-Google-Agenda-com-cURL-[PHP]"><i class="fa fa-chevron-circle-right"></i> Cadastrar eventos/compromissos no Google Agenda com cURL [PHP]</a></p>
<p class="recomendado"> <a href="/dica/Mostrar-a-previsao-do-tempo-com-PHP"><i class="fa fa-chevron-circle-right"></i> Mostrar a previsão do tempo com PHP</a></p>
<p class="recomendado"> <a href="/dica/Gerando-QR-Code-com-PHP"><i class="fa fa-chevron-circle-right"></i> Gerando QR Code com PHP</a></p>
<p class="recomendado"> <a href="/dica/Upload-de-varias-imagens-com-PHP-e-jQuery"><i class="fa fa-chevron-circle-right"></i> Upload de várias imagens com PHP e jQuery</a></p>
</section>
<section class="article-view__section" aria-labelledby="article-recommended-title">
<h2 id="article-recommended-title" class="article-view__section-label">Leitura recomendada</h2>
<p class="recomendado"> <a href="/dica/Incentivando-o-uso-do-Webm-formato-aberto-de-codec-conteiner-de-video"><i class="fa fa-chevron-circle-right"></i> Incentivando o uso do Webm, formato aberto de "codec" (conteiner) de vídeo</a></p>
<p class="recomendado"> <a href="/dica/Editor-de-HTML5-em-tempo-real"><i class="fa fa-chevron-circle-right"></i> Editor de HTML5 em tempo real</a></p>
<p class="recomendado"> <a href="/dica/HTML-Forcar-a-abertura-de-todos-os-links-em-uma-nova-janela"><i class="fa fa-chevron-circle-right"></i> HTML - Forçar a abertura de todos os links em uma nova janela</a></p>
<p class="recomendado"> <a href="/dica/Resolvendo-erro-de-atualizacao-do-firmware-do-modem-DSL2640t"><i class="fa fa-chevron-circle-right"></i> Resolvendo erro de atualização do firmware do modem DSL2640t</a></p>
<p class="recomendado"> <a href="/dica/Netflix-no-Firefox-Debian-Error-Request-mediaKeySystem-access-rejected-EME-has-been-preffed-off-Resolvido"><i class="fa fa-chevron-circle-right"></i> Netflix no Firefox (Debian) - Error: Request mediaKeySystem access rejected: EME has been preffed off [Resolvido]</a></p>
</section>
<section class="article-view__section" aria-labelledby="article-comments-title" data-comment-target="dica" data-comment-target-id="16883" data-comment-last-id="187429" data-comment-poll-ms="45000">
<h2 id="article-comments-title" class="article-view__section-label">Comentários</h2>
<div id="article-comments-list">
<article class="article-comment" id="comentario187424" data-comment-id="187424">
<textarea data-comment-quote-source hidden readonly>Muito bom isso.
Estou trabalhando com umas coisas danadas com CSS e jQuery e estou usando dataTables e Flexi Gridi, a coisa pega viu ?!
Ficou bacana seu exemplo.
Parabéns !</textarea>
<header class="article-comment__meta">
<span class="article-comment__number">#1</span>
<span>Comentário enviado por <a href="/~nickmarinho">nickmarinho</a> em 24/11/2011 - 08:06h</span>
</header>
<div data-comment-view>
<div class="article-comment__body" data-comment-body>
Muito bom isso.<br />
Estou trabalhando com umas coisas danadas com CSS e jQuery e estou usando dataTables e Flexi Gridi, a coisa pega viu ?!<br />
<br />
Ficou bacana seu exemplo.<br />
Parabéns !
</div>
</div>
<footer class="article-comment__footer">
<div class="article-comment__votes">
<div class="vol-like-buttons" aria-label="Avaliação de comentário #1">
<button type="button" data-codigo="187424" data-tabela="comentario" data-tipo="like" data-csrf-token="75c74e8e676d521e9a0c02e17a0032e71766351d282a74283415cc90878a85eb" class="btn-like btn btn-default btn-xs rounded" aria-label="Curtir comentário #1" aria-pressed="false">
<span class="likeBadge fonte11">0</span> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
</button>
<button type="button" data-codigo="187424" data-tabela="comentario" data-tipo="dislike" data-csrf-token="75c74e8e676d521e9a0c02e17a0032e71766351d282a74283415cc90878a85eb" class="btn-like btn btn-default btn-xs rounded" aria-label="Não curtir comentário #1" aria-pressed="false" disabled>
<span class="likeBadge fonte11">0</span> <i class="fa fa-thumbs-o-down" aria-hidden="true"></i>
</button>
<span class="article-like__status" data-like-status role="status" aria-live="polite"></span>
</div>
</div>
<ul class="article-comment__actions">
</ul>
</footer>
</article>
<article class="article-comment" id="comentario187429" data-comment-id="187429">
<textarea data-comment-quote-source hidden readonly>Valeu cara, eu estou estudando forte CSS3, daqui a pouco espero colocar umas dicas aqui.
Obrigado pelo parabéns.
Abraços!</textarea>
<header class="article-comment__meta">
<span class="article-comment__number">#2</span>
<span>Comentário enviado por <a href="/~renanmpimentel">renanmpimentel</a> em 24/11/2011 - 09:09h</span>
</header>
<div data-comment-view>
<div class="article-comment__body" data-comment-body>
Valeu cara, eu estou estudando forte CSS3, daqui a pouco espero colocar umas dicas aqui.<br />
<br />
Obrigado pelo parabéns.<br />
Abraços!
</div>
</div>
<footer class="article-comment__footer">
<div class="article-comment__votes">
<div class="vol-like-buttons" aria-label="Avaliação de comentário #2">
<button type="button" data-codigo="187429" data-tabela="comentario" data-tipo="like" data-csrf-token="75c74e8e676d521e9a0c02e17a0032e71766351d282a74283415cc90878a85eb" class="btn-like btn btn-default btn-xs rounded" aria-label="Curtir comentário #2" aria-pressed="false">
<span class="likeBadge fonte11">0</span> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
</button>
<button type="button" data-codigo="187429" data-tabela="comentario" data-tipo="dislike" data-csrf-token="75c74e8e676d521e9a0c02e17a0032e71766351d282a74283415cc90878a85eb" class="btn-like btn btn-default btn-xs rounded" aria-label="Não curtir comentário #2" aria-pressed="false" disabled>
<span class="likeBadge fonte11">0</span> <i class="fa fa-thumbs-o-down" aria-hidden="true"></i>
</button>
<span class="article-like__status" data-like-status role="status" aria-live="polite"></span>
</div>
</div>
<ul class="article-comment__actions">
</ul>
</footer>
</article>
</div>
<form action="/comentarios/enviarComentario.php" method="post" name="formComentario" class="article-view__comment-form" novalidate>
<input type="hidden" name="tabela" value="dica">
<input type="hidden" name="codtabela" value="16883">
<input type="hidden" name="csrf_token" value="37434ea440f3b76eb6f63aea13866bb8ecd121a40b26abe4af27900f2ddd2a38">
<input type="hidden" name="ajax" value="1">
<h2 class="article-view__section-title">Contribuir com comentário</h2>
<p class="article-view__comment-state article-view__comment-state--locked"><i class="fa fa-lock"></i> Entre na sua conta para comentar.</p>
<p class="article-view__comment-login"><a class="article-view__primary" href="/login/?msg=1&referer=%2Fdica%2FFullscreen-com-jQuery-e-CSS%2F">Fazer login para comentar</a></p>
<textarea name="comentario" readonly disabled id="boxcomentario" class="article-view__comment-textarea" rows="8" data-mention-autocomplete data-vol-wysiwyg-editor data-vol-wysiwyg-mode="comment" data-vol-wysiwyg-toolbar="full"></textarea>
<div class="article-view__comment-actions">
<button type="submit" class="btn btn-u rounded-2x article-view__comment-submit" disabled>Enviar comentário <span class="vol-shortcut-hint" aria-hidden="true"><kbd>Ctrl</kbd><kbd>Enter</kbd></span></button>
</div>
<span id="articleCommentStatus" class="article-view__comment-status" role="status" aria-live="polite"></span>
</form>
</section>
<div class="modal fade" id="articleCommentDeleteModal" tabindex="-1" role="dialog" aria-labelledby="articleCommentDeleteTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="/comentarios/excluirComentario.php" method="post" data-comment-delete-form>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="articleCommentDeleteTitle">Excluir comentário</h3>
</div>
<div class="modal-body">
<input type="hidden" name="codigo" value="">
<input type="hidden" name="csrf_token" value="37434ea440f3b76eb6f63aea13866bb8ecd121a40b26abe4af27900f2ddd2a38">
<input type="hidden" name="ajax" value="1">
<p>Confirma a exclusão deste comentário?</p>
<p class="text-muted" data-comment-delete-label></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default rounded-2x" data-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-danger rounded-2x" data-comment-delete-confirm><i class="fa fa-trash" aria-hidden="true"></i> Excluir</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
(function () {
var section = document.querySelector('[data-comment-target="dica"]');
if (!section || !window.fetch || !window.FormData) return;
var form = section.querySelector('form.article-view__comment-form');
var list = document.getElementById('article-comments-list');
var status = document.getElementById('articleCommentStatus');
var textarea = document.getElementById('boxcomentario');
var submit = form ? form.querySelector('button[type="submit"]') : null;
var deleteModal = document.getElementById('articleCommentDeleteModal');
var deleteForm = deleteModal ? deleteModal.querySelector('[data-comment-delete-form]') : null;
var deleteLabel = deleteModal ? deleteModal.querySelector('[data-comment-delete-label]') : null;
var deleteSource = null;
var pollMs = parseInt(section.getAttribute('data-comment-poll-ms'), 10) || 45000;
function setStatus(message, kind) {
if (!status) return;
status.textContent = message || '';
status.className = 'article-view__comment-status' + (kind ? ' is-' + kind : '');
}
function toast(kind, message) {
if (window.volToast && window.volToast[kind]) {
window.volToast[kind](message, { anchor: '#articleCommentStatus' });
}
}
function lastId() {
return parseInt(section.getAttribute('data-comment-last-id'), 10) || 0;
}
function updateLastId(value) {
value = parseInt(value, 10) || lastId();
if (value > lastId()) {
section.setAttribute('data-comment-last-id', String(value));
}
}
function renumberVisibleComments() {
if (!list) return;
Array.prototype.slice.call(list.querySelectorAll('.article-comment')).forEach(function (comment, index) {
var number = index + 1;
var numberNode = comment.querySelector('.article-comment__number');
var deleteButton = comment.querySelector('[data-comment-delete-button]');
if (numberNode) {
numberNode.textContent = '#' + number;
}
if (deleteButton) {
deleteButton.setAttribute('data-comment-label', 'comentário #' + number);
}
});
}
function appendComments(html, newLastId) {
if (!html || !list) {
updateLastId(newLastId);
renumberVisibleComments();
return 0;
}
var tmp = document.createElement('div');
tmp.innerHTML = html;
var added = 0;
Array.prototype.slice.call(tmp.children).forEach(function (node) {
var id = node.getAttribute('data-comment-id');
if (id && list.querySelector('[data-comment-id="' + id + '"]')) return;
node.classList.add('is-new');
list.appendChild(node);
window.setTimeout(function () { node.classList.remove('is-new'); }, 2200);
added++;
});
updateLastId(newLastId);
if (added > 0) {
renumberVisibleComments();
}
return added;
}
function readJson(response) {
return response.json().catch(function () {
return { ok: false, message: 'Resposta inválida do servidor.' };
}).then(function (data) {
if (!response.ok && data.ok !== true) {
data.ok = false;
}
return data;
});
}
function submitJson(targetForm, payload) {
var form = targetForm;
return fetch(targetForm.action, {
method: 'POST',
body: payload || new FormData(form),
headers: {
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
credentials: 'same-origin'
}).then(readJson);
}
function hideModal(modal) {
if (window.jQuery && modal) {
window.jQuery(modal).modal('hide');
}
}
function hideModalThen(modal, callback) {
if (window.jQuery && modal) {
window.jQuery(modal).one('hidden.bs.modal', callback).modal('hide');
return;
}
callback();
}
function replaceComment(currentArticle, html, lastIdValue) {
if (!currentArticle || !html) {
updateLastId(lastIdValue);
return false;
}
var tmp = document.createElement('div');
tmp.innerHTML = html;
var nextArticle = tmp.querySelector('.article-comment');
if (!nextArticle) {
updateLastId(lastIdValue);
return false;
}
currentArticle.parentNode.replaceChild(nextArticle, currentArticle);
updateLastId(lastIdValue);
renumberVisibleComments();
return true;
}
function setCommentEditMode(comment, editing) {
if (!comment) return;
var view = comment.querySelector('[data-comment-view]');
var panel = comment.querySelector('[data-comment-edit-panel]');
if (!view || !panel) return;
view.hidden = !!editing;
panel.hidden = !editing;
if (editing) {
var textarea = panel.querySelector('textarea[name="comentario"]');
if (textarea) {
textarea.focus();
textarea.setSelectionRange(textarea.value.length, textarea.value.length);
}
}
}
function submitInlineCommentFormOnCtrlEnter(event) {
if (!((event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey && (event.key === 'Enter' || event.keyCode === 13)) || event.isComposing) {
return false;
}
var editForm = event.target.closest('[data-comment-edit-form]');
if (!editForm || editForm.hidden) {
return false;
}
event.preventDefault();
if (editForm.requestSubmit) {
editForm.requestSubmit();
return true;
}
var submit = editForm.querySelector('button[type="submit"]');
if (submit) {
submit.click();
}
return true;
}
section.addEventListener('click', function (event) {
var quoteButton = event.target.closest('[data-comment-quote-button]');
if (quoteButton) {
event.preventDefault();
if (window.quote) {
window.quote(quoteButton.getAttribute('data-comment-quote-target'));
}
return;
}
var editButton = event.target.closest('[data-comment-edit-button]');
var editCancel = event.target.closest('[data-comment-edit-cancel]');
if (editButton || editCancel) {
event.preventDefault();
setCommentEditMode(event.target.closest('.article-comment'), !!editButton);
return;
}
var deleteButton = event.target.closest('[data-comment-delete-button]');
if (!deleteButton || !deleteForm || !deleteModal) return;
event.preventDefault();
deleteSource = deleteButton;
deleteForm.elements.codigo.value = deleteButton.getAttribute('data-comment-id') || '';
if (deleteLabel) {
deleteLabel.textContent = deleteButton.getAttribute('data-comment-label') || '';
}
if (window.jQuery) {
window.jQuery(deleteModal).modal('show');
}
});
section.addEventListener('keydown', function (event) {
submitInlineCommentFormOnCtrlEnter(event);
}, true);
section.addEventListener('submit', function (event) {
var editForm = event.target.closest('[data-comment-edit-form]');
if (!editForm) return;
event.preventDefault();
var editTextarea = editForm.querySelector('textarea[name="comentario"]');
if (editTextarea && !editTextarea.value.replace(/\s+/g, '')) {
setStatus('Escreva um comentário antes de gravar.', 'error');
toast('error', 'Escreva um comentário antes de gravar.');
editTextarea.focus();
return;
}
var editSubmit = editForm.querySelector('button[type="submit"]');
var currentArticle = editForm.closest('.article-comment');
if (editSubmit) editSubmit.disabled = true;
setStatus('Gravando comentário...', '');
submitJson(editForm).then(function (data) {
if (!data.ok) {
throw new Error(data.message || 'Não foi possível gravar o comentário.');
}
var finishEdit = function () {
replaceComment(currentArticle, data.html, data.last_id);
setStatus('Comentário atualizado.', 'success');
toast('success', 'Comentário atualizado.');
};
var editModal = editForm.closest('.modal');
if (editModal) {
hideModalThen(editModal, finishEdit);
} else {
finishEdit();
}
}).catch(function (error) {
setStatus(error.message, 'error');
toast('error', error.message);
}).finally(function () {
if (editSubmit) editSubmit.disabled = false;
});
});
if (deleteForm) {
deleteForm.addEventListener('submit', function (event) {
event.preventDefault();
var deleteSubmit = deleteForm.querySelector('[data-comment-delete-confirm]');
var currentArticle = deleteSource ? deleteSource.closest('.article-comment') : null;
if (deleteSubmit) deleteSubmit.disabled = true;
setStatus('Excluindo comentário...', '');
submitJson(deleteForm).then(function (data) {
if (!data.ok) {
throw new Error(data.message || 'Não foi possível excluir o comentário.');
}
hideModal(deleteModal);
if (currentArticle) {
currentArticle.remove();
renumberVisibleComments();
}
deleteSource = null;
setStatus('Comentário excluído.', 'success');
toast('success', 'Comentário excluído.');
}).catch(function (error) {
setStatus(error.message, 'error');
toast('error', error.message);
}).finally(function () {
if (deleteSubmit) deleteSubmit.disabled = false;
});
});
}
if (textarea && form) {
textarea.addEventListener('keydown', function (event) {
if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
event.preventDefault();
if (form.requestSubmit) { form.requestSubmit(); } else { form.dispatchEvent(new Event('submit', { cancelable: true })); }
}
});
form.addEventListener('submit', function (event) {
event.preventDefault();
if (!textarea.value.replace(/\s+/g, '')) {
setStatus('Escreva um comentário antes de enviar.', 'error');
toast('error', 'Escreva um comentário antes de enviar.');
textarea.focus();
return;
}
var commentPayload = new FormData(form);
submit.disabled = true;
textarea.disabled = true;
setStatus('Enviando comentário...', '');
submitJson(form, commentPayload).then(function (data) {
if (!data.ok) {
throw new Error(data.message || 'Não foi possível enviar o comentário.');
}
appendComments(data.html, data.last_id);
textarea.value = '';
setStatus('Comentário enviado.', 'success');
toast('success', 'Comentário enviado.');
}).catch(function (error) {
setStatus(error.message, 'error');
toast('error', error.message);
}).finally(function () {
submit.disabled = false;
textarea.disabled = false;
});
});
}
function poll() {
if (document.hidden) return;
var url = '/comentarios/listarRecentes.php?tabela=dica&codtabela=' + encodeURIComponent(section.getAttribute('data-comment-target-id')) + '&after=' + encodeURIComponent(lastId());
fetch(url, {
headers: { 'Accept': 'application/json' },
credentials: 'same-origin'
}).then(readJson).then(function (data) {
if (!data.ok) return;
var added = appendComments(data.html, data.last_id);
if (added > 0) {
var pollMessage = added === 1 ? '1 novo comentário carregado.' : added + ' novos comentários carregados.';
setStatus(pollMessage, 'success');
toast('success', pollMessage);
}
}).catch(function () {});
}
window.setInterval(poll, pollMs);
}());
</script>
</main>
<br><br>
</div>
</div>
</div><!--/main-col-->
<button class="vol-sidebar-drawer__toggle" type="button" aria-controls="vol-mobile-sidebar" aria-expanded="false" aria-label="Abrir conteúdo lateral" data-vol-sidebar-toggle>
<span aria-hidden="true"></span>
</button>
<div class="vol-sidebar-drawer__backdrop" data-vol-sidebar-backdrop hidden></div>
<aside id="vol-mobile-sidebar" class="col-md-2 vol-sidebar vol-content-sidebar vol-sidebar-drawer" aria-label="Conteúdo lateral" data-vol-sidebar-drawer aria-hidden="false">
<div class="vol-sidebar__sponsor-slot" data-vol-sidebar-sponsor>
<section class="vol-sidebar__card" aria-labelledby="vol-sidebar-destaques">
<h3 class="vol-sidebar__heading" id="vol-sidebar-destaques">Destaques</h3>
<ul class="vol-sidebar__list" role="list">
<li class="vol-sidebar__list-item"><a href="/topico/vivaolinux/Topico-para-BUG-REPORT-do-TEMA-ESCURO/">Tópico para BUG REPORT do TEMA ESCURO (0)</a></li>
<li class="vol-sidebar__list-item"><a href="/topico/vivaolinux/O-que-est-achando-no-NOVO-Viva-o-Linux/">O que está achando do NOVO Viva o Linux? (79)</a></li>
<li class="vol-sidebar__list-item"><a href="/topico/Sugestoes-para-o-Viva-o-Linux/Links-de-importantes-de-usurios-do-vol/">Links importantes de usuários do vol (6)</a></li>
<li class="vol-sidebar__list-item"><a href="/topico/Softwares-Educacionais-em-Linux/Criei-um-app-de-escrita-acadmica-para-brasileiros/">Criei um app de escrita acadêmica para brasileiros! (4)</a></li>
</ul>
</section>
<aside class="vol-sidebar__credit">
<p>Hospedado por <a href="https://www.redehost.com.br/" target="_blank" rel="nofollow noopener">RedeHost</a></p>
</aside>
</div>
<div class="vol-sidebar__slot vol-sidebar__slot--top10"><section class="vol-sidebar__card vol-sidebar__card--top10" aria-labelledby="vol-sidebar-top10">
<h3 class="vol-sidebar__heading" id="vol-sidebar-top10">Top 10 <span class="vol-sidebar__heading-sub">últimos 30 dias</span></h3>
<ol class="vol-sidebar__top10" role="list">
<li class="vol-sidebar__top10-item">
<a class="vol-sidebar__top10-link" href="/~xerxeslins">
<span class="vol-sidebar__top10-rank" aria-hidden="true">01</span>
<img class="vol-sidebar__top10-avatar" src="/imagens/fotos/8336076b2736.png" alt="" width="40" height="40" loading="lazy" decoding="async" onerror="this.onerror=null;this.src='/imagens/fotos/desconhecido.png';">
<span class="vol-sidebar__top10-meta">
<span class="vol-sidebar__top10-name">Xerxes</span>
<span class="vol-sidebar__top10-pts">167.841 pts</span>
</span>
</a>
</li>
<li class="vol-sidebar__top10-item">
<a class="vol-sidebar__top10-link" href="/~fabio">
<span class="vol-sidebar__top10-rank" aria-hidden="true">02</span>
<img class="vol-sidebar__top10-avatar" src="/imagens/fotos/avatar-fabio-0076d681d11d.webp" alt="" width="40" height="40" loading="lazy" decoding="async" onerror="this.onerror=null;this.src='/imagens/fotos/desconhecido.png';">
<span class="vol-sidebar__top10-meta">
<span class="vol-sidebar__top10-name">Fábio Berbert de Paula</span>
<span class="vol-sidebar__top10-pts">80.505 pts</span>
</span>
</a>
</li>
<li class="vol-sidebar__top10-item">
<a class="vol-sidebar__top10-link" href="/~albfneto">
<span class="vol-sidebar__top10-rank" aria-hidden="true">03</span>
<img class="vol-sidebar__top10-avatar" src="/imagens/fotos/telapad.png" alt="" width="40" height="40" loading="lazy" decoding="async" onerror="this.onerror=null;this.src='/imagens/fotos/desconhecido.png';">
<span class="vol-sidebar__top10-meta">
<span class="vol-sidebar__top10-name">Alberto Federman Neto.</span>
<span class="vol-sidebar__top10-pts">42.955 pts</span>
</span>
</a>
</li>
<li class="vol-sidebar__top10-item">
<a class="vol-sidebar__top10-link" href="/~Buckminster">
<span class="vol-sidebar__top10-rank" aria-hidden="true">04</span>
<img class="vol-sidebar__top10-avatar" src="/imagens/fotos/94c1a8a7e098.jpg" alt="" width="40" height="40" loading="lazy" decoding="async" onerror="this.onerror=null;this.src='/imagens/fotos/desconhecido.png';">
<span class="vol-sidebar__top10-meta">
<span class="vol-sidebar__top10-name">Buckminster</span>
<span class="vol-sidebar__top10-pts">38.186 pts</span>
</span>
</a>
</li>
<li class="vol-sidebar__top10-item">
<a class="vol-sidebar__top10-link" href="/~cabelo">
<span class="vol-sidebar__top10-rank" aria-hidden="true">05</span>
<img class="vol-sidebar__top10-avatar" src="/imagens/fotos/4fcb75802380.png" alt="" width="40" height="40" loading="lazy" decoding="async" onerror="this.onerror=null;this.src='/imagens/fotos/desconhecido.png';">
<span class="vol-sidebar__top10-meta">
<span class="vol-sidebar__top10-name">Alessandro de Oliveira Faria (A.K.A. CABELO)</span>
<span class="vol-sidebar__top10-pts">36.992 pts</span>
</span>
</a>
</li>
<li class="vol-sidebar__top10-item">
<a class="vol-sidebar__top10-link" href="/~edps">
<span class="vol-sidebar__top10-rank" aria-hidden="true">06</span>
<img class="vol-sidebar__top10-avatar" src="/imagens/fotos/fdfa73842224.gif" alt="" width="40" height="40" loading="lazy" decoding="async" onerror="this.onerror=null;this.src='/imagens/fotos/desconhecido.png';">
<span class="vol-sidebar__top10-meta">
<span class="vol-sidebar__top10-name">edps</span>
<span class="vol-sidebar__top10-pts">33.835 pts</span>
</span>
</a>
</li>
<li class="vol-sidebar__top10-item">
<a class="vol-sidebar__top10-link" href="/~Zoiudo">
<span class="vol-sidebar__top10-rank" aria-hidden="true">07</span>
<img class="vol-sidebar__top10-avatar" src="/imagens/fotos/1c4963f171ad8.jpg" alt="" width="40" height="40" loading="lazy" decoding="async" onerror="this.onerror=null;this.src='/imagens/fotos/desconhecido.png';">
<span class="vol-sidebar__top10-meta">
<span class="vol-sidebar__top10-name">Sidnei Serra</span>
<span class="vol-sidebar__top10-pts">25.882 pts</span>
</span>
</a>
</li>
<li class="vol-sidebar__top10-item">
<a class="vol-sidebar__top10-link" href="/~pinduvoz">
<span class="vol-sidebar__top10-rank" aria-hidden="true">08</span>
<img class="vol-sidebar__top10-avatar" src="/imagens/fotos/2534dc3c78c8a.png" alt="" width="40" height="40" loading="lazy" decoding="async" onerror="this.onerror=null;this.src='/imagens/fotos/desconhecido.png';">
<span class="vol-sidebar__top10-meta">
<span class="vol-sidebar__top10-name">Andre (pinduvoz)</span>
<span class="vol-sidebar__top10-pts">25.827 pts</span>
</span>
</a>
</li>
<li class="vol-sidebar__top10-item">
<a class="vol-sidebar__top10-link" href="/~maurixnovatrento">
<span class="vol-sidebar__top10-rank" aria-hidden="true">09</span>
<img class="vol-sidebar__top10-avatar" src="/imagens/fotos/1c799c4c3fa1.png" alt="" width="40" height="40" loading="lazy" decoding="async" onerror="this.onerror=null;this.src='/imagens/fotos/desconhecido.png';">
<span class="vol-sidebar__top10-meta">
<span class="vol-sidebar__top10-name">Mauricio Ferrari (LinuxProativo)</span>
<span class="vol-sidebar__top10-pts">25.739 pts</span>
</span>
</a>
</li>
<li class="vol-sidebar__top10-item">
<a class="vol-sidebar__top10-link" href="/~danniel-lara">
<span class="vol-sidebar__top10-rank" aria-hidden="true">10</span>
<img class="vol-sidebar__top10-avatar" src="/imagens/fotos/1275176319.euu.jpg" alt="" width="40" height="40" loading="lazy" decoding="async" onerror="this.onerror=null;this.src='/imagens/fotos/desconhecido.png';">
<span class="vol-sidebar__top10-meta">
<span class="vol-sidebar__top10-name">Daniel Lara Souza</span>
<span class="vol-sidebar__top10-pts">22.717 pts</span>
</span>
</a>
</li>
</ol>
</section>
</div>
<div class="vol-sidebar__slot vol-sidebar__slot--news"><section class="vol-sidebar__card" aria-labelledby="vol-sidebar-Noticias">
<h3 class="vol-sidebar__heading" id="vol-sidebar-Noticias">Notícias</h3>
<ul class="vol-sidebar__list" role="list">
<li class="vol-sidebar__list-item"><a href="/noticia/ia-ajuda-usuario-a-recuperar-us-400-mil-em-bitcoin-apos-11-anos-sem-acesso-a-carteira/">IA ajuda usuário a recuperar US$ 400 mil em Bitcoin após 11 anos sem acesso à carteira</a></li>
<li class="vol-sidebar__list-item"><a href="/noticia/wine-corrige-falha-no-wayland-que-baguncava-a-mira-de-fps-no-linux/">Wine corrige falha no Wayland que bagunçava a mira de FPS no Linux</a></li>
<li class="vol-sidebar__list-item"><a href="/noticia/dirty-frag-e-a-segunda-falha-critica-no-linux-revelada-em-duas-semanas/">Dirty Frag é a segunda falha crítica no Linux revelada em duas semanas</a></li>
<li class="vol-sidebar__list-item"><a href="/noticia/kde-recebe-mais-de-eur-1-milhao-para-acelerar-desenvolvimento-do-ecossistema/">KDE recebe mais de € 1 milhão para acelerar desenvolvimento do ecossistema</a></li>
<li class="vol-sidebar__list-item"><a href="/noticia/virtualbox-7-2-8-chega-com-suporte-inicial-ao-linux-6-19-e-7-0-alem-de-correcoes-em-wayland/">VirtualBox 7.2.8 chega com suporte inicial ao Linux 6.19 e 7.0, além de correções em Wayland</a></li>
</ul>
</section>
</div>
<div class="vol-sidebar__slot vol-sidebar__slot--articles"><section class="vol-sidebar__card" aria-labelledby="vol-sidebar-Artigos">
<h3 class="vol-sidebar__heading" id="vol-sidebar-Artigos">Artigos</h3>
<ul class="vol-sidebar__list" role="list">
<li class="vol-sidebar__list-item"><a href="/artigo/File-Browser-Crie-sua-Nuvem-Pessoal-Privada">File Browser: Crie sua Nuvem Pessoal Privada</a></li>
<li class="vol-sidebar__list-item"><a href="/artigo/A-produo-de-udio-e-vdeo-no-Linux-e-as-distribuies-dedicadas-a-esse-fim">A produção de áudio e vídeo no Linux e as distribuições dedicadas a esse fim</a></li>
<li class="vol-sidebar__list-item"><a href="/artigo/Criptografando-sua-Home-com-Gocryptfs-para-tristeza-do-meliante">Criptografando sua Home com Gocryptfs para tristeza do meliante</a></li>
<li class="vol-sidebar__list-item"><a href="/artigo/A-Involuo-do-Linux-e-as-Lambanas-Desnecessrias-desde-o-seu-Lanamento">A Involução do Linux e as Lambanças Desnecessárias desde o seu Lançamento</a></li>
<li class="vol-sidebar__list-item"><a href="/artigo/O-Journal-no-Linux-para-a-guarda-e-consulta-de-logs-do-sistema">O Journal no Linux para a guarda e consulta de logs do sistema</a></li>
</ul>
</section>
</div>
<div class="vol-sidebar__slot vol-sidebar__slot--tips"><section class="vol-sidebar__card" aria-labelledby="vol-sidebar-Dicas">
<h3 class="vol-sidebar__heading" id="vol-sidebar-Dicas">Dicas</h3>
<ul class="vol-sidebar__list" role="list">
<li class="vol-sidebar__list-item"><a href="/dica/Como-extrair-qualquer-arquivo-com-um-unico-comando-no-terminal">Como extrair qualquer arquivo com um único comando no terminal</a></li>
<li class="vol-sidebar__list-item"><a href="/dica/Capturando-a-tela-do-PC-quando-o-OBS-Studio-nao-funciona">Capturando a tela do PC quando o OBS Studio não funciona</a></li>
<li class="vol-sidebar__list-item"><a href="/dica/Sincronizando-o-Onedrive-com-o-RClone">Sincronizando o Onedrive com o RClone</a></li>
<li class="vol-sidebar__list-item"><a href="/dica/Removendo-imagens-de-arquivos-PDF-via-terminal-no-Linux">Removendo imagens de arquivos PDF via terminal no Linux</a></li>
<li class="vol-sidebar__list-item"><a href="/dica/As-melhores-alternativas-entre-as-IAs-Generativas-gratuitas-para-gerar-cdigo-para-Robots-em-bolsas-de-valores-no-mercado-domstico">As melhores alternativas entre as IAs Generativas gratuitas para gerar código para Robots em bolsas de valores no mercado doméstico</a></li>
</ul>
</section>
</div>
<div class="vol-sidebar__slot vol-sidebar__slot--topics"><section class="vol-sidebar__card" aria-labelledby="vol-sidebar-Topicos">
<h3 class="vol-sidebar__heading" id="vol-sidebar-Topicos">Tópicos</h3>
<ul class="vol-sidebar__list" role="list">
<li class="vol-sidebar__list-item"><a href="/topico/vivaolinux/Topico-para-BUG-REPORT-do-TEMA-ESCURO">Tópico para BUG REPORT do TEMA ESCURO (0)</a></li>
<li class="vol-sidebar__list-item"><a href="/topico/Hard-on-Linux/fdisk-com-resultado-estranho">fdisk com resultado estranho... (3)</a></li>
<li class="vol-sidebar__list-item"><a href="/topico/vivaolinux/O-que-est-achando-no-NOVO-Viva-o-Linux">O que está achando do NOVO Viva o Linux? (79)</a></li>
<li class="vol-sidebar__list-item"><a href="/topico/Java/Entendendo-o-Maven-com-JavaFX">Entendendo o Maven com JavaFX (13)</a></li>
<li class="vol-sidebar__list-item"><a href="/topico/Java/Largura-altura-esquerda-e-topo-de-um-botao-JavaFX">Largura, altura, esquerda e topo de um botão JavaFX (0)</a></li>
</ul>
</section>
</div>
</aside>
</div><!--/row-centro-->
</div><!--/container-->
<!-- End Content Part -->
<!--=== Footer Version 1 ===-->
<footer class="footer-v1" role="contentinfo">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 md-margin-bottom-40 vol-footer__brand">
<a href="/"><img class="footer-logo" src="/imagens/logo-vol-white.png?v=6a00b1a2-130d" width="93" height="40" alt="Viva o Linux"></a>
<p>A maior comunidade GNU/Linux da América Latina. Artigos, dicas, tutoriais, fórum, scripts e troca de conhecimento desde 2002.</p>
</div>
<div class="col-md-3 col-sm-6 md-margin-bottom-40 vol-footer__section">
<h3>Comunidade</h3>
<div class="posts">
<ul class="list-unstyled latest-list">
<li> <a href="/faq.php">FAQ - Perguntas frequentes</a></li>
<li> <a href="/estatisticas.php">Estatísticas do site</a></li>
<li> <a href="/equipe/">Equipe de moderadores</a></li>
<li> <a href="/membros/">Membros da comunidade</a></li>
<li> <a href="/feeds/">Feeds RSS</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6 md-margin-bottom-40 vol-footer__section">
<h3>Institucional</h3>
<div class="posts">
<ul class="list-unstyled latest-list">
<li> <a href="/falecom/">Contato</a></li>
<li> <a href="/anuncie/">Anuncie no VOL</a></li>
<li> <a href="/quemsomos/">Quem somos</a></li>
<li> <a href="/privacidade/">Política de privacidade</a></li>
<li> <a href="/termos-de-uso/">Termos de uso</a></li>
<li> <a href="#preferencias-cookies" data-cookie-consent-open>Preferências de cookies</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6 md-margin-bottom-40 vol-footer__section vol-footer__host">
<h3>Hospedagem</h3>
<p>Site hospedado por:</p>
<a href="https://www.redehost.com.br/" target="_blank" rel="nofollow"><img src="/imagens/logo-redehost.png?v=6a00b1a2-e5a" width="196" height="53" class="footer-header" alt="RedeHost"></a>
</div>
</div>
<div class="row vol-footer__bottom">
<div class="col-md-12">
<p>Viva o Linux desde 2002 · comunidade brasileira de GNU/Linux e software livre.</p>
</div>
</div>
</div>
</div><!--/footer-->
</footer>
<!--=== End Footer Version 1 ===-->
<button type="button" class="vol-scroll-top" data-vol-scroll-top aria-label="Voltar ao topo" title="Voltar ao topo">
<i class="fa fa-angle-up" aria-hidden="true"></i>
</button>
</div><!--/wrapper-->
<style>
.footer-v1 .footer .vol-footer__section h3 {
margin: 0 0 12px;
color: #f7fbf8;
font-size: .9375rem;
font-weight: 700;
line-height: 1.3;
}
.footer-v1 .footer .vol-footer__brand p,
.footer-v1 .footer .vol-footer__host p,
.footer-v1 .footer .vol-footer__bottom p {
color: #d9e4dd;
line-height: 1.55;
}
.footer-v1 .footer .vol-footer__brand p {
margin-top: 12px;
max-width: 31ch;
}
.footer-v1 .footer .vol-footer__section .latest-list li {
padding: 4px 0;
}
.footer-v1 .footer .vol-footer__section .latest-list a {
display: inline-block;
color: #d9e4dd;
line-height: 1.35;
}
.footer-v1 .footer .vol-footer__section .latest-list a:hover,
.footer-v1 .footer .vol-footer__section .latest-list a:focus {
color: #fff;
text-decoration: underline;
}
.footer-v1 .footer .vol-footer__host .footer-header {
margin-top: 2px;
max-width: 150px;
height: auto;
}
.footer-v1 .footer .vol-footer__bottom {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer-v1 .footer .vol-footer__bottom p {
margin: 0;
font-size: .75rem;
}
</style>
<!-- JS Global Compulsory -->
<script src="/include/js/jquery-1.11.1.min.js?v=6a00b1a2-1762a"></script>
<script src="/include/js/bootstrap.min.js?v=6a00b1a2-7c4b"></script>
<!-- picture-cut-->
<!-- JS Page Level -->
<script src="/assets/js/mega.js?v=6a00b1a1-fc0"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
//$("#banner-sky").replaceWith( $("#google-sky") );
//$("#banner-left").replaceWith( $("#google-left") );
$('[data-toggle="tooltip"]').tooltip();
$('[data-tooltip="tooltip"]').tooltip();
$("button[type=submit]").not("[data-question-submit]").attr("data-loading-text", "Enviando...");
$("button[data-loading-text]").not("[data-question-submit]").click(function () {
var btn = $(this).button("loading");
setInterval(function () {
btn.button("reset");
}, 2000);
});
$('div#gad336').removeClass('centro');
$('div#gad336').addClass('floatright');
});
</script>
<script>
(function () {
var widgetsScriptUrl = "/include/js/vol-content-widgets.js?v=6a00b1a2-8f6";
function pageNeedsContentWidgets() {
return !!document.querySelector('.counter, .newsticker');
}
function initContentWidgets() {
if (window.VolContentWidgets && window.VolContentWidgets.init) {
window.VolContentWidgets.init(document);
}
}
function loadContentWidgets() {
if (!pageNeedsContentWidgets()) {
return;
}
if (window.VolContentWidgets) {
initContentWidgets();
return;
}
if (document.querySelector('script[data-vol-content-widgets-js]')) {
return;
}
var script = document.createElement('script');
script.src = widgetsScriptUrl;
script.defer = true;
script.setAttribute('data-vol-content-widgets-js', '1');
script.onload = initContentWidgets;
document.head.appendChild(script);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', loadContentWidgets);
} else {
loadContentWidgets();
}
}());
</script>
<script>
(function () {
var prettifyScriptUrl = "/include/js/google-code-prettify.js?v=6a00b1a2-38d7";
var prettifyStyleUrl = "/assets/css/google-code-prettify/prettify.css?v=6a00b1a1-2a3";
function loadPrettify() {
if (!document.querySelector('.prettyprint')) {
return;
}
if (!document.querySelector('link[data-vol-prettify-css]')) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = prettifyStyleUrl;
link.setAttribute('data-vol-prettify-css', '1');
document.head.appendChild(link);
}
if (window.prettyPrint) {
window.prettyPrint();
return;
}
if (document.querySelector('script[data-vol-prettify-js]')) {
return;
}
var script = document.createElement('script');
script.src = prettifyScriptUrl;
script.defer = true;
script.setAttribute('data-vol-prettify-js', '1');
script.onload = function () {
if (window.prettyPrint) {
window.prettyPrint();
}
};
document.head.appendChild(script);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', loadPrettify);
} else {
loadPrettify();
}
}());
</script>
<script>
(function () {
var likeScriptUrl = "/include/js/vol-like-buttons.js?v=6a00b1a2-1152";
function loadLikeButtons() {
if (!document.querySelector('.btn-like')) {
return;
}
if (document.querySelector('script[data-vol-like-buttons-js]')) {
return;
}
var script = document.createElement('script');
script.src = likeScriptUrl;
script.defer = true;
script.setAttribute('data-vol-like-buttons-js', '1');
document.head.appendChild(script);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', loadLikeButtons);
} else {
loadLikeButtons();
}
}());
</script>
<!--[if lt IE 9]>
<script src="/assets/plugins/ie-plugins-min.js?v=6a00b1a1-29fe"></script>
<![endif]-->
<script>
var VOL_PUBLIC_ORIGIN = "https://www.vivaolinux.com.br";
window.VOL_MEDIA_ORIGIN = "";
</script>
<script src="/include/js/vol-global-helpers.js?v=6a0503c8-2722"></script>
<script src="/include/js/vol-theme.js?v=6a056aed-1e3e" defer></script>
<script src="/include/js/mobileSidebarDrawer.js?v=6a01675e-9b9" defer></script>
<script src="/include/js/vol-mentions.js?v=6a00b1a2-2f2e"></script>
<script src="/include/js/vol-wysiwyg-editor.js?v=6a0503c8-7f09"></script>
<script src="/include/js/vol-signature-card.js?v=6a056aed-5ae" defer></script>
<script src="/include/js/adminCtrlEnter2026.js?v=6a00b1a2-16f4" defer></script>
<!-- Google Analytics is loaded by the cookie consent component after opt-in. -->
<script>
function leftArrowPressed() {
}
function rightArrowPressed() {
}
document.onkeydown = function(evt) {
evt = evt || window.event;
if (!volShortcutTargetAllowsPageNavigation(evt.target || document.activeElement)) {
return;
}
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
}
};
function volShortcutTargetAllowsPageNavigation(target) {
if (!target || target === document || target === document.body) {
return true;
}
if (target.isContentEditable) {
return false;
}
var tag = target.tagName ? target.tagName.toLowerCase() : '';
if (tag === 'textarea' || tag === 'select' || tag === 'button') {
return false;
}
if (tag === 'input') {
return false;
}
return !(target.closest && target.closest('[contenteditable="true"], [role="textbox"], [data-vol-wysiwyg-editor]'));
}
</script>
<style>
.vol-toast-region {
position: fixed;
top: 18px;
right: 18px;
z-index: 10050;
display: grid;
gap: 10px;
width: min(380px, calc(100vw - 32px));
pointer-events: none;
}
.vol-toast {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: start;
padding: 13px 14px;
border: 1px solid #d1d5db;
border-radius: 8px;
background: #fff;
box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
color: #111827;
opacity: 0;
transform: translateY(-8px);
transition: opacity .18s ease, transform .18s ease;
pointer-events: auto;
overflow: hidden;
}
.vol-toast--error {
background: #7f1d1d;
border-color: #7f1d1d;
color: #fff;
}
.vol-toast--info {
background: #eff6ff;
border-color: #2563eb;
color: #1e3a8a;
}
.vol-toast--success {
background: #ecfdf5;
border-color: #047857;
color: #064e3b;
}
.vol-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
.vol-toast__message {
margin: 0;
font-size: var(--vol-type-small);
line-height: 1.45;
overflow-wrap: anywhere;
}
.vol-toast__close {
border: 0;
background: transparent;
color: #4b5563;
font-size: 1.375rem;
line-height: 1;
padding: 0 0 0 6px;
}
.vol-toast__close:hover,
.vol-toast__close:focus {
color: #111827;
}
.vol-toast--error .vol-toast__close {
color: #fff;
}
.vol-toast--error .vol-toast__message {
color: #fff;
font-weight: 700;
}
.vol-toast--error .vol-toast__close:hover,
.vol-toast--error .vol-toast__close:focus {
color: #fff;
}
.vol-toast--anchored {
position: fixed;
width: min(340px, calc(100vw - 24px));
z-index: 10060;
transform: translateY(6px);
}
.vol-like-buttons {
align-items: center;
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
}
.vol-like-buttons .btn-like {
align-items: center;
display: inline-flex;
gap: 5px;
line-height: 1.2;
min-height: 34px;
transform-origin: center;
}
.vol-like-buttons .btn-like.is-like-shaking {
animation: vol-like-shake 280ms cubic-bezier(0.25, 1, 0.5, 1) 1;
will-change: transform;
}
.vol-like-buttons .btn-like[disabled] {
cursor: not-allowed;
opacity: .62;
}
.vol-like-buttons .btn-like.is-active {
background: #f3f8f2;
border-color: #008318;
color: #00540f !important;
font-weight: 700;
}
.vol-like-buttons .article-like__status {
color: #667085;
font-size: .75rem;
min-height: 16px;
}
.vol-like-buttons .article-like__status.is-error {
color: #991b1b;
font-weight: 700;
}
.vol-like-buttons .article-like__status.is-success {
color: #00540f;
font-weight: 700;
}
@keyframes vol-like-shake {
0% { transform: translate3d(0, 0, 0) rotate(0deg); }
18% { transform: translate3d(-2px, 0, 0) rotate(-4deg); }
36% { transform: translate3d(2px, 0, 0) rotate(4deg); }
54% { transform: translate3d(-1px, 0, 0) rotate(-2deg); }
72% { transform: translate3d(1px, 0, 0) rotate(2deg); }
100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
.vol-like-buttons .btn-like.is-like-shaking {
animation: none;
}
}
@media (max-width: 640px) {
.vol-toast-region {
top: 12px;
right: 12px;
left: 12px;
width: auto;
}
}
</style>
<div class="vol-toast-region" id="vol-toast-region" aria-live="polite" aria-atomic="true"></div>
<script>
(function () {
var allowed = { info: true, success: true, error: true };
var defaultDuration = 5200;
function region() {
var existing = document.getElementById('vol-toast-region');
if (existing) {
return existing;
}
var created = document.createElement('div');
created.className = 'vol-toast-region';
created.id = 'vol-toast-region';
created.setAttribute('aria-live', 'polite');
created.setAttribute('aria-atomic', 'true');
document.body.appendChild(created);
return created;
}
function removeToast(toast) {
if (!toast || toast.getAttribute('data-removing') === '1') {
return;
}
toast.setAttribute('data-removing', '1');
toast.className = toast.className.replace(/\bis-visible\b/g, '');
setTimeout(function () {
if (toast.parentNode) {
toast.parentNode.removeChild(toast);
}
}, 220);
}
function placeAnchoredToast(toast, anchor) {
var rect = anchor.getBoundingClientRect();
var width = toast.offsetWidth || 320;
var height = toast.offsetHeight || 58;
var margin = 8;
var left = rect.left + (rect.width / 2) - (width / 2);
var top = rect.top - height - margin;
left = Math.max(12, Math.min(left, window.innerWidth - width - 12));
if (top < 12) {
top = rect.bottom + margin;
}
toast.style.left = Math.round(left) + 'px';
toast.style.top = Math.round(top) + 'px';
}
function show(category, message, options) {
category = allowed[category] ? category : 'info';
message = String(message || '').replace(/\s+/g, ' ').trim();
if (!message) {
return null;
}
options = options || {};
var toast = document.createElement('div');
toast.className = 'vol-toast vol-toast--' + category;
toast.setAttribute('role', category === 'error' ? 'alert' : 'status');
toast.innerHTML = '<p class="vol-toast__message"></p><button type="button" class="vol-toast__close" aria-label="Fechar aviso">×</button>';
toast.querySelector('.vol-toast__message').textContent = message;
toast.querySelector('.vol-toast__close').addEventListener('click', function () {
removeToast(toast);
});
var anchor = options.anchor ? document.querySelector(options.anchor) : null;
if (anchor) {
toast.className += ' vol-toast--anchored';
anchor.insertAdjacentElement('beforebegin', toast);
placeAnchoredToast(toast, anchor);
} else {
region().appendChild(toast);
}
setTimeout(function () {
toast.className += ' is-visible';
}, 20);
setTimeout(function () {
removeToast(toast);
}, options.duration || defaultDuration);
return toast;
}
window.volToast = {
info: function (message, options) {
return show('info', message, options);
},
success: function (message, options) {
return show('success', message, options);
},
error: function (message, options) {
return show('error', message, options);
}
};
document.addEventListener('DOMContentLoaded', function () {
var items = document.querySelectorAll('[data-vol-toast]');
for (var i = 0; i < items.length; i++) {
var item = items[i];
var category = item.getAttribute('data-vol-toast') || 'info';
var message = item.getAttribute('data-vol-toast-message') || item.textContent || '';
show(category, message, { duration: 6500, anchor: item.getAttribute('data-vol-anchor') || '' });
}
});
}());
</script>
<style>
.vol-cookie-consent[hidden] {
display: none;
}
.vol-cookie-consent {
align-items: center;
background: rgba(15, 23, 42, .68);
bottom: 0;
display: flex;
justify-content: center;
left: 0;
padding: 20px;
position: fixed;
right: 0;
top: 0;
z-index: 100000;
}
.vol-cookie-consent__dialog {
background: #fff;
border: 1px solid #d8dee9;
border-radius: 8px;
box-shadow: 0 22px 70px rgba(15, 23, 42, .28);
color: #1f2937;
max-height: calc(100vh - 40px);
max-width: 620px;
overflow: auto;
padding: 22px;
width: 100%;
}
.vol-cookie-consent__title {
color: #111827;
font-size: var(--vol-type-h3);
font-weight: 700;
line-height: 1.25;
margin: 0 0 8px;
}
.vol-cookie-consent__text {
font-size: var(--vol-type-small);
line-height: 1.55;
margin: 0 0 18px;
}
.vol-cookie-consent__options {
border: 1px solid #e5e7eb;
border-radius: 6px;
margin-bottom: 18px;
}
.vol-cookie-consent__option {
align-items: flex-start;
border-bottom: 1px solid #e5e7eb;
display: flex;
gap: 12px;
padding: 13px 14px;
}
.vol-cookie-consent__option:last-child {
border-bottom: 0;
}
.vol-cookie-consent__option input {
flex: 0 0 auto;
margin-top: 3px;
}
.vol-cookie-consent__option strong {
color: #111827;
display: block;
font-size: var(--vol-type-small);
margin-bottom: 3px;
}
.vol-cookie-consent__option span {
color: #4b5563;
display: block;
font-size: var(--vol-type-caption);
line-height: 1.45;
}
.vol-cookie-consent__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
.vol-cookie-consent__button {
background: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 6px;
color: #111827;
cursor: pointer;
font-size: var(--vol-type-small);
font-weight: 600;
line-height: 1.2;
min-height: 38px;
padding: 9px 13px;
}
.vol-cookie-consent__button:focus {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
.vol-cookie-consent__button--primary {
background: #166534;
border-color: #166534;
color: #fff;
}
html[data-vol-theme="dark"] .vol-cookie-consent {
background: var(--vol-color-overlay);
}
html[data-vol-theme="dark"] .vol-cookie-consent__dialog {
background: var(--vol-color-surface-raised);
border-color: var(--vol-color-border);
box-shadow: 0 22px 60px rgba(0, 0, 0, .54);
color: var(--vol-color-text);
}
html[data-vol-theme="dark"] .vol-cookie-consent__title,
html[data-vol-theme="dark"] .vol-cookie-consent__option strong {
color: var(--vol-color-heading);
}
html[data-vol-theme="dark"] .vol-cookie-consent__text,
html[data-vol-theme="dark"] .vol-cookie-consent__option span {
color: var(--vol-color-muted);
}
html[data-vol-theme="dark"] .vol-cookie-consent__options,
html[data-vol-theme="dark"] .vol-cookie-consent__option {
border-color: var(--vol-color-border);
}
html[data-vol-theme="dark"] .vol-cookie-consent__option {
background: var(--vol-color-surface);
}
html[data-vol-theme="dark"] .vol-cookie-consent__button {
background: var(--vol-color-surface);
border-color: var(--vol-color-border-strong);
color: var(--vol-color-text);
}
html[data-vol-theme="dark"] .vol-cookie-consent__button:focus {
outline-color: var(--vol-color-accent);
}
html[data-vol-theme="dark"] .vol-cookie-consent__button--primary {
background: var(--vol-color-accent);
border-color: var(--vol-color-accent);
color: #fff;
}
@media (max-width: 520px) {
.vol-cookie-consent {
align-items: flex-end;
padding: 12px;
}
.vol-cookie-consent__dialog {
padding: 18px;
}
.vol-cookie-consent__actions,
.vol-cookie-consent__button {
width: 100%;
}
}
</style>
<div class="vol-cookie-consent" data-cookie-consent-modal hidden aria-hidden="true">
<div class="vol-cookie-consent__dialog" role="dialog" aria-modal="true" aria-labelledby="vol-cookie-consent-title">
<h2 class="vol-cookie-consent__title" id="vol-cookie-consent-title">Preferências de cookies</h2>
<p class="vol-cookie-consent__text">Usamos cookies essenciais para manter o site funcionando. Cookies de estatísticas e anúncios só serão carregados se você permitir.</p>
<div class="vol-cookie-consent__options">
<label class="vol-cookie-consent__option">
<input type="checkbox" checked disabled>
<span>
<strong>Essenciais</strong>
<span>Necessários para login, sessão, segurança e preferências básicas.</span>
</span>
</label>
<label class="vol-cookie-consent__option">
<input type="checkbox" data-cookie-consent-statistics>
<span>
<strong>Estatísticas</strong>
<span>Ajuda a entender navegação e audiência usando Google Analytics.</span>
</span>
</label>
<label class="vol-cookie-consent__option">
<input type="checkbox" data-cookie-consent-ads>
<span>
<strong>Anúncios</strong>
<span>Permite carregar Google Adsense e melhorar a monetização do site.</span>
</span>
</label>
</div>
<div class="vol-cookie-consent__actions">
<button type="button" class="vol-cookie-consent__button" data-cookie-consent-reject>Recusar opcionais</button>
<button type="button" class="vol-cookie-consent__button" data-cookie-consent-save>Salvar preferências</button>
<button type="button" class="vol-cookie-consent__button vol-cookie-consent__button--primary" data-cookie-consent-accept>Aceitar todos</button>
</div>
</div>
</div>
<script>
(function () {
var cookieName = 'vol_cookie_consent';
var consentVersion = Number('1') || 1;
var analyticsId = 'G-40EGW0ERX5' || 'G-40EGW0ERX5';
var adsenseClient = '';
var maxAge = 60 * 60 * 24 * 180;
var modal = document.querySelector('[data-cookie-consent-modal]');
var statisticsInput = document.querySelector('[data-cookie-consent-statistics]');
var adsInput = document.querySelector('[data-cookie-consent-ads]');
var analyticsLoaded = false;
var adsLoaded = false;
function readConsent() {
var parts = document.cookie ? document.cookie.split('; ') : [];
for (var i = 0; i < parts.length; i++) {
var pair = parts[i].split('=');
if (pair[0] !== cookieName) {
continue;
}
try {
var consent = JSON.parse(decodeURIComponent(pair.slice(1).join('=')));
if (!consent || Number(consent.version) !== consentVersion) {
return null;
}
return {
statistics: consent.statistics === true,
ads: consent.ads === true
};
} catch (e) {
return null;
}
}
return null;
}
function writeConsent(statistics, ads) {
var consent = {
version: consentVersion,
statistics: statistics === true,
ads: ads === true,
savedAt: new Date().toISOString()
};
document.cookie = cookieName + '=' + encodeURIComponent(JSON.stringify(consent)) + '; path=/; max-age=' + maxAge + '; SameSite=Lax';
return consent;
}
function loadAnalytics() {
if (analyticsLoaded || !analyticsId) {
return;
}
analyticsLoaded = true;
window.dataLayer = window.dataLayer || [];
window.gtag = window.gtag || function () {
window.dataLayer.push(arguments);
};
window.gtag('js', new Date());
window.gtag('config', analyticsId);
var script = document.createElement('script');
script.async = true;
script.src = 'https://www.googletagmanager.com/gtag/js?id=' + encodeURIComponent(analyticsId);
document.head.appendChild(script);
}
function loadAdsense() {
if (adsLoaded || !adsenseClient) {
return;
}
adsLoaded = true;
hideAdFallbacks();
pushLegacyAdsenseSlots();
var script = document.createElement('script');
script.async = true;
script.crossOrigin = 'anonymous';
script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=' + encodeURIComponent(adsenseClient);
script.onerror = function () {
showAdFallbacks('blocked');
};
document.head.appendChild(script);
window.setTimeout(checkAdsenseFill, 3500);
}
function adSlotContainer(slot) {
return slot.closest ? slot.closest('.vol-ad-container, .vol-sidebar__banner') : null;
}
function showAdFallbacks(reason) {
var slots = document.querySelectorAll('.adsbygoogle');
for (var i = 0; i < slots.length; i++) {
var container = adSlotContainer(slots[i]);
if (!container) {
continue;
}
container.classList.add('is-ad-fallback');
container.setAttribute('data-vol-ad-fallback-reason', reason || 'unavailable');
}
}
function hideAdFallbacks() {
var containers = document.querySelectorAll('.vol-ad-container.is-ad-fallback, .vol-sidebar__banner.is-ad-fallback');
for (var i = 0; i < containers.length; i++) {
containers[i].classList.remove('is-ad-fallback');
containers[i].removeAttribute('data-vol-ad-fallback-reason');
}
}
function checkAdsenseFill() {
if (!adsLoaded) {
return;
}
var slots = document.querySelectorAll('.adsbygoogle');
for (var i = 0; i < slots.length; i++) {
var status = slots[i].getAttribute('data-ad-status');
var loaded = slots[i].getAttribute('data-adsbygoogle-status');
if (status === 'unfilled') {
continue;
}
if (loaded !== 'done') {
var container = adSlotContainer(slots[i]);
if (container) {
container.classList.add('is-ad-fallback');
container.setAttribute('data-vol-ad-fallback-reason', 'blocked');
}
}
}
}
function pushLegacyAdsenseSlots() {
var slots = document.querySelectorAll('.adsbygoogle');
window.adsbygoogle = window.adsbygoogle || [];
for (var i = 0; i < slots.length; i++) {
if (slots[i].getAttribute('data-vol-adsense-loaded') === '1') {
continue;
}
slots[i].setAttribute('data-vol-adsense-loaded', '1');
try {
window.adsbygoogle.push({});
} catch (e) {
break;
}
}
}
function applyConsent(consent) {
if (!consent) {
return;
}
if (consent.statistics) {
loadAnalytics();
}
if (consent.ads) {
loadAdsense();
} else {
showAdFallbacks('cookies');
}
}
function setInputs(consent) {
if (statisticsInput) {
statisticsInput.checked = !!(consent && consent.statistics);
}
if (adsInput) {
adsInput.checked = !!(consent && consent.ads);
}
}
function showModal(consent) {
if (!modal) {
return;
}
setInputs(consent);
modal.hidden = false;
modal.setAttribute('aria-hidden', 'false');
}
function hideModal() {
if (!modal) {
return;
}
modal.hidden = true;
modal.setAttribute('aria-hidden', 'true');
}
function saveAndApply(statistics, ads) {
var consent = writeConsent(statistics, ads);
hideModal();
applyConsent(consent);
}
window.volOpenCookieConsent = function () {
showModal(readConsent());
};
document.addEventListener('click', function (event) {
var consentOpenTrigger = event.target.closest ? event.target.closest('[data-cookie-consent-open]') : null;
if (consentOpenTrigger) {
event.preventDefault();
showModal(readConsent());
}
if (event.target.matches('[data-cookie-consent-reject]')) {
saveAndApply(false, false);
}
if (event.target.matches('[data-cookie-consent-save]')) {
saveAndApply(!!(statisticsInput && statisticsInput.checked), !!(adsInput && adsInput.checked));
}
if (event.target.matches('[data-cookie-consent-accept]')) {
saveAndApply(true, true);
}
});
var consent = readConsent();
if (consent) {
applyConsent(consent);
} else {
showAdFallbacks('cookies');
showModal(null);
}
}());
</script>
</body>
</html>
<\div>').appendTo( $navWrap );
var currPanel = 0;
$navLeft.click(function() {
currPanel--;
\\ check if the new panel value is too small
if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1;
slidePanel(currPanel, 'direita');
});
$navRight.click(function() {
currPanel++;
\\ check if the new panel value is too big
if ( currPanel >= $sliderPanels.length ) currPanel = 0;
slidePanel(currPanel, 'esquerda');
});
});
\* PEGAR ALTURA TOTAL DA PAGINA *\
Agora vamos criar o arquivo css.css, que vai auxiliar o funcoes.js e dar uma "cara" pro nosso site:
@charset "utf-8";
\* CSS Document *\
\*RESETAR O CSS*\
*{
margin:0px;
padding:0px;
}
#conteudo {
overflow: hidden;
}
#fundo-total {
position: relative;
width: 100%;
margin: 0 auto;
}
#fundo-total .paginas-total {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
visibility: hidden;
}
#fundo-total .paginas-total.ativa {
visibility: visible;
}
#fundo-total-setas {
position: absolute;
top: 0;
right: 0;
height:350px;
left:50%;
margin:-175px 0 0 -450px;
top:50%;
width:900px
}
#fundo-total-setas-esquerda{
display: inline-block;
height: 0;
width: 0;
cursor: pointer;
position:absolute;
left:-50px;
top:142px;
z-index:9999;
}
#fundo-total-setas-direita {
display: inline-block;
height: 0;
width: 0;
cursor: pointer;
position:absolute;
right:-50px;
top:142px;
z-index:9999;
}
#fundo-total-setas-esquerda {
background:url(seta-esq.png) top center no-repeat;
width:64px;
height:64px;
}
#fundo-total-setas-direita {
background:url(seta-dir.png) top center no-repeat;
width:64px;
height:64px;
}
\* IMAGEM DE FUNDO DE CADA PAGINA *\
#fundo-total .fundo01 {background: url(images\fotos1.jpg) no-repeat center center fixed;}
#fundo-total .fundo02 {background: url(images\fotos2.jpg) no-repeat center center fixed;}
#fundo-total .fundo03 {background: url(images\fotos3.jpg) no-repeat center center fixed;}
#fundo-total .fundo04 {background: url(images\fotos4.jpg) no-repeat center center fixed;}
#fundo-total .fundo05 {background: url(images\fotos5.jpg) no-repeat center center fixed;}
#fundo-total .fundo06 {background: url(images\fotos6.jpg) no-repeat center center fixed;}
\* IMAGEM DE FUNDO DE CADA PAGINA *\
\* FAZER TODAS PAGINAS FULLSCREEN *\
#fundo-total .fundo01, #fundo-total .fundo02, #fundo-total .fundo03, #fundo-total .fundo04,
#fundo-total .fundo05, #fundo-total .fundo06{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
\* FAZER TODAS PAGINAS FULLSCREEN *\
E por final, vamos unir os dois arquivos no HTML e ver como fica: