<style>

    body {

      background-color: #f0f8ff;

      font-family: Arial, sans-serif;

      text-align: center;

      padding-top: 50px;

    }

    .header {

      display: flex;

      justify-content: center;

      align-items: center;

      margin-bottom: 30px;

    }

    .header h1 {

      color: #2c3e50;

      font-size: 32px;

      margin-right: 20px;

    }

    input[type="text"] {

      width: 300px;

      padding: 10px;

      font-size: 16px;

      border: 1px solid #ccc;

      border-radius: 5px;

    }

    button {

      padding: 10px 20px;

      font-size: 16px;

      background-color: #3498db;

      color: white;

      border: none;

      border-radius: 5px;

      margin-left: 10px;

      cursor: pointer;

    }

    button:hover {

      background-color: #2980b9;

    }

    #output {

      margin-top: 20px;

      font-size: 18px;

      color: #2d3436;

    }

  </style>

  <script>

function hashToID(inputStr) {

  if (!inputStr) return null;

  const charset = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

  let total = BigInt(0);

  for (let i = 0; i < inputStr.length; i++) {

    let ch = inputStr.charAt(i);

    let codeValue = ch.codePointAt(0);

    if (!codeValue || codeValue < 1) {

      codeValue = 1000 + (i + 1);

    }

    total += BigInt(codeValue) * BigInt((i + 1) * 19);

  }

  let base62 = "";

  while (total > 0) {

    let index = Number(total % BigInt(62));

    base62 = charset.charAt(index) + base62;

    total = total / BigInt(62);

  }

  return base62;

}

function generateHash() {

  const input = document.getElementById('inputText').value;

  const result = hashToID(input);

  document.getElementById('output').textContent = `ハッシュコード: ${result}`;

}

  </script>

  <div class="header">

    <h1>ハッシュコード生成器</h1>

  </div>

  <div>

    <input type="text" id="inputText" placeholder="文字列を入力してください">

    <button onclick="generateHash()">ハッシュ生成</button>

  </div>

  <div id="output">ここにハッシュコードが表示されます</div>

  <br><p>下記にソースコードを記載。</p>