startup-youngfly-carpool/index.html at main · atlasforcn/startup-youngfly-carpool · 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
<!doctype html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>YoungFly Carpool Platform</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- repo-snapshot:start -->
    <section class="repo-snapshot repo-snapshot--route" aria-label="專案辨識預覽：YoungFly 共乘" style="--snap-bg: #eef6fb; --snap-bg-2: #d9e9f4; --snap-ink: #172633; --snap-muted: #5d6b74; --snap-accent: #2f8fd6; --snap-accent-2: #f0a43a;">
      <div class="snapshot-copy">
        <p class="snapshot-kicker">Youth carpool network</p>
        <div class="snapshot-name">YoungFly 共乘</div>
        <p class="snapshot-tagline">青年行程、共乘座位與減碳路線，抽樣畫面直接是一張共享交通派車圖。</p>
        <div class="snapshot-chips" aria-label="核心辨識元素">
        <span>共乘路線</span>
        <span>座位媒合</span>
        <span>減碳紀錄</span>
        </div>
      </div>
      <div class="snapshot-scene" aria-hidden="true">
        <div class="snapshot-device">
          <div class="snapshot-device-head">
            <span>Carpool route</span>
            <strong>台中到鹿港 3 席</strong>
          </div>
          <div class="snapshot-visual snapshot-visual--route">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
          </div>
          <div class="snapshot-data-row">
          <span><b>3</b>空位</span>
          <span><b>42m</b>車程</span>
          <span><b>1.8kg</b>減碳</span>
          </div>
        </div>
      </div>
    </section>
    <!-- repo-snapshot:end -->
    <div class="demo-boundary" role="note">
      <strong>Prototype</strong>
      <span>靜態互動原型；畫面資料、評分、AI、金流、醫療、法律與安全流程皆為示範，不代表原團隊官方產品或實際服務。</span>
    </div>
    <main class="app-shell">
      <header class="topbar">
        <div>
          <p class="eyebrow">112 Young 飛 · 卓越行動獎 · 績優團隊</p>
          <h1>作伙來共乘 青年共享交通平台</h1>
        </div>
        <a class="source-pill" href="https://www.yda.gov.tw/docDetail.aspx?docid=58156&pid=53&uid=94" target="_blank" rel="noreferrer">
          <span>比賽來源</span>
          <strong>Young 飛全球行動計畫績優團隊徵選審查結果</strong>
        </a>
      </header>

      <section class="metrics" aria-label="共乘摘要">
        <article class="metric">
          <span>今日需求</span>
          <strong id="metric-requests">26</strong>
          <small>8 筆等待媒合</small>
        </article>
        <article class="metric green">
          <span>已成行</span>
          <strong id="metric-confirmed">14</strong>
          <small>平均媒合 9 分鐘</small>
        </article>
        <article class="metric">
          <span>可用座位</span>
          <strong id="metric-seats">31</strong>
          <small>5 條熱門路線</small>
        </article>
        <article class="metric dark">
          <span>本週減碳</span>
          <strong id="metric-carbon">186kg</strong>
          <small>以共乘取代單人通勤估算</small>
        </article>
      </section>

      <section class="workspace">
        <aside class="panel route-panel" aria-label="路線需求">
          <div class="panel-head">
            <p>路線需求</p>
            <button id="new-request" class="ghost-button" type="button">新增</button>
          </div>
          <div class="route-list" id="route-list"></div>
        </aside>

        <section class="panel match-panel" aria-label="媒合">
          <div class="panel-head">
            <p>司機媒合</p>
            <div class="segmented" aria-label="媒合排序">
              <button class="segment active" data-mode="fit" type="button">契合</button>
              <button class="segment" data-mode="time" type="button">最快</button>
              <button class="segment" data-mode="trust" type="button">信任</button>
            </div>
          </div>

          <div class="selected-route" id="selected-route"></div>
          <div class="driver-grid" id="driver-grid"></div>
        </section>

        <aside class="panel safety-panel" aria-label="信任與安全">
          <div class="panel-head">
            <p>信任安全</p>
            <span class="live-dot">檢查中</span>
          </div>
          <div class="trust-card" id="trust-card"></div>
          <div class="safety-list" id="safety-list"></div>
          <details class="source-box">
            <summary>獎項來源</summary>
            <p>112 年 Young 飛全球行動計畫，績優團隊徵選審查結果，Young 飛卓越行動獎，作伙來共乘。</p>
          </details>
        </aside>
      </section>

      <section class="lower-grid">
        <article class="panel split-panel">
          <div class="panel-head">
            <p>費用分攤</p>
            <button id="confirm-button" class="ghost-button" type="button">確認共乘</button>
          </div>
          <div class="split-board" id="split-board"></div>
        </article>

        <article class="panel activity-panel">
          <div class="panel-head">
            <p>行動追蹤</p>
            <button id="feedback-button" class="ghost-button" type="button">新增回饋</button>
          </div>
          <div class="activity-feed" id="activity-feed"></div>
        </article>
      </section>
    </main>

    <script src="app.js"></script>
  </body>
</html>