Spaces:
Running
Running
add more animations, make the website appealing to the eye, comfortable and createive
839b8ab verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Dashboard | PESO Registry</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| :root { | |
| --mint-green: #98FF98; | |
| --mint-dark: #79C779; | |
| --mint-light: #D1FFD1; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background-color: #f8f9fa; | |
| } | |
| .sidebar { | |
| background-color: var(--mint-green); | |
| min-height: 100vh; | |
| transition: all 0.3s; | |
| } | |
| .sidebar-link { | |
| color: #333; | |
| border-radius: 5px; | |
| padding: 10px 15px; | |
| margin-bottom: 5px; | |
| transition: all 0.3s; | |
| } | |
| .sidebar-link:hover, .sidebar-link.active { | |
| background-color: var(--mint-dark); | |
| color: white; | |
| text-decoration: none; | |
| } | |
| .sidebar-link i { | |
| margin-right: 10px; | |
| } | |
| .card { | |
| border-radius: 10px; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| transition: all 0.3s; | |
| border: none; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .btn-mint { | |
| background-color: var(--mint-green); | |
| border-color: var(--mint-green); | |
| color: #333; | |
| } | |
| .btn-mint:hover { | |
| background-color: var(--mint-dark); | |
| border-color: var(--mint-dark); | |
| } | |
| .navbar-brand { | |
| font-weight: 700; | |
| color: var(--mint-dark); | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 250px; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <!-- Sidebar --> | |
| <div class="col-md-3 col-lg-2 d-md-block sidebar bg-light collapse show" id="sidebarMenu"> | |
| <div class="position-sticky pt-3"> | |
| <div class="text-center mb-4"> | |
| <img src="http://static.photos/people/200x200/43" alt="Profile" class="rounded-circle profile-img mb-2"> | |
| <h5>Admin User</h5> | |
| <p class="text-muted small">Administrator</p> | |
| </div> | |
| <ul class="nav flex-column"> | |
| <li class="nav-item"> | |
| <a class="nav-link sidebar-link active" href="admin-dashboard.html"> | |
| <i data-feather="home"></i> Dashboard | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link sidebar-link" href="admin-clients.html"> | |
| <i data-feather="users"></i> Client Registry | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link sidebar-link" href="admin-jobs.html"> | |
| <i data-feather="briefcase"></i> Job Management | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link sidebar-link" href="admin-services.html"> | |
| <i data-feather="settings"></i> Services | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link sidebar-link" href="admin-analytics.html"> | |
| <i data-feather="pie-chart"></i> Analytics | |
| </a> | |
| </li> | |
| <li class="nav-item mt-3"> | |
| <a class="nav-link sidebar-link text-danger" href="index.html"> | |
| <i data-feather="log-out"></i> Logout | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4"> | |
| <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> | |
| <h1 class="h2">Admin Dashboard</h1> | |
| <div class="btn-toolbar mb-2 mb-md-0"> | |
| <div class="btn-group me-2"> | |
| <button type="button" class="btn btn-sm btn-mint"> | |
| <i data-feather="calendar"></i> Today | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dashboard Cards --> | |
| <div class="row mb-4"> | |
| <div class="col-md-3 mb-3"> | |
| <div class="card text-white bg-primary h-100"> | |
| <div class="card-body"> | |
| <div class="d-flex justify-content-between align-items-center"> | |
| <div> | |
| <h6 class="card-title">Total Clients</h6> | |
| <h2 class="card-text">1,245</h2> | |
| </div> | |
| <i data-feather="users" width="40" height="40"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <div class="card text-white bg-success h-100"> | |
| <div class="card-body"> | |
| <div class="d-flex justify-content-between align-items-center"> | |
| <div> | |
| <h6 class="card-title">Active Jobs</h6> | |
| <h2 class="card-text">23</h2> | |
| </div> | |
| <i data-feather="briefcase" width="40" height="40"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <div class="card text-white bg-info h-100"> | |
| <div class="card-body"> | |
| <div class="d-flex justify-content-between align-items-center"> | |
| <div> | |
| <h6 class="card-title">New Applicants</h6> | |
| <h2 class="card-text">42</h2> | |
| </div> | |
| <i data-feather="file-text" width="40" height="40"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <div class="card text-white bg-warning h-100"> | |
| <div class="card-body"> | |
| <div class="d-flex justify-content-between align-items-center"> | |
| <div> | |
| <h6 class="card-title">Pending Tasks</h6> | |
| <h2 class="card-text">7</h2> | |
| </div> | |
| <i data-feather="alert-circle" width="40" height="40"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="row mb-4"> | |
| <div class="col-md-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h5 class="mb-0">Quick Actions</h5> | |
| </div> | |
| <div class="card-body"> | |
| <div class="d-flex flex-wrap gap-2"> | |
| <button class="btn btn-mint"> | |
| <i data-feather="user-plus"></i> Add Client | |
| </button> | |
| <button class="btn btn-mint"> | |
| <i data-feather="briefcase"></i> Post New Job | |
| </button> | |
| <button class="btn btn-mint"> | |
| <i data-feather="file-text"></i> Generate Report | |
| </button> | |
| <button class="btn btn-mint"> | |
| <i data-feather="mail"></i> Send Notifications | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity & Charts --> | |
| <div class="row"> | |
| <div class="col-md-6 mb-4"> | |
| <div class="card h-100"> | |
| <div class="card-header"> | |
| <h5 class="mb-0">Recent Activity</h5> | |
| </div> | |
| <div class="card-body"> | |
| <div class="list-group"> | |
| <div class="list-group-item border-0 d-flex align-items-center"> | |
| <div class="me-3"> | |
| <i data-feather="user" class="text-mint"></i> | |
| </div> | |
| <div> | |
| <small class="text-muted">10 minutes ago</small> | |
| <p class="mb-0">New client registered: Maria Garcia</p> | |
| </div> | |
| </div> | |
| <div class="list-group-item border-0 d-flex align-items-center"> | |
| <div class="me-3"> | |
| <i data-feather="briefcase" class="text-mint"></i> | |
| </div> | |
| <div> | |
| <small class="text-muted">1 hour ago</small> | |
| <p class="mb-0">Job posting "IT Support Specialist" got 5 new applicants</p> | |
| </div> | |
| </div> | |
| <div class="list-group-item border-0 d-flex align-items-center"> | |
| <div class="me-3"> | |
| <i data-feather="file-text" class="text-mint"></i> | |
| </div> | |
| <div> | |
| <small class="text-muted">3 hours ago</small> | |
| <p class="mb-0">System backup completed successfully</p> | |
| </div> | |
| </div> | |
| <div class="list-group-item border-0 d-flex align-items-center"> | |
| <div class="me-3"> | |
| <i data-feather="user" class="text-mint"></i> | |
| </div> | |
| <div> | |
| <small class="text-muted">5 hours ago</small> | |
| <p class="mb-0">Client profile updated: Juan Dela Cruz</p> | |
| </div> | |
| </div> | |
| <div class="list-group-item border-0 d-flex align-items-center"> | |
| <div class="me-3"> | |
| <i data-feather="mail" class="text-mint"></i> | |
| </div> | |
| <div> | |
| <small class="text-muted">Yesterday</small> | |
| <p class="mb-0">Batch notification sent to 120 clients</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6 mb-4"> | |
| <div class="card h-100"> | |
| <div class="card-header"> | |
| <h5 class="mb-0">Client Distribution by Barangay</h5> | |
| </div> | |
| <div class="card-body"> | |
| <div class="chart-container"> | |
| <canvas id="barangayChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Barangay Chart | |
| const barangayCtx = document.getElementById('barangayChart').getContext('2d'); | |
| const barangayChart = new Chart(barangayCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Poblacion', 'Balili', 'Wangal', 'Beckel', 'Betag', 'Others'], | |
| datasets: [{ | |
| label: 'Number of Clients', | |
| data: [320, 210, 180, 150, 120, 265], | |
| backgroundColor: [ | |
| 'rgba(152, 255, 152, 0.7)', | |
| 'rgba(121, 199, 121, 0.7)', | |
| 'rgba(209, 255, 209, 0.7)', | |
| 'rgba(100, 221, 100, 0.7)', | |
| 'rgba(70, 180, 70, 0.7)', | |
| 'rgba(40, 150, 40, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(152, 255, 152, 1)', | |
| 'rgba(121, 199, 121, 1)', | |
| 'rgba(209, 255, 209, 1)', | |
| 'rgba(100, 221, 100, 1)', | |
| 'rgba(70, 180, 70, 1)', | |
| 'rgba(40, 150, 40, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |