2026年4月9日 星期四

[水井USR] Google Stitch初體驗-設計玉米籜和蓪草紙創作網站

設計工具：Google Stitch

提示詞：

第一次：

工藝師作品展示網頁，包括：簡介(設計理念、藝師介紹)、使用材料(玉米籜、蓪草紙)、作品集(16:9、9:16)、影片(16:9、9:16)、課程

第二次：

介面所有文字使用繁體中文

第三次：

作品典藏的頁面上加上一個查看所有作品的按鈕，按下後可以看到所有作品，並可以選擇查看全部或只看到玉米籜或蓪草紙。

第四次：

 在動態敘事的頁面上增加查看所有敍事作品，按下後可看到所有敍事作品，可以選擇玉米籜或蓪草紙

畫面設計：

1.主畫面


2.作品典藏


3.動態敍事

滙出程式碼：
1.主畫面

  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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
<!DOCTYPE html>

<html class="light" lang="zh-Hant"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>The Tactile Manuscript | 觸感手稿 - 匠人藝術</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;700&amp;family=Manrope:wght@300;400;600&amp;display=swap" rel="stylesheet"/>
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    "colors": {
                        "on-tertiary-fixed-variant": "#3f4a35",
                        "primary": "#566037",
                        "on-secondary-fixed-variant": "#474747",
                        "surface-variant": "#e4e2dd",
                        "on-secondary-fixed": "#1b1c1c",
                        "outline": "#77786d",
                        "surface-container": "#f0eee9",
                        "on-tertiary-container": "#f9ffec",
                        "primary-container": "#6e794e",
                        "on-tertiary-fixed": "#141e0c",
                        "secondary": "#5f5e5e",
                        "inverse-on-surface": "#f2f1ec",
                        "error": "#ba1a1a",
                        "on-background": "#1b1c19",
                        "on-primary-fixed-variant": "#404b24",
                        "surface-container-lowest": "#ffffff",
                        "secondary-fixed": "#e4e2e1",
                        "outline-variant": "#c7c7bb",
                        "on-tertiary": "#ffffff",
                        "on-surface": "#1b1c19",
                        "tertiary-fixed": "#dae7c9",
                        "on-error": "#ffffff",
                        "surface-bright": "#fbf9f4",
                        "surface-container-highest": "#e4e2dd",
                        "on-secondary": "#ffffff",
                        "on-primary-container": "#fbffe5",
                        "surface-container-low": "#f5f3ee",
                        "on-surface-variant": "#46483e",
                        "primary-fixed-dim": "#c0cc9a",
                        "tertiary-fixed-dim": "#becbae",
                        "surface-tint": "#586339",
                        "surface-container-high": "#eae8e3",
                        "background": "#fbf9f4",
                        "tertiary-container": "#6c7960",
                        "on-primary": "#ffffff",
                        "on-secondary-container": "#656464",
                        "inverse-surface": "#30312e",
                        "tertiary": "#546049",
                        "secondary-container": "#e4e2e1",
                        "surface": "#fbf9f4",
                        "error-container": "#ffdad6",
                        "secondary-fixed-dim": "#c8c6c6",
                        "primary-fixed": "#dce8b4",
                        "on-primary-fixed": "#161f00",
                        "surface-dim": "#dbdad5",
                        "on-error-container": "#93000a",
                        "inverse-primary": "#c0cc9a"
                    },
                    "borderRadius": {
                        "DEFAULT": "0.125rem",
                        "lg": "0.25rem",
                        "xl": "0.5rem",
                        "full": "0.75rem"
                    },
                    "fontFamily": {
                        "headline": ["Noto Serif TC", "serif"],
                        "body": ["Manrope", "sans-serif"],
                        "label": ["Manrope", "sans-serif"]
                    }
                },
            },
        }
    </script>
<style>body {
    background-color: #fbf9f4;
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuCaO77ZB2_sjeQsdeJJZhcinVGLh8CmbZJ4FZWDFIqtbrWNrvJ-uDE_fs5i7m4QPc8GYaREP8ABpUNE7k2ypefSXvuIbuu6XigjGzCI-tv7EKeJhGOG7raSEG6rQE0r2zoIrUPkvkf5CjEJQTyXQ4kdv1gpAkwqvN6PjHfWCdPBK46W3kL4audwKf37Qo7xMFtmA3rVUeybPOOLI0xv3bu8-8uPJwMTWCCmaspYcFcFhby0PbAN1IWIEi5LCOAHTUQv35CvLC3DYFs)
    }
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24
    }
.video-overlay {
    background: linear-gradient(135deg, rgba(86, 96, 55, 0.2) 0%, rgba(110, 121, 78, 0.1) 100%)
    }</style>
</head>
<body class="font-body text-on-surface selection:bg-primary-fixed selection:text-on-primary-fixed">
<!-- TopNavBar -->
<nav class="fixed top-0 w-full z-50 bg-[#fbf9f4]/80 dark:bg-stone-950/80 backdrop-blur-md">
<div class="flex justify-between items-center px-6 md:px-12 py-6 max-w-screen-2xl mx-auto">
<div class="font-serif text-2xl font-bold text-[#1b1c19] dark:text-[#fbf9f4] tracking-tight">The Tactile Manuscript</div>
<!-- Mobile Menu Toggle (Hidden on large) -->
<div class="md:hidden">
<span class="material-symbols-outlined text-primary">menu</span>
</div>
<!-- Desktop Links -->
<div class="hidden md:flex items-center gap-10">
<a class="font-sans tracking-wide text-sm text-[#566037] dark:text-[#7A825E] border-b border-[#566037]/20 pb-1 hover:opacity-100 transition-all duration-300" href="#bio">關於匠人</a>
<a class="font-sans tracking-wide text-sm text-[#5f5e5e] dark:text-[#eae8e3] opacity-80 hover:opacity-100 hover:text-[#566037] transition-all duration-300" href="#materials">原始素材</a>
<a class="font-sans tracking-wide text-sm text-[#5f5e5e] dark:text-[#eae8e3] opacity-80 hover:opacity-100 hover:text-[#566037] transition-all duration-300" href="#gallery">作品典藏</a>
<a class="font-sans tracking-wide text-sm text-[#5f5e5e] dark:text-[#eae8e3] opacity-80 hover:opacity-100 hover:text-[#566037] transition-all duration-300" href="#videos">動態敘事</a>
<a class="font-sans tracking-wide text-sm text-[#5f5e5e] dark:text-[#eae8e3] opacity-80 hover:opacity-100 hover:text-[#566037] transition-all duration-300" href="#workshops">預約課程</a>
<button class="bg-primary text-on-primary px-8 py-2.5 rounded-full text-sm font-semibold tracking-wider active:scale-95 duration-200">諮詢聯絡</button>
</div>
</div>
</nav>
<main class="pt-24">
<!-- Hero Section -->
<section class="px-6 md:px-12 mb-32">
<div class="relative w-full h-[870px] overflow-hidden rounded-xl">
<img class="w-full h-full object-cover" data-alt="Close-up of an artisan's hands meticulously working with natural fibers in a sun-drenched traditional workshop with soft atmospheric dust motes." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAiOJeWJOZWidUUEYOL2xqngC5Cj1Kh-0RHOjH2kbDyYXwTBn22VwjxPBAA63ao9wvK8S7akLLwcIwzklOPNBD_0X5hQL613PfvnniwzNfZJPqo_XRqZrakFoDRz12SwY0TvN0LuDxEQk9Y9syuNZEc_wAmtgF3xitw1Nq3Mr-jZiyEV7skEzEjCvlFhFEDISrsfIDHYk5ifvq1fj4HegAHq_1of7dqSfsTvHGbbQt3wCRGvwOy5fjKvTyjojP3Bjkg8xgyMVkHjss"/>
<div class="absolute inset-0 bg-black/20 flex flex-col justify-end p-12 md:p-24">
<h1 class="font-headline text-white text-5xl md:text-7xl italic leading-tight max-w-4xl">
                        在指尖的起伏間，<br/>聽見纖維的呼吸。
                    </h1>
<p class="text-white/80 font-body text-lg mt-6 max-w-lg tracking-wide">
                        以雙手重拾被遺忘的溫度，將自然的韌性織入現代生活的敘事中。
                    </p>
</div>
</div>
</section>
<!-- Introduction (Bio & Philosophy) -->
<section class="px-6 md:px-12 mb-32 max-w-screen-xl mx-auto flex flex-col md:flex-row gap-20 items-center" id="bio">
<div class="w-full md:w-1/2">
<span class="font-label text-primary text-sm uppercase tracking-[0.3em] block mb-6">關於匠人 / THE ARTISAN</span>
<h2 class="font-headline text-4xl md:text-5xl text-on-background mb-8 leading-snug">沈靜而堅韌的藝術實踐</h2>
<div class="space-y-6 text-on-surface-variant leading-relaxed">
<p>
                        在工業化浪潮的喧囂中，我選擇回歸土地。從事工藝設計二十載，我深信真正的奢華不在於材料的昂貴，而在於時間與雙手賦予作品的靈魂。
                    </p>
<p>
                        我的創作核心圍繞著「共生」。從採集植物到化為紙與織物，這是一個與自然對話的過程。每一道褶皺都是歲月的紋理，每一根纖維都承載著大地的故事。
                    </p>
</div>
</div>
<div class="w-full md:w-1/2 aspect-[4/5] bg-surface-container-high rounded-xl overflow-hidden shadow-sm">
<img class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700" data-alt="Artisan portrait in a minimalist studio setting, surrounded by natural paper samples and traditional tools, soft side lighting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA60zJRcA-IL0J8p59EaoG5HdxxBSBS5-RjWYXXOjz3-6Qz5q-CpESVSIOvqb-Bb4AYPTwZbH0WVs_EpXi2_9IRMkqexlMc0x1Nx5cM4UKYh2ulzly-3QFJTfcgGTIRa8PdDkG8aJZhWakvoqVGqoXG9hvd8DfPTqusNexsy615UwOsFrmmowS818ub1XZUMo3R1rHPkHlZ2Kqga_VheC145W50T6BoI3dFmkbjK44IGqe-0JEr7oIFP8c6zbnGCfd6IvEoWHqbQqU"/>
</div>
</section>
<!-- Materials Section -->
<section class="px-6 md:px-12 py-32 bg-surface-container-low" id="materials">
<div class="max-w-screen-2xl mx-auto">
<div class="text-center mb-24">
<h2 class="font-headline text-4xl italic">萬物皆有靈：素材之詩</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<!-- Material 1 -->
<div class="bg-surface-container-lowest p-12 rounded-xl flex flex-col md:flex-row gap-10 items-center">
<div class="w-full md:w-1/2 aspect-square rounded-full overflow-hidden border-8 border-surface-container">
<img class="w-full h-full object-cover" data-alt="Macro photography of dried corn husk fibers showing intricate natural textures and warm golden tones." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAU_PJF0OiH4GVcGqEEZR3WO61XZez8lVMDcEaC6IpPRJgEoClkR30NAROeqenzvLjfcyo-u_sO9l0fhA0_NB9IZY5ODtP8C3W8mLf1HHMy7uZikWsR3aR8AHWIV6T_zx-oa_MmD1RCUoWcvlJKLc1IbKzBJEFtP5RRqmGSWNem8_pLkLYmixJWUN7ybUbKizuugUaob7ynQI_JT26lQ927fc6Gsg7J08An-opxKgnL-Bz3T0QqtdKFaTAx3V5BVVdXq9d1UVZpeAw"/>
</div>
<div class="w-full md:w-1/2">
<h3 class="font-headline text-2xl mb-4">玉米籜 (Corn Husk)</h3>
<p class="text-on-surface-variant text-sm leading-relaxed mb-6">
                                被大眾視為農餘的玉米籜，擁有極佳的韌性與自然的波浪形理。經過煮製與漂洗，它能呈現出如羊皮紙般迷人的半透明感。
                            </p>
<span class="font-label text-xs uppercase tracking-widest text-primary/60">觸感：柔韌、乾燥、略帶磨砂</span>
</div>
</div>
<!-- Material 2 -->
<div class="bg-surface-container-lowest p-12 rounded-xl flex flex-col md:flex-row-reverse gap-10 items-center">
<div class="w-full md:w-1/2 aspect-square rounded-full overflow-hidden border-8 border-surface-container">
<img class="w-full h-full object-cover" data-alt="Pure white pith paper sheets stacked neatly, showing soft velvet-like surface and delicate organic edges." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDINWTTNxCfa9jn1wTN6dUzdmhMNm7EfJP5_tQbCD8_T3Ugv96Qldmon484k4Sm87Ig_wM4CIuOm1YKbpxsaP0Nb2Nl4JXwkgHalZjacI4tvnPIVKxyEMJqwK2ftsS2LnBK-4ODV3IHEajuhm6fKK7I79GFyzcsOUilhZQjNYxk2JK0_OR_bD09JjpvO1hpzmv8zkJZS4Sxkty2UYG72PCOvMRBuorMPBz3goA76vkX4jCPvWVgzRnX0NR1gob8yR25yD4OkRDwfIU"/>
</div>
<div class="w-full md:w-1/2">
<h3 class="font-headline text-2xl mb-4">蓪草紙 (Pith Paper)</h3>
<p class="text-on-surface-variant text-sm leading-relaxed mb-6">
                                這並非真正的紙，而是取自蓪草莖部的髓心。它潔白如雪，質地輕盈如羽，吸墨性極佳，是傳承千年的「天然保鮮膜」。
                            </p>
<span class="font-label text-xs uppercase tracking-widest text-primary/60">觸感：絲絨、輕盈、極度細膩</span>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Gallery (Magazine Style) -->
<section class="px-6 md:px-12 py-32 max-w-screen-2xl mx-auto" id="gallery">
<div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
<h2 class="font-headline text-5xl">作品集 <span class="font-sans text-lg italic opacity-40 ml-4">時光典藏</span></h2>
<p class="max-w-md text-on-surface-variant text-right hidden md:block">每一件作品都是一次對媒材極限的探索，收錄於此，作為時間的見證。</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 auto-rows-[250px]">
<!-- Item 1: Wide -->
<div class="col-span-2 row-span-2 group overflow-hidden rounded-lg bg-surface-container">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Minimalist modern ceramic piece wrapped in delicate handmade pith paper, soft lighting on a wooden plinth." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAPPjx4V3gcLZoidw21pAGf9fMD_M47HolmnbgR8PvPP2SVxvWHDiTuONE4yhva9v138oKWKJUFWuDvPDqdmC5_3USCk_xQxccgukiZg9maVXRroy1---CznOywu24EJI9uGluBI4vu87cbTFtUFBk1g2PU_--swu7HXm89iEiwppax3-qe0BqS2Lc03tx-POy8GgBBPdUnjD1rk8TX0IoMZCPo75WH_ghypKZ0u8iFRWO48KWxaVjMbQrWuCeIMH-MAa6GcH41WR8"/>
</div>
<!-- Item 2: Tall -->
<div class="col-span-1 row-span-3 group overflow-hidden rounded-lg bg-surface-container">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="A long vertical wall hanging made of woven corn husks, creating a rhythmic pattern of light and shadow." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCUHbZDNlrysiMfkrgA3g9XoWpdahk7tLcDXYtAxTuhoqWV7mlVEHEZ7XQdQv4boUlXnZyu_-Q2m4n6_qj3GV5PGGlLTGGQHBByv2pNLp9q1ooQOwr_3O8o--f3YV_2HFf0xdgy65QWF-Ke0UmUmAxqBT20oNwqhLSO41129_uiMcCb_nh4aJCwHbR2cDgQQz3oNPdCYfhDVRIGLOUo5SibO442Ndrl8WghonVGjARSAuGJ5OQ_it0L9kVKeF3zj-uRN77fXfp2-4A"/>
</div>
<!-- Item 3: Standard -->
<div class="col-span-1 row-span-2 group overflow-hidden rounded-lg bg-surface-container">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Abstract sculpture using white fibrous material, organic forms resembling sea coral or bone." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCoCaNkUQLS7dn5-BiHxzFvWGTJMBMb0eMnr-0BnNS-7j2EHBXIsvSOGSySQUg6Wwg6Cqgi2bGRPLaASm3HxRfI7NAJlQbj1XXFKiq9B892KYOku9MfRWmreqyGXwOvlIfy0mEOEdFniS0xN1V3Qj9kFB3zOaUYdkN8i8rRtN5d8AcSbaFILkte0aHoK5rEa-2xzE8eY2PnHgMU69UEkcUkkv-Op1emLpQmtMs15djMIC_kDSJrfejvgfHZy5Fk0DGsS_5mcThTZZA"/>
</div>
<!-- Item 4: Small -->
<div class="col-span-1 row-span-1 group overflow-hidden rounded-lg bg-surface-container">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Close-up of artisan tools on a messy, inspired workbench with scraps of natural fiber." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBvOXJhC7Is6bubVt84N6SlU6q2Vz2DCk2jfbTAFgcHocLjwN_43lIijjH-p8UDS6phoCUsZks_MNSHAORsVREvJCpb6Ib7Q4SSqCTbQZdqQKiluV1GPQ5ZuGX3O2L6XPU4hTrrTiou_jRC1r0NMK91Yn0G27eMA-ZnKIN7sgVNDShabRkhuhuxbEIz35YwlAQouiYIJSGImM2cWBCGqZe0yG53BVp_I41JkwkS5pLbFoF78aEVzqlqnJ8_lk6wMRQK8wAuaXCHIUg"/>
</div>
<!-- Item 5: Small -->
<div class="col-span-1 row-span-1 group overflow-hidden rounded-lg bg-surface-container">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Delicate hand-bound notebook with a textured paper cover and organic string binding." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCqNYLx1wIW1sKFTtaGagBoyBtjyvlNqlf3RpbRaQIhqkRDetxAyyTdPzonwvycgy7-JrLbBm59wCHnWJU4Xjt4BtqBkwaU_reCoq_aJ3PKGvc3SG1m87WnFwGuqueaCvTZiUsy-guWXBGf46l0ex1-byOURaps_KDKShHVvhKDGwuebNJgCNC9lTT7yWkCCA59Wy-lZ8KQ6_8Fv3v7XZt7hoM-7xGfFWPt_zs_-EvxaKfB-SRuXELyprhb7rtVneyQst6vDnmwQpQ"/>
</div>
<!-- Item 6: Wide -->
<div class="col-span-2 row-span-1 group overflow-hidden rounded-lg bg-surface-container">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="A light-filled interior featuring a large artisan-made translucent screen as a focal point." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB1l1ovyxUy9ecLO1D1VfDKQfozxZphyq6wmuRetcqR2hyO1XvQKN_-qXb07TVbq-2pRa71V5C1-hH6dQ7IADFX91Ia3JNmbiy-fAyG-mhddG1abvXWZHgGbfhKS3lVLbDsmHLklWQCF_Iibn26R_J10pZrIADFoFmu8FtT_7JcYLuAh0KnSdlTzurvukBVIMKrv6PXCiRG4E38vSXB9-01ThJxBtHLM2ShfbDp0N7Ffy4aRaVw4LHHufkyDTk79yWwp4E3gNcqmr4"/>
</div>
</div><div class="flex justify-center mt-16">
<button class="px-12 py-3 border border-on-surface/20 rounded-full text-sm font-semibold tracking-widest hover:bg-on-background hover:text-white transition-all duration-300 active:scale-95">
        查看所有作品
    </button>
</div>
</section>
<!-- Video Showcase -->
<section class="px-6 md:px-12 py-32 bg-stone-900 text-white" id="videos">
<div class="max-w-screen-2xl mx-auto">
<h2 class="font-headline text-4xl mb-16 text-center italic">動態敘事：手感與光影</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Main Video (16:9) -->
<div class="md:col-span-2 relative aspect-video rounded-xl overflow-hidden group cursor-pointer">
<img class="w-full h-full object-cover opacity-60 group-hover:scale-105 transition-all duration-1000" data-alt="Artistic film still showing the rhythmic motion of hands weaving through light beams in a dark studio." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCEOMpd-mmQXblLvbxs2NsEYKfMcaW0PJyMaUrkZKiCYvKnxcYW0k_mC3ioaE1bAgzWBUtUTVihx3YenK6kEU382nySScxrzR6ewOHI45HSrF5B2brErAni3rU5qFnP6p87LDYiGkQCpjTSpseq5I1ZklpNgpDdWGsQxgiTDX_p5VPGZXWRrTQ3-NbsOQAF6c-ZxZl-SU-3hEBiNH7dMU9msExqOxByCJUAVx-AEG7rdeq6We441_KHk6894yZhxV53zWihGqMs-uc"/>
<div class="absolute inset-0 flex items-center justify-center video-overlay">
<div class="w-20 h-20 bg-primary/90 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
<span class="material-symbols-outlined text-4xl text-white">play_arrow</span>
</div>
</div>
<div class="absolute bottom-8 left-8">
<span class="text-xs uppercase tracking-widest opacity-60">專題紀錄</span>
<h4 class="text-xl font-headline italic mt-1">「尋根：蓪草的呼吸」</h4>
</div>
</div>
<!-- Side Video (9:16) -->
<div class="relative aspect-[9/16] rounded-xl overflow-hidden group cursor-pointer bg-secondary-container/10">
<img class="w-full h-full object-cover opacity-50 group-hover:scale-105 transition-all duration-1000" data-alt="Portrait video still of water ripples on a traditional paper dyeing basin." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCr6d0qr2i5fMa9RyGue-pquECSnfFnM96dbxpD6FCKtYvUxwaANgZvMwnmQL69pNe1syw_5w5_v-dotKbraAYZ979NadyYb_cZ1aFogk0VJnrBaKFCfGqKeVbL9nUKGeOSUqxxojg4O0TJUb2X4llmcL2okpwtbXpbtmRTswKcZNSv8LbpWqQxos84Bv02rAhum1UxldnygE8RBbPrNk9s2EraRTbWBTweDsS68Ce-stk8E3OjQ_Azt4KvVFV6NoiOneWbFgoFbnk"/>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-16 h-16 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center border border-white/20">
<span class="material-symbols-outlined text-3xl text-white">play_arrow</span>
</div>
</div>
<div class="absolute bottom-8 left-8">
<span class="text-xs uppercase tracking-widest opacity-60">短片記事</span>
<h4 class="text-lg font-headline italic mt-1">纖維重塑紀錄</h4>
</div>
</div>
</div>
<div class="flex justify-center mt-16">
<button class="px-12 py-3 border border-white/20 rounded-full text-sm font-semibold tracking-widest hover:bg-white hover:text-stone-900 transition-all duration-300 active:scale-95">
        查看所有敘事作品
    </button>
</div></div>
</section>
<!-- Workshops (Courses) -->
<section class="px-6 md:px-12 py-40 max-w-screen-xl mx-auto" id="workshops">
<div class="text-center mb-24">
<span class="font-label text-primary text-sm uppercase tracking-[0.4em] block mb-4">體驗傳承 / WORKSHOPS</span>
<h2 class="font-headline text-5xl">與匠人共度一段時光</h2>
</div>
<div class="space-y-1 w-full">
<!-- Course Item 1 -->
<div class="group py-12 flex flex-col md:flex-row justify-between items-center bg-surface-container-low px-12 rounded-xl mb-6 hover:bg-white transition-colors duration-300">
<div class="text-center md:text-left mb-6 md:mb-0">
<span class="font-label text-xs text-primary font-bold block mb-2 tracking-widest">2024 / 09 / 15</span>
<h3 class="font-headline text-2xl">玉米籜編織：光影燈罩實作</h3>
<p class="text-on-surface-variant text-sm mt-2">學習如何處理農餘材料，轉化為溫潤的家居燈飾。</p>
</div>
<div class="flex items-center gap-12">
<span class="font-serif italic text-2xl text-on-surface/40">NT$ 3,200</span>
<button class="px-10 py-3 bg-on-background text-white rounded-full text-sm font-semibold hover:bg-primary transition-colors">立即預約</button>
</div>
</div>
<!-- Course Item 2 -->
<div class="group py-12 flex flex-col md:flex-row justify-between items-center bg-surface-container-low px-12 rounded-xl mb-6 hover:bg-white transition-colors duration-300">
<div class="text-center md:text-left mb-6 md:mb-0">
<span class="font-label text-xs text-primary font-bold block mb-2 tracking-widest">2024 / 10 / 02</span>
<h3 class="font-headline text-2xl">蓪草造花：永不凋零的姿態</h3>
<p class="text-on-surface-variant text-sm mt-2">揭開清朝貢品紙花的秘密，親手捏塑出如羽毛般的瓣片。</p>
</div>
<div class="flex items-center gap-12">
<span class="font-serif italic text-2xl text-on-surface/40">NT$ 4,500</span>
<button class="px-10 py-3 bg-on-background text-white rounded-full text-sm font-semibold hover:bg-primary transition-colors">立即預約</button>
</div>
</div>
<!-- Course Item 3 -->
<div class="group py-12 flex flex-col md:flex-row justify-between items-center bg-surface-container-low px-12 rounded-xl hover:bg-white transition-colors duration-300">
<div class="text-center md:text-left mb-6 md:mb-0">
<span class="font-label text-xs text-primary font-bold block mb-2 tracking-widest">2024 / 11 / 11</span>
<h3 class="font-headline text-2xl">手工造紙：大地纖維的重組</h3>
<p class="text-on-surface-variant text-sm mt-2">從構樹到成品，體驗一張紙最完整的生命旅程。</p>
</div>
<div class="flex items-center gap-12">
<span class="font-serif italic text-2xl text-on-surface/40">NT$ 2,800</span>
<button class="px-10 py-3 bg-on-background text-white rounded-full text-sm font-semibold hover:bg-primary transition-colors">立即預約</button>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="w-full py-24 bg-[#eae8e3] dark:bg-stone-900 px-12">
<div class="flex flex-col md:flex-row justify-between items-start gap-12 max-w-screen-2xl mx-auto">
<div class="space-y-6">
<div class="font-serif text-xl text-[#1b1c19] dark:text-[#fbf9f4] font-bold">The Tactile Manuscript</div>
<p class="font-sans text-xs uppercase tracking-[0.2em] text-[#5f5e5e] dark:text-[#eae8e3] max-w-xs">
                    致力於保存瀕臨消失的工藝手法，以當代美學轉化傳統質地。
                </p>
</div>
<div class="flex flex-col md:flex-row gap-16">
<div class="space-y-4">
<h5 class="font-label text-[10px] uppercase tracking-widest text-primary font-bold">社群聯繫</h5>
<ul class="space-y-3">
<li><a class="font-sans text-xs uppercase tracking-[0.2em] text-[#5f5e5e] dark:text-[#eae8e3] hover:underline decoration-[#566037]/30 underline-offset-8" href="#">Instagram 專頁</a></li>
<li><a class="font-sans text-xs uppercase tracking-[0.2em] text-[#5f5e5e] dark:text-[#eae8e3] hover:underline decoration-[#566037]/30 underline-offset-8" href="#">Pinterest 靈感</a></li>
<li><a class="font-sans text-xs uppercase tracking-[0.2em] text-[#5f5e5e] dark:text-[#eae8e3] hover:underline decoration-[#566037]/30 underline-offset-8" href="#">電子郵件</a></li>
</ul>
</div>
<div class="space-y-4">
<h5 class="font-label text-[10px] uppercase tracking-widest text-primary font-bold">工作室位置</h5>
<p class="font-sans text-xs uppercase tracking-[0.2em] text-[#5f5e5e] dark:text-[#eae8e3]">
                        台北市大同區迪化街二段<br/>（預約制制）
                    </p>
</div>
</div>
</div>
<div class="mt-24 pt-12 border-t border-black/5 flex flex-col md:flex-row justify-between items-center gap-6">
<p class="font-sans text-[10px] uppercase tracking-[0.2em] text-[#5f5e5e] dark:text-[#eae8e3]">© 2024 觸感手稿 The Tactile Manuscript. 為現代典藏而生的手工藝術。</p>
<div class="flex gap-8">
<a class="font-sans text-[10px] uppercase tracking-[0.2em] text-[#5f5e5e] dark:text-[#eae8e3]" href="#">隱私權政策</a>
<a class="font-sans text-[10px] uppercase tracking-[0.2em] text-[#5f5e5e] dark:text-[#eae8e3]" href="#">使用條款</a>
</div>
</div>
</footer>
</body></html>

2.作品典藏

  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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>

<html lang="zh-Hant"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>作品典藏 / The Archive - ARTISAN</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@300;400;700&amp;family=Manrope:wght@300;400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            "colors": {
                    "surface-tint": "#586339",
                    "outline": "#77786d",
                    "on-primary-fixed": "#161f00",
                    "outline-variant": "#c7c7bb",
                    "on-background": "#1b1c19",
                    "secondary-container": "#e4e2e1",
                    "surface-container-low": "#f5f3ee",
                    "on-secondary-fixed-variant": "#474747",
                    "error-container": "#ffdad6",
                    "error": "#ba1a1a",
                    "surface-bright": "#fbf9f4",
                    "on-error-container": "#93000a",
                    "on-surface": "#1b1c19",
                    "tertiary-fixed-dim": "#becbae",
                    "surface-dim": "#dbdad5",
                    "primary-fixed": "#dce8b4",
                    "on-tertiary": "#ffffff",
                    "secondary-fixed-dim": "#c8c6c6",
                    "primary-fixed-dim": "#c0cc9a",
                    "on-secondary-fixed": "#1b1c1c",
                    "secondary-fixed": "#e4e2e1",
                    "on-primary-fixed-variant": "#404b24",
                    "on-secondary-container": "#656464",
                    "tertiary": "#546049",
                    "on-primary": "#ffffff",
                    "on-tertiary-fixed-variant": "#3f4a35",
                    "secondary": "#5f5e5e",
                    "on-surface-variant": "#46483e",
                    "surface-container-lowest": "#ffffff",
                    "surface": "#fbf9f4",
                    "background": "#fbf9f4",
                    "inverse-on-surface": "#f2f1ec",
                    "inverse-surface": "#30312e",
                    "surface-container-highest": "#e4e2dd",
                    "tertiary-container": "#6c7960",
                    "tertiary-fixed": "#dae7c9",
                    "inverse-primary": "#c0cc9a",
                    "on-tertiary-fixed": "#141e0c",
                    "on-secondary": "#ffffff",
                    "on-primary-container": "#fbffe5",
                    "primary": "#566037",
                    "surface-container": "#f0eee9",
                    "surface-variant": "#e4e2dd",
                    "surface-container-high": "#eae8e3",
                    "primary-container": "#6e794e",
                    "on-tertiary-container": "#f9ffec",
                    "on-error": "#ffffff"
            },
            "borderRadius": {
                    "DEFAULT": "0.125rem",
                    "lg": "0.25rem",
                    "xl": "0.5rem",
                    "full": "0.75rem"
            },
            "fontFamily": {
                    "headline": ["Noto Serif"],
                    "body": ["Manrope"],
                    "label": ["Manrope"]
            }
          },
        },
      }
    </script>
<style>.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24
    }
body {
    background-color: #fbf9f4;
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuDGwlcDpGfUq9p_ZCq99F0YcXGWtdmcmMkjRLmwXsBJqIl4EAuzqAAPR9sLoYFo2C7aLSKXTWX7TG9thyU4ms4lIc6Pg0vnDPx7GL947d_SFudwIEyx_m6aHwwTlvbfHnrcQF4MuFHABn2yjTo8WtGArKbymZDSDXLXVQt6D14lEnKD1muVXwaI-MR0bjd_tlbeYsW9QleNx8tKH9OvjBDQLQOlEnetMuvEzu1zJIAVqr0WCzIBe19UXCTgTam0aSQ3f-FG0AOufVs)
    }
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")
    }</style>
</head>
<body class="font-body text-on-background selection:bg-primary-fixed selection:text-on-primary-fixed">
<div class="grain-overlay"></div>
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 bg-[#fbf9f4]/80 dark:bg-[#1b1c19]/80 backdrop-blur-md">
<div class="flex justify-between items-center px-12 py-6 max-w-screen-2xl mx-auto">
<a class="text-2xl font-serif tracking-[0.2em] text-[#1b1c19] dark:text-[#fbf9f4]" href="#">ARTISAN</a>
<div class="hidden md:flex items-center gap-10 font-['Noto_Serif'] font-light tracking-wide">
<a class="text-[#5f5e5e] dark:text-[#eae8e3] hover:text-[#1b1c19] transition-colors" href="#">Bio</a>
<a class="text-[#5f5e5e] dark:text-[#eae8e3] hover:text-[#1b1c19] transition-colors" href="#">Materials</a>
<a class="text-[#566037] dark:text-[#7A825E] border-b-2 border-[#566037] pb-1" href="#">Gallery</a>
<a class="text-[#5f5e5e] dark:text-[#eae8e3] hover:text-[#1b1c19] transition-colors" href="#">Videos</a>
<a class="text-[#5f5e5e] dark:text-[#eae8e3] hover:text-[#1b1c19] transition-colors" href="#">Workshops</a>
</div>
<button class="px-8 py-2 rounded-full bg-primary text-on-primary font-label text-sm tracking-widest hover:opacity-70 transition-opacity duration-400 active:scale-95 ease-in-out">
                Inquire
            </button>
</div>
</nav>
<main class="pt-40 pb-24 px-8 md:px-12 max-w-screen-2xl mx-auto">
<!-- Header -->
<header class="mb-20 text-center md:text-left">
<h1 class="font-headline text-5xl md:text-7xl font-light text-on-background tracking-tight mb-4">
                作品典藏 / <span class="italic text-secondary">The Archive</span>
</h1>
<p class="font-label text-sm uppercase tracking-[0.3em] text-on-surface-variant max-w-xl leading-relaxed">
                以自然之物轉化為永恆的藝術，紀錄每一件由手心溫熱催生的造物。
            </p>
</header>
<!-- Filter Bar -->
<div class="flex flex-wrap items-center justify-center md:justify-start gap-8 mb-16 border-b border-outline-variant/15 pb-6">
<button class="font-label text-sm tracking-widest text-primary font-bold relative after:content-[''] after:absolute after:bottom-[-25px] after:left-0 after:w-full after:h-[2px] after:bg-primary">
                全部
            </button>
<button class="font-label text-sm tracking-widest text-secondary hover:text-on-background transition-colors">
                玉米籜
            </button>
<button class="font-label text-sm tracking-widest text-secondary hover:text-on-background transition-colors">
                蓪草紙
            </button>
<div class="ml-auto hidden lg:flex items-center gap-4 text-on-surface-variant">
<span class="material-symbols-outlined text-lg">filter_list</span>
<span class="font-label text-xs uppercase tracking-widest">排序：最新上傳</span>
</div>
</div>
<!-- Works Grid -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-y-16 md:gap-12 items-start">
<!-- Item 1: Large Vertical (9:16 approx) -->
<div class="md:col-span-4 group">
<div class="bg-surface-container-lowest overflow-hidden rounded-lg aspect-[3/4] mb-6">
<img alt="Pith paper sculpture" class="w-full h-full object-cover transition-transform duration-[600ms] group-hover:scale-105" data-alt="Intricate white pith paper flowers with translucent petals arranged as a delicate sculptural piece in soft daylight" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA-Fxt5h7ooE_NjebU1ZLrjVc1YKzPJ1PKW1b3cIdUlD56j1nG_jvXRjv8VPgX0bS93IeGtpGk3LcHDyn1e5nTui19VW8epnFXOfbQ9oEvqQobUejtlmWVOIgfPNdJpI0qsvwPRjkmHq9fEizgamnP64UaL0CrT0MI9UEnm5b09XhhOvjz3Q3s5Y4PITMzWrk1lcOO9X1grjAuu1cvPTA6KNVk7oiiwiyL9QwbPrUXp7ozP6Zjh5KzosDNAApG1DCr-cECyMn0pRJE"/>
</div>
<div class="space-y-1">
<h3 class="font-headline text-xl text-on-surface">春之呼吸 ‧ 蓪草花</h3>
<p class="font-label text-xs uppercase tracking-widest text-secondary">蓪草紙 / Pith Paper</p>
</div>
</div>
<!-- Item 2: Horizontal (16:9) -->
<div class="md:col-span-8 group pt-0 md:pt-12">
<div class="bg-surface-container-lowest overflow-hidden rounded-lg aspect-video mb-6">
<img alt="Corn husk weaving" class="w-full h-full object-cover transition-transform duration-[600ms] group-hover:scale-105" data-alt="Close-up of golden woven corn husk texture with intricate braided patterns and natural organic fibers in warm lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdA9ts_WLstrZ-fqA0uruloXIYLhrc6mNyouRX3WS6xoIKfsqzbX4Rlw4oELP5MOxYD8xy5YuAOn0xD-WY-0NwgsJZkpUYIKPeh2Ba5Nh8NCCb7ShJSoOC0ktXPXTOMzZNrxrlPrcGUpzVdf_bp73Ft_j9oVzGLZaw_T-hzFoKXg1aomrSWZPaD_wF68h56z939YuiRApIfAPiT-TcH7YQoCwmGGmPAH1-KmViP_E1GB_WzqMHu0zR1wmNdL3NW4SbqH5efBplJP8"/>
</div>
<div class="space-y-1">
<h3 class="font-headline text-xl text-on-surface">大地編織系列：豐收</h3>
<p class="font-label text-xs uppercase tracking-widest text-secondary">玉米籜 / Corn Husk</p>
</div>
</div>
<!-- Item 3: Square-ish (4:5) -->
<div class="md:col-span-5 group">
<div class="bg-surface-container-lowest overflow-hidden rounded-lg aspect-[4/5] mb-6">
<img alt="Minimalist vessel" class="w-full h-full object-cover transition-transform duration-[600ms] group-hover:scale-105" data-alt="Minimalist handcrafted vessel made from natural fiber materials standing against a textured off-white washi paper background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAWtQdCzSofZ5qum0mO8jalBrx0tsjbsERMLNCremQCyoFRlMA_H1YnwtndKmqCwRVOxB83BsMAQTMrFZQS9r5i2jiwkRLX3RxK51uB8b-yBG6VX96eTvhAnWBiANIJFqfvO1F7-rt97W9vvqX9skMcmSpU1HX9K__JATDiFuiLXgyJY_pM8bRlwCwpPC41IL_cSw35ri5Jb7CXTVsWqUkRonAbJ12i_fgWND9jeBprdilfWwg6YjIlH3t4ERNhgNNvRyOoBwTcCNM"/>
</div>
<div class="space-y-1">
<h3 class="font-headline text-xl text-on-surface">靜謐之器</h3>
<p class="font-label text-xs uppercase tracking-widest text-secondary">複合媒材 / Mixed Media</p>
</div>
</div>
<!-- Item 4: Tall (9:16) -->
<div class="md:col-span-3 group self-end md:mb-12">
<div class="bg-surface-container-lowest overflow-hidden rounded-lg aspect-[2/3] mb-6">
<img alt="Dried botanical art" class="w-full h-full object-cover transition-transform duration-[600ms] group-hover:scale-105" data-alt="Macro photography of dried botanical elements and hand-pressed pith paper details showing fine organic textures and shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA7MTi5vLvUG-lAf37JFD2IhGDCZuEvxY2MrW3qU9584uiL9uScu4OMaYpK55Yde5yolBHRUuvWrvrRNTR4nE0kn55DtqzXRhCyGWSaaBV-XS93W8prsa_YkMWTrp--GdtrMHq87uEXw93166ecSQ9y9LmU6ocA9bakcr2EEBp1gO5xXY8Gg0R9xq_NLhQFt0ZCJf1huZLmrZ2p9G5YTGYchplQ-4teLCNF9ogYjl-n9t2VY-304C8mA_PKUowaEpjqdHiI_JWL39M"/>
</div>
<div class="space-y-1">
<h3 class="font-headline text-xl text-on-surface">脈絡 ‧ 序</h3>
<p class="font-label text-xs uppercase tracking-widest text-secondary">玉米籜 / Corn Husk</p>
</div>
</div>
<!-- Item 5: Large Vertical (9:16 approx) -->
<div class="md:col-span-4 group">
<div class="bg-surface-container-lowest overflow-hidden rounded-lg aspect-[3/4] mb-6">
<img alt="Traditional material process" class="w-full h-full object-cover transition-transform duration-[600ms] group-hover:scale-105" data-alt="Hands of an artisan carefully peeling pith paper from a stem in a sunlit studio filled with natural shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQeeNCp1SvTw2i6Vca1fLFFDHHtdXIU7z4vczb6Q6b8RCwBv5kElYYR06GwwE-6vBlDU4CzCGsMfmXe_SnDgyVFen0dRhSm6F9rBFTvmdhCPr-J4f5Njw628ssRsRnhAcHuOqz0Na0LxkTx8mlHofIswP421JDk3amvapl7AvUxttTRkXaZelZO62JmF4bh4_Qqxj3fF8af74n8rTohgjl83ZyrVxlVyrAySYCqiCdRZFmLd3L8H9Lm3GSIs5Z15kVwiD3kGtIDj4"/>
</div>
<div class="space-y-1">
<h3 class="font-headline text-xl text-on-surface">造物過程：生</h3>
<p class="font-label text-xs uppercase tracking-widest text-secondary">蓪草紙 / Pith Paper</p>
</div>
</div>
<!-- Item 6: Wide (21:9 approx) -->
<div class="md:col-span-12 group mt-8">
<div class="bg-surface-container-lowest overflow-hidden rounded-lg aspect-[21/9] mb-6 relative">
<img alt="Large scale installation" class="w-full h-full object-cover transition-transform duration-[600ms] group-hover:scale-105" data-alt="Wide shot of a large scale art installation made from suspended translucent pith paper sheets in a minimalist gallery space" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDooG4o2IiYAFewU1xcCVhcbfOBgWTI1DyzB_E_dc1E_xulgBjNwg6DJb1zoMU9BEiugaQKgWWeJGwO1h-Qd5vT_hZ3TF0UUpDbT50zCJmwvD_WapDbu_d7-PgyaZwYpqXV-hMJ6Evuhlb1uI7rD-Wo_8pHWcXmFw0ASmB6Fa1GdGwguMaLRvrXg0AtnXoM8HkO08RbgoNvclsOkdIdaXU4pVhKo7t5FwkHIf5G2QNpn5ZLRFk6QN21XH9O8wdsnmtbRwx2bJbZkfY"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
<div class="absolute bottom-8 left-8 text-white">
<span class="font-label text-[10px] uppercase tracking-[0.4em] mb-2 block">Featured Work</span>
<h3 class="font-headline text-3xl">浮島幻境</h3>
</div>
</div>
</div>
</div>
<!-- Pagination/Load More -->
<div class="mt-24 text-center">
<button class="inline-flex items-center gap-4 text-primary group">
<span class="font-label text-sm uppercase tracking-widest">探索更多作品 / Load More</span>
<span class="material-symbols-outlined transition-transform duration-300 group-hover:translate-x-2">arrow_right_alt</span>
</button>
</div>
</main>
<!-- Footer -->
<footer class="w-full mt-24 bg-[#eae8e3] dark:bg-[#1b1c19]">
<div class="flex flex-col md:flex-row justify-between items-center px-12 py-16 gap-8 border-t border-[#1b1c19]/5 max-w-screen-2xl mx-auto">
<div class="font-['Manrope'] text-xs uppercase tracking-[0.15em] text-[#5f5e5e] dark:text-[#eae8e3]">
                © 2024 THE TACTILE MANUSCRIPT. ALL RIGHTS RESERVED.
            </div>
<div class="flex gap-12">
<a class="font-['Manrope'] text-xs uppercase tracking-[0.15em] text-[#5f5e5e] dark:text-[#eae8e3] hover:text-[#566037] transition-colors duration-300" href="#">Instagram</a>
<a class="font-['Manrope'] text-xs uppercase tracking-[0.15em] text-[#5f5e5e] dark:text-[#eae8e3] hover:text-[#566037] transition-colors duration-300" href="#">Privacy</a>
<a class="font-['Manrope'] text-xs uppercase tracking-[0.15em] text-[#5f5e5e] dark:text-[#eae8e3] hover:text-[#566037] transition-colors duration-300" href="#">Terms</a>
</div>
</div>
</footer>
</body></html>

3.動態敍事

  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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>

<html class="light" lang="zh-Hant"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>動態敘事 - 影片典藏 | Artisan Archive</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;700&amp;family=Manrope:wght@300;400;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            "colors": {
                    "primary-fixed": "#dce8b4",
                    "outline": "#77786d",
                    "on-tertiary-fixed": "#141e0c",
                    "on-secondary-fixed": "#1b1c1c",
                    "tertiary": "#546049",
                    "surface-container-highest": "#e4e2dd",
                    "surface-container-lowest": "#ffffff",
                    "inverse-surface": "#30312e",
                    "inverse-on-surface": "#f2f1ec",
                    "surface-tint": "#586339",
                    "surface-container-low": "#f5f3ee",
                    "on-primary-fixed-variant": "#404b24",
                    "background": "#fbf9f4",
                    "error": "#ba1a1a",
                    "on-secondary-container": "#656464",
                    "on-surface": "#1b1c19",
                    "on-secondary": "#ffffff",
                    "on-error-container": "#93000a",
                    "error-container": "#ffdad6",
                    "primary": "#566037",
                    "tertiary-fixed-dim": "#becbae",
                    "surface": "#fbf9f4",
                    "on-tertiary": "#ffffff",
                    "secondary": "#5f5e5e",
                    "on-background": "#1b1c19",
                    "on-tertiary-container": "#f9ffec",
                    "on-primary": "#ffffff",
                    "on-secondary-fixed-variant": "#474747",
                    "primary-fixed-dim": "#c0cc9a",
                    "surface-container": "#f0eee9",
                    "secondary-container": "#e4e2e1",
                    "on-primary-fixed": "#161f00",
                    "surface-variant": "#e4e2dd",
                    "on-tertiary-fixed-variant": "#3f4a35",
                    "tertiary-fixed": "#dae7c9",
                    "outline-variant": "#c7c7bb",
                    "surface-bright": "#fbf9f4",
                    "secondary-fixed-dim": "#c8c6c6",
                    "on-primary-container": "#fbffe5",
                    "on-error": "#ffffff",
                    "inverse-primary": "#c0cc9a",
                    "surface-container-high": "#eae8e3",
                    "on-surface-variant": "#46483e",
                    "tertiary-container": "#6c7960",
                    "surface-dim": "#dbdad5",
                    "primary-container": "#6e794e",
                    "secondary-fixed": "#e4e2e1"
            },
            "borderRadius": {
                    "DEFAULT": "0.125rem",
                    "lg": "0.25rem",
                    "xl": "0.5rem",
                    "full": "0.75rem"
            },
            "fontFamily": {
                    "headline": ["Noto Serif TC", "serif"],
                    "body": ["Manrope", "sans-serif"],
                    "label": ["Manrope", "sans-serif"]
            }
          },
        },
      }
    </script>
<style>
        body { font-family: 'Manrope', sans-serif; background-color: #fbf9f4; }
        h1, h2, h3 { font-family: 'Noto Serif TC', serif; }
        .washi-grain {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.03;
            pointer-events: none;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
    </style>
</head>
<body class="bg-background text-on-surface selection:bg-primary-fixed">
<div class="fixed inset-0 washi-grain z-0"></div>
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 bg-[#fbf9f4]/80 dark:bg-stone-950/80 backdrop-blur-md">
<div class="flex justify-between items-center px-12 py-6 max-w-screen-2xl mx-auto">
<div class="font-serif text-2xl font-light tracking-widest text-[#1b1c19] dark:text-[#fbf9f4]">
                Artisan Archive
            </div>
<div class="hidden md:flex gap-8 items-center">
<a class="text-stone-500 dark:text-stone-400 font-sans uppercase text-xs tracking-widest hover:text-[#566037] transition-colors duration-400" href="#">Bio</a>
<a class="text-stone-500 dark:text-stone-400 font-sans uppercase text-xs tracking-widest hover:text-[#566037] transition-colors duration-400" href="#">Materials</a>
<a class="text-stone-500 dark:text-stone-400 font-sans uppercase text-xs tracking-widest hover:text-[#566037] transition-colors duration-400" href="#">Gallery</a>
<a class="text-[#566037] dark:text-[#a3ad82] border-b border-[#566037]/20 pb-1 font-serif text-lg tracking-tight" href="#">Videos</a>
<a class="text-stone-500 dark:text-stone-400 font-sans uppercase text-xs tracking-widest hover:text-[#566037] transition-colors duration-400" href="#">Workshops</a>
</div>
<button class="bg-primary text-on-primary px-8 py-2 rounded-full font-label text-sm tracking-widest uppercase transition-all hover:bg-primary-container">
                Inquire
            </button>
</div>
</nav>
<main class="relative z-10 pt-32 pb-24 px-6 md:px-12 max-w-screen-2xl mx-auto">
<!-- Header Section -->
<header class="mb-16">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
<div class="max-w-2xl">
<span class="font-label text-xs tracking-[0.3em] uppercase text-tertiary mb-4 block">Visual Archive</span>
<h1 class="text-5xl md:text-7xl font-headline font-light tracking-tight text-on-surface leading-tight">
                        動態敘事 — <br/>影片典藏
                    </h1>
</div>
<div class="max-w-xs">
<p class="font-body text-sm text-on-surface-variant leading-relaxed italic">
                        "於靜謐中尋找動態的靈魂，記錄工藝在指尖流淌的每一瞬。"
                    </p>
</div>
</div>
</header>
<!-- Filter Bar -->
<div class="mb-12 border-b border-outline-variant/15 pb-4 flex flex-wrap gap-8 items-center">
<button class="font-label text-sm tracking-widest uppercase text-primary border-b-2 border-primary pb-4 -mb-[18px]">全部</button>
<button class="font-label text-sm tracking-widest uppercase text-on-surface-variant hover:text-primary transition-colors pb-4">玉米籜</button>
<button class="font-label text-sm tracking-widest uppercase text-on-surface-variant hover:text-primary transition-colors pb-4">蓪草紙</button>
<div class="ml-auto hidden md:flex items-center gap-2 text-on-surface-variant/60 font-label text-[10px] tracking-widest uppercase">
<span class="material-symbols-outlined text-sm">filter_list</span>
                Sorted by latest
            </div>
</div>
<!-- Video Bento Grid -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
<!-- Video Item 1 (Wide Hero) -->
<div class="md:col-span-8 group cursor-pointer">
<div class="relative overflow-hidden aspect-video bg-secondary-container rounded-lg">
<img alt="Process" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="close-up of artisan hands delicately shaping pith paper into flower petals with soft morning sunlight in a quiet studio" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2q8UIA6ZkaxbgBtoTUgvRPeKGgfPCZIpaDaA8DL-5jvuflLZS7M7SxftJ3LMNKkhbW36XfwngBWvtcAIsMgvsHDbvdrGgyp6JEGwkSnketw7RwyYYdbwZw7oJeoZhH0hCrp7I6RAN0lw6Xy1qz0ViG7_QS3b53Oa4e3LNwqlOJ_vR39SUZlAw1oDeu80KBKtuvoO5cs5QVJcR37i8mO5yNOOEDs1vJ2H7AlDwxvM-U9To_pkbxAF78ZwxJNqI4bjdXofy0WMufHo"/>
<div class="absolute inset-0 bg-on-surface/10 flex items-center justify-center">
<div class="w-16 h-16 rounded-full bg-primary/90 flex items-center justify-center text-on-primary transition-transform group-hover:scale-110 shadow-lg">
<span class="material-symbols-outlined text-4xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
</div>
</div>
<div class="absolute bottom-6 left-6 right-6">
<span class="bg-surface/90 backdrop-blur-sm px-3 py-1 rounded-full text-[10px] tracking-widest uppercase font-label text-primary mb-2 inline-block">Process</span>
</div>
</div>
<div class="mt-4 flex justify-between items-start">
<div>
<h3 class="text-2xl font-headline text-on-surface mb-1">蓪草花瓣的雕琢與溫度</h3>
<p class="text-sm font-body text-on-surface-variant">4:12 • 傳統工藝紀錄</p>
</div>
</div>
</div>
<!-- Video Item 2 (Vertical) -->
<div class="md:col-span-4 group cursor-pointer">
<div class="relative overflow-hidden aspect-[9/16] bg-secondary-container rounded-lg">
<img alt="Process" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="vertical cinematic shot of dried corn husks arranged on a wooden table with organic shadows and warm earthy tones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDkjScIlB7H3J6uVbfmgS7jSMjBSWgyGejS3tmQD8DnO401G-vex5YJAjRhizASHgqJAy-Qv_zAbJFJYl0ZAYFottmXFq-SOnRM_Yrixzv-zF0jTw7I07qfBJHAp6A2DLLg-vMIDyqhLD0jRmZDbqh8ONUjycwWrZXtlYQLn9uXeSGcpa8B19AJqQGAUa20XOTZt1mBBq3LTRZfuuWWB7R2DEPH5ueTFdgM3hEVQ9X3LaSVEvLJoS3CCGirNr44BcTxfUEbB3fH5Wo"/>
<div class="absolute inset-0 bg-on-surface/10 flex items-center justify-center">
<div class="w-12 h-12 rounded-full bg-primary/90 flex items-center justify-center text-on-primary transition-transform group-hover:scale-110">
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
</div>
</div>
</div>
<div class="mt-4">
<span class="text-[10px] tracking-widest uppercase font-label text-tertiary">Material Study</span>
<h3 class="text-xl font-headline text-on-surface mt-1">玉米籜：纖維的生命力</h3>
</div>
</div>
<!-- Video Item 3 (Small Square-ish) -->
<div class="md:col-span-4 group cursor-pointer">
<div class="relative overflow-hidden aspect-[4/3] bg-secondary-container rounded-lg">
<img alt="Detail" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="blurred motion of artisan fingers weaving organic fibers with soft focus on the texture of the materials" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBkdFDTR4U-WZVYQXPTUeUl6PMuAJ9UHYJSlKsAL5RqKGeiaD5xEgnrHIf38zex7-f0DumSdOu4NxxBNuxkNNk-t-RurToaY120n8WwoKhJCHHS-Z5LegkQIz-zd17qAw223GqrSyJc6R2jWI5Fhys9dz9lOj2XEk2Xpmib77G7Kui4czn22QRpWRe3kZQzlpkTTgE1MtvIRljH-NIyqoLIogSFwtetINACV5SX4r7N3zgBwu3uS7UZJB2XFft_f0l2atSl0gj-1Ic"/>
<div class="absolute inset-0 bg-on-surface/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="material-symbols-outlined text-4xl text-on-primary">play_circle</span>
</div>
</div>
<div class="mt-4">
<h3 class="text-lg font-headline text-on-surface">編織時光</h3>
<p class="text-xs font-body text-on-surface-variant mt-1 uppercase tracking-widest">Technique • 2:45</p>
</div>
</div>
<!-- Video Item 4 (Medium Horizontal) -->
<div class="md:col-span-8 group cursor-pointer">
<div class="relative overflow-hidden aspect-[21/9] bg-secondary-container rounded-lg">
<img alt="Studio" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="wide shot of a minimalist artisan workshop with soft light through paper screens and organized craft tools" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA7040duOcHVEOVFuHR9Bm3v3Cdxdma53HWTREo38FY_9ORwxv08onRf_UcCMZrZSvWd3tt9AoFfVmblfo0LLHnxcgL6IQnIoTGNRrAEDW_AoFZOT2RL1eXxSwJWgamH4a76yNaDTFiX6FMEOjGDNJ7OfKcS9tfRi2RjWmroRxhmehzFv_c-JCu6W5JGThsnRdcjJSKJBFC2NHsqTfnrS2jL2PHJ_rDYcE8s6hjk5Ga3g8UfpYCT0C9CRd3zy_MhOFDOoI2MlSZH8o"/>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-14 h-14 rounded-full bg-surface/80 backdrop-blur shadow-xl flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-on-primary transition-all">
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
</div>
</div>
</div>
<div class="mt-4">
<h3 class="text-xl font-headline text-on-surface">工坊紀實：晨光中的靜謐與專注</h3>
<p class="text-sm font-body text-on-surface-variant italic">錄製於 2023 冬季</p>
</div>
</div>
</div>
<!-- Pagination/Load More -->
<div class="mt-24 flex justify-center">
<button class="group flex flex-col items-center gap-4">
<span class="font-label text-xs tracking-[0.3em] uppercase text-on-surface-variant group-hover:text-primary transition-colors">Load More Narratives</span>
<div class="w-px h-12 bg-outline-variant/30 group-hover:bg-primary transition-colors"></div>
</button>
</div>
</main>
<!-- Footer -->
<footer class="w-full mt-24 bg-[#eae8e3] dark:bg-stone-900">
<div class="flex flex-col md:flex-row justify-between items-center px-12 py-12 border-t border-[#1b1c19]/5">
<div class="font-serif italic text-lg text-[#1b1c19] dark:text-[#fbf9f4] mb-4 md:mb-0">
                The Tactile Manuscript
            </div>
<div class="text-[#566037] dark:text-[#a3ad82] font-sans text-xs tracking-widest uppercase text-center md:text-left mb-6 md:mb-0 max-w-sm">
                © 2024 The Tactile Manuscript. Preserving the soul of traditional craft.
            </div>
<div class="flex gap-8">
<a class="text-stone-500 dark:text-stone-400 hover:text-[#566037] transition-opacity duration-300 font-sans text-xs tracking-widest uppercase" href="#">Instagram</a>
<a class="text-stone-500 dark:text-stone-400 hover:text-[#566037] transition-opacity duration-300 font-sans text-xs tracking-widest uppercase" href="#">Archive Policy</a>
<a class="text-stone-500 dark:text-stone-400 hover:text-[#566037] transition-opacity duration-300 font-sans text-xs tracking-widest uppercase" href="#">Terms of Service</a>
</div>
</div>
</footer>
</body></html>
張貼者： 於
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)