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>Services Management | 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); | |
| } | |
| .service-card { | |
| transition: all 0.3s; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .service-icon { | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background-color: var(--mint-light); | |
| margin-bottom: 15px; | |
| } | |
| </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" 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 active" 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">Services Management</h1> | |
| <div class="btn-toolbar mb-2 mb-md-0"> | |
| <button type="button" class="btn btn-sm btn-mint" data-bs-toggle="modal" data-bs-target="#addServiceModal"> | |
| <i data-feather="plus"></i> Add Service | |
| </button> | |
| </div> | |
| </div> | |
| <div class="row g-4"> | |
| <!-- SPES Card --> | |
| <div class="col-md-6 col-lg-4"> | |
| <div class="card service-card h-100"> | |
| <div class="card-body text-center"> | |
| <div class="service-icon mx-auto"> | |
| <i data-feather="book" width="24" height="24" class="text-mint"></i> | |
| </div> | |
| <h5 class="card-title">SPES</h5> | |
| <p class="card-text">Special Program for Employment of Students - Provides temporary employment to poor but deserving students during summer and/or Christmas vacations.</p> | |
| <div class="d-flex justify-content-center gap-2"> | |
| <button class="btn btn-sm btn-mint"> | |
| <i data-feather="edit"></i> Edit | |
| </button> | |
| <button class="btn btn-sm btn-outline-danger"> | |
| <i data-feather="trash-2"></i> Remove | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TUPAD Card --> | |
| <div class="col-md-6 col-lg-4"> | |
| <div class="card service-card h-100"> | |
| <div class="card-body text-center"> | |
| <div class="service-icon mx-auto"> | |
| <i data-feather="tool" width="24" height="24" class="text-mint"></i> | |
| </div> | |
| <h5 class="card-title">TUPAD</h5> | |
| <p class="card-text">Tulong Panghanapbuhay sa Ating Disadvantaged/Displaced Workers - Emergency employment for displaced workers, underemployed, and seasonal workers.</p> | |
| <div class="d-flex justify-content-center gap-2"> | |
| <button class="btn btn-sm btn-mint"> | |
| <i data-feather="edit"></i> Edit | |
| </button> | |
| <button class="btn btn-sm btn-outline-danger"> | |
| <i data-feather="trash-2"></i> Remove | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- LEEP Card --> | |
| <div class="col-md-6 col-lg-4"> | |
| <div class="card service-card h-100"> | |
| <div class="card-body text-center"> | |
| <div class="service-icon mx-auto"> | |
| <i data-feather="clipboard" width="24" height="24" class="text-mint"></i> | |
| </div> | |
| <h5 class="card-title">LEEP</h5> | |
| <p class="card-text">Local Emergency Employment Program - Provides emergency employment to workers in the informal sector affected by natural or man-made disasters.</p> | |
| <div class="d-flex justify-content-center gap-2"> | |
| <button class="btn btn-sm btn-mint"> | |
| <i data-feather="edit"></i> Edit | |
| </button> | |
| <button class="btn btn-sm btn-outline-danger"> | |
| <i data-feather="trash-2"></i> Remove | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Job Start Card --> | |
| <div class="col-md-6 col-lg-4"> | |
| <div class="card service-card h-100"> | |
| <div class="card-body text-center"> | |
| <div class="service-icon mx-auto"> | |
| <i data-feather="play" width="24" height="24" class="text-mint"></i> | |
| </div> | |
| <h5 class="card-title">Job Start</h5> | |
| <p class="card-text">A program that provides first-time jobseekers with training, internship opportunities, and job placement assistance.</p> | |
| <div class="d-flex justify-content-center gap-2"> | |
| <button class="btn btn-sm btn-mint"> | |
| <i data-feather="edit"></i> Edit | |
| </button> | |
| <button class="btn btn-sm btn-outline-danger"> | |
| <i data-feather="trash-2"></i> Remove | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- GIP Card --> | |
| <div class="col-md-6 col-lg-4"> | |
| <div class="card service-card h-100"> | |
| <div class="card-body text-center"> | |
| <div class="service-icon mx-auto"> | |
| <i data-feather="award" width="24" height="24" class="text-mint"></i> | |
| </div> | |
| <h5 class="card-title">GIP</h5> | |
| <p class="card-text">Government Internship Program - Provides young workers, particularly the poor/indigent and young workers, opportunity to demonstrate their talents and skills.</p> | |
| <div class="d-flex justify-content-center gap-2"> | |
| <button class="btn btn-sm btn-mint"> | |
| <i data-feather="edit"></i> Edit | |
| </button> | |
| <button class="btn btn-sm btn-outline-danger"> | |
| <i data-feather="trash-2"></i> Remove | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Livelihood Card --> | |
| <div class="col-md-6 col-lg-4"> | |
| <div class="card service-card h-100"> | |
| <div class="card-body text-center"> | |
| <div class="service-icon mx-auto"> | |
| <i data-feather="dollar-sign" width="24" height="24" class="text-mint"></i> | |
| </div> | |
| <h5 class="card-title">Livelihood</h5> | |
| <p class="card-text">Provides livelihood assistance to workers in the informal sector, vulnerable workers, and marginalized sectors.</p> | |
| <div class="d-flex justify-content-center gap-2"> | |
| <button class="btn btn-sm btn-mint"> | |
| <i data-feather="edit"></i> Edit | |
| </button> | |
| <button class="btn btn-sm btn-outline-danger"> | |
| <i data-feather="trash-2"></i> Remove | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Add Service Modal --> | |
| <div class="modal fade" id="addServiceModal" tabindex="-1" aria-labelledby="addServiceModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="addServiceModalLabel">Add New Service</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <form> | |
| <div class="mb-3"> | |
| <label for="serviceName" class="form-label">Service Name</label> | |
| <input type="text" class="form-control" id="serviceName" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="serviceAcronym" class="form-label">Acronym (Optional)</label> | |
| <input type="text" class="form-control" id="serviceAcronym"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="serviceDescription" class="form-label">Description</label> | |
| <textarea class="form-control" id="serviceDescription" rows="3" required></textarea> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="serviceIcon" class="form-label">Icon</label> | |
| <select class="form-select" id="serviceIcon" required> | |
| <option value="" selected disabled>Select icon...</option> | |
| <option value="book">Book (SPES)</option> | |
| <option value="tool">Tool (TUPAD)</option> | |
| <option value="clipboard">Clipboard (LEEP)</option> | |
| <option value="play">Play (Job Start)</option> | |
| <option value="award">Award (GIP)</option> | |
| <option value="dollar-sign">Dollar (Livelihood)</option> | |
| <option value="user">User (Job Seeker)</option> | |
| </select> | |
| </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">Add Service</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> | |