<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>Login - UniqueSite</title>

  <!-- CSS Files -->
  <link href="assets/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <link href="assets/css/style.css" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      background: linear-gradient(to right, #ff5733, #c70039) !important;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

    .login-container {
      margin-top: 20vh !important;
      width: 80%;
      max-width: 400px;
      margin: auto;
      padding: 20px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      background-color: #ffffff;
      border-radius: 8px;
      height: 50vh;
      /* Adjusted height for better fit on mobile screens */
      overflow-y: auto;
      /* Enable scrolling if content exceeds the container height */
    }

    .login-header {
      text-align: center;
      margin-bottom: 20px;
    }

    .login-header h3 {
      color: #007bff;
      font-size: 26px;
      margin-bottom: 10px;
    }

    .login-subtitle {
      color: #6c757d;
      font-size: 14px;
      margin-bottom: 20px;
    }

    .form-floating input,
    .form-floating label {
      width: 100%;
    }

    .form-check-label {
      color: #495057;
    }

    .forgot-link {
      color: #007bff;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.3s;
    }

    .forgot-link:hover {
      color: #0056b3;
    }

    .login-btn {
      width: 100%;
      padding: 12px;
      border-radius: 5px;
      background-color: #007bff;
      color: #ffffff;
      text-decoration: none;
      display: inline-block;
      text-align: center;
      transition: background-color 0.3s;
    }

    .login-btn:hover {
      background-color: #0056b3;
    }

    .separator {
      text-align: center;
      margin-top: 20px;
      position: relative;
    }

    .separator .line {
      display: inline-block;
      width: 40%;
      border-top: 1px solid #ddd;
    }

    .separator p {
      display: inline-block;
      margin: 0 10px;
      font-weight: bold;
      color: #495057;
    }

    .login-footer {
      text-align: center;
      margin-top: 20px;
      color: #6c757d;
      font-size: 14px;
    }
  </style>
</head>

<body>

  <div class="login-container">
    <div class="login-header">
      <h3>Welcome Back</h3>

    </div>
    <form>
      <div class="form-floating mb-3">
        <input type="email" class="form-control rounded-3" id="floatingInputEmail" placeholder="Email" value="your.email@example.com">
        <label for="floatingInputEmail">Email</label>
      </div>

      <div class="form-floating mb-3">
        <input type="password" class="form-control rounded-3" id="floatingInputPassword" placeholder="Password" value="yourpassword">
        <label for="floatingInputPassword">Password</label>
      </div>

      <div class="d-flex align-items-center justify-content-between mb-3">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="flexCheckDefault">
          <label class="form-check-label" for="flexCheckDefault">Remember Me</label>
        </div>
        <!-- <div class=""><a href="forgot-password.html" class="forgot-link">Forgot Password?</a></div> -->
      </div>

      <div class="mb-3">
        <a href="dashboard.php" class="btn background text-white rounded-3 login-btn">Log In</a>
      </div>

    </form>

    <!-- <div class="login-footer">
      Don't have an account? <a href="signup.html" class="text-primary">Sign Up</a>
    </div> -->
  </div>

  <!-- JS Files -->
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/show-hide-password.js"></script>
  <script src="assets/js/loader.js"></script>

</body>

</html>