- Redesign LoginPage with minimal professional style - Remove animated gradient backgrounds and floating orbs - Remove marketing claims (99% accuracy, enterprise-grade) - Center login form with clean card design - Add multi-language support (zh-TW, en-US) - Create LanguageSwitcher component in sidebar - Add en-US.json translation file - Persist language preference in localStorage - Remove unused top header bar with search - Move language switcher to sidebar user section 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
92 lines
3.1 KiB
Markdown
92 lines
3.1 KiB
Markdown
# frontend-ui Specification
|
|
|
|
## Purpose
|
|
TBD - created by archiving change refactor-frontend-ux-i18n. Update Purpose after archive.
|
|
## Requirements
|
|
### Requirement: Minimal Login Page Design
|
|
|
|
The login page SHALL use a professional minimal design style that is consistent with the rest of the application.
|
|
|
|
The login page SHALL NOT include:
|
|
- Animated gradient backgrounds
|
|
- Floating decorative elements (orbs, particles)
|
|
- Pulsing or floating animations
|
|
- Marketing claims or statistics
|
|
- Feature promotion sections
|
|
|
|
The login page SHALL include:
|
|
- Centered login form with clean white card
|
|
- Application logo and name
|
|
- Username and password input fields
|
|
- Login button with loading state
|
|
- Error message display area
|
|
- Simple solid color background
|
|
|
|
#### Scenario: Login page renders with minimal design
|
|
- **WHEN** user navigates to the login page
|
|
- **THEN** the page displays a centered login form
|
|
- **AND** no animated decorative elements are visible
|
|
- **AND** no marketing content is displayed
|
|
|
|
#### Scenario: Login form visual consistency
|
|
- **WHEN** comparing login page to internal pages
|
|
- **THEN** the visual style (colors, typography, spacing) is consistent
|
|
|
|
---
|
|
|
|
### Requirement: Multi-language Support
|
|
|
|
The application SHALL support multiple languages with user-selectable language preference.
|
|
|
|
Supported languages:
|
|
- Traditional Chinese (zh-TW) - Default
|
|
- English (en-US)
|
|
|
|
The language selection SHALL be persisted in localStorage and restored on page reload.
|
|
|
|
#### Scenario: Language switcher available
|
|
- **WHEN** user is logged in and viewing any page
|
|
- **THEN** a language switcher component is visible in the top navigation bar
|
|
|
|
#### Scenario: Switch to English
|
|
- **WHEN** user selects English from the language switcher
|
|
- **THEN** all UI text immediately changes to English
|
|
- **AND** the preference is saved to localStorage
|
|
|
|
#### Scenario: Switch to Traditional Chinese
|
|
- **WHEN** user selects Traditional Chinese from the language switcher
|
|
- **THEN** all UI text immediately changes to Traditional Chinese
|
|
- **AND** the preference is saved to localStorage
|
|
|
|
#### Scenario: Language preference persistence
|
|
- **WHEN** user has previously selected a language preference
|
|
- **AND** user reloads the page or returns later
|
|
- **THEN** the application displays in the previously selected language
|
|
|
|
---
|
|
|
|
### Requirement: Accurate Product Description
|
|
|
|
All user-facing text SHALL accurately describe the product capabilities without exaggeration.
|
|
|
|
The application SHALL NOT display:
|
|
- Unverified accuracy percentages (e.g., "99% accuracy")
|
|
- Superlative marketing claims (e.g., "lightning fast", "enterprise-grade")
|
|
- Unsubstantiated statistics
|
|
- Comparative claims without evidence
|
|
|
|
The application MAY display:
|
|
- Factual feature descriptions
|
|
- Supported file formats
|
|
- Authentication method information
|
|
|
|
#### Scenario: Login page displays factual information
|
|
- **WHEN** user views the login page
|
|
- **THEN** only factual product information is displayed
|
|
- **AND** no unverified claims are present
|
|
|
|
#### Scenario: Feature descriptions are accurate
|
|
- **WHEN** any page describes product features
|
|
- **THEN** the descriptions are factual and verifiable
|
|
|