diff --git a/index.html b/index.html
index f87461d..a9d2181 100644
--- a/index.html
+++ b/index.html
@@ -373,6 +373,35 @@
color: #333;
transform: translateY(-10px);
opacity: 0;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ border: 2px solid transparent;
+ position: relative;
+ }
+
+ .pix-code-area::before {
+ content: '👆 Clique para copiar';
+ position: absolute;
+ top: -8px;
+ 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;
+ }
+
+ .pix-code-area.active::before {
+ opacity: 1;
+ }
+
+ .pix-code-area:hover {
+ background: #e8f5f3;
+ border-color: #32BCAD;
+ transform: scale(1.02);
}
.pix-code-area.active {
@@ -641,10 +670,16 @@
const pixCode = buildPixCode(pixKey, merchantName, city, formattedValue, txid);
// Exibe o código
- document.getElementById('pixCodeArea').textContent = pixCode;
- document.getElementById('pixCodeArea').classList.add('active');
+ const pixCodeArea = document.getElementById('pixCodeArea');
+ pixCodeArea.textContent = pixCode;
+ pixCodeArea.classList.add('active');
- // Copia automaticamente
+ // Adiciona evento de clique para copiar
+ pixCodeArea.onclick = function() {
+ copyToClipboard(pixCode);
+ };
+
+ // Copia automaticamente na primeira vez
copyToClipboard(pixCode);
}
@@ -724,7 +759,10 @@
function showCopyNotification() {
const notification = document.getElementById('copyNotification');
- notification.classList.add('active');
+ notification.classList.remove('active'); // Remove primeiro para reiniciar animação
+ setTimeout(() => {
+ notification.classList.add('active');
+ }, 10);
setTimeout(() => {
notification.classList.remove('active');
}, 3000);