Blame for templates/admin/admin_login.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>Admin Login - SWIFT QUERY</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
  <script>
    tailwind.config = {
      darkMode: "class",
      theme: {
        extend: {
          colors: {
            primary: "#e67e22",
            "background-light": "#fef3e9",
            "background-dark": "#3c2a1a",
          },
          fontFamily: {
            display: ["Lora", "serif"],
          },
          borderRadius: {
            DEFAULT: "1rem",
          },
        },
      },
    };
  </script>
  <style>
    .glass-effect {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px)
    }

    .bg-gradient-warm {
      background-image: linear-gradient(to right, #f8a65c, #d97706)
    }

    .bg-gradient-warm:hover {
      background-image: linear-gradient(to right, #f9b170, #e67e22)
    }

    body {
      background-image: url(https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
      background-size: cover;
      background-position: center
    }
  </style>
</head>

<body
  class="font-display bg-background-light dark:bg-background-dark text-slate-700 dark:text-slate-300 min-h-screen flex flex-col items-center justify-between p-4">

  <header
    class="w-full max-w-7xl mx-auto p-4 glass-effect bg-white/30 dark:bg-black/20 rounded-xl border border-white/20 dark:border-white/10 shadow-lg">
    <nav class="flex justify-between items-center">
      <div class="flex items-center gap-3">
        <div class="bg-white/40 dark:bg-white/20 p-2 rounded-lg">
          <img alt="SWIFT QUERY logo" class="h-6 w-6"
            src="https://lh3.googleusercontent.com/aida-public/AB6AXuAo-0VjrEABAroA7y5_lx9DaLNKygExss7Nm-JDYOskVgALV9qdaAPI5i-PZTURZZgEjLr4rtqVCuuFvo2lxrhcPFo5rzzmjEBkaHow8xuV6nOcIWrotNl5ObyyAPl_SXiJf_z6PYLVARd_eU5xPHZZkkrOyx-HUjixqFKF3U_Mso6NjNK16mUpN9HcmNHUPFD1ZbvGwtvyAahfGscP0U9TG7sOTE9543xi7_Fsj819eadeslFzYJzPsdXDFzBMNa_8dNSvC_ka-HY" />
        </div>
        <span class="font-semibold text-slate-800 dark:text-white text-lg">Swift Query</span>
      </div>
      <div>
        <a href="/" class="text-slate-800 dark:text-white font-medium hover:text-primary transition-colors">Back to
          Home</a>
      </div>
    </nav>
  </header>

  <main class="flex-grow flex items-center justify-center w-full">
    <div
      class="w-full max-w-md mx-auto p-8 glass-effect bg-white/40 dark:bg-black/30 rounded-2xl border border-white/30 dark:border-white/10 shadow-2xl">
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-slate-900 dark:text-white">Admin Login</h1>
        <p class="text-slate-700 dark:text-slate-300 mt-2">Access the admin dashboard.</p>
      </div>
      <form action="{{ url_for('admin.login') }}" class="space-y-6" method="POST">
        <div>
          <div class="relative">
            <span
              class="material-icons-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 dark:text-slate-400">person_outline</span>
            <input
              class="w-full pl-12 pr-4 py-3 rounded-lg bg-white/50 dark:bg-black/20 border border-white/30 dark:border-white/10 focus:ring-2 focus:ring-primary focus:border-primary transition-all placeholder-slate-500 dark:placeholder-slate-400 text-slate-800 dark:text-white shadow-sm"
              id="username" name="username" placeholder="Username" required="" type="text" />
          </div>
        </div>
        <div>
          <div class="relative">
            <span
              class="material-icons-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 dark:text-slate-400">lock_outline</span>
            <input
              class="w-full pl-12 pr-12 py-3 rounded-lg bg-white/50 dark:bg-black/20 border border-white/30 dark:border-white/10 focus:ring-2 focus:ring-primary focus:border-primary transition-all placeholder-slate-500 dark:placeholder-slate-400 text-slate-800 dark:text-white shadow-sm"
              id="password" name="password" placeholder="Password" required="" type="password" />
            <button class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 dark:text-slate-400" type="button">
              <span class="material-icons-outlined">visibility_off</span>
            </button>
          </div>
        </div>
        <div>
          <button
            class="w-full bg-gradient-warm text-white font-bold py-3 px-4 rounded-full shadow-lg hover:shadow-xl transition-all text-lg focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800"
            type="submit">
            Login
          </button>
        </div>
      </form>
      {% with messages = get_flashed_messages() %}
      {% if messages %}
      <ul class="text-red-500">
        {% for message in messages %}
        <li>{{ message }}</li>
        {% endfor %}
      </ul>
      {% endif %}
      {% endwith %}
    </div>
  </main>

  <footer
    class="w-full max-w-7xl mx-auto p-4 text-center glass-effect bg-white/20 dark:bg-black/20 rounded-xl border border-white/20 dark:border-white/10 shadow-lg">
    <p class="text-sm text-slate-800 dark:text-slate-200">Copyright © 2025 SWIFT QUERY. All rights reserved.</p>
  </footer>

</body>

</html>