37 lines
1.6 KiB
HTML
37 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-Hant">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>登入畫面</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
</head>
|
||
<body class="min-h-screen flex items-center justify-center bg-gray-100">
|
||
<div class="flex w-full max-w-5xl h-[600px] bg-white rounded-2xl shadow-xl overflow-hidden">
|
||
|
||
<!-- 左側圖片區（約佔 35%） -->
|
||
<div class="w-[35%] hidden md:flex items-center justify-center bg-gray-50">
|
||
<img src="https://i.postimg.cc/rFSSxXRX/41513123132132.png"
|
||
alt="美工圖"
|
||
class="max-h-[80%] max-w-[90%] object-contain" />
|
||
</div>
|
||
|
||
<!-- 右側登入表單區（約佔 65%） -->
|
||
<div class="w-full md:w-[65%] p-12 flex flex-col justify-center">
|
||
<h2 class="text-4xl font-bold mb-8 text-gray-800">社區通 後台登入</h2>
|
||
<form class="space-y-6">
|
||
<div>
|
||
<label class="block mb-1 text-sm font-medium text-gray-700">帳號</label>
|
||
<input type="text" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="請輸入帳號" />
|
||
</div>
|
||
<div>
|
||
<label class="block mb-1 text-sm font-medium text-gray-700">密碼</label>
|
||
<input type="password" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="請輸入密碼" />
|
||
</div>
|
||
<button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition">登入</button>
|
||
</form>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html> |