<!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>
<!-- 右側：ステータスボタン＋退出系ボタン -->
<div style="display:flex; flex-direction:column; gap:8px; align-items:flex-end;">
<!-- ステータスボタン -->
<div id="statusButtons" style="display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end;">
<button class="status-btn" data-status="移動中">移動中</button>
<button class="status-btn" data-status="遅れます">遅れます</button>
<button class="status-btn" data-status="寄り道中">寄り道中</button>
<button class="status-btn" data-status="到着">到着</button>
</div>
<!-- 退出 / 解散ボタン -->
<div style="display:flex; gap:8px;">
<button id="exitBtn" class="exit-btn cute">出る</button>
<button
id="disbandBtn"
class="exit-btn cute"
style="background:#ff5d5d; display:none;"
>
解散
</button>
</div>
</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>
