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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Gelişmiş Giriş Yap ve Kayıt Ol Formu</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css" />
</head>

<body class="flex items-center justify-center h-screen">
  <div class="card p-8 rounded-lg shadow-lg max-w-sm w-full">
    <div id="loginForm">
      <h2 class="text-2xl font-bold mb-6 text-center text-white">Giriş Yap</h2>
      <form action="#" method="POST">
        <div class="mb-4">
          <label for="login-email" class="block text-sm font-medium text-light">E-posta</label>
          <input type="email" id="login-email" name="email" required class="input-field mt-1 block w-full" />
        </div>
        <div class="mb-4">
          <label for="login-password" class="block text-sm font-medium text-light">Şifre</label>
          <input type="password" id="login-password" name="password" required class="input-field mt-1 block w-full" />
        </div>
        <button type="submit" class="btn-neo w-full">Giriş Yap</button>
        <p class="mt-4 text-sm text-center text-light">
          Üye değil misiniz? <a href="#" class="text-blue-300 hover:text-blue-500" onclick="toggleForms()">Kaydolun</a>
        </p>
      </form>
    </div>
    <div id="registerForm" class="hidden">
      <h2 class="text-2xl font-bold mb-6 text-center text-white">Kayıt Ol</h2>
      <form action="#" method="POST">
        <div class="mb-4">
          <label for="register-email" class="block text-sm font-medium text-light">E-posta</label>
          <input type="email" id="register-email" name="email" required class="input-field mt-1 block w-full" />
        </div>
        <div class="mb-4">
          <label for="register-password" class="block text-sm font-medium text-light">Şifre</label>
          <input type="password" id="register-password" name="password" required oninput="updatePasswordStrength()" class="input-field mt-1 block w-full" />
          <div class="password-strength" id="password-strength"></div>
        </div>
        <div class="mb-4">
          <label for="register-confirm-password" class="block text-sm font-medium text-light">Şifreyi Onaylayın</label>
          <input type="password" id="register-confirm-password" name="confirm_password" required class="input-field mt-1 block w-full" />
        </div>
        <button type="submit" class="btn-neo w-full">Kayıt Ol</button>
        <p class="mt-4 text-sm text-center text-light">
          Zaten hesabınız var mı? <a href="#" class="text-blue-300 hover:text-blue-500" onclick="toggleForms()">Giriş Yapın</a>
        </p>
      </form>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>
body {
  background-image: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  font-family: "Arial", sans-serif;
}
.card {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.input-field {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4);
  color: #ffffff;
  padding: 10px 15px;
}
.input-field:focus {
  outline: none;
  box-shadow: 0 5px 25px rgba(0, 255, 255, 0.6);
}
.btn-neo {
  background-image: linear-gradient(45deg, #00ffea, #0078ff);
  border: none;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.5);
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-neo:hover {
  box-shadow: 0 5px 25px rgba(0, 255, 255, 0.8);
}
.text-light {
  color: rgba(255, 255, 255, 0.7);
}
.password-strength {
  height: 5px;
  width: 0%;
  background-color: red;
  transition: width 0.3s ease;
}
.hidden {
  display: none;
}
function toggleForms() {
  const loginForm = document.getElementById("loginForm");
  const registerForm = document.getElementById("registerForm");
  if (loginForm.style.display === "none") {
    loginForm.style.display = "block";
    registerForm.style.display = "none";
  } else {
    loginForm.style.display = "none";
    registerForm.style.display = "block";
  }
}

function updatePasswordStrength() {
  const strengthIndicator = document.getElementById("password-strength");
  const password = document.getElementById("register-password").value;
  let strength = 0;
  if (password.length > 5) strength += 20;
  if (password.length > 10) strength += 20;
  if (password.match(/[a-zA-Z0-9]+/)) strength += 20;
  if (
    password.match(
      /[\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\{\]\}\:\;\"\'\<\,\>\.\?\/\~\`]+/
    )
  )
    strength += 20;
  if (password.match(/[A-Z]/)) strength += 20;

  strengthIndicator.style.width = `${strength}%`;
  if (strength < 40) {
    strengthIndicator.style.backgroundColor = "red";
  } else if (strength < 60) {
    strengthIndicator.style.backgroundColor = "orange";
  } else if (strength < 80) {
    strengthIndicator.style.backgroundColor = "yellow";
  } else {
    strengthIndicator.style.backgroundColor = "green";
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.