今天終於來到我最擔心的環節之一，沒錯我們要來切版首頁了，想到切版，我就迷失在那個甚麼 grid、flex，救命喔，但身為一個後端工程師，我自然也有我的心得，複雜的事簡單做即可，所以我們首頁的頁面，非常簡單，只要有兩個置中表格就好，資料量也不要太多

這兩個表格分別是怪物 TOP 10 跟寶物 TOP 10

我們只要在我們首頁 +page.svelte 這樣寫

<!-- 外層容器 -->
<div class="min-h-screen flex justify-center items-center gap-8 flex-col md:flex-row">
	<!-- 左側 Top 10 玩家 -->
	<div class="card bg-base-100 shadow-xl p-4 overflow-x-auto">
		<h2 class="text-xl font-bold mb-4 text-center text-blue-700 bg-blue-50 rounded-lg py-2">
			🔥 Top 10 玩家
		</h2>
		<table class="table">
			<thead>
				<tr>
					<th>#</th>
					<th>名稱</th>
					<th>職業</th>
				</tr>
			</thead>
			<tbody>
				<tr class="bg-base-200">
					<th>1</th>
					<td>Cy Ganderton</td>
					<td>Quality Control Specialist</td>
				</tr>
				<tr>
					<th>2</th>
					<td>Hart Hagerty</td>
					<td>Desktop Support Technician</td>
				</tr>
				<tr>
					<th>3</th>
					<td>Brice Swyre</td>
					<td>Tax Accountant</td>
				</tr>
				<tr>
					<th>4</th>
					<td>Brice Swyre</td>
					<td>Tax Accountant</td>
				</tr>
				<tr>
					<th>5</th>
					<td>Brice Swyre</td>
					<td>Tax Accountant</td>
				</tr>
				<tr>
					<th>6</th>
					<td>Brice Swyre</td>
					<td>Tax Accountant</td>
				</tr>
				<tr>
					<th>7</th>
					<td>Brice Swyre</td>
					<td>Tax Accountant</td>
				</tr>
				<tr>
					<th>8</th>
					<td>Brice Swyre</td>
					<td>Tax Accountant</td>
				</tr>
				<tr>
					<th>9</th>
					<td>Brice Swyre</td>
					<td>Tax Accountant</td>
				</tr>
				<tr>
					<th>10</th>
					<td>Brice Swyre</td>
					<td>Tax Accountant</td>
				</tr>
			</tbody>
		</table>
	</div>

	<!-- 右側 Top 10 公會 -->
	<div class="card bg-base-100 shadow-xl p-4 overflow-x-auto">
		<h2 class="text-xl font-bold mb-4 text-center text-green-700 bg-green-50 rounded-lg py-2">
			⚡ Top 10 公會
		</h2>
		<table class="table">
			<thead>
				<tr>
					<th>#</th>
					<th>名稱</th>
					<th>成員數</th>
					<th>徽章顏色</th>
				</tr>
			</thead>
			<tbody>
				<tr class="bg-base-200">
					<th>1</th>
					<td>Alpha Guild</td>
					<td>50</td>
					<td>Green</td>
				</tr>
				<tr>
					<th>2</th>
					<td>Beta Squad</td>
					<td>45</td>
					<td>Yellow</td>
				</tr>
				<tr>
					<th>3</th>
					<td>Gamma Team</td>
					<td>42</td>
					<td>Orange</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

就搞定惹，不到 10 分鐘就結束，我現在都不確定到底是 daisyui、tailwind 太好用，還是 chatgpt 5 太猛惹，前端排版甚麼的，分分鐘搞定啦!!!!!!

今天的情緒抒發:
今天跟業務、客戶吵架的一天 ORZ