Spaces:
Running
Running
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>得能教育專題展示場 - Telearn Project Showcase</title> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&family=Noto+Sans+TC:wght@300;400;700;900&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/static/css/index.css"> | |
| </head> | |
| <body> | |
| <!-- Official Nav Bar --> | |
| <nav> | |
| <div class="nav-container"> | |
| <a class="brand-logo" {% if not restrict_class and not restrict_student %}href="/"{% else %}style="pointer-events: none;"{% endif %}> | |
| <img src="/images/logo-light.png" alt="Telearn Logo" class="logo-img" /> | |
| <span class="brand-name">Telearn 得能教育</span> | |
| </a> | |
| <div class="nav-links"> | |
| <a href="https://telearn.best/course-map/" target="_blank" class="nav-link">常態班課程</a> | |
| <a href="https://telearn.best/contact/" target="_blank" class="nav-link">聯絡我們</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Top Banner --> | |
| <header> | |
| <div class="badge-top"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #f3b64a; margin-right: 8px;"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg> | |
| <span>學生創意專案展示場</span> | |
| </div> | |
| <h1>發揮程式創意<br><span class="headline-emphasis">展現無限可能</span></h1> | |
| <p>得能教育學生成果展示場，匯集了學生們的邏輯程式設計、趣味互動遊戲與多元網頁創作成果。</p> | |
| </header> | |
| <!-- Link Generator (Main lobby page only) --> | |
| {% if not restrict_class and not restrict_student %} | |
| <div class="link-generator-panel" id="link-generator"> | |
| <div class="generator-header"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #f3b64a;"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg> | |
| <h2 style="margin-left: 8px;">分享連結產生器</h2> | |
| </div> | |
| <div class="generator-body"> | |
| <div class="select-group"> | |
| <label for="gen-class-select">選擇班級</label> | |
| <select id="gen-class-select"> | |
| <option value="">-- 請選擇班級 --</option> | |
| </select> | |
| </div> | |
| <div class="select-group"> | |
| <label for="gen-student-select">選擇學生</label> | |
| <select id="gen-student-select" disabled> | |
| <option value="">-- 請選擇學生 (選填) --</option> | |
| </select> | |
| </div> | |
| <div class="result-group"> | |
| <input type="text" id="gen-url-result" readonly /> | |
| <button id="btn-copy-url">複製連結</button> | |
| </div> | |
| </div> | |
| </div> | |
| {% endif %} | |
| <!-- Content Workspace --> | |
| <div class="container"> | |
| <!-- 1. Class Panel --> | |
| <div class="panel" id="panel-classes"> | |
| <div class="panel-header"> | |
| <div class="badge"></div> | |
| <h2>第一步：選擇班級</h2> | |
| </div> | |
| <div class="list" id="class-list"> | |
| <!-- Dynamic Content --> | |
| </div> | |
| </div> | |
| <!-- 2. Student Panel --> | |
| <div class="panel" id="panel-students"> | |
| <div class="panel-header"> | |
| <div class="badge"></div> | |
| <h2>第二步：選擇學生</h2> | |
| </div> | |
| <div class="list" id="student-list"> | |
| <div class="empty-placeholder"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke-width="1.5"><path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| <p>請先點選班級以載入學生名單</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 3. Project Panel --> | |
| <div class="panel" id="panel-projects"> | |
| <div class="panel-header"> | |
| <div class="badge"></div> | |
| <h2>第三步：啟動專題專區</h2> | |
| </div> | |
| <div class="list" id="project-list"> | |
| <div class="empty-placeholder"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke-width="1.5"><path d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347c-.75.412-1.667-.13-1.667-.986V5.653Z" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| <p>請點選學生以檢視專題項目</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>© 2026 得能教育 Telearn Education. All rights reserved.</p> | |
| </footer> | |
| <script nonce="{{ request.state.csp_nonce }}"> | |
| </script> | |
| <script src="/static/js/index.js?v=showcase-20261007"></script> | |
| </body> | |
| </html> | |