52 lines
2.2 KiB
HTML
52 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>MCP Button Test Page</title>
|
|
<style>
|
|
body { font-family: monospace; max-width: 600px; margin: 40px auto; padding: 20px; }
|
|
button { display: block; margin: 10px 0; padding: 10px 20px; font-size: 16px; cursor: pointer; }
|
|
#result { margin-top: 20px; padding: 10px; border: 1px solid #ccc; min-height: 40px; }
|
|
.hidden { display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Button Test Page</h1>
|
|
|
|
<button id="btn-simple" onclick="document.getElementById('result').textContent='Simple button clicked!'">Click Me</button>
|
|
|
|
<button id="btn-addclass" class="min-h-[60vh] inline-flex items-center" onclick="document.getElementById('result').textContent='Tailwind button clicked!'">Tailwind Button</button>
|
|
|
|
<button id="btn-react-like" data-testid="react-btn">React-like Button</button>
|
|
|
|
<div id="result">No button clicked yet.</div>
|
|
|
|
<div id="hidden-section" class="hidden">
|
|
<p>This section appears after clicking the toggle button.</p>
|
|
<button id="btn-in-hidden" onclick="alert('Hidden button clicked!')">Hidden Button</button>
|
|
</div>
|
|
|
|
<button id="btn-toggle" onclick="var s=document.getElementById('hidden-section'); s.classList.toggle('hidden'); document.getElementById('result').textContent='Toggled hidden section'">Toggle Hidden Section</button>
|
|
|
|
<script>
|
|
// React-like event handling (addEventListener, not onclick)
|
|
document.getElementById('btn-react-like').addEventListener('click', function() {
|
|
document.getElementById('result').textContent = 'React-like button clicked via addEventListener!';
|
|
});
|
|
|
|
// Pointer event handling (like Radix UI)
|
|
var btnPointer = document.createElement('button');
|
|
btnPointer.id = 'btn-pointer';
|
|
btnPointer.textContent = 'Pointer Event Button';
|
|
btnPointer.addEventListener('pointerdown', function(e) {
|
|
document.getElementById('result').textContent = 'Pointer down detected!';
|
|
});
|
|
btnPointer.addEventListener('click', function(e) {
|
|
document.getElementById('result').textContent = 'Pointer button clicked!';
|
|
});
|
|
document.body.insertBefore(btnPointer, document.getElementById('result'));
|
|
</script>
|
|
</body>
|
|
</html>
|