Upload 9 files

src/views/InstructorView.js

@@ -467,7 +467,7 @@ export function setupInstructorEvents() {
                 const floatDelay = Math.random() * 2;
 
                 card.innerHTML = `
-    < !--Top Info: Monster Stats-- >
+    <!--Top Info: Monster Stats-->
                     <div class="mb-1 text-center bg-gray-900/60 backdrop-blur-sm rounded-lg px-2 py-1 border border-gray-600/30 group-hover/card:bg-gray-800 group-hover/card:border-cyan-500/50 transition-all opacity-80 group-hover/card:opacity-100 transform translate-y-2 group-hover/card:translate-y-0 duration-300">
                          <div class="text-[10px] text-gray-300 mb-0.5 whitespace-nowrap">${monster.name.split(' ')[1] || monster.name}</div>
                          <div class="flex items-center justify-center space-x-2">
@@ -479,14 +479,14 @@ export function setupInstructorEvents() {
                         </div>
                     </div>
 
-                    <!--Monster Image-- >
+                    <!--Monster Image-->
                     <div class="monster-img-container relative ${sizeClass} flex items-center justify-center transform group-hover/card:scale-125 transition-transform duration-300" style="animation: float 3s ease-in-out infinite; animation-delay: -${floatDelay}s;">
                         <div class="w-full h-full pixel-art drop-shadow-md filter group-hover/card:brightness-110 transition-all">
                             ${generateMonsterSVG(monster)}
                         </div>
                     </div>
                     
-                    <!--Bottom Info: User Nickname-- >
+                    <!--Bottom Info: User Nickname-->
     <div class="mt-1 text-center bg-black/60 backdrop-blur-sm rounded-full px-3 py-0.5 border border-gray-600/50 group-hover/card:bg-cyan-900/80 group-hover/card:border-cyan-400 transition-all">
         <div class="text-xs font-bold text-white shadow-black drop-shadow-md whitespace-nowrap tracking-wide">${s.nickname}</div>
     </div>
@@ -628,17 +628,17 @@ function renderTransposedHeatmap(students) {
     // Sticky Top for Header Row
     // Sticky Left for the first cell ("Challenge/Student")
     let headerHtml = `
-    < th class="p-3 text-left sticky left-0 top-0 bg-gray-800 z-30 border-b border-gray-600 min-w-[200px] border-r border-gray-700 shadow-md" >
+    <th class="p-3 text-left sticky left-0 top-0 bg-gray-800 z-30 border-b border-gray-600 min-w-[200px] border-r border-gray-700 shadow-md">
         <div class="flex justify-between items-end">
             <span class="text-sm text-gray-400">題目</span>
             <span class="text-sm text-cyan-400">學員 (${students.length})</span>
         </div>
-        </th >
+        </th>
     `;
 
     students.forEach(student => {
         headerHtml += `
-    < th class="p-2 text-center sticky top-0 bg-gray-800 z-20 border-b border-gray-700 min-w-[80px] group" >
+    <th class="p-2 text-center sticky top-0 bg-gray-800 z-20 border-b border-gray-700 min-w-[80px] group">
         <div class="flex flex-col items-center space-y-2 py-2">
             <div class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-700 to-gray-600 flex items-center justify-center text-xs font-bold text-white uppercase border border-gray-500 shadow-sm relative">
                 ${student.nickname[0]}
@@ -654,7 +654,7 @@ function renderTransposedHeatmap(students) {
                 </button>
             </div>
         </div>
-            </th >
+            </th>
     `;
     });
     thead.innerHTML = headerHtml;
@@ -699,17 +699,17 @@ function renderTransposedHeatmap(students) {
             }
 
             return `
-    < td class="p-1 border border-gray-800/50 text-center align-middle h-14 hover:bg-white/5 transition-colors" >
+    <td class="p-1 border border-gray-800/50 text-center align-middle h-14 hover:bg-white/5 transition-colors">
         <div class="mx-auto w-10 h-10 rounded-lg border flex items-center justify-center ${statusClass} transition-all duration-300" ${action}>
             ${content}
         </div>
-                </td >
+                </td>
     `;
         }).join('');
 
         // Row Header (Challenge Title)
         return `
-    < tr class="hover:bg-gray-800/50 transition-colors" >
+    <tr class="hover:bg-gray-800/50 transition-colors">
         <td class="p-3 sticky left-0 bg-gray-900 z-10 border-r border-b border-gray-700 shadow-md">
             <div class="flex items-center justify-between">
                 <div class="flex flex-col">
@@ -721,7 +721,7 @@ function renderTransposedHeatmap(students) {
             </div>
         </td>
                 ${rowCells}
-            </tr >
+            </tr>
     `;
     }).join('');
 }