Confirm?

Are you sure you want to proceed?
?

Security Camera Intrusion App

Clone & Customize via AI

The Bootstrap security monitor dashboard provides filtering, viewing, and marking of security camera frames. It features a virtualized gallery, live feed simulation, summaries, and CSV export generated by Instruct UI.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Sidebar navigation with menu links - Filters including camera selection, search input, intrusion toggle - Virtualized frame gallery using Virtualize component - Live camera feed simulation with thumbnails and selection - Intrusion marking toggles and bulk update button - Summary section with counts and intrusion charts using Bootstrap progress bars - CSV report generation and download button ## Key components - InputSelect, InputText, InputCheckbox (bound with @bind-Value) - Virtualize for efficient frame list rendering - Bootstrap layout classes (container-fluid, row, col-*) and utility classes - NavLink for navigation menu with ActiveClass - Button click events to simulate data changes ## How it works Data is stored in C# lists representing cameras and frames. Filtering uses LINQ queries with selected camera, search term, and intrusion toggle. Virtualize loads visible frames lazily. Events update frame intrusion flags or selections. CSV export uses StringBuilder with URL data URI for client download. ## Styling Bootstrap 5 classes provide responsive grid layout, cards, buttons, forms, and progress bars. Custom CSS tweaks image sizing on small screens. Responsive column structure adapts to viewport size. ## Reuse steps 1. Include Bootstrap 5 CSS in the project. 2. Add FontAwesome icons or adjust icon usage. 3. Import namespaces and models. 4. Add Virtualize component support if targeting .NET 6+. 5. Wire real data sources and authentication as needed. 6. Adjust styling or localization per project. ## Limitations & next steps This single-page module simulates live feeds and uses placeholder images. It lacks backend integration and authorization. Additional pages exist as placeholders requiring implementation. Real-time updates and authentication should be added for production use.