|
Server : LiteSpeed System : Linux terra.hostitbro.com 5.14.0-611.54.3.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Thu May 7 16:31:24 EDT 2026 x86_64 User : outerorb ( 1091) PHP Version : 8.1.34 Disable Function : mail Directory : /home2/outerorb/dev.outerorbittech.com/oot/ | |
|
Path: //home2/outerorb/dev.outerorbittech.com/oot/career_form.php
Size: 30 KB
Permissions: 0644
<?php
include_once("include/main.inc.php");
@extract($_REQUEST);
$admin_res = getAdminDetails();
$career_name = ucwords(str_replace('-', ' ', $career_name));
$career_qry1 = mysqli_query($GLOBALS['dbconn'], "select * from casestudy_tbl where catName='$career_name'");
$careerForm = mysqli_fetch_array($career_qry1);
$page_metatitle = 'Career - ' . COMPANY;
$page_metakey = 'Career - ' . COMPANY;
$page_metadesc = 'Career - ' . COMPANY;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php include 'app_top.php'; ?>
</head>
<body>
<?php include 'app_header.php'; ?>
<!-- Banner Section -->
<section class="heading_banner"
style="background-image: url(<?= theme_url; ?>img/career_details.jpg)">
<div id="particles-js"></div>
<div class="container">
<div class="row">
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-center">
<h1 class="cat_title">Careers - <?= COMPANY; ?></h1>
<div class="clearfix"></div>
</div>
</div>
</div>
</section>
<!-- Breadcrumb Section -->
<div class="inner_breadcrumb hidden_xs">
<div class="container">
<div class="row">
<div class="col-12">
<ul class="breadcrumb">
<li><a href="<?= site_url; ?>" title="Home">Home</a></li>
<li class="active">Careers</li>
</ul>
</div>
</div>
</div>
</div>
<style>
label.error {
color: #FB3A3A;
font-weight: normal;
margin-bottom: 0;
font-size: 15px;
}
.rednot {
color: red;
}
.career-opportunity-section {
padding: 2rem 1rem;
background-color: #e4ecf1;
}
.opportunity-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 432px 1fr;
gap: 1rem;
align-items: start;
}
.role-info-card {
background: white;
border-radius: 0.5rem;
padding: 2rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
position: sticky;
top: 1rem;
height: fit-content;
}
.role-title {
font-size: 1.3rem;
color: var(--surface-color);
margin-bottom: 1.5rem;
font-weight: 600;
}
.role-specs .spec-item {
margin: 1rem 0;
color: var(--font-black);
font-size: 0.95rem;
line-height: 1.5;
}
.role-specs strong {
color: #111827;
font-weight: 500;
display: inline-block;
width: 140px;
}
.work-location {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #e5e7eb;
}
.location-heading {
font-size: 1.25rem;
color: var(--surface-color);
margin-bottom: 1rem;
font-weight: 500;
}
.location-text {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--font-black);
font-size: 0.95rem;
}
.candidate-form-wrapper {
background: white;
border-radius: 0.5rem;
padding: 2rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.form-main-heading {
font-size: 1.5rem;
color: var(--surface-color);
margin-bottom: 0.5rem;
font-weight: 600;
}
.required-field-notice {
color: #6b7280;
font-size: 0.875rem;
margin-bottom: 1.5rem;
}
.input-field-group {
margin-bottom: 1.25rem;
}
.dual-input-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.triple-input-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
.field-label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
}
.text-input,
.dropdown-select,
.multiline-input {
width: 100%;
padding: 0.75rem;
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
font-size: 0.875rem;
transition: all 0.2s ease;
}
.text-input:focus,
.dropdown-select:focus,
.multiline-input:focus {
outline: none;
border-color: var(--surface-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.dropdown-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
}
.multiline-input {
min-height: 100px;
resize: vertical;
}
.document-upload {
position: relative;
display: inline-block;
width: 100%;
}
.file-input {
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.upload-prompt {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
background-color: #f3f4f6;
border: 1px dashed #e5e7eb;
border-radius: 0.375rem;
color: #6b7280;
font-size: 0.875rem;
width: 100%;
}
.document-upload:hover .upload-prompt {
background-color: #e5e7eb;
}
.format-info {
display: block;
margin-top: 0.25rem;
color: #6b7280;
font-size: 0.75rem;
}
.agreement-check {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 1.5rem 0;
}
.verification-checkbox {
width: auto;
}
.declaration-text {
margin-bottom: 0;
font-size: 0.875rem;
cursor: pointer;
}
.submit-btn {
background-color: var(--surface-color);
color: white;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 0.375rem;
font-weight: 500;
font-size: 0.875rem;
cursor: pointer;
transition: background-color 0.2s;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.submit-btn:hover {
background-color: var(--surface-color);
}
.submit-btn svg {
width: 16px;
height: 16px;
}
@media (max-width: 1024px) {
.opportunity-container {
grid-template-columns: 320px 1fr;
gap: 1.5rem;
}
.role-info-card {
padding: 1.75rem;
}
.role-specs strong {
width: 130px;
}
.candidate-form-wrapper {
padding: 1.75rem;
}
}
@media (max-width: 768px) {
.opportunity-container {
grid-template-columns: 1fr;
}
.role-info-card {
position: static;
width: 100%;
}
.role-title {
font-size: 1.4rem;
}
.role-specs .spec-item {
margin: 0.8rem 0;
}
.dual-input-row,
.triple-input-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.career-opportunity-section {
padding: 1rem;
}
.role-info-card,
.candidate-form-wrapper {
padding: 1.25rem;
}
.role-specs strong {
width: 110px;
}
.text-input,
.dropdown-select,
.multiline-input {
padding: 0.65rem;
}
}
</style>
<section class="career-opportunity-section">
<div class="opportunity-container">
<!-- <div class="position-description">
<div class="role-info-card">
<h2 class="role-title"><?= $careerForm['catName']; ?></h2>
<div class="role-specs">
<p class="spec-item"><strong>Job Category:</strong><?= $careerForm['catName']; ?></p>
<p class="spec-item"><strong>Job Type:</strong><?= $careerForm['heading2']; ?></p>
<p class="spec-item"><strong>Job Salary:</strong><?= $careerForm['salary']; ?></p>
<p class="spec-item"><strong>Job Experience:</strong><?= $careerForm['heading4']; ?></p>
<p class="spec-item"><strong>Job Qualification:</strong><?= $careerForm['qualification']; ?></p>
</div>
<div class="work-location">
<h3 class="location-heading">Locations</h3>
<p class="location-text"><i class="fas fa-map-marker-alt"></i><?= $careerForm['heading3']; ?></p>
</div>
</div>
</div> -->
<!-- <div class="input-field-group">
<label class="field-label">Post Applied For<sup class="rednot">*</sup></label>
<select class="dropdown-select" required>
<option value="">Select the Post</option>
<option>Finance Support Executive</option>
<option>Customer Process Executive</option>
<option>Technical Associate</option>
<option>Digital Marketing Executive</option>
<option>PHP Web Developer</option>
</select>
</div> -->
<div class="position-description">
<div class="role-info-card">
<h2 class="role-title"><?= $careerForm['catName']; ?></h2>
<table class="role-specs" cellspacing="0" cellpadding="8"
style="width:100%; border-collapse: collapse;">
<tr>
<th>Job Category</th>
<td><?= $careerForm['catName']; ?></td>
</tr>
<tr>
<th>Job Type</th>
<td><?= $careerForm['heading2']; ?></td>
</tr>
<tr>
<th>Job Salary</th>
<td><?= $careerForm['salary']; ?></td>
</tr>
<tr>
<th>Job Experience</th>
<td><?= $careerForm['heading4']; ?></td>
</tr>
<tr>
<th>Job Qualification</th>
<td><?= $careerForm['qualification']; ?></td>
</tr>
</table>
<div class="work-location" style="margin-top: 15px;">
<h3 class="location-heading">Locations</h3>
<p class="location-text">
<i class="fas fa-map-marker-alt"></i> <?= $careerForm['heading3']; ?>
</p>
</div>
</div>
</div>
<div class="candidate-form-wrapper">
<!-- <div id="responseMessageApply"></div> -->
<form method="Post" id="apply_form" enctype="multipart/form-data" action="career_form_code.php" class="application-details-form">
<h2 class="form-main-heading">Personal Information</h2>
<ul class="required-field-notice">
<li>Asterisk(<a href="javascript:void(0);" class="rednot">*</a>) fields are compulsory.</li>
<li>By filling out this registration form you are taking the first step
toward a successful career with us.</li>
<li>By registering today, you are committing to take a recorded online
assessment, with one of our virtual recruiters, to assess your suitability for a role with
us.
This interview can either be taken immediately or at a time convenient to you.</li>
<li>Good luck! And we hope to see you working with us very soon.</li>
</ul>
<input type="hidden" name="position" value="<?= $careerForm['catName']; ?>" />
<div class="dual-input-row">
<div class="input-field-group">
<label class="field-label">Full Name<sup class="rednot">*</sup></label>
<input type="text" class="text-input" placeholder="Enter your full name" name="name"
required>
</div>
<div class="input-field-group">
<label class="field-label">Mobile No.<sup class="rednot">*</sup></label>
<input type="tel" name="mobile" placeholder="Enter your mobile number" class="text-input"
required>
</div>
</div>
<div class="dual-input-row">
<div class="input-field-group">
<label class="field-label">Email Id<sup class="rednot">*</sup></label>
<input type="email" name="email" placeholder="Enter your email address" class="text-input"
required>
</div>
<div class="input-field-group">
<label class="field-label">Father Name<sup class="rednot">*</sup></label>
<input type="text" name="father" placeholder="Enter your father name" class="text-input"
required>
</div>
</div>
<!-- verify adhar -->
<div class="dual-input-row">
<div class="input-field-group">
<label class="field-label">Aadhar No.<sup class="rednot">*</sup></label>
<input type="text" id="aadhar" name="aadhar" class="text-input" maxlength="12"
pattern="\d{12}" placeholder="Enter your 12 digit aadhaar number" required>
<small id="aadharLenError" style="color:red; display:none;">Aadhar number must be 12
digits!</small>
</div>
<div class="input-field-group">
<label class="field-label">Verify Aadhar No.<sup class="rednot">*</sup></label>
<input type="text" id="verifyAadhar" name="verify_addhaar" class="text-input" maxlength="12"
pattern="\d{12}" placeholder="Enter your 12 digit aadhaar number" required>
<small id="verifyLenError" style="color:red; display:none;">Aadhar number must be 12
digits!</small>
<small id="aadharError" style="color:red; display:none;">Aadhar numbers do not
match!</small>
</div>
</div>
<div class="input-field-group">
<label class="field-label">Address<sup class="rednot">*</sup></label>
<textarea class="multiline-input" name="address" placeholder="Enter your address"
required></textarea>
</div>
<div class="triple-input-row">
<div class="input-field-group">
<label class="field-label">Pin Code<sup class="rednot">*</sup></label>
<input type="text" class="text-input" name="pincode" placeholder="Enter your pin code"
pattern="\d{6}" required>
</div>
<div class="input-field-group">
<label class="field-label">State<sup class="rednot">*</sup></label>
<input type="text" class="text-input" name="state" placeholder="Enter your state" required>
</div>
<div class="input-field-group">
<label class="field-label">City<sup class="rednot">*</sup></label>
<input type="text" class="text-input" name="city_name" placeholder="Enter your city"
required>
</div>
</div>
<div class="dual-input-row">
<div class="input-field-group">
<label class="field-label">Are you 18 years or older?<sup class="rednot">*</sup></label>
<select class="dropdown-select" name="olderOrNot" required>
<option value="">Select</option>
<option value="Yes">YES</option>
<option value="No">NO</option>
</select>
</div>
<div class="input-field-group">
<label class="field-label">Are you willing to relocate?<sup class="rednot">*</sup></label>
<select class="dropdown-select" name="willingOrNot" required>
<option value="">Select</option>
<option value="Yes">YES</option>
<option value="No">NO</option>
</select>
</div>
</div>
<div class="input-field-group">
<label class="field-label">Education Background<sup class="rednot">*</sup></label>
<select class="dropdown-select" name="education" required>
<option value="">Select</option>
<option value="12">12th</option>
<option value="Diploma">Diploma</option>
<option value="Graduate">Graduate</option>
<option value="Post Graduate or Higher">Post Graduate or Higher</option>
</select>
</div>
<div class="dual-input-row">
<div class="input-field-group">
<label class="field-label">Name of Degree/Certificate<sup class="rednot">*</sup></label>
<input type="text" name="certificate" placeholder="Enter your degree / certificate"
class="text-input" required>
</div>
<div class="input-field-group">
<label class="field-label">Institute/College/School Name<sup class="rednot">*</sup></label>
<input type="text" class="text-input" name="Institute"
placeholder="Enter your institute / college / school" required>
</div>
</div>
<div class="dual-input-row">
<div class="input-field-group">
<label class="field-label">Board/University<sup class="rednot">*</sup></label>
<input type="text" class="text-input" name="board"
placeholder="Enter your board / university" required>
</div>
<div class="input-field-group">
<label class="field-label">Year of Passing<sup class="rednot">*</sup></label>
<input type="date" class="text-input" name="passingdate" min="1900-01-01" max="2099-12-31"
required>
</div>
</div>
<div class="dual-input-row">
<div class="input-field-group">
<label class="field-label">Result<sup class="rednot">*</sup></label>
<select class="dropdown-select" name="result" required>
<option value="">Select</option>
<option value="Passed">Passed</option>
<option value="Awaited">Awaited</option>
</select>
</div>
<div class="input-field-group">
<label class="field-label">Are you willing to work in night shift?<sup
class="rednot">*</sup></label>
<select class="dropdown-select" name="dayOrNight" required>
<option value="">Select</option>
<option value="Yes">YES</option>
<option value="No">NO</option>
</select>
</div>
</div>
<div class="dual-input-row">
<div class="input-field-group">
<label class="field-label">Work Experience?<sup class="rednot">*</sup></label>
<select class="dropdown-select" name="experience" required>
<option value="">Select</option>
<option value="Yes">YES</option>
<option value="No">NO</option>
</select>
</div>
<div class="input-field-group">
<label class="field-label">Do you have UAN/EPF Account number?<sup
class="rednot">*</sup></label>
<select class="dropdown-select" name="uan" required>
<option value="">Select</option>
<option value="Yes">YES</option>
<option value="No">NO</option>
</select>
</div>
</div>
<div class="dual-input-row">
<div class="input-field-group">
<label class="field-label">Do you have a certificate in a foreign language course?<sup
class="rednot">*</sup></label>
<select class="dropdown-select" name="language" required>
<option value="">Select</option>
<option value="Yes">YES</option>
<option value="No">NO</option>
</select>
</div>
<div class="input-field-group">
<label class="field-label">Have you previously worked with us?<sup
class="rednot">*</sup></label>
<select class="dropdown-select" name="outer" required>
<option value="">Select</option>
<option value="Yes">YES</option>
<option value="No">NO</option>
</select>
</div>
</div>
<div class="input-field-group">
<label class="field-label">Upload Resume<sup class="rednot">*</sup></label>
<div class="document-upload">
<input type="file" name="resume" class="form-control" required>
<!-- <span class="upload-prompt"><i class="fas fa-cloud-upload-alt"></i> Choose file</span> -->
</div>
<!-- <small class="format-info">Accepted formats: .pdf, .doc, .docx</small> -->
</div>
<div class="agreement-check">
<input type="checkbox" name="checkbox1" value="true" class="verification-checkbox" required>
<label for="truth-declaration" class="declaration-text">I hereby declare that the information
provided herein is true to the best of my knowledge. Any misrepresentation by me will lead
to disqualification of my candidature or termination of employment without notice. I also
authorize Outer Orbit Technologies to send job\recruitment related notifications & updates
on my contact number(s) updated with Outer Orbit Technologies.</label>
</div>
<div class="agreement-check">
<input type="checkbox" name="checkbox2" value="true" class="verification-checkbox" required>
<label for="truth-declaration" class="declaration-text">I authorize, Outer Orbit Technologies or
its 3rd party agency to use this for verification purpose with concerned authorities. I
understand and agree that Outer Orbit Technologies holds the right to conduct drug test &
background check on my professional, educational, and financial background through
independent sources. In case background check is negative/ drug test is positive, Outer
Orbit Technologies to withdraw the offer or terminate my employment with immediate effect.
On joining I will submit authentic copies of all certificates, testimonials to support the
details mentioned in the form.</label>
</div>
<div class="agreement-check">
<input type="checkbox" name="checkbox3" value="true" class="verification-checkbox" required>
<label for="truth-declaration" class="declaration-text"> I declare that I have not indulged into
any means of payment; by way of kinds or cash with any Outer Orbit Technologies employee or
its representative/affiliates to influence or to consider my employment with Outer Orbit
Technologies.</label>
</div>
<div class="agreement-check">
<input type="checkbox" name="checkbox4" value="true" class="verification-checkbox" required>
<label for="truth-declaration" class="declaration-text">I have read and accept the Terms &
Conditions</label>
</div>
<button class="submit-btn" name="apply_submit" type="submit">APPLY NOW <svg width="20" height="20"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</form>
</div>
</div>
</section>
<?php include 'app_footer.php'; ?>
<?php include 'app_bottom.php'; ?>
<script>
document.addEventListener("DOMContentLoaded", function () {
const aadharInput = document.getElementById("aadhar");
const verifyInput = document.getElementById("verifyAadhar");
const aadharLenError = document.getElementById("aadharLenError");
const verifyLenError = document.getElementById("verifyLenError");
const aadharError = document.getElementById("aadharError");
function validateAadharLength(input, errorElem) {
if (input.value.length > 0 && input.value.length !== 12) {
errorElem.style.display = "inline";
} else {
errorElem.style.display = "none";
}
}
function checkMatch() {
if (aadharInput.value.length === 12 && verifyInput.value.length === 12) {
if (aadharInput.value === verifyInput.value) {
aadharError.style.display = "none"; // ✅ match hai
} else {
aadharError.style.display = "inline"; // ❌ match nahi hai
}
} else {
aadharError.style.display = "none"; // jab tak 12 digit na ho, error hide
}
}
aadharInput.addEventListener("input", function () {
this.value = this.value.replace(/\D/g, "");
validateAadharLength(this, aadharLenError);
checkMatch();
});
verifyInput.addEventListener("input", function () {
this.value = this.value.replace(/\D/g, "");
validateAadharLength(this, verifyLenError);
checkMatch();
});
});
</script>
</body>
</html>