Enhanced Pages and made responsive

multiverseweb · Oct 24, 2024 · a868f81 · a868f81
1 parent 3452e60
commit a868f81
Show file tree

Hide file tree

Showing 6 changed files with 405 additions and 100 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5502
+    "liveServer.settings.port": 5503
 }
diff --git a/website/login.html b/website/login.html
@@ -1,64 +1,246 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+  <head>
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Login</title>
     <style>
-        .login-container{
-            width: 500px;
-            height: 450px;
-            position: relative;
-            top: 100px;
-            left: 450px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: Arial, sans-serif;
+        background-color: #f5f5f5;
+      }
+
+      .main {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 20px;
+        gap: 20px;
+        max-width: 1200px;
+        margin: 40px auto;
+        background-color: white;
+        border-radius: 12px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      }
+
+      .login-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: #FFF6E4;
+        padding: 40px;
+        border-radius: 12px;
+        gap: 20px;
+        flex: 1;
+        max-width: 500px;
+        width: 100%;
+      }
+
+      .profile {
+        display: flex;
+        justify-content: center;
+
+      }
+
+      .profile img {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+      }
+
+      h2 {
+        font-weight: 800;
+        text-align: center;
+        font-size: 1.8rem;
+        margin-bottom: 20px;;
+      }
+
+      .form-label {
+        font-weight: 600;
+        text-align: left;
+        width: 100%;
+      }
+
+      .form-control {
+        border: 2px solid black;
+        border-radius: 40px;
+        padding: 10px;
+      }
+
+      .form-text {
+        font-size: small;
+        text-align: left;
+        margin-left: 10px;
+      }
+
+      .loginButton {
+        width: 100%;
+        padding: 15px;
+        font-weight: 700;
+        border: 2px solid #ffde4d;
+        background-color: #ffde4d;
+      }
+
+      .loginButton:hover {
+        background-color: #f1c00e;
+      }
+
+      .info {
+        font-size: small;
+        text-align: center;
+        margin-top: 10px;
+      }
+
+      .back-button-container {
+        display: flex;
+        justify-content: flex-start;
+        margin: 20px;
+      }
+
+      .back-button {
+        background-color: black;
+        color: white;
+        padding: 10px 20px;
+        border-radius: 8px;
+        font-weight: 600;
+        text-align: center;
+        text-decoration: none;
+      }
+
+      .img-container {
+        flex: 1;
+        max-width: 600px;
+      }
+
+      .img-container img {
+        width: 100%;
+        height: auto;
+        border-radius: 12px;
+      }
+
+      /* Responsive Styles */
+      @media (max-width: 768px) {
+        .main {
+          flex-direction: column;
+        }
+
+        .img-container {
+          max-width: 100%;
+        }
+
+        .back-button-container {
+          justify-content: center;
         }
+      }
+
+      @media (max-width: 480px) {
+        .login-container {
+          padding: 20px;
+        }
+
+        h2 {
+          font-size: 1.5rem;
+        }
+
+        .back-button {
+          width: 100%;
+          text-align: center;
+        }
+
+        .img-container {
+          display: none;
+        }
+      }
     </style>
-</head>
+  </head>
 
-<body>
-    <div style="text-align: right; margin: 10px;">
-        <a href="../index.html" class="btn btn-secondary" style="width: 150px; position: relative; right: 1330px;">Back to Home</a>
+  <body>
+    <div class="back-button-container">
+      <a href="../index.html" class="back-button">Back to Home</a>
     </div>
-    <div class="login-container" style="padding-top: 20px;">
-        <h2 style="text-align: center;">Login</h2>
-        <div class="mb-3" style="margin-left: 40px;">
-            <label for="exampleFormControlInput1" class="form-label">Email address</label>
-            <input type="email" class="form-control" id="emailInput" placeholder="[email protected]" style="width: 400px;">
-          </div>
-          <div class="mb-3" style="margin-left: 40px;">
-          <label for="inputPassword5" class="form-label">Password</label>
-<input type="password" id="passwordInput" class="form-control" aria-describedby="passwordHelpBlock" style="width: 400px">
-<div id="passwordHelpBlock" class="form-text" style="width: 400px">
-  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
-</div>
-</div>
-<button type="button" class="btn btn-primary" id="loginButton" style="width: 400px; margin-left: 40px;">Login</button>
-<div style="text-align: center; margin-top: 10px;">
-    <p>Don't have an accout ?  <a href="signup.html" style="text-decoration: none;"> Sign UP</a></p>
-    <p style="text-align: center;"><a href="#" style=" text-decoration: none;">Forget Password</a></p>
-</div>
+
+    <div class="main">
+      <div class="login-container">
+        <div class="profile">
+          <img
+            src="/website/web_images/login.webp"
+            alt="User Profile"
+          />
+        </div>
+        <h2>Login to your account</h2>
+
+        <div class="mb-3 w-100 ">
+          <label for="emailInput" class="form-label">Email address</label>
+          <input
+            type="email"
+            class="form-control"
+            id="emailInput"
+            placeholder="[email protected]"
+          />
+        </div>
+
+        <div class="mb-3 w-100">
+          <label for="passwordInput" class="form-label">Password</label>
+          <input
+            type="password"
+            id="passwordInput"
+            class="form-control"
+          />
+
+        </div>
+
+        <button type="button" class="btn loginButton" id="loginButton">
+          Login
+        </button>
+
+        <div style="display: flex;flex-direction: column ;align-items: center;">
+            <p class="info">
+                Don't have an account? <a href="signup.html">Sign up</a>
+              </p>
+              <p><a href="#" class="info">Forgot Password?</a></p>
+        </div>
+      </div>
+
+      <div class="img-container">
+        <img src="/website/web_images/loginbg.avif" alt="Background Image" />
+      </div>
     </div>
+
     <script>
-        document.getElementById('loginButton').addEventListener('click', function() {
-            const emailInput = document.getElementById('emailInput');
-            const passwordInput = document.getElementById('passwordInput');
-            const emailValue = emailInput.value.trim();
-    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-    if (!emailRegex.test(emailValue)) {
-      alert('Invalid email address');
-      return;
-    }
-            emailInput.value = '';
-            passwordInput.value = '';
-            // Redirect to index.html
-            window.location.href = '/index.html';
-            alert('Login successful!');
-        });
+      document.getElementById("loginButton").addEventListener("click", function () {
+        const emailInput = document.getElementById("emailInput");
+        const passwordInput = document.getElementById("passwordInput");
+        const emailValue = emailInput.value.trim();
+        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+        if (!emailRegex.test(emailValue)) {
+          alert("Invalid email address");
+          return;
+        }
+
+        emailInput.value = "";
+        passwordInput.value = "";
+        alert("Login successful!");
+
+        // Redirect to index.html
+        window.location.href = "/index.html";
+      });
     </script>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-</body>
-</html>
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>