<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>

  <style>

    table {

      border-collapse: collapse;

      width: 100%;

      margin-top: 1em;

    }

    th, td {

      border: 1px solid #ccc;

      padding: 8px;

      text-align: left;

    }

    th {

      background-color: #f0f0f0;

    }

  </style>

<div>

    データベースを開くお呪い: <span id="hint" style="color: white;">wicm</span>

    <input type="text" id="add_code" placeholder="半角英小文字４つ">

    <button onclick="openSupabase()">開く</button>

</div>

  <h1>出入り情報一覧</h1>

  <table id="data-table">

    <thead>

      <tr>

        <th>日付</th>

        <th>ＩＤ</th>

        <th>性別</th>

        <th>入室時刻</th>

        <th>退室時刻</th>

      </tr>

    </thead>

    <tbody id="data-body">

      <tr><td colspan="5">データベースを開くお呪いを入力して「開く」ボタンを押してください。</td></tr>

    </tbody>

  </table>

  <script>

    document.addEventListener('contextmenu', function(e) {

      e.preventDefault();

    });

    let supabase;

    function openSupabase() {

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

      const supabaseUrl = 'https://（非公開）.supabase.co';

      const supabaseKey1 = '（非公開）';

      const supabaseKey2 = '（非公開）';

      const supabaseKey3 = '（非公開）';

      const supabaseKey4 = '（非公開）';

      const supabaseKey = supabaseKey1 + '.' + supabaseKey2 + input.trim() + supabaseKey3 + '.' + supabaseKey4;

      supabase = window.supabase.createClient(supabaseUrl, supabaseKey);

      fetchData();

    }

    async function fetchData() {

      const tableBody = document.getElementById('data-body');

      tableBody.innerHTML = ''; // 初期化

      const { data, error } = await supabase

        .from('entry_and_exit_info')

        .select('*');

      if (error) {

        console.error('データ取得エラー:', error.message);

        tableBody.innerHTML = '<tr><td colspan="5">データ取得に失敗しました。</td></tr>';

        return;

      }

      if (data.length === 0) {

        tableBody.innerHTML = '<tr><td colspan="5">データはありません。</td></tr>';

        return;

      }

      data.forEach(row => {

        const tr = document.createElement('tr');

        tr.innerHTML = `

          <td>${row.日付 || ''}</td>

          <td>${row.氏名ハッシュ || ''}</td>

          <td>${row.性別 || ''}</td>

          <td>${row.入室時刻 || ''}</td>

          <td>${row.退出時刻 || ''}</td>

        `;

        tableBody.appendChild(tr);

      });

    }

  </script>