Created documentation

This commit is contained in:
Juan Pablo Corredor 2026-06-01 10:19:43 +02:00
parent c862dcb5e1
commit 5b0fd36381

View File

@ -0,0 +1,89 @@
# 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 |