90 lines
2.8 KiB
Markdown
90 lines
2.8 KiB
Markdown
# 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 |
|