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/
Logo URL: https://meineordi.at/images/meineordi/logo.png

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

Current Deliverable

File: `index.html`

A single fully self-contained HTML file. No framework, no build step, no CMS.

Sections (top to bottom):

Sticky header with logo + nav links + phone button
Hero — logo image large on right, headline + CTA buttons left, 4 quick-info cards below
Öffnungszeiten — 2-column grid of hour boxes with shadows
Schließzeiten — dynamically rendered from JS array (see below)
Leistungen — 6-item service grid with emoji icons
Aktuelles — 3 notice items (prescriptions, diabetes supplies, sick notes)
Kontakt & Standort — contact rows + embedded OpenStreetMap iframe
Footer with logo

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

Closure/Holiday Management (no CMS needed)

At the very top of <body> is a clearly commented JavaScript array:

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"
  },
  // ... more entries
];

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.

Docker Setup

Files

meineordi-docker.tar.gz
├── Dockerfile
├── index.html
└── docker-compose.yml

Dockerfile

FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html

docker-compose.yml

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

# 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.

Possible Next Steps / Open Items

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.

5.2 KiB Raw Blame History Unescape Escape