<!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>
