Blame for templates/index.html

<!DOCTYPE html>
<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>&copy; 2026 得能教育 Telearn Education. All rights reserved.</p>
    </footer>

    <script nonce="{{ request.state.csp_nonce }}">
        window.TELEARN_INDEX = {
            restrictClass: {{ restrict_class|tojson }},
            restrictStudent: {{ restrict_student|tojson }}
        };
    </script>
    <script src="/static/js/index.js?v=showcase-20261007"></script>
</body>
</html>