羅總務長的話 (Dean of General Affairs Lo)

https://gemini.google.com/share/41f43eb59a04

<!doctype html>

<head>

<title>ASMA三軸轉型學院</title>

<style>

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%;overflow:hidden}

:root{--bg:#0a0e1a;--surface:#131a2e;--text:#e8eaf0;--accent:#00e5a0;--accent2:#6366f1}

body{font-family:'Noto Sans TC',sans-serif;background:var(--bg);color:var(--text)}

.font-orbitron{font-family:'Orbitron','Noto Sans TC',sans-serif}

.app-wrapper{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}

.hero-bg{background:linear-gradient(135deg,#0a0e1a 0%,#131a2e 40%,#1a1040 70%,#0a0e1a 100%);position:relative;overflow:hidden}

.hero-bg::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 50%,rgba(0,229,160,.08) 0%,transparent 50%),radial-gradient(circle at 70% 30%,rgba(99,102,241,.08) 0%,transparent 50%);animation:drift 20s ease-in-out infinite}

@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(2%,1%)}}

.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(0,229,160,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,160,.03) 1px,transparent 1px);background-size:60px 60px}

.glow-line{height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent)}

.card-hover{transition:all .4s cubic-bezier(.25,.8,.25,1)}

.card-hover:hover{transform:translateY(-8px);box-shadow:0 20px 60px rgba(0,229,160,.15)}

.nav-link{position:relative;transition:color .3s}

.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent);transition:width .3s}

.nav-link:hover::after,.nav-link.active::after{width:100%}

.fade-in{opacity:0;transform:translateY(30px);transition:all .7s cubic-bezier(.25,.8,.25,1)}

.fade-in.visible{opacity:1;transform:translateY(0)}

.axis-icon{width:80px;height:80px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;overflow:hidden}

.axis-icon::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);pointer-events:none}

.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}

.stat-num{font-size:2.5rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.section-title{position:relative;display:inline-block}

.section-title::after{content:'';position:absolute;bottom:-8px;left:0;width:60px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px}

.team-card{position:relative;overflow:hidden;border-radius:16px}

.team-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(10,14,26,.9) 100%);z-index:1;pointer-events:none}

.scroll-top{position:fixed;bottom:24px;right:24px;z-index:50;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:all .3s;pointer-events:none}

.scroll-top.show{opacity:1;pointer-events:auto}

.nav-mobile{transform:translateX(100%);transition:transform .3s}

.nav-mobile.open{transform:translateX(0)}

.timeline-dot{width:16px;height:16px;border-radius:50%;border:3px solid var(--accent);background:var(--bg);position:relative;z-index:2}

.timeline-line{position:absolute;left:7px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent),var(--accent2));z-index:1}

</style>

</head>

</div><span class="font-orbitron font-bold text-lg hidden sm:block" id="navTitle">ASMA</span> </a>

</div><button class="md:hidden" onclick="toggleMobileNav()" style="color:var(--text)"><i data-lucide="menu" style="width:24px;height:24px"></i></button>

</div>

</nav>

</div>

</div>

</div>

<div class="pulse-dot"></div><span class="text-sm" style="color:var(--accent)">AI永續智動協會官方平台</span>

</div>

<h1 class="font-orbitron font-900 text-4xl sm:text-5xl lg:text-7xl leading-tight mb-4" id="heroTitle"><span style="color:var(--text)">ASMA</span><br><span style="background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text" id="heroSubtitle">三軸轉型學院</span></h1>

<p class="text-lg sm:text-xl mb-8 max-w-lg mx-auto lg:mx-0" style="color:rgba(232,234,240,.6)">以 <strong style="color:var(--accent)">AI人工智慧</strong>、<strong style="color:#818cf8">永續發展</strong>、<strong style="color:#f472b6">智慧自動化</strong> 三大軸心，驅動企業與個人的數位轉型之路</p>

<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"><button onclick="scrollToSection('courses')" class="px-8 py-4 rounded-xl font-bold text-lg transition-all duration-300 hover:scale-105" id="ctaBtn" style="background:linear-gradient(135deg,var(--accent),#00c896);color:var(--bg)">立即探索課程</button> <button onclick="scrollToSection('about')" class="px-8 py-4 rounded-xl font-bold text-lg transition-all duration-300 hover:scale-105" style="border:1px solid rgba(0,229,160,.3);color:var(--accent);background:transparent">了解更多 →</button>

</div>

A·S·M·A

</div>

AI · Sustainability · Motion · Automation

</div>

</div>

</div>

500+

</div>

培訓企業

</div>

12,000+

</div>

學員人數

</div>

98%

</div>

滿意度

</div>

50+

</div>

專業講師

</div>

</section>

<p class="text-lg leading-relaxed mb-6" style="color:rgba(232,234,240,.7)">ASMA三軸轉型學院（AI永續智動協會）成立於台灣，致力於整合 <strong style="color:var(--accent)">人工智慧（AI）</strong>、<strong style="color:#818cf8">永續發展（Sustainability）</strong> 與 <strong style="color:#f472b6">智慧自動化（Smart Automation）</strong> 三大領域，為企業與個人提供最前沿的轉型教育與顧問服務。</p>

<p class="text-lg leading-relaxed mb-8" style="color:rgba(232,234,240,.7)">我們深信，唯有同時掌握科技力、永續力與執行力，才能在瞬息萬變的時代中持續成長。學院結合產學研資源，打造實戰導向的課程體系，協助組織從策略規劃到落地執行的全方位轉型。</p>

<div class="flex flex-wrap gap-3"><span class="px-4 py-2 rounded-full text-sm" style="background:rgba(0,229,160,.1);color:var(--accent);border:1px solid rgba(0,229,160,.2)">🏛️ 政府認證機構</span> <span class="px-4 py-2 rounded-full text-sm" style="background:rgba(99,102,241,.1);color:#818cf8;border:1px solid rgba(99,102,241,.2)">🌏 國際合作夥伴</span> <span class="px-4 py-2 rounded-full text-sm" style="background:rgba(244,114,182,.1);color:#f472b6;border:1px solid rgba(244,114,182,.2)">🎓 產學研整合</span>

</div>

<p class="text-sm" style="color:rgba(232,234,240,.5)">賦能每個組織掌握AI轉型的關鍵能力</p>

</div>

<p class="text-sm" style="color:rgba(232,234,240,.5)">成為亞太地區領先的三軸轉型平台</p>

</div>

</div>

</section>

<h2 class="section-title text-3xl sm:text-4xl font-bold mx-auto" style="color:var(--text)">三軸核心架構</h2>

<p class="mt-6 text-lg max-w-2xl mx-auto" style="color:rgba(232,234,240,.5)">以AI、永續、智動三大軸心交織構成完整的轉型生態系</p>

</div>

🤖

</div>

<h3 class="text-2xl font-bold mb-3" style="color:var(--accent)">AI 人工智慧軸</h3>

<p class="mb-4" style="color:rgba(232,234,240,.6)">從機器學習、深度學習到生成式AI，全面掌握AI技術的核心原理與實務應用，培養組織的AI素養與落地能力。</p>

<li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)"><i data-lucide="check-circle" style="width:16px;height:16px;color:var(--accent)"></i>ChatGPT / LLM 企業應用</li>

<li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)"><i data-lucide="check-circle" style="width:16px;height:16px;color:var(--accent)"></i>AI數據分析與決策</li>

<li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)"><i data-lucide="check-circle" style="width:16px;height:16px;color:var(--accent)"></i>電腦視覺與NLP</li>

<li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)"><i data-lucide="check-circle" style="width:16px;height:16px;color:var(--accent)"></i>AI倫理與治理</li>

</ul><a href="https://www.google.com/search?q=AI+artificial+intelligence+enterprise+transformation" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-sm font-medium" style="color:var(--accent)">探索AI資源 <i data-lucide="external-link" style="width:14px;height:14px"></i></a>

</div>

🌱

</div>

<h3 class="text-2xl font-bold mb-3" style="color:#818cf8">永續發展軸</h3>

<p class="mb-4" style="color:rgba(232,234,240,.6)">對接聯合國SDGs與ESG框架，將永續策略融入企業DNA，實現環境、社會與治理的三重底線平衡。</p>

<li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)"><i data-lucide="check-circle" style="width:16px;height:16px;color:#818cf8"></i>ESG策略規劃與報告</li>

<li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)"><i data-lucide="check-circle" style="width:16px;height:16px;color:#818cf8"></i>碳盤查與淨零路徑</li>

<li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)"><i data-lucide="check-circle" style="width:16px;height:16px;color:#818cf8"></i>循環經濟模式設計</li>

<li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)"><i data-lucide="check-circle" style="width:16px;height:16px;color:#818cf8"></i>SDGs對接與影響力評估</li>

</ul><a href="https://sdgs.un.org/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-sm font-medium" style="color:#818cf8">聯合國SDGs <i data-lucide="external-link" style="width:14px;height:14px"></i></a>

</div>

⚡

</div>

<h3 class="text-2xl font-bold mb-3" style="color:#f472b6">智慧自動化軸</h3>

<p class="mb-4" style="color:rgba(232,234,240,.6)">結合RPA、IoT與智慧製造技術，實現流程自動化與智慧決策，提升營運效率與競爭優勢。</p>

<li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)"><i data-lucide="check-circle" style="width:16px;height:16px;color:#f472b6"></i>RPA流程自動化</li>

<li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)"><i data-lucide="check-circle" style="width:16px;height:16px;color:#f472b6"></i>IoT物聯網整合</li>

<li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)"><i data-lucide="check-circle" style="width:16px;height:16px;color:#f472b6"></i>數位孿生技術</li>

</ul><a href="https://www.google.com/search?q=smart+automation+industry+4.0+digital+transformation" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-sm font-medium" style="color:#f472b6">智動資源 <i data-lucide="external-link" style="width:14px;height:14px"></i></a>

</div>

</section>

<h2 class="section-title text-3xl sm:text-4xl font-bold mx-auto" style="color:var(--text)">精選課程方案</h2>

<p class="mt-6 text-lg max-w-2xl mx-auto" style="color:rgba(232,234,240,.5)">從入門到進階，從個人到企業，打造最適合的學習路徑</p>

</div>

</div>

</div>

</section>

<p class="mt-6 text-lg max-w-2xl mx-auto" style="color:rgba(232,234,240,.5)">匯聚產學研頂尖專家，帶領您走在轉型最前線</p>

</div>

</div>

</section>

</div>

</div>

</section>

<h2 class="text-2xl font-bold mb-8 fade-in" style="color:var(--text)">合作夥伴與認證</h2>

<div class="flex flex-wrap justify-center gap-8 items-center fade-in"><a href="https://www.microsoft.com/zh-tw/ai" target="_blank" rel="noopener noreferrer" class="px-6 py-3 rounded-xl transition-all hover:scale-105" style="background:var(--bg);border:1px solid rgba(255,255,255,.05);color:rgba(232,234,240,.5)">🏢 Microsoft AI Partner</a> <a href="https://cloud.google.com/ai" target="_blank" rel="noopener noreferrer" class="px-6 py-3 rounded-xl transition-all hover:scale-105" style="background:var(--bg);border:1px solid rgba(255,255,255,.05);color:rgba(232,234,240,.5)">☁️ Google Cloud AI</a> <a href="https://www.nvidia.com/zh-tw/" target="_blank" rel="noopener noreferrer" class="px-6 py-3 rounded-xl transition-all hover:scale-105" style="background:var(--bg);border:1px solid rgba(255,255,255,.05);color:rgba(232,234,240,.5)">🎮 NVIDIA DLI</a> <a href="https://sdgs.un.org/" target="_blank" rel="noopener noreferrer" class="px-6 py-3 rounded-xl transition-all hover:scale-105" style="background:var(--bg);border:1px solid rgba(255,255,255,.05);color:rgba(232,234,240,.5)">🌍 UN SDGs</a> <a href="https://www.twse.com.tw/zh/listed/governance/cg-practice.html" target="_blank" rel="noopener noreferrer" class="px-6 py-3 rounded-xl transition-all hover:scale-105" style="background:var(--bg);border:1px solid rgba(255,255,255,.05);color:rgba(232,234,240,.5)">📊 台灣ESG聯盟</a>

</div>

</section>

<p class="text-lg mb-8" style="color:rgba(232,234,240,.6)">無論您是企業決策者、HR主管或個人學習者，我們都樂意為您量身打造最適合的轉型方案。</p>

</div>

<div>

地址

</div>

台北市信義區信義路五段7號

</div>

</div>

<div>

</div>

info@asma-academy.org

</div>

</div>

<div>

電話

</div>

+886-2-2720-ASMA

</div>

</div>

<div>

</div>

<div>

<label for="email" class="block text-sm mb-1" style="color:rgba(232,234,240,.5)">Email</label><input id="email" type="email" class="w-full px-4 py-3 rounded-xl text-sm outline-none focus:ring-2" style="background:var(--bg);border:1px solid rgba(255,255,255,.1);color:var(--text);--tw-ring-color:var(--accent)" placeholder="your@email.com">

</div>

<div>

</div>

<div>

<label for="interest" class="block text-sm mb-1" style="color:rgba(232,234,240,.5)">感興趣的領域</label> <select id="interest" class="w-full px-4 py-3 rounded-xl text-sm outline-none focus:ring-2" style="background:var(--bg);border:1px solid rgba(255,255,255,.1);color:var(--text);--tw-ring-color:var(--accent)"> <option value="">請選擇</option><option value="ai">AI人工智慧</option><option value="esg">永續發展ESG</option><option value="auto">智慧自動化</option><option value="all">三軸整合方案</option> </select>

</div>

<div>

</div><button type="submit" id="submitBtn" class="w-full py-3 rounded-xl font-bold transition-all hover:scale-[1.02]" style="background:linear-gradient(135deg,var(--accent),#00c896);color:var(--bg)">送出諮詢</button>

</div>

</form>

</div>

</section>

<div>

</div><span class="font-orbitron font-bold" id="footerTitle">ASMA</span>

</div>

<p class="text-sm" style="color:rgba(232,234,240,.4)">AI永續智動協會<br>

三軸轉型學院</p>

</div>

<div>

</div>

<div>

<div class="space-y-2"><a href="https://sdgs.un.org/" target="_blank" rel="noopener noreferrer" class="block text-sm hover:underline" style="color:rgba(232,234,240,.4)">聯合國SDGs</a> <a href="https://ai.google/" target="_blank" rel="noopener noreferrer" class="block text-sm hover:underline" style="color:rgba(232,234,240,.4)">Google AI</a> <a href="https://openai.com/" target="_blank" rel="noopener noreferrer" class="block text-sm hover:underline" style="color:rgba(232,234,240,.4)">OpenAI</a>

</div>

<div>

<p>📧 info@asma-academy.org</p>

<p>📍 台北市信義區</p>

</div>

<div class="flex gap-4"><a href="#" class="hover:underline">隱私權政策</a> <a href="#" class="hover:underline">服務條款</a>

</div>

</footer>

</div> <button class="scroll-top" id="scrollTopBtn" onclick="scrollToSection('hero')"><i data-lucide="chevron-up" style="width:24px;height:24px"></i></button>

</div>

// Data

const courses = [

{cat:'ai',emoji:'🧠',title:'生成式AI企業實戰班',duration:'3天',level:'中階',price:'NT$18,000',desc:'深入學習ChatGPT、Claude、Midjourney等工具的企業級應用，含Prompt Engineering與API整合實作。',link:'https://www.google.com/search?q=generative+AI+enterprise+training'},

{cat:'ai',emoji:'📊',title:'AI數據科學基礎班',duration:'5天',level:'入門',price:'NT$15,000',desc:'從Python基礎到機器學習模型建構，掌握數據清洗、特徵工程與模型評估的核心技能。',link:'https://www.google.com/search?q=AI+data+science+fundamentals+course'},

{cat:'esg',emoji:'🌍',title:'ESG永續報告實作班',duration:'2天',level:'中階',price:'NT$12,000',desc:'學習GRI、SASB、TCFD框架，實際操作ESG報告撰寫與碳盤查計算工具。',link:'https://www.google.com/search?q=ESG+sustainability+reporting+training'},

{cat:'esg',emoji:'♻️',title:'碳中和策略規劃師',duration:'4天',level:'進階',price:'NT$25,000',desc:'從碳足跡計算到淨零路徑規劃，取得碳管理專業認證，成為企業永續轉型顧問。',link:'https://sdgs.un.org/goals'},

{cat:'auto',emoji:'🤖',title:'RPA自動化工程師',duration:'3天',level:'中階',price:'NT$20,000',desc:'學習UiPath、Power Automate等RPA工具，實作企業流程自動化專案。',link:'https://www.google.com/search?q=RPA+automation+engineer+training'},

{cat:'auto',emoji:'🏭',title:'智慧工廠4.0規劃',duration:'2天',level:'進階',price:'NT$22,000',desc:'IoT感測器整合、數位孿生建模與MES系統導入，打造智慧製造藍圖。',link:'https://www.google.com/search?q=smart+factory+4.0+planning'}

];

const team = [

{name:'陳博士',title:'AI首席顧問',emoji:'👨‍🔬',bg:'linear-gradient(135deg,#0a2e1a,#131a2e)',desc:'前Google台灣AI研究員，專精NLP與LLM應用，15年AI產業經驗。'},

{name:'林教授',title:'永續策略總監',emoji:'👩‍🏫',bg:'linear-gradient(135deg,#1a1040,#131a2e)',desc:'台大環境工程博士，聯合國SDGs認證講師，主導50+企業ESG轉型專案。'},

{name:'王總監',title:'智動技術長',emoji:'👨‍💻',bg:'linear-gradient(135deg,#2a0a1a,#131a2e)',desc:'前台積電智慧製造部門主管，IoT與RPA整合專家，持有PMP認證。'},

{name:'張顧問',title:'數位轉型導師',emoji:'👩‍💼',bg:'linear-gradient(135deg,#0a1a2e,#1a2e0a)',desc:'麥肯錫資深顧問出身，協助200+企業完成三軸轉型策略規劃與落地。'}

];

const timeline = [

{year:'2020',title:'協會成立',desc:'AI永續智動協會在台北正式成立，匯聚首批30位產學研專家。',icon:'🚀'},

{year:'2021',title:'三軸課程體系建立',desc:'完成AI、永續、智動三大軸心課程的系統化建構，首期培訓120位學員。',icon:'📚'},

{year:'2022',title:'國際合作啟動',desc:'與Microsoft、Google Cloud建立AI教育合作夥伴關係，導入國際認證課程。',icon:'🌏'},

{year:'2023',title:'企業服務擴展',desc:'服務企業突破300家，推出客製化三軸轉型顧問服務，學員突破8,000人。',icon:'📈'},

{year:'2024',title:'學院升級',desc:'正式升級為「ASMA三軸轉型學院」，發佈AI永續智動白皮書，學員突破12,000人。',icon:'🏛️'},

{year:'2025',title:'亞太佈局',desc:'啟動亞太區域擴展計畫，目標成為區域最具影響力的三軸轉型教育平台。',icon:'🎯'}

];

// Render courses

function renderCourses(filter='all'){

const grid=document.getElementById('courseGrid');

const filtered=filter==='all'?courses:courses.filter(c=>c.cat===filter);

grid.innerHTML='';

filtered.forEach((c,i)=>{

const catColors={ai:'var(--accent)',esg:'#818cf8',auto:'#f472b6'};

const catLabels={ai:'AI系列',esg:'永續系列',auto:'智動系列'};

const el=document.createElement('div');

el.className='card-hover rounded-2xl overflow-hidden fade-in visible';

el.style.cssText=`background:var(--surface);border:1px solid rgba(255,255,255,.08);animation-delay:${i*100}ms`;

el.innerHTML=`

<span class="text-6xl">${c.emoji}</span>

<span class="absolute top-4 right-4 px-3 py-1 rounded-full text-xs font-medium" style="background:rgba(0,0,0,.3);color:${catColors[c.cat]}">${catLabels[c.cat]}</span>

</div>

<h3 class="text-lg font-bold mb-2" style="color:var(--text)">${c.title}</h3>

<span class="flex items-center gap-1"><i data-lucide="clock" style="width:12px;height:12px"></i>${c.duration}</span>

<span class="flex items-center gap-1"><i data-lucide="bar-chart-2" style="width:12px;height:12px"></i>${c.level}</span>

<span class="font-bold" style="color:${catColors[c.cat]}">${c.price}</span>

</div>

</div>

</div>`;

grid.appendChild(el);

});

lucide.createIcons();

}

function filterCourses(f){

document.querySelectorAll('.course-tab').forEach(t=>{

if(t.dataset.tab===f){t.style.background='var(--accent)';t.style.color='var(--bg)';t.style.border='none'}

else{t.style.background='var(--surface)';t.style.color='var(--text)';t.style.border='1px solid rgba(255,255,255,.1)'}

});

renderCourses(f);

}

function openCourseModal(idx){

const c=courses[idx];

const catColors={ai:'var(--accent)',esg:'#818cf8',auto:'#f472b6'};

document.getElementById('modalContent').innerHTML=`

<div class="text-center mb-6"><span class="text-6xl">${c.emoji}</span></div>

<h2 class="text-2xl font-bold mb-2" style="color:var(--text)">${c.title}</h2>

<div class="flex gap-4 mb-4 text-sm" style="color:rgba(232,234,240,.4)"><span>⏱ ${c.duration}</span><span>📊 ${c.level}</span><span style="color:${catColors[c.cat]};font-weight:bold">${c.price}</span></div>

<ul class="space-y-2 mb-6"><li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)">✅ 業界頂尖講師授課</li><li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)">✅ 實戰專案導向學習</li><li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)">✅ 完課發放認證證書</li><li class="flex items-center gap-2 text-sm" style="color:rgba(232,234,240,.5)">✅ 課後社群持續交流</li></ul>

<button onclick="closeCourseModal();scrollToSection('contact')" class="flex-1 py-3 rounded-xl font-bold" style="background:linear-gradient(135deg,var(--accent),#00c896);color:var(--bg)">立即報名諮詢</button>

</div>`;

document.getElementById('courseModal').classList.remove('hidden');

lucide.createIcons();

}

function closeCourseModal(){document.getElementById('courseModal').classList.add('hidden')}

// Render team

function renderTeam(){

const grid=document.getElementById('teamGrid');

team.forEach((t,i)=>{

const el=document.createElement('div');

el.className='team-card card-hover fade-in';

el.style.cssText=`animation-delay:${i*150}ms`;

el.innerHTML=`

<div class="h-56 flex items-center justify-center" style="background:${t.bg}"><span class="text-7xl">${t.emoji}</span></div>

<p class="text-sm mb-2" style="color:var(--accent)">${t.title}</p>

</div>`;

grid.appendChild(el);

});

}

// Render timeline

function renderTimeline(){

const container=document.getElementById('timelineContainer');

timeline.forEach((t,i)=>{

const el=document.createElement('div');

el.className='flex gap-6 fade-in relative';

el.style.cssText=`animation-delay:${i*150}ms`;

el.innerHTML=`

<h3 class="text-lg font-bold mt-1" style="color:var(--text)">${t.title}</h3>

</div>`;

container.appendChild(el);

});

}

// Scroll

function scrollToSection(id){

document.getElementById(id)?.scrollIntoView({behavior:'smooth'});

}

function toggleMobileNav(){document.getElementById('mobileNav').classList.toggle('open')}

// Form

function handleSubmit(e){

e.preventDefault();

const btn=document.getElementById('submitBtn');

const msg=document.getElementById('formMsg');

btn.textContent='送出中...';btn.disabled=true;

setTimeout(()=>{

btn.textContent='送出諮詢';btn.disabled=false;

msg.textContent='✅ 感謝您的諮詢！我們將於24小時內與您聯繫。';

msg.classList.remove('hidden');

e.target.reset();

setTimeout(()=>msg.classList.add('hidden'),5000);

},1500);

}

// Scroll observer

const wrapper=document.getElementById('appWrapper');

wrapper.addEventListener('scroll',()=>{

const btn=document.getElementById('scrollTopBtn');

btn.classList.toggle('show',wrapper.scrollTop>400);

});

// Intersection observer for fade-in

const obs=new IntersectionObserver((entries)=>{entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add('visible')})},{threshold:0.1,root:document.getElementById('appWrapper')});

function observeAll(){document.querySelectorAll('.fade-in').forEach(el=>obs.observe(el))}

// Init

renderCourses();renderTeam();renderTimeline();

lucide.createIcons();

setTimeout(observeAll,100);

// Element SDK

const defaultConfig={

site_title:'ASMA',

hero_subtitle:'三軸轉型學院',

cta_text:'立即探索課程',

background_color:'#0a0e1a',

surface_color:'#131a2e',

text_color:'#e8eaf0',

accent_color:'#00e5a0',

accent2_color:'#6366f1',

font_family:'Noto Sans TC',

font_size:16

};

function applyConfig(config){

const c=Object.assign({},defaultConfig,config);

document.documentElement.style.setProperty('--bg',c.background_color);

document.documentElement.style.setProperty('--surface',c.surface_color);

document.documentElement.style.setProperty('--text',c.text_color);

document.documentElement.style.setProperty('--accent',c.accent_color);

document.documentElement.style.setProperty('--accent2',c.accent2_color);

const nt=document.getElementById('navTitle');if(nt)nt.textContent=c.site_title;

const ft=document.getElementById('footerTitle');if(ft)ft.textContent=c.site_title;

const hs=document.getElementById('heroSubtitle');if(hs)hs.textContent=c.hero_subtitle;

const cb=document.getElementById('ctaBtn');if(cb)cb.textContent=c.cta_text;

document.body.style.fontFamily=`${c.font_family}, Noto Sans TC, sans-serif`;

}

if(window.elementSdk){

window.elementSdk.init({

defaultConfig,

onConfigChange:async(config)=>{applyConfig(config)},

mapToCapabilities:(config)=>({

recolorables:[

{get:()=>config.background_color||defaultConfig.background_color,set:v=>{config.background_color=v;window.elementSdk.setConfig({background_color:v})}},

{get:()=>config.surface_color||defaultConfig.surface_color,set:v=>{config.surface_color=v;window.elementSdk.setConfig({surface_color:v})}},

{get:()=>config.text_color||defaultConfig.text_color,set:v=>{config.text_color=v;window.elementSdk.setConfig({text_color:v})}},

{get:()=>config.accent_color||defaultConfig.accent_color,set:v=>{config.accent_color=v;window.elementSdk.setConfig({accent_color:v})}},

{get:()=>config.accent2_color||defaultConfig.accent2_color,set:v=>{config.accent2_color=v;window.elementSdk.setConfig({accent2_color:v})}}

borderables:[],

fontEditable:{get:()=>config.font_family||defaultConfig.font_family,set:v=>{config.font_family=v;window.elementSdk.setConfig({font_family:v})}},

fontSizeable:{get:()=>config.font_size||defaultConfig.font_size,set:v=>{config.font_size=v;window.elementSdk.setConfig({font_size:v})}}

}),

mapToEditPanelValues:(config)=>new Map([

['site_title',config.site_title||defaultConfig.site_title],

['hero_subtitle',config.hero_subtitle||defaultConfig.hero_subtitle],

['cta_text',config.cta_text||defaultConfig.cta_text]

])

});

}

</script>

</html>

羅總務長的話 (Dean of General Affairs Lo)

2026年5月13日星期三

沒有留言:

張貼留言

搜尋此網誌

2026年5月13日 星期三

沒有留言:

張貼留言

2026年5月13日星期三