330 lines
14 KiB
HTML
330 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Course Finder</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="./asstes/css/style.css">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<section class="container py-4 py-lg-5">
|
||
<div class="row g-4">
|
||
<!-- COURSE FINDER TITLE -->
|
||
<div class="mb-4 text-center">
|
||
<h3 class="fw-bold mb-2">
|
||
Find the Right Course for Your Future
|
||
</h3>
|
||
<p class="text-muted mb-0">
|
||
Find and compare international courses that match your academic goals.
|
||
</p>
|
||
|
||
</div>
|
||
|
||
<div class="col-lg-9">
|
||
|
||
<!-- BIT COURSE DETAIL CARD -->
|
||
<div class="card border-0 shadow rounded-4 overflow-hidden mb-4">
|
||
|
||
<!-- HEADER -->
|
||
<div class="bg-dark text-white p-4">
|
||
<h4 class="mb-1 fw-bold">
|
||
Bachelor of Information Technology (BIT)
|
||
</h4>
|
||
<p class="mb-0 small text-light">
|
||
Full-time · Undergraduate · STEM Program
|
||
</p>
|
||
</div>
|
||
|
||
<!-- BODY -->
|
||
<div class="p-4">
|
||
<div class="row g-4 align-items-center">
|
||
|
||
<!-- UNIVERSITY INFO -->
|
||
<div class="col-md-4 text-center">
|
||
<img src="./asstes/image/image.png" class="img-fluid mb-3" style="max-height:70px"
|
||
alt="University Logo">
|
||
|
||
<h6 class="fw-semibold mb-1">
|
||
XYZ University
|
||
<span class="text-danger">(Australia)</span>
|
||
</h6>
|
||
|
||
<ul class="list-unstyled small bg-light rounded-3 p-3 mt-3">
|
||
<li><strong>Course Code:</strong> BIT</li>
|
||
<li><strong>Level:</strong> Bachelor</li>
|
||
<li><strong>Duration:</strong> 3 Years</li>
|
||
<li><strong>Intake:</strong> Feb / July</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- ENGLISH REQUIREMENTS -->
|
||
<div class="col-md-4">
|
||
<h6 class="fw-semibold mb-3">English Requirements</h6>
|
||
|
||
<div class="d-grid gap-2">
|
||
<div class="d-flex justify-content-between bg-light rounded-pill px-3 py-2">
|
||
<span>IELTS</span>
|
||
<span class="badge bg-dark">6.0 (5.5)</span>
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-between bg-light rounded-pill px-3 py-2">
|
||
<span>PTE</span>
|
||
<span class="badge bg-dark">50 Overall</span>
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-between bg-light rounded-pill px-3 py-2">
|
||
<span>Duolingo</span>
|
||
<span class="badge bg-dark">95 Overall</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FEES -->
|
||
<div class="col-md-4">
|
||
<div class="border rounded-3 p-3 bg-light">
|
||
<div class="small text-muted">Annual Tuition Fee</div>
|
||
<div class="fw-bold fs-5">$32,000</div>
|
||
|
||
<hr class="my-2">
|
||
|
||
<div class="small text-muted">Scholarship Available</div>
|
||
<div class="fw-semibold text-success">
|
||
Up to $10,000
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FOOTER -->
|
||
<div class="bg-light px-4 py-3 d-flex justify-content-between align-items-center">
|
||
<div>
|
||
<span class="fw-semibold me-2">Career Outcomes:</span>
|
||
<span class="badge bg-primary p-2 me-1">Software Developer</span>
|
||
<span class="badge bg-primary p-2 me-1">IT Analyst</span>
|
||
<span class="badge bg-primary p-2">System Engineer</span>
|
||
</div>
|
||
|
||
<button class="btn btn-dark px-4">
|
||
Apply Now
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- COURSE DESCRIPTION -->
|
||
<div class="card border-0 shadow rounded-4 p-4">
|
||
<h5 class="fw-bold mb-3">Course Description</h5>
|
||
|
||
<p class="text-muted">
|
||
The <strong>Bachelor of Information Technology (BIT)</strong> is designed to equip
|
||
students with strong theoretical knowledge and practical skills in modern
|
||
information technology systems. The program focuses on software development,
|
||
database systems, networking, cybersecurity, and cloud computing.
|
||
</p>
|
||
|
||
<p class="text-muted">
|
||
Throughout the course, students gain hands-on experience using industry-standard
|
||
tools and technologies while working on real-world projects. The curriculum is
|
||
aligned with current industry demands, ensuring graduates are job-ready and capable
|
||
of adapting to rapidly evolving IT environments.
|
||
</p>
|
||
|
||
<p class="text-muted mb-0">
|
||
Graduates of the BIT program can pursue careers as software developers, systems
|
||
analysts, network engineers, cybersecurity specialists, and IT consultants, or
|
||
continue their studies at the postgraduate level.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<aside class="col-lg-3">
|
||
<div class="sticky-box d-flex flex-column gap-4">
|
||
|
||
<div class="bg-white rounded-xl shadow-sm p-3">
|
||
<div class="d-flex border-bottom tab-nav">
|
||
<a href="javascript:void(0)"
|
||
class="tab-link flex-fill text-center py-2 fw-semibold tab-active"
|
||
onclick="showTab('exclusive', this)">Exclusive Courses</a>
|
||
<a href="javascript:void(0)"
|
||
class="tab-link flex-fill text-center py-2 fw-semibold text-secondary"
|
||
onclick="showTab('top', this)">Top Colleges</a>
|
||
|
||
</div>
|
||
|
||
<div id="exclusive" class="mt-3">
|
||
<ul class="list-group list-group-flush small">
|
||
<li class="list-group-item">MBA in Defence</li>
|
||
<li class="list-group-item">PG Diploma in Branch Banking</li>
|
||
<li class="list-group-item">Global Finance and Accounting</li>
|
||
<li class="list-group-item">Career courses in 2D & 3D Animation</li>
|
||
<li class="list-group-item">IFBI PGDBO</li>
|
||
<li class="list-group-item">Courses Programs - IFBI</li>
|
||
<li class="list-group-item">Alpha Courses</li>
|
||
<li class="list-group-item">Nutrition Courses</li>
|
||
<li class="list-group-item">IFBI Media</li>
|
||
<li class="list-group-item text-center bg-light fw-medium">See All</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div id="top" class="mt-3 d-none">
|
||
<ul class="list-group list-group-flush small">
|
||
<li class="list-group-item">Top College 1</li>
|
||
<li class="list-group-item">Top College 2</li>
|
||
<li class="list-group-item">Top College 3</li>
|
||
<li class="list-group-item">Top College 4</li>
|
||
<li class="list-group-item">Top College 5</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="bg-primary bg-opacity-10 rounded-xl shadow-sm p-3">
|
||
<h6 class="text-center fw-semibold mb-3">Get Your Free Counselling!</h6>
|
||
<form class="d-grid gap-2">
|
||
<input type="text" class="form-control" placeholder="Full Name" required>
|
||
<input type="tel" class="form-control" placeholder="Phone" required>
|
||
<input type="email" class="form-control" placeholder="Email" required>
|
||
<textarea class="form-control" rows="3" placeholder="Message"></textarea>
|
||
<button class="btn btn-primary-custom fw-semibold">Submit</button>
|
||
</form>
|
||
</div>
|
||
|
||
</div>
|
||
</aside>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
const steps = [
|
||
{ q: 'How proficient are you with visual design?', options: ['Beginner', 'Intermediate', 'Advanced'] },
|
||
{ q: 'Do you have UX research experience?', options: ['None', 'Some', 'A lot'] },
|
||
{ q: 'What is your career goal?', options: ['Student', 'Career switcher', 'Professional upskilling'] },
|
||
{ q: 'Preferred learning format?', options: ['Online', 'Hybrid', 'In-person'] },
|
||
{ q: 'How soon do you want to start?', options: ['Immediately', '1–3 months', 'Later'] },
|
||
{ q: 'What is your budget range?', options: ['Free', '$$', '$$$'] }
|
||
];
|
||
|
||
const stepper = document.getElementById('stepper');
|
||
const question = document.getElementById('question');
|
||
const select = document.getElementById('select');
|
||
const button = document.getElementById('next');
|
||
|
||
let current = 0;
|
||
const answers = [];
|
||
|
||
function renderStepper() {
|
||
stepper.innerHTML = '';
|
||
|
||
steps.forEach((_, i) => {
|
||
const step = document.createElement('div');
|
||
step.className = 'step';
|
||
|
||
const circle = document.createElement('div');
|
||
circle.className = 'circle';
|
||
circle.textContent = i + 1;
|
||
|
||
if (i === current) circle.classList.add('active');
|
||
if (i < current) circle.classList.add('completed');
|
||
|
||
step.appendChild(circle);
|
||
|
||
if (i < steps.length - 1) {
|
||
const line = document.createElement('div');
|
||
line.className = 'line';
|
||
|
||
const fill = document.createElement('div');
|
||
fill.className = 'line-fill';
|
||
|
||
// ✅ Animate fill correctly
|
||
fill.style.width = i < current ? '100%' : '0%';
|
||
|
||
line.appendChild(fill);
|
||
step.appendChild(line);
|
||
}
|
||
|
||
stepper.appendChild(step);
|
||
});
|
||
}
|
||
|
||
function renderStep() {
|
||
renderStepper();
|
||
question.textContent = steps[current].q;
|
||
|
||
select.innerHTML = '<option value="">– Select –</option>';
|
||
steps[current].options.forEach(opt => {
|
||
const o = document.createElement('option');
|
||
o.value = opt;
|
||
o.textContent = opt;
|
||
select.appendChild(o);
|
||
});
|
||
|
||
// ✅ SEARCH on last (6th) question
|
||
button.textContent =
|
||
current === steps.length - 1 ? 'SEARCH' : 'NEXT';
|
||
|
||
button.disabled = true;
|
||
button.classList.remove('enabled');
|
||
}
|
||
|
||
select.addEventListener('change', () => {
|
||
if (select.value) {
|
||
button.disabled = false;
|
||
button.classList.add('enabled');
|
||
}
|
||
});
|
||
|
||
button.addEventListener('click', () => {
|
||
if (!select.value) return;
|
||
|
||
answers[current] = select.value;
|
||
|
||
// 🔍 Final search action
|
||
if (current === steps.length - 1) {
|
||
alert('Searching courses with:\n' + JSON.stringify(answers, null, 2));
|
||
return;
|
||
}
|
||
|
||
current++;
|
||
renderStep();
|
||
});
|
||
|
||
renderStep();
|
||
</script>
|
||
<script>
|
||
function showTab(tabId, element) {
|
||
// Hide all tab content
|
||
document.getElementById('exclusive').classList.add('d-none');
|
||
document.getElementById('top').classList.add('d-none');
|
||
|
||
// Show selected tab content
|
||
document.getElementById(tabId).classList.remove('d-none');
|
||
|
||
// Remove active class from all tabs
|
||
const tabs = document.querySelectorAll('.tab-link');
|
||
tabs.forEach(tab => {
|
||
tab.classList.remove('tab-active');
|
||
tab.classList.add('text-secondary');
|
||
});
|
||
|
||
// Add active class to clicked tab
|
||
element.classList.add('tab-active');
|
||
element.classList.remove('text-secondary');
|
||
}
|
||
|
||
</script>
|
||
|
||
|
||
</body>
|
||
|
||
</html> |