Auto commit: 2025-09-17T13:27:14.550Z

This commit is contained in:
Flatlogic Bot 2025-09-17 13:27:14 +00:00
parent 56f007f2d4
commit 08116d4507
3 changed files with 65 additions and 5 deletions

View File

@ -105,4 +105,15 @@ body {
text-align: center;
font-size: 0.9rem;
color: #666;
}
/* Search Form Toggle */
#search-toggle-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
#job-search-form {
transition: all 0.3s ease-in-out;
}

View File

@ -31,4 +31,27 @@ style.innerHTML = `
}
}
`;
document.head.appendChild(style);
document.head.appendChild(style);
// Toggle for the job search form
document.addEventListener('DOMContentLoaded', function () {
const searchToggleBtn = document.getElementById('search-toggle-btn');
const jobSearchForm = document.getElementById('job-search-form');
if (searchToggleBtn && jobSearchForm) {
searchToggleBtn.addEventListener('click', function () {
jobSearchForm.classList.toggle('d-none');
// Optional: Change button text/icon
const isHidden = jobSearchForm.classList.contains('d-none');
if (isHidden) {
searchToggleBtn.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
Search Job Listings`;
} else {
searchToggleBtn.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
Close Search`;
}
});
}
});

View File

@ -72,11 +72,37 @@ $jobs = [
<div class="container">
<h1>Find Your Next Opportunity</h1>
<p class="lead mb-4">Join our team and help us build the future of work.</p>
<div class="col-md-6 mx-auto">
<div class="input-group">
<input type="text" class="form-control form-control-lg" placeholder="Search for jobs...">
<button class="btn btn-secondary" type="button">Search</button>
<div class="col-md-8 mx-auto">
<div class="text-center">
<button id="search-toggle-btn" class="btn btn-primary btn-lg" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
Search Job Listings
</button>
</div>
<form id="job-search-form" class="d-none mt-4 p-4 border rounded bg-light">
<div class="row g-3">
<div class="col-md-5">
<label for="job-title" class="form-label">Job title</label>
<input type="text" class="form-control" id="job-title" placeholder="e.g., Product Manager">
</div>
<div class="col-md-4">
<label for="work-format" class="form-label">Work format</label>
<select id="work-format" class="form-select">
<option selected>Choose...</option>
<option>Full-time</option>
<option>Contract</option>
<option>Part-time</option>
</select>
</div>
<div class="col-md-3">
<label for="location" class="form-label">Location</label>
<input type="text" class="form-control" id="location" placeholder="e.g., New York">
</div>
</div>
<div class="text-center mt-4">
<button type="submit" class="btn btn-primary">Find Jobs</button>
</div>
</form>
</div>
</div>
</header>