File size: 11,466 Bytes
c935fe0 f2c5bc9 c935fe0 274463b c935fe0 274463b c935fe0 0f246cc c935fe0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 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 166 167 168 169 170 171 172 173 |
<!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 / Navigation -->
<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>
<!-- Mobile Menu -->
<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 Content -->
<main>
<!-- Hero Section -->
<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>
<!-- Featured Reports 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">
<!-- Report Card 1: 銀髮安居 -->
<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>
<!-- Report Card 2: 肺癌篩檢 -->
<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>
<!-- Report Card 3: 社福支出 -->
<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>
<!-- About Us 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 -->
<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>
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
// Close mobile menu if open
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
|