Repository navigation
Expand file tree
/
Copy pathui.html
More file actions
342 lines (332 loc) · 26.7 KB
/
Copy pathui.html
File metadata and controls
342 lines (332 loc) · 26.7 KB
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
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<!doctype html>
<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<title>拼车出行规划</title>
<meta name="robots" content="noindex">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="/design.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" integrity="sha384-c6Rcwz4e4CITMbu/NBmnNS8yN2sC3cUElMEMfP3vqqKFp7GOYaaBBCqmaWBjmkjb" crossorigin="anonymous">
<style>
/* 编辑页自己的布局和小样式;颜色、间距、圆角都取 design.css 的变量,组件用 c- 前缀的类。深色跟随系统 */
html, body { height: 100%; margin: 0; }
body { font-size: var(--fs-14); line-height: 1.5; overflow: hidden; }
button { font: inherit; }
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
/* 按模式显示:不在这个模式就隐藏,不用 display: revert(它会把 a.c-btn 退回成行内元素,按钮就对不齐了) */
body:not(.online) .online-only { display: none; } body.online .local-only { display: none; }
/* 试玩模式(/try):没有保存、历史、发布;只留「看示例方案页」 */
body:not(.try) .try-only { display: none; } body.try .local-only, body.try #sharebtn { display: none; }
.try-banner { margin: var(--sp-3) var(--sp-4) 0; }
.try-banner .row { margin-top: var(--sp-2); }
/* 精简页头:标志、行程名称、操作;第二行是同步状态、保留期、在线的人 */
.ed-bar { flex-wrap: wrap; row-gap: 2px; padding: 8px var(--sp-4); min-height: 52px; flex: none; position: relative; z-index: 30; }
.ed-bar .c-brand { margin-right: 0; }
.ed-actions { flex-wrap: wrap; justify-content: flex-end; }
.ed-sub { order: 4; flex: 0 0 100%; display: flex; gap: var(--sp-2); align-items: center; justify-content: space-between; flex-wrap: wrap; min-height: 22px; font-size: var(--fs-12); color: var(--ink-2); }
.ed-sub > span { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.expiry { cursor: pointer; border: 0; font: inherit; font-size: var(--fs-12); }
.peers { display: flex; gap: 4px; flex-wrap: wrap; }
.peer-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px 0 2px; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--fs-12); color: var(--ink); }
.peer-chip i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-style: normal; font-size: 11px; }
.progress { flex: 0 0 100%; order: 5; margin-top: 4px; font-size: var(--fs-12); color: var(--ink); }
.progress[hidden] { display: none; }
.progress .bar { height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.progress .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.progress .bar i.indeterminate { width: 30% !important; animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
/* 主体:桌面左边填写、右边地图和方案;手机上三个区域用底部分页签切换 */
.ed-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(380px, 480px) 1fr; }
.side { overflow: auto; background: var(--surface); border-right: 1px solid var(--line); min-height: 0; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ed-map { position: relative; flex: 0 0 52%; min-height: 260px; background: var(--surface-2); }
#map { position: absolute; inset: 0; background: var(--surface-2); }
.results { flex: 1; overflow: auto; padding: var(--sp-4) var(--sp-5) var(--sp-7); min-height: 0; }
.ed-tabs { display: none; flex: none; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.ed-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; min-height: 56px; background: none; border: 0; color: var(--ink-2); font-size: var(--fs-12); font-weight: 600; cursor: pointer; }
.ed-tab .c-icon { width: 22px; height: 22px; }
.ed-tab[aria-selected=true] { color: var(--accent); }
.ed-tab[aria-selected=true]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--accent); border-radius: 0 0 2px 2px; }
.ed-dot { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 11px; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; }
:root[data-theme=dark] .ed-dot { color: #1a0f0b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .ed-dot { color: #1a0f0b; } }
.ed-dot[hidden] { display: none; }
@media (max-width: 959px) {
.ed-bar { padding: 6px var(--sp-3); }
.ed-actions { order: 3; flex: 0 0 100%; justify-content: flex-start; padding-top: 4px; }
.ed-body { display: block; position: relative; }
.main { display: contents; }
.side, .ed-map, .results { height: 100%; width: 100%; border: 0; flex: none; }
.ed-map { min-height: 0; }
.app[data-tab=fill] .ed-map, .app[data-tab=fill] .results,
.app[data-tab=map] .side, .app[data-tab=map] .results,
.app[data-tab=plan] .side, .app[data-tab=plan] .ed-map { display: none; }
.results { padding: var(--sp-3) var(--sp-3) var(--sp-6); }
.ed-tabs { display: flex; }
.c-toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* 步骤条 */
.steps { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; flex-wrap: wrap; padding: 10px var(--sp-4); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.step { border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-pill); padding: 2px 10px; font-size: var(--fs-12); color: var(--ink-2); cursor: pointer; }
.step b { color: var(--ink); font-weight: 600; }
.step.done { border-color: var(--ok); background: var(--ok-soft); }
.step.todo { border-color: var(--warn); background: var(--warn-soft); }
/* 表单 */
#form > section { padding: var(--sp-4); border-bottom: 1px solid var(--line); scroll-margin-top: 64px; }
#form > section > h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-13); color: var(--ink-2); font-weight: 600; letter-spacing: .04em; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.f { display: block; margin-bottom: var(--sp-2); position: relative; }
.f > span:first-child { display: block; font-size: var(--fs-12); color: var(--ink-2); margin-bottom: 2px; }
.row { display: flex; gap: var(--sp-2); align-items: flex-end; }
.row > .f { flex: 1; min-width: 0; }
.place { display: flex; gap: 6px; align-items: flex-end; }
.place > .f { flex: 1; min-width: 0; }
.place .c-btn { margin-bottom: var(--sp-2); }
.loc { font-size: var(--fs-12); color: var(--ink-2); margin: -4px 0 var(--sp-2); }
.loc.missing { color: var(--warn); }
.place-hint { font-size: var(--fs-12); color: var(--ink-2); margin: -4px 0 var(--sp-2); }
.muted { color: var(--ink-2); }
.cands:empty { display: none; }
.cands { border: 1px solid var(--line); border-radius: var(--r-ctl); margin: -2px 0 10px; max-height: 240px; overflow: auto; background: var(--surface); }
.cands button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 8px 10px; cursor: pointer; }
.cands button:hover { background: var(--accent-soft); }
.cands small { display: block; color: var(--ink-2); }
.card { margin-bottom: var(--sp-3); padding: var(--sp-3); }
.toggle { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; margin-bottom: var(--sp-2); cursor: pointer; }
.toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.rail { background: var(--surface-2); border-radius: var(--r-ctl); padding: 8px 10px; margin-bottom: var(--sp-2); }
.rail .sub, .rail .hint, .rail .muted { font-size: var(--fs-12); color: var(--ink-2); margin-bottom: 6px; }
.rail .hint { color: var(--warn); margin: 2px 0 0; }
.rail code { font-size: var(--fs-12); }
.rail-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 62px 36px; gap: 6px; align-items: center; margin-bottom: 6px; position: relative; }
.rail-row > span:first-child { font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-row .span2 { grid-column: span 2; }
.rail-row a.c-btn { padding: 0; min-width: 32px; }
.station { display: grid; grid-template-columns: auto 1fr 96px auto auto; gap: 6px; align-items: center; margin-bottom: var(--sp-2); position: relative; }
/* 候选车站的批量删除:每行前面一个复选框(点击范围比框大),勾了以后工具条上的「删除选中(N)」才能点 */
.st-pick { display: inline-grid; place-items: center; min-width: 28px; min-height: 32px; cursor: pointer; }
.st-pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.st-bulk { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; margin: 0 0 var(--sp-2); padding: 0 0 var(--sp-2) 5px; border-bottom: 1px dashed var(--line); }
.ip-trips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.station .loc, .station .cands { grid-column: 1 / -1; margin: 0; }
.adders { display: flex; gap: var(--sp-2); }
.peer-on { outline: 2px solid var(--peer, #7c3aed) !important; outline-offset: 1px; }
.peer-tag { position: absolute; right: 4px; top: -8px; z-index: 2; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 8px; color: #fff; background: var(--peer, #7c3aed); pointer-events: none; }
.ed-err { grid-column: 1 / -1; margin: 2px 0 0 !important; }
.has-error > .c-input, .has-error > input.c-input { border-color: var(--danger); }
.rail-row.has-error .c-input { border-color: var(--danger); }
.ed-flash { animation: ed-flash 1.4s ease-out; }
@keyframes ed-flash { 0% { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 6px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.ed-loading { margin: var(--sp-4); }
@media (min-width: 960px) { #toFill { display: none; } }
@media (max-width: 959px) {
/* 车次表格:每个车站一行竖排——站名独占一行,下面是车次输入、分钟、12306 链接 */
.rail-row { grid-template-columns: minmax(0, 1fr) 76px 40px; row-gap: 4px; margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px dashed var(--line); }
.rail-row:last-child { border-bottom: 0; padding-bottom: 0; }
.rail-row > span:first-child { grid-column: 1 / -1; font-size: var(--fs-13); font-weight: 600; color: var(--ink); }
.rail-row .span2 { grid-column: span 2; }
.rail-row .c-input { min-height: 44px; }
.rail-row a.c-btn { min-height: 44px; }
.station { grid-template-columns: auto 1fr 1fr; }
.station .st-pick { grid-row: span 2; align-self: start; min-height: 44px; }
.station .c-input { min-height: 44px; }
.c-input, .c-select, .c-textarea { font-size: 16px; } /* 避免 iOS 聚焦时自动放大 */
}
/* 方案结果:每个方案一张卡片,关键数字放在前面 */
.tabs-leg { margin-bottom: var(--sp-3); }
.tabs-note { font-size: var(--fs-13); margin: 0 0 var(--sp-2); }
.tabs-leg > h3 { font-size: var(--fs-13); color: var(--ink-2); margin: 0 0 6px; letter-spacing: .04em; }
.tabs-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tab { text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 12px; cursor: pointer; transition: border-color var(--ease), background var(--ease); }
.tab:hover { border-color: var(--line-strong); }
.tab.on { border-color: var(--accent); background: var(--accent-soft); }
.tab .name { display: block; font-weight: 600; font-size: var(--fs-14); }
.tab .stats { display: flex; gap: var(--sp-4); margin-top: 6px; }
.tab .stat b { display: block; font-size: var(--fs-18); line-height: 1.2; font-variant-numeric: tabular-nums; }
.tab .stat b small { font-size: var(--fs-12); font-weight: 500; color: var(--ink-2); margin-left: 1px; }
.tab .stat > span { font-size: var(--fs-12); color: var(--ink-2); }
.tab small.dep { display: block; margin-top: 4px; color: var(--ink-2); font-size: var(--fs-12); }
#report h1 { font-size: var(--fs-18); } #report h2 { font-size: var(--fs-16); margin-top: var(--sp-5); }
#report h3 { font-size: var(--fs-14); }
#report table { border-collapse: collapse; font-size: var(--fs-13); margin: var(--sp-2) 0; display: block; overflow-x: auto; max-width: 100%; }
#report th, #report td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
#report th { background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
#report blockquote { margin: var(--sp-2) 0; padding: 6px 10px; background: var(--warn-soft); color: var(--ink); border-left: 4px solid var(--warn); border-radius: 6px; }
#report pre.plain { white-space: pre-wrap; word-break: break-word; }
#report a { word-break: break-all; }
#stale { align-items: center; }
#stale > div { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; justify-content: space-between; width: 100%; }
.ed-warns .c-alert { margin-bottom: var(--sp-2); }
/* 地图 */
.legend { background: var(--surface); color: var(--ink); padding: 6px 10px; border-radius: var(--r-ctl); font-size: var(--fs-12); line-height: 1.7; border: 1px solid var(--line); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.leaflet-container { font: inherit; background: var(--surface-2); }
.leaflet-tile-pane { filter: var(--map-filter); }
.leaflet-tooltip.lbl { font-size: var(--fs-12); padding: 1px 6px; background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.leaflet-tooltip-top.lbl::before { border-top-color: var(--surface); }
.ed-mapfail { position: absolute; inset: 0; z-index: 400; display: grid; place-items: center; padding: var(--sp-4); background: var(--surface-2); }
.ed-mapfail[hidden] { display: none; }
/* 侧边面板(历史、更多、推荐车站) */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 1500; background: var(--surface); color: var(--ink); border-left: 1px solid var(--line); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
.drawer[hidden] { display: none; }
.drawer > header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); }
.drawer > header h2 { margin: 0; font-size: var(--fs-16); }
.drawer .body { overflow: auto; padding: var(--sp-4); flex: 1; }
.drawer h3.sec { font-size: var(--fs-13); margin: var(--sp-4) 0 6px; }
.hist { border-bottom: 1px solid var(--line); padding: var(--sp-2) 0; }
.hist .meta { font-size: var(--fs-12); color: var(--ink-2); }
.hist .notes { margin: 2px 0; }
.hist .diff { font-size: var(--fs-12); background: var(--surface-2); border-radius: 6px; padding: 6px 8px; margin: 6px 0; }
/* 推荐车站专用的小样式;通用的设置面板、估算条、标签行、折叠区在 design.css(c-settings、c-estimate、c-pick-row、c-fold 等) */
.sg-line { font-size: var(--fs-13); margin: var(--sp-2) 0; }
.sg-names { margin: 0 0 var(--sp-2); font-size: var(--fs-13); overflow-wrap: anywhere; }
@media (min-width: 960px) { .sg-peek { display: none; } }
.legend .lg-route { width: 14px; height: 0; border-radius: 0; border-top: 3px dotted var(--drive); vertical-align: 3px; }
.legend .lg-circle { width: 12px; height: 12px; border: 1px solid var(--station); background: transparent; }
.kv { display: grid; grid-template-columns: 78px 1fr; gap: 10px 10px; align-items: start; margin-bottom: var(--sp-3); font-size: var(--fs-13); }
.kv > span:nth-child(odd) { color: var(--ink-2); padding-top: 8px; }
.kv .row { align-items: center; }
.kv .c-input { font-size: var(--fs-13); min-height: 34px; }
.conflicts { position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: 1800; display: flex; flex-direction: column; gap: var(--sp-2); max-width: min(420px, calc(100vw - 32px)); }
.conflict { background: var(--surface); border: 1px solid var(--danger); border-left: 4px solid var(--danger); border-radius: var(--r-ctl); padding: 8px 10px; box-shadow: var(--shadow-pop); font-size: var(--fs-13); }
.conflict .acts { margin-top: 6px; display: flex; gap: 10px; }
/* 整页的遮罩:取名、编辑口令、打不开、行程已删除、额度用完(用 hidden 属性开关) */
.overlay { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: var(--sp-4); background: var(--scrim); overflow: auto; }
.overlay[hidden] { display: none; }
.overlay form, .overlay .box { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-5); width: min(380px, 100%); box-shadow: var(--shadow-pop); }
.overlay h2 { margin: 0 0 6px; font-size: var(--fs-18); }
.overlay p { margin: 0 0 var(--sp-3); color: var(--ink-2); font-size: var(--fs-13); }
.overlay.gone { background: var(--bg); }
.overlay.gone .box { border: 0; box-shadow: none; background: none; text-align: center; width: min(420px, 100%); }
.overlay.gone .c-icon { width: 40px; height: 40px; color: var(--ink-3); margin-bottom: var(--sp-3); }
.dlg-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: 6px; }
.dlg-list button { width: 100%; text-align: left; display: flex; gap: var(--sp-2); align-items: flex-start; padding: 8px 10px; background: var(--danger-soft); color: var(--ink); border: 1px solid var(--danger); border-radius: var(--r-ctl); cursor: pointer; }
.dlg-list button:hover { background: var(--surface-2); }
.dlg-list .c-icon { color: var(--danger); margin-top: 2px; }
dialog.c-modal .c-field { margin: var(--sp-3) 0 0; }
@media (max-width: 639px) { dialog.c-modal { width: calc(100vw - 24px); } .c-modal__actions .c-btn { flex: 1; } }
</style>
</head>
<body>
<div class="app" id="app" data-tab="fill">
<header class="c-bar ed-bar">
<a class="c-brand" href="/" aria-label="拼车出行规划,回首页"><img src="/favicon.svg" width="28" height="28" alt=""></a>
<h1 class="c-bar__title" id="title">拼车出行规划</h1>
<div class="c-bar__actions ed-actions">
<button class="c-btn c-btn--sm online-only" id="historyBtn" title="查看和恢复历史版本">历史</button>
<button class="c-btn c-btn--sm" id="menuBtn" title="分享、导入导出">更多</button>
<button class="c-btn c-btn--sm local-only" id="save">保存</button>
<button class="c-btn c-btn--sm" id="sharebtn" hidden>发布方案页</button>
<a class="c-btn c-btn--sm try-only" id="demoLink" href="/demo" target="_blank" rel="noopener">看示例方案页</a>
<button class="c-btn c-btn--sm c-btn--primary" id="plan">计算方案</button>
</div>
<div class="ed-sub"><span><span id="status"></span> <button class="c-tag expiry" id="expiryChip" title="这个行程到期会自动删除,点开看说明" hidden></button></span><span class="peers" id="peers"></span></div>
<div class="progress" id="progress" hidden><span id="progressText"></span><div class="bar"><i id="progressBar"></i></div></div>
</header>
<div class="ed-body">
<aside class="side" id="paneFill">
<nav class="steps" id="steps" aria-label="填写进度"></nav>
<div id="form"><div class="c-empty ed-loading">加载中…</div></div>
</aside>
<main class="main">
<div class="ed-map" id="paneMap">
<div id="map"></div>
<div class="ed-mapfail" id="mapFail" hidden>
<div class="c-empty">
<svg class="c-icon" aria-hidden="true" focusable="false"><use href="/icons.svg#i-map"/></svg>
<h3>地图没加载出来</h3>
<p>可能是网络不太好。地图只是辅助,不影响填写和计算方案。</p>
<button class="c-btn c-btn--primary" id="mapRetry">重试</button>
</div>
</div>
</div>
<div class="results" id="panePlan">
<div class="c-alert c-alert--warn" id="stale" role="status" hidden>
<svg class="c-icon" aria-hidden="true" focusable="false"><use href="/icons.svg#i-alert"/></svg>
<div><span><b>方案已过期</b>:配置改过了,下面的方案可能不对了。</span><button class="c-btn c-btn--sm c-btn--primary" id="staleBtn">重新计算</button></div>
</div>
<div id="tabs" class="tabs"></div>
<div id="warn" class="ed-warns"></div>
<div id="report"></div>
</div>
</main>
</div>
<nav class="ed-tabs" role="tablist" aria-label="编辑页分区">
<button class="ed-tab" role="tab" id="tabFill" data-pane="fill" aria-selected="true"><svg class="c-icon" aria-hidden="true" focusable="false"><use href="/icons.svg#i-edit"/></svg>填写</button>
<button class="ed-tab" role="tab" id="tabMap" data-pane="map" aria-selected="false"><svg class="c-icon" aria-hidden="true" focusable="false"><use href="/icons.svg#i-map"/></svg>地图</button>
<button class="ed-tab" role="tab" id="tabPlan" data-pane="plan" aria-selected="false"><svg class="c-icon" aria-hidden="true" focusable="false"><use href="/icons.svg#i-car"/></svg>方案<span class="ed-dot" id="planDot" hidden></span></button>
</nav>
</div>
<aside class="drawer" id="drawer" hidden aria-label="侧边面板">
<header><h2 id="drawerTitle"></h2><button class="c-btn c-btn--ghost c-btn--sm" data-close-drawer>关闭</button></header>
<div class="body" id="drawerBody"></div>
</aside>
<div class="conflicts" id="conflicts"></div>
<div class="c-toasts" id="toasts" role="status" aria-live="polite"></div>
<div class="overlay" id="nameBox" role="dialog" aria-modal="true" aria-label="你是谁" hidden>
<form id="nameForm">
<h2>你是谁?</h2>
<p>一起编辑的人会看到你的名字:谁在线、谁改了什么。</p>
<input class="c-input" id="nameInput" maxlength="20" placeholder="比如 老王" required>
<button class="c-btn c-btn--primary c-btn--block" style="margin-top:12px">进入</button>
</form>
</div>
<div class="overlay" id="codeBox" role="dialog" aria-modal="true" aria-label="输入编辑口令" hidden>
<form id="codeForm">
<h2>输入编辑口令</h2>
<p id="codeMsg"></p>
<input class="c-input" id="codeInput" maxlength="20" autocomplete="off" placeholder="编辑口令" required>
<div class="c-field__error" id="codeErr" role="alert" style="min-height:1.4em"></div>
<button class="c-btn c-btn--primary c-btn--block" style="margin-top:6px">进入</button>
</form>
</div>
<div class="overlay" id="denied" role="alertdialog" aria-modal="true" hidden>
<div class="box"><h2>打不开这个行程</h2><p id="deniedText"></p><a class="c-btn c-btn--primary" href="/">回首页</a></div>
</div>
<div class="overlay gone" id="gone" role="alertdialog" aria-modal="true" aria-labelledby="goneTitle" hidden>
<div class="box">
<svg class="c-icon" aria-hidden="true" focusable="false"><use href="/icons.svg#i-trash"/></svg>
<h2 id="goneTitle">这个行程已经删除或到期</h2>
<p>行程到期(出行日期过后 60 天、或连续 180 天没人编辑)会自动删除,发起人也可以手动删除。删除后编辑链接和方案页链接都不能再用了。已经从这台设备的「最近的行程」里去掉了它。</p>
<a class="c-btn c-btn--primary" id="goneHome" href="/">回首页</a>
</div>
</div>
<div class="overlay" id="quotaBox" role="dialog" aria-modal="true" hidden>
<div class="box" style="width:min(460px,100%)">
<h2 id="quotaTitle">今天的高德额度用完了</h2>
<p id="quotaText"></p>
<label class="f"><span>填你自己的高德 Web 服务 Key,马上接着用</span><input class="c-input" id="quotaKey" autocomplete="off" placeholder="32 位字母和数字"></label>
<p>申请大约 3 分钟:<a href="https://console.amap.com/" target="_blank" rel="noopener">高德开放平台控制台</a>(个人需实名)→ 应用管理 → 创建应用 → 添加 Key,服务平台选「Web服务」,不要设 IP 白名单。Key 只保存在服务器上、只用于这个行程,调用次数算在你自己的免费额度里。</p>
<div class="row" style="align-items:center"><button class="c-btn c-btn--primary" id="quotaKeyBtn">用我的 Key 继续</button><span class="c-field__error" id="quotaErr"></span></div>
<p style="margin-top:12px">也可以明天再来:额度在北京时间零点恢复,已填的内容都在。</p>
<p>这个工具是非商业的个人项目,免费、无广告。作者主页:<a href="https://eigentime.org/" target="_blank" rel="noopener">eigentime.org</a></p>
<button class="c-btn" id="quotaClose">关闭</button>
</div>
</div>
<input type="file" id="importFile" accept=".json,application/json" hidden>
<script data-lib="leaflet" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" integrity="sha384-NElt3Op+9NBMCYaef5HxeJmU4Xeard/Lku8ek6hoPTvYkQPh3zLIrJP7KiRocsxO" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js" integrity="sha384-/TQbtLCAerC3jgaim+N78RZSDYV7ryeoBCVqTuzRrFec2akfBkHS7ACQ3PQhvMVi" crossorigin="anonymous"></script>
<script>
// 兜底:主模块(/editor/main.js)几秒内没有报到,就在页面上提示,免得网络不好、模块没下载完整时一直停在「加载中…」。
// 主模块跑起来以后会调用 window.__editorReady() 取消提示。这段脚本很小,构建时按哈希放行(见 web/build.mjs)。
(function () {
var box = null;
var timer = setTimeout(function () {
var form = document.getElementById('form');
if (!form) return;
box = document.createElement('div');
box.className = 'c-alert c-alert--danger';
box.setAttribute('role', 'alert');
box.style.margin = '16px';
box.innerHTML = '<svg class="c-icon" aria-hidden="true" focusable="false"><use href="/icons.svg#i-alert"/></svg><div>页面没加载出来,可能是网络不好,刷新试试;你填的内容不会丢。</div>';
form.prepend(box);
}, 6000);
window.__editorReady = function () { clearTimeout(timer); if (box) box.remove(); };
})();
</script>
<script type="module" src="/editor/main.js"></script>
</body>
</html>