| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Copy Functionality Test</title> |
| </head> |
| <body> |
| <h1>Copy Functionality Test</h1> |
| |
| <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| border-radius: 10px; padding: 15px; margin: 10px 0; color: white;'> |
| <div style='margin-bottom: 10px;'> |
| <strong>💡 Test Suggestion:</strong> |
| </div> |
| <div id='suggestion-1' style='background: rgba(255,255,255,0.1); padding: 10px; border-radius: 5px; |
| margin: 10px 0; font-style: italic; line-height: 1.4; user-select: text;'> |
| This is a test suggestion that should be copyable to clipboard. |
| </div> |
| <div style='margin-top: 10px;'> |
| <button onclick=' |
| const text = document.getElementById("suggestion-1").innerText; |
| navigator.clipboard.writeText(text).then(() => { |
| this.innerHTML = "✅ Copied!"; |
| this.style.backgroundColor = "#10b981"; |
| setTimeout(() => { |
| this.innerHTML = "📋 Copy to Clipboard"; |
| this.style.backgroundColor = "rgba(255,255,255,0.2)"; |
| }, 2000); |
| }).catch(() => { |
| alert("Failed to copy to clipboard"); |
| }); |
| ' |
| style='background: rgba(255,255,255,0.2); border: none; color: white; |
| padding: 8px 16px; border-radius: 5px; cursor: pointer; |
| font-size: 14px; transition: all 0.2s;' |
| onmouseover='this.style.backgroundColor="rgba(255,255,255,0.3)"' |
| onmouseout='this.style.backgroundColor="rgba(255,255,255,0.2)"'> |
| 📋 Copy to Clipboard |
| </button> |
| </div> |
| </div> |
| |
| <p>Click the button above to test if copy functionality works in your browser.</p> |
| |
| <div style='margin-top: 20px; padding: 10px; background: #f0f0f0; border-radius: 5px;'> |
| <h3>Troubleshooting:</h3> |
| <ul> |
| <li>Make sure you're using HTTPS or localhost</li> |
| <li>Check browser console for errors</li> |
| <li>Try in a different browser</li> |
| <li>Ensure clipboard permissions are granted</li> |
| </ul> |
| </div> |
| </body> |
| </html> |
|
|
