imporved login and register pages

^
WSU-4110 · Oct 2, 2024 · f2ba64d · f2ba64d
1 parent 9b1da60
commit f2ba64d
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 26 deletions.
diff --git a/login.html b/login.html
@@ -4,22 +4,26 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Register</title>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="loginreg.css">
 </head>
 <body>
-    <h1>Log in to an Account</h1>
-    <form action="TBD" method="TBD" id="login-form">
-          <!--<label for="username">Username:</label>
-          <input type="text" id="username" name="username" required>-->
-
-        <label for="email">Email:</label>
-        <input type="email" id="email" name="email" required>
-
-        <label for="password">Password:</label>
-        <input type="password" id="password" name="password" required>
-
-        <button type="submit">Login</button>
+  <div class="wrapper login">
+    <h1>Welcome Back!</h1>
+    <p>We're excited to see you again!</p>
+    <form id="login-form">
+      <input type="text" id="email" placeholder="Enter your email" required>
+      <input type="password" id="password" placeholder="Enter your password" required>
+      <p class="recover">
+        <a href="#">Forgot your password?</a>
+      </p>
+      <button type="submit" class="login">Sign in</button>
     </form>
+
+
+    <div class="not-member">
+      Not a member yet? <a href="register.html">Register now</a>
+    </div>
+  </div>
     <script src="https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js"></script>
     <script src="https://www.gstatic.com/firebasejs/10.13.2/firebase-firestore-compat.js"></script>
     <script type="module">

diff --git a/loginreg.css b/loginreg.css
@@ -0,0 +1,123 @@
+/* General Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  /* Body Styling */
+  body {
+    font-family: 'Poppins', sans-serif;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+
+  .wrapper {
+    padding: 40px;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    width: 100%;
+    max-width: 400px;
+  }
+
+
+  h1 {
+    font-size: 28px;
+    margin-bottom: 10px;
+    color: #ffae66; /* Light orange for headings */
+  }
+
+
+  p {
+    font-size: 16px;
+    margin-bottom: 20px;
+    color: #666666; /* Light gray for paragraph text */
+  }
+
+  /* Form Inputs */
+  input[type="text"], input[type="email"], input[type="password"] {
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    border: none;
+    border-radius: 5px;
+    background-color: #fff;
+    color: #666666;
+    font-size: 16px;
+    border: 1px solid #ffae66; /* Light orange border */
+  }
+
+  input:focus {
+    outline: none;
+    background-color: #fff8f0; /* Light orange background on focus */
+  }
+
+  /* Button Styling */
+  button {
+    padding: 12px;
+    width: 100%;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s;
+    background-color: #ffae66; /* Light orange button background */
+    color: #fff; /* White text */
+  }
+
+  button:hover {
+    background-color: #e09457; /* Darker light orange on hover */
+  }
+
+  /* Links and Hover Effects */
+  .recover a, .not-member a {
+    color: #ffae66;
+    text-decoration: none;
+  }
+
+  .recover a:hover, .not-member a:hover {
+    text-decoration: underline;
+  }
+
+  /* Specific Colors and Backgrounds */
+  .wrapper.register {
+    background-color: #fff8f0; /* Light orange background for register page */
+    color: #ffae66;
+  }
+
+  .wrapper.login {
+    background-color: #fff; /* White background for login page */
+    color: #ffae66;
+  }
+
+  button.register {
+    background-color: #ffae66; /* Light orange button for register */
+  }
+
+  button.login {
+    background-color: #fff; /* White button for login */
+    color: #ffae66; /* Light orange text for login button */
+  }
+
+  p.recover {
+    margin: 10px 0;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 600px) {
+    .wrapper {
+      padding: 30px;
+    }
+    h1 {
+      font-size: 24px;
+    }
+    p {
+      font-size: 14px;
+    }
+  }
+
diff --git a/register.html b/register.html
@@ -4,22 +4,23 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Register</title>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="loginreg.css">
 </head>
 <body>
-    <h1>Create an Account</h1>
-    <form action="TBD" method="TBD" id="signup-form">
-          <!--<label for="username">Username:</label>
-          <input type="text" id="username" name="username" required>-->
-
-        <label for="email">Email:</label>
-        <input type="email" id="email" name="email" required>
-
-        <label for="password">Password:</label>
-        <input type="password" id="password" name="password" required>
-
-        <button type="submit">Register</button>
+  <div class="wrapper register">
+    <h1>Join Pageturners!</h1>
+    <p>Sign up and be a part of our book-loving community!</p>
+    <form id="signup-form">
+      <input type="email" id="email" placeholder="Enter your email" required>
+      <input type="password" id = "password" placeholder="Create a password" required>
+      <button type="submit" class="register">Register</button>
     </form>
+
+
+    <div class="not-member">
+      Already a member? <a href="login.html">Login here</a>
+    </div>
+  </div>
     <script src="https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js"></script>
     <script src="https://www.gstatic.com/firebasejs/10.13.2/firebase-firestore-compat.js"></script>
     <script type="module">