Bibhuti-Solutions/new_raffles
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cost calculator design

Browse Source
This commit is contained in:
alika
2025-08-19 16:37:14 +05:45
parent d2a7ada38f
commit c0eb752631
3 changed files with 498 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/raffles/assets/css/utility.min.css vendored
View File

@@ -1493,6 +1493,10 @@
.py-10 {
padding-top: 10px;
}
.pt-12,
.py-12 {
padding-top: 12px;
}
.pt-15,
.py-15 {
padding-top: 15px;
@@ -1855,6 +1859,10 @@
.py-10 {
padding-bottom: 10px;
}
.pb-12,
.py-12 {
padding-bottom: 12px;
}
.pb-15,
.py-15 {
padding-bottom: 15px;

363
public/raffles/assets/js/style.js
View File

@@ -1,112 +1,124 @@
document.addEventListener("DOMContentLoaded", function () {
let intouchBtn = document.getElementById("get-in-touch");
const openButtons = document.querySelectorAll(".open-intouch");
// let intouchBtn = document.getElementById("get-in-touch");
let intouchPopup = document.getElementById("get-in-touch-page");
let closeBtns = document.getElementById("close-btn");
const mobileRedirectURL = "book-counsellor.php"; // Change to your desired mobile page URL
// Show login popup
intouchBtn.addEventListener("click", function () {
openButtons.forEach((button) => {
button.addEventListener("click", function () {
if (window.innerWidth > 992) {
// Desktop and tablets
intouchPopup.classList.add("active");
// alert("clicked ")
} else {
// Mobile – redirect to a page
window.location.href = mobileRedirectURL;
}
});
});
// Hide both popups when clicking any close button
closeBtns.addEventListener("click", function () {
intouchPopup.classList.remove("active");
});
// Hide popups when clicking outside them
window.addEventListener("click", function (event) {
if (event.target.classList.contains("get-in-touch-page")) {
intouchPopup.classList.remove("active");
}
});
});
// university image animation
window.addEventListener('DOMContentLoaded', () => {
const section = document.getElementById('animated-section');
const leftItems = document.querySelectorAll('.left-group .line-item');
const rightItems = document.querySelectorAll('.right-group .line-item');
window.addEventListener("DOMContentLoaded", () => {
const section = document.getElementById("animated-section");
const leftItems = document.querySelectorAll(".left-group .line-item");
const rightItems = document.querySelectorAll(".right-group .line-item");
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
leftItems.forEach((item, i) => {
setTimeout(() => item.classList.add('visible'), i * 300);
setTimeout(
() => item.classList.add("visible"),
i * 300
);
});
rightItems.forEach((item, i) => {
setTimeout(() => item.classList.add('visible'), i * 300);
setTimeout(
() => item.classList.add("visible"),
i * 300
);
});
} else {
leftItems.forEach(item => item.classList.remove('visible'));
rightItems.forEach(item => item.classList.remove('visible'));
leftItems.forEach((item) =>
item.classList.remove("visible")
);
rightItems.forEach((item) =>
item.classList.remove("visible")
);
}
});
}, { threshold: 0.5 });
},
{ threshold: 0.5 }
);
observer.observe(section);
});
// tabs in free resources
function showTab(id) {
// Remove active class from all buttons
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
document
.querySelectorAll(".tab-btn")
.forEach((btn) => btn.classList.remove("active"));
// Hide all tab contents
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
document
.querySelectorAll(".tab-content")
.forEach((tab) => tab.classList.remove("active"));
// Show the selected tab
document.getElementById(id).classList.add('active');
document.getElementById(id).classList.add("active");
}
// NEW: Attach click event on all tab buttons
document.querySelectorAll('.tab-btn').forEach(button => {
button.addEventListener('click', function () {
document.querySelectorAll(".tab-btn").forEach((button) => {
button.addEventListener("click", function () {
// Remove active from all
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
document
.querySelectorAll(".tab-btn")
.forEach((btn) => btn.classList.remove("active"));
// Add active to clicked button
this.classList.add('active');
this.classList.add("active");
});
});
// counter section
document.addEventListener("DOMContentLoaded", function () {
const counters = document.querySelectorAll(".counter");
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const counter = entry.target;
if (entry.isIntersecting) {
if (!counter.classList.contains('started')) {
if (!counter.classList.contains("started")) {
startCounting(counter);
counter.classList.add('started');
counter.classList.add("started");
}
} else {
resetCounter(counter);
counter.classList.remove('started');
counter.classList.remove("started");
}
});
});
counters.forEach(counter => {
counters.forEach((counter) => {
observer.observe(counter);
});
@@ -132,19 +144,18 @@ document.addEventListener("DOMContentLoaded", function () {
}
});
// course finder ball bouncing
window.addEventListener('DOMContentLoaded', () => {
const canvas = document.getElementById('flagCanvas');
const ctx = canvas.getContext('2d');
const ballSection = document.getElementById('ball-section');
window.addEventListener("DOMContentLoaded", () => {
const canvas = document.getElementById("flagCanvas");
const ctx = canvas.getContext("2d");
const ballSection = document.getElementById("ball-section");
// Get responsive ball size
function getBallSize() {
const width = window.innerWidth;
if (width < 480) return 20;
if (width < 768) return 30;
return 40;
if (width < 768) return 25;
return 35;
}
let ballSize = getBallSize();
@@ -156,12 +167,12 @@ window.addEventListener('DOMContentLoaded', () => {
ballSize = getBallSize();
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
window.addEventListener("resize", resizeCanvas);
const gravity = 0.25;
const gravity = 1;
const friction = 0.8;
const elasticity = 0.75;
const flags = ['us', 'gb', 'np', 'dk', 'ca', 'au'];
const flags = ["us", "gb", "np", "dk", "ca", "au"];
let balls = [];
class Ball {
@@ -193,9 +204,15 @@ window.addEventListener('DOMContentLoaded', () => {
const sy = (img.height - size) / 2;
ctx.drawImage(
img, sx, sy, size, size,
this.x - this.radius, this.y - this.radius,
this.radius * 2, this.radius * 2
img,
sx,
sy,
size,
size,
this.x - this.radius,
this.y - this.radius,
this.radius * 2,
this.radius * 2
);
ctx.restore();
@@ -280,7 +297,14 @@ window.addEventListener('DOMContentLoaded', () => {
const flag = flags[i % flags.length];
const x = Math.random() * (canvas.width - ballSize * 2) + ballSize;
const y = -Math.random() * 300;
balls.push(new Ball(x, y, ballSize, `assets/images/logo/country/${flag}.png`));
balls.push(
new Ball(
x,
y,
ballSize,
`raffles/assets/images/logo/country/${flag}.png`
)
);
}
}
@@ -289,7 +313,7 @@ window.addEventListener('DOMContentLoaded', () => {
let draggedBall = null;
let lastMouse = { x: 0, y: 0 };
canvas.addEventListener('pointerdown', (e) => {
canvas.addEventListener("pointerdown", (e) => {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
@@ -311,7 +335,7 @@ window.addEventListener('DOMContentLoaded', () => {
}
});
canvas.addEventListener('pointermove', (e) => {
canvas.addEventListener("pointermove", (e) => {
if (draggedBall) {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
@@ -327,7 +351,7 @@ window.addEventListener('DOMContentLoaded', () => {
}
});
window.addEventListener('pointerup', () => {
window.addEventListener("pointerup", () => {
if (draggedBall) {
draggedBall.dragging = false;
draggedBall = null;
@@ -340,13 +364,14 @@ window.addEventListener('DOMContentLoaded', () => {
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
balls.forEach(ball => ball.update(balls));
balls.forEach((ball) => ball.update(balls));
animationId = requestAnimationFrame(animate);
}
// Intersection Observer
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
if (!isAnimating) {
createBalls();
@@ -360,35 +385,42 @@ window.addEventListener('DOMContentLoaded', () => {
}
}
});
}, { threshold: 0.1 });
},
{ threshold: 0.1 }
);
observer.observe(ballSection);
});
// scroll detect in slider
// JS script
// JS for updating label on scroll
window.addEventListener('load', () => {
window.addEventListener("load", () => {
console.log("Window loaded. Running scroll indicator script.");
const scrollLabel = document.getElementById('scroll-indicator-label');
const scrollLabel = document.getElementById("scroll-indicator-label");
console.log("Scroll Label Element:", scrollLabel);
const sections = document.querySelectorAll('.scroll-section');
const sections = document.querySelectorAll(".scroll-section");
console.log("Found Sections:", sections);
if (!scrollLabel || sections.length === 0) {
console.error("Could not find scroll label or sections to observe. Exiting.");
console.error(
"Could not find scroll label or sections to observe. Exiting."
);
return;
}
const observer = new IntersectionObserver(
(entries) => {
console.log("IntersectionObserver callback fired:", entries);
entries.forEach(entry => {
console.log("Observing entry:", entry.target, "Is intersecting:", entry.isIntersecting);
entries.forEach((entry) => {
console.log(
"Observing entry:",
entry.target,
"Is intersecting:",
entry.isIntersecting
);
if (entry.isIntersecting) {
// --- CHANGE IS HERE ---
const sectionId = entry.target.id; // Get the ID of the intersecting section
@@ -396,7 +428,8 @@ window.addEventListener('load', () => {
console.log("Intersecting section ID:", sectionId);
if (sectionId) { // Check if ID exists
if (sectionId) {
// Check if ID exists
// Optional: Format the ID if needed (example: replace hyphens, capitalize)
// let displayText = sectionId.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
// scrollLabel.textContent = displayText;
@@ -404,23 +437,28 @@ window.addEventListener('load', () => {
// Simple version: Use the ID directly
scrollLabel.textContent = sectionId;
console.log("Updated scroll label text to:", sectionId);
} else {
console.warn("Intersecting section is missing an ID attribute:", entry.target);
console.warn(
"Intersecting section is missing an ID attribute:",
entry.target
);
}
}
});
},
{
threshold: 0.5 // Trigger when 50% of the section is visible
threshold: 0.5, // Trigger when 50% of the section is visible
// Consider adjusting rootMargin if you have sticky headers/footers
// rootMargin: "-50px 0px -50px 0px" // Example: ignore top/bottom 50px
}
);
sections.forEach(section => {
sections.forEach((section) => {
if (!section.id) {
console.warn("Section is missing an ID, it won't update the label:", section);
console.warn(
"Section is missing an ID, it won't update the label:",
section
);
}
console.log("Observing section:", section);
observer.observe(section);
@@ -432,7 +470,6 @@ window.addEventListener('load', () => {
// Optional: Add a check outside the load event to see if the script file itself is loaded
console.log("Scroll indicator script file loaded.");
// aeroplane flying
const plane = document.getElementById("plane");
@@ -510,7 +547,7 @@ function updatePosition() {
planeX += vx;
// 🟢 Smoothly move downwardMovement towards targetDownwardMovement
// Smoothly move downwardMovement towards targetDownwardMovement
downwardMovement += (targetDownwardMovement - downwardMovement) * 0.05;
// progress across screen
@@ -524,8 +561,8 @@ function updatePosition() {
const finalY = planeYBase + downwardMovement + waveY + dodgeOffset;
plane.style.left = planeX + 'px';
plane.style.top = finalY + 'px';
plane.style.left = planeX + "px";
plane.style.top = finalY + "px";
dodgeOffset *= dodgeDecay;
@@ -547,16 +584,14 @@ document.addEventListener("mousemove", function (e) {
updatePosition();
// gallery image
const images = Array.from(document.querySelectorAll('.gallery img'));
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const images = Array.from(document.querySelectorAll(".gallery img"));
const lightbox = document.getElementById("lightbox");
const lightboxImg = document.getElementById("lightbox-img");
let currentIndex = 0;
images.forEach((img, index) => {
img.addEventListener('click', () => {
img.addEventListener("click", () => {
currentIndex = index;
showImage();
});
@@ -564,11 +599,11 @@ images.forEach((img, index) => {
function showImage() {
lightboxImg.src = images[currentIndex].src;
lightbox.classList.add('active');
lightbox.classList.add("active");
}
function closeLightbox() {
lightbox.classList.remove('active');
lightbox.classList.remove("active");
}
function changeSlide(step) {
@@ -576,41 +611,37 @@ function changeSlide(step) {
showImage();
}
document.addEventListener('keydown', e => {
if (!lightbox.classList.contains('active')) return;
if (e.key === 'ArrowRight') changeSlide(1);
if (e.key === 'ArrowLeft') changeSlide(-1);
if (e.key === 'Escape') closeLightbox();
document.addEventListener("keydown", (e) => {
if (!lightbox.classList.contains("active")) return;
if (e.key === "ArrowRight") changeSlide(1);
if (e.key === "ArrowLeft") changeSlide(-1);
if (e.key === "Escape") closeLightbox();
});
// cost calculator progress
// cost calculator progress
let currentStep = 1;
const totalSteps = 7; // updated to match HTML
const monkey = document.getElementById('monkey').querySelector('img');
const monkeyContainer = document.getElementById('monkey');
const nextBtn = document.getElementById('nextBtn');
const doneBtn = document.getElementById('doneBtn');
const bananalast = document.getElementById('b5');
const totalSteps = 5;
const monkey = document.getElementById("monkey").querySelector("img");
const monkeyContainer = document.getElementById("monkey");
const nextBtn = document.getElementById("nextBtn");
const prevBtn = document.getElementById("prevBtn");
const doneBtn = document.getElementById("doneBtn");
const monkeyImages = [
"/raffles/assets/images/icons/monkey1.png",
"/raffles/assets/images/icons/monkey2.png",
"/raffles/assets/images/icons/monkey3.png",
"/raffles/assets/images/icons/monkey4.png",
"/raffles/assets/images/icons/monkey5.png",
"/raffles/assets/images/icons/monkey6.png",
"/raffles/assets/images/icons/monkey7.png"
"raffles/assets/images/icons/monkey2.png",
"raffles/assets/images/icons/monkey2.png",
"raffles/assets/images/icons/monkey3.png",
"raffles/assets/images/icons/monkey4.png",
"raffles/assets/images/icons/monkey5.png",
"raffles/assets/images/icons/monkey6.png",
"raffles/assets/images/icons/monkey7.png",
];
nextBtn.addEventListener('click', () => {
if (currentStep < totalSteps) {
currentStep++;
// Calculate monkey position based on window width
// Function to update monkey position based on screen size
function updateMonkeyPosition() {
let percent;
if (window.innerWidth <= 540) {
percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
} else if (window.innerWidth <= 768) {
@@ -622,45 +653,97 @@ nextBtn.addEventListener('click', () => {
} else {
percent = ((currentStep - 1) / (totalSteps - 0.5)) * 100;
}
monkeyContainer.style.left = percent + '%';
// Update monkey image
monkeyContainer.style.left = percent + "%";
}
// Function to update button visibility
function updateButtonVisibility() {
if (currentStep === 1) {
prevBtn.style.display = "none"; // Hide Previous on first step
} else {
prevBtn.style.display = "flex"; // Show Previous on other steps
}
if (currentStep === totalSteps) {
nextBtn.style.display = "none";
doneBtn.style.display = "block";
} else {
nextBtn.style.display = "flex";
doneBtn.style.display = "none";
}
}
// Next button click event
nextBtn.addEventListener("click", () => {
if (currentStep < totalSteps) {
currentStep++;
// Update monkey position
updateMonkeyPosition();
// Change monkey image
monkey.src = monkeyImages[currentStep - 1];
// Switch step content
const currentContent = document.getElementById('step' + (currentStep - 1));
const nextContent = document.getElementById('step' + currentStep);
// Update step content
const currentContent = document.getElementById("step" + (currentStep - 1));
const nextContent = document.getElementById("step" + currentStep);
if (currentContent && nextContent) {
currentContent.classList.remove('active');
nextContent.classList.add('active');
currentContent.classList.remove("active");
nextContent.classList.add("active");
}
// Show done button on last step
if (currentStep === totalSteps) {
nextBtn.style.display = 'none';
doneBtn.style.display = 'block';
}
// Update button visibility
updateButtonVisibility();
}
});
doneBtn.addEventListener('click', () => {
bananalast.classList.add('active');
// Previous button click event
prevBtn.addEventListener("click", () => {
if (currentStep > 1) {
// Update step content first
const currentContent = document.getElementById("step" + currentStep);
const prevContent = document.getElementById("step" + (currentStep - 1));
if (currentContent && prevContent) {
currentContent.classList.remove("active");
prevContent.classList.add("active");
}
currentStep--;
// Update monkey position
updateMonkeyPosition();
// Change monkey image (go back to previous image)
monkey.src = monkeyImages[currentStep - 1];
// Update button visibility
updateButtonVisibility();
}
});
// Initialize button visibility on page load
updateButtonVisibility();
// Update on window resize
window.addEventListener("resize", updateMonkeyPosition);
doneBtn.addEventListener("click", () => {
bananalast.classList.add("active");
if (window.innerWidth <= 992) {
monkey.src = monkeyImages[6]; // last image
monkeyContainer.style.top = '142%';
monkeyContainer.style.left = '40%';
// On mobile: show 7th image and move down
monkey.src = monkeyImages[6]; // 7th image (index 6)
monkeyContainer.style.top = "142%";
monkeyContainer.style.left = "40%"; // Optional: keep it centered or adjust as needed
} else {
monkey.src = monkeyImages[5];
monkeyContainer.style.left = '110%';
monkeyContainer.style.top = '-120%';
// On desktop: show 6th image and move right
monkey.src = monkeyImages[5]; // 6th image (index 5)
monkeyContainer.style.left = "110%";
monkeyContainer.style.top = "-120%"; // Reset top if changed previously
}
});
// Final monkey image
// document.addEventListener("DOMContentLoaded", function () {
// const animatedSections = document.querySelectorAll('[data-custom-animations="true"]');
@@ -684,4 +767,4 @@ doneBtn.addEventListener('click', () => {
// animatedSections.forEach(section => observer.observe(section));
// });
// free resources

218
resources/views/client/raffles/pages/cost-calculator.blade.php
View File

@@ -131,9 +131,10 @@
<section class="lqd-section pb-160">
<div class="container">
<form id="cost-calculator">
<div class="row" id="interactiveSection">
<div class="col col-lg-12">
{{-- <div class="col col-lg-7">
<div class="wizard-container">
<div class="nav" id="step-nav">
@@ -248,11 +249,216 @@
</form>
</div>
</div> --}}
<div class="col col-lg-7">
<div class="cost-choosing">
<div class="step-content active" id="step1">
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
<h5 class="text-ter text-18 font-medium pb-20">Where do you want to study</h5>
<div class="row flex flex-wrap py-20">
<div class="col col-sm-4">
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
<input name="country" type="radio" id="country1">
<label class="text-20 text-ter p-0 m-0" for="country1">UK</label>
</div>
</div>
<div class="col col-sm-4">
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
<input name="country" type="radio" id="country2">
<label class="text-20 text-ter p-0 m-0" for="country2">Australia</label>
</div>
</div>
<div class="col col-sm-4">
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
<input name="country" type="radio" id="country3">
<label class="text-20 text-ter p-0 m-0" for="country3">USA</label>
</div>
</div>
<div class="col col-sm-4">
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
<input name="country" type="radio" id="country4">
<label class="text-20 text-ter p-0 m-0" for="country4">Newzealand</label>
</div>
</div>
</div>
</div>
<div class="step-content" id="step2">
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
<h5 class="text-ter text-18 font-medium pb-20">Are you going alone or with a dependent?
</h5>
<div class="row flex flex-wrap py-20">
<div class="col col-sm-6">
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
<input name="alone" type="radio" id="alone">
<label class="text-20 text-ter p-0 m-0" for="alone">Alone</label>
</div>
</div>
<div class="col col-sm-6">
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
<input name="alone" type="radio" id="spouse">
<label class="text-20 text-ter p-0 m-0" for="spouse">With Spouse</label>
</div>
</div>
<div class="col col-sm-6">
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
<input name="alone" type="radio" id="child">
<label class="text-20 text-ter p-0 m-0" for="child">With Spouse and
child</label>
</div>
</div>
</div>
</div>
<div class="step-content" id="step3">
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
<h5 class="text-ter text-18 font-medium pb-20">Do you want to include other services?
</h5>
<div class="row flex flex-wrap py-20">
<div class="col col-sm-4">
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
<input name="services" type="radio" id="serviceYes">
<label class="text-20 text-ter p-0 m-0" for="serviceYes">Yes</label>
</div>
</div>
<div class="col col-sm-4">
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
<input name="services" type="radio" id="serviceNo">
<label class="text-20 text-ter p-0 m-0" for="serviceNo">No</label>
</div>
</div>
</div>
</div>
<div class="step-content" id="step4">
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
<h5 class="text-ter text-18 font-medium pb-20">Which Level are you applying for?</h5>
<div class="row flex flex-wrap py-20">
<div class="col col-sm-4">
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
<input name="level" type="radio" id="bachelors">
<label class="text-20 text-ter p-0 m-0" for="bachelors">Bachelors</label>
</div>
</div>
<div class="col col-sm-4">
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
<input name="level" type="radio" id="masters">
<label class="text-20 text-ter p-0 m-0" for="masters">Masters</label>
</div>
</div>
</div>
</div>
<div class="step-content" id="step5">
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
<h5 class="text-ter text-18 font-medium pb-20">Which Program are you applying for?</h5>
<div class="row flex py-20">
<div class="col col-sm-12">
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
<select name="" id="">
<option value="">Select Program</option>
<option value="">Masters in Information Technology</option>
</select>
</div>
</div>
</div>
</div>
<div class=" flex items-center justify-center next-btn">
<button id="prevBtn" type="button"
class="rounded-30 px-20 py-10 text-ter text-16 text-center border-0 flex items-center gap-10 justify-center mr-5">
<i class="fa-solid fa-chevron-left"></i>
<p class="m-0 p-0">Previous</p>
</button>
<button id="nextBtn" type="button"
class="rounded-30 px-20 py-10 text-ter text-16 text-center border-0 flex items-center gap-10 justify-center">
<p class="m-0 p-0">Next</p> <i class="fa-solid fa-chevron-right"></i>
</button>
<button type="submit" id="doneBtn" style="display: none;"
class="rounded-30 px-20 py-10 text-ter text-16 text-center border-0 flex items-center gap-10 justify-center mr-5">Done</button>
</div>
<div class="progress-line">
<div class="progress-track">
<span class="banana" id="b1">
<div class="dot"
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
</span>
<span class="banana" id="b2">
<div class="dot"
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
</span>
<span class="banana" id="b3">
<div class="dot"
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
</span>
<span class="banana" id="b4">
<div class="dot"
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
</span>
<span class="banana" id="b5"><img
src=" {{ asset('raffles/assets/images/icons/bananas.svg') }}"
alt=""></span>
</div>
<div class="monkey" id="monkey" style="left: 0%;"><img
src="{{ asset('raffles\assets\images\icons\monkey.png') }}" alt="">
</div>
</div>
</div>
</div>
<div class="col col-lg-1"></div>
{{-- <div class="col col-lg-4">
<div class="col col-lg-4">
<div class="total-cost">
<h4>Total <span class="text-black">Cost</span> </h4>
<table>
@@ -268,16 +474,18 @@
</tbody>
</table>
</div>
</div> --}}
</div>
</div>
</form>
</div>
</section>
</section>
@endsection
@push('js')
<script>
{{-- <script>
const form = document.getElementById('multiStepForm');
const tabs = document.querySelectorAll('.tab-pane');
const nextBtns = document.querySelectorAll('.btn-next');
@@ -346,5 +554,5 @@
yesRadio.addEventListener('change', toggleProficiencySections);
noRadio.addEventListener('change', toggleProficiencySections);
toggleProficiencySections();
</script>
</script> --}}
@endpush