<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>パスワード保護</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#protectedContent {
display: none; /* 初期状態で非表示 */
margin-top: 20px;
}
#errorMessage {
color: red;
margin-top: 10px;
display: none;
}
</style>
</head>
<body>
<h1>個人情報ページ</h1>
<p>アクセスするにはパスワードを入力してください。</p>
<input type="password" id="passwordInput" placeholder="パスワードを入力">
<button id="submitPassword">送信</button>
<p id="errorMessage">パスワードが間違っています。</p>
<!-- 保護されたコンテンツ -->
<div id="protectedContent">
<h2>秘密の内容</h2>
<p>これは家族だけが見られる情報です！</p>
</div>
<script>
// 正しいパスワードを設定
const correctPassword = "mySecretPassword"; // 好きなパスワードに変更してください
// HTML要素を取得
const passwordInput = document.getElementById("passwordInput");
const submitButton = document.getElementById("submitPassword");
const protectedContent = document.getElementById("protectedContent");
const errorMessage = document.getElementById("errorMessage");
// ボタンをクリックしたときの処理
submitButton.addEventListener("click", () => {
const enteredPassword = passwordInput.value;
if (enteredPassword === correctPassword) {
protectedContent.style.display = "block"; // コンテンツを表示
passwordInput.style.display = "none"; // パスワード入力を隠す
submitButton.style.display = "none"; // ボタンを隠す
errorMessage.style.display = "none"; // エラーメッセージを非表示
} else {
errorMessage.style.display = "block"; // エラーメッセージを表示
}
});
</script>
</body>
</html>
