cgasser/web_meineordi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

impressum

Browse Source
This commit is contained in:
Christoph Gasser
2026-03-31 15:22:40 +02:00
parent d1eefa81f5
commit 5f606fec6e
2 changed files with 311 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
meineordi-project-summary.md
View File

@@ -3,8 +3,9 @@
## Overview
Complete static HTML redesign of the medical practice website for **Dr. med. Carina Kautsch**, Ärztin für Allgemeinmedizin, replacing a Joomla 3 CMS with a single self-contained `index.html` file served via nginx in Docker.
**Live site (old):** https://meineordi.at/
**Logo URL:** https://meineordi.at/images/meineordi/logo.png
**Live site (old):** https://meineordi.at/
**New site (staging):** https://new.meineordi.at/
**Git repository:** https://git.stranto.com/cgasser/web_meineordi
---
@@ -30,34 +31,117 @@ Complete static HTML redesign of the medical practice website for **Dr. med. Car
---
## Current Deliverable
## Infrastructure
### File: `index.html`
A single fully self-contained HTML file. No framework, no build step, no CMS.
### Server Stack
| Component | Details |
|---|---|
| Docker host | existing server |
| Reverse proxy | Nginx Proxy Manager |
| Docker network | `nginx_internal_network` (external, shared with NPM) |
| Container manager | Portainer |
| Git server | Gitea at `https://git.stranto.com` (Docker, stack name: `gitea`) |
### Gitea Setup
- Stack deployed in Portainer, name: `gitea`
- Data volume: `gitea-data`
- Web UI port: `3000` (internal only, routed via NPM)
- SSH git port: `222`
- NPM proxy host: `git.stranto.com` → container `gitea`, port `3000`, SSL/HTTPS
- ROOT_URL: `https://git.stranto.com`
- Database: SQLite (built-in, no separate DB container)
- Gitea stack file: `gitea-stack.yml` in this repo
### meineordi Website Container
- Stack deployed in Portainer from **Git repository source**
- Repository: `https://git.stranto.com/cgasser/web_meineordi`
- Branch: `master`
- Compose path: `docker-compose.yml`
- Portainer authenticates with a Gitea access token (scope: repository)
- Container name: `meineordi-web`
- Port: `8094:80` (also accessible via NPM at `new.meineordi.at`)
- NPM proxy host: `new.meineordi.at` → container `meineordi-web`, port `80`, SSL/HTTPS
---
## Repository File Structure
```
web_meineordi/
├── index.html # Full website — single self-contained file
├── logo.png # Practice logo (copied into Docker image)
├── favicon.svg # SVG favicon (red circle + white cross, #C8102E)
├── Dockerfile # nginx:alpine, copies index.html + logo.png + favicon.svg
├── docker-compose.yml # Portainer stack definition, builds from Dockerfile
├── gitea-stack.yml # Gitea server stack (deploy separately in Portainer)
└── meineordi-project-summary.md # This file
```
### Dockerfile
```dockerfile
FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html
COPY logo.png /usr/share/nginx/html/logo.png
COPY favicon.svg /usr/share/nginx/html/favicon.svg
```
### docker-compose.yml
```yaml
services:
meineordi-web:
build: .
container_name: meineordi-web
restart: unless-stopped
ports:
- "8094:80"
healthcheck:
test: ["CMD", "wget", "-qO-", "http://localhost/"]
interval: 30s
timeout: 5s
retries: 3
networks:
nginx_internal_network: {}
networks:
nginx_internal_network:
external: true
```
---
## index.html — Sections & Features
**Sections (top to bottom):**
1. Sticky header with logo + nav links + phone button
2. Hero — logo image large on right, headline + CTA buttons left, 4 quick-info cards below
3. Öffnungszeiten — 2-column grid of hour boxes with shadows
1. Sticky header — logo + nav links + font size toggle (A / A+) + phone button
2. Hero — logo (float animation) + headline + CTA buttons + 4 quick-info cards (address, phone, email, today's hours)
3. Öffnungszeiten — 2-column card grid with red border, hover lift effect
4. Schließzeiten — dynamically rendered from JS array (see below)
5. Leistungen — 6-item service grid with emoji icons
6. Aktuelles — 3 notice items (prescriptions, diabetes supplies, sick notes)
7. Kontakt & Standort — contact rows + embedded OpenStreetMap iframe
8. Footer with logo
6. Aktuelles — 3 notice cards (prescriptions, diabetes supplies, sick notes)
7. Kontakt & Standort — contact rows + embedded Google Maps iframe
8. Footer — logo + copyright + Impressum/Datenschutz links (pages not yet built)
### Design Decisions
- **Fonts:** Cormorant Garamond (headings/serif) + DM Sans (body), loaded from Google Fonts
- **Primary color:** `#C8102E` (red from meineOrdi logo) — fixed, not auto-extracted
- **Background:** Pure white `#ffffff`, alt-sections `#f7f7f7`
- **Base font size:** 18px (deliberately larger for older patients)
- **Opening hours boxes:** white cards with strong drop shadow (`box-shadow: 0 6px 28px rgba(0,0,0,.14)`) and subtle red border, hover lift effect
- **Logo:** displayed in navbar (42px height), large in hero section (280px, float animation), subtle watermark behind hero, inverted white in footer
- **Map:** OpenStreetMap embed — no Google API key required
- **Mobile:** Fully responsive, hamburger menu below 768px, logo shifts above text on mobile
- **Animations:** CSS `fadeUp` on hero elements, `floatLogo` on hero logo
### Design
| Property | Value |
|---|---|
| Fonts | Cormorant Garamond (headings) + DM Sans (body), Google Fonts |
| Primary color | `#C8102E` (red from logo) |
| Background | `#ffffff`, alt sections `#f7f7f7` |
| Base font size | 18px normal / 22px large mode |
| Border radius | 12px |
| Map | Google Maps iframe embed (no API key required) |
| Mobile | Fully responsive, hamburger menu below 768px |
| Animations | `fadeUp` on hero elements, `floatLogo` on hero logo |
| Favicon | `favicon.svg` — red circle with white medical cross |
### Closure/Holiday Management (no CMS needed)
At the very top of `<body>` is a clearly commented JavaScript array:
### Accessibility — Font Size Toggle
- **A** / **A+** buttons in navbar and mobile menu
- Switches base font between 18px (normal) and 22px (large)
- Active button highlighted in red
- Preference saved in `localStorage` — persists across visits
### Closure/Holiday Management
At the very top of `<body>` is a clearly commented JavaScript array — **the only place that needs editing** to manage holidays:
```js
const SCHLIESSZEITEN = [
@@ -69,65 +153,32 @@ const SCHLIESSZEITEN = [
deputyPhone: "01 / 406 31 04",
deputyHours: "Mo & Mi 8–12 Uhr · Di & Do 14–18 Uhr · Fr 12–16 Uhr"
},
// ... more entries
// add more entries here...
];
```
The `renderClosures()` function at the bottom of the script reads this array and builds the closure cards dynamically. Empty array → "Keine Schließzeiten" message shown automatically. This is the ONLY place that needs editing to manage holidays.
Empty array → "Keine Schließzeiten" message shown automatically.
---
## Docker Setup
## Everyday Update Workflow
### Files
```
meineordi-docker.tar.gz
├── Dockerfile
├── index.html
└── docker-compose.yml
1. Edit index.html locally (e.g. update SCHLIESSZEITEN array)
2. Right-click folder → TortoiseGit → Git Commit → master
3. Enter commit message → Commit & Push
4. Portainer → Stacks → meineordi → Pull and redeploy
```
### Dockerfile
```dockerfile
FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html
```
### docker-compose.yml
```yaml
services:
meineordi-web:
image: meineordi-web:latest
container_name: meineordi-web
restart: unless-stopped
ports:
- "8080:80"
healthcheck:
test: ["CMD", "wget", "-qO-", "http://localhost/"]
interval: 30s
timeout: 5s
retries: 3
```
### Build & Deploy
```bash
# Build image (must be done on the Docker host)
docker build -t meineordi-web:latest .
# Deploy via Portainer → Stacks → Add stack → paste docker-compose.yml
# OR run directly:
docker compose up -d
```
**Note:** The image must be built locally on the Docker host (or pushed to a registry) before Portainer can use it. The compose file references `meineordi-web:latest` as a pre-built local image, not a registry image.
Git client used locally: **TortoiseGit** (Windows Explorer integration)
---
## Possible Next Steps / Open Items
## Open Items / Next Steps
- **Reverse proxy integration** — The compose file currently exposes port 8080 directly. If the server uses Nginx Proxy Manager, Traefik, or Caddy, the `ports:` mapping should be replaced with a shared Docker network and proxy labels/config.
- **Registry/CI** — For easier updates, the image could be pushed to a private registry (e.g. Gitea with built-in registry, or Docker Hub) so Portainer can pull updates without SSH access.
- **HTTPS / domain** — Point `meineordi.at` DNS to the new server and configure SSL termination at the reverse proxy level.
- **Logo CORS** — The logo is loaded cross-origin from `meineordi.at`. Once the site is self-hosted, copy `logo.png` into the Docker image alongside `index.html` and reference it as `/logo.png` to avoid any cross-origin issues and eliminate the external dependency.
- **Content updates** — All content (hours, notices, services) is hardcoded in `index.html`. If more frequent edits are needed, consider a simple JSON config file mounted as a Docker volume, or a minimal admin UI built on top.
- **Imprint / Datenschutz** — Austrian law (ECG / DSGVO) requires an Impressum and Datenschutzerklärung. These pages don't exist yet.
- [ ] **Impressum** — required by Austrian law (ECG). Needs: company name, address, responsible person, UID if applicable.
- [ ] **Datenschutzerklärung** — required by DSGVO. Google Maps embed requires a note in the privacy policy.
- [ ] **Switch main domain** — point `meineordi.at` DNS to the new server and configure NPM proxy host once staging (`new.meineordi.at`) is approved.
- [ ] **Portainer auto-redeploy** — configure Gitea webhook → Portainer webhook URL so pushes trigger automatic redeployment without manual "Pull and redeploy".
- [ ] **Content review** — all text (Leistungen, Aktuelles) is placeholder-quality; Dr. Kautsch should review and approve final wording.
- [ ] **Google Maps** — currently using a no-API-key embed URL. If Google blocks it, switch to official Maps Embed API with a key.