Confirm?

Are you sure you want to proceed?
M
Mukesh Bhagat

Water Drinking Reminder UI

Clone & Customize via AI

MudBlazor Water Reminder is a compact intake tracker page using MudBlazor components. It shows progress with MudProgressCircular and accepts entries via MudNumericField and quick-add buttons.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Circular progress indicator with percentage overlay showing daily hydration progress. - Quick-add buttons for common amounts and a custom numeric input for arbitrary ml values. - Today's intake log rendered as a scrollable list with timestamps and an icon. - Reset action to clear the day's total and history. ## Key components - MudProgressCircular (circular progress and center percentage) - MudNumericField with @bind-Value for custom amount entry - MudButton (quick-add buttons, Add and Reset) - MudList / MudListItem for intake history display - MudText, MudDivider, MudStack, MudGrid, MudPaper, MudContainer for layout - Icons.Material.Filled.LocalDrink and StartIcon refresh ## How it works - State is kept in private fields: _dailyGoal, _currentAmount, _customAmount and a List<WaterIntakeRecord> _intakeHistory. - ProgressPercentage is a computed double property: (double)_currentAmount / _dailyGoal * 100. - Quick-add buttons call AddWater(amount) which updates _currentAmount and inserts a new WaterIntakeRecord at the start of _intakeHistory. - Custom amount uses MudNumericField bound with @bind-Value to _customAmount and AddCustomWater performs validation (HasValue && > 0) before adding. - The intake log iterates _intakeHistory and formats timestamps with CultureInfo.InvariantCulture to show time-only strings. ## Styling - Uses MudBlazor component styling and layout primitives (MudContainer, MudGrid, MudPaper). No Tailwind or Bootstrap classes detected beyond minor utility classes for alignment. - Responsive considerations rely on MudGrid/MudItem xs sizing and MudContainer MaxWidth.Small for constrained width. - A small inline style positions the centered percentage over the circular progress. ## Reuse steps 1. Add the MudBlazor NuGet package and register services: builder.Services.AddMudServices(); 2. Import MudBlazor namespaces (e.g., _Imports.razor) and include MudBlazor CSS in index.html/_Host. 3. Add the WaterIntakeRecord model to the project and place the Razor component in Pages or Components folder. 4. Wire any persistence or state (localStorage, server API, or scoped service) to preserve _intakeHistory and _currentAmount across reloads. 5. Adjust _dailyGoal, localization, and formatting to app requirements; add unit conversion if needed. ## Limitations & next steps - This is a single-page UI example generated by Instruct UI and contains only client-side in-memory state. - No persistence, authentication, background notifications, or cross-device sync is included; service wiring is required for production use. - Add validation summaries, entry editing/deletion, daily boundary handling (timezones), and optional reminders/notifications as next steps. - Consider extracting the logic into a scoped service for testability and adding unit tests for AddWater/AddCustomWater/Reset.