386 lines
16 KiB
HTML
386 lines
16 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">
|
||
<div class="card">
|
||
<h1>Find The Right Design Course For You</h1>
|
||
<p class="subtitle">Answer a few questions to get personalized recommendations</p>
|
||
|
||
<div class="stepper" id="stepper"></div>
|
||
|
||
<div class="question" id="question"></div>
|
||
<select id="select">
|
||
<option value="">– Select –</option>
|
||
</select>
|
||
<input id="textInput" type="text" placeholder=""
|
||
style="display:none; width:100%; padding:14px; border-radius:12px; border:1px solid #d1d5db; font-size:16px;" />
|
||
|
||
<div class="actions">
|
||
<button id="next">NEXT</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white p-4 rounded-xl shadow-sm mb-4">
|
||
<div class="row g-3">
|
||
<div class="col-sm-6 col-md-3">
|
||
<select class="form-select">
|
||
<option>Select Country</option>
|
||
<option>USA</option>
|
||
<option>UK</option>
|
||
<option>India</option>
|
||
<option>Australia</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-3">
|
||
<select class="form-select">
|
||
<option>Select Study Level</option>
|
||
<option>Undergraduate</option>
|
||
<option>Postgraduate</option>
|
||
<option>Diploma</option>
|
||
<option>Certificate</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-3">
|
||
<select class="form-select">
|
||
<option>Select Course</option>
|
||
<option>Business</option>
|
||
<option>Design</option>
|
||
<option>Marketing</option>
|
||
<option>Finance</option>
|
||
<option>Animation</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-sm-6 col-md-3 d-grid">
|
||
<button class="btn btn-primary-custom">
|
||
Search
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="container my-4">
|
||
<div class="card card1 border-0 shadow rounded-4 overflow-hidden">
|
||
|
||
|
||
<div class="bg-dark text-white p-3">
|
||
<h6 class="mb-0 fw-semibold">
|
||
(STEM) Bachelor of Architecture (BArch)
|
||
</h6>
|
||
</div>
|
||
|
||
<div class="p-4">
|
||
<div class="row g-4 align-items-center">
|
||
|
||
<div class="col-md-4 text-center">
|
||
<img src="./asstes/image/image.png" class="img-fluid mb-2" style="max-height:70px"
|
||
alt="Marywood University">
|
||
|
||
<div class="fw-semibold">
|
||
Marywood University
|
||
<span class="text-danger">(USA)</span>
|
||
</div>
|
||
|
||
<div class="small text-muted mt-1 course-info">
|
||
<ul class="list bg-light">
|
||
<li>
|
||
<span class="course-label"><strong>Code:</strong> BArch</span>
|
||
|
||
</li>
|
||
<li>
|
||
<span class="course-label"><strong>Level:</strong> Bachelor</span>
|
||
|
||
</li>
|
||
<li>
|
||
<span class="course-label"><strong>Duration:</strong> N/A</span>
|
||
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="d-grid gap-2">
|
||
<div
|
||
class="d-flex justify-content-between align-items-center bg-light rounded-pill px-3 py-2">
|
||
<span class="fw-semibold">IELTS</span>
|
||
<span class="badge bg-dark">5.5 (5.5)</span>
|
||
</div>
|
||
|
||
<div
|
||
class="d-flex justify-content-between align-items-center bg-light rounded-pill px-3 py-2">
|
||
<span class="fw-semibold">PTE</span>
|
||
<span class="badge bg-dark">48 (48)</span>
|
||
</div>
|
||
|
||
<div
|
||
class="d-flex justify-content-between align-items-center bg-light rounded-pill px-3 py-2">
|
||
<span class="fw-semibold">Duolingo</span>
|
||
<span class="badge bg-dark">90 Overall</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="border rounded-3 p-3 bg-light">
|
||
<div class="small text-muted">Annual Fee</div>
|
||
<div class="fw-bold fs-5">$41,370</div>
|
||
|
||
<hr class="my-2">
|
||
|
||
<div class="small text-muted">Scholarship</div>
|
||
<div class="fw-semibold text-success">
|
||
Up to $23,000
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-light px-4 py-3 d-flex flex-wrap align-items-center justify-content-between">
|
||
<div class="intake">
|
||
<span class="fw-semibold me-2">Intake:</span>
|
||
<span class="badge bg-primary me-1 p-2">January</span>
|
||
<span class="badge bg-primary p-2">January</span>
|
||
</div>
|
||
|
||
<button class="btn btn-dark btn-sm px-4">
|
||
View Details
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</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?', type: 'select', options: ['Beginner', 'Intermediate', 'Advanced'] },
|
||
{ q: 'Do you have UX research experience?', type: 'select', options: ['None', 'Some', 'A lot'] },
|
||
{ q: 'What is your career goal?', type: 'select', options: ['Student', 'Career switcher', 'Professional upskilling'] },
|
||
{ q: 'Preferred learning format?', type: 'select', options: ['Online', 'Hybrid', 'In-person'] },
|
||
{ q: 'Preferred learning course?', type: 'select', options: ['Online', 'Hybrid', 'In-person'] },
|
||
|
||
{ q: 'What is your budget range?', type: 'input', placeholder: 'Enter your budget' },
|
||
{ q: 'Preferred learning format?', type: 'select', options: ['Online', 'Hybrid', 'In-person'] }
|
||
|
||
];
|
||
|
||
const stepper = document.getElementById('stepper');
|
||
const question = document.getElementById('question');
|
||
const select = document.getElementById('select');
|
||
const input = document.getElementById('textInput');
|
||
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';
|
||
if (i < current) line.innerHTML = '<div class="line-fill"></div>';
|
||
step.appendChild(line);
|
||
}
|
||
|
||
stepper.appendChild(step);
|
||
});
|
||
}
|
||
|
||
function renderStep() {
|
||
renderStepper();
|
||
question.textContent = steps[current].q;
|
||
|
||
select.style.display = 'none';
|
||
input.style.display = 'none';
|
||
select.value = '';
|
||
input.value = '';
|
||
|
||
button.disabled = true;
|
||
button.classList.remove('enabled');
|
||
|
||
const step = steps[current];
|
||
|
||
if (step.type === 'select') {
|
||
select.style.display = 'block';
|
||
select.innerHTML = '<option value="">– Select –</option>';
|
||
step.options.forEach(opt => {
|
||
const o = document.createElement('option');
|
||
o.value = opt;
|
||
o.textContent = opt;
|
||
select.appendChild(o);
|
||
});
|
||
}
|
||
|
||
if (step.type === 'input') {
|
||
input.style.display = 'block';
|
||
input.placeholder = step.placeholder;
|
||
}
|
||
|
||
button.textContent = current === steps.length - 1 ? 'SEARCH' : 'NEXT';
|
||
}
|
||
|
||
select.addEventListener('change', () => {
|
||
if (select.value) {
|
||
button.disabled = false;
|
||
button.classList.add('enabled');
|
||
}
|
||
});
|
||
|
||
input.addEventListener('input', () => {
|
||
if (input.value.trim()) {
|
||
button.disabled = false;
|
||
button.classList.add('enabled');
|
||
}
|
||
});
|
||
|
||
button.addEventListener('click', () => {
|
||
const step = steps[current];
|
||
const value = step.type === 'input' ? input.value : select.value;
|
||
if (!value) return;
|
||
|
||
answers[current] = value;
|
||
|
||
if (current === steps.length - 1) {
|
||
alert(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> |