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 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/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); | |
| } | |
| .job-card { | |
| cursor: pointer; | |
| } | |
| .profile-img { | |
| width: 100px; | |
| height: 100px; | |
| object-fit: cover; | |
| border: 3px solid var(--mint-green); | |
| } | |
| .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); | |
| } | |
| </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/42" alt="Profile" class="rounded-circle profile-img mb-2"> | |
| <h5>John Doe</h5> | |
| <p class="text-muted small">Client</p> | |
| </div> | |
| <ul class="nav flex-column"> | |
| <li class="nav-item"> | |
| <a class="nav-link sidebar-link active" href="#"> | |
| <i data-feather="home"></i> Dashboard | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link sidebar-link" href="#profile-section"> | |
| <i data-feather="user"></i> My Profile | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link sidebar-link" href="#jobs-section"> | |
| <i data-feather="briefcase"></i> Job Postings | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link sidebar-link" href="#"> | |
| <i data-feather="settings"></i> Settings | |
| </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 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-4 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">Applied Jobs</h6> | |
| <h2 class="card-text">3</h2> | |
| </div> | |
| <i data-feather="file-text" width="40" height="40"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-4 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">Available Jobs</h6> | |
| <h2 class="card-text">12</h2> | |
| </div> | |
| <i data-feather="briefcase" width="40" height="40"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-4 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">Messages</h6> | |
| <h2 class="card-text">2</h2> | |
| </div> | |
| <i data-feather="mail" width="40" height="40"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Profile Section --> | |
| <div class="card mb-4" id="profile-section"> | |
| <div class="card-header d-flex justify-content-between align-items-center"> | |
| <h5 class="mb-0">My Profile</h5> | |
| <button class="btn btn-sm btn-mint"> | |
| <i data-feather="edit"></i> Edit | |
| </button> | |
| </div> | |
| <div class="card-body"> | |
| <div class="row"> | |
| <div class="col-md-4 text-center"> | |
| <img src="http://static.photos/people/200x200/42" alt="Profile" class="rounded-circle profile-img mb-3"> | |
| <h5>John Doe</h5> | |
| <p class="text-muted">Client</p> | |
| <button class="btn btn-sm btn-mint"> | |
| <i data-feather="upload"></i> Update Photo | |
| </button> | |
| </div> | |
| <div class="col-md-8"> | |
| <div class="row mb-3"> | |
| <div class="col-md-6"> | |
| <p><strong>Username:</strong> DoeJ</p> | |
| </div> | |
| <div class="col-md-6"> | |
| <p><strong>Email:</strong> john.doe@example.com</p> | |
| </div> | |
| </div> | |
| <div class="row mb-3"> | |
| <div class="col-md-6"> | |
| <p><strong>Age:</strong> 28</p> | |
| </div> | |
| <div class="col-md-6"> | |
| <p><strong>Sex:</strong> Male</p> | |
| </div> | |
| </div> | |
| <div class="row mb-3"> | |
| <div class="col-md-6"> | |
| <p><strong>Marital Status:</strong> Single</p> | |
| </div> | |
| <div class="col-md-6"> | |
| <p><strong>Education:</strong> College</p> | |
| </div> | |
| </div> | |
| <div class="row mb-3"> | |
| <div class="col-md-6"> | |
| <p><strong>Barangay:</strong> Poblacion</p> | |
| </div> | |
| <div class="col-md-6"> | |
| <p><strong>Address:</strong> 123 Main Street</p> | |
| </div> | |
| </div> | |
| <div class="row mb-3"> | |
| <div class="col-md-12"> | |
| <p><strong>Services:</strong> SPES, Job Seeker (Local), Looking for IT Support Specialist</p> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <button class="btn btn-mint"> | |
| <i data-feather="download"></i> Download CV | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Jobs Section --> | |
| <div class="card" id="jobs-section"> | |
| <div class="card-header"> | |
| <h5 class="mb-0">Available Job Postings</h5> | |
| </div> | |
| <div class="card-body"> | |
| <div class="table-responsive"> | |
| <table class="table table-hover"> | |
| <thead> | |
| <tr> | |
| <th>Position</th> | |
| <th>Company</th> | |
| <th>Location</th> | |
| <th>Date Posted</th> | |
| <th>Status</th> | |
| <th>Action</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="job-card" data-bs-toggle="modal" data-bs-target="#jobModal1"> | |
| <td>IT Support Specialist</td> | |
| <td>Tech Solutions Inc.</td> | |
| <td>La Trinidad</td> | |
| <td>2023-05-15</td> | |
| <td><span class="badge bg-success">Available</span></td> | |
| <td> | |
| <button class="btn btn-sm btn-mint">Apply</button> | |
| </td> | |
| </tr> | |
| <tr class="job-card" data-bs-toggle="modal" data-bs-target="#jobModal2"> | |
| <td>Customer Service Representative</td> | |
| <td>Global Services Co.</td> | |
| <td>Baguio City</td> | |
| <td>2023-05-10</td> | |
| <td><span class="badge bg-success">Available</span></td> | |
| <td> | |
| <button class="btn btn-sm btn-mint">Apply</button> | |
| </td> | |
| </tr> | |
| <tr class="job-card" data-bs-toggle="modal" data-bs-target="#jobModal3"> | |
| <td>Administrative Assistant</td> | |
| <td>Prime Office Solutions</td> | |
| <td>La Trinidad</td> | |
| <td>2023-05-05</td> | |
| <td><span class="badge bg-warning text-dark">Few slots left</span></td> | |
| <td> | |
| <button class="btn btn-sm btn-mint">Apply</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Job Modal 1 --> | |
| <div class="modal fade" id="jobModal1" tabindex="-1" aria-labelledby="jobModal1Label" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="jobModal1Label">IT Support Specialist</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="row mb-3"> | |
| <div class="col-md-6"> | |
| <p><strong>Company:</strong> Tech Solutions Inc.</p> | |
| </div> | |
| <div class="col-md-6"> | |
| <p><strong>Location:</strong> La Trinidad, Benguet</p> | |
| </div> | |
| </div> | |
| <div class="row mb-3"> | |
| <div class="col-md-6"> | |
| <p><strong>Salary Range:</strong> ₱15,000 - ₱20,000/month</p> | |
| </div> | |
| <div class="col-md-6"> | |
| <p><strong>Employment Type:</strong> Full-time</p> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <h6>Job Description:</h6> | |
| <p>Provide technical assistance to computer users. Answer questions or resolve computer problems for clients in person, via telephone, or electronically. May provide assistance concerning the use of computer hardware and software, including printing, installation, word processing, electronic mail, and operating systems.</p> | |
| </div> | |
| <div class="mb-3"> | |
| <h6>Qualifications:</h6> | |
| <ul> | |
| <li>Bachelor's degree in IT, Computer Science or related field</li> | |
| <li>At least 1 year experience in IT support</li> | |
| <li>Knowledge of computer hardware and software</li> | |
| <li>Good communication skills</li> | |
| <li>Ability to diagnose and resolve technical issues</li> | |
| </ul> | |
| </div> | |
| <div class="mb-3"> | |
| <h6>Requirements:</h6> | |
| <ul> | |
| <li>Resume/CV</li> | |
| <li>Transcript of Records</li> | |
| <li>NBI Clearance</li> | |
| <li>2x2 Photo</li> | |
| </ul> | |
| </div> | |
| <div class="mb-3"> | |
| <h6>How to Apply:</h6> | |
| <p>Submit your application documents to our office at Tech Solutions Inc., Km. 5, La Trinidad, Benguet or email to hr@techsolutions.com</p> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | |
| <button type="button" class="btn btn-mint">Apply for this Job</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Job Modal 2 --> | |
| <div class="modal fade" id="jobModal2" tabindex="-1" aria-labelledby="jobModal2Label" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="jobModal2Label">Customer Service Representative</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <!-- Similar structure as Job Modal 1 --> | |
| <p>Job details for Customer Service Representative...</p> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | |
| <button type="button" class="btn btn-mint">Apply for this Job</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Job Modal 3 --> | |
| <div class="modal fade" id="jobModal3" tabindex="-1" aria-labelledby="jobModal3Label" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="jobModal3Label">Administrative Assistant</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <!-- Similar structure as Job Modal 1 --> | |
| <p>Job details for Administrative Assistant...</p> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | |
| <button type="button" class="btn btn-mint">Apply for this Job</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> | |