File size: 8,133 Bytes
1d9b079 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Investigator Dashboard - ForensicFlow</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1e40af',
secondary: '#dc2626'
}
}
}
}
</script>
<style>
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen">
<!-- Navigation -->
<nav class="bg-black/30 backdrop-blur-md border-b border-gray-700">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-4">
<div class="flex items-center space-x-4">
<div class="w-10 h-10 bg-secondary rounded-lg flex items-center justify-center">
<i data-feather="search" class="text-white"></i>
</div>
<div>
<h1 class="text-white font-bold text-xl">Investigator Dashboard</h1>
<p class="text-gray-400 text-sm">Case Management & Evidence Submission</p>
</div>
</div>
<div class="flex items-center space-x-4">
<span class="text-white">Investigator: Ahmed Hassan</span>
<button class="text-gray-400 hover:text-white">
<i data-feather="log-out" class="w-5 h-5"></i>
</button>
</div>
</div>
</div>
</nav>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Quick Actions -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<button onclick="openNewCaseModal()" class="glass-effect rounded-xl p-6 text-white hover:bg-white/20 transition duration-300">
<div class="flex items-center space-x-3">
<i data-feather="plus" class="w-6 h-6 text-green-400"></i>
<div>
<h3 class="font-semibold">New Case</h3>
<p class="text-sm text-gray-400">Start new investigation</p>
</div>
</button>
<button class="glass-effect rounded-xl p-6 text-white hover:bg-white/20 transition duration-300">
<div class="flex items-center space-x-3">
<i data-feather="upload" class="w-6 h-6 text-blue-400"></i>
<div>
<h3 class="font-semibold">Upload Evidence</h3>
<p class="text-sm text-gray-400">Add files & documents</p>
</div>
</button>
<button class="glass-effect rounded-xl p-6 text-white hover:bg-white/20 transition duration-300">
<div class="flex items-center space-x-3">
<i data-feather="eye" class="w-6 h-6 text-purple-400"></i>
<div>
<h3 class="font-semibold">Case Status</h3>
<p class="text-sm text-gray-400">Track investigations</p>
</div>
</button>
</div>
<!-- My Cases Section -->
<div class="glass-effect rounded-xl p-6">
<h2 class="text-2xl font-bold text-white mb-6">My Active Cases</h2>
<div class="space-y-4">
<!-- Sample Case -->
<div class="glass-effect rounded-lg p-4 flex justify-between items-center">
<div>
<h4 class="text-white font-semibold">Case #2024-001: Commercial Theft</h4>
<div class="flex space-x-4 text-sm text-gray-400">
<span>Status: <span class="text-yellow-400">Under Review</span></span>
<span>Submitted: 2024-01-15</span>
</div>
<div class="flex space-x-2">
<button class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
View Details
</button>
</div>
</div>
</div>
</div>
<!-- New Case Modal -->
<div id="newCaseModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="glass-effect rounded-2xl p-8 max-w-2xl w-full mx-4">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold text-white">Create New Case</h3>
<button onclick="closeNewCaseModal()" class="text-gray-400 hover:text-white">
<i data-feather="x" class="w-6 h-6"></i>
</button>
</div>
<form class="space-y-4">
<div class="grid md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Case Title</label>
<input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary">
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Crime Date</label>
<input type="date" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary">
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Location</label>
<input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary">
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Suspect Name</label>
<input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Case Description</label>
<textarea rows="4" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary"></textarea>
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Evidence Files</label>
<input type="file" multiple class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary">
</div>
<div class="flex space-x-4">
<button type="submit" class="bg-primary hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition">
Submit Case
</button>
<button type="button" onclick="closeNewCaseModal()" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-3 rounded-lg transition">
Cancel
</button>
</div>
</form>
</div>
</div>
<script>
// Modal functions
function openNewCaseModal() {
document.getElementById('newCaseModal').classList.remove('hidden');
}
function closeNewCaseModal() {
document.getElementById('newCaseModal').classList.add('hidden');
}
// Initialize feather icons
feather.replace();
</script>
</body>
</html>
|