c71588e031
Replit-Commit-Author: Agent Replit-Commit-Session-Id: 7a657272-55ba-4a79-9a2e-f1ed9bc7a528
84 lines
3.1 KiB
Markdown
84 lines
3.1 KiB
Markdown
# Design Guidelines: IDF_Mikrotik File Analysis Tool
|
|
|
|
## Design Approach
|
|
**Selected Approach:** Design System (Utility-Focused)
|
|
**Primary Reference:** Linear + GitHub file viewer aesthetics
|
|
**Key Principle:** Clean, functional interface optimizing for rapid file analysis and clear information hierarchy
|
|
|
|
## Core Design Elements
|
|
|
|
### Typography
|
|
- **Primary Font:** Inter (Google Fonts)
|
|
- **Monospace Font:** JetBrains Mono (for file names, code snippets)
|
|
- **Scale:**
|
|
- Headings: text-2xl font-semibold
|
|
- Body: text-base
|
|
- File metadata: text-sm text-gray-600
|
|
- Code/technical: text-sm font-mono
|
|
|
|
### Layout System
|
|
**Spacing Units:** Tailwind units of 3, 4, 6, 8
|
|
- Component padding: p-6
|
|
- Section gaps: gap-4, gap-6
|
|
- Card spacing: space-y-4
|
|
- Container max-width: max-w-6xl
|
|
|
|
### Component Library
|
|
|
|
#### Upload Zone
|
|
- Large drop zone (min-h-64) with dashed border (border-2 border-dashed)
|
|
- Center-aligned upload icon (from Heroicons - cloud-arrow-up)
|
|
- Two-state design: idle (subtle) and drag-over (highlighted with ring)
|
|
- File input with clear "Browse Files" button
|
|
- Support text: "Drop ZIP file here or click to browse" (text-sm)
|
|
|
|
#### File List Display
|
|
- Table layout with columns: File Name (monospace), Size, Type, Actions
|
|
- Alternating row backgrounds for readability (hover:bg-gray-50)
|
|
- File type icons from Heroicons (document-text, code-bracket, photo, etc.)
|
|
- Compact row height (py-3) for scanning efficiency
|
|
|
|
#### Analysis Report Section
|
|
- Card-based layout (rounded-lg border shadow-sm p-6)
|
|
- Collapsible sections for different analysis aspects
|
|
- Syntax-highlighted code previews using monospace font
|
|
- Clear section headers with subtle dividers
|
|
|
|
#### Navigation/Header
|
|
- Minimal top bar with project name "IDF_Mikrotik Analyzer"
|
|
- Action buttons: "Upload New", "Clear All" (secondary styling)
|
|
- Status indicator showing number of files analyzed
|
|
|
|
#### Progress Indicators
|
|
- Linear progress bar during extraction (h-1 bg-blue-600 transition-all)
|
|
- Spinner for analysis processing (Heroicons: arrow-path with animate-spin)
|
|
|
|
### Layout Structure
|
|
|
|
**Single-Page Application Layout:**
|
|
1. **Header:** Fixed top bar (h-16) with title and actions
|
|
2. **Main Content:** Two-column layout on desktop (grid-cols-1 lg:grid-cols-2 gap-6)
|
|
- Left: Upload zone + File list
|
|
- Right: Analysis results panel
|
|
3. **Mobile:** Stack columns vertically
|
|
|
|
**Responsive Breakpoints:**
|
|
- Mobile: Single column, full-width components
|
|
- Desktop: Two-column layout with balanced proportions
|
|
|
|
### Interaction Patterns
|
|
- Drag-and-drop with visual feedback
|
|
- Click-to-expand for file details
|
|
- Smooth transitions (transition-all duration-200)
|
|
- Toast notifications for upload success/errors (top-right positioning)
|
|
|
|
### Visual Hierarchy
|
|
- Primary actions: Blue accent (bg-blue-600, hover:bg-blue-700)
|
|
- Secondary actions: Gray outline (border border-gray-300)
|
|
- Destructive actions: Red tint (text-red-600, hover:bg-red-50)
|
|
|
|
## Accessibility
|
|
- ARIA labels for upload zones and interactive elements
|
|
- Keyboard navigation for all file operations
|
|
- Focus visible states (focus:ring-2 focus:ring-blue-500)
|
|
- High contrast text (minimum text-gray-700 on white backgrounds) |