meetsync/index.html at master · YzYhhhstudy/meetsync · 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MeetSync · 会议时间协调器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
  <div class="brand">
    <h1>🌍 MeetSync</h1>
    <p>跨时区会议时间协调器 — 一眼找到所有人都方便的开会时间</p>
  </div>
  <div class="controls">
    <label>📆 会议日期 <input type="date" id="meetDate"></label>
    <label>⏳ 时长 <input type="range" id="durSlider" min="15" max="480" step="15" value="60">
      <b id="durLabel">1 小时</b></label>
    <label>工作时间
      <select id="workStart"></select> —
      <select id="workEnd"></select>
    </label>
    <button id="shareBtn" title="复制带城市/日期/会议时间的分享链接">🔗 分享链接</button>
    <button id="themeBtn" class="theme-btn" title="切换 暗色 / 亮色 / 跟随系统"></button>
  </div>
</header>

<main>
  <section class="add-city">
    <input id="citySearch" type="text" placeholder="🔍 搜索城市加入对比（如：东京 / Tokyo / London…）" autocomplete="off">
    <ul id="cityResults" class="results hidden"></ul>
  </section>

  <section id="overlapSummary" class="summary"></section>

  <section class="timeline-wrap">
    <div id="timeline"></div>
    <p class="tl-hint">💡 在时间轴上<b>点击</b>放置会议 · <b>拖动色块</b>移动时间 · <b>拖动两端把手</b>调整时长（15 分钟精度）</p>
  </section>

  <section id="meetingDetail" class="detail hidden"></section>

  <footer>
    <span class="legend"><i class="sw work"></i>工作时间</span>
    <span class="legend"><i class="sw awake"></i>清醒时间</span>
    <span class="legend"><i class="sw sleep"></i>休息时间</span>
    <span class="legend"><i class="sw band-i"></i>会议时段</span>
    <span class="hint">时区数据来自浏览器 Intl（自动处理夏令时）</span>
  </footer>
</main>

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