mirror of
https://github.com/thecyberlearn/modern-django-starter.git
synced 2026-08-18 20: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.4 KiB
HTML
75 lines
3.4 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Staff Dashboard{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="mb-8">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-4xl mr-3">👨💼</span>
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900">Staff Dashboard</h1>
|
|
<p class="text-lg text-gray-600">Staff management panel</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
<div class="bg-white rounded-lg shadow-lg border border-gray-200 hover:shadow-xl transition-shadow duration-200">
|
|
<div class="px-6 py-8 text-center">
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">User Support</h3>
|
|
<p class="text-gray-600 mb-6">Assist users with account and technical issues</p>
|
|
<a href="#" class="bg-black text-white px-6 py-2 rounded-md hover:bg-gray-800 transition-colors duration-200 inline-block">
|
|
Support Center
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-lg border border-gray-200 hover:shadow-xl transition-shadow duration-200">
|
|
<div class="px-6 py-8 text-center">
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Content Management</h3>
|
|
<p class="text-gray-600 mb-6">Manage and moderate platform content</p>
|
|
<a href="#" class="bg-black text-white px-6 py-2 rounded-md hover:bg-gray-800 transition-colors duration-200 inline-block">
|
|
Content Panel
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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">Staff Information</h2>
|
|
</div>
|
|
<div class="px-6 py-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Current User</h3>
|
|
<div class="space-y-3">
|
|
<p class="text-gray-700">
|
|
<span class="font-medium text-gray-900">Name:</span> {{ user.full_name|default:user.email }}
|
|
</p>
|
|
<p class="text-gray-700">
|
|
<span class="font-medium text-gray-900">Role:</span> Staff Member
|
|
</p>
|
|
<p class="text-gray-700">
|
|
<span class="font-medium text-gray-900">Department:</span> {{ user.profile.department|default:"General" }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
|
|
<div class="space-y-3">
|
|
<button class="w-full px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors duration-200 text-left">
|
|
View Reports
|
|
</button>
|
|
<button class="w-full px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors duration-200 text-left">
|
|
Export Data
|
|
</button>
|
|
<button class="w-full px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors duration-200 text-left">
|
|
Send Notifications
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |