●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Selectable fingerprint grid separated by hand (right/left).
- Image viewer that enlarges the selected fingerprint or shows a justification placeholder.
- Colored score badges and hover/selected states driven by score classes.
- Compact legend with color gradient bar and labeled icons.
- Responsive layout with media query adjustments for small screens.
- Example data initialization and parent-child communication for selection.
## Key components
- Razor components: FingerprintCapturePage, FingerprintSelection, FingerprintViewer
- Model and enums: FingerprintModel, FingerPosition, FingerScore, FingerprintEnumExtensions
- Interaction primitives: EventCallback<FingerprintModel>, @onclick handlers, [Parameter] properties
- Markup elements: <img>, role="list"/"listitem", custom CSS classes (.finger-list, .finger-item, .score-badge)
## How it works
- The page initializes an allFingers list and a selectedFingerprint field in code-behind.
- FingerprintSelection receives Fingerprints and SelectedFingerprint via [Parameter] and raises OnFingerSelected EventCallback on click (@onclick).
- The parent page handles HandleFingerSelected and updates selectedFingerprint; FingerprintViewer receives the selected item and displays either ImageSource or Justification.
- Visual state is controlled by CSS classes produced by extension methods (GetScoreColorClass and GetScoreValue) so styles map directly from FingerScore values.
- No EditForm or DataAnnotations validation is present because the page focuses on selection and display rather than form submission.
## Styling
- Custom scoped CSS (FingerprintCapturePage.razor.css) implements the layout: .capture-card, .card-body, .viewer-section, .selection-section.
- The finger grid uses CSS Grid (repeat(auto-fit, minmax(...))) and media queries for responsiveness.
- Score colors, selected borders and badge backgrounds are applied via score-* classes (score-excellent, score-good, score-missing, etc.).
- Accessibility notes: images include alt text and the legend uses role="list"/"listitem", but keyboard focus and ARIA labels are minimal.
## Reuse steps
1. Copy the three Razor components (FingerprintCapturePage.razor, FingerprintSelection.razor, FingerprintViewer.razor) and the FingerprintModels.cs file into a Blazor project.
2. Include the scoped CSS file or merge into site stylesheet; ensure the component selector path and routes are correct (route: /fingerprint-check).
3. Import the containing namespace where the components are used or add @using where required.
4. Replace the sample allFingers initialization with real data or a service; expose selection changes via EventCallback or @bind pattern if two-way binding is preferred.
5. Add keyboard/ARIA support, file upload or live capture integration, and adjust image handling for server/static assets.
## Limitations & next steps
- This showcase is a single-page UI sample generated by Instruct UI and is not wired to a back-end service, persistence, or authentication.
- No form validation or DataAnnotations are present; add EditForm when submitting capture metadata.
- Accessibility improvements: keyboard navigation, focus states, ARIA labels on interactive tiles, and larger hit targets for touch devices.
- Extend by connecting a capture service, adding live camera/file upload, storing results via an API, and adding unit/interaction tests.