Upload 8 files

src/views/InstructorView.js

@@ -250,14 +250,18 @@ export function setupInstructorEvents() {
         const cards = container.querySelectorAll('.group\\/card');
 
         cards.forEach(card => {
+            // Find the monster image container
+            const imgContainer = card.querySelector('.monster-img-container');
+            if (!imgContainer) return;
+
             // Random Emoji
             const emoji = emojis[Math.floor(Math.random() * emojis.length)];
             const emojiEl = document.createElement('div');
             emojiEl.textContent = emoji;
-            // Updated Position: Top-Right, Smaller, Overlapping
-            emojiEl.className = 'absolute -top-3 -right-3 text-2xl animate-bounce z-50 drop-shadow-md';
+            // Position: Top-Right of the *Image*, slightly overlapping
+            emojiEl.className = 'absolute -top-2 -right-2 text-2xl animate-bounce z-50 drop-shadow-md transform rotate-12';
             emojiEl.style.animationDuration = '0.6s';
-            card.appendChild(emojiEl);
+            imgContainer.appendChild(emojiEl);
 
             // Remove after 3s
             setTimeout(() => emojiEl.remove(), 3000);
@@ -316,9 +320,16 @@ export function setupInstructorEvents() {
 
         // 1. Container for Relative Positioning
         const relativeContainer = document.createElement('div');
-        relativeContainer.className = 'relative w-full h-[600px] md:h-[700px] overflow-hidden rounded-3xl bg-gray-900/50 border border-gray-700/30 shadow-inner';
+        relativeContainer.className = 'relative w-full h-[600px] md:h-[700px] overflow-hidden rounded-3xl bg-gray-900/50 border border-gray-700/30 shadow-inner flex items-center justify-center';
         container.appendChild(relativeContainer);
 
+        // Watermark
+        const watermark = document.createElement('div');
+        watermark.className = 'absolute bottom-6 right-8 text-gray-500/30 text-lg md:text-xl font-bold pointer-events-none z-0 font-mono tracking-widest select-none';
+        const d = new Date();
+        watermark.textContent = `[${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}] VibeCoding 怪獸成長營`;
+        relativeContainer.appendChild(watermark);
+
         // 2. Instructor Section (Absolute Center)
         const instructorSection = document.createElement('div');
         instructorSection.className = 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center z-20 group cursor-pointer';
@@ -425,7 +436,7 @@ export function setupInstructorEvents() {
                     </div>
 
                     <!-- Monster Image -->
-                    <div class="relative w-20 h-20 md:w-24 md:h-24 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="monster-img-container relative w-20 h-20 md:w-24 md:h-24 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>