TREM-Earthquake-Service/trem.html at Release · ExpTechTW/TREM-Earthquake-Service · 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
<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <title id="title">強震監視器</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta content="TREM 即時強震觀測網" property="og:title" />
    <meta
      content="Taiwan Real-time Earthquake Monitoring ( 臺灣即時地震監測 )"
      property="og:description"
    />
    <meta content="https://exptechtw.github.io/" property="og:url" />
    <meta
      content="https://cdn.jsdelivr.net/gh/ExpTechTW/API@master/image/Icon/ExpTech.png"
      property="og:image"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/trem.css" />
    <script src="./js/config.js"></script>
  </head>

  <body class="dark">
    <div class="app-container">
      <div class="title">TREM 強震監視器</div>
      <div class="sub-title">
        僅供參考 最終結果依 <b>中央氣象署(CWA)</b> 為準
      </div>
      <canvas id="canvas" style="display: none"></canvas>
      <div class="container">
        <div class="map-wrapper">
          <div class="map-container">
            <img
              src="https://cdn.jsdelivr.net/gh/ExpTechTW/API@master/resource/taiwan.png"
              class="map-image"
            />
            <img
              src="https://cdn.jsdelivr.net/gh/ExpTechTW/API@master/resource/rts.png"
              id="img"
              class="map-image"
            />
            <img
              src="https://cdn.jsdelivr.net/gh/ExpTechTW/API@master/resource/int.png"
              class="map-image"
            />
          </div>
        </div>
        <div class="control-container">
          <div id="eew-info">
            <div class="eew-info-title">
              <div class="text-box">
                <div class="text-body" id="eew-time">0000-00-00 00:00:00</div>
                <div class="text-title">發震</div>
              </div>
              <div class="text-box">
                <div class="text-title">第</div>
                <div class="text-body" id="eew-number">0</div>
                <div class="text-title">報</div>
              </div>
            </div>
            <div class="eew-info-content">
              <div class="info-row">
                <div class="text-box">
                  <div class="text-title">震央</div>
                  <div class="text-body" id="eew-loc">一一一一一一</div>
                </div>
                <div class="text-box">
                  <div class="text-title">最大預估震度</div>
                  <div class="text-body" id="eew-max">0級</div>
                </div>
              </div>

              <div class="info-row">
                <div class="text-box">
                  <div class="text-title">規模</div>
                  <div class="text-body" id="eew-scale">0.0</div>
                </div>
                <div class="text-box">
                  <div class="text-title">深度</div>
                  <div class="text-body" id="eew-depth">0</div>
                </div>
              </div>
            </div>
          </div>
          <div class="control">
            <a id="time" class="subtitle">---- / -- / -- -- : -- : --</a>
            <div class="timeline-container">
              <input
                id="timeline"
                type="range"
                min="0"
                max="86400"
                step="1"
                value="86400"
              />
            </div>
          </div>
          <div class="buttons">
            <button id="last" disabled="disabled">最新</button>
            <button id="switch">暫停</button>
            <button id="audio">開啟音效</button>
          </div>
          <a class="more-info" id="link">更多資訊 >></a>
        </div>
      </div>
      <audio id="audio_warn">
        <source
          src="https://cdn.jsdelivr.net/gh/ExpTechTW/API@master/resource/warn.mp3"
          type="audio/mpeg"
        />
      </audio>
      <audio id="audio_alert">
        <source
          src="https://cdn.jsdelivr.net/gh/ExpTechTW/API@master/resource/alert.mp3"
          type="audio/mpeg"
        />
      </audio>
      <button id="color-switch" onclick="switchColor()">切換背景色</button>
    </div>
    <script src="./js/trem.js" type="text/javascript"></script>
    <script type="text/javascript">
      function switchColor() {
        const body = document.querySelector("body");
        body.classList.toggle("light");
        body.classList.toggle("dark");
      }
    </script>
    <script>
      document.getElementById(
        "link"
      ).href = `https://${URL_MAIN}/file/trem_more.html`;
    </script>
    <script
      defer
      src="https://static.cloudflareinsights.com/beacon.min.js"
      integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ=="
      crossorigin="anonymous"
    ></script>
  </body>
</html>