elaks1125/blue-neuron
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>AgroFloat | Blue Neuron</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />11 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>12</head>13<body class="bg-gray-100 dark:bg-gray-900">14 <nav class="bg-ocean-900 text-white p-4 fixed w-full z-10">15 <div class="container mx-auto flex justify-between items-center">16 <div class="flex items-center space-x-2">17 <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">18 <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"></path>19 </svg>20 <span class="text-xl font-bold">Blue Neuron</span>21 </div>22 <div class="hidden md:flex space-x-6">23 <a href="/" class="hover:text-ocean-100">Home</a>24 <a href="/analysis" class="hover:text-ocean-100">Data Analysis</a>25 <a href="/chatbot" class="hover:text-ocean-100">Multilingual Chat</a>26 <a href="/agrofloat" class="text-ocean-100 font-medium">AgroFloat</a>27 </div>28 <button class="p-2 rounded-full bg-ocean-500 hover:bg-ocean-100 transition">29 <i data-feather="menu"></i>30 </button>31 </div>32 </nav>33 34 <main class="container mx-auto pt-24 px-4">35 <div class="grid md:grid-cols-3 gap-6 mb-6">36 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">37 <h3 class="font-bold mb-4">Float Status</h3>38 <div class="space-y-4">39 <div>40 <p class="text-sm text-gray-500">Current Status</p>41 <p class="font-medium flex items-center">42 <span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span>43 Active44 </p>45 </div>46 <div>47 <p class="text-sm text-gray-500">Last Transmission</p>48 <p class="font-medium">2 hours ago</p>49 </div>50 <div>51 <p class="text-sm text-gray-500">Battery Level</p>52 <div class="w-full bg-gray-200 rounded-full h-2.5">53 <div class="bg-ocean-500 h-2.5 rounded-full" style="width: 78%"></div>54 </div>55 <p class="text-right text-sm">78%</p>56 </div>57 </div>58 </div>59 60 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">61 <h3 class="font-bold mb-4">Sensor Health</h3>62 <div class="space-y-4">63 <div>64 <p class="text-sm text-gray-500">Temperature Sensor</p>65 <p class="font-medium text-green-500">Normal</p>66 </div>67 <div>68 <p class="text-sm text-gray-500">Salinity Sensor</p>69 <p class="font-medium text-green-500">Normal</p>70 </div>71 <div>72 <p class="text-sm text-gray-500">pH Sensor</p>73 <p class="font-medium text-yellow-500">Calibration Needed</p>74 </div>75 </div>76 </div>77 78 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">79 <h3 class="font-bold mb-4">Problem Detection</h3>80 <div class="space-y-4">81 <div class="bg-red-50 dark:bg-red-900 bg-opacity-50 p-3 rounded-lg">82 <p class="font-medium flex items-center">83 <i data-feather="alert-triangle" class="text-red-500 mr-2"></i>84 pH Calibration Required85 </p>86 <p class="text-sm mt-1">Last calibration: 14 days ago</p>87 </div>88 <div class="bg-yellow-50 dark:bg-yellow-900 bg-opacity-50 p-3 rounded-lg">89 <p class="font-medium flex items-center">90 <i data-feather="alert-circle" class="text-yellow-500 mr-2"></i>91 Battery Replacement Soon92 </p>93 <p class="text-sm mt-1">Estimated remaining: 12 days</p>94 </div>95 </div>96 </div>97 </div>98 99 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">100 <div id="map" class="h-96"></div>101 </div>102 </main>103 104 <script>105 feather.replace();106 107 // Initialize map108 const map = L.map('map').setView([20.5937, 78.9629], 4);109 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {110 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'111 }).addTo(map);112 113 // Add marker114 L.marker([19.0760, 72.8777]).addTo(map)115 .bindPopup('AgroFloat ID: AF-2023-001<br>Status: Active')116 .openPopup();117 </script>118</body>119</html>