This commit is contained in:
2026-03-25 22:03:39 +01:00
parent a0073b4fb1
commit faf4ca10c9
5603 changed files with 1030866 additions and 79 deletions

View File

@@ -0,0 +1,64 @@
# AZA Web MVP (aza-medwork.ch)
## Zweck
Dieser Ordner enthält die minimale öffentliche Website für AZA Medical AI Assistant.
Aktuell umfasst der Web-MVP:
- Landing Page
- Download Page
- Basis-Styling
---
## Dateien
### index.html
Öffentliche Landing Page mit Kurzbeschreibung und Link zur Download-Seite.
### download.html
Download-Seite für die Desktop-App.
Lädt Versionsinformationen dynamisch aus:
`../release/version.json`
Verwendete Felder:
- `version`
- `download_url`
- `release_notes`
### style.css
Minimales Styling für Landing und Download-Seite.
---
## Datenquelle
Die Download-Seite verwendet aktuell:
`release/version.json`
Diese Datei ist die gemeinsame Quelle für:
- Website Download
- Backend `/version`
- Backend `/download`
- spätere Update-Logik
---
## Hosting-Idee
Der Web-MVP für `aza-medwork.ch` kann später statisch ausgeliefert werden, z. B. via:
- Caddy
- Nginx
- einfache Static Hosting Umgebung
---
## MVP-Ziel
Einfacher, stabiler und wartbarer Web-Auftritt ohne Framework-Abhängigkeit.

View File

@@ -0,0 +1,260 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AZA Browser MVP</title>
<style>
:root {
--bg: #f6f7fb;
--card: #ffffff;
--text: #1f2937;
--muted: #6b7280;
--border: #d1d5db;
--accent: #2563eb;
--accent-hover: #1d4ed8;
--danger-bg: #fef2f2;
--danger-text: #991b1b;
--ok-bg: #ecfdf5;
--ok-text: #065f46;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.45;
}
.page {
max-width: 920px;
margin: 0 auto;
padding: 32px 20px 48px;
}
.hero {
margin-bottom: 24px;
}
.hero h1 {
margin: 0 0 8px;
font-size: 32px;
}
.hero p {
margin: 0;
color: var(--muted);
font-size: 16px;
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px;
margin-bottom: 18px;
}
.section-title {
margin: 0 0 14px;
font-size: 18px;
}
.field {
margin-bottom: 16px;
}
.field label {
display: block;
font-weight: 700;
margin-bottom: 8px;
}
.field select,
.field input[type="file"],
.result-box {
width: 100%;
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
font-size: 15px;
background: #fff;
}
.result-box {
min-height: 220px;
white-space: pre-wrap;
}
.actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
button {
border: 0;
border-radius: 10px;
padding: 12px 18px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.primary {
background: var(--accent);
color: #fff;
}
.primary:hover {
background: var(--accent-hover);
}
.secondary {
background: #eef2ff;
color: #1e3a8a;
}
.status {
border-radius: 10px;
padding: 12px 14px;
font-size: 14px;
margin-bottom: 16px;
display: none;
}
.status.error {
display: block;
background: var(--danger-bg);
color: var(--danger-text);
}
.status.success {
display: block;
background: var(--ok-bg);
color: var(--ok-text);
}
.footer-links {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin-top: 8px;
}
.footer-links a {
color: var(--accent);
text-decoration: none;
font-weight: 700;
}
.hint {
color: var(--muted);
font-size: 14px;
margin-top: 8px;
}
</style>
</head>
<body>
<main class="page">
<section class="hero">
<h1>AZA</h1>
<p>Browser-MVP für medizinische Transkription.</p>
</section>
<section class="card">
<h2 class="section-title">Eingabe</h2>
<div class="field">
<label for="specialty">Fachrichtung</label>
<select id="specialty" name="specialty">
<option value="">Bitte wählen</option>
<option value="allgemeinmedizin">Allgemeinmedizin</option>
<option value="innere-medizin">Innere Medizin</option>
<option value="dermatologie">Dermatologie</option>
<option value="kardiologie">Kardiologie</option>
<option value="orthopaedie">Orthopädie</option>
<option value="psychiatrie">Psychiatrie</option>
<option value="radiologie">Radiologie</option>
<option value="chirurgie">Chirurgie</option>
</select>
</div>
<div class="field">
<label for="audioFile">Audio-Datei</label>
<input id="audioFile" name="audioFile" type="file" accept=".m4a,.wav,.mp3,audio/*" />
<div class="hint">MVP-Web-Shell: Dateiauswahl ist vorbereitet, Backend-Verdrahtung folgt im nächsten Slice.</div>
</div>
<div id="statusBox" class="status success">Bereit für Upload.</div>
<div class="actions">
<button id="uploadButton" class="primary" type="button">Upload starten</button>
</div>
</section>
<section class="card">
<h2 class="section-title">Ergebnis</h2>
<div id="resultBox" class="result-box">Hier erscheint das Transkript.</div>
<div class="actions" style="margin-top: 14px;">
<button id="copyButton" class="secondary" type="button">Transkript kopieren</button>
</div>
</section>
<section class="card">
<h2 class="section-title">Support & Rechtliches</h2>
<div class="footer-links">
<a href="/support">Support</a>
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
</div>
</section>
</main>
<script>
(function () {
const statusBox = document.getElementById("statusBox");
const resultBox = document.getElementById("resultBox");
const copyButton = document.getElementById("copyButton");
const uploadButton = document.getElementById("uploadButton");
const specialty = document.getElementById("specialty");
const audioFile = document.getElementById("audioFile");
function setStatus(message, kind) {
statusBox.textContent = message;
statusBox.className = "status " + kind;
}
uploadButton.addEventListener("click", function () {
if (!specialty.value) {
setStatus("Bitte zuerst eine Fachrichtung wählen.", "error");
return;
}
if (!audioFile.files || audioFile.files.length === 0) {
setStatus("Bitte zuerst eine Audio-Datei auswählen.", "error");
return;
}
setStatus("Upload-Flow ist als nächster Slice vorgesehen. Diese Seite ist die erste MVP-Web-Shell.", "success");
resultBox.textContent =
"Ausgewählte Fachrichtung: " + specialty.value + "\n" +
"Ausgewählte Datei: " + audioFile.files[0].name + "\n\n" +
"Backend-Anbindung an /v1/transcribe folgt im nächsten Patch.";
});
copyButton.addEventListener("click", async function () {
try {
await navigator.clipboard.writeText(resultBox.textContent);
setStatus("Transkripttext wurde in die Zwischenablage kopiert.", "success");
} catch (error) {
setStatus("Kopieren war nicht möglich.", "error");
}
});
})();
</script>
</body>
</html>

View File

@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AZA Desktop Download</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
background: #F7F8FA; color: #1a1a2e; line-height: 1.6; }
.header { background: #fff; border-bottom: 1px solid #E5E7EB; padding: 20px 0; }
.header-inner { max-width: 720px; margin: 0 auto; padding: 0 24px;
display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 22px; font-weight: 700; color: #0078D7; letter-spacing: -0.5px; }
.logo span { color: #1a1a2e; font-weight: 400; }
.header a { color: #555; text-decoration: none; font-size: 14px; }
.header a:hover { color: #0078D7; }
.wrap { max-width: 720px; margin: 48px auto; padding: 0 24px; }
.card { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.06);
padding: 40px 36px; }
h1 { font-size: 24px; margin-bottom: 8px; }
.version-info { font-size: 15px; color: #555; margin-bottom: 24px; }
.dl-btn { display: inline-block; padding: 14px 36px; background: #0078D7; color: #fff;
text-decoration: none; border-radius: 8px; font-size: 16px; font-weight: 600;
transition: background .2s; }
.dl-btn:hover { background: #005fa3; }
.dl-btn.disabled { background: #ccc; cursor: default; pointer-events: none; }
.notes { margin-top: 28px; padding: 16px 20px; background: #F8F9FA;
border-radius: 8px; font-size: 13px; color: #555; }
.notes h3 { font-size: 14px; margin-bottom: 8px; color: #1a1a2e; }
.notes ul { list-style: disc; padding-left: 18px; }
.notes li { margin-bottom: 4px; }
.steps { margin-top: 32px; }
.steps h2 { font-size: 18px; margin-bottom: 16px; }
.steps ol { padding-left: 20px; }
.steps li { margin-bottom: 10px; font-size: 14px; }
.reqs { margin-top: 28px; }
.reqs h3 { font-size: 16px; margin-bottom: 8px; }
.reqs ul { list-style: disc; padding-left: 20px; font-size: 14px; color: #555; }
.reqs li { margin-bottom: 4px; }
.footer { max-width: 720px; margin: 32px auto; padding: 0 24px;
font-size: 12px; color: #999; }
.footer a { color: #0078D7; text-decoration: none; }
</style>
</head>
<body>
<div class="header">
<div class="header-inner">
<div class="logo">AZA <span>Download</span></div>
<a href="index.html">&larr; Zur Startseite</a>
</div>
</div>
<div class="wrap">
<div class="card">
<h1>AZA Desktop für Windows</h1>
<p class="version-info" id="version-text">Version wird geladen …</p>
<div style="text-align:center; margin: 24px 0;">
<a id="download-button" class="dl-btn disabled" href="#">
Download wird vorbereitet …
</a>
</div>
<div class="notes" id="release-notes-box" style="display:none;">
<h3>Neuerungen in dieser Version</h3>
<ul id="release-notes"></ul>
</div>
<div class="steps">
<h2>Installation</h2>
<ol>
<li><strong>Installer starten</strong> Doppelklick auf die heruntergeladene
<code>aza_desktop_setup.exe</code>. Falls Windows SmartScreen warnt:
«Weitere Informationen» → «Trotzdem ausführen».</li>
<li><strong>OpenAI-Schlüssel einrichten</strong> Beim ersten Start führt
ein Assistent durch die Einrichtung.</li>
<li><strong>Modul wählen</strong> Im Startbildschirm das gewünschte Modul
auswählen und loslegen.</li>
</ol>
</div>
<div class="reqs">
<h3>Systemanforderungen</h3>
<ul>
<li>Windows 10 oder neuer (64-Bit)</li>
<li>Internetverbindung</li>
<li>Mikrofon für Diktat- und Audiofunktionen</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<p>&copy; 2026 AZA Medical AI Assistant
<a href="mailto:support@aza-medwork.ch">support@aza-medwork.ch</a></p>
</div>
<script>
(async function () {
const versionText = document.getElementById('version-text');
const downloadBtn = document.getElementById('download-button');
try {
const res = await fetch('../release/version.json', { cache: 'no-store' });
if (!res.ok) throw new Error('version.json nicht erreichbar');
const data = await res.json();
const version = data.version || 'unbekannt';
const url = data.download_url || '';
const notes = data.release_notes || [];
versionText.textContent = 'Aktuelle Version: ' + version +
(data.release_date ? ' (' + data.release_date + ')' : '');
if (url && url !== '#') {
downloadBtn.href = url;
downloadBtn.textContent = 'Download v' + version;
downloadBtn.classList.remove('disabled');
} else {
downloadBtn.textContent = 'Download in Kürze verfügbar';
}
if (notes && notes.length) {
const list = document.getElementById('release-notes');
notes.forEach(function (n) {
const li = document.createElement('li');
li.textContent = n;
list.appendChild(li);
});
document.getElementById('release-notes-box').style.display = '';
}
} catch (e) {
versionText.textContent = 'Version derzeit nicht verfügbar';
downloadBtn.textContent = 'Download in Kürze verfügbar';
}
})();
</script>
</body>
</html>

View File

@@ -0,0 +1,219 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AZA Medizinischer KI-Arbeitsplatz</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
background: #F7F8FA; color: #1a1a2e; line-height: 1.6; }
/* ── Header ────────────────────────────────────────────── */
.header { background: #fff; border-bottom: 1px solid #E5E7EB; padding: 20px 0; }
.header-inner { max-width: 960px; margin: 0 auto; padding: 0 24px;
display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 22px; font-weight: 700; color: #0078D7; letter-spacing: -0.5px; }
.logo span { color: #1a1a2e; font-weight: 400; }
.header-links a { color: #555; text-decoration: none; font-size: 14px; margin-left: 24px; }
.header-links a:hover { color: #0078D7; }
/* ── Hero ──────────────────────────────────────────────── */
.hero { max-width: 960px; margin: 0 auto; padding: 72px 24px 56px; text-align: center; }
.hero h1 { font-size: 36px; font-weight: 700; margin-bottom: 16px; line-height: 1.2; }
.hero p { font-size: 18px; color: #555; max-width: 600px; margin: 0 auto 32px; }
.hero .cta { display: inline-block; padding: 14px 36px; background: #0078D7; color: #fff;
text-decoration: none; border-radius: 8px; font-size: 16px; font-weight: 600;
transition: background .2s; }
.hero .cta:hover { background: #005fa3; }
/* ── Features ──────────────────────────────────────────── */
.features { max-width: 960px; margin: 0 auto; padding: 0 24px 56px; }
.features h2 { text-align: center; font-size: 24px; margin-bottom: 32px; }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.feat-card { background: #fff; border-radius: 10px; padding: 28px 24px;
box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.feat-card h3 { font-size: 16px; margin-bottom: 8px; color: #0078D7; }
.feat-card p { font-size: 14px; color: #555; }
/* ── Pricing ───────────────────────────────────────────── */
.pricing { background: #fff; padding: 56px 24px; }
.pricing-inner { max-width: 960px; margin: 0 auto; }
.pricing h2 { text-align: center; font-size: 24px; margin-bottom: 8px; }
.pricing .sub { text-align: center; font-size: 15px; color: #555; margin-bottom: 36px; }
.price-cards { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.price-card { flex: 0 1 320px; border: 1px solid #E5E7EB; border-radius: 12px;
padding: 36px 28px; text-align: center; position: relative; }
.price-card.featured { border-color: #0078D7; box-shadow: 0 4px 16px rgba(0,120,215,.12); }
.price-card .badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: #0078D7; color: #fff; font-size: 12px; font-weight: 600;
padding: 4px 16px; border-radius: 20px; }
.price-card h3 { font-size: 20px; margin-bottom: 4px; }
.price-card .price { font-size: 36px; font-weight: 700; color: #0078D7; margin: 12px 0 4px; }
.price-card .price span { font-size: 16px; font-weight: 400; color: #888; }
.price-card .includes { list-style: none; text-align: left; margin: 20px 0 24px; }
.price-card .includes li { font-size: 14px; padding: 6px 0; color: #444;
padding-left: 22px; position: relative; }
.price-card .includes li::before { content: "✓"; position: absolute; left: 0;
color: #00B894; font-weight: 700; }
.price-card .buy-btn { display: inline-block; width: 100%; padding: 12px; background: #0078D7;
color: #fff; border: none; border-radius: 8px; font-size: 15px;
font-weight: 600; cursor: pointer; transition: background .2s;
text-decoration: none; }
.price-card .buy-btn:hover { background: #005fa3; }
.price-card .buy-btn.outline { background: transparent; border: 2px solid #0078D7;
color: #0078D7; }
.price-card .buy-btn.outline:hover { background: #E8F4FD; }
/* ── Requirements ──────────────────────────────────────── */
.reqs { max-width: 960px; margin: 0 auto; padding: 48px 24px; }
.reqs h2 { font-size: 20px; margin-bottom: 16px; }
.reqs ul { list-style: disc; padding-left: 20px; font-size: 14px; color: #555; }
.reqs li { margin-bottom: 6px; }
/* ── Footer ────────────────────────────────────────────── */
.footer { max-width: 960px; margin: 0 auto; padding: 32px 24px;
border-top: 1px solid #E5E7EB; font-size: 13px; color: #999;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.footer a { color: #0078D7; text-decoration: none; }
</style>
</head>
<body>
<!-- Header -->
<div class="header">
<div class="header-inner">
<div class="logo">AZA <span>Medical AI Assistant</span></div>
<div class="header-links">
<a href="#features">Funktionen</a>
<a href="#pricing">Preise</a>
<a href="download.html">Download</a>
</div>
</div>
</div>
<!-- Hero -->
<div class="hero">
<h1>KI-Assistenz für Ihren Praxisalltag</h1>
<p>Diktat, Krankengeschichte, Fachübersetzung und kollegialer Austausch
alles in einer Desktop-Anwendung für Windows.</p>
<a class="cta" href="#pricing">Jetzt starten</a>
</div>
<!-- Features -->
<div class="features" id="features">
<h2>Was AZA für Sie tut</h2>
<div class="feat-grid">
<div class="feat-card">
<h3>KI-Assistent</h3>
<p>Medizinische Fragen stellen, Befunde besprechen und eine KI-gestützte Zweitmeinung einholen.</p>
</div>
<div class="feat-card">
<h3>Krankengeschichte</h3>
<p>Diktat aufnehmen, automatisch transkribieren und strukturierte Krankengeschichten erstellen.</p>
</div>
<div class="feat-card">
<h3>Audio-Notizen</h3>
<p>Sprachaufnahmen für schnelle Gedanken, Befunde und Notizen im Praxisalltag.</p>
</div>
<div class="feat-card">
<h3>Übersetzer</h3>
<p>Medizinische Fachtexte übersetzen und Terminologie nachschlagen in über 20 Sprachen.</p>
</div>
<div class="feat-card">
<h3>Ärzte-Netzwerk</h3>
<p>Kollegialer Austausch mit anderen Ärztinnen und Ärzten über die MedWork-Plattform.</p>
</div>
<div class="feat-card">
<h3>Praxis-Kommunikation</h3>
<p>Interne Nachrichten und Aufgabenverteilung innerhalb Ihres Praxisteams.</p>
</div>
</div>
</div>
<!-- Pricing -->
<div class="pricing" id="pricing">
<div class="pricing-inner">
<h2>Transparent und fair</h2>
<p class="sub">Monatliches Abonnement, jederzeit kündbar. Keine versteckten Kosten.</p>
<div class="price-cards">
<div class="price-card featured">
<div class="badge">Empfohlen</div>
<h3>AZA Praxis</h3>
<div class="price">CHF 89<span> / Monat</span></div>
<ul class="includes">
<li>Alle 6 Module enthalten</li>
<li>Unbegrenztes Diktat und KI-Anfragen</li>
<li>Bis zu 2 Geräte pro Lizenz</li>
<li>Automatische Updates</li>
<li>E-Mail-Support</li>
</ul>
<button class="buy-btn" onclick="startCheckout('aza_basic_monthly')">
Abonnement starten
</button>
</div>
<div class="price-card">
<h3>AZA Team</h3>
<div class="price">CHF 199<span> / Monat</span></div>
<ul class="includes">
<li>Alle Funktionen von AZA Praxis</li>
<li>Bis zu 3 Benutzer</li>
<li>Je 2 Geräte pro Benutzer</li>
<li>Praxis-interner Chat</li>
<li>Prioritäts-Support</li>
</ul>
<button class="buy-btn outline" onclick="startCheckout('aza_team_monthly')">
Team-Abo starten
</button>
</div>
</div>
</div>
</div>
<!-- System Requirements -->
<div class="reqs">
<h2>Systemanforderungen</h2>
<ul>
<li>Windows 10 oder neuer (64-Bit)</li>
<li>Internetverbindung</li>
<li>Mikrofon für Diktat- und Audiofunktionen</li>
<li>OpenAI-API-Schlüssel (Einrichtung wird beim ersten Start geführt)</li>
</ul>
</div>
<!-- Footer -->
<div class="footer">
<div>&copy; 2026 AZA Medical AI Assistant <a href="https://aza-medwork.ch">aza-medwork.ch</a></div>
<div>
<a href="mailto:support@aza-medwork.ch">Support</a>
</div>
</div>
<script>
async function startCheckout(lookupKey) {
const baseUrl = window.location.origin;
try {
const res = await fetch(baseUrl + '/stripe/create_checkout_session', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ lookup_key: lookupKey })
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
alert('Checkout konnte nicht gestartet werden.\n' + (err.detail || 'Bitte versuchen Sie es später.'));
return;
}
const data = await res.json();
if (data.url) {
window.location.href = data.url;
} else {
alert('Checkout-URL nicht erhalten. Bitte kontaktieren Sie support@aza-medwork.ch.');
}
} catch (e) {
alert('Verbindungsfehler. Bitte prüfen Sie Ihre Internetverbindung.');
}
}
</script>
</body>
</html>

View File

@@ -0,0 +1,38 @@
body {
font-family: Arial, sans-serif;
margin: 40px;
background: #f5f5f5;
}
header {
margin-bottom: 40px;
}
h1 {
margin-bottom: 5px;
}
main {
background: white;
padding: 30px;
border-radius: 8px;
}
.button {
display: inline-block;
padding: 10px 18px;
background: #2d6cdf;
color: white;
text-decoration: none;
border-radius: 5px;
}
.button:hover {
background: #1b4fad;
}
footer {
margin-top: 40px;
font-size: 12px;
color: #777;
}