feat: add Android APK simulation & download support with Appetize.io

projects/DEMO/Student1/Android測試專案/appetize.txt

@@ -0,0 +1 @@
+b_olthggzkkmb43hyiyzcij32sye

projects/DEMO/Student1/Android測試專案/test_app.apk

@@ -0,0 +1 @@
+This is a dummy APK file content to test the arcade hub APK download and scanner features.

server.py

@@ -46,15 +46,24 @@ def scan_projects():
             for project_name in sorted(os.listdir(student_path)):
                 project_dir = os.path.join(student_path, project_name)
                 if os.path.isdir(project_dir) and not project_name.startswith('.'):
-                    # Check type priority: 1. Python, 2. HTML, 3. External Link
+                    # Check type priority: 1. Python, 2. HTML, 3. APK, 4. External Link
                     main_py = os.path.join(project_dir, "main.py")
                     index_html = os.path.join(project_dir, "index.html")
                     link_txt = os.path.join(project_dir, "link.txt")
                     
+                    apk_files = []
+                    if os.path.isdir(project_dir):
+                        try:
+                            apk_files = [f for f in os.listdir(project_dir) if f.endswith(".apk") and not f.startswith('.')]
+                        except Exception:
+                            pass
+                    
                     if os.path.exists(main_py):
                         projects.append({"name": project_name, "type": "python", "url": ""})
                     elif os.path.exists(index_html):
                         projects.append({"name": project_name, "type": "html", "url": ""})
+                    elif apk_files:
+                        projects.append({"name": project_name, "type": "apk", "url": apk_files[0]})
                     elif os.path.exists(link_txt):
                         try:
                             with open(link_txt, "r", encoding="utf-8") as f:
@@ -260,11 +269,41 @@ async def run_project_page(request: Request, student_token: str, project_name: s
     proj_dir = os.path.join(PROJECTS_DIR, real_class, real_student, project_name)
     proj_type = "unknown"
     external_url = ""
+    apk_name = ""
+    apk_size = ""
+    appetize_key = ""
     
+    apk_files = []
+    if os.path.isdir(proj_dir):
+        try:
+            apk_files = [f for f in os.listdir(proj_dir) if f.endswith(".apk") and not f.startswith('.')]
+        except Exception:
+            pass
+            
     if os.path.exists(os.path.join(proj_dir, "main.py")):
         proj_type = "python"
     elif os.path.exists(os.path.join(proj_dir, "index.html")):
         proj_type = "html"
+    elif apk_files:
+        proj_type = "apk"
+        apk_name = apk_files[0]
+        # Check size of the apk file
+        try:
+            size_bytes = os.path.getsize(os.path.join(proj_dir, apk_name))
+            if size_bytes < 1024 * 1024:
+                apk_size = f"{size_bytes / 1024:.1f} KB"
+            else:
+                apk_size = f"{size_bytes / (1024 * 1024):.1f} MB"
+        except Exception:
+            pass
+        # Check appetize.txt
+        appetize_path = os.path.join(proj_dir, "appetize.txt")
+        if os.path.exists(appetize_path):
+            try:
+                with open(appetize_path, "r", encoding="utf-8") as f:
+                    appetize_key = f.read().strip()
+            except Exception:
+                pass
     elif os.path.exists(os.path.join(proj_dir, "link.txt")):
         proj_type = "external"
         try:
@@ -280,7 +319,10 @@ async def run_project_page(request: Request, student_token: str, project_name: s
         "student_token": student_token,
         "project_name": project_name,
         "project_type": proj_type,
-        "external_url": external_url
+        "external_url": external_url,
+        "apk_name": apk_name,
+        "apk_size": apk_size,
+        "appetize_key": appetize_key
     })
 
 @app.get("/run/{class_name}/{student_name}/{project_name}", response_class=HTMLResponse)

templates/index.html

@@ -448,6 +448,11 @@
             border-color: rgba(16, 185, 129, 0.15);
         }
 
+        .project-card.hover-apk:hover {
+            border-left-color: #a855f7;
+            border-color: rgba(168, 85, 247, 0.15);
+        }
+
         .project-meta {
             display: flex;
             align-items: center;
@@ -496,6 +501,12 @@
             border: 1px solid rgba(16, 185, 129, 0.15);
         }
 
+        .tag-apk {
+            background: rgba(168, 85, 247, 0.08);
+            color: #d8b4fe;
+            border: 1px solid rgba(168, 85, 247, 0.15);
+        }
+
         /* Action launch button */
         .btn-launch {
             border: none;
@@ -545,6 +556,13 @@
             background: #047857;
         }
 
+        .btn-launch-apk {
+            background: var(--accent);
+        }
+        .btn-launch-apk:hover {
+            background: #9333ea;
+        }
+
         /* Placeholder */
         .empty-placeholder {
             display: flex;
@@ -967,6 +985,11 @@
                     tagClass = "tag-html";
                     hoverClass = "hover-html";
                     btnClass = "btn-launch-html";
+                } else if (proj.type === "apk") {
+                    tagText = "Android App (APK)";
+                    tagClass = "tag-apk";
+                    hoverClass = "hover-apk";
+                    btnClass = "btn-launch-apk";
                 }
 
                 const card = document.createElement('div');

templates/player.html

@@ -460,6 +460,246 @@
                 padding: 1rem;
             }
         }
+
+        /* APK Card Tag / Button */
+        .btn-launch-apk {
+            background: var(--accent) !important;
+        }
+        .btn-launch-apk:hover {
+            background: #9333ea !important;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25);
+        }
+
+        /* Smartphone Mockup Container */
+        .phone-mockup {
+            width: 320px;
+            height: 640px;
+            background: #000000;
+            border: 12px solid #1f2937;
+            border-radius: 40px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.05);
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            overflow: hidden;
+            flex-shrink: 0;
+            transition: all 0.3s ease;
+        }
+
+        /* Notch / Island bezel */
+        .phone-mockup::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 140px;
+            height: 25px;
+            background: #1f2937;
+            border-bottom-left-radius: 18px;
+            border-bottom-right-radius: 18px;
+            z-index: 10;
+        }
+
+        .phone-speaker {
+            position: absolute;
+            top: 5px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 40px;
+            height: 4px;
+            background: #374151;
+            border-radius: 2px;
+            z-index: 11;
+        }
+
+        .phone-camera {
+            position: absolute;
+            top: 4px;
+            left: calc(50% + 30px);
+            width: 6px;
+            height: 6px;
+            background: #111827;
+            border-radius: 50%;
+            z-index: 11;
+        }
+
+        .phone-status-bar {
+            width: 100%;
+            height: 25px;
+            padding: 0 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.7rem;
+            color: rgba(255, 255, 255, 0.6);
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 5;
+            box-sizing: border-box;
+        }
+
+        .phone-screen {
+            flex-grow: 1;
+            background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 1.5rem;
+            color: #ffffff;
+            position: relative;
+            text-align: center;
+            gap: 1.5rem;
+            box-sizing: border-box;
+        }
+
+        .phone-screen-iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+            background: #000;
+            border-radius: 28px;
+        }
+
+        .android-icon-wrapper {
+            width: 80px;
+            height: 80px;
+            background: rgba(168, 85, 247, 0.15);
+            border: 2px solid rgba(168, 85, 247, 0.3);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            animation: pulse-glow 2s infinite ease-in-out;
+        }
+
+        @keyframes pulse-glow {
+            0%, 100% {
+                transform: scale(1);
+                box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4);
+            }
+            50% {
+                transform: scale(1.05);
+                box-shadow: 0 0 20px 5px rgba(168, 85, 247, 0.2);
+            }
+        }
+
+        /* APK Side Panel Layout and Elements */
+        .apk-download-card {
+            background: rgba(255, 255, 255, 0.02);
+            border: 1px solid var(--border-color);
+            padding: 1.2rem;
+            border-radius: 12px;
+            display: flex;
+            flex-direction: column;
+            gap: 0.8rem;
+            align-items: center;
+            text-align: center;
+            box-sizing: border-box;
+        }
+
+        .apk-info-text {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+
+        .apk-file-name {
+            font-weight: 700;
+            font-size: 0.95rem;
+            color: #ffffff;
+            word-break: break-all;
+        }
+
+        .apk-file-size {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+        }
+
+        .qr-section {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 0.6rem;
+            text-align: center;
+            border-top: 1px solid var(--border-color);
+            padding-top: 1.5rem;
+            box-sizing: border-box;
+        }
+
+        .qr-code-wrapper {
+            background: #ffffff;
+            padding: 10px;
+            border-radius: 12px;
+            width: 160px;
+            height: 160px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
+            box-sizing: border-box;
+        }
+
+        .qr-code-wrapper img {
+            width: 140px;
+            height: 140px;
+            display: block;
+        }
+
+        .qr-tip {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            line-height: 1.4;
+            max-width: 280px;
+        }
+
+        .guide-section {
+            border-top: 1px solid var(--border-color);
+            padding-top: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 0.8rem;
+            box-sizing: border-box;
+        }
+
+        .guide-item {
+            display: flex;
+            gap: 12px;
+            align-items: flex-start;
+        }
+
+        .guide-step-number {
+            background: rgba(168, 85, 247, 0.15);
+            color: #c084fc;
+            width: 22px;
+            height: 22px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.75rem;
+            font-weight: 700;
+            flex-shrink: 0;
+        }
+
+        .guide-text {
+            font-size: 0.82rem;
+            color: var(--text-muted);
+            line-height: 1.4;
+        }
+
+        .guide-link {
+            color: #c084fc;
+            text-decoration: underline;
+            transition: color 0.2s;
+        }
+
+        .guide-link:hover {
+            color: #d8b4fe;
+        }
     </style>
 </head>
 <body>
@@ -501,9 +741,9 @@
             </div>
         </div>
 
-        <!-- 2. Side Panel (Python Only) -->
+        <!-- 2. Side Panel -->
         <div class="control-panel" id="side-panel">
-            <div class="device-section">
+            <div class="device-section" id="python-device-section">
                 <h3 class="device-title">虛擬硬體設定</h3>
                 <button class="btn-webcam" id="btn-toggle-webcam">
                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
@@ -522,7 +762,7 @@
                 </div>
             </div>
 
-            <div class="terminal-section">
+            <div class="terminal-section" id="python-terminal-section">
                 <div class="terminal-header-bar">
                     <h3 class="device-title">終端機日誌</h3>
                     <button class="btn-clear" onclick="clearConsole()">清除</button>
@@ -533,6 +773,51 @@
                     <input type="text" id="terminal-input-field" placeholder="輸入資料後按 Enter 傳送..." autocomplete="off" />
                 </div>
             </div>
+
+            <!-- APK Info Section -->
+            <div id="apk-info-section" style="display: none; padding: 1.5rem; flex-direction: column; gap: 1.5rem; overflow-y: auto; height: 100%;">
+                <div style="display: flex; flex-direction: column; gap: 1rem;">
+                    <h3 class="device-title">Android APK 專案</h3>
+                    <div class="apk-download-card">
+                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#a855f7" stroke-width="1.5">
+                            <path d="M12 2v16m0 0l-4-4m4 4l4-4M4 22h16" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                        <div class="apk-info-text">
+                            <div class="apk-file-name" id="apk-file-label">app.apk</div>
+                            <div class="apk-file-size" id="apk-size-label">大小估算中...</div>
+                        </div>
+                        <a id="btn-apk-download" href="#" class="btn-launch btn-launch-apk" style="text-decoration: none; font-size: 0.85rem;" download>
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M12 5v14M5 12h14"/></svg>
+                            下載 APK 檔案
+                        </a>
+                    </div>
+                </div>
+
+                <div class="qr-section">
+                    <h3 class="device-title">掃描二維碼安裝</h3>
+                    <div class="qr-code-wrapper">
+                        <img id="apk-qr-image" src="" alt="QR Code" />
+                    </div>
+                    <span class="qr-tip">使用 Android 裝置掃描此條碼，即可直接下載並安裝此應用程式</span>
+                </div>
+
+                <div class="guide-section">
+                    <h3 class="device-title">安裝與模擬說明</h3>
+                    
+                    <div class="guide-item">
+                        <div class="guide-step-number">1</div>
+                        <p class="guide-text">下載 APK 檔案後，在裝置上點擊安裝。若系統提示「安全性警告」，請允許瀏覽器「安裝未知來源的應用程式」。</p>
+                    </div>
+                    
+                    <div class="guide-item" style="border-top: 1px dashed var(--border-color); padding-top: 0.8rem; margin-top: 0.8rem;">
+                        <div class="guide-step-number">2</div>
+                        <p class="guide-text">
+                            <strong>啟用網頁模擬器</strong>：<br>
+                            本平台支援整合 <a href="https://appetize.io" target="_blank" class="guide-link">Appetize.io</a>。將您的 APK 上傳至該網站後，在專案目錄下建立 <code>appetize.txt</code> 寫入 Public Key，即可在此頁面直接操作模擬器。
+                        </p>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 
@@ -547,6 +832,9 @@
         const projectName = "{{ project_name }}";
         const projectType = "{{ project_type }}";
         const externalUrl = "{{ external_url }}";
+        const apkName = "{{ apk_name }}";
+        const apkSize = "{{ apk_size }}";
+        const appetizeKey = "{{ appetize_key }}";
 
         const viewportFrame = document.getElementById("viewport-frame");
         const focusPrompt = document.getElementById("focus-prompt-el");
@@ -592,6 +880,84 @@
                 focusPrompt.style.display = "flex";
                 setupPythonControls(img);
                 connectWebSocket();
+            } else if (projectType === "apk") {
+                // Hide Python sections, show APK sections
+                document.getElementById("python-device-section").style.display = "none";
+                document.getElementById("python-terminal-section").style.display = "none";
+                statusWrapper.style.display = "none";
+                
+                const apkInfoSec = document.getElementById("apk-info-section");
+                apkInfoSec.style.display = "flex";
+
+                // Setup downloads & sizes
+                const dlUrl = window.location.origin + `/static_projects/${encodeURIComponent(studentToken)}/${encodeURIComponent(projectName)}/${encodeURIComponent(apkName)}`;
+                document.getElementById("btn-apk-download").href = dlUrl;
+                document.getElementById("apk-file-label").innerText = apkName;
+                document.getElementById("apk-size-label").innerText = apkSize ? `檔案大小: ${apkSize}` : "已偵測到安裝檔";
+
+                // Generate QR code
+                const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(dlUrl)}`;
+                document.getElementById("apk-qr-image").src = qrUrl;
+
+                // Setup Phone mockup
+                viewportFrame.classList.add("iframe-mode");
+                viewportFrame.style.background = "transparent";
+                viewportFrame.style.boxShadow = "none";
+                viewportFrame.style.border = "none";
+                viewportFrame.style.padding = "0";
+
+                const phone = document.createElement("div");
+                phone.className = "phone-mockup";
+
+                const speaker = document.createElement("div");
+                speaker.className = "phone-speaker";
+                phone.appendChild(speaker);
+
+                const camera = document.createElement("div");
+                camera.className = "phone-camera";
+                phone.appendChild(camera);
+
+                const statusBar = document.createElement("div");
+                statusBar.className = "phone-status-bar";
+                statusBar.innerHTML = `
+                    <span>14:30</span>
+                    <div style="display:flex; gap: 4px; align-items:center;">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3c-4.97 0-9 4.03-9 9 0 2.12.74 4.07 1.97 5.61L4.35 19.4c3.9 3.9 10.2 3.9 14.1 0l-1.62-1.62C18.26 16.07 19 14.12 19 12c0-4.97-4.03-9-9-9z"/></svg>
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
+                    </div>
+                `;
+                phone.appendChild(statusBar);
+
+                const screen = document.createElement("div");
+                screen.className = "phone-screen";
+
+                if (appetizeKey) {
+                    const iframe = document.createElement("iframe");
+                    iframe.className = "phone-screen-iframe";
+                    iframe.src = `https://appetize.io/embed/${encodeURIComponent(appetizeKey)}?device=pixel4&scale=auto&autoplay=false&orientation=portrait&deviceColor=black`;
+                    screen.appendChild(iframe);
+                } else {
+                    screen.innerHTML = `
+                        <div class="android-icon-wrapper">
+                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#c084fc" stroke-width="1.8">
+                                <path d="M4 10v6m16-6v6M6 18c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9H6v9zm3-13l-1.5-2M15 5l1.5-2M9 13v.01M15 13v.01" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                        </div>
+                        <div>
+                            <h4 style="font-weight: 800; font-size: 1.25rem; color: #ffffff; margin-bottom: 0.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">${projectName}</h4>
+                            <p style="font-size: 0.8rem; color: rgba(255,255,255,0.7); line-height: 1.4; padding: 0 1rem;">本專案為 Android 應用程式</p>
+                        </div>
+                        <div style="background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); padding: 0.8rem; border-radius: 12px; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                            <span style="font-size: 0.72rem; color: var(--text-muted); line-height: 1.3;">掃描此條碼以安裝至您的實體手機</span>
+                            <img src="${qrUrl}" alt="QR Code" style="width: 100px; height: 100px; border-radius: 6px; border: 4px solid #ffffff; display: block;" />
+                        </div>
+                        <a href="${dlUrl}" class="btn-launch btn-launch-apk" style="text-decoration: none; width: 100%; font-size: 0.82rem;" download>
+                            下載 APK 安裝檔
+                        </a>
+                    `;
+                }
+                phone.appendChild(screen);
+                viewportFrame.appendChild(phone);
             } else {
                 // Web based game (HTML or External Link)
                 // Hide side controls and console log panel, render full viewport width