<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NEXUS · Login</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --bg-primary: #0a0b0f;
    --bg-secondary: #12131a;
    --bg-card: #161720;
    --bg-input: #1a1b27;
    --border: #252736;
    --border-hover: #3a3d54;
    --accent: #00e5a0;
    --accent-dim: rgba(0, 229, 160, 0.08);
    --accent-glow: rgba(0, 229, 160, 0.25);
    --accent-secondary: #6c5ce7;
    --danger: #ff4757;
    --text-primary: #e8e9f0;
    --text-secondary: #7a7d96;
    --text-muted: #4a4d64;
    --radius-sm: 8px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
  }
  .bg-grid {
    position: fixed; inset: 0; z-index: 0;
    background-image:
      linear-gradient(rgba(0,229,160,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,229,160,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridPulse 8s ease-in-out infinite;
  }
  @keyframes gridPulse { 0%,100%{opacity:.5} 50%{opacity:1} }
  .bg-glow {
    position: fixed; width: 600px; height: 600px;
    border-radius: 50%; filter: blur(150px); opacity: 0.15;
    z-index: 0; pointer-events: none;
  }
  .bg-glow-1 { top:-200px; right:-100px; background:var(--accent); animation: glowFloat 12s ease-in-out infinite; }
  .bg-glow-2 { bottom:-200px; left:-100px; background:var(--accent-secondary); animation: glowFloat 15s ease-in-out infinite reverse; }
  @keyframes glowFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }

  .login-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; position: relative; z-index: 1; padding: 20px;
  }
  .login-container { width: 100%; max-width: 440px; animation: fadeSlideUp 0.8s cubic-bezier(0.16,1,0.3,1); }
  @keyframes fadeSlideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

  .login-logo { text-align: center; margin-bottom: 48px; }
  .login-logo .logo-icon {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    border-radius: 18px; display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 20px; position: relative;
    box-shadow: 0 8px 32px rgba(0,229,160,0.2);
  }
  .login-logo .logo-icon::before { content: '\2B21'; font-size: 28px; color: white; }
  .login-logo .logo-icon::after {
    content: ''; position: absolute; inset: -3px; border-radius: 20px;
    border: 1px solid rgba(0,229,160,0.3); animation: logoPulse 3s ease-in-out infinite;
  }
  @keyframes logoPulse { 0%,100%{opacity:.3;transform:scale(1)} 50%{opacity:.8;transform:scale(1.05)} }
  .login-logo h1 {
    font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 700;
    letter-spacing: 4px;
    background: linear-gradient(135deg, var(--text-primary), var(--accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }
  .login-logo p {
    color: var(--text-secondary); font-size: 14px; margin-top: 8px;
    letter-spacing: 2px; text-transform: uppercase; font-weight: 300;
  }
  .login-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 20px; padding: 40px; backdrop-filter: blur(20px);
    position: relative; overflow: hidden;
  }
  .login-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
  }
  .form-group { margin-bottom: 24px; }
  .form-group label {
    display: block; font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 500; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px;
  }
  .form-input {
    width: 100%; padding: 14px 18px; background: var(--bg-input);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-primary); font-family: 'Outfit', sans-serif;
    font-size: 15px; outline: none; transition: all 0.3s ease;
  }
  .form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim), 0 0 20px rgba(0,229,160,0.05);
  }
  .form-input::placeholder { color: var(--text-muted); }
  .error-msg {
    background: rgba(255,71,87,0.1); border: 1px solid rgba(255,71,87,0.3);
    border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 20px;
    font-size: 13px; color: var(--danger); text-align: center;
    animation: fadeSlideUp 0.3s ease;
  }
  .btn-login {
    width: 100%; padding: 16px;
    background: linear-gradient(135deg, var(--accent), #00c896);
    color: var(--bg-primary); font-family: 'JetBrains Mono', monospace;
    font-size: 14px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; border: none; border-radius: var(--radius-sm);
    cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;
  }
  .btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,229,160,0.3); }
  .btn-login:active { transform: translateY(0); }
  .btn-login:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
  .btn-login .btn-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%); animation: btnShimmer 3s infinite;
  }
  @keyframes btnShimmer { 0%{transform:translateX(-100%)} 50%,100%{transform:translateX(100%)} }
  .status-bar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 32px; font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--text-muted);
  }
  .status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); animation: dotBlink 2s infinite;
  }
  @keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:.3} }
</style>
</head>
<body>
<div class="bg-grid"></div>
<div class="bg-glow bg-glow-1"></div>
<div class="bg-glow bg-glow-2"></div>

<div class="login-page">
  <div class="login-container">
    <div class="login-logo">
      <div class="logo-icon"></div>
      <h1>NEXUS</h1>
      <p>Bot Control Panel</p>
    </div>
    <div class="login-card">
      <?php if (!empty($loginError)): ?>
        <div class="error-msg"><?= htmlspecialchars($loginError) ?></div>
      <?php endif; ?>
      <form id="loginForm" method="POST" action="/">
        <input type="hidden" name="action" value="login">
        <div class="form-group">
          <label>Username</label>
          <input type="text" class="form-input" name="username" id="username"
                 placeholder="Enter your username" autocomplete="username" required>
        </div>
        <div class="form-group">
          <label>Password</label>
          <input type="password" class="form-input" name="password" id="password"
                 placeholder="Enter your password" autocomplete="current-password" required>
        </div>
        <div id="formError" class="error-msg" style="display:none;"></div>
        <button type="submit" class="btn-login" id="loginBtn">
          <span class="btn-shimmer"></span>
          Authenticate
        </button>
      </form>
    </div>
    <div class="status-bar">
      <span class="status-dot"></span>
      System operational · v3.2.1
    </div>
  </div>
</div>

<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const btn = document.getElementById('loginBtn');
  const errDiv = document.getElementById('formError');
  errDiv.style.display = 'none';
  btn.disabled = true;
  btn.textContent = 'Authenticating...';

  fetch('/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    },
    body: JSON.stringify({
      action: 'login',
      username: document.getElementById('username').value,
      password: document.getElementById('password').value
    })
  })
  .then(r => r.json())
  .then(data => {
    if (data.success) {
      window.location.href = data.redirect || '/dashboard.php';
    } else {
      errDiv.textContent = data.error || 'Login failed';
      errDiv.style.display = 'block';
      btn.disabled = false;
      btn.innerHTML = '<span class="btn-shimmer"></span>Authenticate';
    }
  })
  .catch(() => {
    errDiv.textContent = 'Network error. Please try again.';
    errDiv.style.display = 'block';
    btn.disabled = false;
    btn.innerHTML = '<span class="btn-shimmer"></span>Authenticate';
  });
});
</script>
</body>
</html>
