2025-shino/map4.html at 183a057d7defd5d2529b74966532f043d07d5805

Fork: 1

Vongole_bianco / 2025-shino

forked from KoekiGameDesign/2025-shino

Find file

Newer

Older

2025-shino / map4.html

takeuchi shino on 25 Nov 1 KB Update map4.html

Raw Blame History

<!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 class="map-header card fadeIn">
    <div>
      <h1>現在地マップ</h1>
      <div>グループ：<span id="groupName"></span></div>
      <div>あなた：<span id="userName"></span></div>
      <div>権限：<span id="hostStatus"></span></div>
    </div>
 
    <button id="exitBtn" class="exit-btn cute">退出</button>
  </div>
 
  <div class="map-body">
    <!-- 左：メンバー一覧 -->
    <div class="member-area card fadeInDelay">
      <h2>メンバー一覧</h2>
      <ul id="memberList"></ul>
    </div>
 
    <!-- 右：マップ -->
    <div class="map-area card fadeInDelay">
      <div id="map"></div>

      <!-- 最寄り駅 -->
      <div id="nearestBox" class="nearest-box">
        周辺の駅を検索中…
      </div>

      <!-- ★ 目的地情報ボックス -->
      <div id="targetInfo" class="nearest-box" style="margin-top:12px;">
        目的地を設定していません（地図をタップ！）
      </div>

    </div>
  </div>
 
  <script src="map4.js"></script>
</body>
</html>

<div id="chat">
  <div id="chatList" class="chat-list"></div>
  <div class="chat-input-area">
    <input id="chatInput" type="text" placeholder="メッセージを入力">
    <button id="chatSend">送信</button>
  </div>
</div>