<!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="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">
<!-- ヘッダー -->
<div id="header">
<div id="groupNameBox">
グループ：<span id="groupName"></span><br>
ユーザー：<span id="userName"></span><br>
<span id="hostStatus"></span>
</div>
<button id="exitBtn" class="exit-btn cute">グループを出る</button>
</div>
<!-- ★ メイン部分（左：メンバー、右：地図） -->
<div class="map-body">
<!-- 左側：メンバー一覧 -->
<div class="member-area card">
<h3>メンバー一覧</h3>
<ul id="memberList"></ul>
</div>
<!-- 右側：地図 -->
<div class="map-area card">
<div id="map"></div>
</div>
</div>
<!-- 下部情報（目的地 / 駅） -->
<div class="info-area">
<div id="targetInfo" class="card">
待ち合わせ場所の共有を待っています…
</div>
<div id="nearestBox" class="card">
駅情報を取得中…
</div>
</div>
<!-- チャット欄 -->
<div class="card" id="chatBox">
<h3 class="sectionTitle">グループチャット</h3>
<div id="chatList"></div>
<div id="chatInputArea">
<input id="chatInput" type="text" placeholder="メッセージを入力">
<button id="chatSend">送信</button>
</div>
</div>
<script src="map4.js"></script>
</body>
</html>
