683a65c1fd
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m15s
🎨 Complete UI redesign of admin panel with professional color scheme: ## New Modern Maritime Color Palette - Deep Sea Blue (#1D2939) - Sidebar background - Sail White (#F8F9FA) - Main background - Maritime Teal (#008B8B) - Primary accent - Sea Green (#1E8449) - Success/environmental theme - Muted Gold (#D68910) - Revenue highlights - Royal Purple (#884EA0) - Brand accent - Off-White (#EAECEF) - Text on dark backgrounds ## Admin Panel Features - ✅ JWT-based authentication system - ✅ Protected routes with middleware - ✅ Elegant sidebar navigation with Puffin logo - ✅ Dashboard with stat cards (Orders, CO₂, Revenue, Fulfillment) - ✅ Monaco harbor image background on login page - ✅ Responsive glassmorphism design - ✅ WCAG AA contrast compliance ## New Files - app/admin/ - Admin pages (login, dashboard, orders) - app/api/admin/ - Auth API routes (login, logout, verify) - components/admin/ - AdminSidebar component - lib/auth.ts - JWT authentication utilities - public/monaco_high_res.jpg - Luxury background image ## Updated - tailwind.config.js - Custom maritime color palette - package.json - Added jsonwebtoken dependency - app/layout.tsx - RootLayoutClient integration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
126 lines
2.8 KiB
JavaScript
126 lines
2.8 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
'./index.html',
|
|
'./src/**/*.{js,ts,jsx,tsx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'puffin-blue': {
|
|
DEFAULT: '#005A9C',
|
|
light: '#E6F0F6',
|
|
focus: '#3B82F6',
|
|
},
|
|
'puffin-gray': {
|
|
label: '#6B7280',
|
|
border: '#D1D5DB',
|
|
disabled: '#F3F4F6',
|
|
},
|
|
'puffin-error': {
|
|
DEFAULT: '#EF4444',
|
|
focus: '#F87171',
|
|
},
|
|
// Modern Maritime Admin Color Palette
|
|
'deep-sea-blue': '#1D2939',
|
|
'sail-white': '#F8F9FA',
|
|
'maritime-teal': '#008B8B',
|
|
'sea-green': '#1E8449',
|
|
'muted-gold': '#D68910',
|
|
'royal-purple': '#884EA0',
|
|
'off-white': '#EAECEF',
|
|
'light-gray-border': '#EAECF0',
|
|
},
|
|
boxShadow: {
|
|
'focus-blue': '0 0 0 3px rgba(59, 130, 246, 0.3)',
|
|
'focus-red': '0 0 0 3px rgba(239, 68, 68, 0.3)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
safelist: [
|
|
// Colors
|
|
{
|
|
pattern: /^(bg|text|border|hover:bg|hover:text)-(blue|gray|green|red|purple|teal|orange|indigo)-(50|100|200|300|400|500|600|700|800|900)/,
|
|
},
|
|
// Modern Maritime Admin Colors
|
|
'bg-deep-sea-blue',
|
|
'bg-sail-white',
|
|
'bg-maritime-teal',
|
|
'bg-sea-green',
|
|
'bg-muted-gold',
|
|
'bg-royal-purple',
|
|
'bg-off-white',
|
|
'bg-light-gray-border',
|
|
'text-deep-sea-blue',
|
|
'text-sail-white',
|
|
'text-maritime-teal',
|
|
'text-sea-green',
|
|
'text-muted-gold',
|
|
'text-royal-purple',
|
|
'text-off-white',
|
|
'border-deep-sea-blue',
|
|
'border-sail-white',
|
|
'border-maritime-teal',
|
|
'border-light-gray-border',
|
|
'hover:bg-maritime-teal',
|
|
'hover:text-maritime-teal',
|
|
// Spacing
|
|
{
|
|
pattern: /^(p|px|py|m|mx|my|mt|mb|ml|mr)-[0-9]+/,
|
|
},
|
|
// Sizing
|
|
{
|
|
pattern: /^(w|h)-[0-9]+/,
|
|
},
|
|
// Layout
|
|
{
|
|
pattern: /^(min-h|max-w|aspect)-/,
|
|
},
|
|
// Grid
|
|
{
|
|
pattern: /^(grid-cols|gap)-/,
|
|
},
|
|
// Flexbox
|
|
{
|
|
pattern: /^(flex|items|justify|space|rounded|shadow)/,
|
|
},
|
|
// Transitions
|
|
'transform',
|
|
'transition-colors',
|
|
'transition-transform',
|
|
'duration-300',
|
|
'hover:scale-105',
|
|
// Interactivity
|
|
'cursor-pointer',
|
|
'cursor-not-allowed',
|
|
'disabled:opacity-50',
|
|
'disabled:hover:text-gray-600',
|
|
// Typography
|
|
'font-semibold',
|
|
'font-bold',
|
|
'text-center',
|
|
'text-left',
|
|
// Position
|
|
'relative',
|
|
'absolute',
|
|
'fixed',
|
|
'inset-0',
|
|
// Display
|
|
'object-cover',
|
|
'overflow-hidden',
|
|
'drop-shadow-lg',
|
|
// Animation
|
|
'animate-spin',
|
|
// Focus
|
|
'focus:ring',
|
|
'focus:ring-blue-500',
|
|
'focus:border-blue-500',
|
|
'focus:ring-opacity-50',
|
|
'focus:outline-none',
|
|
// Forms
|
|
'form-input',
|
|
'form-select',
|
|
'form-textarea'
|
|
]
|
|
}; |