Upload 9 files

src/views/LandingView.js

@@ -1,11 +1,35 @@
 import { createRoom, joinRoom } from "../services/classroom.js";
+import { generateMonsterSVG, MONSTER_DEFS } from "../utils/monsterUtils.js";
 
 export function renderLandingView() {
+    // Select Decor Monsters
+    // Left: Genesis Dragon (L3_AAA), Right: Gundam (L3_BAA) - or fallbacks
+    const mLeft = MONSTER_DEFS.find(m => m.id === 'L3_AAA') || MONSTER_DEFS.find(m => m.stage === 3);
+    const mRight = MONSTER_DEFS.find(m => m.id === 'L3_BAA') || MONSTER_DEFS.find(m => m.stage === 3);
+
+    const svgLeft = generateMonsterSVG(mLeft);
+    const svgRight = generateMonsterSVG(mRight);
+
     return `
-    <div class="min-h-screen flex flex-col items-center justify-center p-4">
-        <div class="max-w-md w-full bg-gray-600 bg-opacity-20 backdrop-blur-lg rounded-xl shadow-2xl p-8 border border-gray-700">
-            <h1 class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500 mb-8 text-center tracking-tighter">
-                VIBECODING
+    <div class="min-h-screen flex flex-col items-center justify-center p-4 relative overflow-hidden">
+        
+        <!-- Decor Monsters (Desktop Only) -->
+        <div class="absolute bottom-10 left-10 w-48 h-48 hidden lg:block opacity-50 pointer-events-none" 
+             style="animation: float 6s ease-in-out infinite;">
+             <div class="w-full h-full drop-shadow-[0_0_15px_rgba(34,211,238,0.5)]">
+                ${svgLeft}
+             </div>
+        </div>
+        <div class="absolute bottom-10 right-10 w-48 h-48 hidden lg:block opacity-50 pointer-events-none" 
+             style="animation: float 8s ease-in-out infinite reverse;">
+             <div class="w-full h-full drop-shadow-[0_0_15px_rgba(59,130,246,0.5)]">
+                ${svgRight}
+             </div>
+        </div>
+
+        <div class="max-w-md w-full bg-gray-600 bg-opacity-20 backdrop-blur-lg rounded-xl shadow-2xl p-8 border border-gray-700 z-10">
+            <h1 class="text-3xl sm:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500 mb-8 text-center tracking-tighter whitespace-nowrap">
+                VIBECODING-怪獸成長營
             </h1>
             
             <!-- Student Join Form -->
@@ -30,6 +54,13 @@ export function renderLandingView() {
                 </button>
             </div>
         </div>
+        
+        <style>
+            @keyframes float {
+                0%, 100% { transform: translateY(0); }
+                50% { transform: translateY(-20px); }
+            }
+        </style>
     </div>
     `;
 }