feat: Add base HTML template and implement dashboard, logs, and service views

- Created a base HTML template for consistent layout across pages.
- Developed a dashboard page to display backup service metrics and statuses.
- Implemented a log viewer for detailed log file inspection.
- Added error handling page for better user experience during failures.
- Introduced service detail page to show specific service metrics and actions.
- Enhanced log filtering and viewing capabilities.
- Integrated auto-refresh functionality for real-time updates on metrics.
- Created integration and unit test scripts for backup metrics functionality.

static/css/custom.css

@@ -0,0 +1,216 @@
+/* Custom CSS for Backup Monitor */
+
+.service-card {
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.service-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.status-success {
+    color: #28a745;
+}
+
+.status-partial {
+    color: #ffc107;
+}
+
+.status-failed {
+    color: #dc3545;
+}
+
+.status-running {
+    color: #007bff;
+}
+
+.status-unknown {
+    color: #6c757d;
+}
+
+.navbar-brand {
+    font-weight: bold;
+}
+
+.card-header {
+    border-bottom: 2px solid #f8f9fa;
+}
+
+.service-card .card-body {
+    min-height: 200px;
+}
+
+.btn-group-sm > .btn, .btn-sm {
+    font-size: 0.8rem;
+}
+
+/* Loading spinner */
+.spinner-border-sm {
+    width: 1rem;
+    height: 1rem;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .display-4 {
+        font-size: 2rem;
+    }
+    
+    .service-card .card-body {
+        min-height: auto;
+    }
+}
+
+/* Status indicators */
+.status-indicator {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 8px;
+}
+
+.status-indicator.success {
+    background-color: #28a745;
+}
+
+.status-indicator.warning {
+    background-color: #ffc107;
+}
+
+.status-indicator.danger {
+    background-color: #dc3545;
+}
+
+.status-indicator.info {
+    background-color: #17a2b8;
+}
+
+.status-indicator.secondary {
+    background-color: #6c757d;
+}
+
+/* Custom alert styles */
+.alert-sm {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+}
+
+/* Card hover effects */
+.card {
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: 0.375rem;
+}
+
+.card:hover {
+    border-color: rgba(0,123,255,.25);
+}
+
+/* Footer styling */
+footer {
+    margin-top: auto;
+}
+
+/* Utility classes */
+.text-truncate-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+/* Animation for refresh button */
+.btn .fa-sync-alt {
+    transition: transform 0.3s ease;
+}
+
+.btn:hover .fa-sync-alt {
+    transform: rotate(180deg);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .card {
+        background-color: #2d3748;
+        border-color: #4a5568;
+        color: #e2e8f0;
+    }
+    
+    .card-header {
+        background-color: #4a5568;
+        border-color: #718096;
+    }
+    
+    .text-muted {
+        color: #a0aec0 !important;
+    }
+}
+
+/* Text contrast and visibility fixes */
+.card {
+    background-color: #ffffff !important;
+    color: #212529 !important;
+}
+
+.card-header {
+    background-color: #f8f9fa !important;
+    color: #212529 !important;
+}
+
+.card-body {
+    background-color: #ffffff !important;
+    color: #212529 !important;
+}
+
+.card-footer {
+    background-color: #f8f9fa !important;
+    color: #212529 !important;
+}
+
+/* Ensure table text is visible */
+.table {
+    color: #212529 !important;
+}
+
+.table td, .table th {
+    color: #212529 !important;
+}
+
+/* Service detail page text fixes */
+.text-muted {
+    color: #6c757d !important;
+}
+
+/* Alert text visibility */
+.alert {
+    color: #212529 !important;
+}
+
+.alert-success {
+    background-color: #d4edda !important;
+    border-color: #c3e6cb !important;
+    color: #155724 !important;
+}
+
+.alert-warning {
+    background-color: #fff3cd !important;
+    border-color: #ffeaa7 !important;
+    color: #856404 !important;
+}
+
+.alert-danger {
+    background-color: #f8d7da !important;
+    border-color: #f5c6cb !important;
+    color: #721c24 !important;
+}
+
+.alert-info {
+    background-color: #d1ecf1 !important;
+    border-color: #bee5eb !important;
+    color: #0c5460 !important;
+}