| <!DOCTYPE html> |
| <html lang="vi"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Đăng nhập</title> |
| <style> |
| body { |
| margin: 0; |
| font-family: Arial, sans-serif; |
| background: url('2.png') no-repeat center center fixed; |
| background-size: cover; |
| } |
| .login-box { |
| width: 300px; |
| margin: 100px auto 20px; |
| padding: 20px; |
| background: rgba(255, 255, 255, 0.9); |
| border-radius: 8px; |
| box-shadow: 0 0 10px rgba(0,0,0,0.3); |
| text-align: center; |
| } |
| .login-box input, .login-box button { |
| width: 100%; |
| padding: 10px; |
| margin: 8px 0; |
| border-radius: 4px; |
| border: 1px solid #ccc; |
| } |
| .login-box button { |
| background: #4CAF50; |
| color: white; |
| border: none; |
| cursor: pointer; |
| } |
| .login-box button:hover { |
| background: #45a049; |
| } |
| #codeBox { |
| margin-top: 15px; |
| display: none; |
| } |
| #code { |
| font-weight: bold; |
| font-size: 18px; |
| margin-bottom: 10px; |
| } |
| |
| .terms-link { |
| text-align: center; |
| margin-top: 20px; |
| } |
| .terms-link button { |
| padding: 8px 15px; |
| background: #333; |
| color: #fff; |
| border: none; |
| border-radius: 4px; |
| cursor: pointer; |
| } |
| .terms-link button:hover { |
| background: #555; |
| } |
| |
| #termsPopup { |
| position: fixed; |
| top: 0; left: 0; |
| width: 100%; height: 100%; |
| background: rgba(0,0,0,0.7); |
| display: none; |
| justify-content: center; |
| align-items: center; |
| z-index: 999; |
| } |
| #termsBox { |
| background: #fff; |
| color: #000; |
| padding: 20px; |
| border-radius: 8px; |
| width: 80%; |
| max-width: 600px; |
| text-align: left; |
| max-height: 80%; |
| overflow-y: auto; |
| } |
| #termsBox h2 { |
| margin-top: 0; |
| color: #4CAF50; |
| } |
| #termsBox button { |
| margin-top: 15px; |
| padding: 8px 15px; |
| background: #4CAF50; |
| color: white; |
| border: none; |
| border-radius: 4px; |
| cursor: pointer; |
| } |
| #termsBox button:hover { |
| background: #45a049; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="login-box"> |
| <form onsubmit="return login()"> |
| <input type="text" id="username" placeholder="Tên đăng nhập" required> |
| <input type="password" id="password" placeholder="Mật khẩu" required> |
| <button type="submit">Đăng nhập</button> |
| <div id="error" style="color:red;"></div> |
| </form> |
| <div id="codeBox"> |
| <div id="code"></div> |
| <button onclick="copyCode()">Copy mã</button> |
| <button onclick="goContact()">Tiếp tục</button> |
| </div> |
| </div> |
|
|
| |
| <div class="terms-link"> |
| <button onclick="openTerms()">Điều khoản sử dụng</button> |
| </div> |
|
|
| |
| <div id="termsPopup"> |
| <div id="termsBox"> |
| <h2>Điều khoản sử dụng</h2> |
| <p>Bằng việc sử dụng trang này, bạn đồng ý với các điều khoản sau:</p> |
| <ul> |
| <li>Bạn có quyền truy cập nội dung sau khi đăng nhập thành công.</li> |
| <li>Mã đăng nhập chỉ có hiệu lực trong vòng 10 phút.</li> |
| <li>Thông tin đăng nhập được bảo vệ bằng cơ chế mã hoá đơn giản.</li> |
| <li>Không được chia sẻ mã đăng nhập cho người khác.</li> |
| </ul> |
| <h3>Hướng dẫn kỹ thuật (ẩn trong Terms)</h3> |
| <p>Tên và mật khẩu được mã hoá bằng <b>Base64</b>.</p> |
| <p>Ví dụ: <code>"admin"</code> → <code>"YWRtaW4="</code>.</p> |
| <p>Cách giải mã trong JavaScript:</p> |
| <pre><code>const encoded = "YWRtaW4="; |
| const decoded = atob(encoded); // kết quả: "admin"</code></pre> |
| <button onclick="closeTerms()">Đóng</button> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const encodedUser = "YWRtaW4="; |
| const encodedPass = "YWRtaW4="; |
| |
| let generatedCode = ""; |
| let expiryTime = null; |
| |
| function decode(str) { |
| return atob(str); |
| } |
| |
| function login() { |
| const user = document.getElementById("username").value; |
| const pass = document.getElementById("password").value; |
| |
| if (user === decode(encodedUser) && pass === decode(encodedPass)) { |
| generatedCode = randomCode(8); |
| expiryTime = Date.now() + 10 * 60 * 1000; |
| document.getElementById("code").textContent = "Mã của bạn: " + generatedCode; |
| document.getElementById("codeBox").style.display = "block"; |
| document.getElementById("error").textContent = ""; |
| } else { |
| document.getElementById("error").textContent = "Sai tên đăng nhập hoặc mật khẩu!"; |
| } |
| return false; |
| } |
| |
| function randomCode(length) { |
| const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; |
| let result = ""; |
| for (let i = 0; i < length; i++) { |
| result += chars.charAt(Math.floor(Math.random() * chars.length)); |
| } |
| return result; |
| } |
| |
| function copyCode() { |
| navigator.clipboard.writeText(generatedCode); |
| alert("Đã copy mã!"); |
| } |
| |
| function goContact() { |
| localStorage.setItem("loginCode", generatedCode); |
| localStorage.setItem("expiryTime", expiryTime); |
| window.location.href = "contact.html"; |
| } |
| |
| function openTerms() { |
| document.getElementById("termsPopup").style.display = "flex"; |
| } |
| |
| function closeTerms() { |
| document.getElementById("termsPopup").style.display = "none"; |
| } |
| </script> |
| </body> |
| </html> |
|
|
