# GUIDE
This document details the User Interface (UI) design specifications primarily focuses on the visual and interactive elements, referencing the core design principles, linking to design files (e.g., Figma), outlining design system usage, and providing a screen-by-screen breakdown of UI components, their properties, and behaviors.
# FORMAT
## Title: [Application/Website Name]
app_ver: [app_ver]
doc_ver: [doc_ver]
## CORE PRINCIPLES
[Design Principles]
Design: [Link Figma/Design File]
## Design System
[Category (Color, Typography, Space, Icon)] : [Rules]
## Screen
### [Numerical order].[Screen Name]
#### Purpose
[Description about screen]
#### Component
#### Component  
| Content              | Element      | Logic            | Main Event | Animation   |
| -------------------- | ------------ | ---------------- | ---------- | ----------- |
| [Content Desciption] | [UI Element] | [Business Logic] | [Event]    | [Animation] |
| ...                  | ...          | ...              | ...        | ...         |
#### Flow
- In: [from Screens]
- Out: [to Screen]
#### Connect
[API endpoint]

---
# CONTENT

## Title: ZEE Quiz Application
app_ver: 1.0.0
doc_ver: A1

## Design System
### Color
- Primary: #4F46E5 (Indigo-600)
- Secondary: #10B981 (Emerald-500)
- Error: #EF4444 (Red-500)
- Background: #FFFFFF
- Text: #111827 (Gray-900)

### Typography
- Family: 'Inter', system-ui
- Scale: 
  - H1: 3rem/48px
  - H2: 2.25rem/36px
  - Body: 1rem/16px
  - Small: 0.875rem/14px

### Space
- Base: 4px
- Scale: 4, 8, 16, 24, 32, 48

### Icon
- Source: Heroicons
- Size: 20x20px

## Screen

### 1. Authentication
#### Purpose
Handle user login and registration
#### Component
| Content | Element | Logic | Main Event | Animation |
|---------|----------|--------|------------|------------|
| Login Form | Form | Validate credentials | onSubmit | Fade in |
| Email | Input | Required, email format | onChange | None |
| Password | Input | Required, min 8 chars | onChange | None |
| Submit | Button | Enable if form valid | onClick | Scale |
#### Flow
- In: Landing, Register
- Out: Dashboard
#### Connect
/api/auth/login

### 2. Dashboard
#### Purpose
Main user interface showing quizzes and stats
#### Component
| Content | Element | Logic | Main Event | Animation |
|---------|----------|--------|------------|------------|
| Quiz List | Grid | Fetch active quizzes | onLoad | Fade in |
| Stats | Cards | Calculate user stats | onLoad | Slide up |
| Quick Actions | Buttons | Role-based access | onClick | Scale |
#### Flow
- In: Auth, Quiz Complete
- Out: Quiz, Profile
#### Connect
/api/dashboard

### 3. Quiz Taking
#### Purpose
Interface for attempting quizzes
#### Component
| Content | Element | Logic | Main Event | Animation |
|---------|----------|--------|------------|------------|
| Question | Card | Load question data | onNext | Slide |
| Timer | Display | Countdown timer | onTick | Pulse |
| Options | Radio Group | Single selection | onChange | Scale |
| Navigation | Buttons | Question flow | onClick | Slide |
#### Flow
- In: Dashboard, Quiz List
- Out: Results
#### Connect
/api/quiz/{id}

### 4. Results
#### Purpose
Show quiz completion results
#### Component
| Content | Element | Logic | Main Event | Animation |
|---------|----------|--------|------------|------------|
| Score | Display | Calculate final score | onLoad | Count up |
| Review | List | Show correct answers | onClick | Fade in |
| Share | Button | Generate share link | onClick | Scale |
#### Flow
- In: Quiz Taking
- Out: Dashboard
#### Connect
/api/quiz/{id}/results

---
*Last Updated: 2025-06-06*
*Next Review: 2025-07-01*