va-tracker-middleware/views/va_register.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>VA Registration</title>

  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    body {
      background-color: #f8f9fa;
      font-family: 'Segoe UI', sans-serif;
    }

    .card-registration {
      border: none;
      border-radius: 12px;
      overflow: hidden;
    }

    .card-registration img {
      height: 100%;
      object-fit: cover;
    }

    .card-body {
      padding: 3rem !important;
    }

    h3 {
      font-weight: 600;
      color: #343a40;
      margin-bottom: 2rem;
    }

    .form-outline {
      position: relative;
    }

    .form-control-lg {
      border-radius: 8px;
      padding: 0.75rem 1rem;
      font-size: 1rem;
    }

    .form-label {
      font-weight: 500;
      color: #495057;
      margin-bottom: 0.5rem;
    }

    .btn-lg {
      border-radius: 8px;
      padding: 0.7rem 2rem;
      font-size: 1rem;
    }

    .btn-warning {
      background-color: #ffc107;
      border: none;
      font-weight: 600;
    }

    .btn-warning:hover {
      background-color: #e0a800;
    }

    .btn-light {
      border: 1px solid #ccc;
      font-weight: 500;
    }

    h5 {
      font-weight: 600;
      color: #495057;
      border-bottom: 2px solid #ffc107;
      display: inline-block;
      padding-bottom: 0.25rem;
      margin-top: 2rem;
    }

    @media (max-width: 991px) {
      .card-body {
        padding: 2rem !important;
      }

      .card-registration img {
        display: none;
      }
    }
  </style>
</head>

<body>
  <section class="h-100 py-5">
    <div class="container">
      <div class="row justify-content-center align-items-center">
        <div class="col-lg-10 col-xl-9">
          <div class="card card-registration shadow-lg">
            <div class="row g-0">
              
              <!-- Left Image -->
              <div class="col-xl-5 d-none d-xl-block">
                <img 
                  src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/img4.webp"
                  alt="Registration"
                  class="img-fluid"
                />
              </div>

              <!-- Right Form -->
              <div class="col-xl-7 bg-white">
                <div class="card-body text-black">
                  <h3 class="text-center mb-4">Virtual Assistant Registration</h3>

                  <form id="vaForm">
                    <div class="row">
                      <div class="col-md-6 mb-3">
                        <label class="form-label" for="firstName">First Name *</label>
                        <input type="text" id="firstName" name="userDetails[firstName]" class="form-control form-control-lg" required>
                      </div>
                      <div class="col-md-6 mb-3">
                        <label class="form-label" for="lastName">Last Name *</label>
                        <input type="text" id="lastName" name="userDetails[lastName]" class="form-control form-control-lg" required>
                      </div>
                    </div>

                    <div class="mb-3">
                      <label class="form-label" for="email">Email *</label>
                      <input type="email" id="email" name="userDetails[email]" class="form-control form-control-lg" required>
                    </div>

                    <div class="row">
                      <div class="col-md-6 mb-3">
                        <label class="form-label" for="age">Age</label>
                        <input type="text" id="age" name="userDetails[age]" class="form-control form-control-lg">
                      </div>
                      <div class="col-md-6 mb-3">
                        <label class="form-label" for="dob">Date of Birth</label>
                        <input type="date" id="dob" name="userDetails[dob]" class="form-control form-control-lg">
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-6 mb-3">
                        <label class="form-label" for="password">Password *</label>
                        <input type="password" id="password" name="userDetails[password]" class="form-control form-control-lg" required>
                      </div>
                      <div class="col-md-6 mb-3">
                        <label class="form-label" for="cPassword">Confirm Password *</label>
                        <input type="password" id="cPassword" name="userDetails[cPassword]" class="form-control form-control-lg" required>
                      </div>
                    </div>

                    <div class="mb-3">
                      <label class="form-label" for="address">Address</label>
                      <input type="text" id="address" name="userDetails[address]" class="form-control form-control-lg">
                    </div>

                    <h5>Bank Details</h5>
                    <div class="mb-3">
                      <label class="form-label" for="bankName">Bank Name</label>
                      <input type="text" id="bankName" name="userDetails[bankName]" class="form-control form-control-lg" required>
                    </div>
                    <div class="mb-3">
                      <label class="form-label" for="accountHolderName">Account Holder Name</label>
                      <input type="text" id="accountHolderName" name="userDetails[accountHolderName]" class="form-control form-control-lg" required>
                    </div>
                    <div class="mb-3">
                      <label class="form-label" for="accountNumber">Account Number</label>
                      <input type="text" id="accountNumber" name="userDetails[accountNumber]" class="form-control form-control-lg" required>
                    </div>
                    <div class="mb-3">
                      <label class="form-label" for="routingNumber">Routing Number</label>
                      <input type="text" id="routingNumber" name="userDetails[routingNumber]" class="form-control form-control-lg" required>
                    </div>

                    <div class="mb-4">
                      <label class="form-label" for="status">Status</label>
                      <select id="status" name="status" class="form-select form-select-lg">
                        <option value="FULLTIME">Full-Time</option>
                        <option value="PARTTIME">Part-Time</option>
                      </select>
                    </div>

                    <div class="d-flex justify-content-end gap-2 pt-3">
                      <button type="reset" class="btn btn-light btn-lg">Reset</button>
                      <button type="submit" class="btn btn-warning btn-lg">Submit</button>
                    </div>
                  </form>
                </div>
              </div>
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script src="/public/js/va-register.js"></script>
</body>
</html>