Hugging Face's logo

Spaces:
hklamsir
/
tech-edumaster
Running

App Files Community
hklamsir commited on
Commit
0dc0e3c
·
verified ·
1 Parent(s): 087412e

add a page about 網頁開發工作坊 details

Browse files
Files changed (2) hide show
  1. script.js +1 -2
  2. web-dev-workshop.html +184 -0
script.js CHANGED
@@ -74,7 +74,6 @@ document.addEventListener('DOMContentLoaded', function() {
74
  projectsToLoad.forEach(project => {
75
  const projectEl = document.createElement('div');
76
  projectEl.className = 'gallery-item bg-white rounded-lg overflow-hidden shadow-md';
77
-
78
  projectEl.innerHTML = `
79
  <img src="${project.image}" alt="${project.title}" class="w-full h-48 object-cover">
80
  <div class="p-6">
@@ -83,7 +82,7 @@ document.addEventListener('DOMContentLoaded', function() {
83
  <p class="text-gray-600 mb-4">${project.description}</p>
84
  <div class="flex justify-between items-center text-sm text-gray-500">
85
  <span>${project.year}</span>
86
- <a href="python-course.html" class="text-primary hover:underline">查看詳情</a>
87
  </div>
88
  </div>
89
  `;
 
74
  projectsToLoad.forEach(project => {
75
  const projectEl = document.createElement('div');
76
  projectEl.className = 'gallery-item bg-white rounded-lg overflow-hidden shadow-md';
 
77
  projectEl.innerHTML = `
78
  <img src="${project.image}" alt="${project.title}" class="w-full h-48 object-cover">
79
  <div class="p-6">
 
82
  <p class="text-gray-600 mb-4">${project.description}</p>
83
  <div class="flex justify-between items-center text-sm text-gray-500">
84
  <span>${project.year}</span>
85
+ <a href="${project.category === 'workshop' ? 'web-dev-workshop.html' : 'python-course.html'}" class="text-primary hover:underline">查看詳情</a>
86
  </div>
87
  </div>
88
  `;
web-dev-workshop.html ADDED
@@ -0,0 +1,184 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>網頁開發工作坊 | 林老師</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ </head>
11
+ <body class="bg-gray-50">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <main class="container mx-auto px-6 py-16">
15
+ <div class="max-w-4xl mx-auto">
16
+ <!-- Breadcrumb -->
17
+ <nav class="mb-8">
18
+ <ol class="flex items-center space-x-2 text-sm text-gray-600">
19
+ <li><a href="/" class="hover:text-primary">首頁</a></li>
20
+ <li><i data-feather="chevron-right" class="w-4 h-4"></i></li>
21
+ <li><a href="#projects" class="hover:text-primary">專案成果</a></li>
22
+ <li><i data-feather="chevron-right" class="w-4 h-4"></i></li>
23
+ <li class="text-gray-400">網頁開發工作坊</li>
24
+ </ol>
25
+ </nav>
26
+
27
+ <!-- Workshop Header -->
28
+ <div class="flex flex-col md:flex-row gap-8 mb-12">
29
+ <div class="md:w-1/2">
30
+ <img src="https://huggingface.co/spaces/hklamsir/tech-edumaster/resolve/main/images/前端網站開發.png"
31
+ alt="網頁開發工作坊"
32
+ class="rounded-lg shadow-lg w-full h-auto">
33
+ </div>
34
+ <div class="md:w-1/2">
35
+ <span class="inline-block px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-semibold mb-4">工作坊</span>
36
+ <h1 class="text-3xl font-bold mb-4">網頁開發工作坊</h1>
37
+ <p class="text-gray-700 mb-6">涵蓋 HTML、CSS 及 JavaScript 基礎的互動式工作坊，適合中學生參與。</p>
38
+
39
+ <div class="grid grid-cols-2 gap-4 mb-6">
40
+ <div>
41
+ <p class="text-sm text-gray-500">適合對象</p>
42
+ <p class="font-medium">中學生</p>
43
+ </div>
44
+ <div>
45
+ <p class="text-sm text-gray-500">課程時數</p>
46
+ <p class="font-medium">12 小時</p>
47
+ </div>
48
+ <div>
49
+ <p class="text-sm text-gray-500">發布年份</p>
50
+ <p class="font-medium">2022</p>
51
+ </div>
52
+ <div>
53
+ <p class="text-sm text-gray-500">語言</p>
54
+ <p class="font-medium">中文</p>
55
+ </div>
56
+ </div>
57
+
58
+ <a href="#enroll" class="inline-block bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary-600 transition font-medium">立即報名</a>
59
+ </div>
60
+ </div>
61
+
62
+ <!-- Workshop Details -->
63
+ <div class="mb-16">
64
+ <h2 class="text-2xl font-bold mb-6">工作坊介紹</h2>
65
+ <div class="prose max-w-none">
66
+ <p>本工作坊專為中學生設計，透過互動式學習體驗引導學生進入網頁開發的世界。學生將從最基礎的HTML標籤開始，逐步學習如何建立結構完整的網頁，並使用CSS進行美化，最後加入JavaScript實現互動功能。</p>
67
+
68
+ <h3 class="text-xl font-semibold mt-8 mb-4">工作坊特色</h3>
69
+ <ul class="list-disc pl-6">
70
+ <li>實作導向的學習方式</li>
71
+ <li>小組合作完成專案</li>
72
+ <li>即時回饋與指導</li>
73
+ <li>適合零基礎學習者</li>
74
+ <li>結業作品展示與分享</li>
75
+ </ul>
76
+
77
+ <h3 class="text-xl font-semibold mt-8 mb-4">學習目標</h3>
78
+ <ul class="list-disc pl-6">
79
+ <li>了解網頁基本結構與HTML語法</li>
80
+ <li>掌握CSS選擇器與樣式設計技巧</li>
81
+ <li>學習JavaScript基礎互動功能</li>
82
+ <li>培養團隊合作與問題解決能力</li>
83
+ <li>完成個人網頁作品集</li>
84
+ </ul>
85
+ </div>
86
+ </div>
87
+
88
+ <!-- Curriculum -->
89
+ <div class="mb-16">
90
+ <h2 class="text-2xl font-bold mb-6">課程內容</h2>
91
+ <div class="space-y-4">
92
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
93
+ <div class="bg-gray-50 px-6 py-4 font-medium">第 1 天：HTML基礎</div>
94
+ <div class="px-6 py-4 border-t border-gray-200">
95
+ <p class="mb-2">1.1 網頁結構與HTML語法</p>
96
+ <p class="mb-2">1.2 常用標籤與表單元素</p>
97
+ <p>1.3 建立第一個網頁</p>
98
+ </div>
99
+ </div>
100
+
101
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
102
+ <div class="bg-gray-50 px-6 py-4 font-medium">第 2 天：CSS設計</div>
103
+ <div class="px-6 py-4 border-t border-gray-200">
104
+ <p class="mb-2">2.1 CSS選擇器與樣式</p>
105
+ <p class="mb-2">2.2 盒模型與布局</p>
106
+ <p>2.3 響應式設計基礎</p>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
111
+ <div class="bg-gray-50 px-6 py-4 font-medium">第 3 天：JavaScript互動</div>
112
+ <div class="px-6 py-4 border-t border-gray-200">
113
+ <p class="mb-2">3.1 JavaScript基礎語法</p>
114
+ <p class="mb-2">3.2 DOM操作與事件處理</p>
115
+ <p>3.3 簡單互動功能實作</p>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
120
+ <div class="bg-gray-50 px-6 py-4 font-medium">第 4 天：專案實作</div>
121
+ <div class="px-6 py-4 border-t border-gray-200">
122
+ <p class="mb-2">4.1 專題規劃與設計</p>
123
+ <p class="mb-2">4.2 小組實作與輔導</p>
124
+ <p>4.3 作品展示與回顧</p>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Enrollment Form -->
131
+ <div id="enroll" class="bg-white p-8 rounded-lg shadow-md">
132
+ <h2 class="text-2xl font-bold mb-6">工作坊報名</h2>
133
+ <form class="space-y-4">
134
+ <div>
135
+ <label for="fullname" class="block mb-2 font-medium">學生姓名</label>
136
+ <input type="text" id="fullname" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
137
+ </div>
138
+ <div>
139
+ <label for="parent-name" class="block mb-2 font-medium">家長姓名</label>
140
+ <input type="text" id="parent-name" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
141
+ </div>
142
+ <div>
143
+ <label for="email" class="block mb-2 font-medium">電子郵件</label>
144
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
145
+ </div>
146
+ <div>
147
+ <label for="phone" class="block mb-2 font-medium">電話</label>
148
+ <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
149
+ </div>
150
+ <div>
151
+ <label for="grade" class="block mb-2 font-medium">年級</label>
152
+ <select id="grade" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
153
+ <option value="">選擇學生年級</option>
154
+ <option value="7">七年級</option>
155
+ <option value="8">八年級</option>
156
+ <option value="9">九年級</option>
157
+ <option value="10">十年級</option>
158
+ <option value="11">十一年級</option>
159
+ <option value="12">十二年級</option>
160
+ </select>
161
+ </div>
162
+ <button type="submit" class="w-full bg-primary text-white py-3 px-6 rounded-lg hover:bg-primary-600 transition font-medium">提交報名表</button>
163
+ </form>
164
+ </div>
165
+ </div>
166
+ </main>
167
+
168
+ <custom-footer></custom-footer>
169
+
170
+ <script src="components/navbar.js"></script>
171
+ <script src="components/footer.js"></script>
172
+ <script src="script.js"></script>
173
+ <script>
174
+ feather.replace();
175
+
176
+ // Form submission
177
+ document.querySelector('form').addEventListener('submit', function(e) {
178
+ e.preventDefault();
179
+ alert('感謝您的報名！我們會盡快與您聯繫確認工作坊詳情。');
180
+ this.reset();
181
+ });
182
+ </script>
183
+ </body>
184
+ </html>