| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Pen Details - Aquaculture Biosecurity Ops</title> |
| | <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> |
| | <style> |
| | .progress-bar { |
| | height: 8px; |
| | border-radius: 4px; |
| | overflow: hidden; |
| | } |
| | .stage-counter { |
| | transition: all 0.2s ease; |
| | } |
| | .stage-counter:active { |
| | transform: scale(0.95); |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50 min-h-screen font-sans"> |
| | |
| | <header class="bg-white shadow-sm p-4 sticky top-0 z-10"> |
| | <div class="flex items-center"> |
| | <a href="index.html" class="mr-3"> |
| | <i data-feather="arrow-left"></i> |
| | </a> |
| | <h1 class="text-xl font-bold text-gray-800">Pen #4 - North Fjord</h1> |
| | </div> |
| | </header> |
| |
|
| | |
| | <main class="p-4 pb-20"> |
| | |
| | <section class="bg-white rounded-xl shadow-md p-4 mb-6"> |
| | <div class="grid grid-cols-2 gap-4"> |
| | <div class="text-center"> |
| | <div class="text-2xl font-bold text-blue-600">410</div> |
| | <div class="text-sm text-gray-600">Tons Biomass</div> |
| | </div> |
| | <div class="text-center"> |
| | <div class="text-2xl font-bold text-orange-600">5.8</div> |
| | <div class="text-sm text-gray-600">Avg Lice Count</div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-4"> |
| | <div class="flex justify-between items-center mb-2"> |
| | <span class="text-sm font-medium">Stocking Density</span> |
| | <span class="text-sm">78%</span> |
| | </div> |
| | <div class="progress-bar bg-gray-200"> |
| | <div class="bg-green-500 h-full" style="width: 78%"></div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg"> |
| | <div class="flex items-center"> |
| | <i data-feather="alert-triangle" class="text-red-600 mr-2"></i> |
| | <span class="text-red-700 font-medium">High Lice Alert</span> |
| | </div> |
| | <p class="text-red-600 text-sm mt-1">Exceeds treatment threshold of 3.0</p> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-6"> |
| | <div class="grid grid-cols-3 gap-3"> |
| | <button onclick="openLiceModal()" class="bg-blue-600 text-white py-3 rounded-lg font-medium flex flex-col items-center justify-center"> |
| | <i data-feather="plus-circle" class="w-6 h-6 mb-1"></i> |
| | <span class="text-xs">Lice Count</span> |
| | </button> |
| | <button class="bg-green-600 text-white py-3 rounded-lg font-medium flex flex-col items-center justify-center"> |
| | <i data-feather="activity" class="w-6 h-6 mb-1"></i> |
| | <span class="text-xs">Mortality</span> |
| | </button> |
| | <button class="bg-purple-600 text-white py-3 rounded-lg font-medium flex flex-col items-center justify-center"> |
| | <i data-feather="calendar" class="w-6 h-6 mb-1"></i> |
| | <span class="text-xs">Treatment</span> |
| | </button> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="bg-white rounded-xl shadow-md p-4 mb-6"> |
| | <h2 class="text-lg font-bold text-gray-800 mb-4">Recent Activity</h2> |
| | |
| | <div class="space-y-3"> |
| | <div class="flex items-center justify-between"> |
| | <div class="flex items-center"> |
| | <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> |
| | <i data-feather="bar-chart-2" class="text-blue-600 w-5 h-5"></i> |
| | </div> |
| | <div> |
| | <div class="font-medium">Lice Count</div> |
| | <div class="text-sm text-gray-600">Avg: 5.8 • 2 hours ago</div> |
| | </div> |
| | </div> |
| | <span class="text-red-600 font-medium">High</span> |
| | </div> |
| | |
| | <div class="flex items-center justify-between"> |
| | <div class="flex items-center"> |
| | <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"> |
| | <i data-feather="activity" class="text-green-600 w-5 h-5"></i> |
| | </div> |
| | <div> |
| | <div class="font-medium">Mortality</div> |
| | <div class="text-sm text-gray-600">15 fish • 4 hours ago</div> |
| | </div> |
| | </div> |
| | <span class="text-gray-600">Normal</span> |
| | </div> |
| | |
| | <div class="flex items-center justify-between"> |
| | <div class="flex items-center"> |
| | <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"> |
| | <i data-feather="cloud-rain" class="text-purple-600 w-5 h-5"></i> |
| | </div> |
| | <div> |
| | <div class="font-medium">Treatment</div> |
| | <div class="text-sm text-gray-600">Scheduled • Tomorrow</div> |
| | </div> |
| | </div> |
| | <span class="text-blue-600 font-medium">Pending</span> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="bg-white rounded-xl shadow-md p-4 mb-6"> |
| | <h2 class="text-lg font-bold text-gray-800 mb-4">Lice Count Trend</h2> |
| | |
| | <div class="bg-gray-50 rounded-lg p-3 h-40 flex items-end"> |
| | |
| | <div class="flex items-end justify-between w-full h-32"> |
| | <div class="flex flex-col items-center"> |
| | <div class="bg-blue-400 w-6 rounded-t" style="height: 40px"></div> |
| | <span class="text-xs mt-1">Mon</span> |
| | </div> |
| | <div class="flex flex-col items-center"> |
| | <div class="bg-blue-400 w-6 rounded-t" style="height: 55px"></div> |
| | <span class="text-xs mt-1">Tue</span> |
| | </div> |
| | <div class="flex flex-col items-center"> |
| | <div class="bg-blue-400 w-6 rounded-t" style="height: 48px"></div> |
| | <span class="text-xs mt-1">Wed</span> |
| | </div> |
| | <div class="flex flex-col items-center"> |
| | <div class="bg-blue-400 w-6 rounded-t" style="height: 65px"></div> |
| | <span class="text-xs mt-1">Thu</span> |
| | </div> |
| | <div class="flex flex-col items-center"> |
| | <div class="bg-orange-400 w-6 rounded-t" style="height: 85px"></div> |
| | <span class="text-xs mt-1">Today</span> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-3 flex justify-between items-center"> |
| | <span class="text-sm text-gray-600">7-day average: 4.2</span> |
| | <span class="text-sm font-medium text-orange-600">+38% increase</span> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="bg-white rounded-xl shadow-md p-4"> |
| | <h2 class="text-lg font-bold text-gray-800 mb-4">Treatment Plan</h2> |
| | |
| | <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-4"> |
| | <div class="flex items-center mb-2"> |
| | <i data-feather="clock" class="text-yellow-600 mr-2"></i> |
| | <span class="font-medium">Scheduled for tomorrow</span> |
| | </div> |
| | <p class="text-sm text-yellow-700">Product: Hydrogen Peroxide • Duration: 4 hours</p> |
| | </div> |
| | |
| | <div class="space-y-2"> |
| | <div class="flex justify-between"> |
| | <span class="text-gray-600">Product</span> |
| | <span class="font-medium">Hydrogen Peroxide</span> |
| | </div> |
| | <div class="flex justify-between"> |
| | <span class="text-gray-600">Dosage</span> |
| | <span class="font-medium">1.8 mg/L</span> |
| | </div> |
| | <div class="flex justify-between"> |
| | <span class="text-gray-600">Duration</span> |
| | <span class="font-medium">4 hours</span> |
| | </div> |
| | <div class="flex justify-between"> |
| | <span class="text-gray-600">Withdrawal</span> |
| | <span class="font-medium">72 hours</span> |
| | </div> |
| | </div> |
| | |
| | <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium mt-4"> |
| | View Full Treatment Plan |
| | </button> |
| | </section> |
| | </main> |
| |
|
| | |
| | <div id="liceModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4"> |
| | <div class="bg-white rounded-2xl w-full max-w-md max-h-[90vh] overflow-y-auto"> |
| | <div class="p-6"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h2 class="text-xl font-bold">Log Lice Count - Pen #4</h2> |
| | <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600"> |
| | <i data-feather="x"></i> |
| | </button> |
| | </div> |
| | |
| | <div class="space-y-4"> |
| | <div class="grid grid-cols-2 gap-3"> |
| | <div class="text-center"> |
| | <label class="block text-sm font-medium text-gray-700 mb-2">Chalimus</label> |
| | <div class="stage-counter big-tap-button bg-blue-100 text-blue-800 rounded-lg flex items-center justify-center text-2xl font-bold" onclick="incrementCount(this)"> |
| | 0 |
| | </div> |
| | </div> |
| | <div class="text-center"> |
| | <label class="block text-sm font-medium text-gray-700 mb-2">Preadult</label> |
| | <div class="stage-counter big-tap-button bg-green-100 text-green-800 rounded-lg flex items-center justify-center text-2xl font-bold" onclick="incrementCount(this)"> |
| | 0 |
| | </div> |
| | </div> |
| | <div class="text-center"> |
| | <label class="block text-sm font-medium text-gray-700 mb-2">Adult</label> |
| | <div class="stage-counter big-tap-button bg-yellow-100 text-yellow-800 rounded-lg flex items-center justify-center text-2xl font-bold" onclick="incrementCount(this)"> |
| | 0 |
| | </div> |
| | </div> |
| | <div class="text-center"> |
| | <label class="block text-sm font-medium text-gray-700 mb-2">Mobile</label> |
| | <div class="stage-counter big-tap-button bg-purple-100 text-purple-800 rounded-lg flex items-center justify-center text-2xl font-bold" onclick="incrementCount(this)"> |
| | 0 |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-2">Water Temperature (°C)</label> |
| | <input type="number" step="0.1" class="w-full p-3 border border-gray-300 rounded-lg" value="12.8"> |
| | </div> |
| | |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-2">Salinity (ppt)</label> |
| | <input type="number" step="0.1" class="w-full p-3 border border-gray-300 rounded-lg" value="31.2"> |
| | </div> |
| | |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-2">Notes (optional)</label> |
| | <textarea class="w-full p-3 border border-gray-300 rounded-lg" rows="2" placeholder="Observations..."></textarea> |
| | </div> |
| | |
| | <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium"> |
| | Save Count |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | feather.replace(); |
| | |
| | function openLiceModal() { |
| | document.getElementById('liceModal').classList.remove('hidden'); |
| | } |
| | |
| | function closeModal() { |
| | document.getElementById('liceModal').classList.add('hidden'); |
| | } |
| | |
| | function incrementCount(element) { |
| | let count = parseInt(element.textContent); |
| | element.textContent = count + 1; |
| | } |
| | </script> |
| | </body> |
| | </html> |
| |
|
