From cde04c8dbe6eb07e9b896b997f65d869efd484de Mon Sep 17 00:00:00 2001 From: Django Template Date: Thu, 11 Sep 2025 15:10:35 +0530 Subject: [PATCH] Migrate from Bootstrap to Tailwind CSS with comprehensive UI improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .env.example | 20 + DEPLOYMENT.md | 125 +- Dockerfile | 3 + README.md | 208 ++- django_project/settings/base.py | 48 +- django_project/settings/development.py | 3 + django_project/urls.py | 3 +- requirements/base.txt | 4 +- static/js/main.js | 28 +- templates/account/dashboard.html | 116 +- templates/account/profile.html | 115 +- templates/account/profile_edit.html | 84 +- templates/admin_dashboard.html | 134 +- templates/base.html | 136 +- templates/home.html | 98 +- templates/staff_dashboard.html | 95 +- theme/__init__.py | 0 theme/apps.py | 5 + theme/static_src/.gitignore | 1 + theme/static_src/package-lock.json | 1642 ++++++++++++++++++++++++ theme/static_src/package.json | 28 + theme/static_src/postcss.config.js | 7 + theme/static_src/src/styles.css | 3 + theme/static_src/tailwind.config.js | 57 + theme/templates/base.html | 19 + 25 files changed, 2631 insertions(+), 351 deletions(-) create mode 100644 theme/__init__.py create mode 100644 theme/apps.py create mode 100644 theme/static_src/.gitignore create mode 100644 theme/static_src/package-lock.json create mode 100644 theme/static_src/package.json create mode 100644 theme/static_src/postcss.config.js create mode 100644 theme/static_src/src/styles.css create mode 100644 theme/static_src/tailwind.config.js create mode 100644 theme/templates/base.html diff --git a/.env.example b/.env.example index ba1971d..defdd00 100644 --- a/.env.example +++ b/.env.example @@ -4,11 +4,31 @@ DEBUG=True ALLOWED_HOSTS=localhost,127.0.0.1,0.0.0.0 # Database Configuration +# Option 1: Individual variables (for Docker Compose/local development) DB_NAME=django_db DB_USER=django_user DB_PASSWORD=django_password DB_HOST=db DB_PORT=5432 +DB_SSLMODE=prefer + +# Option 2: DATABASE_URL (for external services like Neon, Heroku, Railway, etc.) +# Uncomment and use ONE of the following examples: + +# Neon (https://neon.tech) +# DATABASE_URL=postgresql://user:password@ep-xxx.us-east-1.aws.neon.tech/database?sslmode=require + +# Supabase (https://supabase.com) +# DATABASE_URL=postgresql://postgres:password@db.xxx.supabase.co:5432/postgres?sslmode=require + +# Railway (https://railway.app) +# DATABASE_URL=postgresql://postgres:password@containers-us-west-xxx.railway.app:5432/railway + +# Heroku Postgres +# DATABASE_URL=postgres://user:password@host:5432/database + +# Amazon RDS +# DATABASE_URL=postgresql://user:password@your-rds-instance.amazonaws.com:5432/database # Email Configuration (for production) EMAIL_BACKEND=django.core.mail.backends.smtp.EmailBackend diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md index 5ad0b09..b415016 100644 --- a/DEPLOYMENT.md +++ b/DEPLOYMENT.md @@ -71,6 +71,9 @@ Dokploy is a modern deployment platform that makes it easy to deploy application python manage.py migrate python manage.py create_groups python manage.py createsuperuser + + # Build Tailwind CSS for production + python manage.py tailwind build python manage.py collectstatic --noinput ``` @@ -82,6 +85,44 @@ Dokploy is a modern deployment platform that makes it easy to deploy application - Configure Google OAuth2 callback URL: `https://your-domain.com/accounts/google/login/callback/` - Configure Facebook OAuth2 callback URL: `https://your-domain.com/accounts/facebook/login/callback/` +## 🗄️ External Database Services + +Instead of setting up your own PostgreSQL instance, you can use managed database services: + +### Neon (Recommended) + +1. **Create account** at [neon.tech](https://neon.tech) +2. **Create a database** in your Neon dashboard +3. **Copy connection string** from the dashboard +4. **Set environment variable:** + ```env + DATABASE_URL=postgresql://user:password@ep-xxx.us-east-1.aws.neon.tech/database?sslmode=require + ``` + +### Supabase + +1. **Create project** at [supabase.com](https://supabase.com) +2. **Go to Settings > Database** +3. **Use connection pooler URL for production:** + ```env + DATABASE_URL=postgresql://postgres:password@db.xxx.supabase.co:6543/postgres?sslmode=require + ``` + +### Railway + +1. **Connect GitHub repo** to Railway +2. **Add PostgreSQL service** +3. **Railway sets DATABASE_URL automatically** + +### Amazon RDS + +1. **Create RDS PostgreSQL instance** +2. **Configure security groups** for your application +3. **Set DATABASE_URL with RDS endpoint:** + ```env + DATABASE_URL=postgresql://user:password@your-rds.amazonaws.com:5432/database + ``` + ### Environment Variables Reference | Variable | Description | Required | Default | @@ -89,11 +130,13 @@ Dokploy is a modern deployment platform that makes it easy to deploy application | `SECRET_KEY` | Django secret key | Yes | - | | `DEBUG` | Debug mode | Yes | False | | `ALLOWED_HOSTS` | Allowed hostnames | Yes | - | -| `DB_NAME` | Database name | Yes | django_db | -| `DB_USER` | Database user | Yes | django_user | -| `DB_PASSWORD` | Database password | Yes | - | -| `DB_HOST` | Database host | Yes | postgres | -| `DB_PORT` | Database port | Yes | 5432 | +| `DATABASE_URL` | Full database URL | No* | - | +| `DB_NAME` | Database name | No* | django_db | +| `DB_USER` | Database user | No* | django_user | +| `DB_PASSWORD` | Database password | No* | - | +| `DB_HOST` | Database host | No* | postgres | +| `DB_PORT` | Database port | No* | 5432 | +| `DB_SSLMODE` | SSL mode for database | No | prefer | | `EMAIL_HOST` | SMTP host | No | localhost | | `EMAIL_PORT` | SMTP port | No | 587 | | `EMAIL_HOST_USER` | SMTP username | No | - | @@ -103,6 +146,8 @@ Dokploy is a modern deployment platform that makes it easy to deploy application | `FACEBOOK_APP_ID` | Facebook app ID | No | - | | `FACEBOOK_APP_SECRET` | Facebook app secret | No | - | +**Note:** Either `DATABASE_URL` OR the individual `DB_*` variables are required, not both. + ## 🐳 Docker Deployment ### Production Docker Compose @@ -227,6 +272,64 @@ Consider adding: docker-compose -f docker-compose.prod.yml exec web python manage.py migrate ``` +4. **Rebuild Tailwind CSS:** + ```bash + docker-compose -f docker-compose.prod.yml exec web python manage.py tailwind build + docker-compose -f docker-compose.prod.yml exec web python manage.py collectstatic --noinput + ``` + +## 🎨 Tailwind CSS Production Considerations + +### Building CSS for Production + +The project uses `django-tailwind` which requires Node.js to build CSS files: + +1. **Ensure Node.js is available in production:** + ```dockerfile + # Dockerfile already includes Node.js installation + RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \ + && apt-get install -y nodejs + ``` + +2. **Build process in CI/CD:** + ```bash + # Install dependencies + python manage.py tailwind install + + # Build production CSS + python manage.py tailwind build + + # Collect static files + python manage.py collectstatic --noinput + ``` + +3. **CSS Optimization:** + - Production builds are automatically minified + - Unused CSS is purged based on template scanning + - CSS files are versioned for cache busting + +### Environment Variables + +Add these to your production environment: + +```env +# Tailwind CSS +TAILWIND_APP_NAME=theme +NODE_ENV=production +``` + +### Static Files Structure + +After deployment, verify this structure: +``` +/app/static/ +├── css/ +│ └── dist/ +│ └── styles.css # Built Tailwind CSS +├── js/ +└── ... +``` + ### Backup Strategy 1. **Database backup:** @@ -261,6 +364,18 @@ Consider adding: - Check firewall/security group settings - Test email backend configuration +5. **Tailwind CSS not loading:** + - Verify Node.js is installed: `node --version` + - Check if CSS was built: `ls -la static/css/dist/` + - Rebuild CSS: `python manage.py tailwind build` + - Ensure static files are collected: `python manage.py collectstatic` + +6. **Styling looks broken:** + - Check browser developer tools for CSS loading errors + - Verify CSS file exists and is accessible + - Clear browser cache and hard reload + - Check for console errors + ### Getting Help - Check the application logs diff --git a/Dockerfile b/Dockerfile index 1644b69..14acd6f 100644 --- a/Dockerfile +++ b/Dockerfile @@ -9,6 +9,9 @@ RUN apt-get update \ build-essential \ libpq-dev \ gettext \ + curl \ + && curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \ + && apt-get install -y nodejs \ && rm -rf /var/lib/apt/lists/* WORKDIR /app diff --git a/README.md b/README.md index 1ef92a5..f4bea1f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Django Boilerplate +# Django Template -A production-ready Django boilerplate with built-in authentication, social login, role-based permissions, and Docker support. +A production-ready Django template with built-in authentication, social login, role-based permissions, modern UI with Tailwind CSS, and Docker support. ## ✨ Features @@ -28,10 +28,13 @@ A production-ready Django boilerplate with built-in authentication, social login - Nginx reverse proxy - Gunicorn WSGI server -- 🎨 **Modern Frontend** - - Bootstrap 5 integration - - Responsive design - - Clean, professional UI +- 🎨 **Modern Frontend with Tailwind CSS** + - Tailwind CSS v3.4+ integration with django-tailwind + - Hot-reloading during development + - Responsive design with mobile-first approach + - Professional black/white theme + - Modern card layouts and components + - Optimized CSS builds for production - ⚙️ **Environment Management** - Separate settings for development/production @@ -121,10 +124,73 @@ docker-compose exec web python manage.py createsuperuser docker-compose exec web python manage.py create_superuser --email admin@example.com --password admin123 ``` -### 7. Access the Application +### 7. Start Tailwind Development Server -- **Web Application**: http://localhost:8000 -- **Django Admin**: http://localhost:8000/admin/ +```bash +# In a separate terminal, start Tailwind's watch mode for hot reloading +docker-compose exec web python manage.py tailwind start +``` + +### 8. Access the Application + +- **Web Application**: http://localhost:8001 (or http://localhost:8000) +- **Django Admin**: http://localhost:8001/admin/ + +## 🎨 Tailwind CSS Development + +### Hot Reloading Setup + +The project uses `django-tailwind` for seamless Tailwind CSS integration: + +1. **Development Mode:** + ```bash + # Start Tailwind watch mode (automatically rebuilds CSS on changes) + docker-compose exec web python manage.py tailwind start + ``` + +2. **Building for Production:** + ```bash + # Build minified CSS for production + docker-compose exec web python manage.py tailwind build + ``` + +3. **Customizing Styles:** + - Edit templates with Tailwind utility classes + - Modify `theme/static_src/src/styles.css` for custom CSS + - Update `theme/static_src/tailwind.config.js` for configuration + +### Theme Structure + +``` +theme/ +├── static_src/ # Tailwind source files +│ ├── src/ +│ │ └── styles.css # Main Tailwind CSS file +│ ├── tailwind.config.js # Tailwind configuration +│ ├── package.json # Node.js dependencies +│ └── node_modules/ # Node.js packages +├── static/ +│ └── css/ +│ └── dist/ +│ └── styles.css # Generated CSS file +└── templates/ # Theme templates +``` + +### Adding Custom Components + +Create reusable Tailwind components in your templates: + +```html + +
+
+

Card Title

+
+
+ +
+
+``` ## 🔧 Development Setup @@ -159,6 +225,117 @@ docker-compose exec web python manage.py create_superuser --email admin@example. python manage.py runserver ``` +## 🗄️ Third-Party Database Services + +The application supports external PostgreSQL services like Neon, Supabase, Railway, and others. You can use either individual environment variables or a single DATABASE_URL. + +### Supported Services + +- **[Neon](https://neon.tech)** - Serverless PostgreSQL with branching +- **[Supabase](https://supabase.com)** - Open source Firebase alternative +- **[Railway](https://railway.app)** - Deploy from GitHub in seconds +- **[ElephantSQL](https://www.elephantsql.com)** - PostgreSQL as a Service +- **[Amazon RDS](https://aws.amazon.com/rds)** - AWS managed databases +- **[Google Cloud SQL](https://cloud.google.com/sql)** - Google Cloud databases +- **Any PostgreSQL-compatible service** + +### Configuration Methods + +#### Method 1: DATABASE_URL (Recommended) + +Set a single environment variable: + +```env +DATABASE_URL=postgresql://user:password@host:port/database?sslmode=require +``` + +**Neon Example:** +```env +DATABASE_URL=postgresql://neondb_owner:npg_ZO9W1DxrTwJu@ep-solitary-water-a1ucgv2p-pooler.ap-southeast-1.aws.neon.tech/neondb?sslmode=require&channel_binding=require +``` + +**Supabase Example:** +```env +DATABASE_URL=postgresql://postgres:your-password@db.xxx.supabase.co:5432/postgres?sslmode=require +``` + +#### Method 2: Individual Variables + +For more control, use separate environment variables: + +```env +DB_NAME=your_database_name +DB_USER=your_username +DB_PASSWORD=your_password +DB_HOST=your-host.amazonaws.com +DB_PORT=5432 +DB_SSLMODE=require # For secure connections +``` + +### Quick Setup Examples + +#### Neon Database + +1. **Create a Neon project** at [neon.tech](https://neon.tech) +2. **Copy your connection string** from the Neon dashboard +3. **Add to your .env file:** + ```env + DATABASE_URL=postgresql://user:pass@ep-xxx.us-east-1.aws.neon.tech/dbname?sslmode=require + ``` + +#### Supabase Database + +1. **Create a Supabase project** at [supabase.com](https://supabase.com) +2. **Go to Settings > Database** +3. **Copy the connection string and add to .env:** + ```env + DATABASE_URL=postgresql://postgres:your-password@db.xxx.supabase.co:5432/postgres?sslmode=require + ``` + +#### Railway Database + +1. **Deploy to Railway** from GitHub +2. **Add PostgreSQL plugin** +3. **Railway automatically sets DATABASE_URL** + +### SSL and Security + +For production databases, always use SSL: + +```env +# Enable SSL for external databases +DB_SSLMODE=require # or 'prefer' for flexible connections +DATABASE_URL=postgresql://user:pass@host/db?sslmode=require +``` + +### Migration Commands + +After configuring your external database: + +```bash +# Run migrations +python manage.py migrate + +# Create user groups +python manage.py create_groups + +# Create admin user +python manage.py createsuperuser +``` + +### Docker with External Database + +When using external databases with Docker, update your docker-compose.yml: + +```yaml +services: + web: + # ... other config + environment: + - DATABASE_URL=postgresql://user:pass@external-host/db?sslmode=require + # Remove the 'db' service when using external database +``` + ## 🌐 Social Authentication Setup ### Google OAuth2 @@ -252,6 +429,13 @@ django-template/ │ └── core/ # Core application logic ├── templates/ # HTML templates ├── static/ # Static files (CSS, JS, images) +├── theme/ # Tailwind CSS theme +│ ├── static_src/ # Tailwind source files +│ │ ├── src/ # CSS source files +│ │ ├── tailwind.config.js +│ │ └── package.json # Node.js dependencies +│ ├── static/ # Generated CSS files +│ └── templates/ # Theme-specific templates ├── requirements/ # Python dependencies ├── Dockerfile # Docker configuration ├── docker-compose.yml # Development Docker Compose @@ -301,6 +485,12 @@ python manage.py create_groups # Create superuser with admin role python manage.py create_superuser --email admin@example.com --password admin123 +# Tailwind CSS commands +python manage.py tailwind install # Install Tailwind CSS dependencies +python manage.py tailwind start # Start development server with hot reload +python manage.py tailwind build # Build production CSS +python manage.py tailwind check # Check for Tailwind updates + # Standard Django commands python manage.py migrate python manage.py collectstatic diff --git a/django_project/settings/base.py b/django_project/settings/base.py index 5c78935..588832c 100644 --- a/django_project/settings/base.py +++ b/django_project/settings/base.py @@ -29,11 +29,14 @@ THIRD_PARTY_APPS = [ 'allauth.socialaccount', 'allauth.socialaccount.providers.google', 'whitenoise.runserver_nostatic', + 'tailwind', + 'django_browser_reload', ] LOCAL_APPS = [ 'apps.accounts', 'apps.core', + 'theme', ] INSTALLED_APPS = DJANGO_APPS + THIRD_PARTY_APPS + LOCAL_APPS @@ -70,16 +73,35 @@ TEMPLATES = [ WSGI_APPLICATION = 'django_project.wsgi.application' -DATABASES = { - 'default': { - 'ENGINE': 'django.db.backends.postgresql', - 'NAME': config('DB_NAME', default='django_db'), - 'USER': config('DB_USER', default='django_user'), - 'PASSWORD': config('DB_PASSWORD', default='django_password'), - 'HOST': config('DB_HOST', default='localhost'), - 'PORT': config('DB_PORT', default='5432'), +import dj_database_url + +# Database configuration with support for DATABASE_URL +DATABASE_URL = config('DATABASE_URL', default=None) + +if DATABASE_URL: + # Use DATABASE_URL if provided (common for external services like Neon, Heroku, etc.) + DATABASES = { + 'default': dj_database_url.config( + default=DATABASE_URL, + conn_max_age=600, + conn_health_checks=True, + ) + } +else: + # Use individual environment variables (for Docker Compose and local development) + DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.postgresql', + 'NAME': config('DB_NAME', default='django_db'), + 'USER': config('DB_USER', default='django_user'), + 'PASSWORD': config('DB_PASSWORD', default='django_password'), + 'HOST': config('DB_HOST', default='localhost'), + 'PORT': config('DB_PORT', default='5432'), + 'OPTIONS': { + 'sslmode': config('DB_SSLMODE', default='prefer'), + }, + } } -} AUTH_PASSWORD_VALIDATORS = [ { @@ -156,4 +178,10 @@ SOCIALACCOUNT_PROVIDERS = { } } -SOCIALACCOUNT_LOGIN_ON_GET = True \ No newline at end of file +SOCIALACCOUNT_LOGIN_ON_GET = True + +# Tailwind CSS Configuration +TAILWIND_APP_NAME = 'theme' + +# Production static files configuration +STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage' \ No newline at end of file diff --git a/django_project/settings/development.py b/django_project/settings/development.py index c3ea612..c6a927b 100644 --- a/django_project/settings/development.py +++ b/django_project/settings/development.py @@ -7,6 +7,9 @@ DEBUG = True ALLOWED_HOSTS = ['localhost', '127.0.0.1', '0.0.0.0'] +# Add browser reload middleware for development +MIDDLEWARE.insert(0, 'django_browser_reload.middleware.BrowserReloadMiddleware') + DATABASES = { 'default': { 'ENGINE': 'django.db.backends.postgresql', diff --git a/django_project/urls.py b/django_project/urls.py index 956d663..199ca08 100644 --- a/django_project/urls.py +++ b/django_project/urls.py @@ -13,4 +13,5 @@ urlpatterns = [ if settings.DEBUG: urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) - urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) \ No newline at end of file + urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) + urlpatterns += [path("__reload__/", include("django_browser_reload.urls"))] \ No newline at end of file diff --git a/requirements/base.txt b/requirements/base.txt index da1d0a6..19281ff 100644 --- a/requirements/base.txt +++ b/requirements/base.txt @@ -4,4 +4,6 @@ python-decouple==3.8 psycopg2-binary==2.9.7 Pillow==10.0.1 whitenoise==6.6.0 -gunicorn==21.2.0 \ No newline at end of file +gunicorn==21.2.0 +django-tailwind[reload]==3.8.0 +dj-database-url==2.1.0 \ No newline at end of file diff --git a/static/js/main.js b/static/js/main.js index 95a7dcc..4b912b1 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,22 +1,22 @@ -// Custom JavaScript for Django Boilerplate +// Custom JavaScript for Application document.addEventListener('DOMContentLoaded', function() { - // Auto-dismiss alerts after 5 seconds - setTimeout(function() { - const alerts = document.querySelectorAll('.alert'); - alerts.forEach(function(alert) { - const bsAlert = new bootstrap.Alert(alert); - bsAlert.close(); - }); - }, 5000); - // Add smooth scrolling to anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); - document.querySelector(this.getAttribute('href')).scrollIntoView({ - behavior: 'smooth' - }); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth' + }); + } }); }); -}); \ No newline at end of file +}); + +// Mobile menu toggle function +function toggleMobileMenu() { + const mobileMenu = document.getElementById('mobileMenu'); + mobileMenu.classList.toggle('hidden'); +} \ No newline at end of file diff --git a/templates/account/dashboard.html b/templates/account/dashboard.html index ea1885b..677fc73 100644 --- a/templates/account/dashboard.html +++ b/templates/account/dashboard.html @@ -1,88 +1,100 @@ {% extends 'base.html' %} -{% block title %}Dashboard - Django Boilerplate{% endblock %} +{% block title %}Dashboard{% endblock %} {% block content %} -
-
-

Welcome to Your Dashboard

-

Hello, {{ user.full_name|default:user.email }}!

-
+
+

Welcome to Your Dashboard

+

Hello, {{ user.full_name|default:user.email }}!

-
-
-
-
-
Account Information
-
-
-

Email: {{ user.email }}

-

Name: {{ user.full_name|default:"Not set" }}

-

Username: {{ user.username }}

-

Member since: {{ user.date_joined|date:"M d, Y" }}

-

Email verified: +

+
+
+

Account Information

+
+
+
+

Email: {{ user.email }}

+

Name: {{ user.full_name|default:"Not set" }}

+

Username: {{ user.username }}

+

Member since: {{ user.date_joined|date:"M d, Y" }}

+

+ Email verified: {% if user.is_verified %} - Yes + Yes {% else %} - No + No {% endif %}

- Edit Profile +
+
+ + Edit Profile +
-
-
-
-
Your Roles
-
-
+
+
+

Your Roles

+
+
+
{% if user_groups %} - {% for group in user_groups %} - {{ group.name|title }} - {% endfor %} +
+ {% for group in user_groups %} + {{ group.name|title }} + {% endfor %} +
{% else %} -

No roles assigned

+

No roles assigned

{% endif %} - -
- -
Access Levels:
-
    -
  • - ✓ User Dashboard +
+ +
+ +
+

Access Levels:

+
    +
  • + ✓ + User Dashboard
    • {% if user.groups.all %} {% for group in user.groups.all %} {% if group.name == 'staff' or group.name == 'admin' %} -
  • - ✓ - Staff Dashboard +
  • + ✓ + Staff Dashboard
    • {% endif %} {% if group.name == 'admin' %} -
  • - ✓ - Admin Dashboard +
  • + ✓ + Admin Dashboard
    • {% endif %} {% endfor %} {% if not user.groups.filter|length %} -
  • - ✗ Staff Dashboard +
  • + ✗ + Staff Dashboard
    • -
  • - ✗ Admin Dashboard +
  • + ✗ + Admin Dashboard
    • {% endif %} {% else %} -
  • - ✗ Staff Dashboard +
  • + ✗ + Staff Dashboard
    • -
  • - ✗ Admin Dashboard +
  • + ✗ + Admin Dashboard
    • {% endif %}
diff --git a/templates/account/profile.html b/templates/account/profile.html index 81fbbf0..333db88 100644 --- a/templates/account/profile.html +++ b/templates/account/profile.html @@ -1,67 +1,90 @@ {% extends 'base.html' %} -{% block title %}Profile - Django Boilerplate{% endblock %} +{% block title %}Profile{% endblock %} {% block content %} -
-
-
-
-
Your Profile
- Edit Profile +
+
+
+
+

Your Profile

+ + Edit Profile +
-
-
-
+
+
+
{% if user.profile.avatar %} - + Profile Avatar {% else %} -
- 👤 +
+ 👤
{% endif %}
-
-

{{ user.full_name|default:user.email }}

-

{{ user.email }}

+
+

{{ user.full_name|default:user.email }}

+

{{ user.email }}

- {% if user.profile.bio %} -

Bio: {{ user.profile.bio }}

- {% endif %} - - {% if user.profile.location %} -

Location: {{ user.profile.location }}

- {% endif %} - - {% if user.profile.birth_date %} -

Birth Date: {{ user.profile.birth_date }}

- {% endif %} - - {% if user.profile.phone_number %} -

Phone: {{ user.profile.phone_number }}

- {% endif %} - -

Member since: {{ user.date_joined|date:"M d, Y" }}

+
+ {% if user.profile.bio %} +
+ Bio: +

{{ user.profile.bio }}

+
+ {% endif %} + + {% if user.profile.location %} +

+ Location: {{ user.profile.location }} +

+ {% endif %} + + {% if user.profile.birth_date %} +

+ Birth Date: {{ user.profile.birth_date }} +

+ {% endif %} + + {% if user.profile.phone_number %} +

+ Phone: {{ user.profile.phone_number }} +

+ {% endif %} + +

+ Member since: {{ user.date_joined|date:"M d, Y" }} +

+
-
-
-
-
Account Status
+
+
+
+

Account Status

-
-

Email verified: - {% if user.is_verified %} - Yes - {% else %} - No - {% endif %} -

-

Account type: {{ user.groups.first.name|default:"User"|title }}

+
+
+
+ Email verified: +
+ {% if user.is_verified %} + Verified + {% else %} + Unverified + {% endif %} +
+
+
+ Account type: +

{{ user.groups.first.name|default:"User"|title }}

+
+
diff --git a/templates/account/profile_edit.html b/templates/account/profile_edit.html index b8122f6..abf2a2b 100644 --- a/templates/account/profile_edit.html +++ b/templates/account/profile_edit.html @@ -1,24 +1,76 @@ {% extends 'base.html' %} -{% block title %}Edit Profile - Django Boilerplate{% endblock %} +{% block title %}Edit Profile{% endblock %} {% block content %} -
-
-
-
-
Edit Your Profile
-
-
-
- {% csrf_token %} - {{ form.as_p }} -
- Cancel - +
+
+
+

Edit Your Profile

+
+
+ + {% csrf_token %} + + {% for field in form %} +
+ + + {% if field.field.widget.input_type == 'file' %} + + {% elif field.field.widget.input_type == 'textarea' %} + + {% elif field.field.widget.input_type == 'date' %} + + {% else %} + + {% endif %} + + {% if field.help_text %} +

{{ field.help_text }}

+ {% endif %} + + {% if field.errors %} + {% for error in field.errors %} +

{{ error }}

+ {% endfor %} + {% endif %}
- -
+ {% endfor %} + +
+ + Cancel + + +
+
diff --git a/templates/admin_dashboard.html b/templates/admin_dashboard.html index 073df27..83adc26 100644 --- a/templates/admin_dashboard.html +++ b/templates/admin_dashboard.html @@ -1,67 +1,91 @@ {% extends 'base.html' %} -{% block title %}Admin Dashboard - Django Boilerplate{% endblock %} +{% block title %}Admin Dashboard{% endblock %} {% block content %} -
-
-

🔐 Admin Dashboard

-

Administrative control panel

-
-
- -
-
-
-
-
User Management
-

Manage user accounts, roles, and permissions

- Manage Users -
-
-
- -
-
-
-
Group Management
-

Configure user groups and permissions

- Manage Groups -
-
-
- -
-
-
-
Site Administration
-

Access full Django admin interface

- Django Admin -
+
+
+ 🔐 +
+

Admin Dashboard

+

Administrative control panel

-
-
-
-
-
System Information
+
+
+
+

User Management

+

Manage user accounts, roles, and permissions

+ + Manage Users + +
+
+ +
+
+

Group Management

+

Configure user groups and permissions

+ + Manage Groups + +
+
+ +
+
+

Site Administration

+

Access full Django admin interface

+ + Django Admin + +
+
+
+ +
+
+

System Information

+
+
+
+
+

Current User

+
+

+ Name: {{ user.full_name|default:user.email }} +

+

+ Role: Administrator +

+

+ Last Login: {{ user.last_login|date:"M d, Y H:i" }} +

+
-
-
-
-
Current User
-

Name: {{ user.full_name|default:user.email }}

-

Role: Administrator

-

Last Login: {{ user.last_login|date:"M d, Y H:i" }}

-
-
-
Quick Stats
-

Total Users: {{ users_count|default:"N/A" }}

-

Active Sessions: {{ active_sessions|default:"N/A" }}

-

System Status: Online

-
+
+

Quick Stats

+
+

+ Total Users: + + {{ users_count|default:"N/A" }} + +

+

+ Active Sessions: + + {{ active_sessions|default:"N/A" }} + +

+

+ System Status: + + Online + +

diff --git a/templates/base.html b/templates/base.html index ca87135..697efcf 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,80 +1,107 @@ - + {% block title %}Application{% endblock %} {% load static %} + {% load tailwind_tags %} - + {% tailwind_css %} - -
-
+
{% if messages %} {% for message in messages %} -
-