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 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

uv sync

2. Start the GP widget via Docker

VPN must be connected before this step.

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

uv run python src/main.py

4. Open the application

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