168 lines
6.4 KiB
HTML
168 lines
6.4 KiB
HTML
<!doctype html>
|
|
<!--
|
|
TauClock main document.
|
|
The layout keeps all interactive pieces (clocks, alarms, timer, stopwatch)
|
|
above the fold and mirrors the keyboard shortcuts referenced in main.js.
|
|
-->
|
|
<html lang="ja">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>TauClock</title>
|
|
<script type="module" src="/main.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<!--
|
|
Primary app shell. Each section contains a self-contained widget that
|
|
maps to logic documented in src/main.js (alarms, timer, stopwatch).
|
|
-->
|
|
<main class="app-shell">
|
|
<header class="app-header">
|
|
<div>
|
|
<p class="eyebrow">Rust + Tauri - Keyboard native</p>
|
|
</div>
|
|
<div class="header-meta">
|
|
<button type="button" id="shortcut-trigger" class="hint-button">ショートカット一覧 (H)</button>
|
|
<button type="button" id="about-trigger" class="hint-button">About (I)</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Dual timezone clock display -->
|
|
<section class="clock-grid" aria-label="clock preview">
|
|
<article class="clock-card clock-card-main" aria-live="polite">
|
|
<h2>Local</h2>
|
|
<p id="local-time" class="clock-time">00:00:00</p>
|
|
<p id="local-date" class="clock-date"></p>
|
|
</article>
|
|
<article class="clock-card clock-card-aux" aria-live="polite">
|
|
<h2>UTC</h2>
|
|
<p id="utc-time" class="clock-time">00:00:00</p>
|
|
<p id="utc-date" class="clock-date"></p>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- Alarm planner and listing -->
|
|
<section id="alarm-panel" class="panel" aria-labelledby="alarm-heading">
|
|
<header>
|
|
<h2 id="alarm-heading">アラーム</h2>
|
|
<p class="panel-hint">A で時刻入力、N で追加</p>
|
|
</header>
|
|
<form id="alarm-form" class="inline-form" autocomplete="off">
|
|
<label>
|
|
<span>時刻</span>
|
|
<input type="time" id="alarm-time" step="60" required />
|
|
</label>
|
|
<label>
|
|
<span>メモ (任意)</span>
|
|
<input type="text" id="alarm-label" maxlength="80" placeholder="会議 / 休憩 など" />
|
|
</label>
|
|
<button type="submit" id="alarm-submit">追加</button>
|
|
</form>
|
|
<p id="next-alarm" class="next-indicator" aria-live="polite"></p>
|
|
<ul id="alarm-list" class="item-list" aria-live="polite"></ul>
|
|
</section>
|
|
|
|
<!-- Countdown timer -->
|
|
<section id="timer-panel" class="panel" aria-labelledby="timer-heading">
|
|
<header>
|
|
<h2 id="timer-heading">タイマー</h2>
|
|
<p class="panel-hint">T 入力、G スタート/一時停止、R リセット</p>
|
|
</header>
|
|
<div class="panel-body">
|
|
<label class="duration-field">
|
|
<span>時間指定 (例: 5m30s または 1:15)</span>
|
|
<input type="text" id="timer-input" placeholder="mm:ss" autocomplete="off" />
|
|
</label>
|
|
<div class="big-time" id="timer-display">00:00</div>
|
|
<div class="button-row">
|
|
<button id="timer-toggle" type="button">スタート</button>
|
|
<button id="timer-reset" type="button">リセット</button>
|
|
</div>
|
|
<p id="timer-status" class="status-text"></p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stopwatch with lap list -->
|
|
<section id="stopwatch-panel" class="panel" aria-labelledby="stopwatch-heading">
|
|
<header>
|
|
<h2 id="stopwatch-heading">ストップウォッチ</h2>
|
|
<p class="panel-hint">W スタート/停止、L ラップ、P リセット</p>
|
|
</header>
|
|
<div class="panel-body">
|
|
<div class="big-time" id="stopwatch-display">00:00.000</div>
|
|
<div class="button-row">
|
|
<button id="stopwatch-toggle" type="button">スタート</button>
|
|
<button id="stopwatch-lap" type="button">ラップ</button>
|
|
<button id="stopwatch-reset" type="button">リセット</button>
|
|
</div>
|
|
<ul id="stopwatch-laps" class="item-list compact" aria-live="polite"></ul>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="status-message" role="status" aria-live="polite"></div>
|
|
|
|
<!-- Overlay describing keyboard accelerators -->
|
|
<section id="shortcut-overlay" class="shortcut-overlay" hidden>
|
|
<div
|
|
class="shortcut-card"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="shortcut-heading"
|
|
tabindex="-1"
|
|
>
|
|
<header>
|
|
<h2 id="shortcut-heading">Keyboard Shortcuts</h2>
|
|
<button type="button" id="shortcut-close" class="ghost">閉じる (Esc)</button>
|
|
</header>
|
|
<dl>
|
|
<dt>H</dt>
|
|
<dd>ショートカット一覧を表示/非表示</dd>
|
|
<dt>I</dt>
|
|
<dd>Aboutを表示/非表示</dd>
|
|
<dt>A</dt>
|
|
<dd>アラーム時刻入力へフォーカス</dd>
|
|
<dt>N</dt>
|
|
<dd>アラームを追加</dd>
|
|
<dt>T</dt>
|
|
<dd>タイマー入力へフォーカス</dd>
|
|
<dt>G</dt>
|
|
<dd>タイマー開始/一時停止</dd>
|
|
<dt>R</dt>
|
|
<dd>タイマーをリセット</dd>
|
|
<dt>W</dt>
|
|
<dd>ストップウォッチ開始/停止</dd>
|
|
<dt>L</dt>
|
|
<dd>ラップを記録</dd>
|
|
<dt>P</dt>
|
|
<dd>ストップウォッチをリセット</dd>
|
|
<dt>Esc</dt>
|
|
<dd>入力フォーカス解除/オーバーレイを閉じる</dd>
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about-overlay" class="about-overlay" hidden>
|
|
<div class="about-card" role="dialog" aria-modal="true" aria-labelledby="about-heading" tabindex="-1">
|
|
<header>
|
|
<h2 id="about-heading">About TauClock</h2>
|
|
<button type="button" id="about-close" class="ghost">閉じる (Esc)</button>
|
|
</header>
|
|
<dl class="about-meta">
|
|
<dt>アプリ名</dt>
|
|
<dd id="about-name">-</dd>
|
|
<dt>バージョン</dt>
|
|
<dd id="about-version">-</dd>
|
|
<dt>識別子</dt>
|
|
<dd id="about-identifier">-</dd>
|
|
<dt>ライセンス</dt>
|
|
<dd id="about-license-name">-</dd>
|
|
</dl>
|
|
<h3>ライセンス本文</h3>
|
|
<pre id="about-license-text" class="about-license"></pre>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
</html>
|