From 98f57ebcc19c4b54c64cbd1c1dc9f29b035d278f Mon Sep 17 00:00:00 2001 From: Sahil Tyagi Date: Thu, 9 May 2024 23:36:06 +0530 Subject: [PATCH] Commit by Sahil Tyagi after changing UI --- login.css | 160 ++++++++++++++++++++++++--- login.html | 312 ++++++++++++++++++++++++++++++++--------------------- 2 files changed, 333 insertions(+), 139 deletions(-) diff --git a/login.css b/login.css index e99723083..1bdbd55cf 100644 --- a/login.css +++ b/login.css @@ -1,24 +1,39 @@ +body { + width: 100%; + height: 100%; + font-family: var(--ff-philosopher); + font-size: 4rem; + /* background-color: #c9acc2; */ + background-color: #f5ebe6; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + position: relative; + gap: 1px; +} +.navbar { + width: 100%; +} .navbar-header { - font-family: var(--ff-philosopher); - font-size: 4rem; - line-height: 1; - display: block; - text-decoration-color: #fff; - } -.navbar{ - background-color: #c9acc2; + width: 100%; + font-family: var(--ff-philosopher); + font-size: 4rem; + line-height: 1; + display: block; + text-decoration-color: #fff; } - -body { - font-family: var(--ff-philosopher); - font-size: 4rem; - background-color: #c9acc2; +.navbar-header a { + color: #ce6857; + font-size: 2rem; + margin-left: 2rem; +} +.navbar { + background-color: #f5ebe6; } - .container { - } -.col-sm-5{ +/* .col-sm-5{ margin-left:200px; align-items: right; margin-bottom: 200px; @@ -60,4 +75,117 @@ body { .message { color: red; +} */ + +.note { + width: 50%; + height: auto; +} +.note h1 { + font-size: 3rem; + font-weight: 800; + color: #ce6857; + text-align: center; +} + +.main { + position: relative; + display: flex; + flex-direction: column; + left: 22vw; + /* background-color: #240046; */ + background-color: #ce6857; + max-height: 47rem; + width: 40rem; + overflow: hidden; + border-radius: 12px; + box-shadow: 7px 7px 10px 3px #24004628; +} + +.form { + display: flex; + flex-direction: column; + gap: 14px; + padding: 24px; +} + +/*checkbox to switch from sign up to login*/ +#chk { + display: none; +} + +/*Login*/ +.login { + position: relative; + width: 100%; + height: 100%; +} + +.login label { + margin: 15% 0 5%; +} + +label { + color: #fff; + font-size: 3rem; + justify-content: center; + display: flex; + font-weight: bold; + cursor: pointer; + transition: 0.5s ease-in-out; +} + +.input { + width: 100%; + height: 40px; + background: #e0dede; + padding: 10px; + border: none; + outline: none; + border-radius: 4px; + font-size: 2rem; +} + +/*Register*/ +.register { + background: #eee; + border-radius: 60% / 10%; + transform: translateY(5%); + transition: 0.8s ease-in-out; +} + +.register label { + color: #ce6857; + transform: scale(0.6); +} +#chk:checked ~ .register { + transform: translateY(-69%); +} + +#chk:checked ~ .register label { + transform: scale(1); + margin: 10% 0 5%; +} + +#chk:checked ~ .login label { + transform: scale(0.6); + margin: 5% 0 5%; +} +/*Button*/ +.form button { + width: 85%; + height: 40px; + margin: 12px auto 10%; + color: #fff; + background: #d54b33; + font-size: 1rem; + font-weight: bold; + border: none; + border-radius: 4px; + cursor: pointer; + transition: 0.2s ease-in; +} + +.form button:hover { + background-color: red; } diff --git a/login.html b/login.html index e3e7fcbdd..b04f5979d 100644 --- a/login.html +++ b/login.html @@ -1,35 +1,44 @@ - - - - - - - How to create Firebase login and register? - - - -
-
- SwapReads - + + + How to create Firebase login and register? + + + +
+
+ Wanna return to the Home page + -
-
- -
-
-
-
-

Register for new users

-
+
+
+ +
+
+
+

+ Hey !! Welcome to SwapReads . Please get yourself Registered or verify + your credentials to get started. +

+
+
+
+ + + + + - -
- -
- - + - -
- -
+ --> + - - - \ No newline at end of file + //----- Logout code start + document.getElementById("logout").addEventListener("click", function () { + signOut(auth) + .then(() => { + // Sign-out successful. + console.log("Sign-out successful."); + alert("Sign-out successful."); + document.getElementById("logout").style.display = "none"; + }) + .catch((error) => { + // An error happened. + console.log("An error happened."); + }); + }); + //----- End + +