209 lines
7.9 KiB
PHP
209 lines
7.9 KiB
PHP
<?PHP
|
|
|
|
require_once "./admin/db/config.php";
|
|
?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<?PHP include './includes/links.php'; ?>
|
|
<link rel="canonical" href="<?php echo $BASE_URL; ?>/careers">
|
|
<title>Software Development Services Careers at Tech4Biz Solutions</title>
|
|
<meta name="description" content="Explore rewarding careers in software development services at Tech4Biz Solutions.
|
|
Join our team and drive innovative solutions in technology."/>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<?PHP include './includes/spinner.php'; ?>
|
|
|
|
<?PHP include './includes/header.php'; ?>
|
|
|
|
|
|
<div class="careers-details-area pt-100 pb-70">
|
|
<div class="container position-relative">
|
|
<div class="row ptb-70 form-flex">
|
|
<h1 class="careers-details-title">Join our growing <br>team today!</h1>
|
|
<p class="search-title">Explore all the most exciting job roles based on your interest and study major</p>
|
|
<div class="see-open-positions">
|
|
<a href="search-job.php" class="see-open-positions read-more-button">See open positions</a>
|
|
</div>
|
|
<!-- <form name="countries" class="form d-flex" id="">
|
|
<div class="form-group-careers">
|
|
<span class="form-arrow"><i class="bx bx-chevron-down"></i></span>
|
|
<select name="country" id="country" class="dropdown">
|
|
<option disabled>Search Jobs</option>
|
|
<option value="Angular JS">Angular JS</option>
|
|
<option value="Node Js">Node Js</option>
|
|
<option value="React Native">React Native</option>
|
|
<option value="React JS">React JS</option>
|
|
<option value="iOS">iOS</option>
|
|
<option value="Android">Android</option>
|
|
<option value="PHP">PHP</option>
|
|
<option value="IONIC">IONIC</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group-careers">
|
|
<span class="form-arrow"><i class="bx bx-chevron-down"></i></span>
|
|
<select name="country" id="country" class="dropdown">
|
|
<option disabled>Search for location</option>
|
|
<option value="Afghanistan">Afghanistan</option>
|
|
<option value="Albania">Albania</option>
|
|
<option value="Algeria">Algeria</option>
|
|
<option value="American Samoa">American Samoa</option>
|
|
<option value="Andorra">Andorra</option>
|
|
<option value="Angola">Angola</option>
|
|
<option value="Armenia">Armenia</option>
|
|
<option value="Aruba">Aruba</option>
|
|
<option value="Australia">Australia</option>
|
|
<option value="Austria">Austria</option>
|
|
<option value="Azerbaijan">Azerbaijan</option>
|
|
<option value="Bahamas">Bahamas</option>
|
|
<option value="Bahrain">Bahrain</option>
|
|
<option value="Bangladesh">Bangladesh</option>
|
|
<option value="Barbados">Barbados</option>
|
|
<option value="Belarus">Belarus</option>
|
|
<option value="Belgium">Belgium</option>
|
|
<option value="Belize">Belize</option>
|
|
</select>
|
|
</div>
|
|
<div class="job-search-button">
|
|
<button>Search</button>
|
|
</div>
|
|
</form> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
const form = document.querySelector(".form");
|
|
const dropdowns = document.querySelectorAll(".dropdown");
|
|
|
|
if (dropdowns.length > 0) {
|
|
dropdowns.forEach((dropdown) => {
|
|
createCustomDropdown(dropdown);
|
|
});
|
|
}
|
|
|
|
if (form !== null) {
|
|
form.addEventListener("submit", (e) => {
|
|
e.preventDefault();
|
|
});
|
|
}
|
|
|
|
|
|
function createCustomDropdown(dropdown) {
|
|
|
|
const options = dropdown.querySelectorAll("option");
|
|
const optionsArr = Array.prototype.slice.call(options);
|
|
|
|
const customDropdown = document.createElement("div");
|
|
customDropdown.classList.add("dropdown");
|
|
dropdown.insertAdjacentElement("afterend", customDropdown);
|
|
|
|
|
|
const selected = document.createElement("div");
|
|
selected.classList.add("dropdown-select");
|
|
selected.textContent = optionsArr[0].textContent;
|
|
customDropdown.appendChild(selected);
|
|
|
|
const menu = document.createElement("div");
|
|
menu.classList.add("dropdown-menu");
|
|
customDropdown.appendChild(menu);
|
|
selected.addEventListener("click", toggleDropdown.bind(menu));
|
|
|
|
const search = document.createElement("input");
|
|
search.placeholder = "Search...";
|
|
search.type = "text";
|
|
search.classList.add("dropdown-menu-search");
|
|
menu.appendChild(search);
|
|
|
|
const menuInnerWrapper = document.createElement("div");
|
|
menuInnerWrapper.classList.add("dropdown-menu-inner");
|
|
menu.appendChild(menuInnerWrapper);
|
|
|
|
optionsArr.forEach((option) => {
|
|
const item = document.createElement("div");
|
|
item.classList.add("dropdown-menu-item");
|
|
item.dataset.value = option.value;
|
|
item.textContent = option.textContent;
|
|
menuInnerWrapper.appendChild(item);
|
|
|
|
item.addEventListener(
|
|
"click",
|
|
setSelected.bind(item, selected, dropdown, menu)
|
|
);
|
|
});
|
|
|
|
menuInnerWrapper.querySelector("div").classList.add("selected");
|
|
|
|
search.addEventListener("input", filterItems.bind(search, optionsArr, menu));
|
|
document.addEventListener(
|
|
"click",
|
|
closeIfClickedOutside.bind(customDropdown, menu)
|
|
);
|
|
dropdown.style.display = "none";
|
|
}
|
|
function toggleDropdown() {
|
|
if (this.offsetParent !== null) {
|
|
this.style.display = "none";
|
|
} else {
|
|
this.style.display = "block";
|
|
this.querySelector("input").focus();
|
|
}
|
|
}
|
|
function setSelected(selected, dropdown, menu) {
|
|
const value = this.dataset.value;
|
|
const label = this.textContent;
|
|
|
|
selected.textContent = label;
|
|
dropdown.value = value;
|
|
|
|
menu.style.display = "none";
|
|
menu.querySelector("input").value = "";
|
|
menu.querySelectorAll("div").forEach((div) => {
|
|
if (div.classList.contains("is-select")) {
|
|
div.classList.remove("is-select");
|
|
}
|
|
if (div.offsetParent === null) {
|
|
div.style.display = "block";
|
|
}
|
|
});
|
|
this.classList.add("is-select");
|
|
}
|
|
function filterItems(itemsArr, menu) {
|
|
const customOptions = menu.querySelectorAll(".dropdown-menu-inner div");
|
|
const value = this.value.toLowerCase();
|
|
const filteredItems = itemsArr.filter((item) =>
|
|
item.value.toLowerCase().includes(value)
|
|
);
|
|
const indexesArr = filteredItems.map((item) => itemsArr.indexOf(item));
|
|
|
|
itemsArr.forEach((option) => {
|
|
if (!indexesArr.includes(itemsArr.indexOf(option))) {
|
|
customOptions[itemsArr.indexOf(option)].style.display = "none";
|
|
} else {
|
|
if (customOptions[itemsArr.indexOf(option)].offsetParent === null) {
|
|
customOptions[itemsArr.indexOf(option)].style.display = "block";
|
|
}
|
|
}
|
|
});
|
|
}
|
|
function closeIfClickedOutside(menu, e) {
|
|
if (
|
|
e.target.closest(".dropdown") === null &&
|
|
e.target !== this &&
|
|
menu.offsetParent !== null
|
|
) {
|
|
menu.style.display = "none";
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<?PHP include './includes/footer.php'; ?>
|
|
|
|
<?PHP include './includes/scripts.php'; ?>
|
|
</body>
|
|
</html>
|