86 lines
3.1 KiB
JavaScript
86 lines
3.1 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
let tutorialSteps = [
|
|
{ selector: ".dashboard-overview", message: "This is your dashboard where you can track inventory." },
|
|
{ selector: ".add-car-button", message: "Click here to add a new car." },
|
|
{ selector: ".reports-section", message: "View and download sales & purchase reports here." }
|
|
];
|
|
|
|
let currentStep = 0;
|
|
|
|
// Create overlay and tutorial box dynamically
|
|
let overlay = document.createElement("div");
|
|
overlay.classList.add("tutorial-overlay");
|
|
document.body.appendChild(overlay);
|
|
|
|
let tutorialBox = document.createElement("div");
|
|
tutorialBox.classList.add("tutorial-box");
|
|
overlay.appendChild(tutorialBox);
|
|
|
|
let arrow = document.createElement("div");
|
|
arrow.classList.add("tutorial-arrow");
|
|
tutorialBox.appendChild(arrow);
|
|
|
|
let messageText = document.createElement("p");
|
|
tutorialBox.appendChild(messageText);
|
|
|
|
let nextButton = document.createElement("button");
|
|
nextButton.classList.add('btn');
|
|
nextButton.classList.add('btn-sm');
|
|
nextButton.classList.add('btn-phoenix-primary');
|
|
nextButton.textContent = _("Next");
|
|
nextButton.style.marginTop = "10px";
|
|
tutorialBox.appendChild(nextButton);
|
|
|
|
let skipButton = document.createElement("button");
|
|
skipButton.classList.add('btn');
|
|
skipButton.classList.add('btn-sm');
|
|
skipButton.classList.add('btn-phoenix-primary');
|
|
skipButton.textContent = "Skip Tutorial";
|
|
skipButton.style.marginTop = "10px";
|
|
skipButton.style.marginLeft = "10px";
|
|
tutorialBox.appendChild(skipButton);
|
|
|
|
function showStep(stepIndex) {
|
|
if (stepIndex >= tutorialSteps.length) {
|
|
overlay.style.display = "none";
|
|
document.querySelector(".tutorial-highlight")?.classList.remove("tutorial-highlight");
|
|
return;
|
|
}
|
|
|
|
let step = tutorialSteps[stepIndex];
|
|
let element = document.querySelector(step.selector);
|
|
|
|
if (element) {
|
|
let rect = element.getBoundingClientRect();
|
|
messageText.textContent = step.message;
|
|
|
|
// Position tutorial box near the element
|
|
tutorialBox.style.top = rect.top + window.scrollY + rect.height + 10 + "px";
|
|
tutorialBox.style.left = rect.left + window.scrollX + "px";
|
|
|
|
// Position the arrow
|
|
arrow.style.top = "-10px"; // Adjust arrow position
|
|
arrow.style.left = "50%";
|
|
arrow.style.transform = "translateX(-50%)";
|
|
|
|
// Highlight the element
|
|
document.querySelector(".tutorial-highlight")?.classList.remove("tutorial-highlight");
|
|
element.classList.add("tutorial-highlight");
|
|
|
|
overlay.style.display = "flex";
|
|
}
|
|
}
|
|
|
|
nextButton.addEventListener("click", function () {
|
|
currentStep++;
|
|
showStep(currentStep);
|
|
});
|
|
|
|
skipButton.addEventListener("click", function () {
|
|
overlay.style.display = "none";
|
|
document.querySelector(".tutorial-highlight")?.classList.remove("tutorial-highlight");
|
|
});
|
|
|
|
// Start the tutorial
|
|
showStep(currentStep);
|
|
}); |