Merge pull request #25 from harbakshsinghbaath/main

Login page revamped to match the retro theme

login/login.css

@@ -3,9 +3,84 @@
     margin: 0;
     padding: 0;
 }
+/*to change bg image use here*/
+body {
+    background: url("https://images.pexels.com/photos/7135057/pexels-photo-7135057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2") no-repeat center center fixed;
+    background-size: cover;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    color: white;
+    text-shadow: 1px 1px 2px #000;
+}
+.login-container {
+    backdrop-filter: blur(10px);
+    opacity: 0.85;
+    background-color: rgba(0, 0, 0, 0);
+    padding: 2rem;
+    border-radius: 20px;
+    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
+    text-align: center;
+    max-width: 40px;
+    width: 100%;
+    animation: fadeIn 2s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 0.75;
+        transform: scale(10);
+    }
+}
+
+h1 {
+    margin-bottom: 2rem;
+    font-size: 1.5rem;
+    color: #fb5283;
+}
 
+.input-group {
+    margin-bottom: 1.5rem;
+    text-align: left;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-size: 16px;
+}
+
+input[type="text"], input[type="password"] {
+    width: 100%;
+    padding: 0.75rem;
+    border: 2px solid #6a1b9a;
+    border-radius: 5px;
+    background-color: #3a3f44;
+    color: white;
+    font-family: 'Press Start 2P', cursive;
+    font-size: 0.875rem;
+}
+
+input[type="text"]:focus, input[type="password"]:focus {
+    outline: none;
+    border-color: #ba68c8;
+    background-color: #2a2e32;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+/* and here for bg image*/
 body {
-    background: url('https://www.example.com/path/to/your/gaming-background.jpg') no-repeat center center fixed;
+    background: url('https://images.pexels.com/photos/7135057/pexels-photo-7135057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center fixed;
     background-size: cover;
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
     display: flex;
@@ -18,11 +93,11 @@ body {
 
 .login-container {
     background-color: rgba(0, 0, 0, 0.8);
-    padding: 2rem;
-    border-radius: 15px;
+    padding: 5rem;
+    border-radius: 20px;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
     text-align: center;
-    max-width: 400px;
+    max-width: 500px;
     width: 100%;
     animation: fadeIn 1.5s ease-in-out;
 }
@@ -33,7 +108,7 @@ body {
         transform: scale(0.9);
     }
     to {
-        opacity: 1;
+        opacity: 0.75;
         transform: scale(1);
     }
 }
@@ -72,21 +147,95 @@ input[type="text"]:focus, input[type="password"]:focus {
     background-color: #2a2e32;
 }
 
-.login-button {
-    background-color: #ba68c8;
-    color: #282c34;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-family: 'Press Start 2P', cursive;
+body{
+  text-align:center;
+  background-color:#ffcc8e;
+}
+
+.button{
+  position:relative;
+  display:inline-block;
+  margin:15px;
+}
+/*login button*/
+.button a{
+  color:white;
+  font-family:Helvetica, sans-serif;
+  font-weight:bold;
+  font-size:20px;
+  text-align: center;
+  text-decoration:none;
+  background-color:#FFA12B;
+  display:block;
+  position:relative;
+  padding:15px 50px;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  text-shadow: 0px 1px 0px #000;
+  filter: dropshadow(color=#000, offx=0px, offy=1px);
+
+  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
+  -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
+  box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
+
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+
+.button a:active{
+  top:10px;
+  background-color:#F78900;
+
+  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
+  -moz-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100;
+  box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
+}
+
+.button:after{
+  content:"";
+  height:100%;
+  width:100%;
+  padding:4px;
+  position: absolute;
+  bottom:-15px;
+  left:-4px;
+  z-index:-1;
+  background-color:#2B1800;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+.links {
+    margin-top: 18px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.links a {
+    color: #fb5283;
+    text-decoration: none;
+    transition: color 0.3s;
     font-size: 18px;
-    transition: background-color 0.3s, transform 0.3s;
+    flex: 1; 
+    text-align: center;
+}
+
+.links a:first-child {
+    font-size: 15px; 
+}
+
+.links a:first-child: hover{
+    text-decoration: underline;
 }
 
-.login-button:hover {
-    background-color: #ab47bc;
-    transform: scale(1.05);
+.links a:not(:last-child) {
+    margin-right: 20px; 
+}
+
+.links a: hover {
+    color: #ff80ab;
+}
 }
 
 .links {
@@ -108,14 +257,14 @@ input[type="text"]:focus, input[type="password"]:focus {
     font-size: 15px; 
 }
 
-.links a:first-child:hover{
+.links a:first-child: hover{
     text-decoration: underline;
 }
 
 .links a:not(:last-child) {
     margin-right: 20px; 
 }
 
-.links a:hover {
+.links a: hover {
     color: #ff80ab;
 }

login/login.html

@@ -19,7 +19,11 @@ <h1>Login to Your Account</h1>
                 <label for="password">Password</label>
                 <input type="password" id="password" name="password" required>
             </div>
-            <button type="submit" class="login-button">Login</button>
+            <div ontouchstart="">
+  <div class="button">
+    <a href="#">Login</a>
+  </div>
+</div>
         </form>
         <div class="links">
             <a href="#">Forgot Password?</a>