puffin-app

matt/puffin-app

Fork 0

Commit Graph

Author	SHA1	Message	Date
Matt	1e4461cf43	Refine login page color scheme for elegant professional aesthetic All checks were successful Build and Push Docker Images / docker (push) Successful in 2m17s Details 🎨 Color harmony improvements for better visual balance: ## Changes Made - Icons: User/Lock icons changed from bright maritime-teal to subdued deep-sea-blue/60 - Input Focus: Focus rings changed from bright teal to elegant deep-sea-blue/50 - Sign In Button: Simplified from teal-green gradient to solid deep-sea-blue - Error Messages: More subdued red-900/30 background for better harmony ## Result - More cohesive professional appearance - Better contrast balance against Monaco harbor background - Elegant, understated design that doesn't compete with background - WCAG AA compliant contrast ratios maintained 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-03 09:41:02 +01:00
Matt	683a65c1fd	Implement Modern Maritime admin panel design with Monaco background All checks were successful Build and Push Docker Images / docker (push) Successful in 2m15s Details 🎨 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>	2025-11-03 09:35:43 +01:00

Author

SHA1

Message

Date

Matt

1e4461cf43

Refine login page color scheme for elegant professional aesthetic

Build and Push Docker Images / docker (push) Successful in 2m17s

Details

🎨 Color harmony improvements for better visual balance:

## Changes Made
- **Icons**: User/Lock icons changed from bright maritime-teal to subdued deep-sea-blue/60
- **Input Focus**: Focus rings changed from bright teal to elegant deep-sea-blue/50
- **Sign In Button**: Simplified from teal-green gradient to solid deep-sea-blue
- **Error Messages**: More subdued red-900/30 background for better harmony

## Result
- More cohesive professional appearance
- Better contrast balance against Monaco harbor background
- Elegant, understated design that doesn't compete with background
- WCAG AA compliant contrast ratios maintained

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-03 09:41:02 +01:00

Matt

683a65c1fd

Implement Modern Maritime admin panel design with Monaco background

Build and Push Docker Images / docker (push) Successful in 2m15s

Details

🎨 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>

2025-11-03 09:35:43 +01:00

2 Commits