Newer
Older
2025-shino / archive.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>グループ履歴アーカイブ</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png"
  href="https://www.yatex.org/gitbucket/KoekiGameDesign/2025-shino/raw/40090c17567c3d3a452181432db7315951a59407/hamster.png">


  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">

  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
</head>

<body class="map-page fadeIn">

  <!-- ヘッダー(map4 と同じ雰囲気) -->
  <div id="header" class="fadeInUp">
    <div id="groupNameBox">
      <b>アーカイブ閲覧モード</b><br>
      グループ:<span id="groupName"></span><br>
      ホスト:<span id="hostName"></span>
    </div>

    <button id="backBtn" class="exit-btn cute">戻る</button>
  </div>

  <!-- メイン(左:メンバー / 右:地図+チャット) -->
  <div class="map-body">

    <!-- 左:メンバー&待ち合わせ -->
    <div class="member-area card fadeInUp">
      <h3>メンバーの最終位置</h3>
      <ul id="memberList"></ul>

      <h3 style="margin-top:20px;">最終待ち合わせ</h3>
      <div id="lastTarget">読み込み中…</div>
    </div>

    <!-- 右:地図+チャット -->
    <div class="map-area fadeInUp">
      <div class="card" style="margin-bottom:20px;">
        <div id="map"></div>
      </div>

      <div class="card" id="chatBox">
        <h3 class="sectionTitle">チャット履歴</h3>
        <div id="chatList"></div>
      </div>
    </div>

  </div>

  <script src="archive.js"></script>
</body>
</html>