207 lines
5.1 KiB
Markdown
207 lines
5.1 KiB
Markdown
# ZynkTime Web UI Features
|
|
|
|
## 🎨 Modern Design
|
|
|
|
The ZynkTime web interface features a beautiful, modern design with:
|
|
|
|
### Visual Features
|
|
- **Gradient Background**: Eye-catching purple gradient background
|
|
- **Glassmorphism Cards**: Clean white cards with subtle shadows
|
|
- **Smooth Animations**: Fade-in, slide-in, and hover animations
|
|
- **Responsive Layout**: Works perfectly on desktop, tablet, and mobile
|
|
- **Professional Typography**: Inter font family for clean readability
|
|
|
|
### Color Scheme
|
|
- **Primary**: Indigo (#6366f1) - Main actions and accents
|
|
- **Secondary**: Purple (#8b5cf6) - Gradient accents
|
|
- **Success**: Green (#10b981) - Success states
|
|
- **Danger**: Red (#ef4444) - Error states
|
|
- **Warning**: Amber (#f59e0b) - Warning states
|
|
|
|
## 📋 Main Features
|
|
|
|
### 1. Header Section
|
|
- **Logo & Branding**: ZynkTime logo with clock icon
|
|
- **Status Badge**: Real-time connection status
|
|
- 🟢 Green dot = Connected and healthy
|
|
- 🔴 Red dot = API key not configured
|
|
- ⚫ Gray dot = Checking connection
|
|
|
|
### 2. File Upload Section
|
|
**Drag & Drop Zone**
|
|
- Large, inviting upload area
|
|
- Upload icon with clear instructions
|
|
- "Drop your CSV file here or browse files"
|
|
- Supported formats indicator
|
|
- Hover effect with color change
|
|
- Drag-over visual feedback
|
|
|
|
**File Preview**
|
|
- Shows selected filename
|
|
- Displays file size
|
|
- Remove button to clear selection
|
|
- Smooth slide-in animation
|
|
|
|
### 3. Project Selection
|
|
- Dropdown with all available projects
|
|
- Clean select styling with custom arrow
|
|
- Disabled until projects load
|
|
- Updates dynamically when refreshed
|
|
|
|
### 4. Submit Button
|
|
- Full-width primary button
|
|
- Gradient background (indigo to purple)
|
|
- Right arrow icon
|
|
- Disabled state when file or project not selected
|
|
- Hover lift effect
|
|
- Loading state during submission
|
|
|
|
### 5. Results Display
|
|
**Success Card**
|
|
- Animated slide-in appearance
|
|
- Checkmark icon
|
|
- Success message
|
|
- 4-column stats grid:
|
|
- Days Reported
|
|
- Total Hours
|
|
- Project Name
|
|
- User Name
|
|
- Large, bold numbers for quick scanning
|
|
|
|
### 6. Available Projects Section
|
|
- Lists all active projects
|
|
- Each project shows:
|
|
- Project name
|
|
- Project ID
|
|
- Activity ID
|
|
- Refresh button with spin animation
|
|
- Hover effects on project items
|
|
|
|
## 🔔 Toast Notifications
|
|
|
|
Beautiful toast notifications appear in top-right corner:
|
|
- **Success**: Green border, checkmark icon
|
|
- **Error**: Red border, X icon
|
|
- **Warning**: Amber border, triangle icon
|
|
- **Info**: Blue border, info icon
|
|
|
|
Features:
|
|
- Slide-in animation from right
|
|
- Auto-dismiss after 3 seconds
|
|
- Slide-out animation on dismiss
|
|
- Multiple toasts stack vertically
|
|
|
|
## ⏳ Loading States
|
|
|
|
### Full-Screen Overlay
|
|
- Semi-transparent dark background
|
|
- Blur effect (backdrop-filter)
|
|
- Spinning loader animation
|
|
- "Processing your request..." message
|
|
- Prevents interaction during loading
|
|
|
|
### Inline Loading
|
|
- "Loading projects..." text
|
|
- Shown while fetching data
|
|
- Replaced with content when ready
|
|
|
|
## 📱 Responsive Design
|
|
|
|
### Desktop (> 768px)
|
|
- Max width: 1200px
|
|
- Centered layout
|
|
- 2rem padding
|
|
- Multi-column grid layouts
|
|
|
|
### Mobile (< 768px)
|
|
- Full-width layout
|
|
- 1rem padding
|
|
- Header stacks vertically
|
|
- Toast notifications full-width
|
|
- Single-column layouts
|
|
- Optimized touch targets
|
|
|
|
## 🎭 Interactions & Animations
|
|
|
|
### Hover Effects
|
|
- Cards lift slightly on hover
|
|
- Buttons change shade
|
|
- Links show underline
|
|
- Icons change color
|
|
- Smooth 0.2s transitions
|
|
|
|
### Click Effects
|
|
- Buttons press down (active state)
|
|
- Ripple-like visual feedback
|
|
- State changes are immediate
|
|
|
|
### Loading Animations
|
|
- Spinner rotation (0.8s linear infinite)
|
|
- Pulse animation for status dots
|
|
- Smooth fade transitions
|
|
|
|
## 🎯 User Experience
|
|
|
|
### Visual Feedback
|
|
- Every action has a response
|
|
- Status indicators update in real-time
|
|
- Form validation with button states
|
|
- Clear error messages in toasts
|
|
- Success celebrations with stats
|
|
|
|
### Accessibility
|
|
- Semantic HTML structure
|
|
- Proper heading hierarchy
|
|
- ARIA labels where needed
|
|
- Keyboard navigation support
|
|
- Focus states on interactive elements
|
|
- High contrast text
|
|
- Readable font sizes (min 14px)
|
|
|
|
### Progressive Enhancement
|
|
- Works without JavaScript for basic tasks
|
|
- Graceful degradation
|
|
- Error handling with user-friendly messages
|
|
- Offline detection
|
|
|
|
## 🚀 Performance
|
|
|
|
### Optimizations
|
|
- Minimal DOM manipulation
|
|
- CSS animations (GPU accelerated)
|
|
- Debounced event handlers
|
|
- Efficient event delegation
|
|
- Lazy loading where possible
|
|
|
|
### Fast Loading
|
|
- No external dependencies (except Google Fonts)
|
|
- Inline critical CSS option
|
|
- Minimal JavaScript bundle
|
|
- Optimized SVG icons
|
|
|
|
## 📊 Data Display
|
|
|
|
### Stats Cards
|
|
- Large, bold numbers
|
|
- Descriptive labels
|
|
- Grid layout for easy scanning
|
|
- Highlighted with primary color
|
|
- Rounded corners for modern look
|
|
|
|
### Project List
|
|
- Clean, scannable format
|
|
- Metadata clearly displayed
|
|
- Subtle hover states
|
|
- Easy to identify projects
|
|
- Refresh option always visible
|
|
|
|
## 💅 Polish & Details
|
|
|
|
- Rounded corners throughout (0.5rem - 1rem)
|
|
- Consistent spacing (multiples of 0.5rem)
|
|
- Box shadows for depth
|
|
- Gradient accents for visual interest
|
|
- Smooth color transitions
|
|
- Professional iconography
|
|
- Thoughtful micro-interactions
|