Update index.html
Browse files- index.html +172 -165
index.html
CHANGED
|
@@ -1,165 +1,172 @@
|
|
| 1 |
-
<!DOCTYPE html>
|
| 2 |
-
<html lang="zh-
|
| 3 |
-
<head>
|
| 4 |
-
<meta charset="UTF-8">
|
| 5 |
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>城市洞察報告 | 高雄市政府數據分析</title>
|
| 7 |
-
<meta name="description" content="透過數據分析，深入探討高雄市面臨的公共衛生與社會議題，包含銀髮安居挑戰與肺癌篩檢的隱形警訊。">
|
| 8 |
-
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 10 |
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 11 |
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
|
| 12 |
-
<style>
|
| 13 |
-
body {
|
| 14 |
-
font-family: 'Inter', 'Noto Sans TC', sans-serif;
|
| 15 |
-
}
|
| 16 |
-
.hero-pattern {
|
| 17 |
-
background-color: #f8fafc;
|
| 18 |
-
background-image: radial-gradient(#dbeafe 1px, transparent 1px);
|
| 19 |
-
background-size: 1.5rem 1.5rem;
|
| 20 |
-
}
|
| 21 |
-
.card-hover-effect {
|
| 22 |
-
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
| 23 |
-
}
|
| 24 |
-
.card-hover-effect:hover {
|
| 25 |
-
transform: translateY(-8px);
|
| 26 |
-
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
| 27 |
-
}
|
| 28 |
-
</style>
|
| 29 |
-
</head>
|
| 30 |
-
<body class="bg-slate-50 text-slate-800">
|
| 31 |
-
|
| 32 |
-
|
| 33 |
-
|
| 34 |
-
|
| 35 |
-
|
| 36 |
-
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
<a href="#
|
| 40 |
-
<a href="#
|
| 41 |
-
|
| 42 |
-
|
| 43 |
-
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
| 48 |
-
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
<a href="#
|
| 52 |
-
<a href="#
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 56 |
-
|
| 57 |
-
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
| 61 |
-
|
| 62 |
-
|
| 63 |
-
|
| 64 |
-
|
| 65 |
-
|
| 66 |
-
|
| 67 |
-
|
| 68 |
-
|
| 69 |
-
|
| 70 |
-
|
| 71 |
-
|
| 72 |
-
|
| 73 |
-
|
| 74 |
-
|
| 75 |
-
|
| 76 |
-
|
| 77 |
-
|
| 78 |
-
|
| 79 |
-
|
| 80 |
-
|
| 81 |
-
|
| 82 |
-
|
| 83 |
-
|
| 84 |
-
|
| 85 |
-
|
| 86 |
-
|
| 87 |
-
|
| 88 |
-
|
| 89 |
-
|
| 90 |
-
|
| 91 |
-
|
| 92 |
-
|
| 93 |
-
|
| 94 |
-
|
| 95 |
-
|
| 96 |
-
|
| 97 |
-
|
| 98 |
-
|
| 99 |
-
|
| 100 |
-
|
| 101 |
-
|
| 102 |
-
<
|
| 103 |
-
|
| 104 |
-
|
| 105 |
-
|
| 106 |
-
|
| 107 |
-
|
| 108 |
-
|
| 109 |
-
|
| 110 |
-
|
| 111 |
-
|
| 112 |
-
|
| 113 |
-
|
| 114 |
-
|
| 115 |
-
|
| 116 |
-
|
| 117 |
-
|
| 118 |
-
|
| 119 |
-
|
| 120 |
-
|
| 121 |
-
|
| 122 |
-
|
| 123 |
-
|
| 124 |
-
|
| 125 |
-
|
| 126 |
-
|
| 127 |
-
|
| 128 |
-
|
| 129 |
-
|
| 130 |
-
|
| 131 |
-
|
| 132 |
-
|
| 133 |
-
|
| 134 |
-
|
| 135 |
-
|
| 136 |
-
|
| 137 |
-
|
| 138 |
-
|
| 139 |
-
|
| 140 |
-
|
| 141 |
-
|
| 142 |
-
|
| 143 |
-
|
| 144 |
-
|
| 145 |
-
|
| 146 |
-
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
|
| 150 |
-
|
| 151 |
-
|
| 152 |
-
|
| 153 |
-
|
| 154 |
-
|
| 155 |
-
|
| 156 |
-
|
| 157 |
-
|
| 158 |
-
|
| 159 |
-
|
| 160 |
-
|
| 161 |
-
|
| 162 |
-
|
| 163 |
-
|
| 164 |
-
|
| 165 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="zh-Hant">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>城市洞察報告 | 高雄市政府數據分析</title>
|
| 7 |
+
<meta name="description" content="透過數據分析，深入探討高雄市面臨的公共衛生與社會議題，包含銀髮安居挑戰與肺癌篩檢的隱形警訊。">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 10 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 11 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
|
| 12 |
+
<style>
|
| 13 |
+
body {
|
| 14 |
+
font-family: 'Inter', 'Noto Sans TC', sans-serif;
|
| 15 |
+
}
|
| 16 |
+
.hero-pattern {
|
| 17 |
+
background-color: #f8fafc;
|
| 18 |
+
background-image: radial-gradient(#dbeafe 1px, transparent 1px);
|
| 19 |
+
background-size: 1.5rem 1.5rem;
|
| 20 |
+
}
|
| 21 |
+
.card-hover-effect {
|
| 22 |
+
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
| 23 |
+
}
|
| 24 |
+
.card-hover-effect:hover {
|
| 25 |
+
transform: translateY(-8px);
|
| 26 |
+
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
| 27 |
+
}
|
| 28 |
+
</style>
|
| 29 |
+
</head>
|
| 30 |
+
<body class="bg-slate-50 text-slate-800">
|
| 31 |
+
<!-- Header / Navigation -->
|
| 32 |
+
<header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 border-b border-slate-200">
|
| 33 |
+
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
|
| 34 |
+
<a href="#" class="text-2xl font-bold text-slate-900">
|
| 35 |
+
<span class="text-blue-600">城市</span>洞察
|
| 36 |
+
</a>
|
| 37 |
+
<nav class="hidden md:flex space-x-8">
|
| 38 |
+
<a href="#reports" class="text-slate-600 hover:text-blue-600 transition-colors">精選報告</a>
|
| 39 |
+
<a href="#about" class="text-slate-600 hover:text-blue-600 transition-colors">關於我們</a>
|
| 40 |
+
<a href="#contact" class="text-slate-600 hover:text-blue-600 transition-colors">聯繫方式</a>
|
| 41 |
+
</nav>
|
| 42 |
+
<button class="md:hidden" id="mobile-menu-button">
|
| 43 |
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
| 44 |
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
|
| 45 |
+
</svg>
|
| 46 |
+
</button>
|
| 47 |
+
</div>
|
| 48 |
+
<!-- Mobile Menu -->
|
| 49 |
+
<div id="mobile-menu" class="hidden md:hidden px-6 pb-4">
|
| 50 |
+
<a href="#reports" class="block py-2 text-slate-600 hover:text-blue-600">精選報告</a>
|
| 51 |
+
<a href="#about" class="block py-2 text-slate-600 hover:text-blue-600">關於我們</a>
|
| 52 |
+
<a href="#contact" class="block py-2 text-slate-600 hover:text-blue-600">聯繫方式</a>
|
| 53 |
+
</div>
|
| 54 |
+
</header>
|
| 55 |
+
<!-- Main Content -->
|
| 56 |
+
<main>
|
| 57 |
+
<!-- Hero Section -->
|
| 58 |
+
<section class="hero-pattern">
|
| 59 |
+
<div class="container mx-auto px-6 py-24 md:py-32 text-center">
|
| 60 |
+
<h1 class="text-4xl md:text-6xl font-bold text-slate-900 leading-tight mb-4">數據點亮角落，看見城市溫度</h1>
|
| 61 |
+
<p class="text-lg md:text-xl text-slate-600 max-w-3xl mx-auto">
|
| 62 |
+
我們致力於透過嚴謹的數據分析，揭示城市發展中的關鍵議題。從社會福利到公共衛生，我們的報告旨在為政策制定者與市民提供清晰、深刻的洞察。
|
| 63 |
+
</p>
|
| 64 |
+
</div>
|
| 65 |
+
</section>
|
| 66 |
+
<!-- Featured Reports Section -->
|
| 67 |
+
<section id="reports" class="py-20 md:py-28 bg-white">
|
| 68 |
+
<div class="container mx-auto px-6">
|
| 69 |
+
<div class="text-center mb-12">
|
| 70 |
+
<h2 class="text-3xl md:text-4xl font-bold text-slate-900">精選報告</h2>
|
| 71 |
+
<p class="mt-2 text-md text-slate-500">深入了解我們最新的數據分析成果</p>
|
| 72 |
+
</div>
|
| 73 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
| 74 |
+
<!-- Report Card 1: 銀髮安居 -->
|
| 75 |
+
<div class="bg-slate-50 rounded-xl overflow-hidden border border-slate-200 card-hover-effect flex flex-col">
|
| 76 |
+
<div class="p-8 flex-grow">
|
| 77 |
+
<span class="text-sm font-medium text-blue-600 bg-blue-100 px-3 py-1 rounded-full">社會關懷</span>
|
| 78 |
+
<h3 class="mt-4 text-2xl font-bold text-slate-900">銀髮安居：高雄市獨居長者居住現況調查</h3>
|
| 79 |
+
<p class="mt-3 text-slate-600 leading-relaxed">
|
| 80 |
+
隨著高雄邁向超高齡社會，「人老屋老」的雙重挑戰日益嚴峻。本報告深入剖析超過三千名獨居長者的居住數據，揭示了「老宅囚老人」的困境，並提出以「樓梯升降椅」及「社宅換居」作為務實的政策解方。
|
| 81 |
+
</p>
|
| 82 |
+
</div>
|
| 83 |
+
<div class="bg-slate-100 p-6">
|
| 84 |
+
<a href="銀髮安居.html" target="_blank" class="inline-flex items-center font-semibold text-blue-600 hover:text-blue-800 transition-colors">
|
| 85 |
+
閱讀完整報告
|
| 86 |
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
|
| 87 |
+
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
| 88 |
+
</svg>
|
| 89 |
+
</a>
|
| 90 |
+
</div>
|
| 91 |
+
</div>
|
| 92 |
+
<!-- Report Card 2: 肺癌篩檢 -->
|
| 93 |
+
<div class="bg-slate-50 rounded-xl overflow-hidden border border-slate-200 card-hover-effect flex flex-col">
|
| 94 |
+
<div class="p-8 flex-grow">
|
| 95 |
+
<span class="text-sm font-medium text-red-600 bg-red-100 px-3 py-1 rounded-full">公共衛生</span>
|
| 96 |
+
<h3 class="mt-4 text-2xl font-bold text-slate-900">肺癌篩檢下的隱形警訊：誰是高風險中的高風險？</h3>
|
| 97 |
+
<p class="mt-3 text-slate-600 leading-relaxed">
|
| 98 |
+
公費肺癌篩檢帶來希望，但數據揭示了更深層的警訊。本分析運用近2.8萬筆篩檢資料，透過決策樹模型找出影響晚期確診的隱形指標，發現吸菸「包年數」與「健康識能」是超越傳統風險因子的關鍵。
|
| 99 |
+
</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="bg-slate-100 p-6">
|
| 102 |
+
<a href="肺癌篩檢.html" target="_blank" class="inline-flex items-center font-semibold text-red-600 hover:text-red-800 transition-colors">
|
| 103 |
+
閱讀完整報告
|
| 104 |
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
|
| 105 |
+
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
| 106 |
+
</svg>
|
| 107 |
+
</a>
|
| 108 |
+
</div>
|
| 109 |
+
</div>
|
| 110 |
+
<!-- Report Card 3: 社福支出 -->
|
| 111 |
+
<div class="bg-slate-50 rounded-xl overflow-hidden border border-slate-200 card-hover-effect flex flex-col">
|
| 112 |
+
<div class="p-8 flex-grow">
|
| 113 |
+
<span class="text-sm font-medium text-amber-600 bg-amber-100 px-3 py-1 rounded-full">財政分析</span>
|
| 114 |
+
<h3 class="mt-4 text-2xl font-bold text-slate-900">銀色海嘯下的財政拔河：高雄社福支出考驗</h3>
|
| 115 |
+
<p class="mt-3 text-slate-600 leading-relaxed">
|
| 116 |
+
高雄正步入超高齡社會，本報告揭示人口結構轉變如何引爆社福支出，預估未來十年將攀升至千億規模，對城市財政形成嚴峻挑戰，並探討區域發展失衡下的政策應對之道。
|
| 117 |
+
</p>
|
| 118 |
+
</div>
|
| 119 |
+
<div class="bg-slate-100 p-6">
|
| 120 |
+
<a href="kaohsiung_social_welfare_report.html" target="_blank" class="inline-flex items-center font-semibold text-amber-600 hover:text-amber-800 transition-colors">
|
| 121 |
+
閱讀完整報告
|
| 122 |
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
|
| 123 |
+
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
| 124 |
+
</svg>
|
| 125 |
+
</a>
|
| 126 |
+
</div>
|
| 127 |
+
</div>
|
| 128 |
+
</div>
|
| 129 |
+
</div>
|
| 130 |
+
</section>
|
| 131 |
+
<!-- About Us Section -->
|
| 132 |
+
<section id="about" class="py-20 md:py-28">
|
| 133 |
+
<div class="container mx-auto px-6">
|
| 134 |
+
<div class="max-w-4xl mx-auto text-center">
|
| 135 |
+
<h2 class="text-3xl md:text-4xl font-bold text-slate-900">我們的使命</h2>
|
| 136 |
+
<p class="mt-4 text-lg text-slate-600">
|
| 137 |
+
我們是高雄市政府的數據分析團隊，專注於將龐雜的市政資料轉化為有意義的洞見。我們的目標是提供客觀、可靠的分析報告，作為政策規劃的堅實基礎，並促進市民對公共事務的理解與參與，共同打造一個更美好的高雄。
|
| 138 |
+
</p>
|
| 139 |
+
</div>
|
| 140 |
+
</div>
|
| 141 |
+
</section>
|
| 142 |
+
</main>
|
| 143 |
+
<!-- Footer -->
|
| 144 |
+
<footer id="contact" class="bg-slate-800 text-white">
|
| 145 |
+
<div class="container mx-auto px-6 py-12 text-center">
|
| 146 |
+
<p class="text-slate-300">© 2025 高雄市政府 數據洞察團隊. All Rights Reserved.</p>
|
| 147 |
+
<p class="text-sm text-slate-400 mt-2">本網站內容僅供參考，詳細資訊請以各權責機關公告為準。</p>
|
| 148 |
+
</div>
|
| 149 |
+
</footer>
|
| 150 |
+
<script>
|
| 151 |
+
// Mobile menu toggle
|
| 152 |
+
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
| 153 |
+
const mobileMenu = document.getElementById('mobile-menu');
|
| 154 |
+
mobileMenuButton.addEventListener('click', () => {
|
| 155 |
+
mobileMenu.classList.toggle('hidden');
|
| 156 |
+
});
|
| 157 |
+
// Smooth scroll for navigation links
|
| 158 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 159 |
+
anchor.addEventListener('click', function (e) {
|
| 160 |
+
e.preventDefault();
|
| 161 |
+
// Close mobile menu if open
|
| 162 |
+
if (!mobileMenu.classList.contains('hidden')) {
|
| 163 |
+
mobileMenu.classList.add('hidden');
|
| 164 |
+
}
|
| 165 |
+
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
| 166 |
+
behavior: 'smooth'
|
| 167 |
+
});
|
| 168 |
+
});
|
| 169 |
+
});
|
| 170 |
+
</script>
|
| 171 |
+
</body>
|
| 172 |
+
</html>
|