|
|
<!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> |
|
|
|
