<form>

  <div>

    <label for="answer">メンバーページへ</label> <!-- 不要なら削除OK -->

    <input class="ipw" type="text" id="answer-txt" placeholder="パスワード" required>

  </div>

  <input type="hidden" id="answer-key" value="暗号化キー">

  <input class="btn" type="button" id="answer-btn" value="ログイン">

</form>

<p id="result"></p>

<style>

form {

  margin:auto;

  width: 190px;

  background-color: white;

  padding: 12px 15px 20px 15px;

  text-align: center;

  border: 1px solid steelblue;

  border-radius: 2px;

}

/*　不要なら削除OK　*/

label {

  display: block;

  text-align: center;

  margin-left: 0px;

}

.ipw {

  width: 160px;

  height: 30px;

  background-color: white;

  border: 1px solid steelblue;

  border-radius: 2px;

  outline: none;

  font-size: 13px; 

  text-align: center;

  margin-top: 10px;

  margin-bottom: 10px;

}

.ipw:focus { 

  outline: 1px solid steelblue;

}

.btn {

  /*　blockをinlineに変えればパスワード入力欄とボタン横並び配置（横幅を調整する必要あり）　*/

  display: block;

  /*　ボタン位置決め（調整）auto auto は中央配置　*/

  /*　ボタン位置決め（調整）left で調整しても right で調整してもOK　*/

  margin-left: auto; 

  margin-right: auto; 

  width: 160px;

  height: 30px;

  background-color: ;

  border: 1px solid steelblue;

  border-radius: 2px;

  font-size: 14px;

  color: #2E5779;  

}

.btn:hover {

  background-color: steelblue;

  color: white;

  opacity: 0.7;

}

p {

  text-align: center;

}

</style>

<script>

  const encoder = new TextEncoder();

  const decoder = new TextDecoder();

  const base64ToBytes = base64 => Uint8Array.from(atob(base64), c => c.charCodeAt(0));

  const xor = (a, b) => Uint8Array.from(a, (v, i) => v ^ b[i % b.length]);

  const showResult = msg => document.getElementById("result").innerHTML = msg;

  function answerCheck() {

    const ansTxt = document.getElementById("answer-txt").value;

    const ansKey = document.getElementById("answer-key").value;

    try {

      const decoded = base64ToBytes(ansKey);

      const xored = xor(decoded, encoder.encode(ansTxt));

      const result = JSON.parse(decoder.decode(xored));

      if (result.key === ansTxt) {

        showResult(`<a href="${result.url}">こちらをクリックして移動</a>`);

      } else {

        showResult('パスワードが違います');

      }

    } catch {

      showResult('パスワードが違います');

    }

  }

  document.getElementById("answer-btn").addEventListener("click", answerCheck);

</script>