|
|
<!DOCTYPE html> |
|
|
<html lang="zh-Hant"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>城市洞察報告 | 高雄市政府數據分析</title> |
|
|
<meta name="description" content="透過數據分析，深入探討高雄市面臨的公共衛生與社會議題，包含銀髮安居挑戰與肺癌篩檢的隱形警訊。"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<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"> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Inter', 'Noto Sans TC', sans-serif; |
|
|
} |
|
|
.hero-pattern { |
|
|
background-color: #f8fafc; |
|
|
background-image: radial-gradient(#dbeafe 1px, transparent 1px); |
|
|
background-size: 1.5rem 1.5rem; |
|
|
} |
|
|
.card-hover-effect { |
|
|
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; |
|
|
} |
|
|
.card-hover-effect:hover { |
|
|
transform: translateY(-8px); |
|
|
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-slate-50 text-slate-800"> |
|
|
|
|
|
<header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 border-b border-slate-200"> |
|
|
<div class="container mx-auto px-6 py-4 flex justify-between items-center"> |
|
|
<a href="#" class="text-2xl font-bold text-slate-900"> |
|
|
<span class="text-blue-600">城市</span>洞察 |
|
|
</a> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#reports" class="text-slate-600 hover:text-blue-600 transition-colors">精選報告</a> |
|
|
<a href="#about" class="text-slate-600 hover:text-blue-600 transition-colors">關於我們</a> |
|
|
<a href="#contact" class="text-slate-600 hover:text-blue-600 transition-colors">聯繫方式</a> |
|
|
</nav> |
|
|
<button class="md:hidden" id="mobile-menu-button"> |
|
|
<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"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden px-6 pb-4"> |
|
|
<a href="#reports" class="block py-2 text-slate-600 hover:text-blue-600">精選報告</a> |
|
|
<a href="#about" class="block py-2 text-slate-600 hover:text-blue-600">關於我們</a> |
|
|
<a href="#contact" class="block py-2 text-slate-600 hover:text-blue-600">聯繫方式</a> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
|
|
|
<section class="hero-pattern"> |
|
|
<div class="container mx-auto px-6 py-24 md:py-32 text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold text-slate-900 leading-tight mb-4">數據點亮角落，看見城市溫度</h1> |
|
|
<p class="text-lg md:text-xl text-slate-600 max-w-3xl mx-auto"> |
|
|
我們致力於透過嚴謹的數據分析，揭示城市發展中的關鍵議題。從社會福利到公共衛生，我們的報告旨在為政策制定與市民提供清晰、深刻的洞察。 |
|
|
</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="reports" class="py-20 md:py-28 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-slate-900">精選報告</h2> |
|
|
<p class="mt-2 text-md text-slate-500">深入了解我們最新的數據分析成果</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-slate-50 rounded-xl overflow-hidden border border-slate-200 card-hover-effect flex flex-col"> |
|
|
<div class="p-8 flex-grow"> |
|
|
<span class="text-sm font-medium text-blue-600 bg-blue-100 px-3 py-1 rounded-full">社會關懷</span> |
|
|
<h3 class="mt-4 text-2xl font-bold text-slate-900">銀髮安居：高雄市獨居長者居住現況調查</h3> |
|
|
<p class="mt-3 text-slate-600 leading-relaxed"> |
|
|
隨著高雄邁向超高齡社會，「人老屋老」的雙重挑戰日益嚴峻。本報告深入剖析超過三千名獨居長者的居住數據，揭示了「老宅囚老人」的困境，並提出以「樓梯升降椅」及「社宅換居」作為務實的政策解方。 |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-slate-100 p-6"> |
|
|
<a href="銀髮安居.html" target="_blank" class="inline-flex items-center font-semibold text-blue-600 hover:text-blue-800 transition-colors"> |
|
|
閱讀完整報告 |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<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" /> |
|
|
</svg> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-slate-50 rounded-xl overflow-hidden border border-slate-200 card-hover-effect flex flex-col"> |
|
|
<div class="p-8 flex-grow"> |
|
|
<span class="text-sm font-medium text-red-600 bg-red-100 px-3 py-1 rounded-full">公共衛生</span> |
|
|
<h3 class="mt-4 text-2xl font-bold text-slate-900">肺癌篩檢下的隱形警訊：誰是高風險中的高風險？</h3> |
|
|
<p class="mt-3 text-slate-600 leading-relaxed"> |
|
|
公費肺癌篩檢帶來希望，但數據揭示了更深層的警訊。本分析運用近2.8萬筆篩檢資料，透過決策樹模型找出影響晚期確診的隱形指標，發現吸菸「包年數」與「健康識能」是超越傳統風險因子的關鍵。 |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-slate-100 p-6"> |
|
|
<a href="肺癌篩檢.html" target="_blank" class="inline-flex items-center font-semibold text-red-600 hover:text-red-800 transition-colors"> |
|
|
閱讀完整報告 |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<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" /> |
|
|
</svg> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-slate-50 rounded-xl overflow-hidden border border-slate-200 card-hover-effect flex flex-col"> |
|
|
<div class="p-8 flex-grow"> |
|
|
<span class="text-sm font-medium text-amber-600 bg-amber-100 px-3 py-1 rounded-full">財政分析</span> |
|
|
<h3 class="mt-4 text-2xl font-bold text-slate-900">高齡化下的財政挑戰</h3> |
|
|
<p class="mt-3 text-slate-600 leading-relaxed"> |
|
|
隨著高齡化趨勢加劇，人口結構變化已成為地方政府資源分配的關鍵議題。本報告透過人口推估，深入分析未來十年高雄市的人口結構轉變，並衡量其對老人社會福利支出的深遠影響，為政策規劃提供前瞻性參考。 |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-slate-100 p-6"> |
|
|
<a href="社福支出.html" target="_blank" class="inline-flex items-center font-semibold text-amber-600 hover:text-amber-800 transition-colors"> |
|
|
閱讀完整報告 |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<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" /> |
|
|
</svg> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="about" class="py-20 md:py-28"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-slate-900">我們的使命</h2> |
|
|
<p class="mt-4 text-lg text-slate-600"> |
|
|
我們是高雄市政府的數據分析團隊，專注於將龐雜的市政資料轉化為有意義的洞見。我們的目標是提供客觀、可靠的分析報告，作為政策規劃的堅實基礎，並促進市民對公共事務的理解與參與，共同打造一個更美好的高雄。 |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<footer id="contact" class="bg-slate-800 text-white"> |
|
|
<div class="container mx-auto px-6 py-12 text-center"> |
|
|
<p class="text-slate-300">© 2025 高雄市政府 數據洞察團隊. All Rights Reserved.</p> |
|
|
<p class="text-sm text-slate-400 mt-2">本網站內容僅供參考，詳細資訊請以各權責機關公告為準。</p> |
|
|
</div> |
|
|
</footer> |
|
|
<script> |
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
