7fe4ae5365
✨ Major Features Added: - Complete magical theming and rebranding from LifeRPG to The Wizard's Grimoire - Production-grade React frontend with Tailwind CSS v4 and magical aesthetics - Comprehensive analytics dashboard with Recharts integration (ScryingPortal) - Push notifications system with PWA service worker support - Drag & drop functionality using @dnd-kit for habit reordering - Social features with friends system and leaderboards - Performance optimization tools and monitoring - Mobile app enhancement with PWA installation support 🏗️ Technical Infrastructure: - Advanced service worker with offline support and background sync - Zustand state management for scalable application state - Production-ready UI component system with enhanced Button, Card, Input - Progressive Web App (PWA) with manifest and app installation - FastAPI backend with comprehensive API endpoints - Docker containerization and CI/CD pipeline setup 📱 Progressive Web App Features: - Offline functionality with intelligent caching - Push notification support for habit reminders - App installation on mobile and desktop platforms - Background sync for offline data management - Performance monitoring and optimization tools 🎨 User Experience: - Magical wizard/grimoire theming throughout application - Responsive design optimized for all device sizes - Drag & drop habit management with smooth animations - Interactive analytics with multiple chart types - Social connectivity with friends and competitive features - Comprehensive notification and performance settings 🔧 Developer Experience: - Modern development stack with Vite and React - Comprehensive testing setup and CI/CD pipelines - Code quality tools with pre-commit hooks - Docker development environment - Detailed documentation and implementation guides This represents a complete transformation from prototype to production-ready application with enterprise-grade features and magical user experience.
68 lines
2.2 KiB
JavaScript
68 lines
2.2 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./src/**/*.{js,jsx,ts,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
border: "hsl(214, 32%, 91%)",
|
|
input: "hsl(214, 32%, 91%)",
|
|
ring: "hsl(215, 20%, 65%)",
|
|
background: "hsl(0, 0%, 100%)",
|
|
foreground: "hsl(224, 71%, 4%)",
|
|
primary: {
|
|
DEFAULT: "hsl(262, 83%, 58%)",
|
|
foreground: "hsl(210, 40%, 98%)",
|
|
},
|
|
secondary: {
|
|
DEFAULT: "hsl(210, 40%, 96%)",
|
|
foreground: "hsl(222, 84%, 5%)",
|
|
},
|
|
destructive: {
|
|
DEFAULT: "hsl(0, 84%, 60%)",
|
|
foreground: "hsl(210, 40%, 98%)",
|
|
},
|
|
muted: {
|
|
DEFAULT: "hsl(210, 40%, 96%)",
|
|
foreground: "hsl(215, 16%, 47%)",
|
|
},
|
|
accent: {
|
|
DEFAULT: "hsl(210, 40%, 96%)",
|
|
foreground: "hsl(222, 84%, 5%)",
|
|
},
|
|
popover: {
|
|
DEFAULT: "hsl(0, 0%, 100%)",
|
|
foreground: "hsl(224, 71%, 4%)",
|
|
},
|
|
card: {
|
|
DEFAULT: "hsl(0, 0%, 100%)",
|
|
foreground: "hsl(224, 71%, 4%)",
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: "0.5rem",
|
|
md: "calc(0.5rem - 2px)",
|
|
sm: "calc(0.5rem - 4px)",
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.2s ease-out',
|
|
'slide-up': 'slideUp 0.2s ease-out',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
}
|
|
}
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/forms'),
|
|
],
|
|
}
|