Spaces:

Lashtw
/

Pi-Search2

Running

App Files Files Community

Lashtw commited on Mar 11

Commit

c4dff99

verified ·

1 Parent(s): c64d2e4

Upload 8 files

Browse files

Files changed (9) hide show

.gitattributes +2 -0
firebase-config.js +9 -0
index.html +517 -18
m1.GIF +3 -0
m2.GIF +0 -0
m3.GIF +0 -0
m4.GIF +3 -0
m5.GIF +0 -0
student.html +226 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+m1.GIF filter=lfs diff=lfs merge=lfs -text
+m4.GIF filter=lfs diff=lfs merge=lfs -text

firebase-config.js ADDED Viewed

	@@ -0,0 +1,9 @@

+export const firebaseConfig = {
+    // ⚠️ 老師請注意：請將 Firebase 控制台取得的 Config（金鑰物件）貼在底下覆蓋這段 ⚠️
+    apiKey: "AIzaSyA2fxxaGAdWSR_QOH2Hm92kttGZmLDH8-w",
+  authDomain: "pi-search-89a08.firebaseapp.com",
+  projectId: "pi-search-89a08",
+  storageBucket: "pi-search-89a08.firebasestorage.app",
+  messagingSenderId: "1003005654079",
+  appId: "1:1003005654079:web:636235436f432376d8748a"
+};

index.html CHANGED Viewed

@@ -1,19 +1,518 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>圓周率探索 - 老師儀表板</title>
+    <!-- 引入外部套件 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
+    <style>
+        :root {
+            --primary: #f59e0b;
+            --primary-hover: #d97706;
+            --bg: #111827;
+            --panel: rgba(31, 41, 55, 0.4);
+            --border: rgba(255, 255, 255, 0.1);
+            --text: #f9fafb;
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Inter', system-ui, -apple-system, sans-serif;
+            background: radial-gradient(circle at top right, #374151, #111827);
+            color: var(--text);
+            min-height: 100vh;
+        }
+        .container { padding: 2rem; max-width: 1400px; margin: 0 auto; }
+        /* 玻璃面板 */
+        .glass-panel {
+            background: var(--panel);
+            backdrop-filter: blur(16px);
+            border: 1px solid var(--border);
+            border-radius: 1rem;
+            padding: 2rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+            margin-bottom: 2rem;
+        }
+        /* 步驟 1：建立房間 */
+        #setupScreen {
+            max-width: 500px;
+            margin: 15vh auto;
+            text-align: center;
+        }
+        input.room-input {
+            width: 100%;
+            padding: 1rem;
+            font-size: 1.5rem;
+            text-align: center;
+            background: rgba(0,0,0,0.3);
+            border: 2px solid rgba(255,255,255,0.2);
+            border-radius: 0.75rem;
+            color: white;
+            margin-bottom: 1.5rem;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            box-sizing: border-box;
+        }
+        button.btn {
+            background: linear-gradient(135deg, var(--primary), var(--primary-hover));
+            color: white;
+            border: none;
+            padding: 1rem 2rem;
+            font-size: 1.25rem;
+            border-radius: 0.75rem;
+            cursor: pointer;
+            font-weight: bold;
+            transition: all 0.2s;
+            width: 100%;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+        }
+        button.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.4); }
+        button.btn:disabled { background: #6b7280; transform: none; cursor: not-allowed; }
+        /* 步驟 2：儀表板 */
+        #dashboardScreen { display: none; }
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            gap: 2rem;
+        }
+        .header-left { display: flex; align-items: center; gap: 2rem; }
+        #qrcodeArea {
+            background: white;
+            padding: 1rem;
+            border-radius: 1rem;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
+            transition: transform 0.3s;
+        }
+        #qrcodeArea:hover { transform: scale(1.05); }
+        .room-info h1 { margin: 0 0 0.5rem 0; font-size: 2.5rem; color: #fbbf24; }
+        .room-info p { margin: 0 0 0.5rem 0; color: #9ca3af; font-size: 1.2rem; }
+        .controls select {
+            padding: 0.75rem 1rem;
+            background: rgba(0,0,0,0.5);
+            border: 1px solid var(--border);
+            color: white;
+            border-radius: 0.5rem;
+            font-size: 1.1rem;
+            cursor: pointer;
+        }
+        /* 學生標籤網格 (瀑布流卡片) */
+        .students-grid {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1.25rem;
+            min-height: 200px;
+        }
+        .student-chip {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--border);
+            padding: 1.25rem;
+            border-radius: 1rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 0.5rem;
+            animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+            transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
+            min-width: 140px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
+        }
+        .student-chip:hover { transform: translateY(-5px); box-shadow: 0 15px 20px rgba(0,0,0,0.4); }
+        .student-chip .name { font-weight: bold; font-size: 1.3rem; }
+        .student-chip .number { color: #fbbf24; font-family: monospace; font-size: 1.5rem; font-weight: bold; letter-spacing: 1px;}
+        .student-chip .result {
+            display: none; width: 100%; text-align: center;
+            margin-top: 0.5rem; padding-top: 0.5rem;
+            border-top: 1px dashed rgba(255,255,255,0.2);
+            font-size: 1rem; font-weight: bold; color: #34d399;
+        }
+        /* 狀態顏色 */
+        .student-chip.searching { background: rgba(59, 130, 246, 0.2); border-color: #3b82f6; }
+        .student-chip.done { background: rgba(16, 185, 129, 0.2); border-color: #10b981; }
+        .student-chip.error { background: rgba(239, 68, 68, 0.2); border-color: #ef4444; }
+        @keyframes fadeIn { from { opacity: 0; transform: scale(0.8) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+        /* Loading 動畫 */
+        .spinner {
+            width: 24px; height: 24px; margin: 0 auto;
+            border: 3px solid rgba(255,255,255,0.2); border-top: 3px solid white;
+            border-radius: 50%; animation: spin 1s linear infinite;
+        }
+        @keyframes spin { 100% { transform: rotate(360deg); } }
+        /* 步驟 3：長條圖與頒獎台 */
+        #resultsArea { display: none; }
+        .podium-container {
+            display: flex; justify-content: center; align-items: flex-end;
+            margin: 3rem 0; height: 300px; gap: 1rem;
+        }
+        .podium {
+            display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
+            width: 140px; opacity: 0; transform: translateY(50px);
+        }
+        .podium-info { text-align: center; margin-bottom: 0.5rem; }
+        .podium-name { font-weight: bold; font-size: 1.4rem; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
+        .podium-val { color: #fbbf24; font-size: 1rem; font-weight: bold; }
+        .podium-step {
+            width: 100%; display: flex; align-items: center; justify-content: center;
+            font-weight: bold; color: #111; font-size: 2rem;
+            border-top-left-radius: 1rem; border-top-right-radius: 1rem;
+            box-shadow: inset 0 -10px 20px rgba(0,0,0,0.2), 0 10px 15px -3px rgba(0,0,0,0.5);
+        }
+        /* 頒獎台動畫與高度設定 */
+        .podium.show { animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+        .podium.first { animation-delay: 0.6s; }
+        .podium.second { animation-delay: 0.3s; }
+        .podium.third { animation-delay: 0s; }
+        .podium.first .podium-step { height: 220px; background: linear-gradient(135deg, #fef08a, #ca8a04); border: 2px solid #fef08a; }
+        .podium.second .podium-step { height: 160px; background: linear-gradient(135deg, #f3f4f6, #9ca3af); border: 2px solid #fff; }
+        .podium.third .podium-step { height: 110px; background: linear-gradient(135deg, #fed7aa, #c2410c); border: 2px solid #fed7aa; }
+        @keyframes slideUp { to { opacity: 1; transform: translateY(0); } }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 畫面 1：設定房間 -->
+        <div id="setupScreen" class="glass-panel">
+            <h1 style="color: #fbbf24; font-size: 2.5rem; margin-top: 0;">數學城市<br><span style="color: white">圓周率探索儀表板</span></h1>
+            <p style="color: #9ca3af; margin-bottom: 2rem;">請為您的教室建立一個獨一無二的代碼</p>
+            <input type="text" id="roomInput" class="room-input" placeholder="例如: 805, MATH-1" autocomplete="off">
+            <button class="btn" id="startRoomBtn">進入教室</button>
+            <div id="systemWarning" style="color: #ef4444; background: rgba(239, 68, 68, 0.1); padding: 1rem; border-radius: 0.5rem; margin-top: 1.5rem; display: none; text-align: left;">
+                ⚠️ <strong>警告：無法讀取網路 IP</strong><br>您目前似乎是直接點擊檔案 (file://) 開啟。<br>這會導致 QRCode 網址出錯，學生手機將無法連線掃描。<br>👉 <strong>解決方法</strong>：請使用 VScode 的 Live Server 或 Python 本機伺服器開啟。
+            </div>
+        </div>
+        <!-- 畫面 2：主儀表板 -->
+        <div id="dashboardScreen">
+            <div class="header glass-panel">
+                <div class="header-left">
+                    <div id="qrcodeArea"></div>
+                    <div class="room-info">
+                        <h1>教室代碼：<span id="displayRoomCode" style="padding: 0.2rem 1rem; background: rgba(0,0,0,0.3); border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.2);"></span></h1>
+                        <p>請讓學生用平板或手機掃描左側條碼</p>
+                        <p style="font-size: 0.9rem; color: #6b7280;">連線網址：<span id="studentUrlDisplay" style="font-family: monospace;"></span></p>
+                    </div>
+                </div>
+                <div class="controls">
+                    <label style="display: block; margin-bottom: 0.5rem; color: #9ca3af; font-weight: bold;">API 查詢設定 (補零長度)</label>
+                    <select id="digitSelect">
+                        <option value="4">統一補為 4 位數</option>
+                        <option value="5">統一補為 5 位數</option>
+                        <option value="6">統一補為 6 位數</option>
+                        <option value="7" selected>統一補為 7 位數</option>
+                        <option value="8">統一補為 8 位數</option>
+                        <option value="9">統一補為 9 位數</option>
+                        <option value="10">統一補為 10 位數</option>
+                    </select>
+                </div>
+            </div>
+            <div class="glass-panel" style="margin-bottom: 2rem;">
+                <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem;">
+                    <div>
+                        <h2 style="margin: 0; font-size: 1.8rem;">👨‍🎓 學生等待區</h2>
+                        <p style="margin: 0.5rem 0 0 0; color: #9ca3af;">目前已收到 <strong id="studentCount" style="color: white; font-size: 1.2rem;">0</strong> 位學生的幸運數字</p>
+                    </div>
+                    <button class="btn" id="searchApiBtn" style="width: auto; padding: 1rem 3rem; font-size: 1.5rem;">
+                        🚀 開始環遊圓周率
+                    </button>
+                </div>
+                <!-- 卡片列表動態產生於此 -->
+                <div class="students-grid" id="studentsGrid"></div>
+            </div>
+            <!-- 畫面 3：搜尋結果與圖表 -->
+            <div id="resultsArea" class="glass-panel">
+                <h1 style="text-align: center; color: #fde047; font-size: 2.5rem; margin-top: 0; text-shadow: 0 4px 10px rgba(0,0,0,0.5);">🏆 尋獲深處的贏家 🏆</h1>
+                <div class="podium-container" id="podiumArea">
+                    <!-- 頒獎台動態產生於此 -->
+                </div>
+                <div style="background: rgba(0,0,0,0.3); border-radius: 1rem; padding: 2rem; margin-top: 3rem;">
+                    <h2 style="margin-top: 0; border-left: 4px solid #34d399; padding-left: 1rem;">📊 詳細找尋結果 (位數越深排名越高)</h2>
+                    <canvas id="resultChart"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Firebase 邏輯 -->
+    <script type="module">
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";
+        import { getFirestore, collection, onSnapshot, query, orderBy } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-firestore.js";
+        import { firebaseConfig } from './firebase-config.js';
+        let app, db;
+        let isTestMode = false;
+        try {
+            if(firebaseConfig.apiKey === "YOUR_API_KEY") {
+                isTestMode = true;
+                console.warn("⚠️ Firebase 金鑰未設定，將以測試模式執行 (產生虛擬學生)。");
+            } else {
+                app = initializeApp(firebaseConfig);
+                db = getFirestore(app);
+            }
+        } catch(e) { console.error("Firebase 初始化失敗:", e); }
+        let currentRoom = "";
+        let studentsData = []; // [{ id, name, number, paddedNumber, resultVal, status }]
+        // UI 元件
+        const startRoomBtn = document.getElementById('startRoomBtn');
+        const searchApiBtn = document.getElementById('searchApiBtn');
+        const setupScreen = document.getElementById('setupScreen');
+        const dashboardScreen = document.getElementById('dashboardScreen');
+        const studentsGrid = document.getElementById('studentsGrid');
+        const resultsArea = document.getElementById('resultsArea');
+        // 警告 file:// 使用者
+        if (window.location.protocol === 'file:') {
+            document.getElementById('systemWarning').style.display = 'block';
+        }
+        // --- 1. 建立房間 ---
+        startRoomBtn.addEventListener('click', () => {
+            currentRoom = document.getElementById('roomInput').value.trim().toUpperCase();
+            if(!currentRoom) { alert("請輸入教室代碼！"); return; }
+            // 介面轉換
+            setupScreen.style.display = 'none';
+            dashboardScreen.style.display = 'block';
+            document.getElementById('displayRoomCode').innerText = currentRoom;
+            // 產生 QRCode (指向同一網路位置的 student.html)
+            const currentUrl = new URL(window.location.href);
+            // ��保網址是把 index.html 替換成 student.html，並加上 room 參數
+            let studentPath = currentUrl.pathname.replace('index.html', 'student.html');
+            if (studentPath === currentUrl.pathname) { // 如果網址隱藏了 index.html (如 Hugging Face)
+                if (!studentPath.endsWith('/')) {
+                    studentPath += '/';
+                }
+                studentPath += 'student.html';
+            }
+            const studentUrl = `${currentUrl.origin}${studentPath}?room=${encodeURIComponent(currentRoom)}`;
+            document.getElementById('studentUrlDisplay').innerText = studentUrl;
+            new QRCode(document.getElementById("qrcodeArea"), {
+                text: studentUrl, width: 150, height: 150, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.L
+            });
+            // 啟動資料庫監聽
+            if(isTestMode) {
+                alert("目前為【測試模式】(未設定Firebase)\n系統即將自動產生三個虛擬同學加入。");
+                setTimeout(() => mockJoin("王小明", "1234"), 1500);
+                setTimeout(() => mockJoin("陳大華", "7777777"), 3000);
+                setTimeout(() => mockJoin("林老師", "1314"), 4500);
+            } else {
+                startListening(currentRoom);
+            }
+        });
+        // --- Firebase 監聽器 ---
+        function startListening(room) {
+            const q = query(collection(db, "rooms", room, "students"), orderBy("timestamp", "asc"));
+            onSnapshot(q, (snapshot) => {
+                snapshot.docChanges().forEach((change) => {
+                    if (change.type === "added") {
+                        const data = change.doc.data();
+                        addStudentChip(change.doc.id, data.name, data.number);
+                    }
+                });
+            }, (error) => {
+                console.error("監聽 Firebase 失敗:", error);
+                alert("無法連線到資料庫，請檢查網路或金鑰權限設定！");
+            });
+        }
+        // 虛擬測試用
+        let mockId = 0;
+        function mockJoin(name, num) { addStudentChip(`mock_${mockId++}`, name, num); }
+        // --- 2. 顯示學生卡片 ---
+        function addStudentChip(id, name, number) {
+            if(studentsData.find(s => s.id === id)) return; // 防呆：重複加入
+            studentsData.push({ id, name, number, resultVal: null });
+            document.getElementById('studentCount').innerText = studentsData.length;
+            const div = document.createElement('div');
+            div.className = 'student-chip';
+            div.id = `chip_${id}`;
+            div.innerHTML = `
+                <div class="name">${name}</div>
+                <div class="number">${number}</div>
+                <div class="result" id="res_${id}"></div>
+            `;
+            studentsGrid.appendChild(div);
+            // 當新同學加入時捲動到最底
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        }
+        // --- 3. 開始環遊圓周率 (API 批量處理) ---
+        searchApiBtn.addEventListener('click', async () => {
+            if(studentsData.length === 0) { alert("尚未有學生加入！"); return; }
+            searchApiBtn.disabled = true;
+            searchApiBtn.innerText = "⏳ 瘋狂搜尋圓周率中...";
+            const selectedLength = parseInt(document.getElementById('digitSelect').value);
+            // Promise.allSettled 並以批次執行，防止一口氣發送 400 條請求被瀏覽器擋下或被 Pi API 阻斷
+            const batchSize = 10;
+            for (let i = 0; i < studentsData.length; i += batchSize) {
+                const batch = studentsData.slice(i, i + batchSize);
+                await Promise.allSettled(batch.map(student => fetchPiForStudent(student, selectedLength)));
+                // 可加入微小延遲降低 server 負載
+                await new Promise(r => setTimeout(r, 200));
+            }
+            searchApiBtn.innerText = "✅ 搜尋完畢";
+            showResults();
+        });
+        async function fetchPiForStudent(student, selectedLength) {
+            const chip = document.getElementById(`chip_${student.id}`);
+            const resDiv = document.getElementById(`res_${student.id}`);
+            // 變更卡片 UI 為「搜尋中」
+            chip.classList.add('searching');
+            resDiv.style.display = 'block';
+            resDiv.innerHTML = '<div class="spinner"></div>'; // 顯示旋轉圈圈
+            let luckyNum = String(student.number);
+            let finalOutput = null; // 最終顯示文字
+            let finalVal = null;    // 最終數字結果
+            if (luckyNum.length > selectedLength) {
+                finalOutput = "字數過長不符規定";
+            } else {
+                luckyNum = luckyNum.padStart(selectedLength, "0");
+                student.paddedNumber = luckyNum;
+                // 更新 UI 將數字補零呈現
+                chip.querySelector('.number').innerText = luckyNum;
+                try {
+                    const response = await fetch(`https://www.angio.net/newpi/piquery?q=${luckyNum}`);
+                    if (!response.ok) throw new Error("API Server Error");
+                    const data = await response.json();
+                    if (data.status === 'OK' && data.r && data.r.length > 0) {
+                        finalVal = data.r[0].p;
+                        finalOutput = `在第 ${finalVal} 位`;
+                    } else {
+                        finalOutput = "在圓周率中未找到";
+                    }
+                } catch (e) {
+                    console.error("API Error", e);
+                    finalOutput = "查詢失敗";
+                }
+            }
+            // 更新結果
+            student.resultVal = finalVal;
+            chip.classList.remove('searching');
+            resDiv.innerHTML = "";
+            if(typeof finalVal === 'number'){
+                chip.classList.add('done');
+                resDiv.innerText = finalOutput;
+            } else {
+                chip.classList.add('error');
+                resDiv.innerText = finalOutput;
+            }
+        }
+        // --- 4. 繪圖與頒獎 ---
+        let chartInstance = null;
+        function showResults() {
+            resultsArea.style.display = 'block';
+            resultsArea.scrollIntoView({ behavior: 'smooth' });
+            // 篩出有找到數字的人
+            const validData = studentsData.filter(s => typeof s.resultVal === 'number');
+            // 按數字大小從大排到小 (越深的人排名越高)
+            validData.sort((a, b) => b.resultVal - a.resultVal);
+            drawPodium(validData);
+            if(validData.length > 0) {
+                // 發射紙花特效 (Premium UI 微互動) 🎉
+                setTimeout(() => {
+                    confetti({ particleCount: 200, spread: 100, origin: { y: 0.6 }, colors: ['#fde047', '#34d399', '#60a5fa'] });
+                }, 500);
+                // 長條圖繪製
+                const ctx = document.getElementById('resultChart').getContext('2d');
+                if (chartInstance) chartInstance.destroy();
+                chartInstance = new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: validData.map(s => `${s.name} (${s.paddedNumber})`),
+                        datasets: [{
+                            label: '圓周率內躲藏的位置深度',
+                            data: validData.map(s => s.resultVal),
+                            backgroundColor: 'rgba(52, 211, 153, 0.7)',
+                            borderColor: '#34d399',
+                            borderWidth: 2,
+                            borderRadius: 6
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: { legend: { labels: { color: '#f9fafb', font: {size: 14} } } },
+                        scales: {
+                            y: { ticks: { color: '#9ca3af' }, grid: { color: 'rgba(255,255,255,0.05)' } },
+                            x: { ticks: { color: '#d1d5db', maxRotation: 45, minRotation: 45 }, grid: { display: false } }
+                        }
+                    }
+                });
+            }
+        }
+        function drawPodium(validData) {
+            const podiumArea = document.getElementById('podiumArea');
+            podiumArea.innerHTML = "";
+            if(validData.length === 0) {
+                podiumArea.innerHTML = "<h3 style='color:#fbbf24'>沒有人找到號碼，無頒獎台 QQ</h3>"; return;
+            }
+            const top3 = validData.slice(0, 3);
+            // 順序： 2 -> 1 -> 3
+            const order = [];
+            if(top3.length >= 2) order.push({ data: top3[1], rank: 'second', num: 2 });
+            if(top3.length >= 1) order.push({ data: top3[0], rank: 'first', num: 1 });
+            if(top3.length >= 3) order.push({ data: top3[2], rank: 'third', num: 3 });
+            order.forEach(item => {
+                const div = document.createElement('div');
+                div.className = `podium ${item.rank} show`;
+                div.innerHTML = `
+                    <div class="podium-info">
+                        <div class="podium-name">${item.data.name}</div>
+                        <div class="podium-val">深度 ${item.data.resultVal}</div>
+                    </div>
+                    <div class="podium-step">${item.num}</div>
+                `;
+                podiumArea.appendChild(div);
+            });
+        }
+    </script>
+</body>
 </html>

m1.GIF ADDED Viewed

Git LFS Details

SHA256: 46a693c4fc5cc49e8a9062d2547eed1047fa14963b44d9c0f14cfbcde5071b42
Pointer size: 131 Bytes
Size of remote file: 113 kB

m2.GIF ADDED Viewed

m3.GIF ADDED Viewed

m4.GIF ADDED Viewed

Git LFS Details

SHA256: 4e0b277aa2b88129f18d075f8d2cbf55acc4c7afb63de4d25e6c19a8f20d6706
Pointer size: 131 Bytes
Size of remote file: 411 kB

m5.GIF ADDED Viewed

student.html ADDED Viewed

	@@ -0,0 +1,226 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>幸運數字輸入 - 圓周率探索</title>
+    <style>
+        :root {
+            --primary: #8b5cf6;
+            --primary-hover: #7c3aed;
+            --bg: #0f172a;
+            --surface: rgba(30, 41, 59, 0.7);
+            --text: #f8fafc;
+        }
+        * { box-sizing: border-box; }
+        body {
+            margin: 0;
+            padding: 20px;
+            font-family: 'Inter', system-ui, -apple-system, sans-serif;
+            background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
+            color: var(--text);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .container {
+            width: 100%;
+            max-width: 400px;
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 1.5rem;
+            padding: 2rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+            animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        @keyframes slideUp {
+            from { opacity: 0; transform: translateY(30px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        h1 {
+            text-align: center;
+            font-size: 1.5rem;
+            margin-top: 0;
+            margin-bottom: 0.5rem;
+        }
+        .room-badge {
+            display: block;
+            text-align: center;
+            font-size: 0.875rem;
+            color: #cbd5e1;
+            margin-bottom: 2rem;
+            padding: 0.5rem;
+            background: rgba(0,0,0,0.2);
+            border-radius: 0.5rem;
+        }
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+        label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+            color: #cbd5e1;
+        }
+        input {
+            width: 100%;
+            padding: 0.875rem 1rem;
+            background: rgba(0, 0, 0, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 0.75rem;
+            color: white;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+        input:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
+        }
+        button {
+            width: 100%;
+            padding: 1rem;
+            background: linear-gradient(135deg, var(--primary), var(--primary-hover));
+            border: none;
+            border-radius: 0.75rem;
+            color: white;
+            font-size: 1.125rem;
+            font-weight: bold;
+            cursor: pointer;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.4);
+        }
+        button:active {
+            transform: translateY(0);
+        }
+        .spinner {
+            border: 3px solid rgba(255,255,255,0.3);
+            border-top: 3px solid white;
+            border-radius: 50%;
+            width: 24px;
+            height: 24px;
+            animation: spin 1s linear infinite;
+            display: none;
+        }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        .success-state {
+            display: none;
+            text-align: center;
+        }
+        .success-icon {
+            font-size: 4rem;
+            margin-bottom: 1rem;
+            animation: popIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        @keyframes popIn {
+            0% { transform: scale(0); }
+            80% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+    </style>
+</head>
+<body>
+    <div class="container" id="mainContainer">
+        <h1>探索圓周率的秘密</h1>
+        <span class="room-badge" id="roomBadge">載入中...</span>
+        <div id="inputForm">
+            <div class="form-group">
+                <label for="studentName">姓名 (或座號)</label>
+                <input type="text" id="studentName" placeholder="例如：王小明" required>
+            </div>
+            <div class="form-group">
+                <label for="luckyNumber">你的幸運數字</label>
+                <!-- 注意：這裡改用 text，避免手機輸入前導零 (0007) 被瀏覽器吃掉 -->
+                <input type="text" id="luckyNumber" inputmode="numeric" placeholder="例如：01314" required>
+            </div>
+            <button id="submitBtn">
+                <span id="btnText">送出數字</span>
+                <div class="spinner" id="btnSpinner"></div>
+            </button>
+        </div>
+        <div class="success-state" id="successState">
+            <div class="success-icon">✅</div>
+            <h2>傳送成功！</h2>
+            <p>請抬頭看老師的大螢幕<br>準備開始環遊圓周率！</p>
+        </div>
+    </div>
+    <!-- Firebase SDK (Web Modules) -->
+    <script type="module">
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";
+        import { getFirestore, collection, addDoc, serverTimestamp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-firestore.js";
+        import { firebaseConfig } from './firebase-config.js';
+        // 取得網址的 room 參數
+        const urlParams = new URLSearchParams(window.location.search);
+        const roomCode = urlParams.get('room') || '未指定教室';
+        document.getElementById('roomBadge').innerHTML = `教室代碼：<strong>${roomCode}</strong>`;
+        let db = null;
+        try {
+            if(firebaseConfig.apiKey !== "YOUR_API_KEY") {
+                const app = initializeApp(firebaseConfig);
+                db = getFirestore(app);
+            }
+        } catch(e) { console.error("Firebase 初始化失敗:", e); }
+        const submitBtn = document.getElementById('submitBtn');
+        const btnText = document.getElementById('btnText');
+        const btnSpinner = document.getElementById('btnSpinner');
+        submitBtn.addEventListener('click', async () => {
+            if(firebaseConfig.apiKey === "YOUR_API_KEY"){
+                alert("系統錯誤：老師尚未設定 Firebase！");
+                return;
+            }
+            const name = document.getElementById('studentName').value.trim();
+            const number = document.getElementById('luckyNumber').value.trim();
+            if (!name || !number) {
+                alert('請填寫完整姓名與幸運數字！');
+                return;
+            }
+            // UI 狀態：載入中
+            submitBtn.disabled = true;
+            btnText.style.display = 'none';
+            btnSpinner.style.display = 'block';
+            try {
+                // 將資料寫入 Firebase 中對應教室的 Subcollection
+                const studentsRef = collection(db, "rooms", roomCode, "students");
+                await addDoc(studentsRef, {
+                    name: name,
+                    number: number,
+                    timestamp: serverTimestamp()
+                });
+                // UI 狀態：成功
+                document.getElementById('inputForm').style.display = 'none';
+                document.getElementById('successState').style.display = 'block';
+            } catch (error) {
+                console.error("寫入發生錯誤: ", error);
+                alert("發生錯誤，請稍後再試！\n" + error.message);
+                // 還原 UI
+                submitBtn.disabled = false;
+                btnText.style.display = 'block';
+                btnSpinner.style.display = 'none';
+            }
+        });
+    </script>
+</body>
+</html>