nestly/web/templates/pages/login.html

{{define "title"}}登入 · Nestly{{end}}
{{define "content"}}
<div class="flex min-h-screen">
  <!-- 品牌側欄：僅在大螢幕顯示 -->
  <aside class="relative hidden w-1/2 flex-col justify-between overflow-hidden p-12 text-white lg:flex">
    <div class="absolute inset-0 bg-linear-to-br from-emerald-600 via-teal-700 to-emerald-900"></div>
    <div class="absolute -top-24 -right-24 size-96 rounded-full bg-white/10 blur-3xl"></div>
    <div class="absolute -bottom-32 -left-16 size-96 rounded-full bg-teal-400/20 blur-3xl"></div>

    <div class="relative flex items-center gap-3">
      <span class="flex size-10 items-center justify-center rounded-xl bg-white/15 text-2xl">🏡</span>
      <span class="text-2xl font-bold tracking-tight">Nestly</span>
    </div>

    <div class="relative max-w-md space-y-4">
      <h1 class="text-4xl leading-tight font-bold">找到屬於你的<br>理想居所</h1>
      <p class="text-lg text-emerald-100">買房、租屋、刊登物件，Nestly 讓你一站完成。</p>
    </div>

    <p class="relative text-sm text-emerald-200">© 2026 Nestly</p>
  </aside>

  <!-- 登入表單 -->
  <main class="flex w-full items-center justify-center px-6 py-12 lg:w-1/2">
    <section class="w-full max-w-md">
      <div class="mb-8 flex items-center gap-3 lg:hidden">
        <span class="flex size-10 items-center justify-center rounded-xl bg-emerald-600 text-2xl text-white">🏡</span>
        <span class="text-2xl font-bold tracking-tight">Nestly</span>
      </div>

      <h2 class="text-2xl font-bold text-stone-900">登入</h2>
      <p class="mt-2 text-sm text-stone-500">歡迎回來！請輸入你的 Email 與密碼。</p>

      {{if .Error}}
      <div class="mt-6 flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" role="alert">
        <svg class="mt-0.5 size-4 shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/>
        </svg>
        <p>{{.Error}}</p>
      </div>
      {{end}}

      <form method="post" action="/login" class="mt-6 space-y-5">
        <div>
          <label for="email" class="mb-1.5 block text-sm font-medium text-stone-700">Email</label>
          <input type="email" id="email" name="email" value="{{.Email}}" required autofocus
                 autocomplete="email" placeholder="you@example.com"
                 class="block w-full rounded-lg border border-stone-300 bg-white px-3.5 py-2.5 text-sm text-stone-900 shadow-xs placeholder-stone-400 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/40 focus:outline-none">
        </div>

        <div>
          <div class="mb-1.5 flex items-center justify-between">
            <label for="password" class="block text-sm font-medium text-stone-700">密碼</label>
            <a href="#" class="text-sm font-medium text-emerald-600 hover:text-emerald-500">忘記密碼？</a>
          </div>
          <input type="password" id="password" name="password" required
                 autocomplete="current-password" placeholder="至少 8 個字元"
                 class="block w-full rounded-lg border border-stone-300 bg-white px-3.5 py-2.5 text-sm text-stone-900 shadow-xs placeholder-stone-400 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/40 focus:outline-none">
        </div>

        <label class="flex items-center gap-2 text-sm text-stone-600 select-none">
          <input type="checkbox" name="remember"
                 class="size-4 rounded border-stone-300 text-emerald-600 focus:ring-2 focus:ring-emerald-500/40">
          記住我
        </label>

        <button type="submit"
                class="flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 focus:ring-2 focus:ring-emerald-500/40 focus:ring-offset-2 focus:outline-none active:bg-emerald-700">
          登入
        </button>
      </form>

      <div class="mt-6 rounded-lg border border-stone-200 bg-white px-4 py-3 text-sm text-stone-600">
        <p><span class="font-medium text-stone-800">示範帳號：</span>demo@nestly.test ／ nestly1234</p>
      </div>

      <p class="mt-8 text-center text-sm text-stone-500">
        還沒有帳號？
        <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500">立即註冊</a>
      </p>
    </section>
  </main>
</div>
{{end}}