mirror of
https://github.com/thecyberlearn/modern-django-starter.git
synced 2026-08-18 18:52:54 +00:00
cde04c8dbe
This commit represents a complete migration from Bootstrap to Tailwind CSS with modern, professional UI design: ## Major Changes: - **Tailwind CSS Integration**: Added django-tailwind package with Node.js 18.x support - **UI Redesign**: Complete template migration to modern black/white theme - **Responsive Design**: Mobile-first approach with improved navigation - **Database Enhancement**: Added DATABASE_URL support for external services (Neon, Supabase, Railway, etc.) - **Documentation**: Updated README.md and DEPLOYMENT.md with Tailwind and database guidance ## Technical Improvements: - Hot-reloading during development with django-browser-reload - Production-optimized CSS builds with purging and minification - Professional card layouts and components - Sticky footer implementation - Mobile-responsive navigation with hamburger menu - Modern alert/message styling ## Files Modified: - All HTML templates converted to Tailwind utility classes - Added theme app with Tailwind configuration - Updated Docker configuration for Node.js support - Enhanced settings for third-party database services - Comprehensive documentation updates 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
92 lines
4.8 KiB
HTML
92 lines
4.8 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Profile{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white rounded-lg shadow-lg border border-gray-200">
|
|
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
|
|
<h2 class="text-xl font-semibold text-gray-900">Your Profile</h2>
|
|
<a href="{% url 'accounts:profile_edit' %}" class="bg-black text-white px-3 py-1.5 text-sm rounded-md hover:bg-gray-800 transition-colors duration-200">
|
|
Edit Profile
|
|
</a>
|
|
</div>
|
|
<div class="px-6 py-6">
|
|
<div class="flex flex-col md:flex-row gap-6">
|
|
<div class="flex-shrink-0 text-center">
|
|
{% if user.profile.avatar %}
|
|
<img src="{{ user.profile.avatar.url }}" class="w-32 h-32 rounded-full mx-auto border border-gray-200 object-cover" alt="Profile Avatar">
|
|
{% else %}
|
|
<div class="w-32 h-32 rounded-full bg-gray-100 flex items-center justify-content-center mx-auto border border-gray-200">
|
|
<span class="text-4xl text-gray-500">👤</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-1">{{ user.full_name|default:user.email }}</h3>
|
|
<p class="text-gray-600 mb-4">{{ user.email }}</p>
|
|
|
|
<div class="space-y-3">
|
|
{% if user.profile.bio %}
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-900">Bio:</span>
|
|
<p class="text-gray-700 mt-1">{{ user.profile.bio }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if user.profile.location %}
|
|
<p class="text-gray-700">
|
|
<span class="font-medium text-gray-900">Location:</span> {{ user.profile.location }}
|
|
</p>
|
|
{% endif %}
|
|
|
|
{% if user.profile.birth_date %}
|
|
<p class="text-gray-700">
|
|
<span class="font-medium text-gray-900">Birth Date:</span> {{ user.profile.birth_date }}
|
|
</p>
|
|
{% endif %}
|
|
|
|
{% if user.profile.phone_number %}
|
|
<p class="text-gray-700">
|
|
<span class="font-medium text-gray-900">Phone:</span> {{ user.profile.phone_number }}
|
|
</p>
|
|
{% endif %}
|
|
|
|
<p class="text-gray-700">
|
|
<span class="font-medium text-gray-900">Member since:</span> {{ user.date_joined|date:"M d, Y" }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-white rounded-lg shadow-lg border border-gray-200">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h2 class="text-xl font-semibold text-gray-900">Account Status</h2>
|
|
</div>
|
|
<div class="px-6 py-6">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-900">Email verified:</span>
|
|
<div class="mt-1">
|
|
{% if user.is_verified %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Verified</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Unverified</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-900">Account type:</span>
|
|
<p class="text-gray-700 mt-1">{{ user.groups.first.name|default:"User"|title }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |