Spaces:

SRVCP
/

assignment

Running

App Files Files Community

SRVCP commited on 24 days ago

Commit

d8b3608

verified ·

1 Parent(s): b74d1f5

Upload index.html

Browse files

Files changed (1) hide show

index.html +498 -1590

index.html CHANGED Viewed

@@ -1,1607 +1,515 @@
-<!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Traffic Violation Review System</title>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Sora:wght@300;400;600;700&display=swap');
-        :root {
-            /* Dark theme - industrial/utilitarian aesthetic */
-            --bg-primary: #0a0b0d;
-            --bg-secondary: #13151a;
-            --bg-tertiary: #1c1f26;
-            --bg-card: #1e2229;
-            --bg-elevated: #24272f;
-            /* Accent colors - high contrast for speed */
-            --accent-approve: #00ff88;
-            --accent-reject: #ff3366;
-            --accent-escalate: #ffaa00;
-            --accent-info: #00d4ff;
-            --accent-warning: #ff6b00;
-            /* Text */
-            --text-primary: #ffffff;
-            --text-secondary: #9ca3af;
-            --text-tertiary: #6b7280;
-            --text-dim: #4b5563;
-            /* Borders */
-            --border-subtle: rgba(255, 255, 255, 0.06);
-            --border-medium: rgba(255, 255, 255, 0.12);
-            --border-strong: rgba(255, 255, 255, 0.2);
-            /* Confidence indicators */
-            --confidence-high: #00ff88;
-            --confidence-medium: #ffaa00;
-            --confidence-low: #ff3366;
-            /* Shadows */
-            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
-            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
-            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
-            --shadow-glow: 0 0 24px rgba(0, 212, 255, 0.2);
-            /* Typography */
-            --font-display: 'Sora', sans-serif;
-            --font-mono: 'JetBrains Mono', monospace;
-            /* Transitions */
-            --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-            --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
-            --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: var(--font-display);
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            overflow: hidden;
-            height: 100vh;
-            position: relative;
-        }
-        /* Animated grid background */
-        body::before {
-            content: '';
-            position: fixed;
-            inset: 0;
-            background-image:
-                linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
-                linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
-            background-size: 40px 40px;
-            pointer-events: none;
-            animation: gridPulse 20s ease-in-out infinite;
-        }
-        @keyframes gridPulse {
-            0%, 100% { opacity: 0.3; }
-            50% { opacity: 0.6; }
-        }
-        /* Main container */
-        .review-container {
-            display: flex;
-            height: 100vh;
-            position: relative;
-            z-index: 1;
-        }
-        /* Left panel - Video and Evidence */
-        .evidence-panel {
-            flex: 1;
-            padding: 24px;
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-            overflow-y: auto;
-        }
-        /* Video card with swipe functionality */
-        .video-card {
-            position: relative;
-            border-radius: 16px;
-            overflow: hidden;
-            background: var(--bg-card);
-            border: 2px solid var(--border-medium);
-            box-shadow: var(--shadow-lg);
-            transition: all var(--transition-base);
-            cursor: grab;
-            user-select: none;
-        }
-        .video-card.dragging {
-            cursor: grabbing;
-            transform: scale(0.98);
-        }
-        .video-card.swipe-approve {
-            border-color: var(--accent-approve);
-            box-shadow: 0 0 40px rgba(0, 255, 136, 0.3);
-        }
-        .video-card.swipe-reject {
-            border-color: var(--accent-reject);
-            box-shadow: 0 0 40px rgba(255, 51, 102, 0.3);
-        }
-        .video-card.swipe-escalate {
-            border-color: var(--accent-escalate);
-            box-shadow: 0 0 40px rgba(255, 170, 0, 0.3);
-        }
-        .video-wrapper {
-            position: relative;
-            aspect-ratio: 16 / 9;
-            background: #000;
-        }
-        .video-player {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        /* Video overlay controls */
-        .video-overlay {
-            position: absolute;
-            inset: 0;
-            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 50%);
-            pointer-events: none;
-            opacity: 0;
-            transition: opacity var(--transition-fast);
-        }
-        .video-card:hover .video-overlay {
-            opacity: 1;
-        }
-        .video-controls {
-            position: absolute;
-            bottom: 16px;
-            left: 16px;
-            right: 16px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            pointer-events: all;
-        }
-        .control-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all var(--transition-fast);
-            color: white;
-        }
-        .control-btn:hover {
-            background: rgba(255, 255, 255, 0.2);
-            transform: scale(1.1);
-        }
-        .control-btn:active {
-            transform: scale(0.95);
-        }
-        .timeline {
-            flex: 1;
-            height: 4px;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 2px;
-            position: relative;
-            cursor: pointer;
-        }
-        .timeline-progress {
-            height: 100%;
-            background: var(--accent-info);
-            border-radius: 2px;
-            width: 0%;
-            transition: width 100ms linear;
-        }
-        .timeline-marker {
-            position: absolute;
-            top: -4px;
-            height: 12px;
-            width: 3px;
-            background: var(--accent-warning);
-            border-radius: 2px;
-            box-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
-        }
-        /* Confidence badge */
-        .confidence-badge {
-            position: absolute;
-            top: 16px;
-            right: 16px;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-size: 13px;
-            font-weight: 600;
-            font-family: var(--font-mono);
-            backdrop-filter: blur(10px);
-            border: 1px solid;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            animation: badgePulse 2s ease-in-out infinite;
-        }
-        @keyframes badgePulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-        }
-        .confidence-badge.high {
-            background: rgba(0, 255, 136, 0.15);
-            border-color: var(--confidence-high);
-            color: var(--confidence-high);
-        }
-        .confidence-badge.medium {
-            background: rgba(255, 170, 0, 0.15);
-            border-color: var(--confidence-medium);
-            color: var(--confidence-medium);
-        }
-        .confidence-badge.low {
-            background: rgba(255, 51, 102, 0.15);
-            border-color: var(--confidence-low);
-            color: var(--confidence-low);
-        }
-        .confidence-dot {
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: currentColor;
-            animation: dotPulse 1.5s ease-in-out infinite;
-        }
-        @keyframes dotPulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.4; }
-        }
-        /* Swipe direction hints */
-        .swipe-hint {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            font-size: 48px;
-            opacity: 0;
-            transition: opacity var(--transition-fast);
-            pointer-events: none;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 8px;
-        }
-        .swipe-hint-left {
-            left: 40px;
-        }
-        .swipe-hint-right {
-            right: 40px;
-        }
-        .swipe-hint-up {
-            top: 40px;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-        .swipe-hint span {
-            font-size: 14px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        .video-card.swipe-approve .swipe-hint-right {
-            opacity: 1;
-            color: var(--accent-approve);
-        }
-        .video-card.swipe-reject .swipe-hint-left {
-            opacity: 1;
-            color: var(--accent-reject);
-        }
-        .video-card.swipe-escalate .swipe-hint-up {
-            opacity: 1;
-            color: var(--accent-escalate);
-        }
-        /* Key frames section */
-        .keyframes-section {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 12px;
-        }
-        .keyframe {
-            position: relative;
-            aspect-ratio: 16 / 9;
-            border-radius: 12px;
-            overflow: hidden;
-            border: 2px solid var(--border-subtle);
-            cursor: pointer;
-            transition: all var(--transition-fast);
-            background: var(--bg-secondary);
-        }
-        .keyframe:hover {
-            border-color: var(--accent-info);
-            transform: scale(1.05);
-            box-shadow: var(--shadow-glow);
-        }
-        .keyframe.active {
-            border-color: var(--accent-info);
-            box-shadow: var(--shadow-glow);
-        }
-        .keyframe img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        .keyframe-step {
-            position: absolute;
-            top: 8px;
-            left: 8px;
-            width: 24px;
-            height: 24px;
-            border-radius: 50%;
-            background: var(--accent-info);
-            color: var(--bg-primary);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 12px;
-            font-weight: 700;
-            font-family: var(--font-mono);
-            box-shadow: 0 2px 8px rgba(0, 212, 255, 0.4);
-        }
-        .keyframe-pulse {
-            position: absolute;
-            inset: 0;
-            border-radius: 12px;
-            animation: framePulse 2s ease-in-out infinite;
-            pointer-events: none;
-        }
-        .keyframe.active .keyframe-pulse {
-            border: 2px solid var(--accent-info);
-        }
-        @keyframes framePulse {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.3; transform: scale(1.02); }
-        }
-        /* License plate card */
-        .license-plate-card {
-            background: var(--bg-card);
-            border: 2px solid var(--border-medium);
-            border-radius: 12px;
-            padding: 20px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            box-shadow: var(--shadow-md);
-        }
-        .plate-display {
-            flex: 1;
-        }
-        .plate-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-bottom: 8px;
-        }
-        .plate-number {
-            font-size: 32px;
-            font-weight: 700;
-            font-family: var(--font-mono);
-            letter-spacing: 4px;
-            color: var(--text-primary);
-            text-transform: uppercase;
-        }
-        .plate-confidence {
-            text-align: right;
-        }
-        .plate-confidence-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-bottom: 8px;
-        }
-        .plate-confidence-value {
-            font-size: 28px;
-            font-weight: 700;
-            font-family: var(--font-mono);
-        }
-        /* Right panel - Context and Actions */
-        .action-panel {
-            width: 420px;
-            background: var(--bg-secondary);
-            border-left: 1px solid var(--border-medium);
-            display: flex;
-            flex-direction: column;
-            overflow-y: auto;
-        }
-        /* Violation info header */
-        .violation-header {
-            padding: 24px;
-            background: var(--bg-card);
-            border-bottom: 1px solid var(--border-medium);
-        }
-        .violation-type {
-            font-size: 20px;
-            font-weight: 700;
-            color: var(--text-primary);
-            margin-bottom: 8px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-        .violation-meta {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-        .violation-meta-item {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .meta-icon {
-            width: 16px;
-            height: 16px;
-            opacity: 0.6;
-        }
-        /* Context section */
-        .context-section {
-            padding: 20px 24px;
-        }
-        .context-toggle {
-            width: 100%;
-            background: var(--bg-elevated);
-            border: 1px solid var(--border-subtle);
-            border-radius: 10px;
-            padding: 16px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            cursor: pointer;
-            transition: all var(--transition-fast);
-            color: var(--text-primary);
-            font-size: 14px;
-            font-weight: 600;
-        }
-        .context-toggle:hover {
-            background: var(--bg-card);
-            border-color: var(--border-medium);
-        }
-        .context-toggle.active {
-            border-color: var(--accent-info);
-            background: rgba(0, 212, 255, 0.05);
-        }
-        .context-content {
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height var(--transition-slow);
-        }
-        .context-content.expanded {
-            max-height: 500px;
-        }
-        .context-grid {
-            display: grid;
-            gap: 12px;
-            padding: 16px 0 0;
-        }
-        .context-item {
-            display: flex;
-            justify-content: space-between;
-            padding: 12px;
-            background: var(--bg-tertiary);
-            border-radius: 8px;
-            border: 1px solid var(--border-subtle);
-        }
-        .context-label {
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-        .context-value {
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--text-primary);
-            font-family: var(--font-mono);
-        }
-        .context-alert {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 12px;
-            background: rgba(255, 170, 0, 0.1);
-            border: 1px solid var(--accent-warning);
-            border-radius: 8px;
-            color: var(--accent-warning);
-            font-size: 13px;
-        }
-        /* Notes section */
-        .notes-section {
-            padding: 20px 24px;
-            flex: 1;
-        }
-        .notes-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 12px;
-        }
-        .notes-label {
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-        .voice-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            border: none;
-            background: var(--accent-info);
-            color: var(--bg-primary);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all var(--transition-fast);
-        }
-        .voice-btn:hover {
-            transform: scale(1.1);
-            box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
-        }
-        .voice-btn.recording {
-            background: var(--accent-reject);
-            animation: recording-pulse 1s ease-in-out infinite;
-        }
-        @keyframes recording-pulse {
-            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.7); }
-            50% { box-shadow: 0 0 0 10px rgba(255, 51, 102, 0); }
-        }
-        .notes-textarea {
-            width: 100%;
-            min-height: 120px;
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border-subtle);
-            border-radius: 10px;
-            padding: 14px;
-            color: var(--text-primary);
-            font-size: 14px;
-            font-family: var(--font-display);
-            resize: vertical;
-            transition: all var(--transition-fast);
-        }
-        .notes-textarea:focus {
-            outline: none;
-            border-color: var(--accent-info);
-            background: var(--bg-card);
-        }
-        .recording-indicator {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-top: 8px;
-            color: var(--accent-reject);
-            font-size: 13px;
-            font-weight: 600;
-        }
-        .recording-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: var(--accent-reject);
-            animation: dotPulse 1s ease-in-out infinite;
-        }
-        /* Decision buttons */
-        .decision-section {
-            padding: 24px;
-            background: var(--bg-card);
-            border-top: 1px solid var(--border-medium);
-        }
-        .decision-btn {
-            width: 100%;
-            padding: 18px;
-            border: none;
-            border-radius: 12px;
-            font-size: 16px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            cursor: pointer;
-            transition: all var(--transition-fast);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            margin-bottom: 12px;
-            position: relative;
-            overflow: hidden;
-            font-family: var(--font-display);
-        }
-        .decision-btn::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
-            transform: translateX(-100%);
-            transition: transform 0.6s;
-        }
-        .decision-btn:hover::before {
-            transform: translateX(100%);
-        }
-        .decision-btn:active {
-            transform: scale(0.97);
-        }
-        .btn-approve {
-            background: var(--accent-approve);
-            color: var(--bg-primary);
-            box-shadow: 0 4px 16px rgba(0, 255, 136, 0.3);
-        }
-        .btn-approve:hover {
-            background: #00dd77;
-            box-shadow: 0 6px 24px rgba(0, 255, 136, 0.5);
-        }
-        .btn-reject {
-            background: var(--accent-reject);
-            color: white;
-            box-shadow: 0 4px 16px rgba(255, 51, 102, 0.3);
-        }
-        .btn-reject:hover {
-            background: #ee2255;
-            box-shadow: 0 6px 24px rgba(255, 51, 102, 0.5);
-        }
-        .btn-escalate {
-            background: var(--accent-escalate);
-            color: var(--bg-primary);
-            box-shadow: 0 4px 16px rgba(255, 170, 0, 0.3);
-        }
-        .btn-escalate:hover {
-            background: #ee9900;
-            box-shadow: 0 6px 24px rgba(255, 170, 0, 0.5);
-        }
-        .btn-shortcut {
-            font-size: 11px;
-            opacity: 0.7;
-            font-weight: 400;
-            letter-spacing: 0.5px;
-        }
-        /* Keyboard shortcuts help */
-        .shortcuts-help {
-            margin-top: 12px;
-            padding: 16px;
-            background: rgba(255, 255, 255, 0.02);
-            border: 1px solid var(--border-subtle);
-            border-radius: 10px;
-        }
-        .shortcuts-title {
-            font-size: 12px;
-            font-weight: 600;
-            color: var(--text-secondary);
-            margin-bottom: 10px;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        .shortcuts-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 8px;
-            font-size: 12px;
-            color: var(--text-tertiary);
-        }
-        .shortcut-item {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-        .shortcut-key {
-            padding: 2px 6px;
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border-subtle);
-            border-radius: 4px;
-            font-family: var(--font-mono);
-            font-size: 11px;
-            font-weight: 600;
-            color: var(--text-secondary);
-        }
-        /* Progress indicator */
-        .progress-bar {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 3px;
-            background: var(--bg-secondary);
-            z-index: 1000;
-        }
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, var(--accent-info), var(--accent-approve));
-            width: 0%;
-            transition: width var(--transition-slow);
-        }
-        /* Stats overlay */
-        .stats-overlay {
-            position: fixed;
-            top: 24px;
-            left: 24px;
-            background: rgba(0, 0, 0, 0.8);
-            backdrop-filter: blur(20px);
-            border: 1px solid var(--border-medium);
-            border-radius: 12px;
-            padding: 16px 20px;
-            display: flex;
-            gap: 24px;
-            z-index: 100;
-            box-shadow: var(--shadow-lg);
-        }
-        .stat-item {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-        .stat-label {
-            font-size: 11px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        .stat-value {
-            font-size: 20px;
-            font-weight: 700;
-            font-family: var(--font-mono);
-            color: var(--text-primary);
-        }
-        .stat-value.highlight {
-            color: var(--accent-info);
-        }
-        /* Review timer */
-        .review-timer {
-            position: fixed;
-            bottom: 24px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(0, 0, 0, 0.9);
-            backdrop-filter: blur(20px);
-            border: 2px solid var(--border-medium);
-            border-radius: 30px;
-            padding: 12px 24px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            z-index: 100;
-            box-shadow: var(--shadow-lg);
-        }
-        .timer-icon {
-            width: 20px;
-            height: 20px;
-            color: var(--accent-info);
-        }
-        .timer-value {
-            font-size: 24px;
-            font-weight: 700;
-            font-family: var(--font-mono);
-            color: var(--text-primary);
-            min-width: 80px;
-            text-align: center;
-        }
-        .timer-value.warning {
-            color: var(--accent-warning);
-        }
-        .timer-value.danger {
-            color: var(--accent-reject);
-            animation: timerBlink 1s ease-in-out infinite;
-        }
-        @keyframes timerBlink {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
-        }
-        .timer-target {
-            font-size: 12px;
-            color: var(--text-tertiary);
-            font-weight: 500;
-        }
-        /* Success/completion animation */
-        .completion-overlay {
-            position: fixed;
-            inset: 0;
-            background: rgba(0, 0, 0, 0.95);
-            display: none;
-            align-items: center;
-            justify-content: center;
-            z-index: 2000;
-            animation: fadeIn var(--transition-base);
-        }
-        .completion-overlay.show {
-            display: flex;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-        .completion-content {
-            text-align: center;
-            animation: scaleIn var(--transition-slow);
-        }
-        @keyframes scaleIn {
-            from { transform: scale(0.8); opacity: 0; }
-            to { transform: scale(1); opacity: 1; }
-        }
-        .completion-icon {
-            font-size: 80px;
-            margin-bottom: 20px;
-        }
-        .completion-title {
-            font-size: 32px;
-            font-weight: 700;
-            margin-bottom: 12px;
-        }
-        .completion-subtitle {
-            font-size: 18px;
-            color: var(--text-secondary);
-            margin-bottom: 32px;
-        }
-        .completion-stats {
-            display: flex;
-            gap: 40px;
-            justify-content: center;
-            margin-bottom: 32px;
-        }
-        .completion-stat {
-            text-align: center;
-        }
-        .completion-stat-value {
-            font-size: 36px;
-            font-weight: 700;
-            font-family: var(--font-mono);
-            margin-bottom: 8px;
-        }
-        .completion-stat-label {
-            font-size: 13px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        .next-case-btn {
-            padding: 18px 36px;
-            background: var(--accent-info);
-            border: none;
-            border-radius: 12px;
-            color: var(--bg-primary);
-            font-size: 16px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            cursor: pointer;
-            transition: all var(--transition-fast);
-            font-family: var(--font-display);
-        }
-        .next-case-btn:hover {
-            background: #00bbee;
-            transform: translateY(-2px);
-            box-shadow: 0 8px 24px rgba(0, 212, 255, 0.4);
-        }
-        /* Scrollbar styling */
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: var(--bg-primary);
-        }
-        ::-webkit-scrollbar-thumb {
-            background: var(--border-strong);
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--border-medium);
-        }
-    </style>
 </head>
 <body>
-    <!-- Progress bar -->
-    <div class="progress-bar">
-        <div class="progress-fill" id="progressFill"></div>
     </div>
-    <!-- Stats overlay -->
-    <div class="stats-overlay">
-        <div class="stat-item">
-            <div class="stat-label">Reviewed Today</div>
-            <div class="stat-value" id="reviewedCount">127</div>
         </div>
-        <div class="stat-item">
-            <div class="stat-label">Avg Time</div>
-            <div class="stat-value highlight" id="avgTime">8.4s</div>
         </div>
-        <div class="stat-item">
-            <div class="stat-label">Remaining</div>
-            <div class="stat-value" id="remainingCount">43</div>
         </div>
     </div>
-    <!-- Review timer -->
-    <div class="review-timer">
-        <svg class="timer-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
-        </svg>
-        <div class="timer-value" id="timerValue">00.0s</div>
-        <div class="timer-target">Target: <10s</div>
     </div>
-    <!-- Main review container -->
-    <div class="review-container">
-        <!-- Left panel -->
-        <div class="evidence-panel">
-            <!-- Video card with swipe -->
-            <div class="video-card" id="videoCard">
-                <div class="video-wrapper">
-                    <video class="video-player" id="videoPlayer" loop>
-                        <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
-                    </video>
-                    <div class="video-overlay">
-                        <div class="video-controls">
-                            <button class="control-btn" id="playPauseBtn">
-                                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
-                                    <path d="M8 5v14l11-7z"/>
-                                </svg>
-                            </button>
-                            <div class="timeline" id="timeline">
-                                <div class="timeline-progress" id="timelineProgress"></div>
-                                <div class="timeline-marker" style="left: 35%;"></div>
-                            </div>
-                            <button class="control-btn" id="muteBtn">
-                                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
-                                    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                    <div class="confidence-badge high" id="confidenceBadge">
-                        <span class="confidence-dot"></span>
-                        <span id="confidenceText">94.2%</span>
-                    </div>
-                    <!-- Swipe hints -->
-                    <div class="swipe-hint swipe-hint-left">
-                        ✕<br><span>Reject</span>
-                    </div>
-                    <div class="swipe-hint swipe-hint-right">
-                        ✓<br><span>Approve</span>
-                    </div>
-                    <div class="swipe-hint swipe-hint-up">
-                        ⬆<br><span>Escalate</span>
-                    </div>
-                </div>
-            </div>
-            <!-- Key frames -->
-            <div class="keyframes-section">
-                <div class="keyframe active">
-                    <img src="https://placehold.co/320x180/1a1a2e/00ff88?text=Frame+1" alt="Key frame 1">
-                    <div class="keyframe-step">1</div>
-                    <div class="keyframe-pulse"></div>
-                </div>
-                <div class="keyframe">
-                    <img src="https://placehold.co/320x180/1a1a2e/ffaa00?text=Violation" alt="Key frame 2">
-                    <div class="keyframe-step">2</div>
-                </div>
-                <div class="keyframe">
-                    <img src="https://placehold.co/320x180/1a1a2e/ff3366?text=License" alt="Key frame 3">
-                    <div class="keyframe-step">3</div>
-                </div>
-                <div class="keyframe">
-                    <img src="https://placehold.co/320x180/1a1a2e/00d4ff?text=Context" alt="Key frame 4">
-                    <div class="keyframe-step">4</div>
-                </div>
-            </div>
-            <!-- License plate -->
-            <div class="license-plate-card">
-                <div class="plate-display">
-                    <div class="plate-label">License Plate</div>
-                    <div class="plate-number" id="plateNumber">MH 02 AB 1234</div>
-                </div>
-                <div class="plate-confidence">
-                    <div class="plate-confidence-label">OCR Confidence</div>
-                    <div class="plate-confidence-value" style="color: var(--confidence-high);" id="plateConfidence">97.8%</div>
-                </div>
-            </div>
         </div>
-        <!-- Right panel -->
-        <div class="action-panel">
-            <!-- Violation header -->
-            <div class="violation-header">
-                <div class="violation-type" id="violationType">Red Light Running</div>
-                <div class="violation-meta">
-                    <div class="violation-meta-item">
-                        <svg class="meta-icon" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
-                        </svg>
-                        <span id="location">MG Road Junction, Bangalore</span>
-                    </div>
-                    <div class="violation-meta-item">
-                        <svg class="meta-icon" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
-                        </svg>
-                        <span id="timestamp">Today, 14:23:45</span>
-                    </div>
-                    <div class="violation-meta-item">
-                        <svg class="meta-icon" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M12 2C8.13 2 5 5.13 5 9c0 2.38 2.19 5.44 5 9.88 2.81-4.44 5-7.5 5-9.88 0-3.87-3.13-7-7-7z"/>
-                        </svg>
-                        <span id="camera">Camera: CAM_BLR_001</span>
-                    </div>
-                </div>
-            </div>
-            <!-- Context section -->
-            <div class="context-section">
-                <button class="context-toggle" id="contextToggle">
-                    <span>Contextual Factors</span>
-                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" id="contextIcon">
-                        <path d="M7 10l5 5 5-5z"/>
-                    </svg>
-                </button>
-                <div class="context-content" id="contextContent">
-                    <div class="context-grid">
-                        <div class="context-item">
-                            <span class="context-label">Weather</span>
-                            <span class="context-value">Clear</span>
-                        </div>
-                        <div class="context-item">
-                            <span class="context-label">Visibility</span>
-                            <span class="context-value">5000m</span>
-                        </div>
-                        <div class="context-item">
-                            <span class="context-label">Traffic Density</span>
-                            <span class="context-value">Moderate</span>
-                        </div>
-                        <div class="context-item">
-                            <span class="context-label">Time of Day</span>
-                            <span class="context-value">Afternoon</span>
-                        </div>
-                        <div class="context-alert">
-                            <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
-                            </svg>
-                            <span>Road construction nearby</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- Notes section -->
-            <div class="notes-section">
-                <div class="notes-header">
-                    <div class="notes-label">Notes</div>
-                    <button class="voice-btn" id="voiceBtn">
-                        <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
-                            <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
-                        </svg>
-                    </button>
-                </div>
-                <textarea class="notes-textarea" id="notesTextarea" placeholder="Add notes or use voice recording..."></textarea>
-                <div class="recording-indicator" id="recordingIndicator" style="display: none;">
-                    <span class="recording-dot"></span>
-                    <span>Recording...</span>
-                </div>
-            </div>
-            <!-- Decision buttons -->
-            <div class="decision-section">
-                <button class="decision-btn btn-approve" id="approveBtn">
-                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
-                    </svg>
-                    <span>Approve Citation</span>
-                    <span class="btn-shortcut">→ or D</span>
-                </button>
-                <button class="decision-btn btn-reject" id="rejectBtn">
-                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-                    </svg>
-                    <span>Dismiss</span>
-                    <span class="btn-shortcut">← or A</span>
-                </button>
-                <button class="decision-btn btn-escalate" id="escalateBtn">
-                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
-                    </svg>
-                    <span>Escalate to Senior</span>
-                    <span class="btn-shortcut">↑ or W</span>
-                </button>
-                <!-- Keyboard shortcuts -->
-                <div class="shortcuts-help">
-                    <div class="shortcuts-title">Keyboard Shortcuts</div>
-                    <div class="shortcuts-grid">
-                        <div class="shortcut-item">
-                            <span class="shortcut-key">Space</span>
-                            <span>Play/Pause</span>
-                        </div>
-                        <div class="shortcut-item">
-                            <span class="shortcut-key">M</span>
-                            <span>Mute</span>
-                        </div>
-                        <div class="shortcut-item">
-                            <span class="shortcut-key">→</span>
-                            <span>Approve</span>
-                        </div>
-                        <div class="shortcut-item">
-                            <span class="shortcut-key">←</span>
-                            <span>Reject</span>
-                        </div>
-                        <div class="shortcut-item">
-                            <span class="shortcut-key">↑</span>
-                            <span>Escalate</span>
-                        </div>
-                        <div class="shortcut-item">
-                            <span class="shortcut-key">C</span>
-                            <span>Context</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
-    <!-- Completion overlay -->
-    <div class="completion-overlay" id="completionOverlay">
-        <div class="completion-content">
-            <div class="completion-icon" id="completionIcon">✓</div>
-            <div class="completion-title" id="completionTitle">Citation Approved</div>
-            <div class="completion-subtitle">Review completed successfully</div>
-            <div class="completion-stats">
-                <div class="completion-stat">
-                    <div class="completion-stat-value" id="reviewTime">7.2s</div>
-                    <div class="completion-stat-label">Review Time</div>
-                </div>
-                <div class="completion-stat">
-                    <div class="completion-stat-value" id="sessionCount">128</div>
-                    <div class="completion-stat-label">Session Total</div>
-                </div>
-            </div>
-            <button class="next-case-btn" id="nextCaseBtn">Next Case →</button>
         </div>
     </div>
-    <script>
-        // State
-        let reviewStartTime = Date.now();
-        let isRecording = false;
-        let isDragging = false;
-        let startX = 0;
-        let startY = 0;
-        let currentX = 0;
-        let currentY = 0;
-        let reviewedToday = 127;
-        let avgReviewTime = 8.4;
-        let remainingCases = 43;
-        // Elements
-        const videoCard = document.getElementById('videoCard');
-        const videoPlayer = document.getElementById('videoPlayer');
-        const playPauseBtn = document.getElementById('playPauseBtn');
-        const muteBtn = document.getElementById('muteBtn');
-        const timeline = document.getElementById('timeline');
-        const timelineProgress = document.getElementById('timelineProgress');
-        const contextToggle = document.getElementById('contextToggle');
-        const contextContent = document.getElementById('contextContent');
-        const contextIcon = document.getElementById('contextIcon');
-        const voiceBtn = document.getElementById('voiceBtn');
-        const recordingIndicator = document.getElementById('recordingIndicator');
-        const approveBtn = document.getElementById('approveBtn');
-        const rejectBtn = document.getElementById('rejectBtn');
-        const escalateBtn = document.getElementById('escalateBtn');
-        const timerValue = document.getElementById('timerValue');
-        const completionOverlay = document.getElementById('completionOverlay');
-        const nextCaseBtn = document.getElementById('nextCaseBtn');
-        // Timer update
-        function updateTimer() {
-            const elapsed = (Date.now() - reviewStartTime) / 1000;
-            timerValue.textContent = elapsed.toFixed(1) + 's';
-            if (elapsed < 10) {
-                timerValue.className = 'timer-value';
-            } else if (elapsed < 15) {
-                timerValue.className = 'timer-value warning';
-            } else {
-                timerValue.className = 'timer-value danger';
-            }
-        }
-        setInterval(updateTimer, 100);
-        // Video controls
-        playPauseBtn.addEventListener('click', () => {
-            if (videoPlayer.paused) {
-                videoPlayer.play();
-                playPauseBtn.innerHTML = '<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>';
-            } else {
-                videoPlayer.pause();
-                playPauseBtn.innerHTML = '<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>';
-            }
-        });
-        muteBtn.addEventListener('click', () => {
-            videoPlayer.muted = !videoPlayer.muted;
-            if (videoPlayer.muted) {
-                muteBtn.innerHTML = '<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>';
-            } else {
-                muteBtn.innerHTML = '<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>';
-            }
-        });
-        videoPlayer.addEventListener('timeupdate', () => {
-            const progress = (videoPlayer.currentTime / videoPlayer.duration) * 100;
-            timelineProgress.style.width = progress + '%';
-        });
-        timeline.addEventListener('click', (e) => {
-            const rect = timeline.getBoundingClientRect();
-            const pos = (e.clientX - rect.left) / rect.width;
-            videoPlayer.currentTime = pos * videoPlayer.duration;
-        });
-        // Auto-play video
-        videoPlayer.play();
-        // Context toggle
-        contextToggle.addEventListener('click', () => {
-            const isExpanded = contextContent.classList.toggle('expanded');
-            contextToggle.classList.toggle('active');
-            contextIcon.style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
-        });
-        // Voice recording
-        voiceBtn.addEventListener('click', () => {
-            isRecording = !isRecording;
-            voiceBtn.classList.toggle('recording', isRecording);
-            recordingIndicator.style.display = isRecording ? 'flex' : 'none';
-            if (isRecording) {
-                // Simulate recording
-                setTimeout(() => {
-                    const note = document.getElementById('notesTextarea');
-                    note.value += (note.value ? '\n' : '') + '[Voice note recorded at ' + new Date().toLocaleTimeString() + ']';
-                    voiceBtn.classList.remove('recording');
-                    recordingIndicator.style.display = 'none';
-                    isRecording = false;
-                }, 3000);
-            }
-        });
-        // Swipe gesture
-        let swipeStartX = 0;
-        let swipeStartY = 0;
-        videoCard.addEventListener('mousedown', (e) => {
-            isDragging = true;
-            swipeStartX = e.clientX;
-            swipeStartY = e.clientY;
-            videoCard.classList.add('dragging');
-        });
-        document.addEventListener('mousemove', (e) => {
-            if (!isDragging) return;
-            const deltaX = e.clientX - swipeStartX;
-            const deltaY = e.clientY - swipeStartY;
-            videoCard.style.transform = `translateX(${deltaX}px) translateY(${deltaY}px) rotate(${deltaX * 0.05}deg)`;
-            // Visual feedback
-            if (deltaX > 100) {
-                videoCard.className = 'video-card dragging swipe-approve';
-            } else if (deltaX < -100) {
-                videoCard.className = 'video-card dragging swipe-reject';
-            } else if (deltaY < -100) {
-                videoCard.className = 'video-card dragging swipe-escalate';
-            } else {
-                videoCard.className = 'video-card dragging';
-            }
-        });
-        document.addEventListener('mouseup', (e) => {
-            if (!isDragging) return;
-            const deltaX = e.clientX - swipeStartX;
-            const deltaY = e.clientY - swipeStartY;
-            if (deltaX > 150) {
-                handleDecision('approve');
-            } else if (deltaX < -150) {
-                handleDecision('reject');
-            } else if (deltaY < -150) {
-                handleDecision('escalate');
-            } else {
-                videoCard.style.transform = '';
-                videoCard.className = 'video-card';
-            }
-            isDragging = false;
-        });
-        // Touch support
-        videoCard.addEventListener('touchstart', (e) => {
-            swipeStartX = e.touches[0].clientX;
-            swipeStartY = e.touches[0].clientY;
-            videoCard.classList.add('dragging');
-        });
-        videoCard.addEventListener('touchmove', (e) => {
-            const deltaX = e.touches[0].clientX - swipeStartX;
-            const deltaY = e.touches[0].clientY - swipeStartY;
-            videoCard.style.transform = `translateX(${deltaX}px) translateY(${deltaY}px) rotate(${deltaX * 0.05}deg)`;
-            if (deltaX > 100) {
-                videoCard.className = 'video-card dragging swipe-approve';
-            } else if (deltaX < -100) {
-                videoCard.className = 'video-card dragging swipe-reject';
-            } else if (deltaY < -100) {
-                videoCard.className = 'video-card dragging swipe-escalate';
-            } else {
-                videoCard.className = 'video-card dragging';
-            }
-        });
-        videoCard.addEventListener('touchend', (e) => {
-            const touch = e.changedTouches[0];
-            const deltaX = touch.clientX - swipeStartX;
-            const deltaY = touch.clientY - swipeStartY;
-            if (deltaX > 150) {
-                handleDecision('approve');
-            } else if (deltaX < -150) {
-                handleDecision('reject');
-            } else if (deltaY < -150) {
-                handleDecision('escalate');
-            } else {
-                videoCard.style.transform = '';
-                videoCard.className = 'video-card';
-            }
-        });
-        // Decision handlers
-        function handleDecision(decision) {
-            const reviewTime = ((Date.now() - reviewStartTime) / 1000).toFixed(1);
-            // Update stats
-            reviewedToday++;
-            remainingCases--;
-            avgReviewTime = ((avgReviewTime * (reviewedToday - 1)) + parseFloat(reviewTime)) / reviewedToday;
-            document.getElementById('reviewedCount').textContent = reviewedToday;
-            document.getElementById('avgTime').textContent = avgReviewTime.toFixed(1) + 's';
-            document.getElementById('remainingCount').textContent = remainingCases;
-            // Update progress
-            const progress = (reviewedToday / (reviewedToday + remainingCases)) * 100;
-            document.getElementById('progressFill').style.width = progress + '%';
-            // Show completion overlay
-            const icons = {
-                approve: '✓',
-                reject: '✕',
-                escalate: '⬆'
-            };
-            const titles = {
-                approve: 'Citation Approved',
-                reject: 'Citation Dismissed',
-                escalate: 'Escalated to Senior Review'
-            };
-            const colors = {
-                approve: 'var(--accent-approve)',
-                reject: 'var(--accent-reject)',
-                escalate: 'var(--accent-escalate)'
-            };
-            document.getElementById('completionIcon').textContent = icons[decision];
-            document.getElementById('completionIcon').style.color = colors[decision];
-            document.getElementById('completionTitle').textContent = titles[decision];
-            document.getElementById('reviewTime').textContent = reviewTime + 's';
-            document.getElementById('sessionCount').textContent = reviewedToday;
-            completionOverlay.classList.add('show');
-            // Reset card position
-            setTimeout(() => {
-                videoCard.style.transform = '';
-                videoCard.className = 'video-card';
-            }, 300);
-        }
-        approveBtn.addEventListener('click', () => handleDecision('approve'));
-        rejectBtn.addEventListener('click', () => handleDecision('reject'));
-        escalateBtn.addEventListener('click', () => handleDecision('escalate'));
-        // Next case
-        nextCaseBtn.addEventListener('click', () => {
-            completionOverlay.classList.remove('show');
-            reviewStartTime = Date.now();
-            // Load next case (simulated)
-            videoPlayer.currentTime = 0;
-            videoPlayer.play();
-            // Clear notes
-            document.getElementById('notesTextarea').value = '';
-        });
-        // Keyboard shortcuts
-        document.addEventListener('keydown', (e) => {
-            if (e.target.tagName === 'TEXTAREA') return;
-            switch(e.key.toLowerCase()) {
-                case 'arrowright':
-                case 'd':
-                    e.preventDefault();
-                    handleDecision('approve');
-                    break;
-                case 'arrowleft':
-                case 'a':
-                    e.preventDefault();
-                    handleDecision('reject');
-                    break;
-                case 'arrowup':
-                case 'w':
-                    e.preventDefault();
-                    handleDecision('escalate');
-                    break;
-                case ' ':
-                    e.preventDefault();
-                    playPauseBtn.click();
-                    break;
-                case 'm':
-                    e.preventDefault();
-                    muteBtn.click();
-                    break;
-                case 'c':
-                    e.preventDefault();
-                    contextToggle.click();
-                    break;
-            }
-        });
-        // Key frame navigation
-        document.querySelectorAll('.keyframe').forEach((frame, index) => {
-            frame.addEventListener('click', () => {
-                document.querySelectorAll('.keyframe').forEach(f => f.classList.remove('active'));
-                frame.classList.add('active');
-                // Simulate jumping to that frame in video
-                videoPlayer.currentTime = (index / 4) * videoPlayer.duration;
-            });
-        });
-    </script>
 </body>
-</html>

+<!doctype html>
 <html lang="en">
 <head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>TrafficAI Review System Prototype</title>
+<style>
+  :root{
+    --bg:#06111f;
+    --panel:#0d1a2b;
+    --panel2:#111d31;
+    --line:#22314a;
+    --text:#f6f7fb;
+    --sub:#9fb0c8;
+    --orange:#ff7a14;
+    --green:#22c55e;
+    --blue:#4688ff;
+    --purple:#8b5cf6;
+    --yellow:#f7c948;
+    --red:#ef4444;
+  }
+  *{box-sizing:border-box}
+  body{
+    margin:0;
+    font-family:Inter, Segoe UI, system-ui, -apple-system, sans-serif;
+    background: radial-gradient(circle at top right, #112342 0%, var(--bg) 42%);
+    color:var(--text);
+  }
+  .hidden{display:none !important}
+  .app{min-height:100vh;padding:20px}
+  .card, .panel{
+    background:linear-gradient(180deg, rgba(17,29,49,.95), rgba(10,18,31,.98));
+    border:1px solid var(--line);
+    border-radius:18px;
+    box-shadow:0 12px 32px rgba(0,0,0,.28);
+  }
+  .topbar{
+    display:flex;align-items:center;justify-content:space-between;
+    padding:16px 22px;margin-bottom:18px
+  }
+  .brand{display:flex;align-items:center;gap:14px}
+  .logo{width:42px;height:42px;border-radius:12px;background:var(--orange);display:grid;place-items:center;font-size:18px;font-weight:700}
+  .brand h1{font-size:18px;margin:0}
+  .brand p{margin:2px 0 0;color:var(--sub);font-size:13px}
+  .user-badge{display:flex;align-items:center;gap:14px}
+  .avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3654ff,#8b5cf6);font-weight:700}
+  .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
+  .metric{padding:20px 22px;position:relative;overflow:hidden}
+  .metric .accent{position:absolute;inset:0 auto 0 0;width:4px;background:var(--orange);opacity:.95}
+  .metric.green .accent{background:var(--green)} .metric.blue .accent{background:var(--blue)} .metric.purple .accent{background:var(--purple)}
+  .metric h3{margin:0 0 10px;color:#b7c4d9;font-size:14px;font-weight:600}
+  .metric .value{font-size:36px;font-weight:800;line-height:1}
+  .metric .note{font-size:13px;color:var(--sub);margin-top:8px}
+  .searchbar, .triage{padding:16px 18px;margin-bottom:18px}
+  .searchbar input{
+    width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);
+    background:#07131f;color:var(--text);font-size:15px;outline:none
+  }
+  .section-title{font-size:18px;font-weight:700;margin:4px 0 14px}
+  .triage-grid, .violations{display:grid;gap:16px}
+  .triage-grid{grid-template-columns:repeat(3,1fr)}
+  .lane{padding:18px;border-radius:16px;border:1px solid var(--line);background:rgba(8,17,31,.7)}
+  .lane h4{margin:0 0 8px;font-size:16px}
+  .lane p{margin:0;color:var(--sub);font-size:13px;line-height:1.4}
+  .lane.fast{border-color:rgba(34,197,94,.5)} .lane.standard{border-color:rgba(70,136,255,.5)} .lane.exception{border-color:rgba(255,122,20,.5)}
+  .violations{grid-template-columns:repeat(4,1fr)}
+  .violation-card{padding:20px;cursor:pointer;transition:.2s transform,.2s border-color}
+  .violation-card:hover{transform:translateY(-2px);border-color:rgba(255,122,20,.45)}
+  .violation-card h4{margin:0 0 8px;font-size:18px}
+  .violation-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--sub);margin:10px 0}
+  .badge{padding:6px 10px;border-radius:10px;border:1px solid var(--line);font-size:12px;background:rgba(255,255,255,.03);display:inline-flex;gap:6px;align-items:center}
+  .bar{height:8px;border-radius:999px;background:#1b2d46;overflow:hidden}
+  .bar > span{display:block;height:100%;background:var(--orange);border-radius:inherit}
+  .login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
+  .login{width:min(420px,92vw);padding:24px}
+  .login .brand{margin-bottom:18px}
+  label{display:block;color:#b7c4d9;font-size:13px;margin:12px 0 6px}
+  input, textarea{
+    width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);
+    background:#08131f;color:var(--text);outline:none;font-size:14px
+  }
+  .btn{padding:14px 18px;border:none;border-radius:14px;background:var(--orange);color:white;font-weight:700;cursor:pointer;font-size:14px}
+  .btn.secondary{background:transparent;border:1px solid var(--line);color:var(--text)}
+  .dashboard-shell,.review-shell{max-width:1440px;margin:0 auto}
+  .review-toolbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;margin-bottom:18px}
+  .review-toolbar .left{display:flex;align-items:center;gap:18px}
+  .back{cursor:pointer;color:var(--sub)}
+  .review-toolbar h2{font-size:22px;margin:0}
+  .review-toolbar p{margin:2px 0 0;color:var(--sub);font-size:13px}
+  .stats{display:flex;gap:24px;align-items:center;font-size:13px;color:var(--sub)}
+  .stats strong{display:block;color:var(--text);font-size:16px}
+  .progress{width:140px;height:10px;background:#1a2a42;border-radius:999px;overflow:hidden}
+  .progress span{display:block;height:100%;width:2%;background:linear-gradient(90deg,var(--orange),#ffc56e)}
+  .review-grid{display:grid;grid-template-columns:1.55fr .72fr .72fr;gap:18px}
+  .review-col{padding:18px}
+  .chips{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
+  .chip{padding:6px 10px;border-radius:10px;font-size:12px;font-weight:600}
+  .chip.blue{background:rgba(70,136,255,.18);color:#87b0ff;border:1px solid rgba(70,136,255,.35)}
+  .chip.purple{background:rgba(139,92,246,.18);color:#c1a9ff;border:1px solid rgba(139,92,246,.35)}
+  .video-box{height:360px;border-radius:18px;background:linear-gradient(180deg,#3567e8 0%,#2d58c4 60%,#1e3f95 100%);display:grid;place-items:center;font-size:110px;font-weight:800;letter-spacing:-2px;position:relative;overflow:hidden}
+  .video-box:before{content:"";position:absolute;inset:auto 0 0 0;height:92px;background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45));}
+  .playbar{display:flex;align-items:center;gap:14px;padding:14px 10px 2px;color:white;font-size:13px}
+  .playline{flex:1;height:5px;background:rgba(255,255,255,.28);border-radius:999px;overflow:hidden}
+  .playline span{display:block;width:33%;height:100%;background:var(--orange)}
+  .meta-list{display:grid;gap:10px;margin-top:14px;color:#d8e0ee}
+  .meta-item{display:flex;gap:10px;align-items:center;font-size:15px}
+  .evidence-card{padding:14px;border-radius:16px;background:#0a1323;border:1px solid var(--line);margin-bottom:12px}
+  .event-thumb{height:160px;border-radius:14px;background:linear-gradient(180deg,#20293b,#181f2e);display:grid;place-items:center;font-size:42px;font-weight:700}
+  .event-thumb.red{background:#e31f25}
+  .event-thumb.blue{background:linear-gradient(180deg,#4d73d6,#4065c6)}
+  .evidence-title{font-size:15px;font-weight:700;margin:12px 0 6px}
+  .muted{color:var(--sub);font-size:13px}
+  textarea{height:236px;resize:none}
+  .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
+  .tag{padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:#0a1323;color:var(--text);cursor:pointer;font-size:13px}
+  .tag.active{border-color:rgba(255,122,20,.55);background:rgba(255,122,20,.14)}
+  .actions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
+  .action{padding:18px;border-radius:16px;font-size:18px;font-weight:700;border:1px solid transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
+  .action small{font-size:13px;opacity:.85}
+  .dismiss{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.35);color:#ff9d9d}
+  .escalate{background:rgba(247,201,72,.09);border-color:rgba(247,201,72,.35);color:#ffe08d}
+  .approve{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.35);color:#86f2ae}
+  .tip{font-size:13px;color:var(--sub);margin-top:12px}
+  .notes-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
+  .voice-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,122,20,.35);background:rgba(255,122,20,.12);color:#ffd0ad;font-size:13px;font-weight:700;cursor:pointer}
+  .voice-btn.recording{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.42);color:#ffb7b7}
+  .helper-copy{font-size:12px;line-height:1.45;color:var(--sub);margin-bottom:10px}
+  .voice-status{margin-top:10px;padding:10px 12px;border-radius:12px;border:1px dashed rgba(255,122,20,.35);background:rgba(255,122,20,.06);font-size:12px;color:#ffd0ad}
+  .transcript-preview{margin-top:10px;padding:12px;border-radius:14px;border:1px solid var(--line);background:#0a1323;font-size:13px;line-height:1.45;color:#d8e0ee}
+  .transcript-preview strong{display:block;font-size:11px;color:var(--sub);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
+  .footer-meta{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--sub);display:grid;grid-template-columns:1fr auto;gap:10px}
+  .toast{position:fixed;right:22px;bottom:22px;padding:14px 16px;border-radius:14px;background:#101d31;border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.3);display:none}
+  .toast.show{display:block}
+  @media (max-width: 1180px){
+    .metrics,.violations,.review-grid,.triage-grid,.actions{grid-template-columns:1fr 1fr}
+    .review-grid .review-col:first-child{grid-column:1/-1}
+  }
+  @media (max-width: 820px){
+    .metrics,.violations,.triage-grid,.review-grid,.actions{grid-template-columns:1fr}
+    .video-box{font-size:72px;height:260px}
+    .topbar,.review-toolbar{flex-direction:column;align-items:flex-start;gap:14px}
+  }
+</style>
 </head>
 <body>
+<div id="loginScreen" class="login-wrap">
+  <div class="login card">
+    <div class="brand">
+      <div class="logo">🎥</div>
+      <div>
+        <h1>TrafficAI Review System</h1>
+        <p>Traffic Enforcement Portal</p>
+      </div>
     </div>
+    <label>Officer ID</label>
+    <input id="officerId" value="TPO-2847" />
+    <label>Password</label>
+    <input type="password" value="password" />
+    <div style="display:flex;gap:10px;margin-top:18px">
+      <button class="btn" onclick="enterDashboard()">Sign In</button>
+      <button class="btn secondary" onclick="enterDashboard()">Use Demo</button>
+    </div>
+    <p style="margin:14px 0 0;color:var(--sub);font-size:12px">Demo shortcut: press Enter to sign in.</p>
+  </div>
+</div>
+<div id="app" class="app hidden">
+  <div id="dashboardScreen" class="dashboard-shell">
+    <div class="topbar card">
+      <div class="brand">
+        <div class="logo">🎥</div>
+        <div>
+          <h1>TrafficAI Review System</h1>
+          <p>Traffic Enforcement Dashboard</p>
         </div>
+      </div>
+      <div class="user-badge">
+        <div style="text-align:right">
+          <div style="font-size:12px;color:var(--sub)">Officer</div>
+          <div id="officerLabel" style="font-size:22px;font-weight:800">TPO-2847</div>
         </div>
+        <div class="avatar">TP</div>
+      </div>
+    </div>
+    <div class="metrics">
+      <div class="metric card">
+        <div class="accent"></div>
+        <h3>Pending Reviews</h3>
+        <div class="value" id="pendingValue">1626</div>
+        <div class="note">Across all violation types</div>
+      </div>
+      <div class="metric green card">
+        <div class="accent"></div>
+        <h3>Today Reviewed</h3>
+        <div class="value" id="reviewedValue">127</div>
+        <div class="note">+23% from yesterday</div>
+      </div>
+      <div class="metric blue card">
+        <div class="accent"></div>
+        <h3>Avg Review Time</h3>
+        <div class="value" id="avgValue">7.8s</div>
+        <div class="note">Target: &lt; 10s</div>
+      </div>
+      <div class="metric purple card">
+        <div class="accent"></div>
+        <h3>System Accuracy</h3>
+        <div class="value">93.2%</div>
+        <div class="note">AI-human agreement</div>
+      </div>
+    </div>
+    <div class="searchbar card">
+      <input placeholder="Search violation types, case IDs, or locations..." />
+    </div>
+    <div class="triage card">
+      <div class="section-title">Suggested triage lanes</div>
+      <div class="triage-grid">
+        <div class="lane fast">
+          <h4>Fast lane</h4>
+          <p>High-confidence cases with complete evidence. Best path for sub-10 second review.</p>
+        </div>
+        <div class="lane standard">
+          <h4>Standard lane</h4>
+          <p>Normal review flow for cases that need officer validation but have no major risk flags.</p>
         </div>
+        <div class="lane exception">
+          <h4>Exception lane</h4>
+          <p>Poor visibility, emergency vehicle, unclear signage, or low OCR confidence.</p>
+        </div>
+      </div>
     </div>
+    <div>
+      <div class="section-title">Violation Types - Quick Access</div>
+      <div class="violations" id="violationGrid"></div>
     </div>
+  </div>
+  <div id="reviewScreen" class="review-shell hidden">
+    <div class="review-toolbar card">
+      <div class="left">
+        <div class="back" onclick="goDashboard()">← Dashboard</div>
+        <div>
+          <h2 id="reviewTitle">Red Light Running</h2>
+          <p id="caseCounter">Case 1 of 50</p>
         </div>
+      </div>
+      <div class="stats">
+        <div><span>Avg Review Time</span><strong id="sessionAvg">0.0s</strong></div>
+        <div><span>Reviewed</span><strong id="sessionReviewed">0</strong></div>
+        <div>
+          <span>Progress</span>
+          <div class="progress"><span id="reviewProgress"></span></div>
         </div>
+      </div>
     </div>
+    <div class="review-grid">
+      <div class="review-col panel">
+        <div class="chips">
+          <div class="chip blue" id="aiConfidence">AI: 83.5%</div>
+          <div class="chip purple" id="plateConfidence">Plate: 93%</div>
+        </div>
+        <div class="video-box" id="videoStage">Vehicle</div>
+        <div class="playbar">
+          <div>▶</div>
+          <div class="playline"><span></span></div>
+          <div id="clipTime">0:03 / 0:08</div>
+        </div>
+        <div class="meta-list">
+          <div class="meta-item">📍 <span id="caseLocation">Banjara Hills Signal</span></div>
+          <div class="meta-item">📷 <span id="casePlate">TS 69 BP 4715</span></div>
+          <div class="meta-item">🕒 <span id="caseTimestamp">4/20/2026, 8:54:54 PM</span></div>
+          <div class="meta-item">🚦 Signal state: <strong>Red</strong> · Stop line crossed: <strong>Yes</strong></div>
+        </div>
+        <div class="actions">
+          <button class="action dismiss" onclick="takeAction('dismiss')">Dismiss <small>← A</small></button>
+          <button class="action escalate" onclick="takeAction('escalate')">Escalate <small>↑ S</small></button>
+          <button class="action approve" onclick="takeAction('approve')">Issue Citation <small>D →</small></button>
         </div>
+        <div class="tip">💡 Keyboard shortcuts: A = Dismiss · S = Escalate · D = Issue Citation</div>
+      </div>
+      <div class="review-col panel">
+        <div class="section-title" style="margin-top:0">Evidence Trail</div>
+        <div class="evidence-card">
+          <div class="event-thumb">Approach</div>
+          <div class="evidence-title">Vehicle approaching intersection</div>
+          <div class="muted">Context frame · 0.0s</div>
+        </div>
+        <div class="evidence-card">
+          <div class="event-thumb red">Violation</div>
+          <div class="evidence-title">Stop line crossed on red</div>
+          <div class="muted">Violation frame · 2.5s</div>
+        </div>
+        <div class="evidence-card">
+          <div class="event-thumb blue" style="font-size:32px">TS 69 BP</div>
+          <div class="evidence-title">Plate crop</div>
+          <div class="muted">OCR: TS69BP4715 · Confidence 93%</div>
+        </div>
+      </div>
+      <div class="review-col panel">
+        <div class="notes-header">
+          <div class="section-title" style="margin:0">Review Notes</div>
+          <button id="voiceBtn" class="voice-btn" onclick="toggleVoiceNote()">🎙 Start voice note</button>
+        </div>
+        <div class="helper-copy">Use quick tags for common reasons and a 3–5 second voice note for dismiss or escalate cases so rationale capture stays within the &lt;10 second target.</div>
+        <textarea id="notes" placeholder="Add notes about this case... or tap Start voice note"></textarea>
+        <div id="voiceStatus" class="voice-status">Ready for short dictation. Best used for exception cases that need audit-ready reasoning.</div>
+        <div id="transcriptPreview" class="transcript-preview"><strong>Latest transcript</strong><span id="transcriptText">No voice note captured yet.</span></div>
+        <div class="section-title" style="margin:16px 0 10px">Quick Tags</div>
+        <div class="tags">
+          <button class="tag" onclick="toggleTag(this)">Clear violation</button>
+          <button class="tag" onclick="toggleTag(this)">Unclear</button>
+          <button class="tag" onclick="toggleTag(this)">Emergency vehicle</button>
+          <button class="tag" onclick="toggleTag(this)">Poor visibility</button>
+          <button class="tag" onclick="toggleTag(this)">Plate mismatch</button>
+        </div>
+        <div class="footer-meta">
+          <div>Case ID: <span id="caseId">CASE-1776709784805-0</span></div>
+          <div>Current Time: <span id="timerValue">46.5s</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div id="toast" class="toast"></div>
+<script>
+const violations = [
+  { name:'Red Light Running', count:234, time:'7.2s', accuracy:'94.5%', progress:94 },
+  { name:'Speeding', count:456, time:'6.8s', accuracy:'96.2%', progress:96 },
+  { name:'Illegal Parking', count:189, time:'8.1s', accuracy:'91.3%', progress:91 },
+  { name:'Wrong Way', count:98, time:'9.2s', accuracy:'89.7%', progress:89 },
+  { name:'No Helmet', count:167, time:'5.9s', accuracy:'97.1%', progress:97 },
+  { name:'Triple Riding', count:145, time:'7.5s', accuracy:'92.8%', progress:92 },
+  { name:'Mobile While Driving', count:203, time:'8.7s', accuracy:'88.4%', progress:88 },
+  { name:'No Seatbelt', count:134, time:'6.3s', accuracy:'95.6%', progress:95 }
+];
+const cases = [
+  {
+    title:'Red Light Running', ai:'83.5%', plate:'93%', location:'Banjara Hills Signal', plateText:'TS 69 BP 4715',
+    timestamp:'4/20/2026, 8:54:54 PM', caseId:'CASE-1776709784805-0', stage:'Vehicle', clip:'0:03 / 0:08',
+    voiceNote:'Driver entered the intersection after the light turned red. Plate readable and stop line clearly crossed.'
+  },
+  {
+    title:'Speeding', ai:'91.2%', plate:'96%', location:'Outer Ring Road - Exit 4', plateText:'TS 08 CR 2201',
+    timestamp:'4/20/2026, 9:02:11 PM', caseId:'CASE-1776709784805-1', stage:'Speed', clip:'0:02 / 0:06',
+    voiceNote:'Radar overlay matches vehicle lane. Speed above posted limit and plate OCR is high confidence.'
+  },
+  {
+    title:'No Helmet', ai:'88.9%', plate:'90%', location:'Madhapur Main Road', plateText:'TS 11 DU 8877',
+    timestamp:'4/20/2026, 9:07:40 PM', caseId:'CASE-1776709784805-2', stage:'Rider', clip:'0:01 / 0:05',
+    voiceNote:'Rider head is fully visible without helmet. No obstruction and number plate remains readable.'
+  }
+];
+let state = {
+  officer:'TPO-2847',
+  pending:1626,
+  reviewed:127,
+  avg:7.8,
+  currentCase:0,
+  sessionReviewed:0,
+  sessionSeconds:0,
+  timer:46.5,
+  recording:false
+};
+function renderViolations(){
+  const grid = document.getElementById('violationGrid');
+  grid.innerHTML = violations.map((v, i) => `
+    <div class="violation-card card" data-index="${i}">
+      <div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start">
+        <div>
+          <h4>${v.name}</h4>
+          <div style="color:var(--sub);font-size:13px">Click to review cases</div>
+        </div>
+        <div class="badge">${v.count}</div>
+      </div>
+      <div class="violation-meta"><span>Avg Time</span><strong style="color:var(--text)">${v.time}</strong></div>
+      <div class="violation-meta"><span>Accuracy</span><strong style="color:var(--text)">${v.accuracy}</strong></div>
+      <div class="bar"><span style="width:${v.progress}%"></span></div>
     </div>
+  `).join('');
+  grid.querySelectorAll('.violation-card').forEach(card => {
+    card.addEventListener('click', () => openReviewByIndex(Number(card.dataset.index)));
+  });
+}
+function showToast(message){
+  const toast = document.getElementById('toast');
+  toast.textContent = message;
+  toast.classList.add('show');
+  clearTimeout(showToast._t);
+  showToast._t = setTimeout(() => toast.classList.remove('show'), 1800);
+}
+function enterDashboard(){
+  state.officer = document.getElementById('officerId').value || 'TPO-2847';
+  document.getElementById('officerLabel').textContent = state.officer;
+  document.getElementById('loginScreen').classList.add('hidden');
+  document.getElementById('app').classList.remove('hidden');
+  renderViolations();
+}
+function goDashboard(){
+  document.getElementById('reviewScreen').classList.add('hidden');
+  document.getElementById('dashboardScreen').classList.remove('hidden');
+}
+function openReviewByIndex(index){
+  state.currentCase = index % cases.length;
+  hydrateCase();
+  document.getElementById('dashboardScreen').classList.add('hidden');
+  document.getElementById('reviewScreen').classList.remove('hidden');
+}
+function hydrateCase(){
+  const c = cases[state.currentCase];
+  document.getElementById('reviewTitle').textContent = c.title;
+  document.getElementById('caseCounter').textContent = `Case ${state.currentCase + 1} of 50`;
+  document.getElementById('aiConfidence').textContent = `AI: ${c.ai}`;
+  document.getElementById('plateConfidence').textContent = `Plate: ${c.plate}`;
+  document.getElementById('videoStage').textContent = c.stage;
+  document.getElementById('caseLocation').textContent = c.location;
+  document.getElementById('casePlate').textContent = c.plateText;
+  document.getElementById('caseTimestamp').textContent = c.timestamp;
+  document.getElementById('caseId').textContent = c.caseId;
+  document.getElementById('clipTime').textContent = c.clip;
+  document.getElementById('sessionReviewed').textContent = state.sessionReviewed;
+  document.getElementById('sessionAvg').textContent = state.sessionReviewed ? `${(state.sessionSeconds/state.sessionReviewed).toFixed(1)}s` : '0.0s';
+  document.getElementById('reviewProgress').style.width = `${Math.max(2, (state.sessionReviewed / 50) * 100)}%`;
+  document.getElementById('timerValue').textContent = `${state.timer.toFixed(1)}s`;
+  document.getElementById('notes').value = '';
+  document.getElementById('transcriptText').textContent = 'No voice note captured yet.';
+  document.getElementById('voiceStatus').textContent = 'Ready for short dictation. Best used for exception cases that need audit-ready reasoning.';
+  state.recording = false;
+  const voiceBtn = document.getElementById('voiceBtn');
+  voiceBtn.textContent = '🎙 Start voice note';
+  voiceBtn.classList.remove('recording');
+  document.querySelectorAll('.tag').forEach(t => t.classList.remove('active'));
+}
+function toggleVoiceNote(){
+  const btn = document.getElementById('voiceBtn');
+  const status = document.getElementById('voiceStatus');
+  const transcriptText = document.getElementById('transcriptText');
+  const notes = document.getElementById('notes');
+  const c = cases[state.currentCase];
+  if (!state.recording) {
+    state.recording = true;
+    btn.textContent = '⏺ Recording...';
+    btn.classList.add('recording');
+    status.textContent = 'Listening... speak a short reason such as “clear violation, plate readable, issue citation.”';
+    clearTimeout(toggleVoiceNote._timer);
+    toggleVoiceNote._timer = setTimeout(() => {
+      state.recording = false;
+      btn.textContent = '🎙 Add another voice note';
+      btn.classList.remove('recording');
+      status.textContent = 'Voice note captured and transcribed. This note will be saved with the audit trail.';
+      transcriptText.textContent = c.voiceNote;
+      notes.value = c.voiceNote;
+      showToast('Voice note transcribed');
+    }, 1200);
+  } else {
+    clearTimeout(toggleVoiceNote._timer);
+    state.recording = false;
+    btn.textContent = '🎙 Add voice note';
+    btn.classList.remove('recording');
+    status.textContent = 'Voice note stopped. Tap again to capture a new 3–5 second note.';
+  }
+}
+function takeAction(type){
+  const labels = {
+    approve:'Citation issued',
+    dismiss:'Case dismissed',
+    escalate:'Case escalated for manual review'
+  };
+  state.pending -= 1;
+  state.reviewed += 1;
+  state.sessionReviewed += 1;
+  state.sessionSeconds += type === 'escalate' ? 11.2 : (type === 'dismiss' ? 6.4 : 7.1);
+  state.avg = Math.max(6.8, ((state.avg * (state.reviewed - 1)) + (state.sessionSeconds / state.sessionReviewed)) / state.reviewed).toFixed(1);
+  document.getElementById('pendingValue').textContent = state.pending;
+  document.getElementById('reviewedValue').textContent = state.reviewed;
+  document.getElementById('avgValue').textContent = `${state.avg}s`;
+  showToast(labels[type]);
+  state.currentCase = (state.currentCase + 1) % cases.length;
+  state.timer = 42 + Math.random() * 8;
+  hydrateCase();
+}
+function toggleTag(el){ el.classList.toggle('active'); }
+document.addEventListener('keydown', (e) => {
+  if (!document.getElementById('app').classList.contains('hidden') && document.getElementById('dashboardScreen').classList.contains('hidden')) {
+    if (e.key.toLowerCase() === 'a') takeAction('dismiss');
+    if (e.key.toLowerCase() === 's') takeAction('escalate');
+    if (e.key.toLowerCase() === 'd') takeAction('approve');
+  }
+  if (document.getElementById('loginScreen').classList.contains('hidden') === false && e.key === 'Enter') enterDashboard();
+});
+renderViolations();
+</script>
 </body>
+</html>