From f86f5de9b65decc02618317f6e262512a23988f0 Mon Sep 17 00:00:00 2001
From: Modo <yashlaxman@gmail.com>
Date: Sat, 14 Oct 2023 19:08:12 +0530
Subject: [PATCH] make UI changes

---
 frontend/style.css | 76 ++++++++++++++++++++++++++++++++++++----------
 index.html         | 15 +++++++--
 2 files changed, 72 insertions(+), 19 deletions(-)

diff --git a/frontend/style.css b/frontend/style.css
index 1579667..12faaf7 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -1,3 +1,6 @@
+* {
+  box-sizing: border-box;
+}
 
 body {
   background-color: dimgrey;
@@ -22,43 +25,55 @@ body {
 .container {
   display: flex;
   background-color: transparent;
-  backdrop-filter: blur(30px);
+  backdrop-filter: blur(20px);
   justify-content: center;
   align-items: center;
-  width: 300px;
-  height: 250px;
+  width: 500px;
+  height: 450px;
   flex-direction: column;
   padding: 70px;
-  padding-bottom: 80px;
-  box-shadow: 7px 7px 5px rgb(0, 0, 0, 0.5);
+  padding-bottom: 90px;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
   row-gap: 8px;
   border-radius: 50px;
-  border-top: rgba(255, 255, 255, 0.2) 5px solid;
-  border-left: rgb(255, 255, 255, 0.2) 5px solid;
 }
 
 #login {
+  display: block;
   text-align: center;
   font-family: 'Pixelify Sans', cursive;
   font-size: 50px;
-  text-shadow: 2px 2px 5px grey;
+  text-shadow: 2px 2px 5px rgb(0, 0, 0);
   color: white;
-  float: initial;
 }
 
 .input {
   width: 300px;
   height: 30px;
   background-color: transparent;
-  color: white;
+  color: rgb(255, 255, 255, 0.8);
   box-shadow: 2px 2px 3px rgb(0, 0, 0, 0.5);
+  border: none;
   border-top: rgba(255, 255, 255, 0.2) 2px solid;
   border-left: rgb(255, 255, 255, 0.2) 2px solid;
   border-radius: 10px;
+  padding-left: 5px;
 }
 
-#username {
+.idiv p {
+  color: white;
+  font-family: 'Pixelify Sans', cursive;
+  margin-left: 5px;
+}
 
+#username::placeholder {
+  color: rgb(255, 255, 255, 0.5);
+  padding-left: 5px;
+}
+
+#password::placeholder {
+  color: rgb(255, 255, 255, 0.5);
+  padding-left: 5px;
 }
 
 .idiv {
@@ -69,13 +84,16 @@ body {
   padding: 7px;
 }
 
-.buttons {
-  padding: 10px;
+.idiv p{
+  padding: none;
+  margin: none;
+  display: absolute;
+  translate: 0px 12px;
 }
 
 #loginb {
   background-color: transparent;
-  color: white;
+  color: rgb(255, 255, 255, 0.8);
   padding: 7px;
   margin-top: 20px;
   margin-bottom: 20px;
@@ -87,6 +105,32 @@ body {
   border-radius: 10px;
 }
 
-#loginb:focus {
-  background-color: grey;
+#loginb:active {
+  background-color: rgb(155, 155, 155, 0.3);
+}
+
+.help {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+}
+
+.help div{
+  display: flex;
+  width: 50%;
+  justify-content: center;
+}
+
+a {
+  text-decoration: none;
+  color: rgba(255, 255, 255, 0.5);
+  text-align: center;
+  font-family: 'Poppins', sans-serif;
+  font-size: 12px;
+}
+
+a:active {
+  color: rgb(196, 196, 196, 10);
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 8d15cb9..cbdacf4 100644
--- a/index.html
+++ b/index.html
@@ -13,13 +13,22 @@
   <div class="wrapper">
        <div class="container">
 
-            <div id="signin">
+            <div>
                 <p id="login">Sign In</p>
             </div>
 
             <div class="idiv">
-                <input class="input" id="username" type="text">
-                <input class="input" id="password" type="password">
+                <input class="input" id="username" type="text" placeholder="Username">
+                <input class="input" id="password" type="password" placeholder="Pasword">
+            </div>
+
+            <div class="help">
+                <div>
+                    <a href="">Forgot Password</a>
+                </div>
+                <div>
+                    <a href="">Register</a>
+                </div>
             </div>
 
             <div class="buttons">