Update script.js

script.js

@@ -1,8 +1,76 @@
-// Assembly Guide JavaScript
-let currentStep = 1;
-const totalSteps = 51;
+// Assembly Steps Data
+const YOUTUBE_VIDEO_ID = "WeKKdnuXca4";
+
+const stepsData = [
+    { timestamp: "00:14", title: "Set all parts aside" },
+    { timestamp: "00:45", title: "Stick Foot Pads" },
+    { timestamp: "01:30", title: "Position the protective sleeve on the USB cable" },
+    { timestamp: "02:51", title: "Fix the USB Extension Cable" },
+    { timestamp: "03:23", title: "Insert the Power Board" },
+    { timestamp: "03:39", title: "Fix the Power Board" },
+    { timestamp: "04:30", title: "Connect the Battery" },
+    { timestamp: "05:23", title: "Connect the cables to the Power Board" },
+    { timestamp: "06:27", title: "Position the Bottom Assembly" },
+    { timestamp: "07:34", title: "Fix the Foot Assembly to the Bottom Assembly" },
+    { timestamp: "08:31", title: "Connect the Foot Motor" },
+    { timestamp: "09:15", title: "Screw the link rods onto the motor arms" },
+    { timestamp: "12:57", title: "Connect Motor 1 to 2" },
+    { timestamp: "13:23", title: "Connect Motor 2 to 3" },
+    { timestamp: "13:45", title: "Connect Motor 4 to 5" },
+    { timestamp: "14:05", title: "Connect Motor 5 to 6" },
+    { timestamp: "14:31", title: "Insert all motors into the Bottom Assembly" },
+    { timestamp: "16:13", title: "Clip the motor cables into the Bottom Assembly" },
+    { timestamp: "18:56", title: "Position the Tricap" },
+    { timestamp: "19:37", title: "Route the cables" },
+    { timestamp: "20:23", title: "Connect Motor 3 to 4" },
+    { timestamp: "21:06", title: "Route the cables" },
+    { timestamp: "23:28", title: "Check rotation" },
+    { timestamp: "23:53", title: "Screw the Tricap" },
+    { timestamp: "25:44", title: "Screw the Bottom Head onto the link rods" },
+    { timestamp: "28:58", title: "Route the cables through the Bottom Head" },
+    { timestamp: "30:07", title: "Route the Wi-Fi Antenna and the fan cable through the Head PCB" },
+    { timestamp: "30:14", title: "Connect the flexible camera cable (step for reference only)" },
+    { timestamp: "30:47", title: "Route the cables through the Head PCB" },
+    { timestamp: "31:48", title: "Screw the Head PCB" },
+    { timestamp: "33:00", title: "Position the Top Shell" },
+    { timestamp: "34:00", title: "Screw the Top Shell" },
+    { timestamp: "35:32", title: "Place the lenses in the Glasses Holder" },
+    { timestamp: "35:43", title: "Insert the Fisheye Lenses into the caps" },
+    { timestamp: "36:07", title: "Snap the Fisheye Lenses" },
+    { timestamp: "36:52", title: "Screw the Glasses Assembly onto the Front Head Shell" },
+    { timestamp: "37:53", title: "Attach the cases to Antenna's motors" },
+    { timestamp: "38:24", title: "Fix Antenna's Assembly to Back Head Shell" },
+    { timestamp: "39:41", title: "Connect the Antenna's motors" },
+    { timestamp: "40:22", title: "Slide the Back Head Assembly onto the Reachy Mini body" },
+    { timestamp: "40:45", title: "Screw the Back Head" },
+    { timestamp: "41:45", title: "Fix the Cable Holder" },
+    { timestamp: "42:20", title: "Connect Speaker, fan and Motor Cables" },
+    { timestamp: "42:53", title: "Connect Power and USB Extension Cables" },
+    { timestamp: "43:28", title: "Stick the Wi-Fi Antenna" },
+    { timestamp: "44:08", title: "Slide the Top Head Assembly onto the Back Head" },
+    { timestamp: "44:33", title: "Connect the Flexible Printed Cable to the Head PCB" },
+    { timestamp: "44:52", title: "Connect the Flexible Camera Cable on the Front Head" },
+    { timestamp: "45:16", title: "Fix the Front Head" },
+    { timestamp: "46:25", title: "Fix the Antennas" },
+];
+
+// Parse timestamp to seconds (MM:SS format)
+function parseTimestamp(ts) {
+    const parts = ts.split(':').map(Number);
+    return parts[0] * 60 + parts[1];
+}
+
+// Create assembly steps with parsed timestamps
+const assemblySteps = stepsData.map((step, index) => ({
+    id: index + 1,
+    title: step.title,
+    timestamp: step.timestamp,
+    timestampSeconds: parseTimestamp(step.timestamp)
+}));
 
-// Map of available images (only step1 and step2 exist, rest are placeholders)
+const TOTAL_STEPS = assemblySteps.length;
+
+// Available step images
 const availableImages = {
     1: 'assets/step1.jpg',
     2: 'assets/step2.jpg',
@@ -55,126 +123,310 @@ const availableImages = {
     49: 'assets/step49.jpg',
     50: 'assets/step50.jpg',
     51: 'assets/step51.jpg',
-  
 };
 
+function getStepImage(stepId) {
+    return availableImages[stepId] || null;
+}
+
+// App State
+let currentStep = 1;
+let isFullscreen = false;
+let scale = 1;
+let position = { x: 0, y: 0 };
+let isDragging = false;
+let dragStart = { x: 0, y: 0 };
+
 // 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');
+const stepCounterText = document.getElementById('step-counter-text');
+const stepImage = document.getElementById('step-image');
+const placeholder = document.getElementById('placeholder');
+const placeholderNumber = document.getElementById('placeholder-number');
+const imageWrapper = document.getElementById('image-wrapper');
+const youtubeIframeDesktop = document.getElementById('youtube-iframe-desktop');
+const youtubeIframeMobile = document.getElementById('youtube-iframe-mobile');
+const prevBtn = document.getElementById('prev-btn');
+const nextBtn = document.getElementById('next-btn');
+const stepIndicators = document.getElementById('step-indicators');
+const progressBar = document.getElementById('progress-bar');
+const fullscreenBtn = document.getElementById('fullscreen-btn');
+const fullscreenModal = document.getElementById('fullscreen-modal');
+const closeFullscreenBtn = document.getElementById('close-fullscreen-btn');
+const fullscreenStepTitle = document.getElementById('fullscreen-step-title');
+const fullscreenImage = document.getElementById('fullscreen-image');
+const fullscreenPlaceholder = document.getElementById('fullscreen-placeholder');
+const fullscreenPlaceholderNumber = document.getElementById('fullscreen-placeholder-number');
+const fullscreenImageContainer = document.getElementById('fullscreen-image-container');
+const fullscreenYoutubeIframeDesktop = document.getElementById('fullscreen-youtube-iframe-desktop');
+const fullscreenYoutubeIframeMobile = document.getElementById('fullscreen-youtube-iframe-mobile');
+const fullscreenPrevBtn = document.getElementById('fullscreen-prev-btn');
+const fullscreenNextBtn = document.getElementById('fullscreen-next-btn');
+const fullscreenStepIndicators = document.getElementById('fullscreen-step-indicators');
+const fullscreenProgressBar = document.getElementById('fullscreen-progress-bar');
+const zoomInBtn = document.getElementById('zoom-in-btn');
+const zoomOutBtn = document.getElementById('zoom-out-btn');
+const zoomLevel = document.getElementById('zoom-level');
 
-// Initialize
-function init() {
-    createIndicators();
-    updateDisplay();
+// Update YouTube embed
+function updateYouTubeEmbed(timestampSeconds) {
+    const embedUrl = `https://www.youtube.com/embed/${YOUTUBE_VIDEO_ID}?start=${timestampSeconds}&rel=0&autoplay=1&mute=1`;
+    youtubeIframeDesktop.src = embedUrl;
+    youtubeIframeMobile.src = embedUrl;
+    fullscreenYoutubeIframeDesktop.src = embedUrl;
+    fullscreenYoutubeIframeMobile.src = embedUrl;
 }
 
-// Create step indicators
-function createIndicators() {
-    const indicatorsToShow = Math.min(totalSteps, 10);
+// Render step indicators with pagination
+function renderStepIndicators(containerId, currentStep, onClick) {
+    const container = document.getElementById(containerId);
+    container.innerHTML = '';
+    
+    const groupStart = Math.floor((currentStep - 1) / 10) * 10 + 1;
+    const groupEnd = Math.min(groupStart + 9, TOTAL_STEPS);
+    const canGoPrevGroup = groupStart > 1;
+    const canGoNextGroup = groupEnd < TOTAL_STEPS;
+    
+    // Previous group button
+    if (canGoPrevGroup) {
+        const prevGroupBtn = document.createElement('button');
+        prevGroupBtn.className = 'step-indicator-nav';
+        prevGroupBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>';
+        prevGroupBtn.setAttribute('aria-label', 'Previous group');
+        prevGroupBtn.addEventListener('click', () => onClick(groupStart - 1));
+        container.appendChild(prevGroupBtn);
+    }
     
-    for (let i = 0; i < indicatorsToShow; i++) {
+    // Step number buttons    
+    for (let i = 0; i < 10; i++) {
+        const stepNum = groupStart + i;
+        if (stepNum > TOTAL_STEPS) break;
+        
+        const isActive = stepNum === currentStep;
         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);
+        button.className = `step-indicator-num ${isActive ? 'step-indicator-num-active' : ''}`;
+        button.textContent = stepNum;
+        button.setAttribute('aria-label', `Go to step ${stepNum}`);
+        button.addEventListener('click', () => onClick(stepNum));
+        container.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);
-        }
-    });
+    // Next group button
+    if (canGoNextGroup) {
+        const nextGroupBtn = document.createElement('button');
+        nextGroupBtn.className = 'step-indicator-nav';
+        nextGroupBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>';
+        nextGroupBtn.setAttribute('aria-label', 'Next group');
+        nextGroupBtn.addEventListener('click', () => onClick(groupEnd + 1));
+        container.appendChild(nextGroupBtn);
+    }
 }
 
-// Update display
-function updateDisplay() {
+// Update UI
+function updateUI() {
+    const step = assemblySteps[currentStep - 1];
+    const imageSrc = getStepImage(step.id);
+    
     // 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';
+    stepCounterText.textContent = `Step ${step.id}/${TOTAL_STEPS}`;
+    
+    // Update image
+    if (imageSrc) {
+        stepImage.src = imageSrc;
+        stepImage.alt = `Assembly step ${step.id}`;
+        stepImage.classList.remove('hidden');
+        placeholder.classList.add('hidden');
     } else {
-        stepImage.style.display = 'none';
-        placeholderText.style.display = 'block';
-        placeholderNumber.textContent = currentStep;
-        placeholderStep.textContent = currentStep;
+        stepImage.classList.add('hidden');
+        placeholder.classList.remove('hidden');
+        placeholderNumber.textContent = step.id;
     }
     
+    // Update YouTube embed
+    updateYouTubeEmbed(step.timestampSeconds);
+    
     // Update buttons
     prevBtn.disabled = currentStep === 1;
-    nextBtn.disabled = currentStep === totalSteps;
+    nextBtn.disabled = currentStep === TOTAL_STEPS;
+    
+    // Update step indicators
+    renderStepIndicators('step-indicators', currentStep, goToStep);
     
     // Update progress bar
-    const progress = (currentStep / totalSteps) * 100;
-    progressFill.style.width = `${progress}%`;
+    const progress = (currentStep / TOTAL_STEPS) * 100;
+    progressBar.style.width = `${progress}%`;
     
-    // Update indicators
-    updateIndicators();
+    // Update fullscreen UI
+    updateFullscreenUI();
+}
+
+// Update fullscreen UI
+function updateFullscreenUI() {
+    const step = assemblySteps[currentStep - 1];
+    const imageSrc = getStepImage(step.id);
+    
+    fullscreenStepTitle.textContent = `Step ${step.id}/${TOTAL_STEPS} - ${step.title}`;
+    
+    if (imageSrc) {
+        fullscreenImage.src = imageSrc;
+        fullscreenImage.alt = `Step ${step.id}`;
+        fullscreenImage.classList.remove('hidden');
+        fullscreenPlaceholder.classList.add('hidden');
+    } else {
+        fullscreenImage.classList.add('hidden');
+        fullscreenPlaceholder.classList.remove('hidden');
+        fullscreenPlaceholderNumber.textContent = step.id;
+    }
+    
+    fullscreenPrevBtn.disabled = currentStep === 1;
+    fullscreenNextBtn.disabled = currentStep === TOTAL_STEPS;
+    
+    renderStepIndicators('fullscreen-step-indicators', currentStep, goToStepFullscreen);
+    
+    const progress = (currentStep / TOTAL_STEPS) * 100;
+    fullscreenProgressBar.style.width = `${progress}%`;
+    
+    updateZoomDisplay();
+}
+
+// Navigation functions
+function goToPrevious() {
+    if (currentStep > 1) {
+        currentStep--;
+        updateUI();
+    }
+}
+
+function goToNext() {
+    if (currentStep < TOTAL_STEPS) {
+        currentStep++;
+        updateUI();
+    }
 }
 
-// Go to specific step
 function goToStep(step) {
-    if (step >= 1 && step <= totalSteps) {
+    if (step >= 1 && step <= TOTAL_STEPS) {
         currentStep = step;
-        updateDisplay();
+        updateUI();
     }
 }
 
-// Next step
-function nextStep() {
-    if (currentStep < totalSteps) {
-        currentStep++;
-        updateDisplay();
+function goToStepFullscreen(step) {
+    resetZoom();
+    goToStep(step);
+}
+
+function goToPreviousFullscreen() {
+    resetZoom();
+    goToPrevious();
+}
+
+function goToNextFullscreen() {
+    resetZoom();
+    goToNext();
+}
+
+// Fullscreen functions
+function openFullscreen() {
+    isFullscreen = true;
+    fullscreenModal.classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+    updateFullscreenUI();
+}
+
+function closeFullscreen() {
+    isFullscreen = false;
+    fullscreenModal.classList.add('hidden');
+    document.body.style.overflow = '';
+    resetZoom();
+}
+
+// Zoom functions
+function zoomIn() {
+    scale = Math.min(scale + 0.5, 4);
+    updateZoomDisplay();
+}
+
+function zoomOut() {
+    scale = Math.max(scale - 0.5, 0.5);
+    updateZoomDisplay();
+}
+
+function resetZoom() {
+    scale = 1;
+    position = { x: 0, y: 0 };
+    updateZoomDisplay();
+}
+
+function updateZoomDisplay() {
+    zoomLevel.textContent = `${Math.round(scale * 100)}%`;
+    fullscreenImage.style.transform = `translate(${position.x}px, ${position.y}px) scale(${scale})`;
+}
+
+// Drag functions for fullscreen image
+function handleMouseDown(e) {
+    if (scale > 1) {
+        isDragging = true;
+        dragStart = {
+            x: e.clientX - position.x,
+            y: e.clientY - position.y
+        };
+        fullscreenImageContainer.style.cursor = 'grabbing';
     }
 }
 
-// Previous step
-function prevStep() {
-    if (currentStep > 1) {
-        currentStep--;
-        updateDisplay();
+function handleMouseMove(e) {
+    if (isDragging && scale > 1) {
+        position = {
+            x: e.clientX - dragStart.x,
+            y: e.clientY - dragStart.y
+        };
+        updateZoomDisplay();
     }
 }
 
-// Event listeners
-nextBtn.addEventListener('click', nextStep);
-prevBtn.addEventListener('click', prevStep);
+function handleMouseUp() {
+    isDragging = false;
+    fullscreenImageContainer.style.cursor = 'grab';
+}
+
+function handleWheel(e) {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -0.2 : 0.2;
+    scale = Math.max(0.5, Math.min(4, scale + delta));
+    updateZoomDisplay();
+}
+
+// Event Listeners
+prevBtn.addEventListener('click', goToPrevious);
+nextBtn.addEventListener('click', goToNext);
+fullscreenBtn.addEventListener('click', openFullscreen);
+stepImage.addEventListener('click', openFullscreen);
+closeFullscreenBtn.addEventListener('click', closeFullscreen);
+fullscreenPrevBtn.addEventListener('click', goToPreviousFullscreen);
+fullscreenNextBtn.addEventListener('click', goToNextFullscreen);
+zoomInBtn.addEventListener('click', zoomIn);
+zoomOutBtn.addEventListener('click', zoomOut);
+
+fullscreenImageContainer.addEventListener('mousedown', handleMouseDown);
+fullscreenImageContainer.addEventListener('mousemove', handleMouseMove);
+fullscreenImageContainer.addEventListener('mouseup', handleMouseUp);
+fullscreenImageContainer.addEventListener('mouseleave', handleMouseUp);
+fullscreenImageContainer.addEventListener('wheel', handleWheel, { passive: false });
 
 // Keyboard navigation
 document.addEventListener('keydown', (e) => {
-    if (e.key === 'ArrowRight') {
-        nextStep();
-    } else if (e.key === 'ArrowLeft') {
-        prevStep();
+    if (isFullscreen) {
+        if (e.key === 'Escape') closeFullscreen();
+        if (e.key === '+' || e.key === '=') zoomIn();
+        if (e.key === '-') zoomOut();
+        if (e.key === '0') resetZoom();
+        if (e.key === 'ArrowLeft' && currentStep > 1) goToPreviousFullscreen();
+        if (e.key === 'ArrowRight' && currentStep < TOTAL_STEPS) goToNextFullscreen();
+    } else {
+        if (e.key === 'ArrowRight') goToNext();
+        if (e.key === 'ArrowLeft') goToPrevious();
     }
 });
 
-// Initialize on load
-init();
+// Initialize
+updateUI();