今天我們來刻一個主要的頁面
那就是怪物與寶物
目前想法是都呈現表格即可，圖表之後再說

<div class="min-h-screen flex justify-center items-center gap-8 flex-col md:flex-row px-4">
	<div class="card bg-base-100 shadow-xl p-4 overflow-x-auto w-full max-w-5xl mx-auto">
		<div class="w-full px-4 mt-4 mb-4">
			<input type="text" placeholder="查詢" class="input input-bordered input-xl  input-neutral w-full" list="browsers" />
			<datalist id="browsers">
				<option value="Chrome"></option>
				<option value="Firefox"></option>
				<option value="Safari"></option>
				<option value="Opera"></option>
				<option value="Edge"></option>
			</datalist>
		</div>

		<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 class="join mt-4 flex justify-center">
			<button class="join-item btn">＜</button>
			<input class="join-item btn btn-square" type="radio" name="options" aria-label="1" checked />
			<input class="join-item btn btn-square" type="radio" name="options" aria-label="2" />
			<input class="join-item btn btn-square" type="radio" name="options" aria-label="3" />
			<input class="join-item btn btn-square" type="radio" name="options" aria-label="4" />
			<button class="join-item btn">＞</button>
		</div>
	</div>
</div>

今天的情緒抒發:

原來那個分頁功能，要靠大量的前端控制阿，我還以為 html 就達到了呢，請問那個前端道歉表哪裡領?在哪邊排隊阿