LTravelCalbackup/index.html at main · lincolntam/LTravelCalbackup · 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
<!DOCTYPE html>
<html lang="zh-HK">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>(L)TravelCal - Precision Navigation</title>

    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="apple-touch-icon" href="favicon.ico">

    <link rel="stylesheet" href="style.css?v=0.34.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>

<div class="app-banner">
    <div class="banner-overlay">
        <h1>(L)TravelCal</h1>
        <p>Precision Navigation • Dynamic Tolls • Energy Logic</p>
    </div>
</div>

<div class="app-container">
    <main class="content">
        <section class="card">
            <div class="card-header">
                <span class="material-icons">place</span>
                <label>1. 行程節點 (Nodes)</label>
            </div>
            <div id="nodes-container">
                <div class="input-group">
                    <input class="node-input" placeholder="由哪裡出發？" autocomplete="off">
                </div>
                <div class="input-group">
                    <input class="node-input" placeholder="目的地在哪？" autocomplete="off">
                </div>
            </div>
            <div class="action-row">
                <button class="secondary-btn" onclick="addNode()">
                    <span class="material-icons">add_location</span> 中途站
                </button>
                <button class="secondary-btn" id="retBtn" onclick="toggleReturn()">
                    <span class="material-icons">sync</span> 往返模式
                </button>
            </div>
        </section>

        <section class="card">
            <div class="card-header">
                <span class="material-icons">settings</span>
                <label>2. 偏好設定 (Settings)</label>
            </div>
            <div class="settings-group">
                <div class="setting-item">
                    <span>去程時間</span>
                    <input type="datetime-local" id="start-time" onchange="calculate()">
                </div>
                <div class="setting-item return-only" style="display: none;">
                    <span>回程時間</span>
                    <input type="datetime-local" id="return-time" onchange="calculate()">
                </div>
                <div class="setting-item">
                    <span>充電方式</span>
                    <select id="car-model" onchange="calculate()">
                        <option value="0.160|1.343" selected>電動車住宅 - 非高峰 ($1.343)</option>
                        <option value="0.160|1.773">電動車住宅 - 高峰 ($1.773)</option>
                        <option value="0.160|3.85">Tesla Supercharger 繁忙 ($3.85)</option>
                        <option value="0.160|2.43">Tesla Supercharger 非繁忙 ($2.43)</option>
                    </select>
                </div>
            </div>
        </section>

        <section class="card conditional-show">
            <div class="card-header">
                <span class="material-icons">directions_car</span>
                <label>3. 去程隧道選擇 (Outbound)</label>
            </div>
            <div class="tunnel-grid" id="goTunnels"></div>
        </section>

        <section class="card conditional-show return-only">
            <div class="card-header">
                <span class="material-icons">settings_backup_restore</span>
                <label>4. 回程隧道選擇 (Return)</label>
            </div>
            <div class="tunnel-grid" id="backTunnels"></div>
        </section>

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

        <section class="stats-grid">
            <div class="stat-card"><span>總里程</span><b id="km">0.0 km</b></div>
            <div class="stat-card"><span>總時間</span><b id="duration">0 min</b></div>
            <div class="stat-card"><span>總隧道費</span><b id="t-fee">$0</b></div>
            <div class="stat-card"><span>總充電費</span><b id="e-cost">$0</b></div>
        </section>
        <div style="height: 160px;"></div>
    </main>

    <footer class="bottom-nav">
        <div class="nav-content">
            <div class="total-display-group">
                <small class="label-top">總預算估算</small>
                <div class="main-currency">
                    HK$ <span id="total">0.0</span>
                </div>
                <div class="savings-bottom">
                    <span class="material-icons">leaf_spark</span>
                    節省燃油開支 <span id="savings">$0.0</span>
                </div>
            </div>

            <div class="nav-actions">
                <button class="primary-btn" onclick="calculate()">更新</button>
            </div>
        </div>
    </footer>
</div>

<div class="version-tag">(L)TravelCal v0.34.0</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrlGmF4KTgFE8TeZyntoyaxxc6Qq0e7jY&libraries=places&callback=initApp" async defer></script>
<script src="app.js?v=0.34.0"></script>
</body>
</html>