# Frontend Structure Documentation

## Overview

The Manus AI Clone now uses a professional frontend structure with Jinja2 templates and separated static assets (CSS/JS).

## Directory Structure

```
manus_ai_clone/
├── templates/              # Jinja2 HTML templates
│   ├── base.html          # Base template with common layout
│   └── index.html         # Home page template
├── static/                # Static assets
│   ├── css/
│   │   └── style.css      # Main stylesheet
│   └── js/
│       └── main.js        # Frontend JavaScript
├── browser_agent.py       # Browser automation logic
├── main.py               # FastAPI application
└── pyproject.toml        # Project dependencies
```

## Template System

### base.html

-   Base template with common layout structure
-   Includes navigation bar and footer
-   Provides blocks for extending pages
-   Links to static CSS and JS files

**Blocks available:**

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

### index.html

-   Extends base.html
-   Main application interface
-   Includes:
    -   Hero section with title
    -   Example prompts
    -   Input textarea for user prompts
    -   Action buttons
    -   Loading indicator
    -   Results display with screenshots
    -   Statistics cards

## Static Assets

### CSS (style.css)

Features:

-   CSS custom properties for theming
-   Responsive design with media queries
-   Modern gradient backgrounds
-   Card-based layouts
-   Smooth animations and transitions
-   Custom scrollbar styling
-   Hover effects

Key sections:

-   Variables and reset
-   Navigation bar
-   Hero section
-   Input forms
-   Buttons and controls
-   Loading indicators
-   Results display
-   Action history
-   Statistics cards
-   Footer

### JavaScript (main.js)

Features:

-   Task execution with API calls
-   Real-time loading states
-   Results rendering
-   Screenshot display
-   Action history tracking
-   Statistics tracking (localStorage)
-   Toast notifications
-   Error handling
-   Keyboard shortcuts

Key functions:

-   `executeTask()` - Execute browser automation
-   `displayResults()` - Render task results
-   `clearResults()` - Clear UI
-   `fillPrompt()` - Fill example prompts
-   `showNotification()` - Toast messages
-   `loadStats()` / `saveStats()` - Statistics persistence

## Usage

### Running the Application

```bash
# Install dependencies
uv pip install -e .

# Start the server
python main.py

# Or with uvicorn
uvicorn main:app --reload --host 0.0.0.0 --port 8000
```

### Creating Custom Templates

1. Create a new template in `templates/`:

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

2. Add route in `main.py`:

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

### Adding Custom Styles

Add to `static/css/style.css`:

```css
.custom-class {
    /* Your styles */
}
```

Or create a new CSS file and link in template:

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

### Adding Custom JavaScript

Add to `static/js/main.js` or create new file:

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

## Features

### Statistics Tracking

-   Persistent across sessions (localStorage)
-   Tracks total tasks, successful tasks, and average time
-   Can be reset with `resetStats()` function

### Toast Notifications

-   Success, error, info, warning types
-   Auto-dismiss after 3 seconds
-   Slide-in animation

### Example Prompts

-   Click any example to fill the input
-   Helps users understand capabilities

### Keyboard Shortcuts

-   `Enter` - Execute task
-   `Shift+Enter` - New line in textarea

### Responsive Design

-   Mobile-first approach
-   Breakpoints for tablets and desktops
-   Collapsible navigation on mobile

## Customization

### Theming

Edit CSS variables in `style.css`:

```css
:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --success-color: #4caf50;
    /* etc. */
}
```

### Adding New API Endpoints

```python
@app.get("/api/custom")
async def custom_endpoint():
    return {"message": "Custom response"}
```

### Adding New Templates

1. Create template in `templates/`
2. Register route in `main.py`
3. Use `templates.TemplateResponse()`

## Development Tips

1. **Hot Reload**: Use `--reload` flag with uvicorn for development
2. **Debug Mode**: Check browser console for JavaScript errors
3. **Template Errors**: FastAPI shows detailed template errors in browser
4. **Static Files**: Changes to CSS/JS are cached - hard refresh (Ctrl+Shift+R)

## Browser Compatibility

-   Chrome/Edge: ✅ Full support
-   Firefox: ✅ Full support
-   Safari: ✅ Full support
-   Mobile browsers: ✅ Responsive design

## Performance Considerations

-   Static files are cached by browser
-   Screenshots are base64 encoded (may be large)
-   Action history limited to prevent DOM bloat
-   Statistics stored in localStorage (5-10MB limit)

## Security Notes

-   CORS enabled for same-origin only
-   No authentication included (add if exposing publicly)
-   API keys loaded from environment variables
-   User input sanitized by FastAPI/Pydantic

## Future Enhancements

Potential additions:

-   Dark mode toggle
-   Export results as PDF
-   WebSocket for real-time updates
-   User authentication
-   Task history database
-   Screenshot comparison
-   Recording browser sessions
-   Multi-language support