plan/08-ui-ux.md

# UI/UX Design Plan

## Overview

Professional, clean web interface with glassmorphism aesthetics. Three main pages with smooth navigation, interactive elements, and visual data presentation.

## Design System

| Element | Specification |
|---------|---------------|
| **Style** | Glassmorphism + Minimalist |
| **Primary Color** | #6C63FF (purple-blue) |
| **Secondary** | #FF6584 (coral accent) |
| **Background** | Gradient dark (#0f0c29 → #302b63 → #24243e) |
| **Glass panels** | backdrop-filter: blur(20px), semi-transparent bg |
| **Font** | Inter (Google Fonts) |
| **Cards** | Rounded (16px), subtle shadows, hover animations |

## Page 1: Home / User Selection (`index.html`)

**Layout**:
```
┌─────────────────────────────────────────────┐
│  ⭐ Intelligent Recommender System    [nav] │
├─────────────────────────────────────────────┤
│                                             │
│  ┌─────────── User Selection ────────────┐  │
│  │  Select User: [Dropdown ▼]            │  │
│  │  ┌────────────────────────────────┐   │  │
│  │  │ User Profile Card              │   │  │
│  │  │ Name: Alice | Age: 28         │   │  │
│  │  │ Prefs: Electronics, Books     │   │  │
│  │  │ Budget: $100 - $1500          │   │  │
│  │  └────────────────────────────────┘   │  │
│  └───────────────────────────────────────┘  │
│                                             │
│  ┌───── Select Approach ─────────────────┐  │
│  │  [🤝 Collaborative]  [🏷️ Content] [⚙️ Knowledge] │
│  │  [🔁 Compare All]                       │  │
│  └───────────────────────────────────────┘  │
│                                             │
│  [🚀 Generate Recommendations]              │
└─────────────────────────────────────────────┘
```

**Interactions**:
- Dropdown updates profile card in real-time
- Approach buttons are toggle-style with highlighting
- Hover effects on all interactive elements

## Page 2: Recommendations (`recommend.html`)

**Layout**:
```
┌─────────────────────────────────────────────┐
│  ⭐ Results for Alice              [nav]   │
├─────────────────────────────────────────────┤
│  ┌─ Approach Tabs ───────────────────────┐  │
│  │  [CF] [Content] [Knowledge] [Compare] │  │
│  └────────────────────────────────────────┘  │
│                                             │
│  ┌─ Recommendations ──────────────────────┐ │
│  │  ┌─────────────────────────────────┐   │ │
│  │  │ 🖼️ Samsung Galaxy S24        │   │ │
│  │  │ ⭐⭐⭐⭐☆ 4.2  |  $799.99     │   │ │
│  │  │ 💡 12 similar users purchased │   │ │
│  │  └─────────────────────────────────┘   │ │
│  │  ┌─────────────────────────────────┐   │ │
│  │  │ 🖼️ Sony WH-1000XM5            │   │ │
│  │  │ ⭐⭐⭐⭐⭐ 4.8  |  $349.99    │   │ │
│  │  │ 💡 91% similar to liked item   │   │ │
│  │  └─────────────────────────────────┘   │ │
│  │  ... (top 10 items)                    │ │
│  └─────────────────────────────────────────┘ │
│                                             │
│  [📊 View Evaluation & Comparison]           │
└─────────────────────────────────────────────┘
```

**Interactions**:
- Tab switching animates between approaches
- "Compare" tab shows side-by-side view
- Each card has hover lift effect

## Page 3: Evaluation Dashboard (`evaluation.html`)

**Layout**:
```
┌─────────────────────────────────────────────┐
│  📊 Evaluation & Comparison        [nav]   │
├─────────────────────────────────────────────┤
│  ┌─── CF Methods Comparison ─────────────┐  │
│  │  [Bar Chart: RMSE, MAE by method]    │  │
│  │  [Table: All metrics × All methods]  │  │
│  │  🏆 Best CF Method: SVD (RMSE: 0.81) │  │
│  └────────────────────────────────────────┘  │
│                                             │
│  ┌─── Approach Comparison ────────────────┐ │
│  │  [Grouped Bar Chart: CF vs CB vs KB]  │ │
│  │  [Radar Chart: Strengths profile]     │ │
│  │  🏆 Best Approach: CF (overall)       │ │
│  └────────────────────────────────────────┘  │
│                                             │
│  ┌─── Condition Analysis ─────────────────┐ │
│  │  [Table: Best approach per condition] │ │
│  │  📝 Analysis: Why differences occur   │ │
│  └────────────────────────────────────────┘  │
└─────────────────────────────────────────────┘
```

**Charts** (using Chart.js):
- Grouped bar chart for CF methods comparison
- Horizontal bar chart for approach comparison
- Radar chart for strength profiles
- Condition matrix table

## Responsive Design

- Mobile-friendly card layouts
- Collapsible navigation
- Touch-friendly buttons
- Smooth CSS transitions (300ms ease)

## Files

| File | Path |
|------|------|
| Main CSS | `static/css/style.css` |
| Home template | `templates/index.html` |
| Recommend template | `templates/recommend.html` |
| Evaluation template | `templates/evaluation.html` |