templates/forgot_password.html

{% extends "base.html" %}

{% block title %}Forgot Password - AI Resume Builder{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
        <div class="text-center">
            <h2 class="text-2xl font-semibold text-gray-800 mb-6">
                Forgot your password?
            </h2>
            <p class="text-gray-600">
                Enter your email address and we'll send you a link to reset your password.
            </p>
        </div>

        <form method="POST" action="{{ url_for('forgot_password') }}" class="mt-8 space-y-6">
            
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                    Email address
                </label>
                <input
                    id="email"
                    name="email"
                    type="email"
                    autocomplete="email"
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                    placeholder="Enter your email"
                    value="{{ request.form.email or '' }}"
                />
            </div>

            <div>
                <button
                    type="submit"
                    class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
                >
                    Send Reset Link
                </button>
            </div>

            <div class="text-center">
                <p class="text-sm text-gray-600">
                    Remember your password? 
                    <a href="{{ url_for('signin') }}" class="font-medium text-blue-600 hover:text-blue-500">
                        Sign in
                    </a>
                </p>
            </div>
        </form>
    </div>
</div>
{% endblock %}