<div class="wizard-container">
<div class="stepper-header">
<div class="progress-track">
<div class="progress-fill" id="progress-fill"></div>
</div>
<div class="step-nodes">
<div class="step-node active" id="node-1">1</div>
<div class="step-node" id="node-2">2</div>
<div class="step-node" id="node-3">3</div>
</div>
</div>
<div class="step-content">
<h2 id="step-title">Account Setup</h2>
<p id="step-desc">Please enter your basic account details to get started.</p>
</div>
<div class="wizard-actions">
<button class="wiz-btn back-btn" id="btn-back" disabled>Back</button>
<button class="wiz-btn next-btn" id="btn-next">Continue</button>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: url("https://placehold.co/1920x1080/4c1d95/1e1b4b?text=Abstract+Colors") center/cover no-repeat;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.wizard-container {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 24px;
width: 100%;
max-width: 500px;
padding: 40px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
color: #ffffff;
}
.stepper-header {
position: relative;
margin-bottom: 40px;
}
.progress-track {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
z-index: 1;
}
.progress-fill {
width: 0%;
height: 100%;
background: #a855f7;
border-radius: 2px;
transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 10px #a855f7;
}
.step-nodes {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
}
.step-node {
width: 40px;
height: 40px;
border-radius: 50%;
background: #1e1b4b;
border: 2px solid rgba(255, 255, 255, 0.3);
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
color: #94a3b8;
transition: all 0.4s ease;
}
.step-node.active {
background: #a855f7;
border-color: #d8b4fe;
color: #ffffff;
box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
transform: scale(1.1);
}
.step-content {
text-align: center;
margin-bottom: 40px;
min-height: 100px;
}
.step-content h2 {
margin: 0 0 12px 0;
font-size: 1.75rem;
}
.step-content p {
margin: 0;
color: #cbd5e1;
font-size: 1.1rem;
line-height: 1.5;
}
.wizard-actions {
display: flex;
justify-content: space-between;
gap: 20px;
}
.wiz-btn {
padding: 14px 24px;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
flex: 1;
}
.back-btn {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
}
.back-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.1);
}
.back-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.next-btn {
background: #a855f7;
border: none;
color: #ffffff;
}
.next-btn:hover {
background: #9333ea;
}
const btnNext = document.getElementById("btn-next");
const btnBack = document.getElementById("btn-back");
const progressFill = document.getElementById("progress-fill");
const titleEl = document.getElementById("step-title");
const descEl = document.getElementById("step-desc");
const node1 = document.getElementById("node-1");
const node2 = document.getElementById("node-2");
const node3 = document.getElementById("node-3");
let currentStep = 1;
function updateWizard() {
// Reset all active states safely
node1.classList.remove("active");
node2.classList.remove("active");
node3.classList.remove("active");
if (currentStep === 1) {
node1.classList.add("active");
progressFill.style.width = "0%";
titleEl.innerText = "Account Setup";
descEl.innerText = "Please enter your basic account details to get started.";
btnBack.disabled = true;
btnNext.innerText = "Continue";
}
else if (currentStep === 2) {
node1.classList.add("active");
node2.classList.add("active");
progressFill.style.width = "50%";
titleEl.innerText = "Preferences";
descEl.innerText = "Customize your notification and theme settings.";
btnBack.disabled = false;
btnNext.innerText = "Continue";
}
else if (currentStep === 3) {
node1.classList.add("active");
node2.classList.add("active");
node3.classList.add("active");
progressFill.style.width = "100%";
titleEl.innerText = "Final Review";
descEl.innerText = "Confirm your details and create your workspace.";
btnBack.disabled = false;
btnNext.innerText = "Complete Setup";
}
}
btnNext.addEventListener("click", function() {
if (currentStep < 3) {
currentStep++;
updateWizard();
} else {
alert("Wizard Completed Successfully!");
}
});
btnBack.addEventListener("click", function() {
if (currentStep > 1) {
currentStep--;
updateWizard();
}
});
