diff --git a/index.html b/index.html index 88fccd5..24d6fc3 100644 --- a/index.html +++ b/index.html @@ -380,9 +380,29 @@ transform: translate3d(0, 0, 0) scale(0.98); } + .pix-instruction { + display: none; + margin-top: 15px; + text-align: center; + color: #32BCAD; + font-size: 0.95em; + font-weight: 600; + opacity: 0; + transform: translate3d(0, -5px, 0); + } + + .pix-instruction.active { + display: block; + animation: fadeInUp 0.3s ease forwards 0.2s; + } + + @keyframes fadeInUp { + to { opacity: 1; transform: translate3d(0, 0, 0); } + } + .pix-code-area { display: none; - margin-top: 20px; + margin-top: 8px; padding: 15px; background: #f5f5f5; border-radius: 10px; @@ -399,22 +419,17 @@ contain: layout style paint; } - .pix-code-area::before { - content: '👆 Clique para copiar'; + .pix-code-area::after { + content: '📋'; position: absolute; - top: -8px; + top: 10px; right: 10px; - background: #32BCAD; - color: white; - padding: 4px 10px; - border-radius: 12px; - font-size: 0.75em; - font-family: 'Segoe UI', sans-serif; - opacity: 0; - transition: opacity 0.3s ease; + font-size: 1.3em; + opacity: 0.6; + transition: opacity 0.2s ease; } - .pix-code-area.active::before { + .pix-code-area:hover::after { opacity: 1; } @@ -637,6 +652,7 @@ +
👇 Clique no código abaixo para copiar
✓ Código copiado!
@@ -646,6 +662,7 @@ const pixModal = document.getElementById('pixModal'), pixValue = document.getElementById('pixValue'), pixCodeArea = document.getElementById('pixCodeArea'), + pixInstruction = document.getElementById('pixInstruction'), copyNotification = document.getElementById('copyNotification'), modalContent = pixModal.querySelector('.modal-content'); @@ -671,6 +688,7 @@ animStyle(modalContent, ''); pixValue.value = ''; pixCodeArea.classList.remove('active'); + pixInstruction.classList.remove('active'); copyNotification.classList.remove('active'); // Remove will-change para economizar recursos modalContent.style.willChange = 'auto'; @@ -692,6 +710,7 @@ pixCodeArea.textContent = pixCode; pixCodeArea.classList.add('active'); + pixInstruction.classList.add('active'); pixCodeArea.onclick = () => copyToClipboard(pixCode); copyToClipboard(pixCode); };