mirror of
https://github.com/thecyberlearn/modern-django-starter.git
synced 2026-08-18 08:52:55 +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>
121 lines
7.5 KiB
HTML
121 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="h-full">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Application{% endblock %}</title>
|
|
{% load static %}
|
|
{% load tailwind_tags %}
|
|
|
|
{% tailwind_css %}
|
|
<link rel="stylesheet" href="{% static 'css/style.css' %}">
|
|
</head>
|
|
<body class="h-full flex flex-col">
|
|
<nav class="bg-black shadow-lg">
|
|
<div class="max-w-7xl mx-auto px-4">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex items-center">
|
|
<a class="text-white text-xl font-semibold" href="{% url 'core:home' %}">App</a>
|
|
|
|
<div class="hidden md:flex items-center ml-10 space-x-8">
|
|
<a class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium" href="{% url 'core:home' %}">Home</a>
|
|
{% if user.is_authenticated %}
|
|
<a class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium" href="{% url 'accounts:dashboard' %}">Dashboard</a>
|
|
{% if user.groups.all %}
|
|
{% for group in user.groups.all %}
|
|
{% if group.name == 'staff' or group.name == 'admin' %}
|
|
<a class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium" href="{% url 'core:staff_dashboard' %}">Staff</a>
|
|
{% endif %}
|
|
{% if group.name == 'admin' %}
|
|
<a class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium" href="{% url 'core:admin_dashboard' %}">Admin</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden md:flex items-center space-x-4">
|
|
{% if user.is_authenticated %}
|
|
<div class="relative group">
|
|
<button class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">
|
|
{{ user.full_name|default:user.email }}
|
|
</button>
|
|
<div class="absolute right-0 w-48 mt-2 py-2 bg-white rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
|
|
<a class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" href="{% url 'accounts:profile' %}">Profile</a>
|
|
<hr class="my-1">
|
|
<a class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" href="{% url 'account_logout' %}">Logout</a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<a class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium" href="{% url 'account_login' %}">Login</a>
|
|
<a class="bg-white text-black px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-100" href="{% url 'account_signup' %}">Sign Up</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Mobile menu button -->
|
|
<div class="md:hidden flex items-center">
|
|
<button class="text-gray-300 hover:text-white" onclick="toggleMobileMenu()">
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile menu -->
|
|
<div id="mobileMenu" class="md:hidden hidden">
|
|
<div class="px-2 pt-2 pb-3 space-y-1">
|
|
<a class="text-gray-300 hover:text-white block px-3 py-2 text-base font-medium" href="{% url 'core:home' %}">Home</a>
|
|
{% if user.is_authenticated %}
|
|
<a class="text-gray-300 hover:text-white block px-3 py-2 text-base font-medium" href="{% url 'accounts:dashboard' %}">Dashboard</a>
|
|
{% if user.groups.all %}
|
|
{% for group in user.groups.all %}
|
|
{% if group.name == 'staff' or group.name == 'admin' %}
|
|
<a class="text-gray-300 hover:text-white block px-3 py-2 text-base font-medium" href="{% url 'core:staff_dashboard' %}">Staff</a>
|
|
{% endif %}
|
|
{% if group.name == 'admin' %}
|
|
<a class="text-gray-300 hover:text-white block px-3 py-2 text-base font-medium" href="{% url 'core:admin_dashboard' %}">Admin</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
<a class="text-gray-300 hover:text-white block px-3 py-2 text-base font-medium" href="{% url 'accounts:profile' %}">Profile</a>
|
|
<a class="text-gray-300 hover:text-white block px-3 py-2 text-base font-medium" href="{% url 'account_logout' %}">Logout</a>
|
|
{% else %}
|
|
<a class="text-gray-300 hover:text-white block px-3 py-2 text-base font-medium" href="{% url 'account_login' %}">Login</a>
|
|
<a class="text-gray-300 hover:text-white block px-3 py-2 text-base font-medium" href="{% url 'account_signup' %}">Sign Up</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="flex-1 max-w-7xl mx-auto px-4 py-8 w-full">
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="mb-4 p-4 rounded-lg {% if message.tags == 'error' %}bg-red-100 text-red-700 border border-red-200{% elif message.tags == 'success' %}bg-green-100 text-green-700 border border-green-200{% elif message.tags == 'warning' %}bg-yellow-100 text-yellow-700 border border-yellow-200{% else %}bg-blue-100 text-blue-700 border border-blue-200{% endif %}" role="alert">
|
|
<div class="flex justify-between items-center">
|
|
<span>{{ message }}</span>
|
|
<button type="button" class="text-gray-400 hover:text-gray-600" onclick="this.parentElement.parentElement.remove()">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
{% block content %}
|
|
{% endblock %}
|
|
</main>
|
|
|
|
<footer class="bg-black text-white text-center py-6 mt-auto">
|
|
<div class="max-w-7xl mx-auto px-4">
|
|
<p class="text-sm text-gray-400">© 2024 Your Application. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="{% static 'js/main.js' %}"></script>
|
|
</body>
|
|
</html> |