INTEGRATION_GUIDE.md

// FLASHSYNC 2.6.0 - INTEGRATION & SETUP GUIDE

## Quick Start

### 1. Basic Server Setup

```gleam
// In src/server.gleam - already created
import mist
import service

pub fn main() {
  service.new()
  |> service.handler(handle_request)
  |> mist.run_service(on: 3000)
}
```

### 2. Using the UI Builder

```gleam
import ui_builder

// Generate complete HTML page
let html = ui_builder.build_html(
  "<p>Your content here</p>",
  "Page Title"
)
```

### 3. Serving Pages

```gleam
import page_content

// Get any page content
let hub_html = page_content.build_page_content("hub")
let tutor_html = page_content.build_page_content("tutor")
```

---

## File Structure Created

```
d:\different projects\flashsync\
├── src/
│   ├── ui_builder.gleam       ← HTML/CSS generator
│   ├── page_content.gleam     ← Page templates
│   ├── server.gleam           ← HTTP router
│   └── ... (existing files)
├── FEATURES_2.6.0.md          ← Feature documentation
└── gleam.toml                 ← Version: 2.6.0
```

---

## Available Pages

| Path | Page | Module |
|------|------|--------|
| `/` | Hub/Dashboard | `hub_page()` |
| `/flashcards` | Flashcard Vault | `flashcards_page()` |
| `/education` | Education Portal | `education_page()` |
| `/tutor` | AI Tutor | `tutor_page()` |
| `/ai-solver` | AI Problem Solver | `ai_solver_page()` |
| `/study-tools` | Study Tools | `study_tools_page()` |
| `/heatmap` | Neural Heatmap | `heatmap_page()` |
| `/biometric` | Focus Tracking | `biometric_page()` |
| `/exam` | Mock Exams | `exam_page()` |
| `/timetravel` | Learning Timeline | `timetravel_page()` |
| `/settings` | Settings | `settings_page()` |

---

## Key UI Components

### Buttons
```html
<!-- Primary Button -->
<button class='premium-button'><i class='fas fa-icon'></i> Text</button>

<!-- Accent Button -->
<button class='accent-button'>Text</button>

<!-- Success Button -->
<button class='success-button'>Text</button>
```

### Cards
```html
<div class='stat-card'>
  <h3>Title</h3>
  <p>Content</p>
</div>
```

### Grids
```html
<!-- 2 columns -->
<div class='grid-2'>
  <div class='feature-box'>Item 1</div>
  <div class='feature-box'>Item 2</div>
</div>

<!-- 3 columns -->
<div class='grid-3'>...</div>

<!-- 4 columns -->
<div class='grid-4'>...</div>
```

---

## Styling & Customization

### Colors
```css
--primary: #00f2ff      /* Cyan */
--secondary: #bb13fe   /* Purple */
--accent: #00ff00      /* Bright Green */
--success: #4ade80     /* Success Green */
--warning: #facc15     /* Warning Yellow */
```

### Classes
- `.premium-button` - Primary styled button
- `.accent-button` - Accent styled button
- `.success-button` - Success styled button
- `.stat-card` - Info/stat display card
- `.feature-box` - Feature showcase container
- `.grid-2/.grid-3/.grid-4` - Responsive grids
- `.mode-toggle` - Mode selector buttons
- `.language-selector` - Language buttons
- `.chat-window` - Chat interface
- `.chat-messages` - Message display area
- `.chat-input` - Input area

---

## Next Steps: API & LLM Integration

### Implement Chat API (TODO)
```gleam
// In server.gleam, expand handle_chat_api
fn handle_chat_api(req: Request(String)) -> Response(String) {
  // 1. Parse request body
  let body = req.body
  
  // 2. Call LLM service (Gemini/GPT-4)
  let response = call_llm(body)
  
  // 3. Return JSON response
}
```

### Implement Upload API (TODO)
```gleam
// Handle file uploads for problem solving
fn handle_upload_api(req: Request(String)) -> Response(String) {
  // 1. Extract file from request
  // 2. Process image (OCR for problems)
  // 3. Send to problem solver
  // 4. Return solution
}
```

### Implement Generate API (TODO)
```gleam
// Generate content (questions, summaries, etc.)
fn handle_generate_api(req: Request(String)) -> Response(String) {
  // 1. Parse generation request
  // 2. Call appropriate generator
  // 3. Return generated content
}
```

---

## Testing Locally

1. Build the project:
   ```bash
   gleam build
   ```

2. Run the server:
   ```bash
   gleam run
   ```

3. Visit pages:
   - http://localhost:3000 (Hub)
   - http://localhost:3000/tutor (AI Tutor)
   - http://localhost:3000/flashcards (Flashcards)

---

## Production Deployment

1. Build release:
   ```bash
   gleam build --target=erlang
   ```

2. Deploy with Erlang/OTP:
   ```bash
   erl -pa _build/default/ebin -eval "application:start(flashsync)"
   ```

3. Configure environment:
   - LLM API keys
   - Database connection
   - Storage location

---

## Modules Created

### `ui_builder.gleam`
- **Function:** `build_html(String, String) -> String`
- **Purpose:** Generate complete HTML layout with CSS
- **Usage:** Wrap page content

### `page_content.gleam`
- **Function:** `build_page_content(String) -> String`
- **Purpose:** Return appropriate page HTML
- **Usage:** Get content for specific page

### `server.gleam`
- **Function:** `main() -> Nil`
- **Function:** `handle_request(Request) -> Response`
- **Purpose:** HTTP routing and request handling
- **Usage:** Main application entry point

---

## Feature Highlights

✓ 10 advanced learning features
✓ Professional UI system
✓ Responsive design
✓ API endpoints ready for LLM integration
✓ Flashcard SM-2 algorithm support
✓ Real-time analytics dashboard
✓ Time-travel learning timeline
✓ Biometric focus tracking
✓ AI-powered content generation
✓ Professional PDF export

---

## Support & Documentation

- Feature Details: See FEATURES_2.6.0.md
- Code Examples: Check individual module comments
- API Reference: See server.gleam endpoint descriptions

Version: 2.6.0
Last Updated: 2024