startup-moovo-micromobility/index.html at main · atlasforcn/startup-moovo-micromobility · 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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!doctype html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="MOOVO 智慧樁公共自行車營運原型：站點需求預測、跨區調度、維運任務與場域成效。">
    <title>MOOVO 智慧微交通營運台</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Noto+Sans+TC:wght@400;500;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="noise" aria-hidden="true"></div>

    <header class="masthead">
      <a class="brand" href="#overview" aria-label="MOOVO 營運總覽">
        <span class="brand-mark">M</span>
        <span>
          <strong>MOOVO OPS</strong>
          <small>MICROMOBILITY CONTROL</small>
        </span>
      </a>

      <nav class="top-nav" aria-label="主要功能">
        <button class="nav-button active" type="button" data-scroll="#overview">營運</button>
        <button class="nav-button" type="button" data-scroll="#network">站網</button>
        <button class="nav-button" type="button" data-scroll="#dispatch">調度</button>
        <button class="nav-button" type="button" data-scroll="#impact">成效</button>
      </nav>

      <div class="masthead-status">
        <span class="pulse" aria-hidden="true"></span>
        彰化場域 · 42 站在線
      </div>
    </header>

    <main>
      <section class="hero" id="overview">
        <div class="hero-copy">
          <p class="kicker">114 創業歸故里 · 優化級</p>
          <h1>讓每一輛車，<br><em>出現在需要的地方。</em></h1>
          <p class="hero-lede">
            把智慧樁、騎乘需求與維運任務放進同一個營運台，
            協助地方政府與營運團隊在尖峰前完成跨區調度。
          </p>
          <div class="hero-actions">
            <button class="primary-button" id="runForecast" type="button">
              <span>執行 90 分鐘預測</span>
              <b aria-hidden="true">↗</b>
            </button>
            <a class="text-link" href="#dispatch">查看待辦調度 <span>↓</span></a>
          </div>
        </div>

        <div class="hero-board" aria-label="目前營運摘要">
          <div class="board-stamp">LIVE / 08:20</div>
          <div class="big-metric">
            <span>預估缺車風險站</span>
            <strong id="riskStationCount">05</strong>
            <small id="riskStationDelta">較昨日同期 −2 站</small>
          </div>
          <div class="board-grid">
            <div>
              <span>可用車輛</span>
              <strong id="availableBikeCount">684</strong>
            </div>
            <div>
              <span>今日周轉率</span>
              <strong id="turnoverRate">6.8</strong>
            </div>
            <div>
              <span>準點維運</span>
              <strong id="serviceRate">94%</strong>
            </div>
            <div>
              <span>減碳估算</span>
              <strong id="carbonSaved">1.8t</strong>
            </div>
          </div>
          <div class="board-ticker">
            <span>AI SIGNAL</span>
            <p id="forecastHeadline">員林轉運站將於 08:55 出現缺車，建議由百果山站調入 8 輛。</p>
          </div>
        </div>
      </section>

      <aside class="prototype-note">
        <strong>PROTOTYPE</strong>
        <span>本頁為依官方得獎名稱延伸的靜態互動原型；站點、車況、預測與成效數據皆為模擬，不代表原團隊產品或實際營運成果。</span>
      </aside>

      <section class="control-strip" aria-label="預測條件">
        <label>
          <span>營運時段</span>
          <select id="timeWindow">
            <option value="morning">早尖峰 07:30–09:30</option>
            <option value="midday">平峰 11:00–14:00</option>
            <option value="evening">晚尖峰 17:00–19:30</option>
            <option value="weekend">週末活動 13:00–18:00</option>
          </select>
        </label>
        <label>
          <span>天氣情境</span>
          <select id="weatherMode">
            <option value="clear">晴朗 · 29°C</option>
            <option value="hot">高溫 · 34°C</option>
            <option value="rain">短時陣雨</option>
          </select>
        </label>
        <div class="toggle-group" aria-label="地圖圖層">
          <span>地圖圖層</span>
          <div>
            <button class="layer-button active" type="button" data-layer="demand">需求</button>
            <button class="layer-button" type="button" data-layer="maintenance">維運</button>
            <button class="layer-button" type="button" data-layer="impact">減碳</button>
          </div>
        </div>
        <div class="data-freshness">
          <span>資料更新</span>
          <strong id="lastUpdated">剛剛</strong>
        </div>
      </section>

      <section class="network-section" id="network">
        <div class="section-heading">
          <div>
            <p class="kicker">NETWORK PULSE</p>
            <h2>跨區站網壓力圖</h2>
          </div>
          <p>點選站點查看車柱、需求與調度依據。顏色代表未來 90 分鐘的供需壓力，不是即時安全告警。</p>
        </div>

        <div class="network-layout">
          <aside class="station-list-panel">
            <div class="panel-title">
              <span>優先站點</span>
              <strong id="stationListLabel">依缺車風險排序</strong>
            </div>
            <div class="station-list" id="stationList"></div>
          </aside>

          <section class="map-panel" aria-label="模擬站網地圖">
            <div class="map-grid" aria-hidden="true"></div>
            <svg class="route-lines" viewBox="0 0 800 540" preserveAspectRatio="none" aria-hidden="true">
              <path d="M95 378 C 180 315, 218 350, 296 284 S 430 238, 485 172 S 624 140, 708 88"></path>
              <path d="M140 94 C 225 160, 205 235, 296 284 S 480 375, 664 410"></path>
              <path d="M95 378 C 205 430, 294 418, 392 455 S 565 470, 664 410"></path>
            </svg>
            <div class="district district-a">員林生活圈</div>
            <div class="district district-b">彰化通勤圈</div>
            <div class="district district-c">觀光轉乘帶</div>
            <div id="mapStations" class="map-stations"></div>

            <div class="map-legend">
              <span><i class="low"></i>供需平衡</span>
              <span><i class="medium"></i>需關注</span>
              <span><i class="high"></i>建議調度</span>
            </div>
          </section>

          <aside class="station-detail-panel" id="stationDetail" aria-live="polite"></aside>
        </div>
      </section>

      <section class="dispatch-section" id="dispatch">
        <div class="section-heading inverse">
          <div>
            <p class="kicker">DISPATCH ROOM</p>
            <h2>把預測變成可執行任務</h2>
          </div>
          <p>模型只提出建議；調度員仍需確認車輛、路線、工時與現場容量後才能派工。</p>
        </div>

        <div class="dispatch-grid">
          <section class="dispatch-queue">
            <div class="dark-panel-title">
              <span>建議佇列</span>
              <b id="dispatchCount">3 件待確認</b>
            </div>
            <div id="dispatchQueue" class="dispatch-list"></div>
          </section>

          <section class="route-card">
            <div class="route-head">
              <div>
                <span>目前選擇</span>
                <h3 id="routeTitle">百果山 → 員林轉運站</h3>
              </div>
              <span class="confidence" id="routeConfidence">信心 88%</span>
            </div>
            <div class="route-visual" aria-hidden="true">
              <span class="route-origin">A</span>
              <span class="route-dash"></span>
              <span class="truck">▰</span>
              <span class="route-dash"></span>
              <span class="route-destination">B</span>
            </div>
            <dl class="route-facts">
              <div><dt>移動車輛</dt><dd id="routeBikes">8 輛</dd></div>
              <div><dt>預估工時</dt><dd id="routeDuration">24 分</dd></div>
              <div><dt>避免缺車</dt><dd id="routeAvoided">31 人次</dd></div>
              <div><dt>估計成本</dt><dd id="routeCost">NT$ 620</dd></div>
            </dl>
            <div class="decision-note" id="decisionNote">
              依據近四週平日尖峰、轉運班次與目前車柱容量計算。雨勢或活動變更時需重新評估。
            </div>
            <button class="confirm-button" id="confirmDispatch" type="button">人工確認並建立派工單</button>
          </section>

          <section class="ops-log">
            <div class="dark-panel-title">
              <span>營運紀錄</span>
              <b>可稽核</b>
            </div>
            <ol id="opsLog"></ol>
          </section>
        </div>
      </section>

      <section class="impact-section" id="impact">
        <div class="section-heading">
          <div>
            <p class="kicker">PUBLIC VALUE</p>
            <h2>場域價值，不只是一張熱區圖</h2>
          </div>
          <p>評估調度是否同時改善可用率、維運成本、跨區串聯與綠色運輸使用。</p>
        </div>

        <div class="impact-grid">
          <article class="impact-card accent">
            <span>服務可用率</span>
            <strong id="impactAvailability">96.4%</strong>
            <div class="spark-bars" aria-hidden="true">
              <i style="--h: 48%"></i><i style="--h: 61%"></i><i style="--h: 56%"></i><i style="--h: 72%"></i><i style="--h: 86%"></i><i style="--h: 92%"></i>
            </div>
            <p>模擬完成建議調度後，尖峰有車可借與有柱可還的綜合比例。</p>
          </article>
          <article class="impact-card">
            <span>跨區旅次占比</span>
            <strong>27%</strong>
            <p>辨識通勤、轉乘與觀光旅次，作為跨行政區站網配置依據。</p>
          </article>
          <article class="impact-card">
            <span>每次有效調度成本</span>
            <strong>NT$ 21</strong>
            <p>以避免的缺車或滿柱旅次計算，協助評估班次、人力與車隊規模。</p>
          </article>
          <article class="impact-card">
            <span>本月模擬減碳</span>
            <strong>38.6t</strong>
            <p>依替代短程汽機車旅次的假設估算，非經第三方查證的正式盤查值。</p>
          </article>
        </div>

        <div class="market-proof">
          <div>
            <p class="kicker">WHY NOW</p>
            <h3>公共自行車已是高頻交通服務，下一步是更精準的營運。</h3>
          </div>
          <ul>
            <li><b>採購者</b><span>地方政府、公共運輸與場域營運單位</span></li>
            <li><b>收入模型</b><span>站點建置、平台授權、維運服務與資料分析</span></li>
            <li><b>替代方案</b><span>人工巡站、固定班表、單一城市封閉式系統</span></li>
            <li><b>下一個驗證</b><span>以尖峰缺車率與每次有效調度成本進行 A/B 場域試辦</span></li>
          </ul>
        </div>
      </section>
    </main>

    <footer>
      <div>
        <strong>MOOVO OPS / CONCEPT PROTOTYPE</strong>
        <span>依正式競賽得獎名稱進行的獨立概念設計。</span>
      </div>
      <details>
        <summary>來源與原型邊界</summary>
        <p>
          競賽來源為數位發展部數位產業署「114 創業歸故里驗證輔導計畫」創業驗證組成果評選分級獎勵名單，
          運點科技股份有限公司之「MOOVO智慧樁公共自行車系統：以物聯網與AI驅動智慧微交通，推動跨區串聯共榮新願景」。
          本原型未使用原團隊未公開資料、商標素材或實際系統畫面。
        </p>
        <a href="https://sccontest.tca.org.tw/content/news_cont?id=300" target="_blank" rel="noreferrer">查看官方得獎名單</a>
      </details>
    </footer>

    <div class="toast" id="toast" role="status" aria-live="polite"></div>
    <script src="app.js"></script>
  </body>
</html>