Hugging Face's logo

Spaces:
ENVY4573
/
pulsepoint-command-hub
Running

App Files Community
pulsepoint-command-hub / settings.html
ENVY4573's picture
ENVY4573
create setting page now link to side menu bar, and all features included which is in image
b0fd2a3 verified
Raw History Blame Contribute Delete
20.1 kB
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings - Arogya Mitra</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.sidebar {
transition: all 0.3s;
}
.card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
.setting-tab {
border-bottom: 3px solid transparent;
transition: all 0.3s;
}
.setting-tab.active {
border-bottom-color: #3b82f6;
color: #3b82f6;
}
.toggle-checkbox:checked {
right: 0;
border-color: #3b82f6;
background-color: #3b82f6;
}
.toggle-checkbox:checked + .toggle-label {
background-color: #bfdbfe;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-blue-800 text-white w-64 flex-shrink-0">
<div class="p-4 border-b border-blue-700">
<h1 class="text-xl font-bold">Arogya Mitra</h1>
<p class="text-blue-200 text-sm">Hospital Command Dashboard</p>
</div>
<nav class="p-4">
<ul>
<li class="mb-2">
<a href="dashboard.html" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-tachometer-alt mr-3"></i>
<span>Dashboard</span>
</a>
</li>
<li class="mb-2">
<a href="patientflow.html" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-procedures mr-3"></i>
<span>Patient Flow</span>
</a>
</li>
<li class="mb-2">
<a href="staffmanagement.html" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-user-md mr-3"></i>
<span>Staff Management</span>
</a>
</li>
<li class="mb-2">
<a href="analytics.html" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-chart-line mr-3"></i>
<span>Analytics</span>
</a>
</li>
<li class="mb-2">
<a href="settings.html" class="flex items-center p-2 rounded bg-blue-700">
<i class="fas fa-cog mr-3"></i>
<span>Settings</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Main Content -->
<div class="flex-1 overflow-auto">
<!-- Top Navigation -->
<header class="bg-white shadow-sm p-4 flex justify-between items-center">
<div class="flex items-center">
<button class="mr-4 text-gray-500">
<i class="fas fa-bars"></i>
</button>
<h2 class="text-xl font-semibold">System Settings</h2>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search settings..." class="pl-8 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
</header>
<!-- Settings Content -->
<main class="p-6">
<!-- Settings Tabs -->
<div class="flex border-b border-gray-200 mb-6">
<button class="setting-tab active px-4 py-2 font-medium text-sm">General</button>
<button class="setting-tab px-4 py-2 font-medium text-sm">Notifications</button>
<button class="setting-tab px-4 py-2 font-medium text-sm">Security</button>
<button class="setting-tab px-4 py-2 font-medium text-sm">Integration</button>
<button class="setting-tab px-4 py-2 font-medium text-sm">Backup</button>
</div>
<!-- General Settings -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- System Preferences -->
<div class="card bg-white rounded-lg p-6">
<h3 class="font-semibold text-lg mb-4">System Preferences</h3>
<div class="space-y-4">
<div class="flex justify-between items-center">
<div>
<p class="font-medium">Dark Mode</p>
<p class="text-sm text-gray-500">Switch between light and dark theme</p>
</div>
<div class="relative inline-block w-10 mr-2 align-middle select-none">
<input type="checkbox" name="darkMode" id="darkMode" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
<label for="darkMode" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
</div>
</div>
<div class="flex justify-between items-center">
<div>
<p class="font-medium">Time Format</p>
<p class="text-sm text-gray-500">12-hour or 24-hour clock</p>
</div>
<select class="bg-white border border-gray-300 rounded-md px-3 py-1 text-sm">
<option>12-hour (AM/PM)</option>
<option>24-hour</option>
</select>
</div>
<div class="flex justify-between items-center">
<div>
<p class="font-medium">Language</p>
<p class="text-sm text-gray-500">System language preference</p>
</div>
<select class="bg-white border border-gray-300 rounded-md px-3 py-1 text-sm">
<option>English</option>
<option>Hindi</option>
<option>Marathi</option>
<option>Bengali</option>
</select>
</div>
</div>
</div>
<!-- Hospital Information -->
<div class="card bg-white rounded-lg p-6">
<h3 class="font-semibold text-lg mb-4">Hospital Information</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Hospital Name</label>
<input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" value="Arogya Mitra General Hospital">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Address</label>
<textarea class="w-full border border-gray-300 rounded-md px-3 py-2">123 Medical Street, Health City, MH 400001</textarea>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Contact Number</label>
<input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" value="+91 9876543210">
</div>
<div class="pt-2">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Save Changes</button>
</div>
</div>
</div>
<!-- Notification Settings -->
<div class="card bg-white rounded-lg p-6 lg:col-span-2">
<h3 class="font-semibold text-lg mb-4">Alert Thresholds</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">ED Wait Time (min)</label>
<input type="number" class="w-full border border-gray-300 rounded-md px-3 py-2" value="30">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">ICU Bed Occupancy (%)</label>
<input type="number" class="w-full border border-gray-300 rounded-md px-3 py-2" value="85">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Staff Ratio Alert</label>
<input type="number" class="w-full border border-gray-300 rounded-md px-3 py-2" value="8">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Critical Lab Results (hr)</label>
<input type="number" class="w-full border border-gray-300 rounded-md px-3 py-2" value="2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Medication Delay (min)</label>
<input type="number" class="w-full border border-gray-300 rounded-md px-3 py-2" value="15">
</div>
<div class="flex items-end">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Update Thresholds</button>
</div>
</div>
</div>
<!-- User Management -->
<div class="card bg-white rounded-lg p-6 lg:col-span-2">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold text-lg">User Accounts</h3>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
<i class="fas fa-plus mr-2"></i> Add User
</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Active</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 text-white flex items-center justify-center font-semibold">AD</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Admin User</div>
<div class="text-sm text-gray-500">admin@arogyamitra.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Administrator</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 10:45 AM</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></a>
<a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 text-white flex items-center justify-center font-semibold">MD</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Medical Director</div>
<div class="text-sm text-gray-500">director@arogyamitra.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Medical Staff</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 4:30 PM</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></a>
<a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-500 text-white flex items-center justify-center font-semibold">NS</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Nurse Supervisor</div>
<div class="text-sm text-gray-500">nurse@arogyamitra.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Nursing</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Inactive</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></a>
<a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- System Maintenance -->
<div class="card bg-white rounded-lg p-6">
<h3 class="font-semibold text-lg mb-4">System Maintenance</h3>
<div class="space-y-4">
<div>
<p class="font-medium">Database Backup</p>
<p class="text-sm text-gray-500 mb-2">Last backup: Today, 2:00 AM</p>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Run Backup Now</button>
</div>
<div class="pt-4 border-t border-gray-200">
<p class="font-medium">System Updates</p>
<p class="text-sm text-gray-500 mb-2">Current version: v2.3.1 (Latest)</p>
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md text-sm font-medium" disabled>Check for Updates</button>
</div>
</div>
</div>
<!-- API Integration -->
<div class="card bg-white rounded-lg p-6">
<h3 class="font-semibold text-lg mb-4">API Integration</h3>
<div class="space-y-4">
<div class="flex justify-between items-center">
<div>