Spaces:

hklamsir
/

tech-edumaster

Running

App Files Files Community

hklamsir commited on Oct 25, 2025

Commit

ea5664a

verified ·

1 Parent(s): a3420a3

add a view details page for python course

Browse files

Files changed (3) hide show

python-course.html +179 -0
script.js +2 -2
style.css +13 -0

python-course.html ADDED Viewed

	@@ -0,0 +1,179 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Python 基礎課程 | 張老師</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-6 py-16">
+        <div class="max-w-4xl mx-auto">
+            <!-- Breadcrumb -->
+            <nav class="mb-8">
+                <ol class="flex items-center space-x-2 text-sm text-gray-600">
+                    <li><a href="/" class="hover:text-primary">首頁</a></li>
+                    <li><i data-feather="chevron-right" class="w-4 h-4"></i></li>
+                    <li><a href="#projects" class="hover:text-primary">專案成果</a></li>
+                    <li><i data-feather="chevron-right" class="w-4 h-4"></i></li>
+                    <li class="text-gray-400">Python 基礎課程</li>
+                </ol>
+            </nav>
+            <!-- Course Header -->
+            <div class="flex flex-col md:flex-row gap-8 mb-12">
+                <div class="md:w-1/2">
+                    <img src="https://huggingface.co/spaces/hklamsir/tech-edumaster/resolve/main/images/認識Python程式編寫_01.png"
+                         alt="Python 基礎課程"
+                         class="rounded-lg shadow-lg w-full h-auto">
+                </div>
+                <div class="md:w-1/2">
+                    <span class="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-semibold mb-4">課程</span>
+                    <h1 class="text-3xl font-bold mb-4">Python 基礎課程</h1>
+                    <p class="text-gray-700 mb-6">針對初學者設計的完整 Python 程式設計入門課程，包含實務練習。</p>
+                    <div class="grid grid-cols-2 gap-4 mb-6">
+                        <div>
+                            <p class="text-sm text-gray-500">適合程度</p>
+                            <p class="font-medium">初學者</p>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500">課程時數</p>
+                            <p class="font-medium">20 小時</p>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500">發布年份</p>
+                            <p class="font-medium">2023</p>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500">語言</p>
+                            <p class="font-medium">中文</p>
+                        </div>
+                    </div>
+                    <a href="#enroll" class="inline-block bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary-600 transition font-medium">立即報名</a>
+                </div>
+            </div>
+            <!-- Course Details -->
+            <div class="mb-16">
+                <h2 class="text-2xl font-bold mb-6">課程介紹</h2>
+                <div class="prose max-w-none">
+                    <p>本課程專為程式設計初學者設計，從 Python 基礎語法開始，逐步引導學員掌握程式設計的核心概念。課程採用「學中做、做中學」的教學方法，透過大量實例練習幫助學員建立扎實的程式基礎。</p>
+                    <h3 class="text-xl font-semibold mt-8 mb-4">課程特色</h3>
+                    <ul class="list-disc pl-6">
+                        <li>從零開始，無需程式基礎</li>
+                        <li>實務導向的教學內容</li>
+                        <li>互動式練習與即時反饋</li>
+                        <li>結業專題實作</li>
+                        <li>課後學習資源與社群支持</li>
+                    </ul>
+                    <h3 class="text-xl font-semibold mt-8 mb-4">學習目標</h3>
+                    <ul class="list-disc pl-6">
+                        <li>掌握 Python 基礎語法與程式結構</li>
+                        <li>了解變數、條件判斷、迴圈等核心概念</li>
+                        <li>學習函式與模組的設計與應用</li>
+                        <li>培養解決問題的程式思維</li>
+                        <li>能獨立開發簡單的 Python 應用程式</li>
+                    </ul>
+                </div>
+            </div>
+            <!-- Curriculum -->
+            <div class="mb-16">
+                <h2 class="text-2xl font-bold mb-6">課程大綱</h2>
+                <div class="space-y-4">
+                    <div class="border border-gray-200 rounded-lg overflow-hidden">
+                        <div class="bg-gray-50 px-6 py-4 font-medium">第 1 章：Python 入門</div>
+                        <div class="px-6 py-4 border-t border-gray-200">
+                            <p class="mb-2">1.1 Python 簡介與環境設置</p>
+                            <p class="mb-2">1.2 第一個 Python 程式</p>
+                            <p class="mb-2">1.3 變數與資料類型</p>
+                            <p>1.4 基本輸入輸出</p>
+                        </div>
+                    </div>
+                    <div class="border border-gray-200 rounded-lg overflow-hidden">
+                        <div class="bg-gray-50 px-6 py-4 font-medium">第 2 章：程式控制結構</div>
+                        <div class="px-6 py-4 border-t border-gray-200">
+                            <p class="mb-2">2.1 條件判斷 (if-elif-else)</p>
+                            <p class="mb-2">2.2 迴圈 (while, for)</p>
+                            <p>2.3 流程控制練習</p>
+                        </div>
+                    </div>
+                    <div class="border border-gray-200 rounded-lg overflow-hidden">
+                        <div class="bg-gray-50 px-6 py-4 font-medium">第 3 章：函式與模組</div>
+                        <div class="px-6 py-4 border-t border-gray-200">
+                            <p class="mb-2">3.1 函式定義與呼叫</p>
+                            <p class="mb-2">3.2 參數與回傳值</p>
+                            <p class="mb-2">3.3 變數作用域</p>
+                            <p>3.4 模組與套件管理</p>
+                        </div>
+                    </div>
+                    <div class="border border-gray-200 rounded-lg overflow-hidden">
+                        <div class="bg-gray-50 px-6 py-4 font-medium">第 4 章：結業專題</div>
+                        <div class="px-6 py-4 border-t border-gray-200">
+                            <p class="mb-2">4.1 專題需求分析</p>
+                            <p class="mb-2">4.2 程式設計與實現</p>
+                            <p>4.3 專題展示與回顧</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Enrollment Form -->
+            <div id="enroll" class="bg-white p-8 rounded-lg shadow-md">
+                <h2 class="text-2xl font-bold mb-6">課程報名</h2>
+                <form class="space-y-4">
+                    <div>
+                        <label for="fullname" class="block mb-2 font-medium">姓名</label>
+                        <input type="text" id="fullname" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
+                    </div>
+                    <div>
+                        <label for="email" class="block mb-2 font-medium">電子郵件</label>
+                        <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
+                    </div>
+                    <div>
+                        <label for="phone" class="block mb-2 font-medium">電話</label>
+                        <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
+                    </div>
+                    <div>
+                        <label for="experience" class="block mb-2 font-medium">程式設計經驗</label>
+                        <select id="experience" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
+                            <option value="">選擇您的經驗水平</option>
+                            <option value="beginner">完全初學者</option>
+                            <option value="some">有一些經驗</option>
+                            <option value="intermediate">中級水平</option>
+                        </select>
+                    </div>
+                    <button type="submit" class="w-full bg-primary text-white py-3 px-6 rounded-lg hover:bg-primary-600 transition font-medium">提交報名表</button>
+                </form>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Form submission
+        document.querySelector('form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            alert('感謝您的報名！我們會盡快與您聯繫確認課程詳情。');
+            this.reset();
+        });
+    </script>
+</body>
+</html>

script.js CHANGED Viewed

@@ -83,8 +83,8 @@ document.addEventListener('DOMContentLoaded', function() {
                     <p class="text-gray-600 mb-4">${project.description}</p>
                     <div class="flex justify-between items-center text-sm text-gray-500">
                         <span>${project.year}</span>
-                        <a href="#" class="text-primary hover:underline">View details</a>
-                    </div>
                 </div>
             `;

                     <p class="text-gray-600 mb-4">${project.description}</p>
                     <div class="flex justify-between items-center text-sm text-gray-500">
                         <span>${project.year}</span>
+                    <a href="python-course.html" class="text-primary hover:underline">View details</a>
+</div>
                 </div>
             `;

style.css CHANGED Viewed

@@ -17,6 +17,19 @@
 html {
     scroll-behavior: smooth;
 }
 /* Project category tags */
 .project-tag {

 html {
     scroll-behavior: smooth;
 }
+/* Course details page styles */
+.prose {
+    line-height: 1.75;
+    color: #374151;
+}
+.prose p {
+    margin-bottom: 1rem;
+}
+.prose ul {
+    margin-bottom: 1.5rem;
+}
 /* Project category tags */
 .project-tag {