chore: initial commit
This commit is contained in:
143
src/index.html
Normal file
143
src/index.html
Normal file
@@ -0,0 +1,143 @@
|
||||
<!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>
|
||||
</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>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>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user