|
|
<!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> |
|
|
|
