# Quick Reference Guide - Manus AI Clone Frontend

## 📁 File Structure

```
templates/
  ├── base.html      # Base layout template
  └── index.html     # Main page

static/
  ├── css/
  │   └── style.css  # All styles
  └── js/
      └── main.js    # All JavaScript
```

## 🎨 Template Usage

### Extending Base Template

```html
{% extends "base.html" %} {% block title %}Your Title{% endblock %} {% block
content %}
<!-- Your content here -->
{% endblock %}
```

### Available Blocks

-   `{% block title %}` - Page title
-   `{% block extra_css %}` - Additional CSS files
-   `{% block content %}` - Main content
-   `{% block extra_js %}` - Additional JS files

### Static File URLs

```html
<!-- CSS -->
<link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}" />

<!-- JavaScript -->
<script src="{{ url_for('static', path='/js/main.js') }}"></script>

<!-- Images -->
<img src="{{ url_for('static', path='/images/logo.png') }}" />
```

## ⚡ JavaScript API

### Main Functions

```javascript
// Execute a browser task
executeTask();

// Clear results display
clearResults();

// Fill prompt with text
fillPrompt(text);

// Show notification
showNotification(message, type); // types: 'success', 'error', 'info', 'warning'

// Statistics
loadStats();
saveStats();
updateStatsDisplay();
resetStats();
```

### Event Handlers

-   Enter key in textarea → Execute task
-   Shift+Enter → New line
-   Click example → Fill prompt

### State Management

```javascript
// Statistics stored in localStorage
taskStats = {
    total: 0,
    successful: 0,
    times: [],
};
```

## 🎨 CSS Classes

### Layout

-   `.container` - Main content container
-   `.hero` - Hero section
-   `.nav-container` - Navigation wrapper

### Components

-   `.btn` - Button base
-   `.btn-primary` - Primary action button
-   `.btn-secondary` - Secondary button
-   `.result-card` - Result display card
-   `.stat-card` - Statistics card
-   `.action-item` - Action history item

### States

-   `.active` - Show element
-   `.hidden` - Hide element
-   `.loading` - Loading state
-   `success-icon` - Success styling
-   `error-icon` - Error styling

### Custom Properties

```css
:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --success-color: #4caf50;
    --error-color: #f44336;
    --warning-color: #ffc107;
}
```

## 🔌 API Endpoints

### GET /

Returns: HTML page (index.html template)

### POST /execute

Request:

```json
{
    "prompt": "Your task here"
}
```

Response:

```json
{
  "success": true,
  "output": "Task result",
  "screenshot": "base64_image_data",
  "action_history": [...]
}
```

### GET /health

Response:

```json
{
    "status": "healthy",
    "agent_initialized": true,
    "model": "gpt-4o-mini"
}
```

### GET /status

Response:

```json
{
  "action_history": [...],
  "current_url": "https://..."
}
```

## 🛠️ Common Tasks

### Adding a New Page

1. Create `templates/newpage.html`:

```html
{% extends "base.html" %} {% block content %}
<div class="container">
    <h1>New Page</h1>
</div>
{% endblock %}
```

2. Add route in `main.py`:

```python
@app.get("/newpage")
async def new_page(request: Request):
    return templates.TemplateResponse("newpage.html", {"request": request})
```

### Adding Custom CSS

```html
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', path='/css/custom.css') }}" />
{% endblock %}
```

### Adding Custom JavaScript

```html
{% block extra_js %}
<script src="{{ url_for('static', path='/js/custom.js') }}"></script>
{% endblock %}
```

### Passing Data to Template

```python
@app.get("/page")
async def page(request: Request):
    data = {"name": "John", "age": 30}
    return templates.TemplateResponse("page.html", {
        "request": request,
        **data
    })
```

In template:

```html
<p>Name: {{ name }}</p>
<p>Age: {{ age }}</p>
```

## 🎯 Frontend Features

### Toast Notifications

```javascript
showNotification("Success!", "success");
showNotification("Error occurred", "error");
showNotification("Info message", "info");
showNotification("Warning!", "warning");
```

### Statistics Tracking

Automatically tracked:

-   Total tasks executed
-   Successful tasks
-   Average execution time

Stored in browser localStorage, persists across sessions.

### Example Prompts

Click any example to auto-fill the prompt textarea.

### Screenshot Display

Automatically shows browser screenshot after task execution.

### Action History

Shows all browser actions performed:

-   Navigate
-   Click
-   Type
-   Scroll
-   Get text
-   Execute JavaScript

## 🎨 Customization

### Change Theme Colors

Edit in `static/css/style.css`:

```css
:root {
    --primary-color: #your-color;
    --secondary-color: #your-color;
}
```

### Modify Layout

Edit `templates/base.html` to change:

-   Navigation structure
-   Footer content
-   Meta tags
-   External links

### Customize Home Page

Edit `templates/index.html` to change:

-   Hero section
-   Example prompts
-   Input form
-   Results layout

## 🔧 Development Tips

1. **Auto-reload**: Use `uvicorn main:app --reload` for hot reloading
2. **Template errors**: Check FastAPI error pages for detailed info
3. **CSS changes**: Hard refresh (Ctrl+Shift+R) to bypass cache
4. **JS debugging**: Use browser DevTools console
5. **API testing**: Use `/docs` for Swagger UI

## 📱 Responsive Breakpoints

-   Desktop: > 768px
-   Tablet: 768px
-   Mobile: < 768px

Customized layouts for each breakpoint in `style.css`.

## 🚀 Performance

-   Static files cached by browser
-   Minimal external dependencies
-   Optimized animations (GPU-accelerated)
-   Lazy loading for images
-   Debounced events

## 📚 Resources

-   [Jinja2 Documentation](https://jinja.palletsprojects.com/)
-   [FastAPI Templates](https://fastapi.tiangolo.com/advanced/templates/)
-   [Static Files](https://fastapi.tiangolo.com/tutorial/static-files/)

## 🐛 Troubleshooting

**Templates not loading?**

-   Check `BASE_DIR` path in `main.py`
-   Verify template files exist in `templates/`

**Static files 404?**

-   Check static mount in `main.py`
-   Verify files exist in `static/css/` or `static/js/`
-   Use correct `url_for()` syntax

**JavaScript not working?**

-   Check browser console for errors
-   Verify API endpoints are responding
-   Check CORS settings

**Styles not applying?**

-   Hard refresh browser (Ctrl+Shift+R)
-   Check CSS file path
-   Inspect element in DevTools