fc463dc69a
- Replace Next.js/React implementation with Python Flask - Add colorful blue-purple-teal gradient theme replacing red design - Integrate logo and Transalpina panoramic background image - Implement complete authentication system with Flask-Login - Add community features for stories and tracks sharing - Create responsive design with Tailwind CSS - Add error handling with custom 404/500 pages - Include Docker deployment configuration - Add favicon support and proper SEO structure - Update content for Pensiune BuonGusto accommodation - Remove deprecated Next.js files and dependencies Features: ✅ Landing page with hero section and featured content ✅ User registration and login system ✅ Community section for adventure sharing ✅ Admin panel for content management ✅ Responsive mobile-first design ✅ Docker containerization with PostgreSQL ✅ Email integration with Flask-Mail ✅ Form validation with WTForms ✅ SQLAlchemy database models ✅ Error pages and favicon handling
84 lines
3.9 KiB
HTML
84 lines
3.9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Join Community - Moto Adventure{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen bg-gray-50 py-20">
|
|
<div class="max-w-md mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
|
|
<div class="bg-gradient-to-r from-emerald-500 via-cyan-500 to-blue-500 p-6 text-white text-center">
|
|
<h2 class="text-2xl font-bold">
|
|
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Moto Adventure" class="h-8 w-8 inline mr-2">
|
|
Join the Adventure
|
|
</h2>
|
|
<p class="text-cyan-100 mt-1">Create your account</p>
|
|
</div>
|
|
|
|
<form method="POST" class="p-6 space-y-6">
|
|
{{ form.hidden_tag() }}
|
|
|
|
<div>
|
|
{{ form.nickname.label(class="block text-sm font-medium text-gray-700 mb-1") }}
|
|
{{ form.nickname(class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent") }}
|
|
{% if form.nickname.errors %}
|
|
<div class="text-red-500 text-sm mt-1">
|
|
{% for error in form.nickname.errors %}
|
|
<p>{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
{{ form.email.label(class="block text-sm font-medium text-gray-700 mb-1") }}
|
|
{{ form.email(class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent") }}
|
|
{% if form.email.errors %}
|
|
<div class="text-red-500 text-sm mt-1">
|
|
{% for error in form.email.errors %}
|
|
<p>{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
{{ form.password.label(class="block text-sm font-medium text-gray-700 mb-1") }}
|
|
{{ form.password(class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent") }}
|
|
{% if form.password.errors %}
|
|
<div class="text-red-500 text-sm mt-1">
|
|
{% for error in form.password.errors %}
|
|
<p>{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
<p class="text-xs text-gray-500 mt-1">
|
|
At least 8 characters with letters and numbers
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
{{ form.password2.label(class="block text-sm font-medium text-gray-700 mb-1") }}
|
|
{{ form.password2(class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent") }}
|
|
{% if form.password2.errors %}
|
|
<div class="text-red-500 text-sm mt-1">
|
|
{% for error in form.password2.errors %}
|
|
<p>{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{{ form.submit(class="w-full bg-orange-600 text-white py-2 px-4 rounded-lg hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 transition font-medium") }}
|
|
</form>
|
|
|
|
<div class="px-6 pb-6 text-center">
|
|
<p class="text-gray-600">
|
|
Already have an account?
|
|
<a href="{{ url_for('auth.login') }}" class="text-orange-600 hover:text-orange-700 font-medium">
|
|
Sign in here
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|