{% extends "base.html" %}
{% block title %}登录 · 期权中控{% endblock %}
{% block body %}
<div class="login-wrap">
  <section class="login-card">
    <h1>加密货币｜OKX 期权中控</h1>
    <p class="login-sub">多机期权持仓总览 · 内嵌打开客户端 · 本仓不下单</p>
    {# 诱饵字段 + readonly/聚焦解锁,避免浏览器自动填入用户名密码 #}
    <form method="post" class="stack login-form" autocomplete="off" data-lpignore="true" data-1p-ignore="true">
      <input type="text" name="username_trap" tabindex="-1" aria-hidden="true" autocomplete="username" class="login-honeypot" value="">
      <input type="password" name="password_trap" tabindex="-1" aria-hidden="true" autocomplete="current-password" class="login-honeypot" value="">
      <label>用户名
        <input
          type="text"
          name="username"
          required
          value=""
          placeholder="请输入用户名"
          autocomplete="off"
          autocapitalize="off"
          autocorrect="off"
          spellcheck="false"
          readonly
          data-login-field="1"
        >
      </label>
      <label>密码
        <input
          type="password"
          name="password"
          required
          value=""
          placeholder="请输入密码"
          autocomplete="new-password"
          readonly
          data-login-field="1"
        >
      </label>
      <button type="submit">登 录</button>
    </form>
  </section>
</div>
{% endblock %}
{% block scripts %}
<script>
(function () {
  function unlock(el) {
    if (!el) return;
    el.removeAttribute("readonly");
  }
  document.querySelectorAll("[data-login-field]").forEach(function (el) {
    el.addEventListener("focus", function () { unlock(el); }, { once: true });
    el.addEventListener("pointerdown", function () { unlock(el); }, { once: true });
  });
  // 延迟清一次,挡住部分密码管理器首屏写入
  setTimeout(function () {
    document.querySelectorAll("[data-login-field]").forEach(function (el) {
      if (document.activeElement !== el) el.value = "";
    });
  }, 50);
})();
</script>
{% endblock %}