
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>マンション管理組合ホームページ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        h1, h2 {
            color: #333;
        }
        .hidden {
            display: none;
        }
        #login {
            margin-bottom: 20px;
        }
    </style>
    <script>
        function login() {
            const passwordInput = document.getElementById("password").value;
            const hashedPassword = "5f4dcc3b5aa765d61d8327deb882cf99"; // 'kashiwa'のMD5ハッシュ

            // MD5ハッシュ値が一致するかを確認
            if (md5(passwordInput) === hashedPassword) {
                document.getElementById("login").classList.add("hidden");
                document.getElementById("content").classList.remove("hidden");
            } else {
                alert("パスワードが違います。");
            }
        }

        // MD5ハッシュ生成用の簡易関数
        function md5(string) {
            // jQueryのMD5プラグインや external library を使用してください
            // ここでは簡単な例を示すだけです。
            // 実際にはMD5ライブラリを使ってください。
            return ""; // MD5の計算を実装する必要があります。
        }
    </script>
</head>
<body>
    <div id="login">
        <h2>ログイン</h2>
        <label for="password">パスワード：</label>
        <input type="password" id="password">
        <button onclick="login()">ログイン</button>
    </div>

    <div id="content" class="hidden">
        <h1>マンションの管理組合</h1>
        <h2>お知らせ</h2>
        <p>お知らせ内容をここに記載します。</p>

        <h2>理事会資料</h2>
        <ul>
            <li><a href="documents/board_minutes_2023.pdf" target="_blank">2023年理事会資料</a></li>
            <li><a href="documents/board_minutes_2022.pdf" target="_blank">2022年理事会資料</a></li>
        </ul>

        <h2>議事録</h2>
        <ul>
            <li><a href="documents/minutes_2023.pdf" target="_blank">2023年議事録</a></li>
            <li><a href="documents/minutes_2022.pdf" target="_blank">2022年議事録</a></li>
        </ul>

        <h2>連絡先</h2>
        <p>管理組合の連絡先情報をここに記載します。</p>
    </div>
</body>
</html>