Upload 9 files

src/views/StudentView.js

@@ -215,9 +215,12 @@ export async function renderStudentView() {
     const renderMonsterSection = (currentUserProgress, classSize, userProfile) => {
         const state = calculateMonsterState(currentUserProgress, classSize, userProfile);
 
+        // Left sidebar position: Responsive
+        // Mobile: Top Left (in header space)
+        // Desktop: Fixed Left Sidebar
         return `
         <div id="monster-container-fixed" data-monster-id="${state.monster.id}" data-scale="${state.currentScale}" 
-             class="fixed top-32 left-8 z-50 flex flex-col items-center group pointer-events-none sm:pointer-events-auto w-32 h-32">
+             class="fixed top-2 left-2 z-50 flex flex-col items-center group pointer-events-none sm:pointer-events-auto w-24 h-24 sm:w-32 sm:h-32 md:top-32 md:left-8">
             
             <!-- Stats Tooltip (Moved to Top) -->
             <div id="monster-stats-content" class="absolute bottom-full mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gray-900/90 backdrop-blur text-xs text-slate-300 p-3 rounded-xl border border-slate-700 text-left pointer-events-auto shadow-2xl min-w-[100px]">
@@ -350,20 +353,18 @@ export async function renderStudentView() {
     return `
     <div class="min-h-screen p-4 pb-32 max-w-md mx-auto sm:max-w-4xl pt-24 sm:pt-4">
         <header class="flex justify-end items-center mb-6 sticky top-0 bg-slate-900/95 backdrop-blur z-20 py-4 px-2 -mx-2 border-b border-gray-800">
-            <div class="flex items-center space-x-4">
-                <div class="flex flex-col items-end">
-                    <div class="flex items-center space-x-2">
-                        <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
-                        <span class="text-gray-400 text-sm truncate max-w-[150px]">${nickname}</span>
-                    </div>
-                    <div class="text-xs text-gray-500 mt-1">教室: <span class="font-mono text-cyan-400 font-bold">${roomCode}</span></div>
+            <div class="flex flex-col items-end">
+                <div class="flex items-center space-x-2">
+                    <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+                    <span class="text-gray-400 text-sm truncate max-w-[150px]">${nickname}</span>
                 </div>
-                <button onclick="window.logout()" class="text-gray-500 hover:text-red-400 transition-colors p-2" title="登出">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-                    </svg>
-                </button>
+                <div class="text-xs text-gray-500 mt-1">教室: <span class="font-mono text-cyan-400 font-bold">${roomCode}</span></div>
             </div>
+            <button onclick="window.logout()" class="text-gray-500 hover:text-red-400 transition-colors p-2" title="登出">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                </svg>
+            </button>
         </header>
 
         <div class="space-y-4">
@@ -416,12 +417,19 @@ export async function renderStudentView() {
         </div>
         
         <!-- Peer Learning FAB -->
-        <button onclick="window.openPeerModal()" class="fixed bottom-6 right-6 bg-purple-600 hover:bg-purple-500 text-white rounded-full p-4 shadow-xl shadow-purple-600/40 transition-transform hover:scale-110 active:scale-90 z-40"
+        <button onclick="window.openPeerModal()" class="fixed bottom-8 left-1/2 -translate-x-1/2 bg-purple-600 hover:bg-purple-500 text-white rounded-full p-5 shadow-[0_0_20px_rgba(147,51,234,0.6)] transition-transform hover:scale-110 active:scale-90 z-40 flex items-center space-x-2"
             title="查看同學作業">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0z" />
             </svg>
+            <span class="font-bold text-lg hidden sm:inline">查看同學提示詞</span>
         </button>
+
+        <!-- Credits Footer -->
+        <div class="fixed bottom-1 right-2 z-30 text-[10px] text-gray-600 font-mono text-right pointer-events-none sm:pointer-events-auto select-none opacity-60 hover:opacity-100 transition-opacity">
+            <div>程式設計者：新竹縣精華國中 藍星宇老師</div>
+            <div>教育社群：<a href="https://www.facebook.com/groups/1554372228718393" target="_blank" class="text-gray-500 hover:text-cyan-400 pointer-events-auto">萬物皆數</a></div>
+        </div>
     </div>
         `;
 }