DJ セット向けのフルスクリーン カウントダウン タイマー PWA. スマホ縦画面前提, 現在時刻 / 残り時間 / 経過時間の 3 分割ビュー, 遅延の少ない秒表示, スリープ抑止.
English version → README.en.md
- 3 画面分割: 上 = 現在時刻, 中 = 残り時間 (カウントダウン), 下 = 経過時間 (カウントアップ). 全て
H:MM:SSで秒まで表示. - HH:MM ペアでセット時間指定: 開始時刻と終了時刻を入れる方式. 現場のタイムテーブルと合わせやすい.
- 段階的な色変化 + 点滅: 残り 3 分以下で 黄色, 残り 1 分以下で 黄色 + 点滅 (1Hz), 超過で 赤.
- 開始前 START も許容: セット開始時刻より前に START を押すと ELAPSED が負値でカウントされ, 開始時刻を跨ぐと自動で正に切り替わる.
- 保存プリセット (SAVED): 開始–終了ペアを最大 12 件保存, タップで即セットして戻る. 昇順表示.
×で削除確認モーダル. - スリープ抑止 (Screen Wake Lock API): 右上に
SLEEP: OFF / ONトグル. タップで手動切替. 手動で切ったあとは自動再取得しない. - 破壊操作は自前モーダル: RESET / OVERWRITE / DELETE はネイティブ
confirm()ではなく Chakra Petch のカスタムモーダルを表示. - ゼロ依存: 単一
index.html+ 静的アイコンのみ. ビルドステップなし, フレームワークなし.
- サイトを開く → 右下の
SETをタップ. START/ENDを選択 (デフォルト: 現在時刻 / +20 分).−/+ 20mの duration picker で 10 分刻みに増減可能.- よく使う時間帯は
↑ SAVE CURRENTで保存. 次回以降は上部の SAVED から 1 タップで呼び出せる. - メイン画面の
STARTで計測開始. スリープ抑止が自動で有効に (SLEEP: OFF).
- Vanilla HTML / CSS / JavaScript (単一
index.html) - Chakra Petch (Google Fonts)
- Screen Wake Lock API (secure context 必須)
localStorage— セッション状態と保存プリセット- Cloudflare Pages にデプロイ想定 (静的ホスティングなら何でも動く)
# 任意の静的サーバで OK. localhost なら Wake Lock も動く.
cd decktime
python3 -m http.server 8787
# → http://localhost:8787/Wake Lock は Secure context 必須なので, LAN の IP (HTTP) 経由では動作しない. 実挙動を試すには localhost か HTTPS (Cloudflare Pages / cloudflared tunnel / ngrok 等) 経由でアクセスする.
bun run linttools/lint-index.mjs が index.html の構造チェック (単一 script ブロック, ID の参照/宣言整合, document.getElementById の使用集約) を実行する.
Cloudflare Pages の Direct Upload:
_headers,manifest.webmanifest,index.html,icon-*.png,icon.svg,favicon-32.pngを zip.- Cloudflare Dashboard → Workers & Pages → Create → Pages → Upload assets.
- zip をドラッグして Deploy.
- Custom domains でサブドメイン (例:
timer.example.com) を追加.
MIT