Created documentation
This commit is contained in:
parent
c862dcb5e1
commit
5b0fd36381
89
README.md
89
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 |
|
||||
Loading…
Reference in New Issue
Block a user