Newer
Older
2025-shino / map4.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>グループ位置マップ(チャット付き完全版)</title>

  <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>
  <div id="header">
    <div id="groupNameBox">
      グループ:<span id="groupName"></span><br>
      ユーザー:<span id="userName"></span><br>
      <span id="hostStatus"></span>
    </div>
    <button id="exitBtn">グループを出る</button>
  </div>

  <div id="map"></div>

  <!-- 目的地情報 -->
  <div id="targetInfo">目的地情報を待っています…</div>

  <!-- 最寄り駅 -->
  <div id="nearestBox">駅情報を取得中…</div>

  <!-- メンバー一覧 -->
  <h3 class="sectionTitle">メンバー一覧</h3>
  <ul id="memberList"></ul>

  <!-- ★ チャット欄 ★ -->
  <h3 class="sectionTitle">グループチャット</h3>
  <div id="chatBox">
    <div id="chatList"></div>
    <div id="chatInputArea">
      <input id="chatInput" type="text" placeholder="メッセージを入力">
      <button id="chatSend">送信</button>
    </div>
  </div>

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