<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Login – Collnetwork Technology</title>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
  <style>
    :root{--purple-deep:#3b1f6e;--purple-mid:#6b3fa0;--green-vivid:#22c55e;--green-mid:#16a34a;}
    *{margin:0;padding:0;box-sizing:border-box;}
    body{font-family:'Nunito',sans-serif;min-height:100vh;
      background:linear-gradient(135deg,#0d0620 0%,#2a1250 100%);
      display:flex;flex-direction:column;}
    body::before{content:'';position:fixed;inset:0;z-index:0;
      background:radial-gradient(ellipse 70% 60% at 20% 20%,rgba(107,63,160,0.4) 0%,transparent 60%),
                 radial-gradient(ellipse 50% 70% at 80% 80%,rgba(34,197,94,0.12) 0%,transparent 55%);}
    header{position:relative;z-index:10;display:flex;align-items:center;gap:14px;
      padding:16px 32px;background:rgba(59,31,110,0.7);backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(155,109,206,0.25);}
    .logo-badge{width:44px;height:44px;background:linear-gradient(135deg,#22c55e,#6b3fa0);
      border-radius:10px;display:flex;align-items:center;justify-content:center;
      overflow:hidden;flex-shrink:0;}
    .logo-badge img{width:100%;height:100%;object-fit:contain;padding:5px;}
    .logo-text{font-size:18px;font-weight:800;color:white;}
    .logo-text span{color:#22c55e;}
    .page-wrap{flex:1;position:relative;z-index:5;display:flex;align-items:center;
      justify-content:center;padding:32px 16px;}
    .card{background:white;border-radius:24px;overflow:hidden;max-width:420px;width:100%;
      box-shadow:0 30px 80px rgba(0,0,0,0.5);}
    .card-header{background:linear-gradient(135deg,var(--purple-deep),var(--purple-mid));
      padding:28px 32px;text-align:center;}
    .card-header h1{color:white;font-size:22px;font-weight:800;margin-bottom:4px;}
    .card-header p{color:rgba(255,255,255,0.7);font-size:13px;}
    .card-body{padding:28px 32px 32px;}
    .flash-msg{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:13px;font-weight:600;}
    .flash-msg.error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;}
    .form-group{margin-bottom:18px;}
    .form-group label{display:block;font-size:12px;font-weight:700;color:#7c6fa0;
      text-transform:uppercase;letter-spacing:0.8px;margin-bottom:7px;}
    .input-wrap{position:relative;}
    .input-wrap .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;}
    .input-wrap input{width:100%;padding:12px 16px 12px 42px;border:2px solid #e4d9f5;
      border-radius:12px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:600;
      color:#1a0a3c;background:#faf7ff;outline:none;transition:border-color 0.25s,box-shadow 0.25s;}
    .input-wrap input:focus{border-color:var(--purple-mid);background:white;
      box-shadow:0 0 0 4px rgba(107,63,160,0.12);}
    .input-wrap input::placeholder{color:#b8a9d4;font-weight:400;}
    .submit-btn{width:100%;padding:14px;
      background:linear-gradient(135deg,var(--purple-mid),var(--purple-deep));
      color:white;border:none;border-radius:12px;font-family:'Nunito',sans-serif;
      font-size:15px;font-weight:800;cursor:pointer;
      box-shadow:0 6px 20px rgba(107,63,160,0.4);transition:transform 0.2s,box-shadow 0.2s;}
    .submit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(107,63,160,0.5);}
    .links-row{text-align:center;margin-top:18px;font-size:13px;color:#7c6fa0;}
    .links-row a{color:var(--purple-mid);font-weight:700;text-decoration:none;}
    .links-row a:hover{color:var(--green-mid);}
    .links-row .sep{margin:0 10px;color:#d4c5e8;}
    footer{position:relative;z-index:10;background:rgba(59,31,110,0.7);
      backdrop-filter:blur(12px);border-top:1px solid rgba(155,109,206,0.25);
      padding:12px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
    footer .ft{color:rgba(255,255,255,0.5);font-size:12px;}
    footer a.support{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.1);
      padding:7px 16px;border-radius:20px;color:white;text-decoration:none;font-size:12px;font-weight:700;}
  </style>
</head>
<body>
  <header>
    <div class="logo-badge">
      <img src="/static/img/collnetwork_logo.png" alt="Logo"
           onerror="this.style.display='none'">
    </div>
    <div class="logo-text">Collnetwork <span>Technology</span> LTD</div>
  </header>

  <div class="page-wrap">
    <div class="card">
      <div class="card-header">
        <h1>Welcome Back 👋</h1>
        <p>Log in to check your subscription status</p>
      </div>
      <div class="card-body">
        {% with messages = get_flashed_messages(with_categories=true) %}
          {% for cat, msg in messages %}
            <div class="flash-msg {{ cat }}">{{ msg }}</div>
          {% endfor %}
        {% endwith %}

        <form method="POST" action="/login">
          <div class="form-group">
            <label>Email Address</label>
            <div class="input-wrap">
              <span class="icon">📧</span>
              <input type="email" name="email" placeholder="john@example.com" required/>
            </div>
          </div>
          <div class="form-group">
            <label>Password</label>
            <div class="input-wrap">
              <span class="icon">🔒</span>
              <input type="password" name="password" placeholder="Your password" required/>
            </div>
          </div>
          <button type="submit" class="submit-btn">Login</button>
        </form>

        <div class="links-row">
          <a href="/register">New user? Register here</a>
          <span class="sep">|</span>
          <a href="/forgot-password">Forgot Password?</a>
        </div>
      </div>
    </div>
  </div>

  <footer>
    <div class="ft">© 2025 Collnetwork Technology LTD</div>
    <a class="support" href="https://customersupport.collnetwork.net" target="_blank">💬 Support</a>
  </footer>
</body>
</html>
