185 lines
6.5 KiB
Markdown
185 lines
6.5 KiB
Markdown
# Project Summary: meineordi.at Website Redesign
|
||
|
||
## 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/
|
||
**New site (staging):** https://new.meineordi.at/
|
||
**Git repository:** https://git.stranto.com/cgasser/web_meineordi
|
||
|
||
---
|
||
|
||
## Practice Information
|
||
|
||
| Field | Value |
|
||
|---|---|
|
||
| Doctor | Dr. med. Carina Kautsch |
|
||
| Specialty | Ärztin für Allgemeinmedizin |
|
||
| Address | Pfenninggeldgasse 1B/3, A-1160 Wien |
|
||
| Phone | +43 / 1 / 493 17 73 |
|
||
| Email | info@meineordi.at |
|
||
|
||
### Opening Hours
|
||
| Day | Hours |
|
||
|---|---|
|
||
| Montag | 14:00 – 19:00 |
|
||
| Dienstag | 14:00 – 18:00 |
|
||
| Mittwoch | 07:30 – 11:30 |
|
||
| Donnerstag | 13:00 – 17:00 |
|
||
| Freitag | 09:00 – 12:00 |
|
||
| Sa / So | geschlossen |
|
||
|
||
---
|
||
|
||
## Infrastructure
|
||
|
||
### 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 — 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 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
|
||
| 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 |
|
||
|
||
### 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 = [
|
||
{
|
||
dates: "30.3. – 3.4.",
|
||
reason: "Karwoche",
|
||
deputy: "Dr. Irene Lachawitz",
|
||
deputyAddr: "1160 Wien, Neulerchenfelderstraße 14/6",
|
||
deputyPhone: "01 / 406 31 04",
|
||
deputyHours: "Mo & Mi 8–12 Uhr · Di & Do 14–18 Uhr · Fr 12–16 Uhr"
|
||
},
|
||
// add more entries here...
|
||
];
|
||
```
|
||
|
||
Empty array → "Keine Schließzeiten" message shown automatically.
|
||
|
||
---
|
||
|
||
## Everyday Update Workflow
|
||
|
||
```
|
||
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
|
||
```
|
||
|
||
Git client used locally: **TortoiseGit** (Windows Explorer integration)
|
||
|
||
---
|
||
|
||
## Open Items / Next Steps
|
||
|
||
- [ ] **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.
|