●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Week navigation as tab-like buttons for seven days with per-day color highlighting and horizontal scroll.
- Exercise listing per selected day with animated list item cards.
- Add-exercise form using EditForm with DataAnnotations validation (name and repetitions).
- Bootstrap-styled save and submit actions (SaveDayPlan, SubmitWeekPlan) as buttons.
## Key components
- EditForm, DataAnnotationsValidator, ValidationMessage
- InputText, InputNumber, @bind-Value, OnValidSubmit
- Button elements with Bootstrap classes (btn, btn-primary, btn-success, btn-info)
- Razor code-behind logic: List<List<ExerciseModel>> exercisesByDay, SelectDay(), AddExercise()
- Custom CSS: .week-tabs, .exercise-item, slideIn/bounce keyframes
## How it works
- Days are rendered from a List<string> and a selectedDay index controls the current view.
- SelectDay(int) updates selectedDay via @onclick and GetDayColor(index) supplies inline tab background colors.
- EditForm binds newExercise and runs AddExercise on valid submit; AddExercise appends a new ExerciseModel to exercisesByDay[selectedDay] and resets the form model.
- Validation attributes on ExerciseModel (Required, StringLength, Range) drive client-side validation messages via DataAnnotationsValidator and ValidationMessage.
- SaveDayPlan and SubmitWeekPlan are placeholders for persistence or API calls.
## Styling
- Uses Bootstrap layout and utilities: container-fluid, row, col-md-*, btn, form-control for responsive grid and form styling.
- Custom component CSS handles horizontal scrolling of tabs, rounded tab pills, card-like exercise items, and simple animations (slideIn, bounce, moveCar).
- Responsive behavior relies on Bootstrap grid; .week-tabs adds overflow-x for narrow viewports.
## Reuse steps
1. Add the Razor page and companion .razor.css to a Blazor project that includes Bootstrap CSS (default Blazor templates include it).
2. Ensure using Microsoft.AspNetCore.Components.Forms and System.ComponentModel.DataAnnotations namespaces in the page.
3. Optionally include FontAwesome for icons used in markup or replace icons with other icon sets.
4. Adjust ExerciseModel to match domain requirements and wire SaveDayPlan/SubmitWeekPlan to services (inject via @inject) for persistence.
5. Add server-side validation and API endpoints or a local storage mechanism to persist weekly plans.
## Limitations & next steps
- This is a single-page UI scaffold generated by Instruct UI; persistence, authentication, and backend APIs are not implemented.
- Client-side validation uses DataAnnotations; add server-side checks when integrating with APIs.
- Consider adding edit/delete for existing exercises, drag-and-drop reordering, and unit tests for the page logic.
- Localize strings (currently French) and protect actions behind authentication if used in a multi-user app.