HTML, CSS, and Javascript for Web Developers

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form id="loginForm">
            <div class="input-group">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Login</button>
        </form>
        <div id="message"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

styles.css

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.login-container {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h2 {
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
}

.input-group input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#message {
    margin-top: 20px;
    color: red;
}

script.js

// ข้อมูลผู้ใช้และรหัสผ่านจำลอง
const users = {
    admin: { username: "admin", password: "admin123", role: "admin" },
    user: { username: "user", password: "user123", role: "user" }
};

// จัดการการล็อกอิน
document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // ป้องกันการรีเฟรชหน้า

    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const messageDiv = document.getElementById('message');

    let user = null;

    // ตรวจสอบข้อมูลผู้ใช้
    if (users.admin.username === username && users.admin.password === password) {
        user = users.admin;
    } else if (users.user.username === username && users.user.password === password) {
        user = users.user;
    }

    if (user) {
        messageDiv.style.color = 'green';
        messageDiv.textContent = `Login successful! Welcome, ${user.role}`;
        
        // เรียกฟังก์ชันเปลี่ยนหน้าเพื่อตามสิทธิ์ของผู้ใช้
        setTimeout(() => {
            redirectToDashboard(user.role);
        }, 1000); // รอ 1 วินาทีเพื่อแสดงข้อความ
    } else {
        messageDiv.style.color = 'red';
        messageDiv.textContent = 'Invalid username or password!';
    }
});

// ฟังก์ชันเปลี่ยนหน้าไปยังแดชบอร์ดของแต่ละสิทธิ์
function redirectToDashboard(role) {
    if (role === 'admin') {
        window.location.href = 'admin_dashboard.html';
    } else if (role === 'user') {
        window.location.href = 'user_dashboard.html';
    }
}

admin_dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="login-container">
        <h2>Admin Dashboard</h2>
        <p>Welcome, admin! You have full control over the system.</p>
        <button onclick="logout()">Logout</button>
    </div>

    <script>
        function logout() {
            window.location.href = 'index.html';
        }
    </script>
</body>
</html>

user_dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Dashboard</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="login-container">
        <h2>User Dashboard</h2>
        <p>Welcome, regular user!</p>
        <button onclick="logout()">Logout</button>
    </div>

    <script>
        function logout() {
            window.location.href = 'index.html';
        }
    </script>
</body>
</html>