78 lines
2.3 KiB
Markdown
78 lines
2.3 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
|
|
- **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)
|
|
- **Internal VPN** — must be active for the GP widget (Phenological Recognition card) service
|
|
|
|
> Without an active VPN connection, Card 1 (Phenological Recognition) will not function.
|
|
|
|
---
|
|
|
|
## How to Run
|
|
|
|
### 1. Install dependencies
|
|
|
|
```powershell
|
|
uv sync
|
|
```
|
|
|
|
### 2. Start the Flask server
|
|
|
|
```powershell
|
|
uv run python src/main.py
|
|
```
|
|
|
|
### 3. Open the application
|
|
|
|
| URL | Language |
|
|
|-----|----------|
|
|
| `http://localhost:5000/` | Italian (default) |
|
|
| `http://localhost:5000/?lang=en` | English |
|