templates/signin.html

{% extends "base.html" %}

{% block title %}Sign In - AI Resume Builder{% endblock %}

{% block content %}
<div class="min-h-screen flex bg-gray-50">
    <!-- Left side - Image Carousel -->
    <div class="w-1/2 hidden lg:block relative overflow-hidden">
        <!-- Carousel Images -->
        <div class="relative h-full">
            <div id="carousel-images" class="relative h-full">
                <!-- Images will be dynamically inserted here -->
            </div>
        </div>

        <!-- Carousel Content Overlay -->
        <div class="absolute inset-0 flex flex-col justify-center items-center text-white p-8 text-center">
            <div class="max-w-lg">
                <h1 class="text-5xl font-bold mb-6 drop-shadow-lg">
                    AI Resume Builder
                </h1>
                <p class="text-xl mb-8 drop-shadow-md">
                    Create professional resumes with the power of AI. Stand out from the crowd with intelligent, tailored resumes.
                </p>
                <div class="flex justify-center space-x-8 mb-8">
                    <div class="text-center">
                        <div class="text-3xl font-bold mb-2">10K+</div>
                        <div class="text-sm opacity-90">Resumes Created</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold mb-2">95%</div>
                        <div class="text-sm opacity-90">Success Rate</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold mb-2">4.8★</div>
                        <div class="text-sm opacity-90">User Rating</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Carousel Indicators -->
        <div id="carousel-indicators" class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-2">
            <!-- Indicators will be dynamically inserted here -->
        </div>
    </div>

    <!-- Right side - Sign In Form -->
    <div class="w-full lg:w-1/2 flex items-center justify-center p-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">
                    Sign in to your account
                </h2>
            </div>

            <form method="POST" action="{{ url_for('signin') }}" class="mt-8 space-y-6">
                
                <div class="space-y-4">
                    <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>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
                            Password
                        </label>
                        <input
                            id="password"
                            name="password"
                            type="password"
                            autocomplete="current-password"
                            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 password"
                        />
                    </div>
                </div>

                <div class="flex items-center justify-between">
                    <div class="text-sm">
                        <a href="{{ url_for('forgot_password') }}" class="font-medium text-blue-600 hover:text-blue-500">
                            Forgot your password?
                        </a>
                    </div>
                </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"
                    >
                        Sign in
                    </button>
                </div>

                <div class="text-center">
                    <a
                        href="{{ url_for('github_auth') }}"
                        class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors inline-block"
                    >
                        <svg class="w-4 h-4 mr-2" 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>
                        Sign in with GitHub
                    </a>
                </div>

                <div class="text-center">
                    <p class="text-sm text-gray-600">
                        Don't have an account? 
                        <a href="{{ url_for('signup') }}" class="font-medium text-blue-600 hover:text-blue-500">
                            Sign up
                        </a>
                    </p>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Carousel functionality
    const carouselImages = [
        'https://picsum.photos/seed/resume-builder-1/1200/800.jpg',
        'https://picsum.photos/seed/resume-builder-2/1200/800.jpg',
        'https://picsum.photos/seed/resume-builder-3/1200/800.jpg',
        'https://picsum.photos/seed/resume-builder-4/1200/800.jpg',
    ];

    let currentImageIndex = 0;

    // Initialize carousel
    function initCarousel() {
        const imagesContainer = document.getElementById('carousel-images');
        const indicatorsContainer = document.getElementById('carousel-indicators');

        // Create image elements
        carouselImages.forEach((image, index) => {
            const imageDiv = document.createElement('div');
            imageDiv.className = `absolute inset-0 carousel-image ${index === 0 ? 'opacity-100' : 'opacity-0'}`;
            imageDiv.innerHTML = `
                <img src="${image}" alt="Resume Builder ${index + 1}" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-black bg-opacity-40"></div>
            `;
            imagesContainer.appendChild(imageDiv);
        });

        // Create indicator elements
        carouselImages.forEach((_, index) => {
            const indicator = document.createElement('button');
            indicator.className = `w-3 h-3 rounded-full transition-all duration-300 ${
                index === 0 ? 'bg-white w-8' : 'bg-white bg-opacity-50 hover:bg-opacity-75'
            }`;
            indicator.onclick = () => showImage(index);
            indicatorsContainer.appendChild(indicator);
        });

        // Auto-rotate carousel
        setInterval(() => {
            currentImageIndex = (currentImageIndex + 1) % carouselImages.length;
            showImage(currentImageIndex);
        }, 5000);
    }

    // Show specific image
    function showImage(index) {
        const images = document.querySelectorAll('.carousel-image');
        const indicators = document.querySelectorAll('#carousel-indicators button');

        images.forEach((img, i) => {
            img.className = `absolute inset-0 carousel-image ${i === index ? 'opacity-100' : 'opacity-0'}`;
        });

        indicators.forEach((indicator, i) => {
            indicator.className = `w-3 h-3 rounded-full transition-all duration-300 ${
                i === index ? 'bg-white w-8' : 'bg-white bg-opacity-50 hover:bg-opacity-75'
            }`;
        });

        currentImageIndex = index;
    }

    
    // Initialize carousel when page loads
    document.addEventListener('DOMContentLoaded', initCarousel);
</script>
{% endblock %}