course finder and course detail page create
This commit is contained in:
@@ -1,10 +1,151 @@
|
|||||||
:root {
|
:root {
|
||||||
--primary-color: #16a34a;
|
--primary-color: #16a34a;
|
||||||
--primary-hover: #15803d;
|
--primary-hover: #15803d;
|
||||||
|
--primary: #6f5bf3;
|
||||||
|
--gray: #e5e7eb;
|
||||||
|
--text: #111827;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
background: #f9fafb;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 40px;
|
||||||
background-color: #f3f4f6;
|
background-color: #f3f4f6;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
/* max-width: 900px; */
|
||||||
|
border-radius: 24px;
|
||||||
|
padding: 40px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.card.card1{
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
text-align: center;
|
||||||
|
color: #555;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 2px solid var(--gray);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 600;
|
||||||
|
background: #fff;
|
||||||
|
color: #999;
|
||||||
|
font-size: 13px;
|
||||||
|
transition: all .3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle.active,
|
||||||
|
.circle.completed {
|
||||||
|
border-color: var(--primary);
|
||||||
|
background: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
height: 4px;
|
||||||
|
flex: 1;
|
||||||
|
background: var(--gray);
|
||||||
|
/* margin: 0 8px; */
|
||||||
|
/* border-radius: 2px; */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-fill {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
background: var(--primary);
|
||||||
|
transition: width .4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
font-size: 16px;
|
||||||
|
background-position: right 16px center;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px 48px 14px 14px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 16px center;
|
||||||
|
background-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 14px 28px;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: none;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: .2em;
|
||||||
|
cursor: not-allowed;
|
||||||
|
background: #c7c3fa;
|
||||||
|
color: #fff;
|
||||||
|
transition: background .3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.enabled {
|
||||||
|
background: var(--primary);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Primary buttons */
|
/* Primary buttons */
|
||||||
@@ -13,6 +154,7 @@
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-link {
|
.tab-link {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #6c757d;
|
color: #6c757d;
|
||||||
@@ -65,3 +207,26 @@
|
|||||||
.rounded-xl {
|
.rounded-xl {
|
||||||
border-radius: 0.75rem;
|
border-radius: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
select:focus,
|
||||||
|
.form-select:focus,
|
||||||
|
input:focus,
|
||||||
|
textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
/* removes default blue border */
|
||||||
|
box-shadow: none;
|
||||||
|
/* removes focus shadow */
|
||||||
|
border-color: #ced4da;
|
||||||
|
/* optional: reset to normal border color */
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width:576px) {
|
||||||
|
.intake {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
330
course-detail.html
Normal file
330
course-detail.html
Normal file
@@ -0,0 +1,330 @@
|
|||||||
|
<!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>
|
||||||
@@ -26,6 +26,23 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-9">
|
<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="bg-white p-4 rounded-xl shadow-sm mb-4">
|
||||||
<div class="row g-3">
|
<div class="row g-3">
|
||||||
@@ -71,7 +88,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="container my-4">
|
<div class="container my-4">
|
||||||
<div class="card border-0 shadow rounded-4 overflow-hidden">
|
<div class="card card1 border-0 shadow rounded-4 overflow-hidden">
|
||||||
|
|
||||||
|
|
||||||
<div class="bg-dark text-white p-3">
|
<div class="bg-dark text-white p-3">
|
||||||
@@ -92,9 +109,25 @@
|
|||||||
<span class="text-danger">(USA)</span>
|
<span class="text-danger">(USA)</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="small text-muted mt-1">
|
<div class="small text-muted mt-1 course-info">
|
||||||
Code: BArch • Bachelor • N/A
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
@@ -136,13 +169,13 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-light px-4 py-3 d-flex flex-wrap align-items-center justify-content-between">
|
<div class="bg-light px-4 py-3 d-flex flex-wrap align-items-center justify-content-between">
|
||||||
<div>
|
<div class="intake">
|
||||||
<span class="fw-semibold me-2">Intake:</span>
|
<span class="fw-semibold me-2">Intake:</span>
|
||||||
<span class="badge bg-primary me-1 p-2">January</span>
|
<span class="badge bg-primary me-1 p-2">January</span>
|
||||||
<span class="badge bg-primary p-2">January</span>
|
<span class="badge bg-primary p-2">January</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="btn btn-dark btn-sm px-4 rounded-pill">
|
<button class="btn btn-dark btn-sm px-4">
|
||||||
View Details
|
View Details
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -210,6 +243,120 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
<script>
|
||||||
function showTab(tabId, element) {
|
function showTab(tabId, element) {
|
||||||
// Hide all tab content
|
// Hide all tab content
|
||||||
|
|||||||
Reference in New Issue
Block a user