Spaces:
Running
Running
File size: 12,333 Bytes
9dade79 | 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 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings | Jupiter Admin</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1e3a8a',
secondary: '#9ca3af'
}
}
}
}
</script>
</head>
<body class="bg-gray-100">
<div class="flex h-screen">
<div class="w-64 bg-primary text-white shadow-lg">
<div class="p-4 flex items-center space-x-2 border-b border-primary-darker">
<i data-feather="settings" class="w-6 h-6 text-secondary"></i>
<span class="text-xl font-bold">Admin Dashboard</span>
</div>
<nav class="p-4">
<div class="space-y-2">
<a href="admin-dashboard.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-primary-darker transition">
<i data-feather="home"></i>
<span>Dashboard</span>
</a>
<a href="admin-bookings.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-primary-darker transition">
<i data-feather="calendar"></i>
<span>Bookings</span>
</a>
<a href="admin-customers.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-primary-darker transition">
<i data-feather="users"></i>
<span>Customers</span>
</a>
<a href="admin-cars.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-primary-darker transition">
<i data-feather="car"></i>
<span>Courtesy Cars</span>
</a>
<a href="admin-transactions.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-primary-darker transition">
<i data-feather="dollar-sign"></i>
<span>Transactions</span>
</a>
<a href="admin-settings.html" class="flex items-center space-x-2 p-2 rounded-lg bg-primary-darker">
<i data-feather="settings"></i>
<span>Settings</span>
</a>
</div>
</nav>
</div>
<div class="flex-1 overflow-auto">
<header class="bg-white shadow-sm p-4 flex justify-between items-center">
<h1 class="text-2xl font-bold text-gray-800">System Settings</h1>
<div class="flex items-center space-x-4">
<div class="relative">
<i data-feather="bell" class="text-gray-600 hover:text-primary cursor-pointer"></i>
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
</div>
<div class="flex items-center space-x-2">
<div class="w-8 h-8 rounded-full bg-secondary flex items-center justify-center text-white">
<i data-feather="user"></i>
</div>
<span class="font-medium">Admin User</span>
</div>
</div>
</header>
<main class="p-6">
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="border-b border-gray-200">
<nav class="-mb-px flex">
<a href="#" class="border-primary text-primary whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm">General</a>
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm">Services</a>
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm">Users</a>
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm">Notifications</a>
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm">About</a>
</nav>
</div>
<div class="p-6">
<div class="space-y-6">
<div>
<h3 class="text-lg font-medium text-gray-900 mb-4">Business Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="businessName" class="block text-sm font-medium text-gray-700 mb-1">Business Name</label>
<input type="text" id="businessName" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary" value="Jupiter Auto Service">
</div>
<div>
<label for="contactNumber" class="block text-sm font-medium text-gray-700 mb-1">Contact Number</label>
<input type="text" id="contactNumber" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary" value="+27 11 123 4567">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" id="email" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary" value="info@jupiter.co.za">
</div>
<div>
<label for="address" class="block text-sm font-medium text-gray-700 mb-1">Address</label>
<input type="text" id="address" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary" value="123 Auto Street, Johannesburg">
</div>
</div>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900 mb-4">Business Hours</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<label for="weekdayOpen" class="block text-sm font-medium text-gray-700 mb-1">Weekdays (Open)</label>
<input type="time" id="weekdayOpen" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary" value="08:00">
</div>
<div>
<label for="weekdayClose" class="block text-sm font-medium text-gray-700 mb-1">Weekdays (Close)</label>
<input type="time" id="weekdayClose" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary" value="17:00">
</div>
<div>
<label for="saturdayClose" class="block text-sm font-medium text-gray-700 mb-1">Saturday (Close)</label>
<input type="time" id="saturdayClose" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary" value="13:00">
</div>
</div>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900 mb-4">System Settings</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="emailNotifications" name="emailNotifications" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded" checked>
</div>
<div class="ml-3 text-sm">
<label for="emailNotifications" class="font-medium text-gray-700">Email Notifications</label>
<p class="text-gray-500">Receive email notifications for system events</p>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="smsNotifications" name="smsNotifications" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded">
</div>
<div class="ml-3 text-sm">
<label for="smsNotifications" class="font-medium text-gray-700">SMS Notifications</label>
<p class="text-gray-500">Receive SMS notifications for important alerts</p>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="maintenanceMode" name="maintenanceMode" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded">
</div>
<div class="ml-3 text-sm">
<label for="maintenanceMode" class="font-medium text-gray-700">Maintenance Mode</label>
<p class="text-gray-500">Enable to take the system offline for maintenance</p>
</div>
</div>
</div>
</div>
<div class="pt-4 border-t border-gray-200">
<div class="flex justify-end">
<button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
Cancel
</button>
<button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
Save
</button>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script>
feather.replace();
</script>
</body>
</html> |