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>Client Registry | 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/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| :root { | |
| --mint-green: #98FF98; | |
| --mint-dark: #79C779; | |
| --mint-light: #D1FFD1; | |
| } | |
| .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; | |
| } | |
| .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); | |
| } | |
| .table th { | |
| background-color: var(--mint-light); | |
| } | |
| .profile-img-sm { | |
| width: 40px; | |
| height: 40px; | |
| object-fit: cover; | |
| border-radius: 50%; | |
| } | |
| .badge-mint { | |
| background-color: var(--mint-green); | |
| color: #333; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <!-- Sidebar (same as admin-dashboard.html) --> | |
| <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" href="admin-dashboard.html"> | |
| <i data-feather="home"></i> Dashboard | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link sidebar-link active" 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">Client Registry</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" data-bs-toggle="modal" data-bs-target="#addClientModal"> | |
| <i data-feather="user-plus"></i> Add Client | |
| </button> | |
| <button type="button" class="btn btn-sm btn-outline-secondary"> | |
| <i data-feather="download"></i> Export | |
| </button> | |
| </div> | |
| <div class="input-group" style="width: 250px;"> | |
| <input type="text" class="form-control form-control-sm" placeholder="Search clients..."> | |
| <button class="btn btn-sm btn-mint" type="button"> | |
| <i data-feather="search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card mb-4"> | |
| <div class="card-body"> | |
| <div class="table-responsive"> | |
| <table class="table table-hover align-middle"> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Client</th> | |
| <th>Username</th> | |
| <th>Barangay</th> | |
| <th>Age</th> | |
| <th>Services</th> | |
| <th>Status</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>1</td> | |
| <td> | |
| <div class="d-flex align-items-center"> | |
| <img src="http://static.photos/people/200x200/42" alt="Profile" class="profile-img-sm me-2"> | |
| <div> | |
| <div class="fw-bold">John Doe</div> | |
| <div class="text-muted small">john.doe@example.com</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td>DoeJ</td> | |
| <td>Poblacion</td> | |
| <td>28</td> | |
| <td> | |
| <span class="badge badge-mint me-1">SPES</span> | |
| <span class="badge badge-mint">Job Seeker</span> | |
| </td> | |
| <td><span class="badge bg-success">Active</span></td> | |
| <td> | |
| <button class="btn btn-sm btn-mint me-1" title="Edit"> | |
| <i data-feather="edit"></i> | |
| </button> | |
| <button class="btn btn-sm btn-outline-secondary" title="View"> | |
| <i data-feather="eye"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>2</td> | |
| <td> | |
| <div class="d-flex align-items-center"> | |
| <img src="http://static.photos/people/200x200/44" alt="Profile" class="profile-img-sm me-2"> | |
| <div> | |
| <div class="fw-bold">Maria Garcia</div> | |
| <div class="text-muted small">maria.garcia@example.com</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td>GarM</td> | |
| <td>Balili</td> | |
| <td>32</td> | |
| <td> | |
| <span class="badge badge-mint">TUPAD</span> | |
| </td> | |
| <td><span class="badge bg-success">Active</span></td> | |
| <td> | |
| <button class="btn btn-sm btn-mint me-1" title="Edit"> | |
| <i data-feather="edit"></i> | |
| </button> | |
| <button class="btn btn-sm btn-outline-secondary" title="View"> | |
| <i data-feather="eye"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>3</td> | |
| <td> | |
| <div class="d-flex align-items-center"> | |
| <img src="http://static.photos/people/200x200/45" alt="Profile" class="profile-img-sm me-2"> | |
| <div> | |
| <div class="fw-bold">Juan Dela Cruz</div> | |
| <div class="text-muted small">juan.delacruz@example.com</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td>CruJ</td> | |
| <td>Wangal</td> | |
| <td>25</td> | |
| <td> | |
| <span class="badge badge-mint me-1">Livelihood</span> | |
| <span class="badge badge-mint">LEEP</span> | |
| </td> | |
| <td><span class="badge bg-warning text-dark">Pending</span></td> | |
| <td> | |
| <button class="btn btn-sm btn-mint me-1" title="Edit"> | |
| <i data-feather="edit"></i> | |
| </button> | |
| <button class="btn btn-sm btn-outline-secondary" title="View"> | |
| <i data-feather="eye"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>4</td> | |
| <td> | |
| <div class="d-flex align-items-center"> | |
| <img src="http://static.photos/people/200x200/46" alt="Profile" class="profile-img-sm me-2"> | |
| <div> | |
| <div class="fw-bold">Anna Santos</div> | |
| <div class="text-muted small">anna.santos@example.com</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td>SanA</td> | |
| <td>Beckel</td> | |
| <td>19</td> | |
| <td> | |
| <span class="badge badge-mint">Job Start</span> | |
| </td> | |
| <td><span class="badge bg-success">Active</span></td> | |
| <td> | |
| <button class="btn btn-sm btn-mint me-1" title="Edit"> | |
| <i data-feather="edit"></i> | |
| </button> | |
| <button class="btn btn-sm btn-outline-secondary" title="View"> | |
| <i data-feather="eye"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>5</td> | |
| <td> | |
| <div class="d-flex align-items-center"> | |
| <img src="http://static.photos/people/200x200/47" alt="Profile" class="profile-img-sm me-2"> | |
| <div> | |
| <div class="fw-bold">Pedro Reyes</div> | |
| <div class="text-muted small">pedro.reyes@example.com</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td>ReyP</td> | |
| <td>Betag</td> | |
| <td>42</td> | |
| <td> | |
| <span class="badge badge-mint">GIP</span> | |
| </td> | |
| <td><span class="badge bg-danger">Inactive</span></td> | |
| <td> | |
| <button class="btn btn-sm btn-mint me-1" title="Edit"> | |
| <i data-feather="edit"></i> | |
| </button> | |
| <button class="btn btn-sm btn-outline-secondary" title="View"> | |
| <i data-feather="eye"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <nav aria-label="Page navigation"> | |
| <ul class="pagination justify-content-center"> | |
| <li class="page-item disabled"> | |
| <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> | |
| </li> | |
| <li class="page-item active"><a class="page-link" href="#">1</a></li> | |
| <li class="page-item"><a class="page-link" href="#">2</a></li> | |
| <li class="page-item"><a class="page-link" href="#">3</a></li> | |
| <li class="page-item"> | |
| <a class="page-link" href="#">Next</a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Add Client Modal --> | |
| <div class="modal fade" id="addClientModal" tabindex="-1" aria-labelledby="addClientModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="addClientModalLabel">Add New Client</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <form> | |
| <div class="row g-3"> | |
| <div class="col-md-4"> | |
| <label for="addLastName" class="form-label">Last Name</label> | |
| <input type="text" class="form-control" id="addLastName" required> | |
| </div> | |
| <div class="col-md-4"> | |
| <label for="addFirstName" class="form-label">First Name</label> | |
| <input type="text" class="form-control" id="addFirstName" required> | |
| </div> | |
| <div class="col-md-4"> | |
| <label for="addMiddleName" class="form-label">Middle Name</label> | |
| <input type="text" class="form-control" id="addMiddleName"> | |
| </div> | |
| <div class="col-md-3"> | |
| <label for="addAge" class="form-label">Age</label> | |
| <input type="number" class="form-control" id="addAge" required> | |
| </div> | |
| <div class="col-md-5"> | |
| <label for="addBirthdate" class="form-label">Birthdate</label> | |
| <input type="date" class="form-control" id="addBirthdate" required> | |
| </div> | |
| <div class="col-md-4"> | |
| <label for="addSex" class="form-label">Sex</label> | |
| <select class="form-select" id="addSex" required> | |
| <option value="" selected disabled>Select...</option> | |
| <option value="Male">Male</option> | |
| <option value="Female">Female</option> | |
| </select> | |
| </div> | |
| <div class="col-md-6"> | |
| <label for="addEmail" class="form-label">Email</label> | |
| <input type="email" class="form-control" id="addEmail" required> | |
| </div> | |
| <div class="col-md-6"> | |
| <label for="addPhone" class="form-label">Phone Number</label> | |
| <input type="tel" class="form-control" id="addPhone" required> | |
| </div> | |
| <div class="col-md-6"> | |
| <label for="addBarangay" class="form-label">Barangay</label> | |
| <select class="form-select" id="addBarangay" required> | |
| <option value="" selected disabled>Select Barangay</option> | |
| <option value="Alapang">Alapang</option> | |
| <option value="Alno">Alno</option> | |
| <option value="Ambiong">Ambiong</option> | |
| <option value="Bahong">Bahong</option> | |
| <option value="Balili">Balili</option> | |
| <option value="Beckel">Beckel</option> | |
| <option value="Betag">Betag</option> | |
| <option value="Bineng">Bineng</option> | |
| <option value="Cruz">Cruz</option> | |
| <option value="Lubas">Lubas</option> | |
| <option value="Pico">Pico</option> | |
| <option value="Poblacion">Poblacion</option> | |
| <option value="Puguis">Puguis</option> | |
| <option value="Shilan">Shilan</option> | |
| <option value="Tawang">Tawang</option> | |
| <option value="Wangal">Wangal</option> | |
| </select> | |
| </div> | |
| <div class="col-md-6"> | |
| <label for="addAddress" class="form-label">Complete Address</label> | |
| <input type="text" class="form-control" id="addAddress" required> | |
| </div> | |
| <div class="col-12"> | |
| <label class="form-label">Services</label> | |
| <div class="row g-2"> | |
| <div class="col-md-4"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="addSPES"> | |
| <label class="form-check-label" for="addSPES">SPES</label> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="addTUPAD"> | |
| <label class="form-check-label" for="addTUPAD">TUPAD</label> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="addLEEP"> | |
| <label class="form-check-label" for="addLEEP">LEEP</label> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="addJobStart"> | |
| <label class="form-check-label" for="addJobStart">Job Start</label> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="addGIP"> | |
| <label class="form-check-label" for="addGIP">GIP</label> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="addLivelihood"> | |
| <label class="form-check-label" for="addLivelihood">Livelihood</label> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="checkbox" id="addJobSeeker"> | |
| <label class="form-check-label" for="addJobSeeker">Job Seeker</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> | |
| <button type="button" class="btn btn-mint">Save Client</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |