<!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="meetingBanner" class="banner">
👥 このグループは現在 <b>待ち合わせ中</b> です
</div>
<!-- ▼ ヘッダー -->
<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="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>
