From 5b0fd36381012f066771167de69146a4d79a21f6 Mon Sep 17 00:00:00 2001
From: Juan Pablo Corredor <juan.corredorie@gmail.com>
Date: Mon, 1 Jun 2026 10:19:43 +0200
Subject: [PATCH] Created documentation

---
 README.md | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)

diff --git a/README.md b/README.md
index e69de29..9e88713 100644
--- a/README.md
+++ b/README.md
@@ -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 |