hs_2503/index.html at main · jphacks/hs_2503 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <title data-i18n="index-title">hinavi 災害情報マップ</title>
  <link rel="icon" href="img/icon2.png" type="image/png">
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <div id="header">
    <img src="img/logo2.png" alt="hinavi" id="logo">

    <div id="disaster-header" data-i18n="loading"></div>
    <div id="disaster-body"></div>

    <div id="header-right">
    <button id="loginBtn" class="login-btn">ログイン</button>

    <button id="help-btn" onclick="location.href='html/help.html'">
      <img src="img/help.png" alt="Help">
    </button>

    <div id="language-wrapper">
      <button id="language-btn">
        <img src="img/language.png" alt="Language" />
      </button>
      <select id="language-select">
        <option value="ja">日本語</option>
        <option value="zh">中文</option>
        <option value="en">English</option>
      </select>
    </div>

    <!-- メニュー -->
    <div id="menu-container">
      <button id="menu-btn">
        <img src="img/menu.png" alt="Menu">
      </button>
      <ul id="menu-list" class="hidden">
        <li id="menu-mypage"><a href="html/mypage.html" data-i18n="mypage">マイページ</a></li>
        <li id="menu-mypage"><a href="html/hinavi.html" data-i18n="hinavi-icon">hinaviとは</a></li>
      </ul>
    </div>
</div>

  </div>

  <div id="container">
    <div id="reportDialog" class="report-dialog">
      <div class="report-header">
        <p data-i18n="question">この地点は？</p>
        <button id="close-report">×</button>
      </div>

      <div class="status-options">
        <label class="status-btn pass">
          <input type="radio" name="status" value="pass">
          <span data-i18n="pass">✅ 通れる</span>
        </label>
        <label class="status-btn fail">
          <input type="radio" name="status" value="fail">
          <span data-i18n="blocked">🚫 通れない</span>
        </label>
        <label class="status-btn step">
          <input type="radio" name="status" value="step">
          <span data-i18n="step">⚠️ 段差</span>
        </label>
        <label class="status-btn comment">
          <input type="radio" name="status" value="comment">
          <span data-i18n="comment_label">💬 コメント</span>
        </label>
      </div>
      <textarea id="comment" data-i18n-placeholder="comment" placeholder="コメントを入力"></textarea>
      <button id="send-btn" data-i18n="send" onclick="submitReport()">送信</button>
    </div>

    <div id="shelter-wrapper">
      <p id="shelter-text" data-i18n="shelter_text">近くの避難所はこちら</p>
      <div id="shelter-list"></div>
    </div>

    <div id="map"></div>

    <button id="recenter-btn" onclick="recenterMap()">
      <img src="img/recenter.png" />
    </button>
  </div>

  <footer id="footer" data-i18n="footer">
    <div id="footer-right">
      <span data-i18n="Information provided by">情報提供：</span>
      <a href="https://www.jma.go.jp/" target="_blank" data-i18n="Japan Meteorological Agency">気象庁</a> |
      <a href="https://www.jma.go.jp/bosai/" target="_blank" data-i18n="Disaster Information Portal">防災情報ポータル</a>
    </div>
  </footer>

  <script>
    // jmaについては「英語」・「中国語」に対応したリンクに変更する
    document.addEventListener("DOMContentLoaded", function () {
    const languageSelect = document.getElementById("language-select");
    const jmaLink = document.querySelector('a[data-i18n="Japan Meteorological Agency"]');
    const bosaiLink = document.querySelector('a[data-i18n="Disaster Information Portal"]');

    // 言語ごとのURL定義
    const urls = {
      ja: {
        jma: "https://www.jma.go.jp/",
        bosai: "https://www.jma.go.jp/bosai/"
      },
      en: {
        jma: "https://www.jma.go.jp/jma/indexe.html",
        bosai: "https://www.jma.go.jp/bosai/"
      },
      zh: {
        jma: "https://www.data.jma.go.jp/multi/index.html?lang=cn_zs",
        bosai: "https://www.jma.go.jp/bosai/"
      }
    };

    // 言語変更時にリンク更新
    languageSelect.addEventListener("change", function () {
      const lang = this.value;
      if (urls[lang]) {
        jmaLink.href = urls[lang].jma;
        bosaiLink.href = urls[lang].bosai;
      }
    });
  });
  </script>

  <script>
    // グローバル設定
    window.GOOGLE_MAPS_API_KEY = "hogehoge";
    window.currentLang = localStorage.getItem("selectedLanguage") || "ja";

    let latestPosition = null;
    window.setLatestPosition = (pos) => {
      latestPosition = pos;
      window.userLat = pos?.lat;
      window.userLng = pos?.lng;
      if (window.map && window.reloadShelters) reloadShelters();
    };
    window.getLatestPosition = () => latestPosition;
  </script>

  <!-- 各種機能の JS -->
  <script src="js/init.js" defer></script>
  <script src="js/shelters.js" defer></script>
  <script src="js/map.js" defer></script>
  <script src="js/navigation.js" defer></script>
  <script src="js/disaster-info.js" defer></script>
  <script src="js/report.js" defer></script>
  <script src="js/lang.js" defer></script>
  <script src="js/main.js" defer></script>
  <script src="js/menu.js" defer></script>


  <!-- ログイン状態反映用のモジュール -->
  <script type="module">
    import { initAuthStatus } from './js/authStatus.js';
    import { initLoginForm } from './js/auth.js';
    document.addEventListener("DOMContentLoaded", () => {
      initAuthStatus();
      initLoginForm();
    });
  </script>

</body>
</html>