Spaces:
Running
Running
Please create all the pages on the sidebar menu in admin-dashboard, when you click on them we should be directed to the page containing the information
9dade79 verified | <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> |