# Mini Page

A Flask-powered single-page web application that showcases four agricultural digital tools through an interactive card interface. The page supports Italian and English and serves local videos, a PDF, and an embedded GP widget.

---

## Implementation

### Stack

| Layer | Technology |
|-------|-----------|
| Backend | Python 3.13, Flask 3.1.3 |
| Frontend | Vanilla HTML5, CSS3, JavaScript (no build step) |
| i18n | Custom translation module (`src/i18n.py`) |

### Project Structure

```
mini_page/
├── src/
│   ├── main.py              # Flask entry point
│   ├── i18n.py              # Language loader
│   ├── translations/
│   │   ├── en.py            # English strings
│   │   └── it.py            # Italian strings
│   ├── templates/
│   │   └── index.html       # Jinja2 template (single page)
│   └── resources/           # Static assets (served at /resources/)
│       ├── css/style.css
│       ├── videos/          # Local .mp4 files
│       └── *.png / *.pdf    # Icons and documents
├── pyproject.toml
└── .python-version
```

### How It Works

1. Flask renders `index.html` with the appropriate translation set, selected via the `?lang=` query parameter (`it` by default, `en` also supported).
2. The page displays a banner and four clickable cards. Each card click triggers a JavaScript modal overlay that loads one of three content types:
   - **Video** — plays a local `.mp4` file via `<video>`
   - **Iframe** — embeds the GP widget served at `http://localhost/viewer`
   - **PDF** — displays a local PDF via `<iframe>`
3. All static assets (images, videos, CSS, PDF) are served directly by Flask from `src/resources/`.

---

## Requirements

- **Python >= 3.13**
- **[uv](https://docs.astral.sh/uv/)** package manager (strongly recommended)
- **Docker** — required to run the GP widget locally (stable release **v0.1**)
- **Internal VPN** — must be active for the GP widget (Phenological Recognition card) to connect to backend services

> The GP widget is expected at `http://localhost/viewer`. Without Docker and an active VPN connection, Card 1 (Phenological Recognition) will not function.

---

## How to Run

### 1. Install dependencies

```powershell
uv sync
```

### 2. Start the GP widget via Docker

> **VPN must be connected before this step.**

```bash
docker run <gp-widget-image>:v0.1
# Replace <gp-widget-image> with the actual image name for GP widget v0.1
```

The widget must be running and reachable at `http://localhost/viewer` before opening the page.

### 3. Start the Flask server

```powershell
uv run python src/main.py
```

### 4. Open the application

| URL | Language |
|-----|----------|
| `http://localhost:5000/` | Italian (default) |
| `http://localhost:5000/?lang=en` | English |