New code!

NhatQuyenIT · Dec 3, 2023 · 9eaf5cd · 9eaf5cd
1 parent d05d293
commit 9eaf5cd
Show file tree

Hide file tree

Showing 7 changed files with 440 additions and 107 deletions.
diff --git a/6213932.jpg b/6213932.jpg
diff --git a/admin.html b/admin.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Administrator</title>
+    <link rel="icon" href="./img/HHPC_logo.ico" type="image/x-icon">
+    <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+
+    <header>
+        <nav class="navigation">
+            <button class="btnLogin-popup">Login</button>
+        </nav>
+    </header>
+
+    <div class="wrapper">
+        <span class="icon-close">
+            <ion-icon name="close-outline"></ion-icon>
+        </span>
+
+        <div class="form-box login">
+            <h2>Login Administrator</h2>
+            <form action="#">
+                <div class="input-box">
+                    <span class="icon"><ion-icon name="mail"></ion-icon>
+                    </span>
+                    <input type="email" name="" id="" required>
+                    <label for="">Email</label>
+                </div>
+                <div class="input-box">
+                    <span class="icon"><ion-icon name="lock-closed"></ion-icon>
+                    </span>
+                    <input type="password" name="" id="" required>
+                    <label for="">Password</label>
+                </div>
+                <div class="remember-forgot">
+                    <label for="">
+                        <input type="checkbox" name="" id="">Remember me
+                    </label>
+                    <a href="#">Forgot Password?</a>
+                </div>
+                <button type="submit" class="btn">Login
+                </button>
+                <div class="login-register">
+                    <p>Don't have an account?<a href="#" class="register-link">Register</a></p>
+                </div>
+            </form>
+        </div>
+
+        <div class="form-box register">
+            <h2>Registration</h2>
+            <form action="#">
+                <div class="input-box">
+                    <span class="icon">
+                        <ion-icon name="person"></ion-icon>
+                    </span>
+                    <input type="text" name="" id="" required>
+                    <label for="">Username</label>
+                </div>
+                <div class="input-box">
+                    <span class="icon"><ion-icon name="mail"></ion-icon>
+                    </span>
+                    <input type="email" name="" id="" required>
+                    <label for="">Email</label>
+                </div>
+                <div class="input-box">
+                    <span class="icon"><ion-icon name="lock-closed"></ion-icon>
+                    </span>
+                    <input type="password" name="" id="" required>
+                    <label for="">Password</label>
+                </div>
+                <div class="remember-forgot">
+                    <label for="">
+                        <input type="checkbox" name="" id="">
+                       I agree to the terms & conditions
+                    </label>
+                </div>
+                <button type="submit" class="btn">Register
+                </button>
+                <div class="login-register">
+                    <p>Already have an account?<a href="#" class="login-link">
+                        Login</a></p>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <div id="customalert"></div>
+    <script src="./js/script.js"></script>
+    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
+</body>
+</html>
diff --git a/basic_search_javascript.html b/basic_search_javascript.html
diff --git a/chatGPT.html b/chatGPT.html
diff --git a/js/MyJS.js b/js/MyJS.js
@@ -136,7 +136,7 @@ function createUser(e) {
     for (var i = 0; i < userArray.length; i++) {
         if (user.username == userArray[i].username) {
             document.getElementById('usererror').style.display = 'block';
-            document.getElementById('usererror').innerHTML = 'Tên đăng nhập đã có người sử dụng';
+            document.getElementById('usererror').innerHTML = 'Tên đăng nhập đã có người sử dụng!';
             username.focus();
             return false;
         }
@@ -174,12 +174,13 @@ function login(e) {
                 closeform();
                 localStorage.setItem('userlogin', JSON.stringify(userArray[i]));
                 updateUIAfterLogin(); // Thêm hàm này để cập nhật giao diện
+                customAlert('Bạn đã đăng nhập thành công!', 'success');
                 return true;
             }
         }
     }
     document.getElementById('passwordloginerror').style.display = 'block';
-    document.getElementById('passwordloginerror').innerHTML = 'Sai thông tin đăng nhập';
+    document.getElementById('passwordloginerror').innerHTML = 'Sai thông tin đăng nhập!';
     return false;
 }
 function updateUIAfterLogin() {

diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,101 @@
+const wrapper = document.querySelector('.wrapper');
+const loginLink = document.querySelector('.login-link');
+const registerLink = document.querySelector('.register-link');
+const btnPopup = document.querySelector('.btnLogin-popup');
+const iconClose = document.querySelector('.icon-close');
+const loginForm = document.querySelector('.form-box.login form');
+
+const users = [
+    { username: 'admin', email: '[email protected]', password: 'admin@12345' },
+    // Thêm các thông tin đăng nhập khác nếu cần thiết
+];
+
+function showRegisterForm() {
+    wrapper.classList.add('active');
+}
+
+function showLoginForm() {
+    wrapper.classList.remove('active');
+}
+
+function showPopup() {
+    wrapper.classList.add('active-popup');
+}
+
+function hidePopup() {
+    wrapper.classList.remove('active-popup');
+}
+
+function loginUser(email, password) {
+    // Kiểm tra thông tin đăng nhập
+    const user = users.find(u => u.email === email && u.password === password);
+    return user;
+}
+
+if (registerLink) {
+    registerLink.addEventListener('click', showRegisterForm);
+}
+
+if (loginLink) {
+    loginLink.addEventListener('click', showLoginForm);
+}
+
+if (btnPopup) {
+    btnPopup.addEventListener('click', showPopup);
+}
+
+if (iconClose) {
+    iconClose.addEventListener('click', hidePopup);
+}
+
+if (loginForm) {
+    loginForm.addEventListener('submit', function (event) {
+        event.preventDefault();
+
+        // Lấy thông tin từ form
+        const emailInput = this.querySelector('input[type="email"]');
+        const passwordInput = this.querySelector('input[type="password"]');
+        const email = emailInput.value;
+        const password = passwordInput.value;
+
+        // Kiểm tra thông tin đăng nhập
+        const user = loginUser(email, password);
+
+        if (user) {
+
+            // Sử dụng hàm để hiển thị cảnh báo
+            customAlert('Bạn đã đăng nhập thành công!', 'success');
+            // Đăng nhập thành công, chuyển hướng sang trang admin1.html
+            window.location.href = 'admin1.html';
+        } else {
+            // Hiển thị thông báo đăng nhập không thành công
+            customAlert('Đăng nhập không thành công. Vui lòng kiểm tra lại thông tin đăng nhập!', 'warning');
+        }
+    });
+}
+// Hàm hiển thị cảnh báo tùy chỉnh
+function customAlert(message, type) {
+    var customAlertDiv = document.getElementById("customalert");
+
+    // Xác định màu sắc dựa trên kiểu
+    switch (type) {
+        case 'success':
+            customAlertDiv.style.backgroundColor = '#4CAF50';
+            break;
+        case 'warning':
+            customAlertDiv.style.backgroundColor = '#f44336';
+            break;
+        default:
+            // Mặc định cho các kiểu khác
+            customAlertDiv.style.backgroundColor = '#333';
+    }
+
+    // Thiết lập nội dung và hiển thị
+    customAlertDiv.innerHTML = message;
+    customAlertDiv.classList.add("show");
+
+    // Tự động ẩn cảnh báo sau 3.5 giây (3500 milliseconds)
+    setTimeout(function () {
+        customAlertDiv.classList.remove("show");
+    }, 3500);
+}