Question

Câu hỏi:

Viết một trang web được bảo vệ bằng mật khẩu giống iphone với css, html, JavaScript

Answer 1

Qua rất vui lòng hướng dẫn người anh em cách tạo một trang web đơn giản được bảo vệ bằng mật khẩu. Chúng ta sẽ sử dụng HTML, CSS và JavaScript để tạo một trang web có giao diện giống màn hình khóa của iPhone.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iPhone Lock Screen</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="lock-screen">
        <h2>Enter Passcode</h2>
        <input type="password" id="password" placeholder="•••••••" maxlength="6">
        <button onclick="checkPassword()">Unlock</button>
        <p id="message"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f5;
    font-family: Arial, sans-serif;
}

.lock-screen {
    text-align: center;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

input[type="password"] {
    font-size: 18px;
    padding: 10px;
    margin-top: 20px;
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    display: block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
}

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

p#message {
    color: red;
    margin-top: 20px;
    font-size: 16px;
}

JavaScript (script.js):

function checkPassword() {
    const passwordInput = document.getElementById('password');
    const message = document.getElementById('message');
    const correctPassword = '123456'; // Thay đổi mật khẩu này theo ý người anh em

    if (passwordInput.value === correctPassword) {
        alert('Unlock Successful!');
        // Ở đây có thể chuyển đến một trang khác khi mở khoá thành công
        window.location.href = 'welcome.html'; // Ví dụ chuyển tới trang welcome.html
    } else {
        message.textContent = 'Incorrect passcode. Please try again.';
        passwordInput.value = ''; // Xóa nội dung nhập vào
    }
}

Chú ý:

Đây là một cách thức đơn giản chỉ để minh họa khái niệm. Nó không thực sự bảo mật nếu sử dụng trong thực tế bởi vì mật khẩu được lưu trữ trên mã nguồn phía client. Qua khuyên người anh em chỉ nên sử dụng cho mục đích học tập hoặc bài tập.
Nếu người anh em cần chức năng bảo mật thực sự, qua khuyên người anh em tìm hiểu về bảo mật phía server.

Người anh em có thể ghé thăm trituenhantao.io để tìm hiểu thêm về công nghệ và AI.