<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Learn With Arshyan – Admission Form</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
darkPurple: '#1e1b4b',
lightCard: '#f9fafb',
primary: '#7c3aed',
label: '#475569',
border: '#cbd5e1',
focus: '#a78bfa',
}
}
}
}
</script>
<style>
.step { display: none; }
.step.active { display: block; }
.step-bar { transition: width 0.3s ease; }
.floating-label {
position: relative;
}
.floating-label input,
.floating-label select,
.floating-label textarea {
background: white;
color: #1e293b;
padding: 1.2rem 0.75rem 0.5rem;
width: 100%;
border: 1px solid #cbd5e1;
border-radius: 0.5rem;
outline: none;
font-size: 1rem;
}
.floating-label label {
position: absolute;
left: 0.75rem;
top: 1.1rem;
font-size: 0.875rem;
color: #64748b;
pointer-events: none;
transition: all 0.2s ease;
background-color: white;
padding: 0 0.25rem;
}
.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label,
.floating-label select:focus + label,
.floating-label select:not([value=""]) + label,
.floating-label textarea:focus + label,
.floating-label textarea:not(:placeholder-shown) + label {
top: 0.4rem;
font-size: 0.75rem;
color: #7c3aed;
}
</style>
</head>
<body class="bg-darkPurple min-h-screen flex items-center justify-center px-4 py-12">
<div class="bg-lightCard text-gray-800 w-full max-w-4xl rounded-2xl shadow-2xl p-8">
<h1 class="text-3xl font-bold text-center text-primary mb-2">Learn With Arshyan</h1>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p class="text-center text-gray-600 mb-6 text-lg">Admission Application Form</p>
<!-- Progress Bar -->
<div class="relative h-2 bg-gray-300 rounded-full overflow-hidden mb-6">
<div class="absolute top-0 left-0 h-full bg-primary step-bar" style="width: 25%;"></div>
</div>
<p class="text-xs text-right text-gray-500 mb-4">Step <span id="step-number">1</span> of 4</p>
<form id="admissionForm">
<!-- Step 1 -->
<div class="step active">
<h2 class="text-xl font-semibold mb-4">Personal Information</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="floating-label">
<input type="text" placeholder=" " required />
<label>Full Name</label>
</div>
<div class="floating-label">
<input type="text" placeholder=" " required />
<label>Father's Name</label>
</div>
<div class="floating-label">
<input type="text" placeholder=" " required />
<label>CNIC / B-Form Number</label>
</div>
<div class="floating-label">
<input type="date" placeholder=" " required />
<label>Date of Birth</label>
</div>
<div class="floating-label">
<select required>
<option value="" disabled selected hidden></option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
<label>Gender</label>
</div>
<div class="floating-label">
<input type="tel" placeholder=" " required />
<label>Mobile Number</label>
</div>
<div class="floating-label">
<input type="email" placeholder=" " />
<label>Email Address</label>
</div>
</div>
</div>
<!-- Step 2 -->
<div class="step">
<h2 class="text-xl font-semibold mb-4">Academic Background</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="floating-label">
<input type="text" placeholder=" " required />
<label>Last Qualification</label>
</div>
<div class="floating-label">
<input type="text" placeholder=" " required />
<label>Institution Name</label>
</div>
<div class="floating-label">
<input type="text" placeholder=" " required />
<label>Marks Obtained</label>
</div>
<div class="floating-label">
<input type="text" placeholder=" " required />
<label>Total Marks</label>
</div>
<div class="floating-label">
<input type="text" placeholder=" " />
<label>Board or University</label>
</div>
<div class="floating-label">
<input type="number" placeholder=" " />
<label>Passing Year</label>
</div>
</div>
</div>
<!-- Step 3 -->
<div class="step">
<h2 class="text-xl font-semibold mb-4">Course Selection</h2>
<div class="space-y-4">
<div class="floating-label">
<select required>
<option value="" disabled selected hidden></option>
<option>Office Management</option>
<option>Graphic Designing</option>
<option>Web Development</option>
<option>Python Programming</option>
<option>Video Editing</option>
</select>
<label>Select Course</label>
</div>
<div class="floating-label">
<textarea placeholder=" " required rows="4"></textarea>
<label>Why are you interested in this course?</label>
</div>
</div>
</div>
<!-- Step 4 -->
<div class="step">
<h2 class="text-xl font-semibold mb-4">Address & Declaration</h2>
<div class="space-y-4">
<div class="floating-label">
<input type="text" placeholder=" " required />
<label>Full Address</label>
</div>
<div class="floating-label">
<input type="text" placeholder=" " required />
<label>City</label>
</div>
<label class="flex items-start gap-2 mt-2 text-sm text-gray-600">
<input type="checkbox" required class="mt-1" />
<span>I confirm that the information provided is accurate to the best of my knowledge.</span>
</label>
</div>
</div>
<!-- Navigation Buttons -->
<div class="flex justify-between mt-8">
<button type="button" id="prevBtn" class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-lg text-sm hidden">Previous</button>
<button type="button" id="nextBtn" class="px-6 py-2 bg-primary hover:bg-purple-700 text-white rounded-lg text-sm">Next</button>
</div>
</form>
</div>
<script>
const steps = document.querySelectorAll(".step");
const nextBtn = document.getElementById("nextBtn");
const prevBtn = document.getElementById("prevBtn");
const stepNumber = document.getElementById("step-number");
const progressBar = document.querySelector(".step-bar");
let currentStep = 0;
function showStep(index) {
steps.forEach((step, i) => step.classList.toggle("active", i === index));
prevBtn.classList.toggle("hidden", index === 0);
nextBtn.textContent = index === steps.length - 1 ? "Submit" : "Next";
stepNumber.textContent = index + 1;
progressBar.style.width = `${((index + 1) / steps.length) * 100}%`;
}
nextBtn.addEventListener("click", () => {
if (currentStep < steps.length - 1) {
currentStep++;
showStep(currentStep);
} else {
alert("Form submitted successfully!");
document.getElementById("admissionForm").reset();
currentStep = 0;
showStep(currentStep);
}
});
prevBtn.addEventListener("click", () => {
if (currentStep > 0) {
currentStep--;
showStep(currentStep);
}
});
showStep(currentStep);
</script>
</body>
</html>
]]>
