test.html•1.42 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Page</title>
<style>
html, body {
height: 100%;
margin: 0;
background: #f5f5f5;
font-family: Arial, sans-serif;
}
.page {
width: 1080px;
height: 720px;
box-sizing: border-box;
margin: 24px auto;
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
background: #ffffff;
border: 1px solid #ddd;
border-radius: 6px;
}
h1 {
margin: 0 0 8px 0;
font-size: 32px;
}
p {
margin: 0 0 16px 0;
font-size: 16px;
color: #333;
}
button {
width: fit-content;
padding: 10px 16px;
font-size: 16px;
cursor: pointer;
background: #2b6cb0;
color: #fff;
border: none;
border-radius: 4px;
}
button:hover {
background: #245a93;
}
</style>
</head>
<body>
<div class="page">
<h1>Hello World</h1>
<p>This is a simple test page that includes a header, a descriptive paragraph, and a button that shows an alert when clicked.</p>
<button type="button" id="alertBtn">Click Me</button>
</div>
<script>
document.getElementById('alertBtn').addEventListener('click', function () {
alert('Button clicked!');
});
</script>
</body>
</html>