水分補給リマインダー

一日の水分目標に向けて、飲んだ量を素早く記録し、残量・達成率・次に飲む目安時刻をひと目で確認できる、黒とシアンのデジタル HUD 風セルフケアツールです。

公開 URL: https://ai-app-gen-factory.pages.dev/004-hydration-reminder/

これは飲み忘れ防止と記録のための目安ツールです。医療助言や脱水症状の診断ではありません。

主な機能

中央タンクメーター: 現在の達成率を水位・パーセント・摂取量/目標量で同時表示します。目標を超えると満タン演出に切り替わります。
クイック追加: 100 / 200 / 350 / 500ml のボタンと、任意 ml 入力で素早く記録できます。
次に飲む目安: 残りの目標量と就寝時間までの残り時間から、均等配分の目安時刻と「あと約◯分」を算出します。目標達成時は達成状態を明確に表示します。
今日のステータス: 摂取量と残り量を常時表示します。
直近の記録: 追加した記録を新しい順に一覧し、個別削除や当日リセットができます。
目標と時間の設定: 1日の目標量（スライダー）、起床時間、就寝時間を同一画面内で調整できます。
シェア導線: 達成率を添えた X ポストをワンタップで作成できます。

判断が必要な操作（記録の削除・当日リセット）はブラウザ標準のダイアログではなく、アプリ独自のモーダルで確認します。完了・注意の通知はアプリ独自のトーストで表示します。

使い方

画面を開くと、今日の摂取量・達成率がタンクに表示されます。
飲んだら QUICK ADD のボタン、または「任意 ml」入力から量を追加します。
中央タンクで達成率を、右側パネルで残量と「次に飲む目安」を確認します。
必要に応じて SETTINGS で目標量・起床/就寝時間を調整します。
間違えたら「直前の記録を取り消す」、最初からやり直すなら「当日リセット」を使います。

データ保存・技術

HTML / CSS / JavaScript だけで動く静的ページです。ビルドや外部ライブラリは不要です。
今日の記録と設定は、この端末のブラウザの localStorage（キー: hydration-hud-v1）にのみ保存されます。サーバー送信はありません。
日付が変わると当日の記録は自動的に初期化されます。目標量・起床/就寝時間の設定は引き継がれます。
レスポンシブ対応。スマホではタンク → クイック追加 → ステータスの縦構成、PC では中央タンクを左右のパネルで挟むレイアウトになります。

アセットとフォールバック

assets/ の画像（バナー、ファビコン、背景、タンク、次回目安、しずく）を UI と演出に使用します。画像が読み込めない場合でも、黒とシアンの CSS とタンク描画で主要 UI と体験が成立するようフォールバックを実装しています。音声アセットは使用しません。

ファイル構成

004-hydration-reminder/
  index.html   画面構造と OGP / favicon 設定
  style.css    黒とシアンの HUD スタイル、レスポンシブ、モーダル/トースト
  app.js       記録・次回目安計算・localStorage・モーダル/トースト・シェア
  assets/      banner / favicon / background / progress-tank / next-drink-pulse / droplet-cluster
  README.md
  STATUS.txt