\u8018\u5922\u5b78\u82d1 \u8ab2\u7a0b\u5c55\u793a\u9928<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n \n <style>\n body {\n font-family: 'Noto Sans TC', sans-serif;\n background-color: #0d0d0f;\n color: #e5e5e7;\n min-height: 100vh;\n background-image: \n radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),\n radial-gradient(circle at 85% 60%, rgba(180, 130, 60, 0.05) 0%, transparent 40%);\n background-attachment: fixed;\n }\n\n .font-serif-luxury {\n font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;\n }\n\n \/* \u53c3\u8003\u5716\u91d1\u5c6c\u9ad8\u5962\u6587\u5b57\u6f38\u5c64 *\/\n .gold-gradient-text {\n background: linear-gradient(135deg, #fff7e6 0%, #e6c887 40%, #b89348 80%, #fae19c 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .gold-subtext {\n color: #c5a059;\n letter-spacing: 0.25em;\n }\n\n \/* \u9ad8\u7d1a\u6c1b\u570d\u5361\u7247 (Atmospheric Photo Card) *\/\n .card-container {\n position: relative;\n border-radius: 20px;\n overflow: hidden;\n border: 1px solid rgba(212, 175, 55, 0.18);\n background: #141418;\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);\n transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n .card-container:hover {\n transform: translateY(-6px);\n border-color: rgba(230, 200, 135, 0.5);\n box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(197, 160, 89, 0.2);\n }\n\n .card-bg-img {\n transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s ease;\n filter: brightness(0.82) contrast(1.08) saturate(0.9);\n }\n\n .card-container:hover .card-bg-img {\n transform: scale(1.08);\n filter: brightness(0.95) contrast(1.12) saturate(1);\n }\n\n \/* \u5149\u7dda\u906e\u7f69\u96d9\u91cd\u5c64\u6b21 *\/\n .card-overlay {\n background: linear-gradient(\n 180deg, \n rgba(15, 15, 18, 0.35) 0%, \n rgba(15, 15, 18, 0.55) 45%, \n rgba(10, 10, 12, 0.94) 100%\n );\n }\n\n \/* \u53c3\u8003\u5716\u98a8\u683c\u81a0\u56ca\u6a19\u7c64 *\/\n .capsule-badge {\n background: rgba(28, 26, 24, 0.65);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(225, 195, 135, 0.3);\n color: #e5c88d;\n font-size: 11px;\n letter-spacing: 0.12em;\n }\n\n \/* \u5206\u985e\u6309\u9215\u9078\u4e2d\u614b *\/\n .filter-btn-active {\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(160, 120, 40, 0.15) 100%);\n border-color: rgba(230, 200, 135, 0.6) !important;\n color: #f7e7c4 !important;\n box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);\n }\n\n \/* \u81ea\u8a02\u5377\u8ef8 *\/\n ::-webkit-scrollbar { width: 8px; }\n ::-webkit-scrollbar-track { background: #0a0a0c; }\n ::-webkit-scrollbar-thumb { background: #2a2824; border-radius: 4px; }\n ::-webkit-scrollbar-thumb:hover { background: #4a4232; }\n <\/style>\n<\/head>\n<body class=\"antialiased pb-24 selection:bg-amber-500\/30 selection:text-amber-100\">\n\n \n <div class=\"fixed inset-0 pointer-events-none overflow-hidden -z-10\">\n <div class=\"absolute top-[-10%] left-[20%] w-[600px] h-[600px] rounded-full bg-amber-600\/10 blur-[160px]\"><\/div>\n <div class=\"absolute top-[40%] right-[-10%] w-[700px] h-[700px] rounded-full bg-yellow-700\/8 blur-[180px]\"><\/div>\n <div class=\"absolute bottom-[-10%] left-[-5%] w-[500px] h-[500px] rounded-full bg-orange-900\/10 blur-[150px]\"><\/div>\n <\/div>\n\n <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-10\">\n \n \n <header class=\"text-center mb-14\">\n <div class=\"inline-flex items-center gap-3 mb-3 px-4 py-1.5 rounded-full bg-amber-950\/30 border border-amber-500\/20 backdrop-blur-md\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse\"><\/span>\n <span class=\"text-[11px] font-medium tracking-[0.3em] uppercase gold-subtext\">YUN MENG DRAMA ACADEMY<\/span>\n <\/div>\n \n <h1 class=\"text-3xl sm:text-5xl lg:text-6xl font-bold font-serif-luxury tracking-widest gold-gradient-text mb-4 uppercase\">\n \u8ab2 \u7a0b \u5c55 \u793a \u9928\n <\/h1>\n \n <p class=\"text-sm sm:text-base text-stone-300 font-light max-w-2xl mx-auto tracking-wider leading-relaxed\">\n \u7528\u6232\u5287\u91cd\u69cb\u611f\u5b98\uff0c\u5728\u5149\u8207\u5f71\u7684\u5fae\u91ba\u6c1b\u570d\u4e2d\uff0c\u9047\u898b\u66f4\u5177\u611f\u67d3\u529b\u7684\u81ea\u5df1\u3002<br>\n <span class=\"text-xs text-amber-200\/70 mt-2 block font-normal tracking-widest\">\u2726 \u6bcf\u4e00\u5f35\u5361\u7247\uff0c\u7686\u662f\u4e00\u5834\u6c89\u6d78\u5f0f\u7684\u751f\u547d\u5287\u5834\u7df4\u7fd2<\/span>\n <\/p>\n <\/header>\n\n \n <div class=\"flex flex-col lg:flex-row items-center justify-between gap-4 mb-12 bg-stone-900\/60 p-3 sm:p-4 rounded-2xl backdrop-blur-xl border border-amber-500\/20 shadow-2xl\">\n \n \n <div class=\"flex flex-wrap justify-center gap-2 w-full lg:w-auto\">\n <button id=\"btn-all\" onclick=\"filterCategory('all')\" class=\"filter-btn filter-btn-active text-xs sm:text-sm font-medium px-4 py-2 rounded-xl transition-all duration-300 border border-stone-700\/50 text-stone-400 hover:text-stone-200\">\n \u5168\u90e8\u8ab2\u7a0b\n <\/button>\n <button id=\"btn-life\" onclick=\"filterCategory('life')\" class=\"filter-btn text-xs sm:text-sm font-medium px-4 py-2 rounded-xl transition-all duration-300 border border-stone-700\/50 text-stone-400 hover:text-stone-200\">\n \u4eba\u751f\u7df4\u7fd2\u8ab2\n <\/button>\n <button id=\"btn-stage\" onclick=\"filterCategory('stage')\" class=\"filter-btn text-xs sm:text-sm font-medium px-4 py-2 rounded-xl transition-all duration-300 border border-stone-700\/50 text-stone-400 hover:text-stone-200\">\n \u821e\u53f0\u8868\u6f14\u8ab2\n <\/button>\n <button id=\"btn-camera\" onclick=\"filterCategory('camera')\" class=\"filter-btn text-xs sm:text-sm font-medium px-4 py-2 rounded-xl transition-all duration-300 border border-stone-700\/50 text-stone-400 hover:text-stone-200\">\n \u93e1\u982d\u5be6\u6230\u8ab2\n <\/button>\n <button id=\"btn-kids\" onclick=\"filterCategory('kids')\" class=\"filter-btn text-xs sm:text-sm font-medium px-4 py-2 rounded-xl transition-all duration-300 border border-stone-700\/50 text-stone-400 hover:text-stone-200\">\n \u5c0f\u5927\u4eba\u5c08\u5340\n <\/button>\n <button id=\"btn-special\" onclick=\"filterCategory('special')\" class=\"filter-btn text-xs sm:text-sm font-medium px-4 py-2 rounded-xl transition-all duration-300 border border-stone-700\/50 text-stone-400 hover:text-stone-200\">\n \u7279\u5225\u4f01\u5283\n <\/button>\n <\/div>\n\n \n <div class=\"relative w-full lg:w-72\">\n <input type=\"text\" id=\"searchInput\" oninput=\"handleSearch()\" placeholder=\"\u641c\u5c0b\u8ab2\u7a0b\u540d\u7a31\u6216\u6c1b\u570d\u8aaa\u660e...\" \n class=\"w-full bg-stone-950\/80 text-stone-200 text-xs sm:text-sm rounded-xl pl-10 pr-4 py-2.5 border border-amber-500\/20 focus:outline-none focus:border-amber-400\/60 transition-all placeholder-stone-500\">\n <svg class=\"w-4 h-4 text-amber-500\/60 absolute left-3.5 top-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"><\/path>\n <\/svg>\n <\/div>\n <\/div>\n\n \n <div id=\"cardGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-7\">\n \n <\/div>\n\n \n <div id=\"noResults\" class=\"hidden text-center py-20\">\n <div class=\"inline-flex justify-center items-center w-16 h-16 rounded-full bg-amber-950\/30 border border-amber-500\/20 mb-4\">\n <svg class=\"w-8 h-8 text-amber-400\/60\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9.172 9.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>\n <\/div>\n <p class=\"text-stone-400 font-light text-base\">\u672a\u627e\u5230\u7b26\u5408\u689d\u4ef6\u7684\u8ab2\u7a0b\u5361\u7247<\/p>\n <button onclick=\"filterCategory('all'); document.getElementById('searchInput').value='';\" class=\"mt-4 text-xs text-amber-400 underline hover:text-amber-300\">\n \u91cd\u7f6e\u641c\u5c0b\u689d\u4ef6\n <\/button>\n <\/div>\n\n <\/div>\n\n \n <div id=\"cardModal\" onclick=\"closeModal(event)\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black\/85 backdrop-blur-md hidden transition-opacity duration-300\">\n <div id=\"modalContent\" class=\"relative w-full max-w-lg transition-all transform scale-95 opacity-0 duration-300\">\n <button onclick=\"closeModalDirect()\" class=\"absolute -top-12 right-0 text-stone-400 hover:text-white transition-colors p-2\">\n <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n <\/button>\n <div id=\"modalCardContainer\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u70ba\u6bcf\u5802\u8ab2\u7a0b\u914d\u7f6e\u5c08\u5c6c Unsplash \u9ad8\u8cea\u611f\u6696\u5149\u6c1b\u570d\u5e95\u5716 (Warm Lighting & Shadows)\n const courses = [\n \/\/ \u300a\u4eba\u751f\u7df4\u7fd2\u8ab2\u300b\n { \n id: 1, \n category: \"life\", \n categoryName: \"\u4eba\u751f\u7df4\u7fd2\u8ab2\", \n title: \"\u56de\u5230\u73fe\u5834\", \n desc: \"\u91cd\u65b0\u6253\u958b\u611f\u5b98\u8207\u60c5\u7dd2\uff0c\u627e\u56de\u771f\u5be6\u611f\u53d7\uff0c\u8b93\u81ea\u5df1\u771f\u6b63\u56de\u5230\u7576\u4e0b\u3002\", \n url: \"https:\/\/forms.gle\/zX4fijTQQXPkbNiS8\",\n image: \"https:\/\/images.unsplash.com\/photo-1509114397022-ed747cca3f65?q=80&w=800&auto=format&fit=crop\" \/\/ \u6eab\u6696\u5149\u7dda\u8207\u5f71\u5b50\n },\n { \n id: 2, \n category: \"life\", \n categoryName: \"\u4eba\u751f\u7df4\u7fd2\u8ab2\", \n title: \"\u6232\u5287\u958b\u767c\", \n desc: \"\u900f\u904e\u6232\u5287\u904a\u6232\u8207\u751f\u6d3b\u60c5\u5883\uff0c\u958b\u767c\u81ea\u7136\u8868\u9054\u3001\u4e92\u52d5\u53cd\u61c9\u8207\u4eba\u969b\u6e9d\u901a\u80fd\u529b\u3002\", \n url: \"https:\/\/forms.gle\/HShe1PZ6JeNg4zJn9\",\n image: \"https:\/\/images.unsplash.com\/photo-1514525253161-7a46d19cd819?q=80&w=800&auto=format&fit=crop\" \/\/ \u6696\u8272\u5287\u5834\u5149\u5f71\n },\n { \n id: 3, \n category: \"life\", \n categoryName: \"\u4eba\u751f\u7df4\u7fd2\u8ab2\", \n title: \"\u8eab\u9ad4\u4f7f\u7528\u8aaa\u660e\u66f8\", \n desc: \"\u8b80\u61c2\u81ea\u5df1\u7684\u8eab\u9ad4\u7fd2\u6163\uff0c\u5b78\u6703\u66f4\u653e\u9b06\u3001\u5354\u8abf\u800c\u6709\u81ea\u4fe1\u5730\u4f7f\u7528\u8eab\u9ad4\u3002\", \n url: \"https:\/\/forms.gle\/554tdt8Xp9R9uwG66\",\n image: \"https:\/\/images.unsplash.com\/photo-1508700115892-45ecd05ae2ad?q=80&w=800&auto=format&fit=crop\" \/\/ \u80a2\u9ad4\u526a\u5f71\u6696\u5149\n },\n { \n id: 4, \n category: \"life\", \n categoryName: \"\u4eba\u751f\u7df4\u7fd2\u8ab2\", \n title: \"\u8868\u60c5\u5de5\u4f5c\u574a\", \n desc: \"\u6253\u958b\u50f5\u786c\u6216\u55ae\u4e00\u7684\u8868\u60c5\u6a21\u5f0f\uff0c\u8b93\u60c5\u7dd2\u80fd\u81ea\u7136\u3001\u6e96\u78ba\u5730\u51fa\u73fe\u5728\u81c9\u4e0a\u3002\", \n url: \"https:\/\/forms.gle\/jVGyChqGfFhX4QXM7\",\n image: \"https:\/\/images.unsplash.com\/photo-1534528741775-53994a69daeb?q=80&w=800&auto=format&fit=crop\" \/\/ \u6696\u5149\u8096\u50cf\u5074\u5f71\n },\n { \n id: 5, \n category: \"life\", \n categoryName: \"\u4eba\u751f\u7df4\u7fd2\u8ab2\", \n title: \"\u5275\u9020\u500b\u4eba\u597dEQ\", \n desc: \"\u900f\u904e\u60c5\u5883\u6f14\u7df4\uff0c\u63d0\u5347\u60c5\u7dd2\u8fa8\u8b58\u3001\u58d3\u529b\u8abf\u7bc0\u8207\u4eba\u969b\u61c9\u5c0d\u80fd\u529b\u3002\", \n url: \"https:\/\/forms.gle\/56nENLqM2uudb8i36\",\n image: \"https:\/\/images.unsplash.com\/photo-1499209974431-9dddcece7f88?q=80&w=800&auto=format&fit=crop\" \/\/ \u6c89\u975c\u6668\u5149\u8207\u7a97\u5f71\n },\n { \n id: 6, \n category: \"life\", \n categoryName: \"\u4eba\u751f\u7df4\u7fd2\u8ab2\", \n title: \"\u6545\u4e8b\u884c\u92b7\", \n desc: \"\u628a\u7d93\u6b77\u3001\u54c1\u724c\u8207\u7406\u5ff5\u8aaa\u6210\u6709\u756b\u9762\u3001\u6709\u60c5\u611f\uff0c\u4e5f\u8b93\u4eba\u8a18\u5f97\u4f4f\u3002\", \n url: \"https:\/\/forms.gle\/W9Wokvx4VVEm3dcB6\",\n image: \"https:\/\/images.unsplash.com\/photo-1455390582262-044cdead277a?q=80&w=800&auto=format&fit=crop\" \/\/ \u5fa9\u53e4\u66f8\u5beb\u8207\u71c8\u5149\n },\n { \n id: 7, \n category: \"life\", \n categoryName: \"\u4eba\u751f\u7df4\u7fd2\u8ab2\", \n title: \"\u4eba\u751f\u8abf\u983b\u5ba4\", \n desc: \"\u900f\u904e\u500b\u4eba\u5316\u6232\u5287\u7df4\u7fd2\uff0c\u770b\u898b\u751f\u6d3b\u5361\u9ede\uff0c\u91cd\u65b0\u8abf\u6574\u60c5\u7dd2\u3001\u95dc\u4fc2\u8207\u4eba\u751f\u65b9\u5411\u3002\", \n url: \"https:\/\/forms.gle\/wy3SGmX8FK2EHhZy8\",\n image: \"https:\/\/images.unsplash.com\/photo-1518241353330-0f7941c2d9b5?q=80&w=800&auto=format&fit=crop\" \/\/ \u67d4\u548c\u5915\u967d\u5e7e\u4f55\u5149\u5f71\n },\n\n \/\/ \u300a\u821e\u53f0\u8868\u6f14\u8ab2\u300b\n { \n id: 8, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u555f\u52d5\u6232\u80de\", \n desc: \"\u5f9e\u96f6\u958b\u59cb\u6253\u958b\u611f\u5b98\u3001\u60c5\u7dd2\u8207\u53cd\u61c9\uff0c\u559a\u9192\u6bcf\u500b\u4eba\u8207\u751f\u4ff1\u4f86\u7684\u8868\u6f14\u672c\u80fd\u3002\", \n url: \"https:\/\/forms.gle\/1EcJHx9qUXxYJkDa6\",\n image: \"https:\/\/images.unsplash.com\/photo-1469488865564-c2de10f69f96?q=80&w=800&auto=format&fit=crop\" \/\/ \u821e\u53f0\u71c8\u5149\u526a\u5f71\n },\n { \n id: 9, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u6f14\u6280\u5be6\u9a57\u5ba4\", \n desc: \"\u900f\u904e\u591a\u5143\u8868\u6f14\u5be6\u9a57\uff0c\u63a2\u7d22\u611f\u5b98\u3001\u7a7a\u9593\u3001\u89d2\u8272\u8207\u771f\u5be6\u53cd\u61c9\u7684\u53ef\u80fd\u6027\u3002\", \n url: \"https:\/\/forms.gle\/7iakP19aj3mR9a4L8\",\n image: \"https:\/\/images.unsplash.com\/photo-1507676184212-d03ab07a01bf?q=80&w=800&auto=format&fit=crop\" \/\/ \u6232\u5287\u821e\u53f0\u805a\u7126\n },\n { \n id: 10, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u6f14\u54e1\u80a2\u9ad4\u958b\u767c\", \n desc: \"\u7a81\u7834\u8eab\u9ad4\u9650\u5236\uff0c\u63d0\u5347\u63a7\u5236\u529b\u3001\u8868\u73fe\u529b\u8207\u821e\u53f0\u4e0a\u7684\u80a2\u9ad4\u5275\u9020\u529b\u3002\", \n url: \"https:\/\/forms.gle\/rAAj9CuApChM75757\",\n image: \"https:\/\/images.unsplash.com\/photo-1547153760-18fc86324498?q=80&w=800&auto=format&fit=crop\" \/\/ \u73fe\u4ee3\u821e\u8207\u5149\u5f71\u5f35\u529b\n },\n { \n id: 11, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u904b\u7528\u6232\u80de\", \n desc: \"\u5c07\u5df2\u958b\u767c\u7684\u611f\u5b98\u3001\u60c5\u7dd2\u8207\u53cd\u61c9\u80fd\u529b\uff0c\u5be6\u969b\u904b\u7528\u5728\u89d2\u8272\u8207\u60c5\u5883\u8868\u6f14\u4e2d\u3002\", \n url: \"https:\/\/forms.gle\/8yCQQRJXBEKf4b718\",\n image: \"https:\/\/images.unsplash.com\/photo-1519741497674-611481863552?q=80&w=800&auto=format&fit=crop\" \/\/ \u6c89\u6d78\u5f0f\u5287\u9662\u71e6\u721b\u6696\u5149\u8207\u821e\u53f0\u5f35\u529b\n },\n { \n id: 12, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u8868\u6f14\u5be6\u4f5c\", \n desc: \"\u900f\u904e\u7247\u6bb5\u3001\u5834\u666f\u8207\u821e\u53f0\u6392\u7df4\uff0c\u628a\u8868\u6f14\u6280\u5de7\u8f49\u5316\u6210\u771f\u6b63\u80fd\u5448\u73fe\u7684\u4f5c\u54c1\u3002\", \n url: \"https:\/\/forms.gle\/UnUXprp4skWr5PFa6\",\n image: \"https:\/\/images.unsplash.com\/photo-1460723237483-7a6dc9d0b212?q=80&w=800&auto=format&fit=crop\" \/\/ \u5287\u5834\u6392\u7df4\u8cea\u611f\n },\n { \n id: 13, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u89d2\u8272\u63a2\u7d22\", \n desc: \"\u5f9e\u4eba\u7269\u80cc\u666f\u3001\u617e\u671b\u8207\u884c\u52d5\u51fa\u767c\uff0c\u5efa\u7acb\u7acb\u9ad4\u3001\u6709\u908f\u8f2f\u53c8\u6709\u751f\u547d\u529b\u7684\u89d2\u8272\u3002\", \n url: \"https:\/\/example.com\/course\/13\",\n image: \"https:\/\/images.unsplash.com\/photo-1503095396549-807759245b35?q=80&w=800&auto=format&fit=crop\" \/\/ \u61f7\u820a\u5287\u5834\u8207\u9762\u5177\n },\n { \n id: 14, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u8b80\u5287\", \n desc: \"\u900f\u904e\u5287\u672c\u5206\u6790\u8207\u8072\u97f3\u8868\u6f14\uff0c\u8b80\u61c2\u6587\u5b57\u80cc\u5f8c\u7684\u4eba\u7269\u95dc\u4fc2\u3001\u60c5\u7dd2\u8207\u6f5b\u53f0\u8a5e\u3002\", \n url: \"https:\/\/forms.gle\/nFSeJnpeZ12RsbHr9\",\n image: \"https:\/\/images.unsplash.com\/photo-1457369804613-52c61a468e7d?q=80&w=800&auto=format&fit=crop\" \/\/ \u6eab\u6696\u6aaf\u71c8\u8207\u5287\u672c\n },\n { \n id: 15, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u6f14\u54e1\u935b\u9020\u5ba4\", \n desc: \"\u4f9d\u7167\u6f14\u54e1\u500b\u4eba\u689d\u4ef6\u8207\u76ee\u6a19\uff0c\u9032\u884c\u7cbe\u6e96\u3001\u6df1\u5165\u4e14\u5177\u5be6\u6230\u6027\u7684\u5c08\u696d\u8a13\u7df4\u3002\", \n url: \"https:\/\/forms.gle\/2i66BMB8AeYf2aqw8\",\n image: \"https:\/\/images.unsplash.com\/photo-1511671782779-c97d3d27a1d4?q=80&w=800&auto=format&fit=crop\" \/\/ \u5962\u83ef\u91d1\u5c6c\u8072\u5b78\u5fae\u5149\n },\n\n \/\/ \u300a\u93e1\u982d\u5be6\u6230\u8ab2\u300b\n { \n id: 16, \n category: \"camera\", \n categoryName: \"\u93e1\u982d\u5be6\u6230\u8ab2\", \n title: \"\u6c1b\u570d\u6f14\u54e1\u57f9\u8a13\", \n desc: \"\u5b78\u6703\u5728\u93e1\u982d\u4e2d\u81ea\u7136\u751f\u6d3b\u3001\u7a69\u5b9a\u53cd\u61c9\uff0c\u6210\u70ba\u80fd\u71df\u9020\u756b\u9762\u771f\u5be6\u611f\u7684\u6c1b\u570d\u6f14\u54e1\u3002\", \n url: \"https:\/\/forms.gle\/RQ749QfMmk7UU5LK9\",\n image: \"https:\/\/images.unsplash.com\/photo-1485846234645-a62644f84728?q=80&w=800&auto=format&fit=crop\" \/\/ \u96fb\u5f71\u81a0\u6372\u8207\u93e1\u982d\u5149\u5f71\n },\n { \n id: 17, \n category: \"camera\", \n categoryName: \"\u93e1\u982d\u5be6\u6230\u8ab2\", \n title: \"\u7279\u7d04\u6f14\u54e1\u57f9\u8a13\", \n desc: \"\u91dd\u5c0d\u6709\u53f0\u8a5e\u3001\u6709\u52d5\u4f5c\u8207\u60c5\u5883\u4efb\u52d9\u7684\u62cd\u651d\u9700\u6c42\uff0c\u5efa\u7acb\u5be6\u7528\u7684\u93e1\u982d\u8868\u6f14\u80fd\u529b\u3002\", \n url: \"https:\/\/forms.gle\/5HLSMN3XmByosfZQA\",\n image: \"https:\/\/images.unsplash.com\/photo-1536440136628-849c177e76a1?q=80&w=800&auto=format&fit=crop\" \/\/ \u7247\u5834\u651d\u5f71\u6a5f\u6696\u5149\n },\n { \n id: 18, \n category: \"camera\", \n categoryName: \"\u93e1\u982d\u5be6\u6230\u8ab2\", \n title: \"\u8a66\u93e1\u5e36\u600e\u9ebc\u62cd\", \n desc: \"\u5f9e\u9078\u666f\u3001\u69cb\u5716\u3001\u6536\u97f3\u5230\u8868\u6f14\uff0c\u5b8c\u6210\u4e00\u652f\u6e05\u695a\u3001\u81ea\u7136\u53c8\u5177\u7af6\u722d\u529b\u7684\u8a66\u93e1\u5f71\u7247\u3002\", \n url: \"https:\/\/forms.gle\/nMchk3pECdzGEjtn6\",\n image: \"https:\/\/images.unsplash.com\/photo-1598899134739-24c46f58b8c0?q=80&w=800&auto=format&fit=crop\" \/\/ \u5168\u65b0\u9078\u7528\uff1a\u651d\u5f71\u68da\u62cd\u651d\u8207\u8a66\u93e1\u93e1\u982d\u6c1b\u570d\u5716\n },\n { \n id: 19, \n category: \"camera\", \n categoryName: \"\u93e1\u982d\u5be6\u6230\u8ab2\", \n title: \"\u500b\u4eba\u9020\u578b\u5b9a\u4f4d\", \n desc: \"\u627e\u51fa\u9069\u5408\u81ea\u5df1\u7684\u5916\u578b\u5b9a\u4f4d\u8207\u93e1\u982d\u5f62\u8c61\uff0c\u5efa\u7acb\u9bae\u660e\u53c8\u5177\u8fa8\u8b58\u5ea6\u7684\u500b\u4eba\u98a8\u683c\u3002\", \n url: \"https:\/\/forms.gle\/mmQvzzc5RGUqfFg1A\",\n image: \"https:\/\/images.unsplash.com\/photo-1512496015851-a90fb38ba796?q=80&w=800&auto=format&fit=crop\" \/\/ \u5957\u7528\u539f\u8a66\u93e1\u5e36\u5e95\u5716\uff1a\u5177\u6642\u5c1a\u5149\u611f\u8207\u7279\u5beb\u98a8\u683c\n },\n { \n id: 20, \n category: \"camera\", \n categoryName: \"\u93e1\u982d\u5be6\u6230\u8ab2\", \n title: \"\u500b\u4eba\u59ff\u614b\u8abf\u6574\", \n desc: \"\u6539\u5584\u7ad9\u59ff\u3001\u5750\u59ff\u3001\u8d70\u8def\u8207\u93e1\u982d\u59ff\u614b\uff0c\u8b93\u6574\u9ad4\u72c0\u614b\u66f4\u81ea\u7136\u3001\u81ea\u4fe1\u3001\u6709\u8cea\u611f\u3002\", \n url: \"https:\/\/forms.gle\/C4g2eeQsojeabhMFA\",\n image: \"https:\/\/images.unsplash.com\/photo-1490481651871-ab68de25d43d?q=80&w=800&auto=format&fit=crop\" \/\/ \u6642\u5c1a\u5962\u83ef\u59ff\u614b\n },\n { \n id: 21, \n category: \"camera\", \n categoryName: \"\u93e1\u982d\u5be6\u6230\u8ab2\", \n title: \"\u4e00\u5c0d\u4e00\uff5c\u5c08\u696d\u57f9\u8a13\", \n desc: \"\u91dd\u5c0d\u500b\u4eba\u93e1\u982d\u554f\u984c\u8207\u63a5\u6848\u76ee\u6a19\uff0c\u63d0\u4f9b\u91cf\u8eab\u6253\u9020\u7684\u8868\u6f14\u8207\u8a66\u93e1\u8a13\u7df4\u3002\", \n url: \"https:\/\/forms.gle\/foVqPCTDPfUJWTU76\",\n image: \"https:\/\/images.unsplash.com\/photo-1579783902614-a3fb3927b675?q=80&w=800&auto=format&fit=crop\" \/\/ \u85dd\u8853\u7e6a\u756b\u822c\u6eab\u6696\u7279\u5beb\n },\n\n \/\/ \u300a\u5c0f\u5927\u4eba\u5c08\u5340\u300b\n { \n id: 22, \n category: \"kids\", \n categoryName: \"\u5c0f\u5927\u4eba\u5c08\u5340\", \n title: \"\u5152\u7ae5\u6232\u5287\uff5c\u60c5\u7dd2\u8868\u9054\", \n desc: \"\u900f\u904e\u904a\u6232\u8207\u89d2\u8272\u626e\u6f14\uff0c\u5e6b\u52a9\u5b69\u5b50\u8a8d\u8b58\u60c5\u7dd2\u3001\u52c7\u6562\u8868\u9054\u4e26\u5b78\u6703\u8207\u4eba\u76f8\u8655\u3002\", \n url: \"https:\/\/forms.gle\/ULDpqVoYkTo3pcb8A\",\n image: \"https:\/\/images.unsplash.com\/photo-1502086223501-7ea6ecd79368?q=80&w=800&auto=format&fit=crop\" \/\/ \u6eab\u6696\u7ae5\u8da3\u5922\u5e7b\u5149\u7dda\n },\n { \n id: 23, \n category: \"kids\", \n categoryName: \"\u5c0f\u5927\u4eba\u5c08\u5340\", \n title: \"\u9752\u5c11\u5e74\u6232\u5287\", \n desc: \"\u966a\u4f34\u9752\u5c11\u5e74\u63a2\u7d22\u81ea\u6211\u3001\u5efa\u7acb\u81ea\u4fe1\uff0c\u63d0\u5347\u8868\u9054\u3001\u6e9d\u901a\u8207\u5718\u968a\u5408\u4f5c\u80fd\u529b\u3002\", \n url: \"https:\/\/forms.gle\/Ci8RpoVUGjPhX7JW8\",\n image: \"https:\/\/images.unsplash.com\/photo-1529156069898-49953e39b3ac?q=80&w=800&auto=format&fit=crop\" \/\/ \u967d\u5149\u659c\u5c04\u8207\u9752\u6625\u7b11\u610f\n },\n { \n id: 24, \n category: \"kids\", \n categoryName: \"\u5c0f\u5927\u4eba\u5c08\u5340\", \n title: \"\u9752\u5c11\u5e74\u6b4c\u821e\u5287\u9ad4\u9a57\", \n desc: \"\u7d50\u5408\u6232\u5287\u3001\u6b4c\u5531\u8207\u821e\u8e48\uff0c\u8b93\u9752\u5c11\u5e74\u9ad4\u9a57\u5b8c\u6574\u53c8\u5145\u6eff\u6d3b\u529b\u7684\u821e\u53f0\u5275\u4f5c\u3002\", \n url: \"https:\/\/forms.gle\/2vi3voFrj5EqHFp86\",\n image: \"https:\/\/images.unsplash.com\/photo-1516450360452-9312f5e86fc7?q=80&w=800&auto=format&fit=crop\" \/\/ \u6b4c\u821e\u71b1\u60c5\u8e8d\u52d5\u821e\u53f0\n },\n { \n id: 25, \n category: \"kids\", \n categoryName: \"\u5c0f\u5927\u4eba\u5c08\u5340\", \n title: \"\u7ae5\u661f\u5922\u5de5\u5ee0\", \n desc: \"\u900f\u904e\u93e1\u982d\u3001\u8868\u6f14\u8207\u8a66\u93e1\u8a13\u7df4\uff0c\u57f9\u990a\u5b69\u5b50\u81ea\u7136\u3001\u81ea\u4fe1\u53c8\u5177\u5c08\u696d\u611f\u7684\u8868\u6f14\u80fd\u529b\u3002\", \n url: \"https:\/\/forms.gle\/oELDwhZyZim3t4mJ8\",\n image: \"https:\/\/images.unsplash.com\/photo-1478720568477-152d9b164e26?q=80&w=800&auto=format&fit=crop\" \/\/ \u805a\u5149\u71c8\u8207\u5c0f\u5c0f\u661f\u5149\n },\n\n \/\/ \u300a\u7279\u5225\u4f01\u5283\u300b\n { \n id: 26, \n category: \"special\", \n categoryName: \"\u7279\u5225\u4f01\u5283\", \n title: \"\u86fb\u8b8a\u8a08\u756b\", \n desc: \"\u900f\u904e\u5bc6\u96c6\u800c\u6df1\u5165\u7684\u6232\u5287\u8a13\u7df4\uff0c\u7a81\u7834\u6163\u6027\uff0c\u5b8c\u6210\u4e00\u6b21\u7531\u5167\u800c\u5916\u7684\u6210\u9577\u8207\u8f49\u8b8a\u3002\", \n url: \"https:\/\/forms.gle\/3TVQ8oYkB3z2541j7\",\n image: \"https:\/\/images.unsplash.com\/photo-1518709268805-4e9042af9f23?q=80&w=800&auto=format&fit=crop\" \/\/ \u7834\u66c9\u8207\u5149\u675f\u7834\u7a7a\n },\n { \n id: 27, \n category: \"special\", \n categoryName: \"\u7279\u5225\u4f01\u5283\", \n title: \"\u89ba\u9192\u8a08\u756b\", \n desc: \"\u628a\u6232\u5287\u7df4\u7fd2\u5e36\u9032\u65e5\u5e38\uff0c\u5728\u6301\u7e8c\u884c\u52d5\u4e2d\u63d0\u5347\u89ba\u5bdf\u3001\u8868\u9054\u8207\u81ea\u6211\u7406\u89e3\u3002\", \n url: \"https:\/\/forms.gle\/jk9cwiK4shSixGyo7\",\n image: \"https:\/\/images.unsplash.com\/photo-1507525428034-b723cf961d3e?q=80&w=800&auto=format&fit=crop\" \/\/ \u6668\u66e6\u89ba\u9192\u5927\u5730\n },\n { \n id: 28, \n category: \"special\", \n categoryName: \"\u7279\u5225\u4f01\u5283\", \n title: \"\u966a\u8dd1\u8a08\u756b\", \n desc: \"\u7531\u5c08\u696d\u6559\u7df4\u6301\u7e8c\u966a\u4f34\u7df4\u7fd2\u3001\u56de\u994b\u8207\u4fee\u6b63\uff0c\u8b93\u5b78\u7fd2\u4e0d\u518d\u505c\u5728\u8ab2\u5802\u88e1\u3002\", \n url: \"https:\/\/forms.gle\/jk9cwiK4shSixGyo7\",\n image: \"https:\/\/images.unsplash.com\/photo-1517245386807-bb43f82c33c4?q=80&w=800&auto=format&fit=crop\" \/\/ \u71c8\u5149\u4e0b\u6eab\u6696\u6307\u5c0e\n },\n { \n id: 29, \n category: \"special\", \n categoryName: \"\u7279\u5225\u4f01\u5283\", \n title: \"\u9ad4\u9a57\u8ab2\", \n desc: \"\u7528\u4e00\u5802\u8ab2\u8f15\u9b06\u8a8d\u8b58\u6232\u5287\u8a13\u7df4\uff0c\u627e\u5230\u6700\u9069\u5408\u81ea\u5df1\u7684\u5b78\u7fd2\u65b9\u5411\u3002\", \n url: \"https:\/\/forms.gle\/8n1Wvn67cV8oz7Uz8\",\n image: \"https:\/\/images.unsplash.com\/photo-1517457373958-b7bdd4587205?q=80&w=800&auto=format&fit=crop\" \/\/ \u6eab\u6696\u805a\u6703\u8207\u521d\u9ad4\u9a57\n }\n ];\n\n let currentCategory = 'all';\n\n function createCardHTML(course, isModal = false) {\n const heightClass = isModal ? 'h-[380px]' : 'h-[320px]';\n\n return `\n <div onclick=\"openModal(${course.id})\" class=\"card-container ${heightClass} relative rounded-2xl flex flex-col justify-between overflow-hidden cursor-pointer group select-none\">\n \n \n <img decoding=\"async\" src=\"${course.image}\" alt=\"${course.title}\" class=\"card-bg-img absolute inset-0 w-full h-full object-cover -z-10\" loading=\"lazy\" onerror=\"this.src='https:\/\/images.unsplash.com\/photo-1509114397022-ed747cca3f65?q=80&w=800&auto=format&fit=crop'\">\n\n \n <div class=\"card-overlay absolute inset-0 -z-10\"><\/div>\n\n \n <div class=\"flex justify-between items-center p-5 z-10 w-full\">\n <span class=\"capsule-badge text-[10px] sm:text-[11px] font-medium tracking-widest px-3 py-1 rounded-full shadow-lg\">\n ${course.categoryName}\n <\/span>\n <span class=\"text-[10px] text-amber-200\/50 font-serif-luxury tracking-widest uppercase\">\n NO. 0${course.id}\n <\/span>\n <\/div>\n\n \n <div class=\"p-5 z-10 flex flex-col justify-end mt-auto bg-gradient-to-t from-black\/80 via-black\/40 to-transparent\">\n \n <h3 class=\"text-xl sm:text-2xl font-bold font-serif-luxury tracking-wider text-amber-100 mb-2 group-hover:text-amber-300 transition-colors duration-300\">\n ${course.title}\n <\/h3>\n \n <p class=\"text-stone-300 text-xs sm:text-sm font-light leading-relaxed line-clamp-2 mb-4 opacity-90 group-hover:opacity-100 transition-opacity\">\n ${course.desc}\n <\/p>\n\n <div class=\"flex items-center justify-between pt-2 border-t border-amber-500\/20\">\n <span class=\"text-[11px] text-amber-400\/80 tracking-widest font-light group-hover:text-amber-300\">\n EXPLORE COURSE\n <\/span>\n \n ${course.url ? `\n <a href=\"${course.url}\" target=\"_blank\" rel=\"noopener noreferrer\" onclick=\"event.stopPropagation()\" class=\"inline-flex items-center gap-1.5 text-xs text-amber-200 bg-amber-950\/60 hover:bg-amber-600\/40 border border-amber-500\/30 hover:border-amber-400 px-3.5 py-1 rounded-full transition-all duration-300 backdrop-blur-md\">\n <span>\u4e86\u89e3\u7d30\u7bc0<\/span>\n <svg class=\"w-3 h-3 text-amber-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path><\/svg>\n <\/a>\n ` : ''}\n <\/div>\n\n <\/div>\n\n \n <div class=\"absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-amber-500\/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500\"><\/div>\n <\/div>\n `;\n }\n\n function renderCards(courseList) {\n const cardGrid = document.getElementById('cardGrid');\n const noResults = document.getElementById('noResults');\n\n if (!cardGrid || !noResults) return;\n\n if (courseList.length === 0) {\n cardGrid.innerHTML = '';\n noResults.classList.remove('hidden');\n } else {\n noResults.classList.add('hidden');\n cardGrid.innerHTML = courseList.map(c => createCardHTML(c)).join('');\n }\n }\n\n function filterCategory(cat) {\n currentCategory = cat;\n \n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.classList.remove('filter-btn-active');\n });\n\n const activeBtn = document.getElementById(`btn-${cat}`);\n if (activeBtn) {\n activeBtn.classList.add('filter-btn-active');\n }\n\n applyFilters();\n }\n\n function applyFilters() {\n const searchInput = document.getElementById('searchInput');\n const searchKeyword = searchInput ? searchInput.value.trim().toLowerCase() : '';\n \n let filtered = courses;\n\n if (currentCategory !== 'all') {\n filtered = filtered.filter(c => c.category === currentCategory);\n }\n\n if (searchKeyword) {\n filtered = filtered.filter(c => \n c.title.toLowerCase().includes(searchKeyword) || \n c.desc.toLowerCase().includes(searchKeyword) ||\n c.categoryName.toLowerCase().includes(searchKeyword)\n );\n }\n\n renderCards(filtered);\n }\n\n function handleSearch() {\n applyFilters();\n }\n\n function openModal(id) {\n const course = courses.find(c => c.id === id);\n if (!course) return;\n\n const modalContainer = document.getElementById('modalCardContainer');\n if (modalContainer) {\n modalContainer.innerHTML = createCardHTML(course, true);\n }\n\n const modal = document.getElementById('cardModal');\n const modalContent = document.getElementById('modalContent');\n \n if (modal && modalContent) {\n modal.classList.remove('hidden');\n setTimeout(() => {\n modalContent.classList.remove('scale-95', 'opacity-0');\n modalContent.classList.add('scale-100', 'opacity-100');\n }, 10);\n }\n }\n\n function closeModal(event) {\n if (event.target.id === 'cardModal') {\n closeModalDirect();\n }\n }\n\n function closeModalDirect() {\n const modal = document.getElementById('cardModal');\n const modalContent = document.getElementById('modalContent');\n \n if (modal && modalContent) {\n modalContent.classList.remove('scale-100', 'opacity-100');\n modalContent.classList.add('scale-95', 'opacity-0');\n setTimeout(() => {\n modal.classList.add('hidden');\n }, 200);\n }\n }\n\n window.addEventListener('DOMContentLoaded', () => {\n renderCards(courses);\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u8018\u5922\u5b78\u82d1 \u8ab2\u7a0b\u5c55\u793a\u9928 YUN MENG DRAMA ACADEMY \u8ab2 \u7a0b \u5c55 \u793a \u9928 \u7528\u6232\u5287\u91cd\u69cb\u611f\u5b98\uff0c\u5728\u5149\u8207 … <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/udreamart.com\/index.php\/elementor-663\/\" class=\"more-link\">\u95b1\u8b80\u5168\u6587<span class=\"screen-reader-text\">\u3008\u8ab2\u7a0b\u8cc7\u8a0a\u3009<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-663","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/pages\/663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/comments?post=663"}],"version-history":[{"count":14,"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/pages\/663\/revisions"}],"predecessor-version":[{"id":683,"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/pages\/663\/revisions\/683"}],"wp:attachment":[{"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/media?parent=663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n \u8018\u5922\u5b78\u82d1 \u8ab2\u7a0b\u5c55\u793a\u9928<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n \n <style>\n body {\n font-family: 'Noto Sans TC', sans-serif;\n background-color: #0d0d0f;\n color: #e5e5e7;\n min-height: 100vh;\n background-image: \n radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),\n radial-gradient(circle at 85% 60%, rgba(180, 130, 60, 0.05) 0%, transparent 40%);\n background-attachment: fixed;\n }\n\n .font-serif-luxury {\n font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;\n }\n\n \/* \u53c3\u8003\u5716\u91d1\u5c6c\u9ad8\u5962\u6587\u5b57\u6f38\u5c64 *\/\n .gold-gradient-text {\n background: linear-gradient(135deg, #fff7e6 0%, #e6c887 40%, #b89348 80%, #fae19c 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .gold-subtext {\n color: #c5a059;\n letter-spacing: 0.25em;\n }\n\n \/* \u9ad8\u7d1a\u6c1b\u570d\u5361\u7247 (Atmospheric Photo Card) *\/\n .card-container {\n position: relative;\n border-radius: 20px;\n overflow: hidden;\n border: 1px solid rgba(212, 175, 55, 0.18);\n background: #141418;\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);\n transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n .card-container:hover {\n transform: translateY(-6px);\n border-color: rgba(230, 200, 135, 0.5);\n box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(197, 160, 89, 0.2);\n }\n\n .card-bg-img {\n transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s ease;\n filter: brightness(0.82) contrast(1.08) saturate(0.9);\n }\n\n .card-container:hover .card-bg-img {\n transform: scale(1.08);\n filter: brightness(0.95) contrast(1.12) saturate(1);\n }\n\n \/* \u5149\u7dda\u906e\u7f69\u96d9\u91cd\u5c64\u6b21 *\/\n .card-overlay {\n background: linear-gradient(\n 180deg, \n rgba(15, 15, 18, 0.35) 0%, \n rgba(15, 15, 18, 0.55) 45%, \n rgba(10, 10, 12, 0.94) 100%\n );\n }\n\n \/* \u53c3\u8003\u5716\u98a8\u683c\u81a0\u56ca\u6a19\u7c64 *\/\n .capsule-badge {\n background: rgba(28, 26, 24, 0.65);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(225, 195, 135, 0.3);\n color: #e5c88d;\n font-size: 11px;\n letter-spacing: 0.12em;\n }\n\n \/* \u5206\u985e\u6309\u9215\u9078\u4e2d\u614b *\/\n .filter-btn-active {\n background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(160, 120, 40, 0.15) 100%);\n border-color: rgba(230, 200, 135, 0.6) !important;\n color: #f7e7c4 !important;\n box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);\n }\n\n \/* \u81ea\u8a02\u5377\u8ef8 *\/\n ::-webkit-scrollbar { width: 8px; }\n ::-webkit-scrollbar-track { background: #0a0a0c; }\n ::-webkit-scrollbar-thumb { background: #2a2824; border-radius: 4px; }\n ::-webkit-scrollbar-thumb:hover { background: #4a4232; }\n <\/style>\n<\/head>\n<body class=\"antialiased pb-24 selection:bg-amber-500\/30 selection:text-amber-100\">\n\n \n <div class=\"fixed inset-0 pointer-events-none overflow-hidden -z-10\">\n <div class=\"absolute top-[-10%] left-[20%] w-[600px] h-[600px] rounded-full bg-amber-600\/10 blur-[160px]\"><\/div>\n <div class=\"absolute top-[40%] right-[-10%] w-[700px] h-[700px] rounded-full bg-yellow-700\/8 blur-[180px]\"><\/div>\n <div class=\"absolute bottom-[-10%] left-[-5%] w-[500px] h-[500px] rounded-full bg-orange-900\/10 blur-[150px]\"><\/div>\n <\/div>\n\n <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-10\">\n \n \n <header class=\"text-center mb-14\">\n <div class=\"inline-flex items-center gap-3 mb-3 px-4 py-1.5 rounded-full bg-amber-950\/30 border border-amber-500\/20 backdrop-blur-md\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse\"><\/span>\n <span class=\"text-[11px] font-medium tracking-[0.3em] uppercase gold-subtext\">YUN MENG DRAMA ACADEMY<\/span>\n <\/div>\n \n <h1 class=\"text-3xl sm:text-5xl lg:text-6xl font-bold font-serif-luxury tracking-widest gold-gradient-text mb-4 uppercase\">\n \u8ab2 \u7a0b \u5c55 \u793a \u9928\n <\/h1>\n \n <p class=\"text-sm sm:text-base text-stone-300 font-light max-w-2xl mx-auto tracking-wider leading-relaxed\">\n \u7528\u6232\u5287\u91cd\u69cb\u611f\u5b98\uff0c\u5728\u5149\u8207\u5f71\u7684\u5fae\u91ba\u6c1b\u570d\u4e2d\uff0c\u9047\u898b\u66f4\u5177\u611f\u67d3\u529b\u7684\u81ea\u5df1\u3002<br>\n <span class=\"text-xs text-amber-200\/70 mt-2 block font-normal tracking-widest\">\u2726 \u6bcf\u4e00\u5f35\u5361\u7247\uff0c\u7686\u662f\u4e00\u5834\u6c89\u6d78\u5f0f\u7684\u751f\u547d\u5287\u5834\u7df4\u7fd2<\/span>\n <\/p>\n <\/header>\n\n \n <div class=\"flex flex-col lg:flex-row items-center justify-between gap-4 mb-12 bg-stone-900\/60 p-3 sm:p-4 rounded-2xl backdrop-blur-xl border border-amber-500\/20 shadow-2xl\">\n \n \n <div class=\"flex flex-wrap justify-center gap-2 w-full lg:w-auto\">\n <button id=\"btn-all\" onclick=\"filterCategory('all')\" class=\"filter-btn filter-btn-active text-xs sm:text-sm font-medium px-4 py-2 rounded-xl transition-all duration-300 border border-stone-700\/50 text-stone-400 hover:text-stone-200\">\n \u5168\u90e8\u8ab2\u7a0b\n <\/button>\n <button id=\"btn-life\" onclick=\"filterCategory('life')\" class=\"filter-btn text-xs sm:text-sm font-medium px-4 py-2 rounded-xl transition-all duration-300 border border-stone-700\/50 text-stone-400 hover:text-stone-200\">\n \u4eba\u751f\u7df4\u7fd2\u8ab2\n <\/button>\n <button id=\"btn-stage\" onclick=\"filterCategory('stage')\" class=\"filter-btn text-xs sm:text-sm font-medium px-4 py-2 rounded-xl transition-all duration-300 border border-stone-700\/50 text-stone-400 hover:text-stone-200\">\n \u821e\u53f0\u8868\u6f14\u8ab2\n <\/button>\n <button id=\"btn-camera\" onclick=\"filterCategory('camera')\" class=\"filter-btn text-xs sm:text-sm font-medium px-4 py-2 rounded-xl transition-all duration-300 border border-stone-700\/50 text-stone-400 hover:text-stone-200\">\n \u93e1\u982d\u5be6\u6230\u8ab2\n <\/button>\n <button id=\"btn-kids\" onclick=\"filterCategory('kids')\" class=\"filter-btn text-xs sm:text-sm font-medium px-4 py-2 rounded-xl transition-all duration-300 border border-stone-700\/50 text-stone-400 hover:text-stone-200\">\n \u5c0f\u5927\u4eba\u5c08\u5340\n <\/button>\n <button id=\"btn-special\" onclick=\"filterCategory('special')\" class=\"filter-btn text-xs sm:text-sm font-medium px-4 py-2 rounded-xl transition-all duration-300 border border-stone-700\/50 text-stone-400 hover:text-stone-200\">\n \u7279\u5225\u4f01\u5283\n <\/button>\n <\/div>\n\n \n <div class=\"relative w-full lg:w-72\">\n <input type=\"text\" id=\"searchInput\" oninput=\"handleSearch()\" placeholder=\"\u641c\u5c0b\u8ab2\u7a0b\u540d\u7a31\u6216\u6c1b\u570d\u8aaa\u660e...\" \n class=\"w-full bg-stone-950\/80 text-stone-200 text-xs sm:text-sm rounded-xl pl-10 pr-4 py-2.5 border border-amber-500\/20 focus:outline-none focus:border-amber-400\/60 transition-all placeholder-stone-500\">\n <svg class=\"w-4 h-4 text-amber-500\/60 absolute left-3.5 top-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"><\/path>\n <\/svg>\n <\/div>\n <\/div>\n\n \n <div id=\"cardGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-7\">\n \n <\/div>\n\n \n <div id=\"noResults\" class=\"hidden text-center py-20\">\n <div class=\"inline-flex justify-center items-center w-16 h-16 rounded-full bg-amber-950\/30 border border-amber-500\/20 mb-4\">\n <svg class=\"w-8 h-8 text-amber-400\/60\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9.172 9.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>\n <\/div>\n <p class=\"text-stone-400 font-light text-base\">\u672a\u627e\u5230\u7b26\u5408\u689d\u4ef6\u7684\u8ab2\u7a0b\u5361\u7247<\/p>\n <button onclick=\"filterCategory('all'); document.getElementById('searchInput').value='';\" class=\"mt-4 text-xs text-amber-400 underline hover:text-amber-300\">\n \u91cd\u7f6e\u641c\u5c0b\u689d\u4ef6\n <\/button>\n <\/div>\n\n <\/div>\n\n \n <div id=\"cardModal\" onclick=\"closeModal(event)\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black\/85 backdrop-blur-md hidden transition-opacity duration-300\">\n <div id=\"modalContent\" class=\"relative w-full max-w-lg transition-all transform scale-95 opacity-0 duration-300\">\n <button onclick=\"closeModalDirect()\" class=\"absolute -top-12 right-0 text-stone-400 hover:text-white transition-colors p-2\">\n <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n <\/button>\n <div id=\"modalCardContainer\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u70ba\u6bcf\u5802\u8ab2\u7a0b\u914d\u7f6e\u5c08\u5c6c Unsplash \u9ad8\u8cea\u611f\u6696\u5149\u6c1b\u570d\u5e95\u5716 (Warm Lighting & Shadows)\n const courses = [\n \/\/ \u300a\u4eba\u751f\u7df4\u7fd2\u8ab2\u300b\n { \n id: 1, \n category: \"life\", \n categoryName: \"\u4eba\u751f\u7df4\u7fd2\u8ab2\", \n title: \"\u56de\u5230\u73fe\u5834\", \n desc: \"\u91cd\u65b0\u6253\u958b\u611f\u5b98\u8207\u60c5\u7dd2\uff0c\u627e\u56de\u771f\u5be6\u611f\u53d7\uff0c\u8b93\u81ea\u5df1\u771f\u6b63\u56de\u5230\u7576\u4e0b\u3002\", \n url: \"https:\/\/forms.gle\/zX4fijTQQXPkbNiS8\",\n image: \"https:\/\/images.unsplash.com\/photo-1509114397022-ed747cca3f65?q=80&w=800&auto=format&fit=crop\" \/\/ \u6eab\u6696\u5149\u7dda\u8207\u5f71\u5b50\n },\n { \n id: 2, \n category: \"life\", \n categoryName: \"\u4eba\u751f\u7df4\u7fd2\u8ab2\", \n title: \"\u6232\u5287\u958b\u767c\", \n desc: \"\u900f\u904e\u6232\u5287\u904a\u6232\u8207\u751f\u6d3b\u60c5\u5883\uff0c\u958b\u767c\u81ea\u7136\u8868\u9054\u3001\u4e92\u52d5\u53cd\u61c9\u8207\u4eba\u969b\u6e9d\u901a\u80fd\u529b\u3002\", \n url: \"https:\/\/forms.gle\/HShe1PZ6JeNg4zJn9\",\n image: \"https:\/\/images.unsplash.com\/photo-1514525253161-7a46d19cd819?q=80&w=800&auto=format&fit=crop\" \/\/ \u6696\u8272\u5287\u5834\u5149\u5f71\n },\n { \n id: 3, \n category: \"life\", \n categoryName: \"\u4eba\u751f\u7df4\u7fd2\u8ab2\", \n title: \"\u8eab\u9ad4\u4f7f\u7528\u8aaa\u660e\u66f8\", \n desc: \"\u8b80\u61c2\u81ea\u5df1\u7684\u8eab\u9ad4\u7fd2\u6163\uff0c\u5b78\u6703\u66f4\u653e\u9b06\u3001\u5354\u8abf\u800c\u6709\u81ea\u4fe1\u5730\u4f7f\u7528\u8eab\u9ad4\u3002\", \n url: \"https:\/\/forms.gle\/554tdt8Xp9R9uwG66\",\n image: \"https:\/\/images.unsplash.com\/photo-1508700115892-45ecd05ae2ad?q=80&w=800&auto=format&fit=crop\" \/\/ \u80a2\u9ad4\u526a\u5f71\u6696\u5149\n },\n { \n id: 4, \n category: \"life\", \n categoryName: \"\u4eba\u751f\u7df4\u7fd2\u8ab2\", \n title: \"\u8868\u60c5\u5de5\u4f5c\u574a\", \n desc: \"\u6253\u958b\u50f5\u786c\u6216\u55ae\u4e00\u7684\u8868\u60c5\u6a21\u5f0f\uff0c\u8b93\u60c5\u7dd2\u80fd\u81ea\u7136\u3001\u6e96\u78ba\u5730\u51fa\u73fe\u5728\u81c9\u4e0a\u3002\", \n url: \"https:\/\/forms.gle\/jVGyChqGfFhX4QXM7\",\n image: \"https:\/\/images.unsplash.com\/photo-1534528741775-53994a69daeb?q=80&w=800&auto=format&fit=crop\" \/\/ \u6696\u5149\u8096\u50cf\u5074\u5f71\n },\n { \n id: 5, \n category: \"life\", \n categoryName: \"\u4eba\u751f\u7df4\u7fd2\u8ab2\", \n title: \"\u5275\u9020\u500b\u4eba\u597dEQ\", \n desc: \"\u900f\u904e\u60c5\u5883\u6f14\u7df4\uff0c\u63d0\u5347\u60c5\u7dd2\u8fa8\u8b58\u3001\u58d3\u529b\u8abf\u7bc0\u8207\u4eba\u969b\u61c9\u5c0d\u80fd\u529b\u3002\", \n url: \"https:\/\/forms.gle\/56nENLqM2uudb8i36\",\n image: \"https:\/\/images.unsplash.com\/photo-1499209974431-9dddcece7f88?q=80&w=800&auto=format&fit=crop\" \/\/ \u6c89\u975c\u6668\u5149\u8207\u7a97\u5f71\n },\n { \n id: 6, \n category: \"life\", \n categoryName: \"\u4eba\u751f\u7df4\u7fd2\u8ab2\", \n title: \"\u6545\u4e8b\u884c\u92b7\", \n desc: \"\u628a\u7d93\u6b77\u3001\u54c1\u724c\u8207\u7406\u5ff5\u8aaa\u6210\u6709\u756b\u9762\u3001\u6709\u60c5\u611f\uff0c\u4e5f\u8b93\u4eba\u8a18\u5f97\u4f4f\u3002\", \n url: \"https:\/\/forms.gle\/W9Wokvx4VVEm3dcB6\",\n image: \"https:\/\/images.unsplash.com\/photo-1455390582262-044cdead277a?q=80&w=800&auto=format&fit=crop\" \/\/ \u5fa9\u53e4\u66f8\u5beb\u8207\u71c8\u5149\n },\n { \n id: 7, \n category: \"life\", \n categoryName: \"\u4eba\u751f\u7df4\u7fd2\u8ab2\", \n title: \"\u4eba\u751f\u8abf\u983b\u5ba4\", \n desc: \"\u900f\u904e\u500b\u4eba\u5316\u6232\u5287\u7df4\u7fd2\uff0c\u770b\u898b\u751f\u6d3b\u5361\u9ede\uff0c\u91cd\u65b0\u8abf\u6574\u60c5\u7dd2\u3001\u95dc\u4fc2\u8207\u4eba\u751f\u65b9\u5411\u3002\", \n url: \"https:\/\/forms.gle\/wy3SGmX8FK2EHhZy8\",\n image: \"https:\/\/images.unsplash.com\/photo-1518241353330-0f7941c2d9b5?q=80&w=800&auto=format&fit=crop\" \/\/ \u67d4\u548c\u5915\u967d\u5e7e\u4f55\u5149\u5f71\n },\n\n \/\/ \u300a\u821e\u53f0\u8868\u6f14\u8ab2\u300b\n { \n id: 8, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u555f\u52d5\u6232\u80de\", \n desc: \"\u5f9e\u96f6\u958b\u59cb\u6253\u958b\u611f\u5b98\u3001\u60c5\u7dd2\u8207\u53cd\u61c9\uff0c\u559a\u9192\u6bcf\u500b\u4eba\u8207\u751f\u4ff1\u4f86\u7684\u8868\u6f14\u672c\u80fd\u3002\", \n url: \"https:\/\/forms.gle\/1EcJHx9qUXxYJkDa6\",\n image: \"https:\/\/images.unsplash.com\/photo-1469488865564-c2de10f69f96?q=80&w=800&auto=format&fit=crop\" \/\/ \u821e\u53f0\u71c8\u5149\u526a\u5f71\n },\n { \n id: 9, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u6f14\u6280\u5be6\u9a57\u5ba4\", \n desc: \"\u900f\u904e\u591a\u5143\u8868\u6f14\u5be6\u9a57\uff0c\u63a2\u7d22\u611f\u5b98\u3001\u7a7a\u9593\u3001\u89d2\u8272\u8207\u771f\u5be6\u53cd\u61c9\u7684\u53ef\u80fd\u6027\u3002\", \n url: \"https:\/\/forms.gle\/7iakP19aj3mR9a4L8\",\n image: \"https:\/\/images.unsplash.com\/photo-1507676184212-d03ab07a01bf?q=80&w=800&auto=format&fit=crop\" \/\/ \u6232\u5287\u821e\u53f0\u805a\u7126\n },\n { \n id: 10, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u6f14\u54e1\u80a2\u9ad4\u958b\u767c\", \n desc: \"\u7a81\u7834\u8eab\u9ad4\u9650\u5236\uff0c\u63d0\u5347\u63a7\u5236\u529b\u3001\u8868\u73fe\u529b\u8207\u821e\u53f0\u4e0a\u7684\u80a2\u9ad4\u5275\u9020\u529b\u3002\", \n url: \"https:\/\/forms.gle\/rAAj9CuApChM75757\",\n image: \"https:\/\/images.unsplash.com\/photo-1547153760-18fc86324498?q=80&w=800&auto=format&fit=crop\" \/\/ \u73fe\u4ee3\u821e\u8207\u5149\u5f71\u5f35\u529b\n },\n { \n id: 11, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u904b\u7528\u6232\u80de\", \n desc: \"\u5c07\u5df2\u958b\u767c\u7684\u611f\u5b98\u3001\u60c5\u7dd2\u8207\u53cd\u61c9\u80fd\u529b\uff0c\u5be6\u969b\u904b\u7528\u5728\u89d2\u8272\u8207\u60c5\u5883\u8868\u6f14\u4e2d\u3002\", \n url: \"https:\/\/forms.gle\/8yCQQRJXBEKf4b718\",\n image: \"https:\/\/images.unsplash.com\/photo-1519741497674-611481863552?q=80&w=800&auto=format&fit=crop\" \/\/ \u6c89\u6d78\u5f0f\u5287\u9662\u71e6\u721b\u6696\u5149\u8207\u821e\u53f0\u5f35\u529b\n },\n { \n id: 12, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u8868\u6f14\u5be6\u4f5c\", \n desc: \"\u900f\u904e\u7247\u6bb5\u3001\u5834\u666f\u8207\u821e\u53f0\u6392\u7df4\uff0c\u628a\u8868\u6f14\u6280\u5de7\u8f49\u5316\u6210\u771f\u6b63\u80fd\u5448\u73fe\u7684\u4f5c\u54c1\u3002\", \n url: \"https:\/\/forms.gle\/UnUXprp4skWr5PFa6\",\n image: \"https:\/\/images.unsplash.com\/photo-1460723237483-7a6dc9d0b212?q=80&w=800&auto=format&fit=crop\" \/\/ \u5287\u5834\u6392\u7df4\u8cea\u611f\n },\n { \n id: 13, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u89d2\u8272\u63a2\u7d22\", \n desc: \"\u5f9e\u4eba\u7269\u80cc\u666f\u3001\u617e\u671b\u8207\u884c\u52d5\u51fa\u767c\uff0c\u5efa\u7acb\u7acb\u9ad4\u3001\u6709\u908f\u8f2f\u53c8\u6709\u751f\u547d\u529b\u7684\u89d2\u8272\u3002\", \n url: \"https:\/\/example.com\/course\/13\",\n image: \"https:\/\/images.unsplash.com\/photo-1503095396549-807759245b35?q=80&w=800&auto=format&fit=crop\" \/\/ \u61f7\u820a\u5287\u5834\u8207\u9762\u5177\n },\n { \n id: 14, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u8b80\u5287\", \n desc: \"\u900f\u904e\u5287\u672c\u5206\u6790\u8207\u8072\u97f3\u8868\u6f14\uff0c\u8b80\u61c2\u6587\u5b57\u80cc\u5f8c\u7684\u4eba\u7269\u95dc\u4fc2\u3001\u60c5\u7dd2\u8207\u6f5b\u53f0\u8a5e\u3002\", \n url: \"https:\/\/forms.gle\/nFSeJnpeZ12RsbHr9\",\n image: \"https:\/\/images.unsplash.com\/photo-1457369804613-52c61a468e7d?q=80&w=800&auto=format&fit=crop\" \/\/ \u6eab\u6696\u6aaf\u71c8\u8207\u5287\u672c\n },\n { \n id: 15, \n category: \"stage\", \n categoryName: \"\u821e\u53f0\u8868\u6f14\u8ab2\", \n title: \"\u6f14\u54e1\u935b\u9020\u5ba4\", \n desc: \"\u4f9d\u7167\u6f14\u54e1\u500b\u4eba\u689d\u4ef6\u8207\u76ee\u6a19\uff0c\u9032\u884c\u7cbe\u6e96\u3001\u6df1\u5165\u4e14\u5177\u5be6\u6230\u6027\u7684\u5c08\u696d\u8a13\u7df4\u3002\", \n url: \"https:\/\/forms.gle\/2i66BMB8AeYf2aqw8\",\n image: \"https:\/\/images.unsplash.com\/photo-1511671782779-c97d3d27a1d4?q=80&w=800&auto=format&fit=crop\" \/\/ \u5962\u83ef\u91d1\u5c6c\u8072\u5b78\u5fae\u5149\n },\n\n \/\/ \u300a\u93e1\u982d\u5be6\u6230\u8ab2\u300b\n { \n id: 16, \n category: \"camera\", \n categoryName: \"\u93e1\u982d\u5be6\u6230\u8ab2\", \n title: \"\u6c1b\u570d\u6f14\u54e1\u57f9\u8a13\", \n desc: \"\u5b78\u6703\u5728\u93e1\u982d\u4e2d\u81ea\u7136\u751f\u6d3b\u3001\u7a69\u5b9a\u53cd\u61c9\uff0c\u6210\u70ba\u80fd\u71df\u9020\u756b\u9762\u771f\u5be6\u611f\u7684\u6c1b\u570d\u6f14\u54e1\u3002\", \n url: \"https:\/\/forms.gle\/RQ749QfMmk7UU5LK9\",\n image: \"https:\/\/images.unsplash.com\/photo-1485846234645-a62644f84728?q=80&w=800&auto=format&fit=crop\" \/\/ \u96fb\u5f71\u81a0\u6372\u8207\u93e1\u982d\u5149\u5f71\n },\n { \n id: 17, \n category: \"camera\", \n categoryName: \"\u93e1\u982d\u5be6\u6230\u8ab2\", \n title: \"\u7279\u7d04\u6f14\u54e1\u57f9\u8a13\", \n desc: \"\u91dd\u5c0d\u6709\u53f0\u8a5e\u3001\u6709\u52d5\u4f5c\u8207\u60c5\u5883\u4efb\u52d9\u7684\u62cd\u651d\u9700\u6c42\uff0c\u5efa\u7acb\u5be6\u7528\u7684\u93e1\u982d\u8868\u6f14\u80fd\u529b\u3002\", \n url: \"https:\/\/forms.gle\/5HLSMN3XmByosfZQA\",\n image: \"https:\/\/images.unsplash.com\/photo-1536440136628-849c177e76a1?q=80&w=800&auto=format&fit=crop\" \/\/ \u7247\u5834\u651d\u5f71\u6a5f\u6696\u5149\n },\n { \n id: 18, \n category: \"camera\", \n categoryName: \"\u93e1\u982d\u5be6\u6230\u8ab2\", \n title: \"\u8a66\u93e1\u5e36\u600e\u9ebc\u62cd\", \n desc: \"\u5f9e\u9078\u666f\u3001\u69cb\u5716\u3001\u6536\u97f3\u5230\u8868\u6f14\uff0c\u5b8c\u6210\u4e00\u652f\u6e05\u695a\u3001\u81ea\u7136\u53c8\u5177\u7af6\u722d\u529b\u7684\u8a66\u93e1\u5f71\u7247\u3002\", \n url: \"https:\/\/forms.gle\/nMchk3pECdzGEjtn6\",\n image: \"https:\/\/images.unsplash.com\/photo-1598899134739-24c46f58b8c0?q=80&w=800&auto=format&fit=crop\" \/\/ \u5168\u65b0\u9078\u7528\uff1a\u651d\u5f71\u68da\u62cd\u651d\u8207\u8a66\u93e1\u93e1\u982d\u6c1b\u570d\u5716\n },\n { \n id: 19, \n category: \"camera\", \n categoryName: \"\u93e1\u982d\u5be6\u6230\u8ab2\", \n title: \"\u500b\u4eba\u9020\u578b\u5b9a\u4f4d\", \n desc: \"\u627e\u51fa\u9069\u5408\u81ea\u5df1\u7684\u5916\u578b\u5b9a\u4f4d\u8207\u93e1\u982d\u5f62\u8c61\uff0c\u5efa\u7acb\u9bae\u660e\u53c8\u5177\u8fa8\u8b58\u5ea6\u7684\u500b\u4eba\u98a8\u683c\u3002\", \n url: \"https:\/\/forms.gle\/mmQvzzc5RGUqfFg1A\",\n image: \"https:\/\/images.unsplash.com\/photo-1512496015851-a90fb38ba796?q=80&w=800&auto=format&fit=crop\" \/\/ \u5957\u7528\u539f\u8a66\u93e1\u5e36\u5e95\u5716\uff1a\u5177\u6642\u5c1a\u5149\u611f\u8207\u7279\u5beb\u98a8\u683c\n },\n { \n id: 20, \n category: \"camera\", \n categoryName: \"\u93e1\u982d\u5be6\u6230\u8ab2\", \n title: \"\u500b\u4eba\u59ff\u614b\u8abf\u6574\", \n desc: \"\u6539\u5584\u7ad9\u59ff\u3001\u5750\u59ff\u3001\u8d70\u8def\u8207\u93e1\u982d\u59ff\u614b\uff0c\u8b93\u6574\u9ad4\u72c0\u614b\u66f4\u81ea\u7136\u3001\u81ea\u4fe1\u3001\u6709\u8cea\u611f\u3002\", \n url: \"https:\/\/forms.gle\/C4g2eeQsojeabhMFA\",\n image: \"https:\/\/images.unsplash.com\/photo-1490481651871-ab68de25d43d?q=80&w=800&auto=format&fit=crop\" \/\/ \u6642\u5c1a\u5962\u83ef\u59ff\u614b\n },\n { \n id: 21, \n category: \"camera\", \n categoryName: \"\u93e1\u982d\u5be6\u6230\u8ab2\", \n title: \"\u4e00\u5c0d\u4e00\uff5c\u5c08\u696d\u57f9\u8a13\", \n desc: \"\u91dd\u5c0d\u500b\u4eba\u93e1\u982d\u554f\u984c\u8207\u63a5\u6848\u76ee\u6a19\uff0c\u63d0\u4f9b\u91cf\u8eab\u6253\u9020\u7684\u8868\u6f14\u8207\u8a66\u93e1\u8a13\u7df4\u3002\", \n url: \"https:\/\/forms.gle\/foVqPCTDPfUJWTU76\",\n image: \"https:\/\/images.unsplash.com\/photo-1579783902614-a3fb3927b675?q=80&w=800&auto=format&fit=crop\" \/\/ \u85dd\u8853\u7e6a\u756b\u822c\u6eab\u6696\u7279\u5beb\n },\n\n \/\/ \u300a\u5c0f\u5927\u4eba\u5c08\u5340\u300b\n { \n id: 22, \n category: \"kids\", \n categoryName: \"\u5c0f\u5927\u4eba\u5c08\u5340\", \n title: \"\u5152\u7ae5\u6232\u5287\uff5c\u60c5\u7dd2\u8868\u9054\", \n desc: \"\u900f\u904e\u904a\u6232\u8207\u89d2\u8272\u626e\u6f14\uff0c\u5e6b\u52a9\u5b69\u5b50\u8a8d\u8b58\u60c5\u7dd2\u3001\u52c7\u6562\u8868\u9054\u4e26\u5b78\u6703\u8207\u4eba\u76f8\u8655\u3002\", \n url: \"https:\/\/forms.gle\/ULDpqVoYkTo3pcb8A\",\n image: \"https:\/\/images.unsplash.com\/photo-1502086223501-7ea6ecd79368?q=80&w=800&auto=format&fit=crop\" \/\/ \u6eab\u6696\u7ae5\u8da3\u5922\u5e7b\u5149\u7dda\n },\n { \n id: 23, \n category: \"kids\", \n categoryName: \"\u5c0f\u5927\u4eba\u5c08\u5340\", \n title: \"\u9752\u5c11\u5e74\u6232\u5287\", \n desc: \"\u966a\u4f34\u9752\u5c11\u5e74\u63a2\u7d22\u81ea\u6211\u3001\u5efa\u7acb\u81ea\u4fe1\uff0c\u63d0\u5347\u8868\u9054\u3001\u6e9d\u901a\u8207\u5718\u968a\u5408\u4f5c\u80fd\u529b\u3002\", \n url: \"https:\/\/forms.gle\/Ci8RpoVUGjPhX7JW8\",\n image: \"https:\/\/images.unsplash.com\/photo-1529156069898-49953e39b3ac?q=80&w=800&auto=format&fit=crop\" \/\/ \u967d\u5149\u659c\u5c04\u8207\u9752\u6625\u7b11\u610f\n },\n { \n id: 24, \n category: \"kids\", \n categoryName: \"\u5c0f\u5927\u4eba\u5c08\u5340\", \n title: \"\u9752\u5c11\u5e74\u6b4c\u821e\u5287\u9ad4\u9a57\", \n desc: \"\u7d50\u5408\u6232\u5287\u3001\u6b4c\u5531\u8207\u821e\u8e48\uff0c\u8b93\u9752\u5c11\u5e74\u9ad4\u9a57\u5b8c\u6574\u53c8\u5145\u6eff\u6d3b\u529b\u7684\u821e\u53f0\u5275\u4f5c\u3002\", \n url: \"https:\/\/forms.gle\/2vi3voFrj5EqHFp86\",\n image: \"https:\/\/images.unsplash.com\/photo-1516450360452-9312f5e86fc7?q=80&w=800&auto=format&fit=crop\" \/\/ \u6b4c\u821e\u71b1\u60c5\u8e8d\u52d5\u821e\u53f0\n },\n { \n id: 25, \n category: \"kids\", \n categoryName: \"\u5c0f\u5927\u4eba\u5c08\u5340\", \n title: \"\u7ae5\u661f\u5922\u5de5\u5ee0\", \n desc: \"\u900f\u904e\u93e1\u982d\u3001\u8868\u6f14\u8207\u8a66\u93e1\u8a13\u7df4\uff0c\u57f9\u990a\u5b69\u5b50\u81ea\u7136\u3001\u81ea\u4fe1\u53c8\u5177\u5c08\u696d\u611f\u7684\u8868\u6f14\u80fd\u529b\u3002\", \n url: \"https:\/\/forms.gle\/oELDwhZyZim3t4mJ8\",\n image: \"https:\/\/images.unsplash.com\/photo-1478720568477-152d9b164e26?q=80&w=800&auto=format&fit=crop\" \/\/ \u805a\u5149\u71c8\u8207\u5c0f\u5c0f\u661f\u5149\n },\n\n \/\/ \u300a\u7279\u5225\u4f01\u5283\u300b\n { \n id: 26, \n category: \"special\", \n categoryName: \"\u7279\u5225\u4f01\u5283\", \n title: \"\u86fb\u8b8a\u8a08\u756b\", \n desc: \"\u900f\u904e\u5bc6\u96c6\u800c\u6df1\u5165\u7684\u6232\u5287\u8a13\u7df4\uff0c\u7a81\u7834\u6163\u6027\uff0c\u5b8c\u6210\u4e00\u6b21\u7531\u5167\u800c\u5916\u7684\u6210\u9577\u8207\u8f49\u8b8a\u3002\", \n url: \"https:\/\/forms.gle\/3TVQ8oYkB3z2541j7\",\n image: \"https:\/\/images.unsplash.com\/photo-1518709268805-4e9042af9f23?q=80&w=800&auto=format&fit=crop\" \/\/ \u7834\u66c9\u8207\u5149\u675f\u7834\u7a7a\n },\n { \n id: 27, \n category: \"special\", \n categoryName: \"\u7279\u5225\u4f01\u5283\", \n title: \"\u89ba\u9192\u8a08\u756b\", \n desc: \"\u628a\u6232\u5287\u7df4\u7fd2\u5e36\u9032\u65e5\u5e38\uff0c\u5728\u6301\u7e8c\u884c\u52d5\u4e2d\u63d0\u5347\u89ba\u5bdf\u3001\u8868\u9054\u8207\u81ea\u6211\u7406\u89e3\u3002\", \n url: \"https:\/\/forms.gle\/jk9cwiK4shSixGyo7\",\n image: \"https:\/\/images.unsplash.com\/photo-1507525428034-b723cf961d3e?q=80&w=800&auto=format&fit=crop\" \/\/ \u6668\u66e6\u89ba\u9192\u5927\u5730\n },\n { \n id: 28, \n category: \"special\", \n categoryName: \"\u7279\u5225\u4f01\u5283\", \n title: \"\u966a\u8dd1\u8a08\u756b\", \n desc: \"\u7531\u5c08\u696d\u6559\u7df4\u6301\u7e8c\u966a\u4f34\u7df4\u7fd2\u3001\u56de\u994b\u8207\u4fee\u6b63\uff0c\u8b93\u5b78\u7fd2\u4e0d\u518d\u505c\u5728\u8ab2\u5802\u88e1\u3002\", \n url: \"https:\/\/forms.gle\/jk9cwiK4shSixGyo7\",\n image: \"https:\/\/images.unsplash.com\/photo-1517245386807-bb43f82c33c4?q=80&w=800&auto=format&fit=crop\" \/\/ \u71c8\u5149\u4e0b\u6eab\u6696\u6307\u5c0e\n },\n { \n id: 29, \n category: \"special\", \n categoryName: \"\u7279\u5225\u4f01\u5283\", \n title: \"\u9ad4\u9a57\u8ab2\", \n desc: \"\u7528\u4e00\u5802\u8ab2\u8f15\u9b06\u8a8d\u8b58\u6232\u5287\u8a13\u7df4\uff0c\u627e\u5230\u6700\u9069\u5408\u81ea\u5df1\u7684\u5b78\u7fd2\u65b9\u5411\u3002\", \n url: \"https:\/\/forms.gle\/8n1Wvn67cV8oz7Uz8\",\n image: \"https:\/\/images.unsplash.com\/photo-1517457373958-b7bdd4587205?q=80&w=800&auto=format&fit=crop\" \/\/ \u6eab\u6696\u805a\u6703\u8207\u521d\u9ad4\u9a57\n }\n ];\n\n let currentCategory = 'all';\n\n function createCardHTML(course, isModal = false) {\n const heightClass = isModal ? 'h-[380px]' : 'h-[320px]';\n\n return `\n <div onclick=\"openModal(${course.id})\" class=\"card-container ${heightClass} relative rounded-2xl flex flex-col justify-between overflow-hidden cursor-pointer group select-none\">\n \n \n <img decoding=\"async\" src=\"${course.image}\" alt=\"${course.title}\" class=\"card-bg-img absolute inset-0 w-full h-full object-cover -z-10\" loading=\"lazy\" onerror=\"this.src='https:\/\/images.unsplash.com\/photo-1509114397022-ed747cca3f65?q=80&w=800&auto=format&fit=crop'\">\n\n \n <div class=\"card-overlay absolute inset-0 -z-10\"><\/div>\n\n \n <div class=\"flex justify-between items-center p-5 z-10 w-full\">\n <span class=\"capsule-badge text-[10px] sm:text-[11px] font-medium tracking-widest px-3 py-1 rounded-full shadow-lg\">\n ${course.categoryName}\n <\/span>\n <span class=\"text-[10px] text-amber-200\/50 font-serif-luxury tracking-widest uppercase\">\n NO. 0${course.id}\n <\/span>\n <\/div>\n\n \n <div class=\"p-5 z-10 flex flex-col justify-end mt-auto bg-gradient-to-t from-black\/80 via-black\/40 to-transparent\">\n \n <h3 class=\"text-xl sm:text-2xl font-bold font-serif-luxury tracking-wider text-amber-100 mb-2 group-hover:text-amber-300 transition-colors duration-300\">\n ${course.title}\n <\/h3>\n \n <p class=\"text-stone-300 text-xs sm:text-sm font-light leading-relaxed line-clamp-2 mb-4 opacity-90 group-hover:opacity-100 transition-opacity\">\n ${course.desc}\n <\/p>\n\n <div class=\"flex items-center justify-between pt-2 border-t border-amber-500\/20\">\n <span class=\"text-[11px] text-amber-400\/80 tracking-widest font-light group-hover:text-amber-300\">\n EXPLORE COURSE\n <\/span>\n \n ${course.url ? `\n <a href=\"${course.url}\" target=\"_blank\" rel=\"noopener noreferrer\" onclick=\"event.stopPropagation()\" class=\"inline-flex items-center gap-1.5 text-xs text-amber-200 bg-amber-950\/60 hover:bg-amber-600\/40 border border-amber-500\/30 hover:border-amber-400 px-3.5 py-1 rounded-full transition-all duration-300 backdrop-blur-md\">\n <span>\u4e86\u89e3\u7d30\u7bc0<\/span>\n <svg class=\"w-3 h-3 text-amber-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path><\/svg>\n <\/a>\n ` : ''}\n <\/div>\n\n <\/div>\n\n \n <div class=\"absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-amber-500\/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500\"><\/div>\n <\/div>\n `;\n }\n\n function renderCards(courseList) {\n const cardGrid = document.getElementById('cardGrid');\n const noResults = document.getElementById('noResults');\n\n if (!cardGrid || !noResults) return;\n\n if (courseList.length === 0) {\n cardGrid.innerHTML = '';\n noResults.classList.remove('hidden');\n } else {\n noResults.classList.add('hidden');\n cardGrid.innerHTML = courseList.map(c => createCardHTML(c)).join('');\n }\n }\n\n function filterCategory(cat) {\n currentCategory = cat;\n \n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.classList.remove('filter-btn-active');\n });\n\n const activeBtn = document.getElementById(`btn-${cat}`);\n if (activeBtn) {\n activeBtn.classList.add('filter-btn-active');\n }\n\n applyFilters();\n }\n\n function applyFilters() {\n const searchInput = document.getElementById('searchInput');\n const searchKeyword = searchInput ? searchInput.value.trim().toLowerCase() : '';\n \n let filtered = courses;\n\n if (currentCategory !== 'all') {\n filtered = filtered.filter(c => c.category === currentCategory);\n }\n\n if (searchKeyword) {\n filtered = filtered.filter(c => \n c.title.toLowerCase().includes(searchKeyword) || \n c.desc.toLowerCase().includes(searchKeyword) ||\n c.categoryName.toLowerCase().includes(searchKeyword)\n );\n }\n\n renderCards(filtered);\n }\n\n function handleSearch() {\n applyFilters();\n }\n\n function openModal(id) {\n const course = courses.find(c => c.id === id);\n if (!course) return;\n\n const modalContainer = document.getElementById('modalCardContainer');\n if (modalContainer) {\n modalContainer.innerHTML = createCardHTML(course, true);\n }\n\n const modal = document.getElementById('cardModal');\n const modalContent = document.getElementById('modalContent');\n \n if (modal && modalContent) {\n modal.classList.remove('hidden');\n setTimeout(() => {\n modalContent.classList.remove('scale-95', 'opacity-0');\n modalContent.classList.add('scale-100', 'opacity-100');\n }, 10);\n }\n }\n\n function closeModal(event) {\n if (event.target.id === 'cardModal') {\n closeModalDirect();\n }\n }\n\n function closeModalDirect() {\n const modal = document.getElementById('cardModal');\n const modalContent = document.getElementById('modalContent');\n \n if (modal && modalContent) {\n modalContent.classList.remove('scale-100', 'opacity-100');\n modalContent.classList.add('scale-95', 'opacity-0');\n setTimeout(() => {\n modal.classList.add('hidden');\n }, 200);\n }\n }\n\n window.addEventListener('DOMContentLoaded', () => {\n renderCards(courses);\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u8018\u5922\u5b78\u82d1 \u8ab2\u7a0b\u5c55\u793a\u9928 YUN MENG DRAMA ACADEMY \u8ab2 \u7a0b \u5c55 \u793a \u9928 \u7528\u6232\u5287\u91cd\u69cb\u611f\u5b98\uff0c\u5728\u5149\u8207 … <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/udreamart.com\/index.php\/elementor-663\/\" class=\"more-link\">\u95b1\u8b80\u5168\u6587<span class=\"screen-reader-text\">\u3008\u8ab2\u7a0b\u8cc7\u8a0a\u3009<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-663","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/pages\/663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/comments?post=663"}],"version-history":[{"count":14,"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/pages\/663\/revisions"}],"predecessor-version":[{"id":683,"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/pages\/663\/revisions\/683"}],"wp:attachment":[{"href":"https:\/\/udreamart.com\/index.php\/wp-json\/wp\/v2\/media?parent=663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}