2026.03.31 第一次接觸學校網站前置作業 健康管理系 （電腦小筆記）
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>開南大學 健康產業管理學系 | AI元年 世代領航</title>
<!-- 引入 Tailwind CSS 進行快速、現代化的排版與樣式設計 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入 FontAwesome 獲得科技與醫療圖示 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts: Noto Sans TC -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<script>
// 設定 Tailwind 自訂色彩主題
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['"Noto Sans TC"', 'sans-serif'],
},
colors: {
tech: {
dark: '#0B1120', // 深邃科技藍
primary: '#0EA5E9', // 科技青
accent: '#38BDF8', // 發光亮藍
},
health: {
primary: '#10B981', // 醫療綠
light: '#D1FAE5', // 淺綠背景
}
},
animation: {
'gradient-x': 'gradient-x 15s ease infinite',
'float': 'float 3s ease-in-out infinite',
},
keyframes: {
'gradient-x': {
'0%, 100%': {
'background-size': '200% 200%',
'background-position': 'left center'
},
'50%': {
'background-size': '200% 200%',
'background-position': 'right center'
},
},
'float': {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
}
}
}
}
</script>
<style>
/* 玻璃擬態 (Glassmorphism) 特效 */
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.glass-card-light {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
}
/* 漸層文字特效 */
.text-gradient {
background: linear-gradient(to right, #38BDF8, #10B981);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 隱藏滾動條但保留功能 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body class="font-sans antialiased text-gray-800 bg-slate-50 selection:bg-tech-primary selection:text-white">
<!-- 導覽列 Navbar -->
<nav class="fixed w-full z-50 transition-all duration-300 glass-card-light" id="navbar">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<!-- Logo 區域 -->
<div class="flex-shrink-0 flex items-center gap-3 cursor-pointer">
<!-- 使用 FontAwesome 醫療十字與科技網路的意象 -->
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-tech-primary to-health-primary flex items-center justify-center text-white text-xl shadow-lg shadow-tech-primary/30">
<i class="fa-solid fa-staff-snake"></i>
</div>
<div>
<h1 class="text-xl font-bold tracking-wider text-slate-800 leading-tight">開南大學</h1>
<h2 class="text-sm font-semibold text-tech-primary tracking-widest">健康產業管理學系</h2>
</div>
</div>
<!-- 桌面版選單 -->
<div class="hidden md:flex space-x-8 items-center">
<a href="#" class="text-slate-600 hover:text-tech-primary font-medium transition-colors">最新消息</a>
<a href="#" class="text-slate-600 hover:text-tech-primary font-medium transition-colors">系所簡介</a>
<a href="#" class="text-slate-600 hover:text-tech-primary font-medium transition-colors">師資陣容</a>
<a href="#ai-vision" class="text-slate-600 hover:text-tech-primary font-medium transition-colors">AI 發展願景</a>
<a href="#pdf-section" class="px-5 py-2 rounded-full bg-tech-dark text-white font-medium hover:bg-slate-800 transition-all shadow-md hover:shadow-lg transform hover:-translate-y-0.5"><i class="fa-solid fa-passport mr-2"></i>數位職能護照</a>
</div>
<!-- 手機版選單按鈕 -->
<div class="md:hidden flex items-center">
<button class="text-slate-600 hover:text-tech-primary focus:outline-none">
<i class="fa-solid fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- 英雄區塊 Hero Section (結合科技感與健康感) -->
<!-- 漸層背景：從深藍到醫療綠，加上動態漸層效果 -->
<section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-gradient-to-br from-slate-900 via-tech-dark to-teal-900 animate-gradient-x">
<!-- 裝飾性背景元素 -->
<div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-20 pointer-events-none">
<div class="absolute -top-24 -left-24 w-96 h-96 rounded-full bg-tech-primary blur-3xl mix-blend-screen"></div>
<div class="absolute top-1/2 right-12 w-80 h-80 rounded-full bg-health-primary blur-3xl mix-blend-screen"></div>
<!-- 模擬網格紋理 -->
<div class="absolute inset-0" style="background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 30px 30px;"></div>
</div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10">
<div class="text-center max-w-4xl mx-auto">
<span class="inline-block py-1 px-3 rounded-full bg-white/10 text-health-light border border-white/20 backdrop-blur-md text-sm font-semibold tracking-widest mb-6 animate-float">
<i class="fa-solid fa-microchip mr-2"></i>史上最大的典範轉移
</span>
<h1 class="text-4xl md:text-6xl font-black text-white mb-6 leading-tight">
健康產業管理學系 <br>
<span class="text-gradient">AI 元年 2026</span>
</h1>
<p class="text-lg md:text-xl text-slate-300 mb-10 font-light leading-relaxed">
不只是時間節點，而是教育樣貌的全面重塑。<br>
以人工智慧為核心驅動力，我們拒絕只當觀眾，必須成為創造者，<br>
<span class="font-medium text-white">培育次世代健康革命領導者！</span>
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#ai-vision" class="px-8 py-4 rounded-lg bg-health-primary text-white font-bold text-lg hover:bg-emerald-400 transition-all shadow-[0_0_20px_rgba(16,185,129,0.4)] hover:shadow-[0_0_30px_rgba(16,185,129,0.6)] flex items-center justify-center">
探索 AI 交匯點 <i class="fa-solid fa-arrow-right ml-2"></i>
</a>
<a href="#pdf-section" class="px-8 py-4 rounded-lg glass-card text-white font-bold text-lg hover:bg-white/10 transition-all flex items-center justify-center border border-white/30">
<i class="fa-regular fa-file-pdf mr-2"></i> 檢視發展白皮書
</a>
</div>
</div>
<!-- 數據條 -->
<div class="mt-20 grid grid-cols-1 md:grid-cols-3 gap-6 text-center divide-y md:divide-y-0 md:divide-x divide-white/20 glass-card rounded-2xl p-8">
<div class="p-4">
<h3 class="text-4xl font-black text-white mb-2">1,880億<span class="text-xl font-medium text-slate-400 ml-1">美元</span></h3>
<p class="text-tech-accent font-medium">2030年 AI 健康照護市場</p>
</div>
<div class="p-4">
<h3 class="text-4xl font-black text-white mb-2">37%</h3>
<p class="text-tech-accent font-medium">年複合成長率(CAGR) 高爆發</p>
</div>
<div class="p-4">
<h3 class="text-4xl font-black text-white mb-2">SDG 3 & 10</h3>
<p class="text-tech-accent font-medium">推動全民健康福祉與平權</p>
</div>
</div>
</div>
</section>
<!-- AI 願景區塊 (卡片式佈局) -->
<section id="ai-vision" class="py-24 bg-slate-50 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-4">AI × 健康管理：無限可能的交匯點</h2>
<div class="w-24 h-1 bg-gradient-to-r from-tech-primary to-health-primary mx-auto rounded-full mb-6"></div>
<p class="text-slate-600 max-w-2xl mx-auto text-lg">
從單純的「AI 使用者」進化為「AI 醫療創新管理者」。我們的課程與實作涵蓋四大核心領域：
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- 卡片 1 -->
<div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border-t-4 border-tech-primary group">
<div class="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center text-tech-primary text-2xl mb-6 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-stethoscope"></i>
</div>
<h3 class="text-xl font-bold text-slate-800 mb-4">臨床與照護</h3>
<ul class="space-y-3 text-slate-600">
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> AI 輔助影像判讀</li>
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 穿戴預測分析</li>
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 防跌陪伴機器人</li>
</ul>
</div>
<!-- 卡片 2 -->
<div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border-t-4 border-health-primary group">
<div class="w-16 h-16 rounded-full bg-green-50 flex items-center justify-center text-health-primary text-2xl mb-6 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-database"></i>
</div>
<h3 class="text-xl font-bold text-slate-800 mb-4">營運與大數據</h3>
<ul class="space-y-3 text-slate-600">
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 醫院排程最佳化</li>
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 疾病風險預測</li>
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 智慧醫材供應鏈</li>
</ul>
</div>
<!-- 卡片 3 -->
<div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border-t-4 border-purple-500 group">
<div class="w-16 h-16 rounded-full bg-purple-50 flex items-center justify-center text-purple-500 text-2xl mb-6 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-flask"></i>
</div>
<h3 class="text-xl font-bold text-slate-800 mb-4">研發與溝通</h3>
<ul class="space-y-3 text-slate-600">
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> AI 加速新藥開發</li>
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 數位醫療政策佈局</li>
</ul>
</div>
<!-- 卡片 4 -->
<div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border-t-4 border-amber-500 group">
<div class="w-16 h-16 rounded-full bg-amber-50 flex items-center justify-center text-amber-500 text-2xl mb-6 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-tower-cell"></i>
</div>
<h3 class="text-xl font-bold text-slate-800 mb-4">遠距與平台</h3>
<ul class="space-y-3 text-slate-600">
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 生成式個人化衛教</li>
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 慢性病遠端監控</li>
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 遠距醫療平台營運</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 解決用戶問題：PDF展示與職能護照區塊 -->
<section id="pdf-section" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- 左側：文字說明與下載按鈕 -->
<div>
<span class="text-tech-primary font-bold tracking-wider text-sm uppercase">資源下載與驗證</span>
<h2 class="text-3xl md:text-4xl font-bold text-slate-800 mt-2 mb-6">數位人才發展職能護照</h2>
<p class="text-slate-600 text-lg mb-6 leading-relaxed">
結合財團法人資訊工業策進會推動之「醫療資訊」職能護照，我們將學生的學習歷程、跨域專案（如自製聲光動小車、寫字機械手臂等）轉化為數位成就。
</p>
<p class="text-slate-600 text-lg mb-8 leading-relaxed">
打造可信、具稀缺性與應用性的數據經濟，讓您的專業能力成為國際通關的數位名片！
</p>
<!-- 這裡示範如何正確連結 PDF -->
<div class="bg-slate-50 p-6 rounded-xl border border-slate-200 mb-8">
<h4 class="font-bold text-slate-800 mb-3"><i class="fa-solid fa-lightbulb text-amber-500 mr-2"></i>網頁設計小知識：如何顯示 PDF？</h4>
<p class="text-sm text-slate-600 mb-4">若要在網頁中提供 PDF 供人檢視，我們通常會使用按鈕連結至檔案，或使用內嵌標籤（如下方的展示區塊）。</p>
<div class="flex flex-wrap gap-4">
<!-- 示範下載/開啟 PDF 的按鈕 -->
<a href="#" onclick="alert('這是一個示範按鈕。實務上請將 href 替換為您的 PDF 檔案路徑，例如：/files/passport.pdf'); return false;" class="inline-flex items-center px-5 py-2.5 rounded-lg bg-slate-800 text-white hover:bg-tech-primary transition-colors text-sm font-medium">
<i class="fa-solid fa-external-link-alt mr-2"></i>在新分頁開啟 PDF
</a>
<a href="#" class="inline-flex items-center px-5 py-2.5 rounded-lg border border-slate-300 text-slate-700 hover:bg-slate-100 transition-colors text-sm font-medium">
<i class="fa-solid fa-download mr-2"></i>下載 2026 白皮書
</a>
</div>
</div>
</div>
<!-- 右側：模擬 PDF 內嵌檢視器 (使用 iframe) -->
<div class="relative">
<!-- 裝飾用背景框 -->
<div class="absolute -inset-4 bg-gradient-to-r from-tech-primary/20 to-health-primary/20 rounded-2xl transform rotate-2"></div>
<div class="relative bg-white rounded-xl shadow-2xl overflow-hidden border border-slate-200 flex flex-col h-[500px]">
<!-- 模擬瀏覽器/PDF閱讀器標題列 -->
<div class="bg-slate-100 px-4 py-3 border-b border-slate-200 flex items-center justify-between">
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-400"></div>
<div class="w-3 h-3 rounded-full bg-amber-400"></div>
<div class="w-3 h-3 rounded-full bg-green-400"></div>
</div>
<div class="text-xs font-medium text-slate-500 flex-1 text-center font-mono">
數位人才發展職能護照-醫療資訊.pdf
</div>
</div>
<!-- 這是實務上嵌入 PDF 的 HTML 語法示範
因為目前沒有真實的 URL，這裡放一張示意圖片與文字說明 -->
<div class="flex-1 bg-slate-50 flex items-center justify-center p-8 relative overflow-hidden">
<!-- 實務作法：<iframe src="您的PDF路徑.pdf" class="w-full h-full border-0"></iframe> -->
<!-- 示意內容 -->
<div class="text-center z-10">
<i class="fa-regular fa-file-pdf text-6xl text-slate-300 mb-4"></i>
<h3 class="text-xl font-bold text-slate-700 mb-2">PDF 檢視器載入區塊</h3>
<p class="text-slate-500 text-sm max-w-xs mx-auto mb-4">
此處為 <iframe> 標籤的預留位置。<br>只要將 PDF 檔案上傳至伺服器並在此填入路徑，即可直接於網頁中預覽。
</p>
<div class="text-left bg-white p-4 rounded border border-slate-200 shadow-sm inline-block text-xs font-mono text-slate-600">
<iframe <br>
src="passport.pdf"<br>
width="100%" <br>
height="100%"><br>
</iframe>
</div>
</div>
<!-- 浮水印裝飾 -->
<i class="fa-solid fa-shield-halved absolute -right-10 -bottom-10 text-[200px] text-slate-100 -rotate-12"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 永續發展 SDGs 區塊 -->
<section class="py-20 bg-slate-900 text-white relative overflow-hidden">
<div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle at center, #10B981 0, transparent 50%); background-size: 100% 100%;"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-8">「真正的健康管理人才，必須是永續發展的實踐者。」</h2>
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 mt-12">
<div class="flex flex-col items-center">
<div class="w-20 h-20 rounded-2xl bg-health-primary text-white flex items-center justify-center text-3xl font-bold mb-4 shadow-[0_0_15px_rgba(16,185,129,0.5)]">
3
</div>
<h4 class="font-medium text-lg">良好健康與福祉</h4>
</div>
<div class="text-slate-500 text-2xl hidden md:block"><i class="fa-solid fa-plus"></i></div>
<div class="flex flex-col items-center">
<div class="w-20 h-20 rounded-2xl bg-pink-500 text-white flex items-center justify-center text-3xl font-bold mb-4 shadow-[0_0_15px_rgba(236,72,153,0.5)]">
10
</div>
<h4 class="font-medium text-lg">減少不平等</h4>
</div>
</div>
<p class="mt-8 text-slate-400 text-lg">推動全民健康福祉，縮短偏鄉醫療不平等。</p>
</div>
</section>
<!-- 頁尾 Footer -->
<footer class="bg-slate-950 text-slate-400 py-12 border-t border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<div class="flex items-center gap-2 mb-4 text-white">
<i class="fa-solid fa-staff-snake text-tech-primary text-xl"></i>
<span class="text-xl font-bold tracking-wider">開南大學 健管系</span>
</div>
<p class="text-sm mb-4">培育結合醫療資訊、人工智慧與營運管理的跨領域大健康產業人才。</p>
</div>
<div>
<h4 class="text-white font-bold mb-4">快速連結</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-tech-primary transition-colors">最新消息公告</a></li>
<li><a href="#" class="hover:text-tech-primary transition-colors">課程規劃與地圖</a></li>
<li><a href="#" class="hover:text-tech-primary transition-colors">招生資訊 (AI元年專案)</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">聯絡我們</h4>
<ul class="space-y-2 text-sm">
<li><i class="fa-solid fa-location-dot w-5 text-center mr-2"></i> 桃園市蘆竹區開南路1號</li>
<li><i class="fa-solid fa-phone w-5 text-center mr-2"></i> (03) 341-2500 分機 xxxx</li>
<li><i class="fa-solid fa-envelope w-5 text-center mr-2"></i> dha@mail.knu.edu.tw</li>
</ul>
</div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 pt-8 border-t border-slate-800 text-sm text-center">
© 2026 開南大學 健康產業管理學系. All rights reserved.
</div>
</footer>
<!-- 簡單的導覽列滾動效果 JS -->
<script>
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 20) {
navbar.classList.add('shadow-md');
navbar.classList.replace('glass-card-light', 'bg-white/95');
} else {
navbar.classList.remove('shadow-md');
navbar.classList.replace('bg-white/95', 'glass-card-light');
}
});
</script>
</body>
</html>
此語法讓一個東西飄來飄去
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>開南大學 健康產業管理學系 | AI元年 世代領航</title>
<!-- 引入 Tailwind CSS 進行快速、現代化的排版與樣式設計 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入 FontAwesome 獲得科技與醫療圖示 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts: Noto Sans TC -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<script>
// 設定 Tailwind 自訂色彩主題
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['"Noto Sans TC"', 'sans-serif'],
},
colors: {
tech: {
dark: '#0B1120', // 深邃科技藍
primary: '#0EA5E9', // 科技青
accent: '#38BDF8', // 發光亮藍
},
health: {
primary: '#10B981', // 醫療綠
light: '#D1FAE5', // 淺綠背景
}
},
animation: {
'gradient-x': 'gradient-x 15s ease infinite',
'float': 'float 3s ease-in-out infinite',
},
keyframes: {
'gradient-x': {
'0%, 100%': {
'background-size': '200% 200%',
'background-position': 'left center'
},
'50%': {
'background-size': '200% 200%',
'background-position': 'right center'
},
},
'float': {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
}
}
}
}
</script>
<style>
/* 玻璃擬態 (Glassmorphism) 特效 */
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.glass-card-light {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
}
/* 漸層文字特效 */
.text-gradient {
background: linear-gradient(to right, #38BDF8, #10B981);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 隱藏滾動條但保留功能 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body class="font-sans antialiased text-gray-800 bg-slate-50 selection:bg-tech-primary selection:text-white">
<!-- 導覽列 Navbar (將 fixed 改為 absolute，使其固定在頂部不隨螢幕滾動) -->
<nav class="absolute w-full z-50 transition-all duration-300 glass-card-light" id="navbar">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<!-- Logo 區域 -->
<div class="flex-shrink-0 flex items-center gap-3 cursor-pointer">
<!-- 使用 FontAwesome 醫療十字與科技網路的意象 -->
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-tech-primary to-health-primary flex items-center justify-center text-white text-xl shadow-lg shadow-tech-primary/30">
<i class="fa-solid fa-staff-snake"></i>
</div>
<div>
<h1 class="text-xl font-bold tracking-wider text-slate-800 leading-tight">開南大學</h1>
<h2 class="text-sm font-semibold text-tech-primary tracking-widest">健康產業管理學系</h2>
</div>
</div>
<!-- 桌面版選單 -->
<div class="hidden md:flex space-x-8 items-center">
<a href="#" class="text-slate-600 hover:text-tech-primary font-medium transition-colors">最新消息</a>
<a href="#" class="text-slate-600 hover:text-tech-primary font-medium transition-colors">系所簡介</a>
<a href="#" class="text-slate-600 hover:text-tech-primary font-medium transition-colors">師資陣容</a>
<a href="#ai-vision" class="text-slate-600 hover:text-tech-primary font-medium transition-colors">AI 發展願景</a>
<a href="#pdf-section" class="px-5 py-2 rounded-full bg-tech-dark text-white font-medium hover:bg-slate-800 transition-all shadow-md hover:shadow-lg transform hover:-translate-y-0.5"><i class="fa-solid fa-passport mr-2"></i>數位職能護照</a>
</div>
<!-- 手機版選單按鈕 -->
<div class="md:hidden flex items-center">
<button class="text-slate-600 hover:text-tech-primary focus:outline-none">
<i class="fa-solid fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- 英雄區塊 Hero Section (結合科技感與健康感) -->
<!-- 漸層背景：從深藍到醫療綠，移除動態漸層效果(animate-gradient-x)以保持視覺穩定 -->
<section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-gradient-to-br from-slate-900 via-tech-dark to-teal-900">
<!-- 裝飾性背景元素 -->
<div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-20 pointer-events-none">
<div class="absolute -top-24 -left-24 w-96 h-96 rounded-full bg-tech-primary blur-3xl mix-blend-screen"></div>
<div class="absolute top-1/2 right-12 w-80 h-80 rounded-full bg-health-primary blur-3xl mix-blend-screen"></div>
<!-- 模擬網格紋理 -->
<div class="absolute inset-0" style="background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 30px 30px;"></div>
</div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10">
<div class="text-center max-w-4xl mx-auto">
<!-- 移除 animate-float 特效，讓標籤保持靜止 -->
<span class="inline-block py-1 px-3 rounded-full bg-white/10 text-health-light border border-white/20 backdrop-blur-md text-sm font-semibold tracking-widest mb-6">
<i class="fa-solid fa-microchip mr-2"></i>史上最大的典範轉移
</span>
<h1 class="text-4xl md:text-6xl font-black text-white mb-6 leading-tight">
健康產業管理學系 <br>
<span class="text-gradient">AI 元年 2026</span>
</h1>
<p class="text-lg md:text-xl text-slate-300 mb-10 font-light leading-relaxed">
不只是時間節點，而是教育樣貌的全面重塑。<br>
以人工智慧為核心驅動力，我們拒絕只當觀眾，必須成為創造者，<br>
<span class="font-medium text-white">培育次世代健康革命領導者！</span>
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#ai-vision" class="px-8 py-4 rounded-lg bg-health-primary text-white font-bold text-lg hover:bg-emerald-400 transition-all shadow-[0_0_20px_rgba(16,185,129,0.4)] hover:shadow-[0_0_30px_rgba(16,185,129,0.6)] flex items-center justify-center">
探索 AI 交匯點 <i class="fa-solid fa-arrow-right ml-2"></i>
</a>
<a href="#pdf-section" class="px-8 py-4 rounded-lg glass-card text-white font-bold text-lg hover:bg-white/10 transition-all flex items-center justify-center border border-white/30">
<i class="fa-regular fa-file-pdf mr-2"></i> 檢視發展白皮書
</a>
</div>
</div>
<!-- 數據條 -->
<div class="mt-20 grid grid-cols-1 md:grid-cols-3 gap-6 text-center divide-y md:divide-y-0 md:divide-x divide-white/20 glass-card rounded-2xl p-8">
<div class="p-4">
<h3 class="text-4xl font-black text-white mb-2">1,880億<span class="text-xl font-medium text-slate-400 ml-1">美元</span></h3>
<p class="text-tech-accent font-medium">2030年 AI 健康照護市場</p>
</div>
<div class="p-4">
<h3 class="text-4xl font-black text-white mb-2">37%</h3>
<p class="text-tech-accent font-medium">年複合成長率(CAGR) 高爆發</p>
</div>
<div class="p-4">
<h3 class="text-4xl font-black text-white mb-2">SDG 3 & 10</h3>
<p class="text-tech-accent font-medium">推動全民健康福祉與平權</p>
</div>
</div>
</div>
</section>
<!-- AI 願景區塊 (卡片式佈局) -->
<section id="ai-vision" class="py-24 bg-slate-50 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-4">AI × 健康管理：無限可能的交匯點</h2>
<div class="w-24 h-1 bg-gradient-to-r from-tech-primary to-health-primary mx-auto rounded-full mb-6"></div>
<p class="text-slate-600 max-w-2xl mx-auto text-lg">
從單純的「AI 使用者」進化為「AI 醫療創新管理者」。我們的課程與實作涵蓋四大核心領域：
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- 卡片 1 -->
<div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border-t-4 border-tech-primary group">
<div class="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center text-tech-primary text-2xl mb-6 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-stethoscope"></i>
</div>
<h3 class="text-xl font-bold text-slate-800 mb-4">臨床與照護</h3>
<ul class="space-y-3 text-slate-600">
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> AI 輔助影像判讀</li>
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 穿戴預測分析</li>
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 防跌陪伴機器人</li>
</ul>
</div>
<!-- 卡片 2 -->
<div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border-t-4 border-health-primary group">
<div class="w-16 h-16 rounded-full bg-green-50 flex items-center justify-center text-health-primary text-2xl mb-6 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-database"></i>
</div>
<h3 class="text-xl font-bold text-slate-800 mb-4">營運與大數據</h3>
<ul class="space-y-3 text-slate-600">
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 醫院排程最佳化</li>
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 疾病風險預測</li>
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 智慧醫材供應鏈</li>
</ul>
</div>
<!-- 卡片 3 -->
<div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border-t-4 border-purple-500 group">
<div class="w-16 h-16 rounded-full bg-purple-50 flex items-center justify-center text-purple-500 text-2xl mb-6 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-flask"></i>
</div>
<h3 class="text-xl font-bold text-slate-800 mb-4">研發與溝通</h3>
<ul class="space-y-3 text-slate-600">
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> AI 加速新藥開發</li>
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 數位醫療政策佈局</li>
</ul>
</div>
<!-- 卡片 4 -->
<div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border-t-4 border-amber-500 group">
<div class="w-16 h-16 rounded-full bg-amber-50 flex items-center justify-center text-amber-500 text-2xl mb-6 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-tower-cell"></i>
</div>
<h3 class="text-xl font-bold text-slate-800 mb-4">遠距與平台</h3>
<ul class="space-y-3 text-slate-600">
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 生成式個人化衛教</li>
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 慢性病遠端監控</li>
<li class="flex items-start"><i class="fa-solid fa-check text-health-primary mt-1 mr-2"></i> 遠距醫療平台營運</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 解決用戶問題：PDF展示與職能護照區塊 -->
<section id="pdf-section" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- 左側：文字說明與下載按鈕 -->
<div>
<span class="text-tech-primary font-bold tracking-wider text-sm uppercase">資源下載與驗證</span>
<h2 class="text-3xl md:text-4xl font-bold text-slate-800 mt-2 mb-6">數位人才發展職能護照</h2>
<p class="text-slate-600 text-lg mb-6 leading-relaxed">
結合財團法人資訊工業策進會推動之「醫療資訊」職能護照，我們將學生的學習歷程、跨域專案（如自製聲光動小車、寫字機械手臂等）轉化為數位成就。
</p>
<p class="text-slate-600 text-lg mb-8 leading-relaxed">
打造可信、具稀缺性與應用性的數據經濟，讓您的專業能力成為國際通關的數位名片！
</p>
<!-- 這裡示範如何正確連結 PDF -->
<div class="bg-slate-50 p-6 rounded-xl border border-slate-200 mb-8">
<h4 class="font-bold text-slate-800 mb-3"><i class="fa-solid fa-lightbulb text-amber-500 mr-2"></i>網頁設計小知識：如何顯示 PDF？</h4>
<p class="text-sm text-slate-600 mb-4">若要在網頁中提供 PDF 供人檢視，我們通常會使用按鈕連結至檔案，或使用內嵌標籤（如下方的展示區塊）。</p>
<div class="flex flex-wrap gap-4">
<!-- 示範下載/開啟 PDF 的按鈕 -->
<a href="#" onclick="alert('這是一個示範按鈕。實務上請將 href 替換為您的 PDF 檔案路徑，例如：/files/passport.pdf'); return false;" class="inline-flex items-center px-5 py-2.5 rounded-lg bg-slate-800 text-white hover:bg-tech-primary transition-colors text-sm font-medium">
<i class="fa-solid fa-external-link-alt mr-2"></i>在新分頁開啟 PDF
</a>
<a href="#" class="inline-flex items-center px-5 py-2.5 rounded-lg border border-slate-300 text-slate-700 hover:bg-slate-100 transition-colors text-sm font-medium">
<i class="fa-solid fa-download mr-2"></i>下載 2026 白皮書
</a>
</div>
</div>
</div>
<!-- 右側：模擬 PDF 內嵌檢視器 (使用 iframe) -->
<div class="relative">
<!-- 裝飾用背景框 -->
<div class="absolute -inset-4 bg-gradient-to-r from-tech-primary/20 to-health-primary/20 rounded-2xl transform rotate-2"></div>
<div class="relative bg-white rounded-xl shadow-2xl overflow-hidden border border-slate-200 flex flex-col h-[500px]">
<!-- 模擬瀏覽器/PDF閱讀器標題列 -->
<div class="bg-slate-100 px-4 py-3 border-b border-slate-200 flex items-center justify-between">
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-400"></div>
<div class="w-3 h-3 rounded-full bg-amber-400"></div>
<div class="w-3 h-3 rounded-full bg-green-400"></div>
</div>
<div class="text-xs font-medium text-slate-500 flex-1 text-center font-mono">
數位人才發展職能護照-醫療資訊.pdf
</div>
</div>
<!-- 這是實務上嵌入 PDF 的 HTML 語法示範
因為目前沒有真實的 URL，這裡放一張示意圖片與文字說明 -->
<div class="flex-1 bg-slate-50 flex items-center justify-center p-8 relative overflow-hidden">
<!-- 實務作法：<iframe src="您的PDF路徑.pdf" class="w-full h-full border-0"></iframe> -->
<!-- 示意內容 -->
<div class="text-center z-10">
<i class="fa-regular fa-file-pdf text-6xl text-slate-300 mb-4"></i>
<h3 class="text-xl font-bold text-slate-700 mb-2">PDF 檢視器載入區塊</h3>
<p class="text-slate-500 text-sm max-w-xs mx-auto mb-4">
此處為 <iframe> 標籤的預留位置。<br>只要將 PDF 檔案上傳至伺服器並在此填入路徑，即可直接於網頁中預覽。
</p>
<div class="text-left bg-white p-4 rounded border border-slate-200 shadow-sm inline-block text-xs font-mono text-slate-600">
<iframe <br>
src="passport.pdf"<br>
width="100%" <br>
height="100%"><br>
</iframe>
</div>
</div>
<!-- 浮水印裝飾 -->
<i class="fa-solid fa-shield-halved absolute -right-10 -bottom-10 text-[200px] text-slate-100 -rotate-12"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 永續發展 SDGs 區塊 -->
<section class="py-20 bg-slate-900 text-white relative overflow-hidden">
<div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle at center, #10B981 0, transparent 50%); background-size: 100% 100%;"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-8">「真正的健康管理人才，必須是永續發展的實踐者。」</h2>
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 mt-12">
<div class="flex flex-col items-center">
<div class="w-20 h-20 rounded-2xl bg-health-primary text-white flex items-center justify-center text-3xl font-bold mb-4 shadow-[0_0_15px_rgba(16,185,129,0.5)]">
3
</div>
<h4 class="font-medium text-lg">良好健康與福祉</h4>
</div>
<div class="text-slate-500 text-2xl hidden md:block"><i class="fa-solid fa-plus"></i></div>
<div class="flex flex-col items-center">
<div class="w-20 h-20 rounded-2xl bg-pink-500 text-white flex items-center justify-center text-3xl font-bold mb-4 shadow-[0_0_15px_rgba(236,72,153,0.5)]">
10
</div>
<h4 class="font-medium text-lg">減少不平等</h4>
</div>
</div>
<p class="mt-8 text-slate-400 text-lg">推動全民健康福祉，縮短偏鄉醫療不平等。</p>
</div>
</section>
<!-- 頁尾 Footer -->
<footer class="bg-slate-950 text-slate-400 py-12 border-t border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<div class="flex items-center gap-2 mb-4 text-white">
<i class="fa-solid fa-staff-snake text-tech-primary text-xl"></i>
<span class="text-xl font-bold tracking-wider">開南大學 健管系</span>
</div>
<p class="text-sm mb-4">培育結合醫療資訊、人工智慧與營運管理的跨領域大健康產業人才。</p>
</div>
<div>
<h4 class="text-white font-bold mb-4">快速連結</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-tech-primary transition-colors">最新消息公告</a></li>
<li><a href="#" class="hover:text-tech-primary transition-colors">課程規劃與地圖</a></li>
<li><a href="#" class="hover:text-tech-primary transition-colors">招生資訊 (AI元年專案)</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">聯絡我們</h4>
<ul class="space-y-2 text-sm">
<li><i class="fa-solid fa-location-dot w-5 text-center mr-2"></i> 桃園市蘆竹區開南路1號</li>
<li><i class="fa-solid fa-phone w-5 text-center mr-2"></i> (03) 341-2500 分機 xxxx</li>
<li><i class="fa-solid fa-envelope w-5 text-center mr-2"></i> dha@mail.knu.edu.tw</li>
</ul>
</div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 pt-8 border-t border-slate-800 text-sm text-center">
© 2026 開南大學 健康產業管理學系. All rights reserved.
</div>
</footer>
<!-- 簡單的導覽列滾動效果 JS -->
<script>
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 20) {
navbar.classList.add('shadow-md');
navbar.classList.replace('glass-card-light', 'bg-white/95');
} else {
navbar.classList.remove('shadow-md');
navbar.classList.replace('bg-white/95', 'glass-card-light');
}
});
</script>
</body>
</html>
這個不會跑來跑去!!!
第一次接觸這網站，用起來不習慣!
https://dha.knu.edu.tw/p/406-1042-56401,r11.php?Lang=zh-tw
大致上沒有問題，實際上還有些問題
就是要把PDF像投影幕一樣，不用下載
留言
張貼留言