mirror of
https://github.com/thecyberlearn/modern-django-starter.git
synced 2026-08-18 18:12: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>
75 lines
3.3 KiB
HTML
75 lines
3.3 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Home{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="bg-gray-50 rounded-lg p-8 mb-12 text-center">
|
|
<h1 class="text-5xl font-bold text-gray-900 mb-4">Welcome</h1>
|
|
<p class="text-xl text-gray-600 mb-6 max-w-2xl mx-auto">
|
|
A modern web application with secure authentication,
|
|
role-based permissions, and powerful features.
|
|
</p>
|
|
<hr class="border-gray-300 my-6 w-24 mx-auto">
|
|
|
|
{% if user.is_authenticated %}
|
|
<p class="text-gray-700 mb-6">Hello, <strong class="text-gray-900">{{ user.full_name|default:user.email }}</strong>!</p>
|
|
<a href="{% url 'accounts:dashboard' %}"
|
|
class="bg-black text-white px-8 py-3 rounded-md hover:bg-gray-800 transition-colors duration-200 text-lg font-medium inline-block">
|
|
Go to Dashboard
|
|
</a>
|
|
{% else %}
|
|
<p class="text-gray-700 mb-6">Get started by creating an account or logging in.</p>
|
|
<div class="space-x-4">
|
|
<a href="{% url 'account_signup' %}"
|
|
class="bg-black text-white px-8 py-3 rounded-md hover:bg-gray-800 transition-colors duration-200 text-lg font-medium inline-block">
|
|
Sign Up
|
|
</a>
|
|
<a href="{% url 'account_login' %}"
|
|
class="border-2 border-gray-900 text-gray-900 px-8 py-3 rounded-md hover:bg-gray-900 hover:text-white transition-colors duration-200 text-lg font-medium inline-block">
|
|
Login
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="bg-white rounded-lg shadow-lg border border-gray-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-2xl mr-3">🔐</span>
|
|
<h3 class="text-xl font-semibold text-gray-900">Authentication</h3>
|
|
</div>
|
|
<p class="text-gray-600 leading-relaxed">
|
|
Complete authentication system with email verification,
|
|
password reset, and social login (Google & Facebook).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow-lg border border-gray-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-2xl mr-3">👥</span>
|
|
<h3 class="text-xl font-semibold text-gray-900">Role-Based Access</h3>
|
|
</div>
|
|
<p class="text-gray-600 leading-relaxed">
|
|
Built-in user group system with admin, staff, and user roles
|
|
for granular permission control.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow-lg border border-gray-200 h-full">
|
|
<div class="p-6">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-2xl mr-3">🐳</span>
|
|
<h3 class="text-xl font-semibold text-gray-900">Docker Ready</h3>
|
|
</div>
|
|
<p class="text-gray-600 leading-relaxed">
|
|
Fully containerized with Docker Compose, PostgreSQL database,
|
|
and production-ready configuration.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |