88 lines
5.0 KiB
HTML
88 lines
5.0 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
|
|
<div
|
|
class="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-950 px-4 py-12">
|
|
<div class="w-full max-w-md">
|
|
<!-- Logo/Branding Section -->
|
|
<div class="text-center mb-8">
|
|
<div
|
|
class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl shadow-lg mb-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
|
|
stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
|
Welcome Back
|
|
</h1>
|
|
<p class="text-gray-600 dark:text-gray-400">Sign in to your Function account</p>
|
|
</div>
|
|
|
|
<!-- Login Card -->
|
|
<div
|
|
class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
|
{% if error %}
|
|
<div class="bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 px-6 py-4">
|
|
<div class="flex items-center text-red-700 dark:text-red-300">
|
|
<svg class="w-5 h-5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<span class="text-sm font-medium">{{ error }}</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="POST" class="p-8 space-y-6">
|
|
<!-- Username Field -->
|
|
<div class="space-y-2">
|
|
<label for="username" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
|
|
Username
|
|
</label>
|
|
<input id="username" name="username" type="text" required autocomplete="username"
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 {% if error %}border-red-500 dark:border-red-500 focus:ring-red-500{% endif %}"
|
|
placeholder="Enter your username">
|
|
</div>
|
|
|
|
<!-- Password Field -->
|
|
<div class="space-y-2">
|
|
<label for="password" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
|
|
Password
|
|
</label>
|
|
<input id="password" name="password" type="password" required autocomplete="current-password"
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 {% if error %}border-red-500 dark:border-red-500 focus:ring-red-500{% endif %}"
|
|
placeholder="Enter your password">
|
|
</div>
|
|
|
|
<!-- Forgot Password Link -->
|
|
<div class="flex items-center justify-end">
|
|
<a href="#"
|
|
class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors">
|
|
Forgot password?
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<button type="submit"
|
|
class="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
|
|
Sign In
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Sign Up Link -->
|
|
<div class="mt-6 text-center">
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
Don't have an account?
|
|
<a href="{{ url_for('auth.signup') }}"
|
|
class="font-semibold text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors">
|
|
Sign up for free
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %} |