Update index.html

index.html

@@ -14,7 +14,7 @@
       width: 300px;
       margin: 100px auto 20px;
       padding: 20px;
-      background: rgba(255, 255, 255, 0.85);
+      background: rgba(255, 255, 255, 0.9);
       border-radius: 8px;
       box-shadow: 0 0 10px rgba(0,0,0,0.3);
       text-align: center;
@@ -44,15 +44,22 @@
       font-size: 18px;
       margin-bottom: 10px;
     }
+    /* Nút điều khoản */
     .terms-link {
       text-align: center;
       margin-top: 20px;
     }
-    .terms-link a {
-      color: #333;
-      text-decoration: underline;
+    .terms-link button {
+      padding: 8px 15px;
+      background: #333;
+      color: #fff;
+      border: none;
+      border-radius: 4px;
       cursor: pointer;
     }
+    .terms-link button:hover {
+      background: #555;
+    }
     /* Popup Terms */
     #termsPopup {
       position: fixed;
@@ -77,6 +84,7 @@
     }
     #termsBox h2 {
       margin-top: 0;
+      color: #4CAF50;
     }
     #termsBox button {
       margin-top: 15px;
@@ -107,16 +115,16 @@
     </div>
   </div>
 
-  <!-- Link mở Terms -->
+  <!-- Nút mở Terms -->
   <div class="terms-link">
-    <a onclick="openTerms()">Xem Điều khoản sử dụng</a>
+    <button onclick="openTerms()">Điều khoản sử dụng</button>
   </div>
 
   <!-- Popup Terms -->
   <div id="termsPopup">
     <div id="termsBox">
       <h2>Điều khoản sử dụng</h2>
-      <p>Chào mừng bạn đến với trang web thử nghiệm. Bằng việc sử dụng trang này, bạn đồng ý với các điều khoản sau:</p>
+      <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>
@@ -124,5 +132,70 @@
         <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>Để bảo mật, tên và mật khẩu không được lưu trực tiếp mà được mã hoá bằng <b>Base64</b>.</p>
-      <p>Ví dụ: <code>"admin"</code> khi mã hoá thành Base64 sẽ thành <code>"YWRtaW4="</code>.</p>
+      <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>
+    // Giấu tên và mật khẩu bằng Base64
+    const encodedUser = "YWRtaW4="; // "admin"
+    const encodedPass = "YWRtaW4="; // "admin"
+
+    let generatedCode = "";
+    let expiryTime = null;
+
+    function decode(str) {
+      return atob(str); // Giải mã Base64
+    }
+
+    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; // 10 phút
+        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>