Create script.js

script.js

@@ -0,0 +1,130 @@
+// Assembly Guide JavaScript
+let currentStep = 1;
+const totalSteps = 51;
+
+// Map of available images (only step1 and step2 exist, rest are placeholders)
+const availableImages = {
+    1: 'steps/step1.jpg',
+    2: 'steps/step2.jpg'
+};
+
+// DOM Elements
+const stepDisplay = document.getElementById('stepDisplay');
+const stepImage = document.getElementById('stepImage');
+const placeholderText = document.getElementById('placeholderText');
+const placeholderNumber = document.getElementById('placeholderNumber');
+const placeholderStep = document.getElementById('placeholderStep');
+const prevBtn = document.getElementById('prevBtn');
+const nextBtn = document.getElementById('nextBtn');
+const progressFill = document.getElementById('progressFill');
+const indicatorsContainer = document.getElementById('indicators');
+
+// Initialize
+function init() {
+    createIndicators();
+    updateDisplay();
+}
+
+// Create step indicators
+function createIndicators() {
+    const indicatorsToShow = Math.min(totalSteps, 10);
+    
+    for (let i = 0; i < indicatorsToShow; i++) {
+        const button = document.createElement('button');
+        button.className = 'indicator';
+        button.setAttribute('aria-label', `Go to step ${i + 1}`);
+        button.addEventListener('click', () => {
+            const targetStep = Math.floor((currentStep - 1) / 10) * 10 + i + 1;
+            if (targetStep <= totalSteps) {
+                goToStep(targetStep);
+            }
+        });
+        indicatorsContainer.appendChild(button);
+    }
+}
+
+// Update indicators
+function updateIndicators() {
+    const indicators = indicatorsContainer.children;
+    const startStep = Math.floor((currentStep - 1) / 10) * 10 + 1;
+    
+    Array.from(indicators).forEach((indicator, i) => {
+        const step = startStep + i;
+        if (step > totalSteps) {
+            indicator.style.display = 'none';
+        } else {
+            indicator.style.display = 'block';
+            indicator.classList.toggle('active', step === currentStep);
+        }
+    });
+}
+
+// Update display
+function updateDisplay() {
+    // Update step counter
+    stepDisplay.textContent = `Step ${currentStep}/${totalSteps}`;
+    
+    // Update image or placeholder
+    if (availableImages[currentStep]) {
+        stepImage.src = availableImages[currentStep];
+        stepImage.alt = `Assembly step ${currentStep}`;
+        stepImage.style.display = 'block';
+        placeholderText.style.display = 'none';
+    } else {
+        stepImage.style.display = 'none';
+        placeholderText.style.display = 'block';
+        placeholderNumber.textContent = currentStep;
+        placeholderStep.textContent = currentStep;
+    }
+    
+    // Update buttons
+    prevBtn.disabled = currentStep === 1;
+    nextBtn.disabled = currentStep === totalSteps;
+    
+    // Update progress bar
+    const progress = (currentStep / totalSteps) * 100;
+    progressFill.style.width = `${progress}%`;
+    
+    // Update indicators
+    updateIndicators();
+}
+
+// Go to specific step
+function goToStep(step) {
+    if (step >= 1 && step <= totalSteps) {
+        currentStep = step;
+        updateDisplay();
+    }
+}
+
+// Next step
+function nextStep() {
+    if (currentStep < totalSteps) {
+        currentStep++;
+        updateDisplay();
+    }
+}
+
+// Previous step
+function prevStep() {
+    if (currentStep > 1) {
+        currentStep--;
+        updateDisplay();
+    }
+}
+
+// Event listeners
+nextBtn.addEventListener('click', nextStep);
+prevBtn.addEventListener('click', prevStep);
+
+// Keyboard navigation
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowRight') {
+        nextStep();
+    } else if (e.key === 'ArrowLeft') {
+        prevStep();
+    }
+});
+
+// Initialize on load
+init();