redecomep:backbone:start
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision | |||
|
redecomep:backbone:start [2026/06/17 18:17] admin |
redecomep:backbone:start [2026/06/18 14:25] (current) admin |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| <html> | <html> | ||
| - | <img id="backbone-image" src="" style="width: 1500px; max-width: 100%;"/> | + | <style> |
| + | #backbone-image { | ||
| + | width: 1500px; | ||
| + | max-width: 100%; | ||
| + | cursor: zoom-in; | ||
| + | transition: opacity 0.3s; | ||
| + | } | ||
| + | #backbone-image:hover { | ||
| + | opacity: 0.9; | ||
| + | } | ||
| + | |||
| + | /* Moldura do Modal (Fundo escuro) */ | ||
| + | .zoom-modal { | ||
| + | display: none; | ||
| + | position: fixed; | ||
| + | z-index: 9999; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | background-color: rgba(0, 0, 0, 0.85); | ||
| + | justify-content: center; | ||
| + | align-items: center; | ||
| + | overflow: auto; | ||
| + | } | ||
| + | |||
| + | /* Imagem expandida */ | ||
| + | .zoom-modal img { | ||
| + | max-width: 90%; | ||
| + | max-height: 90%; | ||
| + | object-fit: contain; | ||
| + | transition: transform 0.2s ease; | ||
| + | cursor: zoom-out; | ||
| + | } | ||
| + | |||
| + | /* Botão de fechar */ | ||
| + | .zoom-close { | ||
| + | position: absolute; | ||
| + | top: 20px; | ||
| + | right: 30px; | ||
| + | color: #fff; | ||
| + | font-size: 40px; | ||
| + | font-weight: bold; | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | </style> | ||
| + | |||
| + | <img id="backbone-image" src="" alt="Tráfego do Backbone" title="Clique para ampliar"/> | ||
| <div style="font-size: 12px; color: #555; margin-top: 5px;"> | <div style="font-size: 12px; color: #555; margin-top: 5px;"> | ||
| Arquivo atualizado em: <span id="timestamp-backbone">Verificando...</span> | Arquivo atualizado em: <span id="timestamp-backbone">Verificando...</span> | ||
| + | </div> | ||
| + | |||
| + | <div id="myModal" class="zoom-modal" onclick="fecharModal()"> | ||
| + | <span class="zoom-close">×</span> | ||
| + | <img id="img-modal" src="" alt="Backbone Ampliado"> | ||
| </div> | </div> | ||
| <script> | <script> | ||
| const imageUrl = "https://pop-mg.rnp.br/_media/img-nova.png?w=1500&tok=9471bb"; | const imageUrl = "https://pop-mg.rnp.br/_media/img-nova.png?w=1500&tok=9471bb"; | ||
| + | const imgElement = document.getElementById('backbone-image'); | ||
| + | const imgModal = document.getElementById('img-modal'); | ||
| + | const modal = document.getElementById('myModal'); | ||
| + | let scale = 1; | ||
| function verificarAtualizacaoImagem() { | function verificarAtualizacaoImagem() { | ||
| - | const imgElement = document.getElementById('backbone-image'); | ||
| const spanTimestamp = document.getElementById('timestamp-backbone'); | const spanTimestamp = document.getElementById('timestamp-backbone'); | ||
| const separador = imageUrl.includes('?') ? '&' : '?'; | const separador = imageUrl.includes('?') ? '&' : '?'; | ||
| Line 22: | Line 77: | ||
| downloadingImage.onload = function() { | downloadingImage.onload = function() { | ||
| - | // Garante que a imagem está 100% pronta e sem erros de renderização | ||
| downloadingImage.decode() | downloadingImage.decode() | ||
| .then(() => { | .then(() => { | ||
| imgElement.src = downloadingImage.src; | imgElement.src = downloadingImage.src; | ||
| + | // Atualiza a imagem do modal em background também | ||
| + | if(modal.style.display !== 'flex') { | ||
| + | imgModal.src = downloadingImage.src; | ||
| + | } | ||
| }) | }) | ||
| .catch(err => console.warn("Imagem incompleta detectada, ignorando atualização.")); | .catch(err => console.warn("Imagem incompleta detectada, ignorando atualização.")); | ||
| Line 45: | Line 103: | ||
| } | } | ||
| + | // Funções de controle do Zoom (Modal) | ||
| + | imgElement.onclick = function() { | ||
| + | modal.style.display = "flex"; | ||
| + | imgModal.src = this.src; | ||
| + | scale = 1; | ||
| + | imgModal.style.transform = `scale(${scale})`; | ||
| + | } | ||
| + | |||
| + | function fecharModal() { | ||
| + | modal.style.display = "none"; | ||
| + | } | ||
| + | |||
| + | // Controle de zoom com a roda do mouse (Scroll) dentro do modal | ||
| + | imgModal.addEventListener('wheel', function(e) { | ||
| + | e.preventDefault(); // Evita rolar a página de trás | ||
| + | if (e.deltaY < 0) { | ||
| + | scale += 0.1; // Zoom In | ||
| + | } else { | ||
| + | scale -= 0.1; // Zoom Out | ||
| + | } | ||
| + | // Limita o zoom entre 1x e 3x | ||
| + | scale = Math.min(Math.max(1, scale), 3); | ||
| + | imgModal.style.transform = `scale(${scale})`; | ||
| + | | ||
| + | // Se voltar ao tamanho normal, muda o cursor | ||
| + | imgModal.style.cursor = scale > 1 ? 'move' : 'zoom-out'; | ||
| + | }); | ||
| + | |||
| + | // Evita fechar o modal se clicar especificamente na imagem ampliada | ||
| + | imgModal.onclick = function(e) { | ||
| + | e.stopPropagation(); | ||
| + | } | ||
| + | |||
| + | // Inicialização | ||
| verificarAtualizacaoImagem(); | verificarAtualizacaoImagem(); | ||
| setInterval(verificarAtualizacaoImagem, 60000); | setInterval(verificarAtualizacaoImagem, 60000); | ||
| </script> | </script> | ||
| - | |||
| - | |||
| </html> | </html> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
redecomep/backbone/start.txt · Last modified: 2026/06/18 14:25 by admin
Page Tools
