120 lines
4.4 KiB
HTML
120 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-TW">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>吉八小 · 集滿八小時</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link rel="preconnect" href="https://font.emtech.cc" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<link href="https://font.emtech.cc/css/TaipeiSansTC.css" rel="stylesheet" />
|
||
<script>
|
||
(function () {
|
||
var p = localStorage.getItem("pts_theme") || "system";
|
||
var dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||
var t = p === "light" || p === "dark" ? p : dark ? "dark" : "light";
|
||
document.documentElement.setAttribute("data-theme", t);
|
||
document.documentElement.classList.toggle("dark", t === "dark");
|
||
})();
|
||
</script>
|
||
<link rel="stylesheet" href="/static/style.css" />
|
||
</head>
|
||
<body>
|
||
<div class="container narrow">
|
||
<header class="topbar compact">
|
||
<div>
|
||
<h1>吉八小</h1>
|
||
<p class="subtitle">集滿八小時 · <span id="connLine">檢查連線…</span></p>
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<div class="theme-toggle" title="外觀">
|
||
<button type="button" class="theme-btn" data-theme-option="light">淺</button>
|
||
<button type="button" class="theme-btn" data-theme-option="dark">深</button>
|
||
<button type="button" class="theme-btn" data-theme-option="system">系統</button>
|
||
</div>
|
||
<nav class="nav">
|
||
<a href="/" class="nav-link active">填工時</a>
|
||
<a href="/compbase" class="nav-link">刷卡補填</a>
|
||
<a href="/settings" class="nav-link">設定</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="card">
|
||
<h2>1. 選日期</h2>
|
||
|
||
<div class="mode-row">
|
||
<label class="mode-option">
|
||
<input type="radio" name="dateMode" value="range" checked />
|
||
<span>日期區間</span>
|
||
<small>自動跳過週末／台灣假日</small>
|
||
</label>
|
||
<label class="mode-option">
|
||
<input type="radio" name="dateMode" value="list" />
|
||
<span>指定多日</span>
|
||
<small>照填，不跳假日</small>
|
||
</label>
|
||
</div>
|
||
|
||
<div id="rangePanel" class="date-panel">
|
||
<div class="form-row">
|
||
<label>
|
||
開始
|
||
<input type="date" id="startDate" />
|
||
</label>
|
||
<label>
|
||
結束
|
||
<input type="date" id="endDate" />
|
||
</label>
|
||
</div>
|
||
<div class="actions tight">
|
||
<button type="button" id="setTodayBtn" class="btn secondary">今天</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="listPanel" class="date-panel hidden">
|
||
<label>
|
||
日期清單（一行一個，YYYY-MM-DD）
|
||
<textarea id="dateList" class="date-list" rows="5" placeholder="2026-07-12 2026-07-13 2026-07-19"></textarea>
|
||
</label>
|
||
<p class="hint small">無論週末或台灣假日都會填這些日期。</p>
|
||
</div>
|
||
|
||
<p id="rangeMeta" class="muted-inline">—</p>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<h2>2. 預覽 / 填寫</h2>
|
||
<p class="hint">Teams 會議 + GitLab issue → 分配時數 → 寫入 PTS。</p>
|
||
<label class="checkbox dry-run-row">
|
||
<input type="checkbox" id="dryRun" />
|
||
試跑（不真的送出）
|
||
</label>
|
||
<div class="actions">
|
||
<button type="button" id="previewBtn" class="btn secondary">預覽</button>
|
||
<button type="button" id="fillBtn" class="btn primary">填寫</button>
|
||
</div>
|
||
<p id="actionStatus" class="settings-status"></p>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<h2>CompBase 刷卡補填</h2>
|
||
<p class="hint">掃出勤「應刷未刷」、一鍵補刷退（與上方 PTS 工時無關）。</p>
|
||
<div class="actions">
|
||
<a href="/compbase" class="btn primary">前往刷卡補填</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<h2>3. 結果</h2>
|
||
<div id="planView" class="plan-view">
|
||
<p class="hint">選好日期後按「預覽」或「填寫」。</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<script src="/static/common.js"></script>
|
||
<script src="/static/app.js"></script>
|
||
</body>
|
||
</html>
|