فرم ورود راست‌چین

/*
MIT License

Copyright (c) 2026 TEAM 1111

Permission is hereby granted, free of charge, to any person obtaining a copy of this software to deal in the software without restriction, including the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies, subject to including this notice in all copies or substantial portions.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND.
*/

<form class="login-card" action="#" onsubmit="return false">
  <h3>ورود به حساب</h3>
  <label>
    ایمیل
    <input name="email" type="email" dir="ltr" autocomplete="username" required>
  </label>
  <label>
    رمز عبور
    <span class="password">
      <input id="password" name="password" type="password" dir="ltr" autocomplete="current-password" required>
      <button type="button" id="toggle" aria-pressed="false">نمایش</button>
    </span>
  </label>
  <button type="submit" class="submit">ورود</button>
</form>

<style>
.login-card {
  display: grid;
  gap: 1rem;
  inline-size: min(100% - 2rem, 22rem);
  padding: 1.5rem;
  border: 1px solid #2c2620;
  border-radius: 1rem;
  background: #13100d;
}

.login-card h3 {
  margin: 0;
  font-size: 1.125rem;
}

.login-card label {
  display: grid;
  gap: 0.375rem;
  font-size: 0.8125rem;
}

.login-card input {
  box-sizing: border-box;
  inline-size: 100%;
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  border: 1px solid #3a322a;
  border-radius: 0.625rem;
  background: #0c0a08;
  color: #f4efe8;
  font: inherit;
}

.login-card input:focus {
  outline: none;
  border-color: #e2ad62;
  box-shadow: 0 0 0 3px rgb(226 173 98 / 0.2);
}

.password {
  position: relative;
  display: block;
}

.password button {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0.25rem;
  padding-inline: 0.625rem;
  border: 0;
  background: none;
  color: #a39a8e;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.submit {
  min-height: 2.75rem;
  border: 0;
  border-radius: 0.625rem;
  background: #e2ad62;
  color: #1a120a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
</style>

<script>
const toggle = document.getElementById('toggle');
const password = document.getElementById('password');

toggle.addEventListener('click', () => {
  const show = password.type === 'password';
  password.type = show ? 'text' : 'password';
  toggle.textContent = show ? 'پنهان' : 'نمایش';
  toggle.setAttribute('aria-pressed', String(show));
});
</script>