| | <!DOCTYPE html> |
| | <html lang="vi"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <title>Liên hệ</title> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> |
| | <style> |
| | body { |
| | margin: 0; |
| | font-family: Arial, sans-serif; |
| | background: url('1.png') no-repeat center center fixed; |
| | background-size: cover; |
| | color: #fff; |
| | overflow: hidden; |
| | } |
| | |
| | .avatar, .overlay-box { |
| | display: none; |
| | } |
| | |
| | .avatar { |
| | width: 120px; |
| | height: 120px; |
| | border-radius: 50%; |
| | margin: 40px auto 20px; |
| | box-shadow: 0 0 10px rgba(0,0,0,0.5); |
| | border: 3px solid white; |
| | background: url('3.png') center/cover no-repeat; |
| | opacity: 0; |
| | animation: fadeIn 2s ease forwards; |
| | transition: box-shadow 0.4s ease, transform 0.4s ease; |
| | } |
| | |
| | .avatar:hover { |
| | box-shadow: 0 0 25px rgba(255,255,255,0.9); |
| | transform: scale(1.05); |
| | } |
| | |
| | .overlay-box { |
| | width: 320px; |
| | max-width: 90%; |
| | margin: 0 auto; |
| | padding: 20px; |
| | background: rgba(0,0,0,0.5); |
| | border-radius: 10px; |
| | text-align: center; |
| | opacity: 0; |
| | animation: fadeIn 2s ease forwards; |
| | animation-delay: 1s; |
| | } |
| | |
| | .overlay-box h2 { |
| | margin-bottom: 20px; |
| | } |
| | |
| | .links a { |
| | display: block; |
| | margin: 12px 0; |
| | text-decoration: none; |
| | color: #fff; |
| | font-size: 18px; |
| | opacity: 0; |
| | transform: translateX(-30px); |
| | animation: slideIn 0.5s ease forwards; |
| | } |
| | |
| | .links a:nth-child(1) { animation-delay: 2s; } |
| | .links a:nth-child(2) { animation-delay: 2.2s; } |
| | .links a:nth-child(3) { animation-delay: 2.4s; } |
| | .links a:nth-child(4) { animation-delay: 2.6s; } |
| | .links a:nth-child(5) { animation-delay: 2.8s; } |
| | .links a:nth-child(6) { animation-delay: 3s; } |
| | |
| | .links a i { |
| | margin-right: 8px; |
| | transition: color 0.3s, text-shadow 0.3s; |
| | } |
| | |
| | .links a:hover { |
| | color: #4CAF50; |
| | } |
| | |
| | .links a:hover i { |
| | color: #4CAF50; |
| | text-shadow: 0 0 8px rgba(76,175,80,0.8); |
| | } |
| | |
| | @keyframes fadeIn { |
| | from { opacity: 0; transform: translateY(20px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| | |
| | @keyframes slideIn { |
| | to { opacity: 1; transform: translateX(0); } |
| | } |
| | |
| | #popup { |
| | position: fixed; |
| | top: 0; left: 0; |
| | width: 100%; height: 100%; |
| | background: rgba(0,0,0,0.8); |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | z-index: 999; |
| | } |
| | |
| | #popupBox { |
| | background: white; |
| | color: black; |
| | padding: 20px; |
| | border-radius: 8px; |
| | text-align: center; |
| | } |
| | |
| | #popupBox input { |
| | padding: 8px; |
| | margin: 10px 0; |
| | width: 80%; |
| | } |
| | |
| | #popupBox button { |
| | padding: 8px 15px; |
| | background: #4CAF50; |
| | color: white; |
| | border: none; |
| | border-radius: 4px; |
| | cursor: pointer; |
| | } |
| | |
| | #popupBox button:hover { |
| | background: #45a049; |
| | } |
| | |
| | #successMessage { |
| | position: fixed; |
| | top: 20px; |
| | left: 50%; |
| | transform: translateX(-50%); |
| | background: #4CAF50; |
| | color: white; |
| | padding: 10px 20px; |
| | border-radius: 6px; |
| | font-weight: bold; |
| | opacity: 1; |
| | transition: opacity 2s ease; |
| | z-index: 998; |
| | display: none; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div id="popup"> |
| | <div id="popupBox"> |
| | <h3>Nhập mã đăng nhập</h3> |
| | <input type="text" id="inputCode" placeholder="Nhập mã..."> |
| | <button onclick="checkCode()">Xác nhận</button> |
| | <div id="popupError" style="color:red; margin-top:10px;"></div> |
| | </div> |
| | </div> |
| |
|
| | <div id="successMessage">✅ Xác thực thành công!</div> |
| |
|
| | <div class="avatar"></div> |
| | <div class="overlay-box"> |
| | <h2>Thông tin liên kết</h2> |
| | <div class="links"> |
| | <a href="https://www.facebook.com/myplaytimes4" target="_blank"><i class="fab fa-facebook"></i>Facebook</a> |
| | <a href="mailto:youremail@example.com"><i class="fas fa-envelope"></i>Email</a> |
| | <a href="https://www.instagram.com/questwatch14533/" target="_blank"><i class="fab fa-instagram"></i>Instagram</a> |
| | <a href="https://anilist.co/user/ThehonoredoneGJ/" target="_blank"><i class="fas fa-book"></i>AniList</a> |
| | <a href="https://www.tiktok.com/@dyt_max85" target="_blank"><i class="fab fa-tiktok"></i>TikTok</a> |
| | <a href="https://x.com/MCaisk4372" target="_blank"><i class="fab fa-x-twitter"></i>X (Twitter)</a> |
| | <a href="https://huggingface.co/school44s" target="_blank"><i class="fab fa-huggingface"></i>huggingface</a> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | function checkCode() { |
| | const input = document.getElementById("inputCode").value.trim(); |
| | const storedCode = localStorage.getItem("loginCode"); |
| | const expiry = parseInt(localStorage.getItem("expiryTime")); |
| | |
| | if (!storedCode || !expiry || Date.now() > expiry) { |
| | document.getElementById("popupError").textContent = "Mã không hợp lệ hoặc đã hết hạn!"; |
| | return; |
| | } |
| | |
| | if (input === storedCode) { |
| | document.getElementById("popup").style.display = "none"; |
| | const msg = document.getElementById("successMessage"); |
| | msg.style.display = "block"; |
| | msg.style.opacity = "1"; |
| | |
| | setTimeout(() => { |
| | msg.style.opacity = "0"; |
| | }, 100); |
| | |
| | setTimeout(() => { |
| | msg.style.display = "none"; |
| | document.querySelector(".avatar").style.display = "block"; |
| | document.querySelector(".overlay-box").style.display = "block"; |
| | }, 2000); |
| | } else { |
| | document.getElementById("popupError").textContent = "Mã không đúng!"; |
| | } |
| | } |
| | </script> |
| | </body> |
| | </html> |
| |
|
