Upload 9 files

src/views/InstructorView.js

@@ -442,7 +442,7 @@ export function setupInstructorEvents() {
                 const yOff = Math.sin(finalAngle) * radius * 0.8;
 
                 const card = document.createElement('div');
-                card.className = 'absolute flex flex-col items-center group/card z-10 hover:z-50 transition-all duration-500';
+                card.className = 'absolute flex flex-col items-center group/card z-10 hover:z-50 transition-all duration-500 cursor-move';
 
                 card.style.left = `calc(50% + ${xOff}px)`;
                 card.style.top = `calc(50% + ${yOff}px)`;
@@ -476,12 +476,71 @@ export function setupInstructorEvents() {
     </div>
 `;
                 relativeContainer.appendChild(card);
+
+                // Enable Drag & Drop
+                setupDraggable(card, relativeContainer);
             });
         }
 
         modal.classList.remove('hidden');
     });
 
+    // Helper: Drag & Drop Logic
+    function setupDraggable(el, container) {
+        let isDragging = false;
+        let startX, startY, initialLeft, initialTop;
+
+        el.addEventListener('mousedown', (e) => {
+            isDragging = true;
+            startX = e.clientX;
+            startY = e.clientY;
+
+            // Disable transition during drag for responsiveness
+            el.style.transition = 'none';
+            el.style.zIndex = 100; // Bring to front
+
+            // Convert current computed position to fixed pixels if relying on calc
+            const rect = el.getBoundingClientRect();
+            const containerRect = container.getBoundingClientRect();
+
+            // Calculate position relative to container
+            // The current transform is translate(-50%, -50%). 
+            // We want to set left/top such that the center remains under the mouse offset, 
+            // but for simplicity, let's just use current offsetLeft/Top if possible, 
+            // OR robustly recalculate from rects.
+
+            // Current center point relative to container:
+            const centerX = rect.left - containerRect.left + rect.width / 2;
+            const centerY = rect.top - containerRect.top + rect.height / 2;
+
+            // Set explicit pixel values replacing calc()
+            el.style.left = `${centerX}px`;
+            el.style.top = `${centerY}px`;
+
+            initialLeft = centerX;
+            initialTop = centerY;
+        });
+
+        window.addEventListener('mousemove', (e) => {
+            if (!isDragging) return;
+            e.preventDefault();
+
+            const dx = e.clientX - startX;
+            const dy = e.clientY - startY;
+
+            el.style.left = `${initialLeft + dx}px`;
+            el.style.top = `${initialTop + dy}px`;
+        });
+
+        window.addEventListener('mouseup', () => {
+            if (isDragging) {
+                isDragging = false;
+                el.style.transition = ''; // Re-enable hover effects
+                el.style.zIndex = ''; // Restore z-index rule (or let hover take over)
+            }
+        });
+    }
+
     // Add float animation style if not exists
     if (!document.getElementById('anim-float')) {
         const style = document.createElement('style');