Hugging Face's logo

Spaces:
hklamsir
/
tech-edumaster
Running

App Files Community
tech-edumaster
File size: 9,950 Bytes 
0dc0e3c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>網頁開發工作坊 | 林老師</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">網頁開發工作坊</li>
                </ol>
            </nav>

            <!-- Workshop 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/前端網站開發.png" 
                         alt="網頁開發工作坊" 
                         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-green-100 text-green-800 rounded-full text-sm font-semibold mb-4">工作坊</span>
                    <h1 class="text-3xl font-bold mb-4">網頁開發工作坊</h1>
                    <p class="text-gray-700 mb-6">涵蓋 HTML、CSS 及 JavaScript 基礎的互動式工作坊，適合中學生參與。</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">12 小時</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">發布年份</p>
                            <p class="font-medium">2022</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>

            <!-- Workshop Details -->
            <div class="mb-16">
                <h2 class="text-2xl font-bold mb-6">工作坊介紹</h2>
                <div class="prose max-w-none">
                    <p>本工作坊專為中學生設計，透過互動式學習體驗引導學生進入網頁開發的世界。學生將從最基礎的HTML標籤開始，逐步學習如何建立結構完整的網頁，並使用CSS進行美化，最後加入JavaScript實現互動功能。</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>了解網頁基本結構與HTML語法</li>
                        <li>掌握CSS選擇器與樣式設計技巧</li>
                        <li>學習JavaScript基礎互動功能</li>
                        <li>培養團隊合作與問題解決能力</li>
                        <li>完成個人網頁作品集</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 天：HTML基礎</div>
                        <div class="px-6 py-4 border-t border-gray-200">
                            <p class="mb-2">1.1 網頁結構與HTML語法</p>
                            <p class="mb-2">1.2 常用標籤與表單元素</p>
                            <p>1.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">第 2 天：CSS設計</div>
                        <div class="px-6 py-4 border-t border-gray-200">
                            <p class="mb-2">2.1 CSS選擇器與樣式</p>
                            <p class="mb-2">2.2 盒模型與布局</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 天：JavaScript互動</div>
                        <div class="px-6 py-4 border-t border-gray-200">
                            <p class="mb-2">3.1 JavaScript基礎語法</p>
                            <p class="mb-2">3.2 DOM操作與事件處理</p>
                            <p>3.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">第 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="parent-name" class="block mb-2 font-medium">家長姓名</label>
                        <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">
                    </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="grade" class="block mb-2 font-medium">年級</label>
                        <select id="grade" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
                            <option value="">選擇學生年級</option>
                            <option value="7">七年級</option>
                            <option value="8">八年級</option>
                            <option value="9">九年級</option>
                            <option value="10">十年級</option>
                            <option value="11">十一年級</option>
                            <option value="12">十二年級</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>