<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>グループ選択</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>グループ選択</h1>
<p class="desc">地図で共有したいグループ名を入力してください。</p>
<div class="group-input">
<input type="text" id="groupName" placeholder="例：A組">
<button id="goMap">地図へ</button>
</div>
</div>
<script>
document.getElementById("goMap").addEventListener("click", () => {
const grp = document.getElementById("groupName").value.trim();
if (!grp) {
alert("グループ名を入力してください");
return;
}
// map4.html に遷移（ここが重要）
location.href = `map4.html?group=${encodeURIComponent(grp)}`;
});
</script>
</body>
</html>
