Build a Water Intake Tracker with AI

Build a single-page water intake tracker as a static HTML/CSS/JS site. Page background #0f0f17 with a centered layout (max-width 480px). Design mobile-first — this should feel like a native phone app. At the top, display "Water Tracker" heading in white, today's date in #6a6a80, and a small gear icon that opens the settings panel. Below the header, create the main visual element: a large water container visualization (260px wide, 340px tall) using SVG or CSS. Draw a rounded rectangle outline (#2a2a3a stroke) representing a water bottle or glass shape. Inside, fill the container from the bottom up with a #3b82f6 water fill that rises based on the current intake percentage. Add a subtle CSS wave animation at the water surface using a sine-wave clip-path that slowly undulates. The water fill should animate smoothly (0.5s ease-out transition) when water is added. Inside the container, display the current intake as "X / Y oz" (or ml) in large 28px bold white text, centered vertically. Below it, show the percentage as "XX%" in #8888a0. When the goal is reached (100%), change the water color to #22c55e, show a checkmark icon, and display "Goal reached!" text. Below the container, create a row of quick-add buttons: Small Glass (8 oz, small icon), Large Glass (12 oz, medium icon), Water Bottle (16 oz, bottle icon), and Large Bottle (24 oz, large icon). Style each as a rounded card (70px wide, #12121a background, #2a2a3a border) with the icon on top and the oz amount below in #8888a0 text. When tapped, the button briefly scales up (1.1x) and the water fill animates up. Also include a "Custom" button that opens a number input for custom amounts. Add an "Undo" button below the quick-add buttons (small, #1a1a2a background, #6a6a80 text) that removes the last logged entry. Below the buttons, show three stat cards in a row: Today's Total (in oz/ml), Streak (consecutive days meeting goal, with a flame icon in #f59e0b if streak is 3+), and Weekly Average (average daily intake for the past 7 days). Style with #12121a backgrounds and colored accent values. Below stats, add a "Today's Log" section showing a timeline of water entries for the current day. Each entry shows: time (e.g., "2:30 PM"), amount (e.g., "16 oz"), and type (e.g., "Water Bottle"). Include a small X to delete individual entries. Style as a clean vertical timeline. Below the log, add a "7-Day History" section with a horizontal bar chart showing daily intake for the past 7 days. Each bar has the day abbreviation (Mon, Tue, etc.) and is filled proportionally — bars that meet the goal are #22c55e, below goal are #3b82f6, and the goal line is shown as a dashed horizontal line in #f59e0b. Show the oz amount at the end of each bar. Settings panel (collapsible): Daily Goal (number input in oz, default 64 oz / 8 glasses), Unit Preference toggle (oz/ml — conversion: 1 oz = 29.57 ml), and Reset Day (button to clear today's data with confirmation dialog). All data persists in localStorage keyed by date. Each day stores an array of entries (timestamp, amount, type). Auto-save on every action. The app should auto-detect a new day and start fresh while preserving history. Make everything responsive with large touch targets (min 44px tap areas), smooth animations, and haptic-feeling button feedback via CSS transforms. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].