Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

hiroaki222/decktime

Open more actions menu

Repository files navigation

decktime

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 + 静的アイコンのみ. ビルドステップなし, フレームワークなし.

使い方

  1. サイトを開く → 右下の SET をタップ.
  2. START / END を選択 (デフォルト: 現在時刻 / +20 分). −/+ 20m の duration picker で 10 分刻みに増減可能.
  3. よく使う時間帯は ↑ SAVE CURRENT で保存. 次回以降は上部の SAVED から 1 タップで呼び出せる.
  4. メイン画面の 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 等) 経由でアクセスする.

Lint

bun run lint

tools/lint-index.mjsindex.html の構造チェック (単一 script ブロック, ID の参照/宣言整合, document.getElementById の使用集約) を実行する.

デプロイ

Cloudflare Pages の Direct Upload:

  1. _headers, manifest.webmanifest, index.html, icon-*.png, icon.svg, favicon-32.png を zip.
  2. Cloudflare Dashboard → Workers & Pages → Create → Pages → Upload assets.
  3. zip をドラッグして Deploy.
  4. Custom domains でサブドメイン (例: timer.example.com) を追加.

ライセンス

MIT

About

Minimalist DJ set countdown timer PWA — HH:MM sessions, saved presets, wake lock, zero dependencies.

Topics

Resources

Stars

Watchers

Forks

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.