Update app/templates/login.html

app/templates/login.html

@@ -1,20 +1,473 @@
 {% extends "base.html" %}
-{% block title %}Login{% endblock %}
+{% block title %}Login – Resume Ranker API{% endblock %}
+
+{% block extra_head %}
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --primary: #2563eb;
+    --primary-light: #60a5fa;
+    --accent: #14b8a6;
+    --bg: #f8fafc;
+    --bg-dark: #18181b;
+    --text: #1e293b;
+    --text-light: #f1f5f9;
+    --card: #fff;
+    --card-dark: #23272f;
+    --border: #e5e7eb;
+    --border-dark: #2d3340;
+    --transition: 0.3s cubic-bezier(.4,0,.2,1);
+  }
+  [data-theme="dark"] {
+    --bg: var(--bg-dark);
+    --text: var(--text-light);
+    --card: var(--card-dark);
+    --border: var(--border-dark);
+  }
+  html, body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Inter', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    transition: background var(--transition), color var(--transition);
+  }
+  a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
+  a:hover { color: var(--accent); }
+  .container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
+  header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 2rem 0 1.5rem 0;
+  }
+  .logo {
+    font-weight: 700; font-size: 1.5rem; letter-spacing: -1px;
+    color: var(--primary);
+  }
+  .nav-links {
+    display: flex; gap: 2rem;
+  }
+  .nav-links a { font-weight: 500; }
+  .theme-toggle {
+    background: none; border: none; cursor: pointer; font-size: 1.3rem;
+    color: var(--text); margin-left: 1.5rem; transition: color var(--transition);
+  }
+  .sticky-header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: var(--bg);
+    transition: background var(--transition);
+    box-shadow: 0 2px 8px 0 rgba(30,41,59,0.04);
+  }
+  .hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    margin-left: 1rem;
+    z-index: 110;
+  }
+  .hamburger span {
+    display: block;
+    width: 24px;
+    height: 3px;
+    margin: 3px 0;
+    background: var(--text);
+    border-radius: 2px;
+    transition: all 0.3s;
+  }
+  @media (max-width: 900px) {
+    .nav-links {
+      position: fixed;
+      top: 70px;
+      right: 0;
+      background: var(--card);
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1.5rem;
+      padding: 2rem 2rem 2rem 1.5rem;
+      box-shadow: 0 4px 24px 0 rgba(30,41,59,0.10);
+      border-radius: 0 0 0.7rem 0.7rem;
+      transform: translateY(-120%);
+      opacity: 0;
+      pointer-events: none;
+      transition: transform 0.3s, opacity 0.3s;
+      min-width: 60vw;
+    }
+    .nav-links.open {
+      transform: translateY(0);
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .hamburger {
+      display: flex;
+    }
+    .logo {
+      z-index: 120;
+    }
+    .theme-toggle {
+      z-index: 120;
+      margin-left: 0.5rem;
+    }
+  }
+  @media (max-width: 600px) {
+    .nav-links {
+      top: 60px;
+      padding: 1.2rem 1.2rem 1.2rem 1rem;
+      min-width: 80vw;
+    }
+  }
+  /* Login Form */
+  .login-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: calc(100vh - 120px);
+    padding: 2rem 0;
+  }
+  .login-card {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 1rem;
+    padding: 2.5rem;
+    width: 100%;
+    max-width: 400px;
+    box-shadow: 0 4px 24px 0 rgba(30,41,59,0.08);
+    transition: background var(--transition), border var(--transition);
+  }
+  .login-header {
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+  .login-title {
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: var(--text);
+  }
+  .login-subtitle {
+    color: #64748b;
+    font-size: 1rem;
+  }
+  [data-theme="dark"] .login-subtitle {
+    color: #cbd5e1;
+  }
+  .form-group {
+    margin-bottom: 1.5rem;
+  }
+  .form-label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: var(--text);
+    font-size: 0.95rem;
+  }
+  .form-input {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    font-family: inherit;
+    background: var(--bg);
+    color: var(--text);
+    transition: border var(--transition), background var(--transition), color var(--transition);
+    box-sizing: border-box;
+  }
+  .form-input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
+  }
+  .form-input::placeholder {
+    color: #94a3b8;
+  }
+  [data-theme="dark"] .form-input::placeholder {
+    color: #64748b;
+  }
+  .form-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+  }
+  .checkbox-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .checkbox-group input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--primary);
+  }
+  .checkbox-group label {
+    font-size: 0.9rem;
+    color: var(--text);
+    cursor: pointer;
+  }
+  .forgot-link {
+    font-size: 0.9rem;
+    color: var(--primary);
+    text-decoration: none;
+  }
+  .forgot-link:hover {
+    color: var(--accent);
+  }
+  .login-btn {
+    width: 100%;
+    padding: 0.85rem 1.5rem;
+    background: var(--primary);
+    color: #fff;
+    border: none;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background var(--transition);
+    margin-bottom: 1.5rem;
+  }
+  .login-btn:hover {
+    background: var(--accent);
+  }
+  .login-btn:disabled {
+    background: #94a3b8;
+    cursor: not-allowed;
+  }
+  .divider {
+    display: flex;
+    align-items: center;
+    margin: 1.5rem 0;
+    color: #64748b;
+    font-size: 0.9rem;
+  }
+  [data-theme="dark"] .divider {
+    color: #94a3b8;
+  }
+  .divider::before,
+  .divider::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--border);
+  }
+  .divider span {
+    padding: 0 1rem;
+  }
+  .social-btn {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    background: var(--card);
+    color: var(--text);
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background var(--transition), border var(--transition);
+    margin-bottom: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+  .social-btn:hover {
+    background: var(--bg);
+    border-color: var(--primary);
+  }
+  .signup-link {
+    text-align: center;
+    margin-top: 1.5rem;
+    color: #64748b;
+    font-size: 0.95rem;
+  }
+  [data-theme="dark"] .signup-link {
+    color: #cbd5e1;
+  }
+  .signup-link a {
+    font-weight: 600;
+  }
+  .error-message {
+    background: #fef2f2;
+    color: #dc2626;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+    border: 1px solid #fecaca;
+  }
+  [data-theme="dark"] .error-message {
+    background: #450a0a;
+    color: #fca5a5;
+    border-color: #7f1d1d;
+  }
+  .success-message {
+    background: #f0fdf4;
+    color: #16a34a;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+    border: 1px solid #bbf7d0;
+  }
+  [data-theme="dark"] .success-message {
+    background: #052e16;
+    color: #86efac;
+    border-color: #166534;
+  }
+  .verification-link {
+    text-align: center;
+    margin-top: 1rem;
+    color: #64748b;
+    font-size: 0.9rem;
+  }
+  [data-theme="dark"] .verification-link {
+    color: #cbd5e1;
+  }
+  .verification-link a {
+    font-weight: 600;
+  }
+  @media (max-width: 900px) {
+    .container { padding: 0 0.5rem; }
+  }
+</style>
+{% endblock %}
+
 {% block content %}
-<h2>Login</h2>
-<form method="POST">
-  <div class="mb-3">
-    <input name="email" type="email" class="form-control" placeholder="Email" required>
-  </div>
-  <div class="mb-3">
-    <input name="password" type="password" class="form-control" placeholder="Password" required>
+<header class="container sticky-header">
+  <div class="logo">ResumeRanker<span style="color:var(--accent)">.API</span></div>
+  <nav class="nav-links" id="navLinks">
+    <a href="{{ url_for('main.index') }}">Home</a>
+    <a href="{{ url_for('main.index') }}#how">How it works</a>
+    <a href="{{ url_for('main.index') }}#demo">Live Demo</a>
+    <a href="{{ url_for('main.index') }}#docs">Docs</a>
+    <a href="{{ url_for('main.index') }}#pricing">Pricing</a>
+  </nav>
+  <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">🌙</button>
+  <button class="hamburger" id="hamburger" aria-label="Open menu">
+    <span></span><span></span><span></span>
+  </button>
+</header>
+
+<main class="login-container">
+  <div class="login-card">
+    <div class="login-header">
+      <h1 class="login-title">Welcome back</h1>
+      <p class="login-subtitle">Sign in to your ResumeRanker account</p>
+    </div>
+
+    {% if error %}
+    <div class="error-message">{{ error }}</div>
+    {% endif %}
+
+    {% if success %}
+    <div class="success-message">{{ success }}</div>
+    {% endif %}
+
+    <form method="POST">
+      <div class="form-group">
+        <label for="email" class="form-label">Email address</label>
+        <input type="email" id="email" name="email" class="form-input" placeholder="Enter your email" required>
+      </div>
+
+      <div class="form-group">
+        <label for="password" class="form-label">Password</label>
+        <input type="password" id="password" name="password" class="form-input" placeholder="Enter your password" required>
+      </div>
+
+      <div class="form-row">
+        <div class="checkbox-group">
+          <input type="checkbox" id="remember" name="remember">
+          <label for="remember">Remember me</label>
+        </div>
+        <a href="#" class="forgot-link">Forgot password?</a>
+      </div>
+
+      <button type="submit" class="login-btn">Sign in</button>
+    </form>
+
+    <div class="divider">
+      <span>or continue with</span>
+    </div>
+
+    <button class="social-btn" onclick="signInWithGoogle()">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+      </svg>
+      Continue with Google
+    </button>
+
+    <button class="social-btn" onclick="signInWithGitHub()">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+      </svg>
+      Continue with GitHub
+    </button>
+
+    <div class="verification-link">
+      Didn't get the verification email?
+      <a href="{{ url_for('auth.resend_verification') }}">Resend it</a>
+    </div>
+
+    <div class="signup-link">
+      Don't have an account? <a href="{{ url_for('auth.register') }}">Register</a>
+    </div>
   </div>
-  <button type="submit" class="btn btn-primary">Login</button>
-</form>
-<p class="mt-3">
-  Didn't get the verification email?
-  <a href="{{ url_for('auth.resend_verification') }}">Resend it</a>
-</p>
-
-<p class="mt-3">Don't have an account? <a href="{{ url_for('auth.register') }}">Register</a></p>
+</main>
 {% endblock %}
+
+{% block extra_scripts %}
+<script>
+  // Light/Dark mode toggle
+  const themeToggle = document.getElementById('themeToggle');
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  function setTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+    themeToggle.textContent = theme === 'dark' ? '☀️' : '🌙';
+  }
+  const savedTheme = localStorage.getItem('theme');
+  setTheme(savedTheme || (prefersDark ? 'dark' : 'light'));
+  themeToggle.onclick = () => {
+    const current = document.documentElement.getAttribute('data-theme');
+    setTheme(current === 'dark' ? 'light' : 'dark');
+  };
+
+  // Hamburger menu toggle
+  const hamburger = document.getElementById('hamburger');
+  const navLinks = document.getElementById('navLinks');
+  hamburger.onclick = function() {
+    navLinks.classList.toggle('open');
+    hamburger.classList.toggle('open');
+  };
+  
+  // Close menu when clicking a link (on mobile)
+  Array.from(navLinks.getElementsByTagName('a')).forEach(link => {
+    link.onclick = () => {
+      if (window.innerWidth <= 900) {
+        navLinks.classList.remove('open');
+        hamburger.classList.remove('open');
+      }
+    };
+  });
+
+  // Social login functions
+  function signInWithGoogle() {
+    // Implement Google OAuth
+    console.log('Google sign-in clicked');
+  }
+
+  function signInWithGitHub() {
+    // Implement GitHub OAuth
+    console.log('GitHub sign-in clicked');
+  }
+</script>
+{% endblock %}