moebyx/denguewatch-ncr-alert
0
1 2<!DOCTYPE html>3<html lang="en">4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Data Management | DengueWatch NCR</title>8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <link rel="stylesheet" href="style.css">11 <style>12 #dropzone.highlight {13 border-color: #2563eb;14 background-color: #f0f7ff;15 }16 </style>17</head>18<body class="bg-gray-50">19 <!-- Navbar -->20 <nav class="bg-blue-600 text-white">21 <div class="container mx-auto px-4 py-3 flex justify-between items-center">22 <div class="flex items-center space-x-2">23 <i data-feather="shield" class="text-indigo-300"></i>24 <span class="font-bold text-xl">DengueWatch NCR</span>25 </div>26 <div class="hidden md:flex space-x-6">27 <a href="index.html" class="hover:text-indigo-300">Dashboard</a>28 <a href="alerts.html" class="hover:text-indigo-300">Alerts</a>29 <a href="prevention.html" class="hover:text-indigo-300">Prevention</a>30 <a href="admin-panel.html" class="font-semibold hover:text-indigo-300">Admin</a>31 <a href="login.html" class="hover:text-indigo-300">Logout</a>32 33 </div>34 35 <button class="mobile-menu-button md:hidden">36 <i data-feather="menu"></i>37 </button>38 </div>39 <!-- Mobile Menu -->40 <div class="mobile-menu hidden md:hidden bg-blue-700 w-full absolute top-full left-0 z-50">41 <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">42 <a href="index.html" class="hover:text-indigo-300">Dashboard</a>43 <a href="alerts.html" class="hover:text-indigo-300">Alerts</a>44 <a href="prevention.html" class="hover:text-indigo-300">Prevention</a>45 <a href="admin-panel.html" class="hover:text-indigo-300">Admin</a>46 </div>47 <a href="login.html" class="hover:text-indigo-300">Logout</a>48 49 </div>50 </nav>51<!-- Admin Content -->52 <div class="container mx-auto px-4 py-12">53 <div class="max-w-4xl mx-auto">54 <div class="flex items-center mb-8">55 <i data-feather="settings" class="w-8 h-8 text-blue-600 mr-3"></i>56 <h1 class="text-3xl font-bold">Admin Portal</h1>57 </div>58 59 <!-- Data Upload Card -->60 <div class="bg-white rounded-xl shadow-lg p-6 mb-8">61 62 <h2 class="text-xl font-bold mb-4">Upload New Data</h2>63 64 <p class="text-gray-600 mb-6">Upload CSV file containing the latest dengue case data for NCR regions.</p>65 66 <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-6" id="dropzone">67 <div id="upload-area">68 <i data-feather="upload-cloud" class="w-12 h-12 text-blue-500 mx-auto mb-3"></i>69 <p class="font-medium mb-2">Drag and drop CSV file here</p>70 <p class="text-gray-500 text-sm mb-4">or</p>71 <input type="file" id="csv-upload" accept=".csv" class="hidden">72 <label for="csv-upload" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium cursor-pointer transition">73 <strong>Select File</strong>74 </label>75 <p class="text-gray-500 text-xs mt-3">File should contain columns: Region, Cases, Date, Risk Level</p>76 </div>77 <div id="processing-area" class="hidden">78 <div class="animate-pulse flex items-center justify-center space-x-4">79 <i data-feather="loader" class="animate-spin w-8 h-8 text-blue-500"></i>80 <span class="text-blue-600">Processing CSV data...</span>81 </div>82 </div>83 <div id="success-message" class="hidden text-green-600">84 <i data-feather="check-circle" class="w-8 h-8 mx-auto mb-2"></i>85 <p>Data uploaded successfully!</p>86 </div>87 </div>88 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">89 <div>90 <label class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>91 <input type="date" class="w-full p-2 border rounded-lg" id="start-date">92 </div>93 <div>94 <label class="block text-sm font-medium text-gray-700 mb-1">End Date</label>95 <input type="date" class="w-full p-2 border rounded-lg" id="end-date">96 </div>97 <div>98 <label class="block text-sm font-medium text-gray-700 mb-1">Data Source</label>99 <select class="w-full p-2 border rounded-lg">100 <option>Department of Health</option>101 <option>Local Government Units</option>102 <option>Hospital Reports</option>103 <option>Other</option>104 </select>105 </div>106 </div>107 <button id="submit-btn" class="mt-6 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold shadow transition w-full flex items-center justify-center">108Update Dashboard Data109 </button>110 </div>111 112 <!-- Data Preview -->113 <div class="bg-white rounded-xl shadow-lg p-6">114 <div class="flex justify-between items-center mb-4">115 <h2 class="text-xl font-bold">Data Preview</h2>116 <button class="text-blue-600 hover:text-blue-800 flex items-center">117 <i data-feather="download" class="w-4 h-4 mr-1"></i>118 <span>Download Current Data</span>119 </button>120 </div>121 122 <div class="overflow-x-auto">123 <table class="min-w-full divide-y divide-gray-200">124 <thead class="bg-gray-50">125 <tr>126 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Region</th>127 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cases</th>128 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>129 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Risk Level</th>130 </tr>131 </thead>132 <tbody id="preview-table" class="bg-white divide-y divide-gray-200">133 <!-- Data will be inserted here -->134 <tr>135 <td colspan="4" class="px-6 py-4 text-center text-gray-500">No data uploaded yet</td>136 </tr>137 </tbody>138 </table>139 </div>140 </div>141 </div>142 </div>143 144 <!-- Footer -->145 <footer class="bg-blue-800 text-white py-8">146 <div class="container mx-auto px-4">147 <div class="flex flex-col md:flex-row justify-between items-center">148 <div class="mb-4 md:mb-0">149 <div class="flex items-center space-x-2">150 <i data-feather="shield"></i>151 <span class="font-bold">DengueWatch NCR</span>152 </div>153 <p class="text-blue-300 mt-2">Administrative portal for data management</p>154 </div>155 </div>156 <div class="border-t border-blue-700 mt-6 pt-6 text-sm text-center text-blue-400">157 © 2025 DengueWatch NCR. Restricted access.158 </div>159 </div>160 </footer>161 <script src="script.js"></script>162</body>163</html>