Update app/templates/resend_verification.html

app/templates/resend_verification.html

@@ -1,12 +1,94 @@
 {% extends "base.html" %}
-{% block title %}Resend Verification{% endblock %}
+{% block title %}Resend Verification – Resume Ranker API{% endblock %}
+
+{% block extra_head %}
+{#
+    No extra head elements are needed here if base.html is correctly
+    linking to Google Fonts and your main CSS file (login.css/styles.css).
+#}
+{% endblock %}
+
 {% block content %}
-<h2>Resend Verification Email</h2>
-<form method="POST">
-  <div class="mb-3">
-    <input name="email" type="email" class="form-control" placeholder="Enter your email" 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('auth.landing') }}">Home</a>
+    <a href="{{ url_for('auth.landing') }}#how">How it works</a>
+    <a href="{{ url_for('auth.landing') }}#demo">Live Demo</a>
+    <a href="{{ url_for('auth.landing') }}#docs">Docs</a>
+    <a href="{{ url_for('auth.landing') }}#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"> {# Reusing .login-container for consistent layout #}
+  <div class="login-card"> {# Reusing .login-card for consistent card styling #}
+    <div class="login-header">
+      <h1 class="login-title">Resend Verification Email</h1>
+      <p class="login-subtitle">Enter your email to resend the verification link.</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"> {# Reusing .form-group and .form-input #}
+        <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>
+
+      <button type="submit" class="login-btn">Resend Email</button> {# Reusing .login-btn #}
+    </form>
+
+    <div class="signup-link"> {# Reusing .signup-link for the bottom text style #}
+      <p>Remembered your password? <a href="{{ url_for('auth.login') }}">Back to sign in</a></p>
+    </div>
   </div>
-  <button type="submit" class="btn btn-warning">Resend Email</button>
-</form>
-<p class="mt-3"><a href="{{ url_for('auth.login') }}">Back to login</a></p>
+</main>
 {% endblock %}
+
+{% block extra_scripts %}
+{# The JavaScript for theme toggle and hamburger menu from login.html #}
+<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');
+      }
+    };
+  });
+</script>
+{% endblock %}