Upload 8 files

src/views/InstructorView.js

@@ -146,8 +146,8 @@ export async function renderInstructorView() {
                  <button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none" data-color="#3b82f6" onclick="setPenColor('#3b82f6', this)">
                     <div class="w-4 h-4 rounded-full bg-blue-500"></div>
                  </button>
-                 <button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none" data-color="#22c55e" onclick="setPenColor('#22c55e', this)">
-                    <div class="w-4 h-4 rounded-full bg-green-500"></div>
+                 <button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none" data-color="#22c55e" onclick="setPenColor('#eab308', this)">
+                    <div class="w-4 h-4 rounded-full bg-yellow-500"></div>
                  </button>
                  <div class="w-px h-6 bg-gray-600 mx-2"></div>
                  <button onclick="clearCanvas()" class="text-gray-400 hover:text-white text-sm font-bold px-2">
@@ -1086,17 +1086,41 @@ export function setupInstructorEvents() {
             const col = document.createElement('div');
             // Check overflow-hidden to keep it contained, use flex-row for compact header + content
             col.className = 'flex flex-row h-full bg-gray-900 p-4 overflow-hidden';
+
+            // Logic for anonymous
+            let displayAuthor = item.author;
+            let blurClass = '';
+
+            if (isAnonymous) {
+                displayAuthor = '學員';
+                blurClass = 'blur-sm'; // Initial blur
+                // Auto remove blur after delay if needed, or keep it? 
+                // Toggle logic removes it after delay. But initial render should probably just be static '學員' or blurred.
+                // The toggle logic uses dataset.original. We need to set it here too.
+            }
+
             col.innerHTML = `
                 <div class="w-48 flex-shrink-0 border-r border-gray-700 pr-4 mr-4 flex flex-col justify-center">
-                    <h3 class="text-xl font-bold text-cyan-400 mb-1 comparison-author">${item.author}</h3>
+                    <h3 class="text-xl font-bold text-cyan-400 mb-1 comparison-author ${blurClass}" data-original="${item.author}">${displayAuthor}</h3>
                     <p class="text-md text-gray-400 truncate" title="${item.title}">${item.title}</p>
                 </div>
-                <!-- Prompt Content: Larger Text -->
-                <div class="flex-1 overflow-y-auto font-mono text-green-300 text-2xl leading-relaxed whitespace-pre-wrap p-2 hover:bg-white/5 transition-colors rounded custom-scrollbar">
+                <!-- Prompt Content: Larger Text (text-4xl) -->
+                <div class="flex-1 overflow-y-auto font-mono text-green-300 text-4xl leading-relaxed whitespace-pre-wrap p-2 hover:bg-white/5 transition-colors rounded custom-scrollbar">
 ${item.prompt}
                 </div>
             `;
             grid.appendChild(col);
+
+            // If blurred, remove blur after animation purely for effect, or keep?
+            // User intention "Hidden Name" usually means "Replaced by generic name".
+            // The blur effect in toggle logic was transient.
+            // If we want persistent anonymity, just "學員" is enough.
+            // The existing toggle logic adds 'blur-sm' then removes it in 300ms.
+            // We should replicate that effect if we want consistency, or just skip blur on init.
+            if (isAnonymous) {
+                const el = col.querySelector('.comparison-author');
+                setTimeout(() => el.classList.remove('blur-sm'), 300);
+            }
         });
 
         document.getElementById('prompt-list-modal').classList.add('hidden');