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

189
index.html
View File

@@ -415,6 +415,36 @@
footer a { color: #ccc; }
footer a:hover { color: #fff; }
/* ─── Impressum / Datenschutz ──────────────────────────── */
.legal-section h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-weight: 700;
color: var(--red);
margin: 32px 0 10px;
}
.legal-section h3:first-of-type { margin-top: 0; }
.legal-section p, .legal-section li {
font-size: 16px;
color: #444;
line-height: 1.7;
margin-bottom: 8px;
}
.legal-section ul {
padding-left: 20px;
margin-bottom: 12px;
}
.legal-section a { color: var(--red); text-decoration: underline; }
.legal-section .legal-box {
background: #fff;
border-radius: var(--radius);
border-left: 4px solid var(--red);
padding: 20px 24px;
margin-top: 8px;
}
body.large-font .legal-section p,
body.large-font .legal-section li { font-size: 18px; }
/* ─── Font Size Toggle ──────────────────────────────────── */
.font-toggle-wrap {
display: flex;
@@ -759,6 +789,165 @@ const SCHLIESSZEITEN = [
</div>
</section>
<!-- ─── Impressum ────────────────────────────────────────── -->
<section id="impressum">
<div class="section-inner legal-section">
<h2 class="section-title">Impressum</h2>
<p class="section-sub">Angaben gemäß §5 ECG und §25 MedienG</p>
<h3>Diensteanbieter</h3>
<div class="legal-box">
<p>
<strong>Dr. med. Carina Kautsch</strong><br>
Ärztin für Allgemeinmedizin<br>
Pfenninggeldgasse 1B/3<br>
A-1160 Wien<br>
Österreich
</p>
<p>
Telefon: <a href="tel:+4314931773">+43 / 1 / 493 17 73</a><br>
E-Mail: <a href="mailto:info@meineordi.at">info@meineordi.at</a>
</p>
</div>
<h3>Berufsbezeichnung und Berufsrecht</h3>
<p>
Berufsbezeichnung: <strong>Ärztin für Allgemeinmedizin</strong><br>
Verliehen in: Österreich<br>
Berufsrecht: Ärztegesetz 1998 (ÄrzteG 1998) –
<a href="https://www.ris.bka.gv.at" target="_blank" rel="noopener">www.ris.bka.gv.at</a>
</p>
<h3>Aufsichtsbehörde / Kammer</h3>
<p>
Ärztekammer Wien<br>
Weihburggasse 10–12, 1010 Wien<br>
<a href="https://www.aekwien.at" target="_blank" rel="noopener">www.aekwien.at</a>
</p>
<h3>Haftungsausschluss</h3>
<p>
Die Inhalte dieser Website wurden mit größtmöglicher Sorgfalt erstellt. Für die Richtigkeit,
Vollständigkeit und Aktualität der Inhalte wird jedoch keine Gewähr übernommen.
Diese Website enthält keine medizinischen Diagnosen oder Therapieempfehlungen.
Im Krankheitsfall wenden Sie sich bitte an eine Ärztin oder einen Arzt.
</p>
<h3>Urheberrecht</h3>
<p>
Die durch den Seitenbetreiber erstellten Inhalte und Werke auf dieser Website unterliegen
dem österreichischen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und
jede Art der Verwertung außerhalb der Grenzen des Urheberrechts bedürfen der schriftlichen
Zustimmung des jeweiligen Autors bzw. Erstellers.
</p>
</div>
</section>
<!-- ─── Datenschutz ───────────────────────────────────────── -->
<section id="datenschutz" class="alt">
<div class="section-inner legal-section">
<h2 class="section-title">Datenschutzerklärung</h2>
<p class="section-sub">Gemäß DSGVO (EU 2016/679) und DSG 2018</p>
<h3>Verantwortlicher</h3>
<div class="legal-box">
<p>
<strong>Dr. med. Carina Kautsch</strong><br>
Pfenninggeldgasse 1B/3, A-1160 Wien<br>
E-Mail: <a href="mailto:info@meineordi.at">info@meineordi.at</a><br>
Telefon: <a href="tel:+4314931773">+43 / 1 / 493 17 73</a>
</p>
</div>
<h3>Allgemeines zur Datenverarbeitung</h3>
<p>
Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Diese Website erhebt und
verarbeitet personenbezogene Daten nur im technisch notwendigen Umfang und ausschließlich
auf Basis der geltenden Rechtsvorschriften (DSGVO, DSG 2018).
</p>
<h3>Server-Logfiles</h3>
<p>
Beim Aufruf dieser Website werden durch den Webserver automatisch folgende Daten
in sogenannten Server-Logfiles gespeichert:
</p>
<ul>
<li>IP-Adresse des anfragenden Geräts</li>
<li>Datum und Uhrzeit des Zugriffs</li>
<li>Name und URL der abgerufenen Datei</li>
<li>Browsertyp und -version, Betriebssystem</li>
<li>Referrer-URL (zuvor besuchte Seite)</li>
</ul>
<p>
<strong>Rechtsgrundlage:</strong> Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse
an der Sicherheit und dem ordnungsgemäßen Betrieb der Website).<br>
<strong>Speicherdauer:</strong> Die Logfiles werden nach spätestens 30 Tagen gelöscht.
</p>
<h3>Kontaktaufnahme</h3>
<p>
Wenn Sie uns per Telefon oder E-Mail kontaktieren, werden Ihre übermittelten Daten
(Name, E-Mail-Adresse, Inhalt Ihrer Anfrage) zum Zweck der Bearbeitung Ihrer Anfrage
und für den Fall von Anschlussfragen gespeichert.<br>
<strong>Rechtsgrundlage:</strong> Art. 6 Abs. 1 lit. b DSGVO (Vertragsanbahnung bzw.
berechtigtes Interesse). Die Daten werden nach abschließender Bearbeitung gelöscht,
sofern keine gesetzliche Aufbewahrungspflicht besteht.
</p>
<h3>Google Maps</h3>
<p>
Diese Website verwendet Google Maps zur Darstellung einer interaktiven Karte.
Anbieter ist Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland.<br>
Bei Nutzung von Google Maps werden Daten (insbesondere Ihre IP-Adresse) an Google-Server
übertragen, die sich in den USA befinden können. Google ist unter dem EU-US Data Privacy
Framework zertifiziert.<br>
<strong>Rechtsgrundlage:</strong> Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse
an einer benutzerfreundlichen Standortdarstellung).<br>
Weitere Informationen finden Sie in der Datenschutzerklärung von Google:
<a href="https://policies.google.com/privacy" target="_blank" rel="noopener">policies.google.com/privacy</a>
</p>
<h3>Lokaler Speicher (localStorage)</h3>
<p>
Diese Website speichert Ihre Schriftgrößen-Einstellung (normal/groß) im lokalen Speicher
(localStorage) Ihres Browsers. Dabei werden keine personenbezogenen Daten erfasst oder
an Server übertragen. Der Eintrag kann jederzeit über die Browser-Einstellungen gelöscht
werden. Es werden keine Cookies gesetzt.
</p>
<h3>Ihre Rechte</h3>
<p>Sie haben gemäß DSGVO folgende Rechte:</p>
<ul>
<li><strong>Auskunft</strong> (Art. 15 DSGVO) — Recht auf Auskunft über Ihre gespeicherten Daten</li>
<li><strong>Berichtigung</strong> (Art. 16 DSGVO) — Recht auf Korrektur unrichtiger Daten</li>
<li><strong>Löschung</strong> (Art. 17 DSGVO) — Recht auf Löschung Ihrer Daten</li>
<li><strong>Einschränkung</strong> (Art. 18 DSGVO) — Recht auf Einschränkung der Verarbeitung</li>
<li><strong>Widerspruch</strong> (Art. 21 DSGVO) — Recht auf Widerspruch gegen die Verarbeitung</li>
<li><strong>Datenübertragbarkeit</strong> (Art. 20 DSGVO) — Recht auf Erhalt Ihrer Daten in maschinenlesbarem Format</li>
</ul>
<p>
Zur Ausübung Ihrer Rechte wenden Sie sich bitte an:
<a href="mailto:info@meineordi.at">info@meineordi.at</a>
</p>
<h3>Beschwerderecht bei der Aufsichtsbehörde</h3>
<p>
Sie haben das Recht, eine Beschwerde bei der österreichischen Datenschutzbehörde einzureichen:<br>
<strong>Datenschutzbehörde</strong><br>
Barichgasse 40–42, 1030 Wien<br>
Telefon: +43 1 52 152-0<br>
E-Mail: <a href="mailto:dsb@dsb.gv.at">dsb@dsb.gv.at</a><br>
<a href="https://www.dsb.gv.at" target="_blank" rel="noopener">www.dsb.gv.at</a>
</p>
<h3>Aktualität dieser Datenschutzerklärung</h3>
<p>
Diese Datenschutzerklärung ist aktuell gültig und hat den Stand März 2025.
Durch die Weiterentwicklung unserer Website kann eine Anpassung notwendig werden.
</p>
</div>
</section>
<!-- ─── Footer ────────────────────────────────────────────── -->
<footer>
<div class="footer-inner">

191
meineordi-project-summary.md
View File

@@ -4,7 +4,8 @@
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
**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.