<!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="icon" type="image/png"
href="https://www.yatex.org/gitbucket/KoekiGameDesign/2025-shino/raw/40090c17567c3d3a452181432db7315951a59407/hamster.png">
<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>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
<style>
/* ★ 共有ボタン調整（Bタイプ：少し小さめ） */
#shareBtn {
padding: 5px 10px;
font-size: 13px;
background: #4a90ff;
color: white;
border: none;
border-radius: 7px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* モーダル */
.share-modal, .qr-modal {
display:none;
position:fixed;
top:0; left:0;
width:100%; height:100%;
background:rgba(0,0,0,0.5);
justify-content:center;
align-items:center;
z-index:9999;
}
.share-box, .qr-box {
background:white;
padding:20px;
border-radius:15px;
width:80%;
max-width:300px;
text-align:center;
box-shadow:0 4px 8px rgba(0,0,0,0.3);
}
.share-btn {
width:100%;
padding:10px;
margin:8px 0;
background:#4a90ff;
color:white;
border:none;
border-radius:8px;
font-size:15px;
}
.close-btn {
margin-top:10px;
padding:8px 20px;
background:#888;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}
</style>
</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>
<!-- NEW★ 共有ボタン Bタイプ -->
<button id="shareBtn" class="exit-btn cute" style="background:#4a90ff;">
🔗 共有
</button>
</div>
</div>
<!-- ▼ 共有方法モーダル -->
<div id="shareModal" class="share-modal">
<div class="share-box">
<h3>共有方法を選択</h3>
<button id="shareLinkBtn" class="share-btn">🔗 リンクでシェア</button>
<button id="shareQRBtn" class="share-btn">📱 QRコードでシェア</button>
<button onclick="closeShare()" class="close-btn">閉じる</button>
</div>
</div>
<!-- ▼ QRコード表示モーダル -->
<div id="qrModal" class="qr-modal">
<div class="qr-box">
<h3>QRコードを表示</h3>
<div id="qrcode"></div>
<button onclick="closeQR()" class="close-btn">閉じる</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>
