Phase 2 Step 5: Implement Basic UI Templates

Implement comprehensive web UI with dark slate theme matching HTML reports:

Templates:
- Create base.html with navigation, dark theme (#0f172a background)
- Update dashboard.html with stats cards and recent scans table
- Update scans.html with pagination, filtering, and status badges
- Update scan_detail.html with comprehensive scan results display
- Update login.html to extend base template with centered design

Features:
- AJAX-powered dynamic data loading from API endpoints
- Auto-refresh for running scans (10-15 second intervals)
- Responsive Bootstrap 5 grid layout
- Color scheme matches report_mockup.html (slate dark theme)
- Status badges (success/danger/warning/info) with proper colors
- Modal dialogs for triggering scans
- Pagination with ellipsis for large result sets
- Delete confirmation dialogs
- Loading spinners for async operations

Bug Fixes:
- Fix scanner.py imports to use 'src.' prefix for module imports
- Fix scans.py to import validate_page_params from pagination module

All templates use consistent color palette:
- Background: #0f172a, Cards: #1e293b, Accent: #60a5fa
- Success: #065f46/#6ee7b7, Danger: #7f1d1d/#fca5a5
- Warning: #78350f/#fcd34d, Info: #1e3a8a/#93c5fd
This commit is contained in:
2025-11-14 11:51:27 -06:00
parent 0791c60f60
commit a64096ece3
8 changed files with 1664 additions and 200 deletions

View File

@@ -1,7 +1,7 @@
# Phase 2 Implementation Plan: Flask Web App Core
**Status:** Step 4 Complete ✅ - Authentication System (Days 7-8)
**Progress:** 8/14 days complete (57%)
**Status:** Step 5 Complete ✅ - Basic UI Templates (Days 9-10)
**Progress:** 10/14 days complete (71%)
**Estimated Duration:** 14 days (2 weeks)
**Dependencies:** Phase 1 Complete ✅
@@ -34,8 +34,17 @@
- Bootstrap 5 dark theme UI templates
- 30+ authentication tests
- 1,200+ lines of code added
- **Step 5: Basic UI Templates** (Days 9-10) - NEXT
- 📋 **Step 6: Docker & Deployment** (Day 11) - Pending
- **Step 5: Basic UI Templates** (Days 9-10) - COMPLETE
- base.html template with navigation and slate dark theme
- dashboard.html with stats cards and recent scans
- scans.html with pagination and filtering
- scan_detail.html with comprehensive scan results display
- login.html updated to use dark theme
- All templates use matching color scheme from report_mockup.html
- AJAX-powered dynamic data loading
- Auto-refresh for running scans
- Responsive design with Bootstrap 5
- 📋 **Step 6: Docker & Deployment** (Day 11) - NEXT
- 📋 **Step 7: Error Handling & Logging** (Day 12) - Pending
- 📋 **Step 8: Testing & Documentation** (Days 13-14) - Pending