网页表白代码 - 浪漫告白神器

<!DOCTYPE html>
<html>
<head>
	<title>表白</title>
	<meta charset='UTF-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0'>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
		}
		h1 {
			text-align: center;
			font-size: 3rem;
			color: #FF69B4;
			margin-top: 2rem;
		}
		form {
			margin: 5rem auto;
			width: 50%;
			background-color: #fff;
			padding: 2rem;
			border-radius: 1rem;
			box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2);
		}
		label {
			display: block;
			font-size: 1.2rem;
			margin-bottom: 0.5rem;
			color: #555;
		}
		input[type='text'] {
			font-size: 1.2rem;
			padding: 0.5rem;
			border-radius: 0.5rem;
			border: none;
			margin-bottom: 1rem;
		}
		textarea {
			font-size: 1.2rem;
			padding: 0.5rem;
			border-radius: 0.5rem;
			border: none;
			height: 8rem;
			resize: none;
			margin-bottom: 1rem;
		}
		button {
			font-size: 1.2rem;
			padding: 0.5rem 1.5rem;
			border-radius: 0.5rem;
			border: none;
			background-color: #FF69B4;
			color: #fff;
			cursor: pointer;
		}
		button:hover {
			background-color: #FF8C00;
		}
	</style>
</head>
<body>
	<h1>我想对你说</h1>
	<form>
		<label for='name'>你的名字</label>
		<input type='text' id='name' name='name' required>
		<label for='message'>我的话</label>
		<textarea id='message' name='message' required></textarea>
		<button type='submit'>发送</button>
	</form>
	<script>
		const form = document.querySelector('form');
		form.addEventListener('submit', e => {
			e.preventDefault();
			const name = document.getElementById('name').value;
			const message = document.getElementById('message').value;
			alert('亲爱的' + name + '，' + message);
			form.reset();
		});
	</script>
</body>
</html>