diff --git a/public/application-status.php b/public/application-status.php index e69de29..9225208 100644 --- a/public/application-status.php +++ b/public/application-status.php @@ -0,0 +1,71 @@ + + + + + +
+ + + + +
+

Application List

+ + +
+
+

Job Title

+

Company Name

+ +
+
+
+
+
✓
+
+
+
2
+
+
+
3
+
+
+
+
+ + +
+
+

Job Title

+

Company Name

+ +
+
+
+
+
✓
+
+
+
2
+
+
+
3
+
+
+
+
+ + +
+
+ + + + diff --git a/public/assets/css/application-status.css b/public/assets/css/application-status.css new file mode 100644 index 0000000..b4cf8fd --- /dev/null +++ b/public/assets/css/application-status.css @@ -0,0 +1,131 @@ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #f4f4f4; +} + +.container { + display: flex; + padding: 20px; + min-height: 100vh; +} + +.sidebar { + width: 15%; + padding: 20px; + background-color: #f4f4f4; + border-right: 1px solid #ddd; +} + +.sidebar h3 { + margin-bottom: 10px; +} + +.sidebar ul { + list-style-type: none; + padding: 0; +} + +.sidebar ul li { + margin-bottom: 10px; +} + +.main-content { + width: 75%; + margin-left: 5%; +} + +.job-card { + border-radius: 12px; + width: 800px; + display: flex; + justify-content: space-between; + padding: 15px; + background-color: #fff; + border: 1px solid #ddd; + margin-bottom: 20px; +} + +.job-info { + width: 50%; +} +.job-info h3 { + margin: 0; + font-size: 18px; +} + +.job-info p { + margin: 5px 0; +} + +.details-button { + padding: 5px 10px; + background-color: #007bff; + color: #fff; + border: none; + cursor: pointer; + border-radius: 3px; +} + +.status-bar { + width: 40%; + display: flex; + align-items: center; +} + +.step-bar { + display: flex; + align-items: center; +} + +.step { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + border-radius: 50%; + border: 2px solid #007bff; + background-color: #fff; + position: relative; + z-index: 1; +} + +.step-number { + font-size: 16px; + font-weight: bold; + color: #007bff; +} + +.completed .step-number { + color: #fff; +} + +.completed { + background-color: #007bff; +} + +.active .step-number { + color: #fff; +} + +.active { + background-color: #007bff; +} + +.step + .step { + margin-left: 20px; +} + +.step + .step::before { + content: ''; + position: absolute; + top: 50%; + left: -20px; + width: 20px; + height: 2px; + background-color: #007bff; + z-index: 0; + transform: translateY(-50%); +} diff --git a/public/assets/css/job-details.css b/public/assets/css/job-details.css index 9548517..9868df0 100644 --- a/public/assets/css/job-details.css +++ b/public/assets/css/job-details.css @@ -2,7 +2,7 @@ body { font-family: Arial, sans-serif; margin: 0; padding: 0; - background-color: #f4f4f4; + background-color: white; } .job-details-page { @@ -13,13 +13,16 @@ body { /* Left Sidebar */ .sidebar-left { - width: 25%; - background-color: #333; - color: #fff; + width: 20%; + background-color: #f2f2f2; + color: black; padding: 20px; - position: fixed; - height: 100%; + position: sticky; + top: 70px; + height: 600px; overflow-y: auto; + border-radius: 20px; + margin: 10px; } .sidebar-left h2 { @@ -39,6 +42,8 @@ body { .sidebar-left ul { list-style: none; padding: 0; + display: flex; + flex-direction: column !important; } .sidebar-left ul li { @@ -51,7 +56,6 @@ body { /* Right Section - Job Details */ .job-details-section { - margin-left: 25%; width: 75%; padding: 20px; overflow-y: auto; diff --git a/public/assets/css/job-posting.css b/public/assets/css/job-posting.css new file mode 100644 index 0000000..b0387e3 --- /dev/null +++ b/public/assets/css/job-posting.css @@ -0,0 +1,142 @@ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #f4f4f4; +} + +.container { + padding: 20px; +} + +.full-width { + width: 100%; +} + +.upload-section { + display: flex; + justify-content: flex-end; + margin-bottom: 20px; +} + +.upload-button { + padding: 10px 20px; + background-color: #007bff; + color: #fff; + border: none; + cursor: pointer; + border-radius: 3px; +} + +.main-content { + min-height: 100vh; +} + +.job-card { + display: flex; + justify-content: space-between; + padding: 15px; + background-color: #fff; + border: 1px solid #ddd; + margin-bottom: 20px; +} + +.job-info h3 { + margin: 0; + font-size: 18px; +} + +.job-info p { + margin: 5px 0; +} + +.details-button { + padding: 5px 10px; + background-color: #007bff; + color: #fff; + border: none; + cursor: pointer; + border-radius: 3px; +} + +.response-count { + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; +} + +/* Popup Styling */ +.popup { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + justify-content: center; + align-items: center; +} + +.popup-content { + background-color: #fff; + padding: 20px; + border-radius: 5px; + width: 400px; + max-width: 90%; + position: relative; +} + +.close-button { + position: absolute; + top: 10px; + right: 10px; + font-size: 20px; + cursor: pointer; +} + +.popup-content h3 { + margin: 0 0 20px; +} + +.popup-content label { + display: block; + margin: 10px 0 5px; +} + +.popup-content input, +.popup-content textarea, +.popup-content select { + width: 100%; + padding: 8px; + margin-bottom: 15px; + border: 1px solid #ddd; + border-radius: 3px; +} + +.submit-button { + padding: 10px 15px; + background-color: #007bff; + color: #fff; + border: none; + cursor: pointer; + border-radius: 3px; + width: 100%; +} + +.job-actions { + margin-top: 10px; +} + +.edit-button, .delete-button { + margin-right: 10px; + color: blue; + font-family: 'Times New Roman', Times, serif; + font-size: 14px; + cursor: pointer; +} + +.delete-button{ + color: red; +} diff --git a/public/assets/js/job-posting.js b/public/assets/js/job-posting.js new file mode 100644 index 0000000..3cebc5d --- /dev/null +++ b/public/assets/js/job-posting.js @@ -0,0 +1,89 @@ +function showPopup() { + document.getElementById('upload-popup').style.display = 'flex'; +} + +function hidePopup() { + document.getElementById('upload-popup').style.display = 'none'; +} + +function addJobCard(event) { + event.preventDefault(); + + // Get form values + const jobTitle = document.getElementById('job-title').value; + const companyName = document.getElementById('company-name').value; + const description = document.getElementById('description').value; + const duration = document.getElementById('duration').value; + const location = document.getElementById('location').value; + const workMode = document.getElementById('work-mode').value; + + // Create a new job card + const jobCard = document.createElement('div'); + jobCard.classList.add('job-card'); + + jobCard.innerHTML = ` +
+

${jobTitle}

+

${companyName}

+

Location: ${location}

+

Work Mode: ${workMode}

+ +
+ Edit + Delete +
+
+
+ Responses: 0 +
+ `; + + // Append the new card to the main content section + const mainContent = document.querySelector('.main-content'); + mainContent.appendChild(jobCard); + + // Attach event listeners for edit and delete buttons + const editButton = jobCard.querySelector('.edit-button'); + const deleteButton = jobCard.querySelector('.delete-button'); + + editButton.addEventListener('click', () => editJobCard(jobCard)); + deleteButton.addEventListener('click', () => deleteJobCard(jobCard)); + + // Clear the form and hide the popup + document.querySelector('form').reset(); + hidePopup(); +} + +function editJobCard(jobCard) { + // Populate the form with the existing job details + const jobTitle = jobCard.querySelector('.job-info h3').textContent; + const companyName = jobCard.querySelector('.job-info p:nth-of-type(1)').textContent; + const location = jobCard.querySelector('.job-info p:nth-of-type(2)').textContent.replace('Location: ', ''); + const workMode = jobCard.querySelector('.job-info p:nth-of-type(3)').textContent.replace('Work Mode: ', ''); + + document.getElementById('job-title').value = jobTitle; + document.getElementById('company-name').value = companyName; + document.getElementById('description').value = description; // Add this line to populate the description field + document.getElementById('duration').value = duration; // Add this line to populate the duration field + document.getElementById('location').value = location; + document.getElementById('work-mode').value = workMode; + + // Remove the old job card and show the popup for editing + jobCard.remove(); + showPopup(); +} + +function deleteJobCard(jobCard) { + // Remove the job card from the main content + jobCard.remove(); +} + +// Attach event listeners to edit and delete buttons +const editButtons = document.querySelectorAll('.edit-button'); +const deleteButtons = document.querySelectorAll('.delete-button'); + +editButtons.forEach(button => button.addEventListener('click', () => editJobCard(button.parentElement.parentElement.parentElement))); +deleteButtons.forEach(button => button.addEventListener('click', () => deleteJobCard(button.parentElement.parentElement.parentElement))); + + + diff --git a/public/job-posting.php b/public/job-posting.php index e69de29..2fa5298 100644 --- a/public/job-posting.php +++ b/public/job-posting.php @@ -0,0 +1,74 @@ + + + + + + + +
+ +
+ +
+ + +
+

Job Postings

+ + +
+
+

Job Title

+

Company Name

+

Location: City, State

+

Work Mode: Remote/On-site

+ +
+ Edit + Delete +
+
+
+ Responses: 24 +
+
+ +
+
+ + + + + + + diff --git a/src/templates/job-posting-card2.php b/src/templates/job-posting-card2.php new file mode 100644 index 0000000..27e68a6 --- /dev/null +++ b/src/templates/job-posting-card2.php @@ -0,0 +1,17 @@ +
+
+

${jobTitle}

+

${companyName}

+

Location: ${location}

+

Work Mode: ${workMode}

+ +
+
+ Edit + Delete +
+
+ Responses: 0 +
+
+ \ No newline at end of file