Login Feature

HTML

<body>
    <div>
      <text>Enter your username and password to log in</text> 
    </div>
    <div id="boxes">
        <text>Username: </text>
        <input id="username"></input>
        <br><text>Password: </text>
        <input id="password"></input>
        <br><button id="login">Login</button>
    </div>
<body>

SASS

// Define color variables
$white: #ffffff;
$red: #f10c0c;

// Global styles
body {
  font-family: 'Arial', sans-serif;
  background-color: $white;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

// Header styles
header {
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;

  // Nested div inside header
  div {
    // Nested nav inside div
    nav {
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  }
}

// Main content styles
main {
  // Nested div inside main
  div {
    // Nested article inside div
    article {
      // Another nested div inside article
      form {
        border: 20px solid #06a53b;
        border-radius: 10px;

        // Nested input inside div
        input {
          width: 200px;
          padding: 8px;
          margin: 6px;
          border: 1px solid #0d25fd;
          border-radius: 4px;
        }

        // Nested button inside div
        button {
          background-color: #4caf50;
          color: $white;
          padding: 10px 20px;
          border: 5px solid $red;
          border-radius: 100px;
          cursor: pointer;
          font-size: 16px;
        }
      }
    }
  }
}

SASS - Shaurya

// Your SASS styles here
// Global styles
$primary-font: 'Roboto', sans-serif;
$primary-color: #3498DB;
$box-shadow-color: rgba(0, 0, 0, 0.2);
body {
  font-family: $primary-font;
  background-color: #EAEAEA; // Light gray background
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
// Header styles
header.site-header {
  width: 100%; // Take full width
  background-color: $primary-color;
  color: white;
  padding: 10px;
  text-align: center;
}
// Section styles
section {
  background-color: #fff;
  border-radius: 12px; // Slightly larger border-radius
  box-shadow: 0 4px 8px $box-shadow-color;
  padding: 30px; // Increased padding
  margin: 30px; // Increased margin
  max-width: 600px; // Wider section
}
// Heading 2 styles
h2 {
  color: $primary-color; // Match header background color
  text-transform: uppercase;
}
// Form styles
form {
  display: grid; // Use grid layout
  grid-template-columns: repeat(2, 1fr); // 2-column layout
  gap: 15px; // Spacing between elements
}
// Input styles
input {
  padding: 12px;
  border: 1px solid $primary-color;
  border-radius: 6px;
}
// Button styles
button {
  cursor: pointer;
  padding: 12px;
  background-color: $primary-color;
  color: white;
  border: none;
  border-radius: 6px;
  transition: background-color 0.3s ease;
  &:hover {
    background-color: darken($primary-color, 10%); // Darken on hover
  }
}
// Paragraph styles
p {
  color: #E74C3C; // Change to a different red color
  font-style: italic;
}
  1. I introduced global variables for the primary font and color.
  2. Changed the body background color and used a different font for a fresh look.
  3. Updated header styles for a full-width, centered, and stylized header.
  4. Modified section styles with larger border-radius, increased padding, and margin, and a wider max-width.
  5. Added text transformation to the h2 for uppercase styling.
  6. Transformed the form layout to a 2-column grid.
  7. Refined input and button styles with border and transition effects.
  8. Changed the paragraph text color and added italic styling.

JS

    <script>
       function person_login() {
        var myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

        var raw = JSON.stringify({
            "email": document.getElementById("Emaillogin").value,
            "password": document.getElementById("PasswordLogin").value

            
        });
        console.log(raw);

        var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            credentials: 'include',  // 
            body: raw,
            redirect: 'follow'
        };
    </script>

Signup Feature

HTML

<body>
  <section id="signup">
    <h2>Signup</h2>
    <form id="signupForm">
      <input type="text" placeholder="Email" id="email" required>
      <input type="password" placeholder="Password" id="password" required>
      <input type="text" placeholder="Name" id="name" required>
      <input type="text" placeholder="Date of Birth (MM-dd-yyyy)" id="dob" required>
      <!-- Add more input fields for additional information if needed -->
      <button type="submit">Signup</button>
    </form>
    <p id="signupMessage"></p>
  </section>

SASS

  <style>
    /* Your CSS styles here */
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    header.site-header{
      width: 1100px;
      margin: 0;
      padding: 0;
    }

    section {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin: 20px;
      max-width: 400px;
    }

    h2 {
      color: black;
    }

    form {
      display: flex;
      flex-direction: column;
    }

    input, button {
      margin-bottom: 10px;
      padding: 10px;
    }

    button {
      cursor: pointer;
    }

    p {
      color: red;
    }
  </style>

JS

  <script>
    document.getElementById('signupForm').addEventListener('submit', function (event) {
      event.preventDefault();
      // Get values from form fields
      const email = document.getElementById('email').value;
      const password = document.getElementById('password').value;
      const name = document.getElementById('name').value;
      const dob = document.getElementById('dob').value;

      // Other fields like age, roles, and stats can be calculated or set as needed

      // Fetch request to signup endpoint
      fetch('http://localhost:8085/api/person/post', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: email,
          password: password,
          name: name,
          dob: dob,
          // Include other fields as needed
        }),
      })
        .then(response => {
          if (!response.ok) {
            throw new Error('Signup failed');
          }
          return response.json();
        })
        .then(responseData => {
          document.getElementById('signupMessage').innerText = 'Signup successful';
          // Redirect to login page after successful signup
          window.location.href = 'login.html'; // Replace with the actual login page
        })
        .catch(error => {
          document.getElementById('signupMessage').innerText = error.message;
          console.error(error.message);
        });
    });
  </script>