21bc2f92f1
Complete redesign of frontend interface with focus on usability, visual hierarchy, and professional appearance: **Design System:** - Implemented clean blue color theme (#3B82F6) with professional palette - Created consistent spacing, shadows, and typography system - Added reusable utility classes (page-header, section, status-badge-*) - Removed excessive gradients and decorative effects **Layout Architecture:** - Redesigned main layout with 256px sidebar navigation - Sidebar includes logo, navigation with descriptions, and user profile - Main content area with search bar and scrollable content - Replaced horizontal navigation with vertical sidebar pattern **Page Redesigns:** 1. LoginPage: Split-screen design with branding (left) and clean form (right) - Feature highlights with icons and statistics - Mobile responsive design - Professional gradient background with subtle pattern 2. UploadPage: Added 3-step visual progress indicator - Better file organization with summary and status badges - Clear action bar with confirmation message - Improved file list presentation 3. ProcessingPage: Enhanced progress visualization - Large progress bar with percentage display - 4-column stats grid (Completed, Processing, Failed, Total) - Clean file status list with processing times 4. ResultsPage: Improved 5-column layout (2 for list, 3 for preview) - Added stats cards for accuracy, processing time, and text blocks - Better preview panel with detailed metrics - Export and translate action buttons 5. ExportPage: Better organization with 2-column layout - Visual format selection with icons (TXT, JSON, Excel, Markdown, PDF) - Improved form controls and option organization - Sticky preview sidebar showing current configuration **Component Updates:** - Updated Button component with proper variants - Enhanced Card component with hover effects - Maintained FileUpload component functionality - Added lucide-react for modern iconography **Technical Improvements:** - Fixed Tailwind CSS v4 compatibility issues with @apply - Removed decorative animations in favor of functional ones - Improved accessibility with proper labels and ARIA attributes - Better color contrast and readability This redesign transforms the interface from a basic layout to a professional, enterprise-ready application with clear visual hierarchy and excellent usability. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
45 lines
1.1 KiB
JSON
45 lines
1.1 KiB
JSON
{
|
|
"name": "frontend",
|
|
"private": true,
|
|
"version": "0.0.0",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc -b && vite build",
|
|
"lint": "eslint .",
|
|
"preview": "vite preview"
|
|
},
|
|
"dependencies": {
|
|
"@tanstack/react-query": "^5.90.7",
|
|
"axios": "^1.13.2",
|
|
"clsx": "^2.1.1",
|
|
"i18next": "^25.6.2",
|
|
"lucide-react": "^0.553.0",
|
|
"react": "^19.2.0",
|
|
"react-dom": "^19.2.0",
|
|
"react-dropzone": "^14.3.8",
|
|
"react-i18next": "^16.3.0",
|
|
"react-router-dom": "^7.9.5",
|
|
"tailwind-merge": "^3.4.0",
|
|
"zustand": "^5.0.8"
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/js": "^9.39.1",
|
|
"@tailwindcss/postcss": "^4.1.17",
|
|
"@types/node": "^24.10.0",
|
|
"@types/react": "^19.2.2",
|
|
"@types/react-dom": "^19.2.2",
|
|
"@vitejs/plugin-react": "^5.1.0",
|
|
"autoprefixer": "^10.4.22",
|
|
"eslint": "^9.39.1",
|
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
"eslint-plugin-react-refresh": "^0.4.24",
|
|
"globals": "^16.5.0",
|
|
"postcss": "^8.5.6",
|
|
"tailwindcss": "^4.1.17",
|
|
"typescript": "~5.9.3",
|
|
"typescript-eslint": "^8.46.3",
|
|
"vite": "^7.2.2"
|
|
}
|
|
}
|