-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathportfolio.html
More file actions
177 lines (160 loc) · 9.52 KB
/
Copy pathportfolio.html
File metadata and controls
177 lines (160 loc) · 9.52 KB
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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ㄚ亮笑長作品集 - 丫亮笑長練功坊預約助手</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script src="js/config.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="icon" href="images/Alianglogo.png" type="image/png">
<style>
body {
font-family: 'Noto Sans TC', sans-serif;
}
/* Hero Background - Light Theme Adapted */
.hero-bg {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
/* blue-50 to blue-100 */
}
</style>
</head>
<body class="bg-white text-gray-800 flex flex-col min-h-screen">
<!-- Consistent Nav with Index -->
<nav class="bg-gray-900 text-white p-4 shadow-lg sticky top-0 z-50">
<div class="container mx-auto flex justify-between items-center px-4">
<div class="flex items-center space-x-2">
<a href="index.html" class="flex items-center space-x-2 hover:opacity-90 transition">
<img src="images/Alianglogo.png" alt="丫亮笑長"
class="h-10 w-10 p-1 rounded-lg bg-yellow-400 object-contain">
<div>
<h1 class="text-xl font-bold">丫亮笑長練功坊預約助手</h1>
<p class="text-xs text-gray-400">預約與課程管理系統</p>
</div>
</a>
</div>
<div class="flex items-center space-x-6 hidden md:flex">
<a href="index.html" class="text-sm hover:text-yellow-400 transition font-medium"><i
class="fa-solid fa-chalkboard-user"></i> 課程預約</a>
<a href="about.html" class="text-sm hover:text-yellow-400 transition font-medium"><i
class="fa-solid fa-user-circle"></i> 關於講師</a>
<a href="portfolio.html" class="text-sm text-yellow-400 font-bold transition"><i
class="fa-solid fa-briefcase"></i> 作品集</a>
</div>
<!-- Mobile Menu Button (Simple implementation) -->
<div class="md:hidden">
<a href="portfolio.html" class="text-yellow-400 font-bold"><i class="fa-solid fa-briefcase"></i> 作品集</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="hero-bg py-16 px-6 text-center relative overflow-hidden">
<div
class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-blue-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob">
</div>
<div
class="absolute bottom-0 left-0 -ml-20 -mb-20 w-96 h-96 bg-yellow-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000">
</div>
<div class="relative z-10 max-w-4xl mx-auto">
<span class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-bold shadow-md inline-block mb-4">
Creative Tools
</span>
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-900">
ㄚ亮笑長<span class="text-blue-600">作品集</span>
</h1>
<p class="text-lg text-gray-600 max-w-2xl mx-auto leading-relaxed">
這裡匯集了ㄚ亮笑長開發的各式實用小工具，旨在協助教學現場的老師們提升效率，讓課堂更生動有趣。歡迎自由使用與分享！
</p>
</div>
</header>
<!-- Portfolio Grid -->
<section class="py-16 px-6 bg-white flex-grow">
<div class="container mx-auto max-w-6xl">
<div id="portfolio-grid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Data will be loaded via JS -->
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-8 mt-0">
<div class="container mx-auto px-4 text-center text-sm">
<div class="flex justify-center space-x-6 mb-4">
<a href="mailto:hsuliang@gmail.com"
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"
aria-label="Email 聯絡">
<i class="fa-regular fa-envelope"></i>
</a>
<a href="https://bit.ly/Aliang" target="_blank" rel="noopener noreferrer"
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"
aria-label="ㄚ亮笑長練功坊">
<i class="fa-solid fa-globe"></i>
</a>
<a href="admin.html"
class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"
aria-label="管理端">
<i class="fa-solid fa-user-gear"></i>
</a>
</div>
<p class="mb-2">
© 2025 ㄚ亮笑長. All Rights Reserved.
</p>
<p class="text-xs text-gray-500">
Powered by Firebase Firestore & EmailJS for seamless booking experience.
</p>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
const grid = document.getElementById('portfolio-grid');
if(!grid) return;
grid.innerHTML = '<div class="col-span-full py-12 flex flex-col items-center text-gray-400"><i class="fa-solid fa-spinner fa-spin text-4xl mb-4"></i><p>載入作品集中...</p></div>';
const tm = {
teal: { bgHover: 'group-hover:bg-teal-500', textIcon: 'text-teal-500', textHover: 'group-hover:text-teal-600', textAction: 'text-teal-600' },
blue: { bgHover: 'group-hover:bg-blue-600', textIcon: 'text-blue-600', textHover: 'group-hover:text-blue-600', textAction: 'text-blue-600' },
yellow: { bgHover: 'group-hover:bg-yellow-500', textIcon: 'text-yellow-500', textHover: 'group-hover:text-yellow-600', textAction: 'text-yellow-600' },
red: { bgHover: 'group-hover:bg-red-600', textIcon: 'text-red-600', textHover: 'group-hover:text-red-600', textAction: 'text-red-600' },
green: { bgHover: 'group-hover:bg-green-600', textIcon: 'text-green-600', textHover: 'group-hover:text-green-600', textAction: 'text-green-600' },
purple: { bgHover: 'group-hover:bg-purple-600', textIcon: 'text-purple-600', textHover: 'group-hover:text-purple-600', textAction: 'text-purple-600' },
indigo: { bgHover: 'group-hover:bg-indigo-600', textIcon: 'text-indigo-600', textHover: 'group-hover:text-indigo-600', textAction: 'text-indigo-600' },
pink: { bgHover: 'group-hover:bg-pink-500', textIcon: 'text-pink-500', textHover: 'group-hover:text-pink-600', textAction: 'text-pink-600' }
};
db.collection('portfolios').orderBy('order', 'asc').onSnapshot(snap => {
grid.innerHTML = '';
if(snap.empty) {
grid.innerHTML = '<div class="col-span-full py-12 text-center text-gray-500">目前尚無作品集資料</div>';
return;
}
snap.forEach(doc => {
const data = doc.data();
const theme = data.colorTheme || 'blue';
const icon = data.iconClass || 'fa-solid fa-link';
const tc = tm[theme] || tm.blue;
const card = `
<a href="${data.url}" target="_blank"
class="group bg-gray-50 rounded-2xl p-6 border border-gray-100 hover:shadow-xl transition duration-300 flex flex-col h-full transform hover:-translate-y-1">
<div
class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mb-6 shadow-sm ${tc.bgHover} transition duration-300">
<i class="${icon} text-2xl ${tc.textIcon} group-hover:text-white transition duration-300"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2 ${tc.textHover} transition">${data.title}</h3>
<p class="text-gray-600 text-sm flex-grow">
${data.description}
</p>
<div class="mt-4 flex items-center ${tc.textAction} text-sm font-bold">
立即前往 <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
</div>
</a>`;
grid.innerHTML += card;
});
}, err => {
console.error("載入作品集失敗:", err);
grid.innerHTML = '<div class="col-span-full py-12 text-center text-red-500">載入失敗，請稍後再試。</div>';
});
});
</script>
</body>
</html>