2025-05-09 13:25:31 +08:00
|
|
|
|
<!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">
|
2025-06-03 09:27:10 +08:00
|
|
|
|
<img src="https://i.postimg.cc/rFSSxXRX/41513123132132.png"
|
|
|
|
|
|
alt="美工圖"
|
|
|
|
|
|
class="max-h-[80%] max-w-[90%] object-contain" />
|
|
|
|
|
|
</div>
|
2025-05-09 13:25:31 +08:00
|
|
|
|
|
|
|
|
|
|
<!-- 右側登入表單區（約佔 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>
|
2025-06-03 09:27:10 +08:00
|
|
|
|
<form class="space-y-6" onsubmit="return login(event)">
|
2025-05-09 13:25:31 +08:00
|
|
|
|
<div>
|
|
|
|
|
|
<label class="block mb-1 text-sm font-medium text-gray-700">帳號</label>
|
2025-06-03 09:27:10 +08:00
|
|
|
|
<input type="text" id="username" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="請輸入帳號" />
|
2025-05-09 13:25:31 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="block mb-1 text-sm font-medium text-gray-700">密碼</label>
|
2025-06-03 09:27:10 +08:00
|
|
|
|
<input type="password" id="password" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="請輸入密碼" />
|
2025-05-09 13:25:31 +08:00
|
|
|
|
</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>
|
2025-06-03 09:27:10 +08:00
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
function login(event) {
|
|
|
|
|
|
event.preventDefault(); // 防止表單送出刷新頁面
|
|
|
|
|
|
|
|
|
|
|
|
const username = document.getElementById("username").value;
|
|
|
|
|
|
const password = document.getElementById("password").value;
|
|
|
|
|
|
|
|
|
|
|
|
if (username === "admin" && password === "admin") {
|
|
|
|
|
|
window.location.href = "main.html";
|
|
|
|
|
|
} else {
|
|
|
|
|
|
alert("帳號或密碼錯誤！");
|
|
|
|
|
|
}
|
|
|
|
|
|
return false;
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
2025-05-09 13:25:31 +08:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
