From 813036d35862cfde2970345655dac854270311e8 Mon Sep 17 00:00:00 2001 From: samarsajad <142666229+samarsajad@users.noreply.github.com> Date: Fri, 14 Jun 2024 22:20:01 +0530 Subject: [PATCH 1/2] Added functionality to signin button --- login/login.css | 635 ++++++++++++++++++++++++------------------------ login/script.js | 49 +++- newLogin.html | 168 ++++++------- 3 files changed, 441 insertions(+), 411 deletions(-) diff --git a/login/login.css b/login/login.css index a2a8385e..285ae7d2 100644 --- a/login/login.css +++ b/login/login.css @@ -1,321 +1,318 @@ @import url("https://fonts.googleapis.com/css2?family=Poppins"); - * { - box-sizing: border-box; - } - - body { - display: flex; - background-color: #f6f5f7; - justify-content: center; - align-items: center; - flex-direction: column; - font-family: "Poppins", sans-serif; - overflow: hidden; - height: 100vh; - /* width: 100vh; */ - background: url("Aboe.gif"); - background-size: cover; - /* opacity: 1; */ - opacity: 1.2; - - } - - h1 { - font-weight: 700; - letter-spacing: -1.5px; - margin: 0; - margin-bottom: 15px; - } - - h1.title { - font-size: 45px; - line-height: 45px; - margin: 0; - text-shadow: 0 0 10px rgba(16, 64, 74, 0.5); - } - - p { - font-size: 14px; - font-weight: 100; - line-height: 20px; - letter-spacing: 0.5px; - margin: 20px 0 30px; - text-shadow: 0 0 10px rgba(16, 64, 74, 0.5); - } - - span { - font-size: 14px; - margin-top: 25px; - } - - a { - color: #333; - font-size: 14px; - text-decoration: none; - margin: 15px 0; - transition: 0.3s ease-in-out; - } - - a:hover { - color: #296543; - } - - .content { - display: flex; - width: 100%; - height: 50px; - align-items: center; - justify-content: space-around; - } - - .content .checkbox { - display: flex; - align-items: center; - justify-content: center; - } - - .content input { - accent-color: #333; - width: 12px; - height: 12px; - } - - .content label { - font-size: 14px; - user-select: none; - padding-left: 5px; - } - - button { - position: relative; - border-radius: 20px; - border: 1px solid #296543; - background-color: #296543; - color: #fff; - font-size: 15px; - font-weight: 700; - margin: 10px; - padding: 12px 80px; - letter-spacing: 1px; - text-transform: capitalize; - transition: 0.3s ease-in-out; - } - - button:hover { - letter-spacing: 3px; - } - - button:active { - transform: scale(0.95); - } - - button:focus { - outline: none; - } - - button.ghost { - background-color: rgba(225, 225, 225, 0.2); - border: 2px solid #fff; - color: #fff; - } - - button.ghost i{ - position: absolute; - opacity: 0; - transition: 0.3s ease-in-out; - } - - button.ghost i.register{ - right: 70px; - } - - button.ghost i.login{ - left: 70px; - } - - button.ghost:hover i.register{ - right: 40px; - opacity: 1; - } - - button.ghost:hover i.login{ - left: 40px; - opacity: 1; - } - - form { - background-color: #fff; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - padding: 0 50px; - height: 100%; - text-align: center; - } - - input { - background-color: #eee; - border-radius: 10px; - border: none; - padding: 12px 15px; - margin: 8px 0; - width: 100%; - } - - .container { - background-color: #fff; - border-radius: 25px; - box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); - position: relative; - overflow: hidden; - width: 768px; - max-width: 100%; - min-height: 500px; - } - - .form-container { - position: absolute; - top: 0; - height: 100%; - transition: all 0.6s ease-in-out; - } - - .login-container { - left: 0; - width: 50%; - z-index: 2; - } - - .container.right-panel-active .login-container { - transform: translateX(100%); - } - - .register-container { - left: 0; - width: 50%; - opacity: 0; - z-index: 1; - } - - .container.right-panel-active .register-container { - transform: translateX(100%); - opacity: 1; - z-index: 5; - animation: show 0.6s; - } - - @keyframes show { - 0%, - 49.99% { - opacity: 0; - z-index: 1; - } - - 50%, - 100% { - opacity: 1; - z-index: 5; - } - } - - .overlay-container { - position: absolute; - top: 0; - left: 50%; - width: 50%; - height: 100%; - overflow: hidden; - transition: transform 0.6s ease-in-out; - z-index: 100; - } - - .container.right-panel-active .overlay-container { - transform: translate(-100%); - } - - .overlay { - background-image: url('Aboe.gif'); - - background-repeat: no-repeat; - background-size: cover; - background-position: 0 0; - color: #fff; - position: relative; - left: -100%; - height: 100%; - width: 200%; - transform: translateX(0); - transition: transform 0.6s ease-in-out; - } - - .overlay::before { - content: ""; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background: linear-gradient( - to top, - rgba(46, 94, 109, 0.4) 40%, - rgba(46, 94, 109, 0) - ); - } - - .container.right-panel-active .overlay { - transform: translateX(50%); - } - - .overlay-panel { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - padding: 0 40px; - text-align: center; - top: 0; - height: 100%; - width: 50%; - transform: translateX(0); - transition: transform 0.6s ease-in-out; - } - - .overlay-left { - transform: translateX(-20%); - } - - .container.right-panel-active .overlay-left { - transform: translateX(0); - } - - .overlay-right { - right: 0; - transform: translateX(0); - } - - .container.right-panel-active .overlay-right { - transform: translateX(20%); - } - - .social-container { - margin: 20px 0; - } - - .social-container a { - border: 1px solid #dddddd; - border-radius: 50%; - display: inline-flex; - justify-content: center; - align-items: center; - margin: 0 5px; - height: 40px; - width: 40px; - transition: 0.3s ease-in-out; - } - - .social-container a:hover { - border: 1px solid #296543; - } \ No newline at end of file +* { + box-sizing: border-box; +} + +body { + display: flex; + background-color: #f6f5f7; + justify-content: center; + align-items: center; + flex-direction: column; + font-family: "Poppins", sans-serif; + overflow: hidden; + height: 100vh; + background: url("Aboe.gif"); + background-size: cover; + opacity: 1.2; + +} +h1 { + font-weight: 700; + letter-spacing: -1.5px; + margin: 0; + margin-bottom: 15px; +} + +h1.title { + font-size: 45px; + line-height: 45px; + margin: 0; + text-shadow: 0 0 10px rgba(16, 64, 74, 0.5); +} + +p { + font-size: 14px; + font-weight: 100; + line-height: 20px; + letter-spacing: 0.5px; + margin: 20px 0 30px; + text-shadow: 0 0 10px rgba(16, 64, 74, 0.5); +} + +span { + font-size: 14px; + margin-top: 25px; +} + +a { + color: #333; + font-size: 14px; + text-decoration: none; + margin: 15px 0; + transition: 0.3s ease-in-out; +} + +a:hover { + color: #4bb6b7; +} + +.content { + display: flex; + width: 100%; + height: 50px; + align-items: center; + justify-content: space-around; +} + +.content .checkbox { + display: flex; + align-items: center; + justify-content: center; +} + +.content input { + accent-color: #333; + width: 12px; + height: 12px; +} + +.content label { + font-size: 14px; + user-select: none; + padding-left: 5px; +} + +button { + position: relative; + border-radius: 20px; + border: 1px solid #4bb6b7; + background-color: #4bb6b7; + color: #fff; + font-size: 15px; + font-weight: 700; + margin: 10px; + padding: 12px 80px; + letter-spacing: 1px; + text-transform: capitalize; + transition: 0.3s ease-in-out; +} + +button:hover { + letter-spacing: 3px; +} + +button:active { + transform: scale(0.95); +} + +button:focus { + outline: none; +} + +button.ghost { + background-color: rgba(225, 225, 225, 0.2); + border: 2px solid #fff; + color: #fff; +} + +button.ghost i{ + position: absolute; + opacity: 0; + transition: 0.3s ease-in-out; +} + +button.ghost i.register{ + right: 70px; +} + +button.ghost i.login{ + left: 70px; +} + +button.ghost:hover i.register{ + right: 40px; + opacity: 1; +} + +button.ghost:hover i.login{ + left: 40px; + opacity: 1; +} + +form { + background-color: #fff; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 50px; + height: 100%; + text-align: center; +} + +input { + background-color: #eee; + border-radius: 10px; + border: none; + padding: 12px 15px; + margin: 8px 0; + width: 100%; +} + +.container { + background-color: #fff; + border-radius: 25px; + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); + position: relative; + overflow: hidden; + width: 768px; + max-width: 100%; + min-height: 500px; +} + +.form-container { + position: absolute; + top: 0; + height: 100%; + transition: all 0.6s ease-in-out; +} + +.login-container { + left: 0; + width: 50%; + z-index: 2; +} + +.container.right-panel-active .login-container { + transform: translateX(100%); +} + +.register-container { + left: 0; + width: 50%; + opacity: 0; + z-index: 1; + +} + +.container.right-panel-active .register-container { + transform: translateX(100%); + opacity: 1; + z-index: 5; + animation: show 0.6s; +} + +@keyframes show { + 0%, + 49.99% { + opacity: 0; + z-index: 1; + } + + 50%, + 100% { + opacity: 1; + z-index: 5; + } +} + +.overlay-container { + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + overflow: hidden; + transition: transform 0.6s ease-in-out; + z-index: 100; +} + +.container.right-panel-active .overlay-container { + transform: translate(-100%); +} + +.overlay { + background-image: url('Aboe.gif'); + background-repeat: no-repeat; + background-size: cover; + background-position: 0 0; + color: #fff; + position: relative; + left: -100%; + height: 100%; + width: 200%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.overlay::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: linear-gradient( + to top, + rgba(46, 94, 109, 0.4) 40%, + rgba(46, 94, 109, 0) + ); +} + +.container.right-panel-active .overlay { + transform: translateX(50%); +} + +.overlay-panel { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + text-align: center; + top: 0; + height: 100%; + width: 50%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.overlay-left { + transform: translateX(-20%); +} + +.container.right-panel-active .overlay-left { + transform: translateX(0); +} + +.overlay-right { + right: 0; + transform: translateX(0); +} + +.container.right-panel-active .overlay-right { + transform: translateX(20%); +} + +.social-container { + margin: 20px 0; +} + +.social-container a { + border: 1px solid #dddddd; + border-radius: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + margin: 0 5px; + height: 40px; + width: 40px; + transition: 0.3s ease-in-out; +} + +.social-container a:hover { + border: 1px solid #4bb6b7; +} \ No newline at end of file diff --git a/login/script.js b/login/script.js index b4859504..57112847 100644 --- a/login/script.js +++ b/login/script.js @@ -1,11 +1,42 @@ -const registerButton = document.getElementById("register"); - const loginButton = document.getElementById("login"); - const container = document.getElementById("container"); +document.addEventListener("DOMContentLoaded", function() { + const registerButton = document.getElementById("register"); + const loginButton = document.getElementById("login"); + const container = document.getElementById("container"); + const registerForm = document.getElementById("registerForm"); + const loginForm = document.getElementById("loginForm"); - registerButton.addEventListener("click", () => { - container.classList.add("right-panel-active"); - }); + registerButton.addEventListener("click", (event) => { + event.preventDefault(); + container.classList.add("right-panel-active"); + registerForm.scrollIntoView({ behavior: "smooth" }); + }); - loginButton.addEventListener("click", () => { - container.classList.remove("right-panel-active"); - }); \ No newline at end of file + loginButton.addEventListener("click", (event) => { + event.preventDefault(); + container.classList.remove("right-panel-active"); + loginForm.scrollIntoView({ behavior: "smooth" }); + }); + + registerForm.addEventListener("submit", (event) => { + event.preventDefault(); + + + //registration success + document.getElementById("registerMessage").style.display = "block"; + setTimeout(() => { + container.classList.remove("right-panel-active"); + loginForm.scrollIntoView({ behavior: "smooth" }); + }, 2000); + }); + + loginForm.addEventListener("submit", (event) => { + event.preventDefault(); + + + // login success + alert("Login successful!"); + setTimeout(() => { + window.location.href = "index.html"; + }, 1000); + }); +}); \ No newline at end of file diff --git a/newLogin.html b/newLogin.html index 4f730cc1..2be936d9 100644 --- a/newLogin.html +++ b/newLogin.html @@ -256,93 +256,95 @@

Create Account

--> - - - - - - - TOUR GUIDE - - - - - -
+ + + + + + TourGuide -
-
-

TOUR GUIDE

- - - - - - - or use your account - -
-
+ + + + +
- +
+
+

Tour Guide

+ + + + + + +
+
-
-
-
-

Welcome
Back!

-

if Yout have an account, login here and have fun

- -
-
-

Start your
journy now

-

if you don't have an account yet, join us and start your journey.

- -
-
-
+ -
+
+
+
+

Hello
friends

+

if you have an account, login here and have fun

+ +
+
+

Start your
journey now

+

if you don't have an account yet, join us and start your journey.

+ +
+
+
- +
- - \ No newline at end of file + + + + \ No newline at end of file From 131c510a3d3acb3d23749da5a5dddadc3d12ef67 Mon Sep 17 00:00:00 2001 From: samarsajad <142666229+samarsajad@users.noreply.github.com> Date: Fri, 14 Jun 2024 22:38:39 +0530 Subject: [PATCH 2/2] added functionality to the login button --- newLogin.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/newLogin.html b/newLogin.html index 2be936d9..d02e8f1f 100644 --- a/newLogin.html +++ b/newLogin.html @@ -262,7 +262,7 @@

Create Account

- TourGuide + Tourguide