Update index.html

index.html

@@ -591,6 +591,9 @@
                 return `https://api.qrserver.com/v1/create-qr-code/?size=${size}&data=${encodeURIComponent(fullUrl)}`;
             };
 
+            // 計算完整的房間連結網址
+            const fullRoomUrl = `${window.location.origin}${window.location.pathname}?room=${roomCode}`;
+
             // Filter data by room
             const filteredData = useMemo(() => {
                 if (!roomCode) return []; // Show nothing if no room created (or show all? let's show room specific)
@@ -638,11 +641,14 @@
                                 </button>
                                 <h3 className="text-2xl font-bold text-slate-800 mb-2">加入房間</h3>
                                 <div className="text-6xl font-mono font-bold text-amber-600 tracking-widest mb-6 select-all">{roomCode}</div>
-                                <div className="bg-white p-2 rounded-xl inline-block border-4 border-slate-100 mb-4">
-                                    <img src={getQrUrl("500x500")} alt="Large Room QR" className="w-full max-w-[400px] h-auto aspect-square object-contain" />
+                                <div className="bg-white p-2 rounded-xl inline-block border-4 border-slate-100 mb-4 hover:border-amber-200 transition-colors shadow-inner">
+                                    <a href={fullRoomUrl} target="_blank" rel="noopener noreferrer" title="點擊開啟連結">
+                                        <img src={getQrUrl("500x500")} alt="Large Room QR" className="w-full max-w-[400px] h-auto aspect-square object-contain cursor-pointer hover:opacity-95 transition-opacity" />
+                                    </a>
                                 </div>
                                 <p className="text-slate-500 font-bold">請學生掃描 QR Code 或輸入上方代碼</p>
-                                <div className="text-slate-400 text-xs mt-2">點擊任意處關閉</div>
+                                <div className="text-blue-500 text-sm mt-1 font-bold">(點擊 QR Code 可直接進入房間)</div>
+                                <div className="text-slate-400 text-xs mt-4">點擊背景關閉</div>
                             </div>
                         </div>
                     )}