饮水打卡提醒页

你是一位资深前端工程师。请帮我写一个饮水打卡提醒页，要求如下：

## 一、技术约束
单文件 .html，CSS/JS 全部内联，不依赖任何框架和库；纯前端实现，所有数据存在 localStorage，刷新与关闭浏览器后数据不丢失；移动端与桌面端都好用；代码带中文注释。

## 二、信息占位（方括号内为待我替换的内容）
每日目标【2000ml 默认 占位】，每杯容量【200/300/500ml 可选 占位】，提醒间隔【45 分钟 占位】，起床与睡觉时间【用于计算提醒时段 占位】。

## 三、数据结构（字段定义）
days: {'YYYY-MM-DD': {total, logs: [{time, ml}]}}；settings: {goal, cup, interval}

## 四、页面区块（自上而下）
1 主视图：大进度环（当前/目标 ml）+ 剩余水量 + 已喝杯数。
2 快捷记录：'记一杯'大按钮 + 自定义毫升输入；