// Função para tornar a imagem arrastável mas mantê-la dentro da viewport function makeDraggable() { const draggable = document.querySelector('div[style*="position: fixed"]'); let isDragging = false; let offsetX, offsetY; // Mudar o cursor quando estiver sobre o elemento draggable.style.pointerEvents = 'auto'; draggable.style.cursor = 'move'; // Eventos de mouse/touch draggable.addEventListener('mousedown', startDrag); draggable.addEventListener('touchstart', startDrag); document.addEventListener('mousemove', drag); document.addEventListener('touchmove', drag); document.addEventListener('mouseup', endDrag); document.addEventListener('touchend', endDrag); function startDrag(e) { isDragging = true; const rect = draggable.getBoundingClientRect(); if (e.type === 'mousedown') { offsetX = e.clientX - rect.left; offsetY = e.clientY - rect.top; } else { offsetX = e.touches[0].clientX - rect.left; offsetY = e.touches[0].clientY - rect.top; } e.preventDefault(); } function drag(e) { if (!isDragging) return; let x, y; if (e.type === 'mousemove') { x = e.clientX - offsetX; y = e.clientY - offsetY; } else { x = e.touches[0].clientX - offsetX; y = e.touches[0].clientY - offsetY; } // Limitar a posição para não sair da viewport const maxX = window.innerWidth - draggable.offsetWidth; const maxY = window.innerHeight - draggable.offsetHeight; x = Math.max(0, Math.min(x, maxX)); y = Math.max(0, Math.min(y, maxY)); draggable.style.left = x + 'px'; draggable.style.right = 'auto'; draggable.style.bottom = 'auto'; draggable.style.top = y + 'px'; e.preventDefault(); } function endDrag() { isDragging = false; } } // Iniciar quando o DOM estiver carregado document.addEventListener('DOMContentLoaded', makeDraggable); /* Estilo do gif no topo da tela */ .top-gif { width: 400%; /* O GIF vai cobrir toda a largura da tela */ height: 400px; /* Altura do GIF */ object-fit: cover; /* Garantir que o GIF cubra a área */ } /* Estilo do texto */ h1 { font-size: 50px; text-shadow: 3px 3px 5px #000; } p { font-size: 24px; margin-top: 20px; } .highlight { font-weight: bold; color: yellow; }

MOA METAL

background-image: url('https://pin.it/1YrS3im2q') !important; Hydration Reminder