98 lines
5.1 KiB
HTML
98 lines
5.1 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
|
|
<meta name="theme-color" content="#101311">
|
||
|
|
<title>桌面时钟</title>
|
||
|
|
<link rel="stylesheet" href="styles.css">
|
||
|
|
</head>
|
||
|
|
<body class="clock-page">
|
||
|
|
<main class="app-shell" data-scale-layout="fit" data-base-width="960" data-base-height="600">
|
||
|
|
<header class="topbar">
|
||
|
|
<a class="brand" href="index.html" aria-label="桌面时钟首页">
|
||
|
|
<span class="brand-mark" aria-hidden="true"></span>
|
||
|
|
<span>桌面时钟</span>
|
||
|
|
</a>
|
||
|
|
<div class="topbar-actions">
|
||
|
|
<button class="icon-button" id="fullscreen-button" type="button" aria-label="进入全屏" title="进入全屏">
|
||
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
|
||
|
|
</button>
|
||
|
|
<a class="icon-button" href="settings.html" aria-label="打开设置" title="设置">
|
||
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06a1.7 1.7 0 0 0-1.88-.34 1.7 1.7 0 0 0-1.03 1.56V21h-4v-.08A1.7 1.7 0 0 0 8.95 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.56-1.03H3v-4h.08A1.7 1.7 0 0 0 4.6 8.95a1.7 1.7 0 0 0-.34-1.88L4.2 7l2.83-2.83.06.06A1.7 1.7 0 0 0 8.95 4.6 1.7 1.7 0 0 0 9.98 3H10V3h4v.08a1.7 1.7 0 0 0 1.03 1.53 1.7 1.7 0 0 0 1.88-.34l.06-.06L19.8 7l-.06.06a1.7 1.7 0 0 0-.34 1.88A1.7 1.7 0 0 0 21 9.97h.04v4H21A1.7 1.7 0 0 0 19.4 15Z"/></svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<nav class="mode-switcher" aria-label="时钟模式">
|
||
|
|
<button class="mode-button is-active" type="button" data-mode="clock" aria-pressed="true">时钟</button>
|
||
|
|
<button class="mode-button" type="button" data-mode="stopwatch" aria-pressed="false">秒表</button>
|
||
|
|
<button class="mode-button" type="button" data-mode="timer" aria-pressed="false">倒计时</button>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<section class="mode-panel is-active clock-panel" id="clock-panel" data-panel="clock" aria-label="当前时间">
|
||
|
|
<div class="clock-stage">
|
||
|
|
<div class="calendar-index" aria-hidden="true">
|
||
|
|
<span id="month-index">JAN</span>
|
||
|
|
<strong id="day-index">01</strong>
|
||
|
|
</div>
|
||
|
|
<div class="clock-main">
|
||
|
|
<p class="date-line" id="date-line"></p>
|
||
|
|
<div class="clock-row">
|
||
|
|
<span class="period" id="period"></span>
|
||
|
|
<time class="hero-time" id="clock-time" datetime="">00:00<span class="seconds">:00</span></time>
|
||
|
|
</div>
|
||
|
|
<p class="timezone" id="timezone"></p>
|
||
|
|
</div>
|
||
|
|
<div class="day-progress" aria-label="当日进度">
|
||
|
|
<span>DAY</span>
|
||
|
|
<div><i id="day-progress-bar"></i></div>
|
||
|
|
<output id="day-progress-value">0%</output>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="mode-panel timer-panel" id="stopwatch-panel" data-panel="stopwatch" aria-label="秒表" hidden>
|
||
|
|
<p class="panel-kicker">经过时间</p>
|
||
|
|
<output class="counter" id="stopwatch-display">00:00<span>.00</span></output>
|
||
|
|
<div class="control-row">
|
||
|
|
<button class="secondary-button" id="stopwatch-reset" type="button" disabled>归零</button>
|
||
|
|
<button class="primary-button" id="stopwatch-toggle" type="button">开始</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="mode-panel timer-panel" id="timer-panel" data-panel="timer" aria-label="倒计时" hidden>
|
||
|
|
<p class="panel-kicker">剩余时间</p>
|
||
|
|
<div class="timer-editor" id="timer-editor" aria-label="设置倒计时时长">
|
||
|
|
<label><input id="timer-hours" type="number" min="0" max="99" value="0" inputmode="numeric"><span>时</span></label>
|
||
|
|
<b>:</b>
|
||
|
|
<label><input id="timer-minutes" type="number" min="0" max="59" value="5" inputmode="numeric"><span>分</span></label>
|
||
|
|
<b>:</b>
|
||
|
|
<label><input id="timer-seconds" type="number" min="0" max="59" value="0" inputmode="numeric"><span>秒</span></label>
|
||
|
|
</div>
|
||
|
|
<output class="counter" id="timer-display" hidden>05:00</output>
|
||
|
|
<div class="quick-times" id="quick-times" aria-label="快捷时长">
|
||
|
|
<button type="button" data-minutes="1">1 分钟</button>
|
||
|
|
<button type="button" data-minutes="5">5 分钟</button>
|
||
|
|
<button type="button" data-minutes="15">15 分钟</button>
|
||
|
|
<button type="button" data-minutes="25">25 分钟</button>
|
||
|
|
</div>
|
||
|
|
<div class="control-row">
|
||
|
|
<button class="secondary-button" id="timer-reset" type="button" disabled>重置</button>
|
||
|
|
<button class="primary-button" id="timer-toggle" type="button">开始</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<footer class="statusbar">
|
||
|
|
<span id="status-text">准备就绪</span>
|
||
|
|
<span class="status-dot"><i></i>本地运行</span>
|
||
|
|
</footer>
|
||
|
|
<div class="toast" id="toast" role="status" aria-live="polite"></div>
|
||
|
|
</main>
|
||
|
|
<script src="config.js"></script>
|
||
|
|
<script src="background.js"></script>
|
||
|
|
<script src="app.js"></script>
|
||
|
|
<script src="layout.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|