<!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">
<!-- ▼ ヘッダー（1つだけ） -->
<div id="header">
<!-- グループ名 & ユーザー名 -->
<div id="groupNameBox">
グループ：<span id="groupName"></span><br>
ユーザー：<span id="userName"></span><br>
<span id="hostStatus"></span>
</div>
<!-- ▼ ステータスボタン -->
<div id="statusButtons" class="status-header">
<button class="stBtn" data-status="移動中">🚶 移動中</button>
<button class="stBtn" data-status="遅れます">⏳ 遅れます</button>
<button class="stBtn" data-status="寄り道中">🍔 寄り道中</button>
<button class="stBtn" data-status="到着">📍 到着</button>
</div>
<!-- ▼ 終了・解散ボタン -->
<div style="display:flex; gap:10px; align-items:center;">
<button id="exitBtn" class="exit-btn cute">グループを出る</button>
<button id="disbandBtn" class="exit-btn cute" style="background:#ff5d5d; display:none;">
解散
</button>
</div>
</div>
<!-- ▲ ヘッダーここまで -->
<!-- ▼ メイン部分（地図だけ） -->
<div class="map-body">
<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>
