From 692059e9aa35972de9216d1f212dda47d530b6f4 Mon Sep 17 00:00:00 2001 From: Gopal <95002622+novalbahri17@users.noreply.github.com> Date: Tue, 11 Jun 2024 11:19:34 +0700 Subject: [PATCH] Delete login directory --- login/index.html | 53 ------------ login/script.js | 50 ----------- login/style.css | 210 ----------------------------------------------- 3 files changed, 313 deletions(-) delete mode 100644 login/index.html delete mode 100644 login/script.js delete mode 100644 login/style.css diff --git a/login/index.html b/login/index.html deleted file mode 100644 index 9746cd2..0000000 --- a/login/index.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - - - - Modern Login Page | AsmrProg - - - - -
-
-
-

Create Account

- or use your email for registration - - - - -
-
-
-
-

Sign In

- or use your email and password - - - -
-
-
-
-
-

Welcome Back!

-

Enter your personal details to use all of site features

- -
-
-

Hello, Friend!

-

Register with your personal details to use all of site features

- -
-
-
-
- - - - - diff --git a/login/script.js b/login/script.js deleted file mode 100644 index 0a4b56e..0000000 --- a/login/script.js +++ /dev/null @@ -1,50 +0,0 @@ -const container = document.getElementById('container'); -const registerBtn = document.getElementById('register'); -const loginBtn = document.getElementById('login'); - -const signUpForm = document.getElementById('signUpForm'); -const signInForm = document.getElementById('signInForm'); - -registerBtn.addEventListener('click', () => { - container.classList.add("active"); -}); - -loginBtn.addEventListener('click', () => { - container.classList.remove("active"); -}); - -// Simpan data pengguna pada sign up -signUpForm.addEventListener('submit', (event) => { - event.preventDefault(); - - const name = document.getElementById('signUpName').value; - const email = document.getElementById('signUpEmail').value; - const password = document.getElementById('signUpPassword').value; - - const user = { - name: name, - email: email, - password: password - }; - - localStorage.setItem('user', JSON.stringify(user)); - alert('Registration successful! Please sign in.'); - container.classList.remove("active"); -}); - -// Verifikasi data pengguna pada sign in -signInForm.addEventListener('submit', (event) => { - event.preventDefault(); - - const email = document.getElementById('signInEmail').value; - const password = document.getElementById('signInPassword').value; - - const storedUser = JSON.parse(localStorage.getItem('user')); - - if (storedUser && storedUser.email === email && storedUser.password === password) { - alert('Login successful! Redirecting to Home...'); - window.location.href = '/home/home.html'; - } else { - alert('Login failed! Incorrect email or password.'); - } -}); diff --git a/login/style.css b/login/style.css deleted file mode 100644 index 19df29d..0000000 --- a/login/style.css +++ /dev/null @@ -1,210 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); - -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Montserrat', sans-serif; -} - -body{ - background-color: #c9d6ff; - background: linear-gradient(to right, #e2e2e2, #c9d6ff); - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - height: 100vh; -} - -.container{ - background-color: #fff; - border-radius: 30px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35); - position: relative; - overflow: hidden; - width: 768px; - max-width: 100%; - min-height: 480px; -} - -.container p{ - font-size: 14px; - line-height: 20px; - letter-spacing: 0.3px; - margin: 20px 0; -} - -.container span{ - font-size: 12px; -} - -.container a{ - color: #333; - font-size: 13px; - text-decoration: none; - margin: 15px 0 10px; -} - -.container button{ - background-color: #512da8; - color: #fff; - font-size: 12px; - padding: 10px 45px; - border: 1px solid transparent; - border-radius: 8px; - font-weight: 600; - letter-spacing: 0.5px; - text-transform: uppercase; - margin-top: 10px; - cursor: pointer; -} - -.container button.hidden{ - background-color: transparent; - border-color: #fff; -} - -.container form{ - background-color: #fff; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - padding: 0 40px; - height: 100%; -} - -.container input{ - background-color: #eee; - border: none; - margin: 8px 0; - padding: 10px 15px; - font-size: 13px; - border-radius: 8px; - width: 100%; - outline: none; -} - -.form-container{ - position: absolute; - top: 0; - height: 100%; - transition: all 0.6s ease-in-out; -} - -.sign-in{ - left: 0; - width: 50%; - z-index: 2; -} - -.container.active .sign-in{ - transform: translateX(100%); -} - -.sign-up{ - left: 0; - width: 50%; - opacity: 0; - z-index: 1; -} - -.container.active .sign-up{ - transform: translateX(100%); - opacity: 1; - z-index: 5; - animation: move 0.6s; -} - -@keyframes move{ - 0%, 49.99%{ - opacity: 0; - z-index: 1; - } - 50%, 100%{ - opacity: 1; - z-index: 5; - } -} - -.social-icons{ - margin: 20px 0; -} - -.social-icons a{ - border: 1px solid #ccc; - border-radius: 20%; - display: inline-flex; - justify-content: center; - align-items: center; - margin: 0 3px; - width: 40px; - height: 40px; -} - -.toggle-container{ - position: absolute; - top: 0; - left: 50%; - width: 50%; - height: 100%; - overflow: hidden; - transition: all 0.6s ease-in-out; - border-radius: 150px 0 0 100px; - z-index: 1000; -} - -.container.active .toggle-container{ - transform: translateX(-100%); - border-radius: 0 150px 100px 0; -} - -.toggle{ - background-color: #512da8; - height: 100%; - background: linear-gradient(to right, #5c6bc0, #512da8); - color: #fff; - position: relative; - left: -100%; - height: 100%; - width: 200%; - transform: translateX(0); - transition: all 0.6s ease-in-out; -} - -.container.active .toggle{ - transform: translateX(50%); -} - -.toggle-panel{ - position: absolute; - width: 50%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - padding: 0 30px; - text-align: center; - top: 0; - transform: translateX(0); - transition: all 0.6s ease-in-out; -} - -.toggle-left{ - transform: translateX(-200%); -} - -.container.active .toggle-left{ - transform: translateX(0); -} - -.toggle-right{ - right: 0; - transform: translateX(0); -} - -.container.active .toggle-right{ - transform: translateX(200%); -} \ No newline at end of file