Merge branch 'alika' of http://bibgit.com/Subash/new_raffles
This commit is contained in:
8
public/raffles/assets/css/utility.min.css
vendored
8
public/raffles/assets/css/utility.min.css
vendored
@@ -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;
|
||||
|
||||
@@ -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 () {
|
||||
intouchPopup.classList.add("active");
|
||||
// alert("clicked ")
|
||||
|
||||
openButtons.forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
if (window.innerWidth > 992) {
|
||||
// Desktop and tablets
|
||||
intouchPopup.classList.add("active");
|
||||
} 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 => {
|
||||
if (entry.isIntersecting) {
|
||||
leftItems.forEach((item, i) => {
|
||||
setTimeout(() => item.classList.add('visible'), i * 300);
|
||||
});
|
||||
rightItems.forEach((item, i) => {
|
||||
setTimeout(() => item.classList.add('visible'), i * 300);
|
||||
});
|
||||
} else {
|
||||
leftItems.forEach(item => item.classList.remove('visible'));
|
||||
rightItems.forEach(item => item.classList.remove('visible'));
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.5 });
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
leftItems.forEach((item, i) => {
|
||||
setTimeout(
|
||||
() => item.classList.add("visible"),
|
||||
i * 300
|
||||
);
|
||||
});
|
||||
rightItems.forEach((item, i) => {
|
||||
setTimeout(
|
||||
() => item.classList.add("visible"),
|
||||
i * 300
|
||||
);
|
||||
});
|
||||
} else {
|
||||
leftItems.forEach((item) =>
|
||||
item.classList.remove("visible")
|
||||
);
|
||||
rightItems.forEach((item) =>
|
||||
item.classList.remove("visible")
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ 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,55 +364,63 @@ 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 => {
|
||||
if (entry.isIntersecting) {
|
||||
if (!isAnimating) {
|
||||
createBalls();
|
||||
isAnimating = true;
|
||||
animate();
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
if (!isAnimating) {
|
||||
createBalls();
|
||||
isAnimating = true;
|
||||
animate();
|
||||
}
|
||||
} else {
|
||||
if (isAnimating) {
|
||||
cancelAnimationFrame(animationId);
|
||||
isAnimating = false;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (isAnimating) {
|
||||
cancelAnimationFrame(animationId);
|
||||
isAnimating = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}, { 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,91 +611,139 @@ 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', () => {
|
||||
// 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) {
|
||||
percent = ((currentStep - 1) / (totalSteps - 0.3)) * 100;
|
||||
} else if (window.innerWidth <= 992) {
|
||||
percent = ((currentStep - 1) / (totalSteps - 0.7)) * 100;
|
||||
} else if (window.innerWidth <= 1180) {
|
||||
percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
|
||||
} else {
|
||||
percent = ((currentStep - 1) / (totalSteps - 0.5)) * 100;
|
||||
}
|
||||
|
||||
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++;
|
||||
|
||||
// Calculate monkey position based on window width
|
||||
let percent;
|
||||
if (window.innerWidth <= 540) {
|
||||
percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
|
||||
} else if (window.innerWidth <= 768) {
|
||||
percent = ((currentStep - 1) / (totalSteps - 0.3)) * 100;
|
||||
} else if (window.innerWidth <= 992) {
|
||||
percent = ((currentStep - 1) / (totalSteps - 0.7)) * 100;
|
||||
} else if (window.innerWidth <= 1180) {
|
||||
percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
|
||||
} else {
|
||||
percent = ((currentStep - 1) / (totalSteps - 0.5)) * 100;
|
||||
}
|
||||
monkeyContainer.style.left = percent + '%';
|
||||
|
||||
// Update monkey image
|
||||
|
||||
// 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');
|
||||
}
|
||||
|
||||
// Show done button on last step
|
||||
if (currentStep === totalSteps) {
|
||||
nextBtn.style.display = 'none';
|
||||
doneBtn.style.display = 'block';
|
||||
currentContent.classList.remove("active");
|
||||
nextContent.classList.add("active");
|
||||
}
|
||||
|
||||
// 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
|
||||
|
||||
@@ -131,9 +131,10 @@
|
||||
|
||||
<section class="lqd-section pb-160">
|
||||
<div class="container">
|
||||
<div class="row" id="interactiveSection">
|
||||
|
||||
<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,36 +249,244 @@
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col col-lg-1"></div>
|
||||
|
||||
{{-- <div class="col col-lg-4">
|
||||
<div class="total-cost">
|
||||
<h4>Total <span class="text-black">Cost</span> </h4>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="font-bold">S.N.</th>
|
||||
<th class="font-bold">Select</th>
|
||||
<th class="font-bold">Max Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="totalCostBody">
|
||||
<!-- Filled dynamically -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
</div>
|
||||
<div class="col col-lg-7">
|
||||
<form id="cost-calculator">
|
||||
<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>
|
||||
</form>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col col-lg-1"></div>
|
||||
|
||||
<div class="col col-lg-4">
|
||||
<div class="total-cost">
|
||||
<h4>Total <span class="text-black">Cost</span> </h4>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="font-bold">S.N.</th>
|
||||
<th class="font-bold">Select</th>
|
||||
<th class="font-bold">Max Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="totalCostBody">
|
||||
<!-- Filled dynamically -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</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 +555,5 @@
|
||||
yesRadio.addEventListener('change', toggleProficiencySections);
|
||||
noRadio.addEventListener('change', toggleProficiencySections);
|
||||
toggleProficiencySections();
|
||||
</script>
|
||||
</script> --}}
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user