hsuliang.github.io/Aliang.html at main · hsuliang/hsuliang.github.io · GitHub

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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ㄚ亮笑長 - 洪旭亮</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(to bottom right, #f0f4f8, #e7eaf2); /* 淺灰藍到柔和灰藍漸變 */
            color: #333;
        }
        .container-card {
            background-color: #f8fcff; /* 從淡黃色改為非常淺的藍白色 */
            border-radius: 1.5rem; /* 大圓角 */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.04);
            padding: 2rem;
            border: 1px solid rgba(229, 231, 235, 0.7); /* 更淺的邊框 */
        }
        .section-title {
            font-weight: 800; /* 更粗的字體 */
            margin-bottom: 1rem;
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            background-image: linear-gradient(to right, var(--tw-gradient-stops));
            color: #2563eb; /* Fallback color */
        }
        .list-item {
            background-color: #eaf3fb; /* 列表項目的淺藍色背景 */
            border-radius: 0.75rem; /* 中等圓角 */
            padding: 0.75rem 1.25rem;
            margin-bottom: 0.75rem;
            color: #334155; /* 沉穩的藍灰色文字 (slate-700) */
            font-weight: 600;
            transition: all 0.2s ease-in-out; /* 平滑過渡效果 */
            cursor: pointer;
        }
        .list-item:hover {
            transform: translateY(-2px) scale(1.01); /* 輕微上移和放大效果 */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); /* hover時增加更柔和的陰影 */
            background-color: #dbeaf4; /* hover時背景色變化 */
        }
        /* 時間軸線條漸變：保持深沉藍色系作為強調 */
        .timeline-line {
            background: linear-gradient(to bottom, #94a3b8, #64748b, #475569); /* 灰藍到深灰藍的漸變 */
        }
        /* 時間軸圓點動畫：顏色與線條協調 */
        .timeline-dot {
            animation: pulse-ring 1.5s infinite;
        }
        @keyframes pulse-ring {
            0% {
                box-shadow: 0 0 0 0 rgba(71, 85, 105, 0.6); /* 脈衝顏色調整 */
            }
            70% {
                box-shadow: 0 0 0 10px rgba(71, 85, 105, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(71, 85, 105, 0);
            }
        }
        /* 圖片彈出視窗樣式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out;
        }
        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        .modal-overlay.inactive {
            display: none;
        }
        .modal-content {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
            border-radius: 0.75rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            cursor: pointer;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">

    <div class="container-card w-full max-w-2xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">

        <!-- 洪旭亮簡介 (主標題與照片) -->
        <div class="col-span-full text-center mb-8">
            <img src="ㄚ亮頭貼.jpg" alt="ㄚ亮笑長 洪旭亮 個人照片" class="w-36 h-36 sm:w-40 sm:h-40 rounded-full mx-auto mb-6 object-cover shadow-xl border-4 border-blue-400 ring-4 ring-blue-200 ring-offset-2" onerror="this.onerror=null;this.src='https://placehold.co/160x160/cccccc/333333?text=ㄚ亮笑長';">
            <h1 class="text-4xl sm:text-5xl font-extrabold text-blue-800 mb-2 rounded-lg p-2 bg-gradient-to-r from-blue-200 to-indigo-200 shadow-lg transform hover:scale-105 transition-transform duration-300">
                洪旭亮(丫亮笑長)
            </h1>
            <p class="text-lg sm:text-xl text-gray-700 leading-relaxed max-w-3xl mx-auto mt-4">
                人一輩子能做好一件事就功德圓滿了
            </p>
        </div>

        <!-- 簡介卡片 (獨立區塊) -->
        <div class="container-card p-6 border-t-4 border-blue-700 col-span-full">
            <h2 class="text-3xl section-title mb-4" style="--tw-gradient-stops: #1e40af, #1d4ed8;">簡介</h2>
            <p class="text-gray-700 leading-relaxed text-base sm:text-lg" id="intro-text">
                洪旭亮，教育界朋友暱稱的「ㄚ亮笑長」。從基層教師到國小校長，他始終致力於推動資訊科技融入教學，並以無私分享的精神，共同創辦了影響廣泛的教師專業社群「教育噗浪客」(TPET)。即使在退休後，他依然活躍於教育界，透過「ㄚ亮笑長練功坊」等平台，持續為教師們提供最新的教學科技知能，其教育熱忱與創新精神，深受肯定。
            </p>
        </div>

        <!-- 新增的「關於ㄚ亮笑長」圖片區塊 -->
        <div class="col-span-full py-8 text-center">
            <div class="container-card p-6 border-t-4 border-indigo-700 flex justify-center items-center">
                <img id="aliang-full-img" src="Aliang.jpg" alt="關於ㄚ亮笑長的相關資訊" class="w-full h-auto rounded-3xl shadow-2xl border-8 border-indigo-300 transform hover:scale-105 transition-transform duration-500 max-w-lg cursor-pointer" onerror="this.onerror=null;this.src='https://placehold.co/600x400/cccccc/333333?text=關於ㄚ亮笑長';">
            </div>
        </div>

        <!-- 授課內容區塊 -->
        <div class="col-span-full py-8">
            <div class="container-card p-6 border-t-4 border-green-700">
                <h2 class="text-3xl section-title mb-4" style="--tw-gradient-stops: #059669, #10b981;">📚 授課內容</h2>
                <ul class="space-y-3">
                    <li class="list-item">數位苦手的救星～T++互動神器零負擔入門</li>
                    <li class="list-item">「玩」出學習力～1：Wordwall~千變萬化的遊戲式測驗平台</li>
                    <li class="list-item">「玩」出學習力～2：遊戲式學習平台的老祖宗～Kahoot</li>
                    <li class="list-item">「玩」出學習力～3：輕鬆打造互動課堂：Quizizz快速上手指南</li>
                    <li class="list-item">數位教室新玩法：Padlet入門與實踐技巧</li>
                    <li class="list-item">教學設計的好幫手：Canva從零開始快速上手</li>
                    <li class="list-item">我教的AI不太難：《Youtube 知識快速整理術》</li>
                    <li class="list-item">AI不是神秘魔法 而是實用工具~Edcafe</li>
                    <li class="list-item">你的教材製作魔法師：用Canva解鎖數位教材的無限可能</li>
                    <li class="list-item">《HiTeach：我最近學會的教學神器》</li>
                    <li class="list-item">手把手帶你學會LoiLoNote</li>
                    <li class="list-item">數位時代的班級經營 你的私人助教～Line Official Account</li>
                </ul>
            </div>
        </div>

        <!-- 聯絡方式區塊 -->
        <div class="col-span-full py-8">
            <div class="container-card p-6 border-t-4 border-blue-800">
                <h2 class="text-3xl section-title mb-4" style="--tw-gradient-stops: #1e3a8a, #1d4ed8;">✉️ 聯絡方式</h2>
                <p class="text-gray-700 leading-relaxed text-base sm:text-lg mb-2">
                    <span class="font-bold">Email:</span> <a href="mailto:hsuliang@gmail.com" class="text-blue-700 hover:underline">hsuliang@gmail.com</a>
                </p>
                <p class="text-gray-700 leading-relaxed text-base sm:text-lg">
                    <span class="font-bold">ㄚ亮笑長練功坊:</span> <a href="https://bit.ly/Aliang" target="_blank" rel="noopener noreferrer" class="text-blue-700 hover:underline">https://bit.ly/Aliang</a>
                </p>
            </div>
        </div>

        <!-- Footer -->
        <footer class="col-span-full text-center mt-8 text-gray-500 text-sm">
            <p>&copy; 2025 洪旭亮. 版權所有.</p>
        </footer>

    </div>

    <!-- 圖片彈出視窗 HTML -->
    <div id="image-modal" class="modal-overlay inactive">
        <img id="modal-image-content" src="" alt="放大圖片" class="modal-content">
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const aliangFullImg = document.getElementById('aliang-full-img');
            const imageModal = document.getElementById('image-modal');
            const modalImageContent = document.getElementById('modal-image-content');

            // 點擊圖片時顯示彈出視窗
            aliangFullImg.addEventListener('click', () => {
                modalImageContent.src = aliangFullImg.src;
                imageModal.classList.remove('inactive');
                imageModal.classList.add('active');
            });

            // 點擊彈出視窗背景或圖片時關閉視窗
            imageModal.addEventListener('click', () => {
                imageModal.classList.remove('active');
                imageModal.addEventListener('transitionend', function handler() {
                    imageModal.classList.add('inactive');
                    imageModal.removeEventListener('transitionend', handler);
                });
            });
        });
    </script>
</body>
</html>