update
This commit is contained in:
64
AzA march 2026 - Kopie (18)/web/README.md
Normal file
64
AzA march 2026 - Kopie (18)/web/README.md
Normal 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.
|
||||
260
AzA march 2026 - Kopie (18)/web/browser_aza_mvp.html
Normal file
260
AzA march 2026 - Kopie (18)/web/browser_aza_mvp.html
Normal 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>
|
||||
147
AzA march 2026 - Kopie (18)/web/download.html
Normal file
147
AzA march 2026 - Kopie (18)/web/download.html
Normal 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">← 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>© 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>
|
||||
2300
AzA march 2026 - Kopie (18)/web/empfang.html
Normal file
2300
AzA march 2026 - Kopie (18)/web/empfang.html
Normal file
File diff suppressed because it is too large
Load Diff
541
AzA march 2026 - Kopie (18)/web/empfang_chat_minimal.html
Normal file
541
AzA march 2026 - Kopie (18)/web/empfang_chat_minimal.html
Normal file
@@ -0,0 +1,541 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>AZA Empfang – Chat</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
html,body{height:100%;font-family:'Segoe UI',system-ui,sans-serif;background:#f0f4f8;color:#1a2a3a;font-size:10pt}
|
||||
body{display:flex;flex-direction:column;min-height:100%}
|
||||
header{background:linear-gradient(135deg,#5B8DB3,#3a6d93);color:#fff;padding:6px 10px;flex-shrink:0;z-index:30;overflow:visible}
|
||||
.hdr-row1{display:flex;flex-wrap:wrap;align-items:center;gap:8px;row-gap:6px}
|
||||
header h1{font-size:.9rem;font-weight:600;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}
|
||||
.hdr-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:flex-end;flex:0 0 auto;flex-shrink:0;margin-left:auto}
|
||||
.hdr-tools .cw-ton-lbl{font-size:.65rem;opacity:.9;white-space:nowrap}
|
||||
.hdr-tools input[type=range]{width:72px;min-width:64px;accent-color:#fff;cursor:pointer}
|
||||
.hdr-tools span.vol-lbl{font-size:.68rem;opacity:.9;min-width:32px;text-align:right}
|
||||
.hdr-tools button{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:4px;padding:3px 8px;font-size:.72rem;cursor:pointer;font-family:inherit;line-height:1.2}
|
||||
.hdr-tools button:hover{background:rgba(255,255,255,.25)}
|
||||
.hdr-tools button.on{background:rgba(255,255,255,.35);border-color:rgba(255,255,255,.55)}
|
||||
.hdr-tools button.muted{opacity:.65}
|
||||
#cw-settings{background:#fff;border-bottom:1px solid #dde8f0;padding:10px 12px;font-size:.82rem;box-shadow:0 2px 8px rgba(0,0,0,.06);flex-shrink:0}
|
||||
#cw-settings.hidden{display:none!important}
|
||||
#cw-settings label{display:block;margin-bottom:4px;color:#3a5a7a;font-weight:600}
|
||||
#cw-settings select{width:100%;max-width:320px;padding:6px;border:1px solid #d0dce8;border-radius:6px;font-family:inherit;font-size:.85rem;margin-bottom:8px}
|
||||
#cw-settings .set-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
|
||||
#main-col{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
|
||||
#pending-strip{display:none;flex-shrink:0;padding:8px 10px;background:#e8f4fc;border-bottom:1px solid #c8dce8;gap:8px;flex-wrap:wrap;align-items:flex-start}
|
||||
#pending-strip.has-items{display:flex}
|
||||
.pend-item{position:relative;border:1px solid #b8cce0;border-radius:8px;overflow:hidden;background:#fff}
|
||||
.pend-item img{display:block;width:72px;height:72px;object-fit:cover}
|
||||
.pend-item .rm{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;border-radius:50%;background:#c0392b;color:#fff;font-size:12px;line-height:1;cursor:pointer;padding:0}
|
||||
#log{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
|
||||
.msg{max-width:92%;padding:8px 12px;border-radius:10px;font-size:.88rem;line-height:1.45;word-wrap:break-word}
|
||||
.msg.me{align-self:flex-end;background:#d4e8f4;border:1px solid #a8cce0}
|
||||
.msg.them{align-self:flex-start;background:#fff;border:1px solid #e0e4e8;box-shadow:0 1px 2px rgba(0,0,0,.06)}
|
||||
.msg .meta{font-size:.68rem;color:#8a9aaa;margin-bottom:4px}
|
||||
.msg img{max-width:100%;max-height:240px;border-radius:6px;margin-top:6px;display:block}
|
||||
.drop-hint{font-size:.72rem;color:#6a8a9a;text-align:center;padding:6px;background:#e8f0f8;border-top:1px dashed #c8d8e8;flex-shrink:0}
|
||||
.drop-hint.drag{background:#d4e8f4}
|
||||
#bar{border-top:1px solid #dde8f0;background:#fff;padding:8px;flex-shrink:0}
|
||||
#bar textarea{width:100%;border:1px solid #d0dce8;border-radius:8px;padding:8px;font-family:inherit;font-size:.9rem;resize:none;min-height:44px;max-height:140px}
|
||||
#bar .row{display:flex;gap:8px;margin-top:8px;align-items:center}
|
||||
#bar button{background:#5B8DB3;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-weight:600;cursor:pointer;font-family:inherit;font-size:.85rem}
|
||||
#bar button:disabled{opacity:.5;cursor:not-allowed}
|
||||
#att-preview{font-size:.72rem;color:#5B8DB3;min-height:1.2em}
|
||||
#gate{position:fixed;inset:0;background:#f0f4f8;display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
|
||||
#gate .box{background:#fff;padding:24px;border-radius:12px;max-width:360px;box-shadow:0 4px 24px rgba(0,0,0,.1);text-align:center}
|
||||
#gate a{color:#5B8DB3;font-weight:600}
|
||||
.hidden{display:none!important}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="gate" class="hidden">
|
||||
<div class="box">
|
||||
<p id="gate-msg">Bitte zuerst im Empfang anmelden.</p>
|
||||
<p style="margin-top:12px"><a id="gate-link" href="#">Empfang öffnen</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<header>
|
||||
<div class="hdr-row1">
|
||||
<h1 id="hdr-title">Chat</h1>
|
||||
<div class="hdr-tools" title="Ton (Benachrichtigungen)">
|
||||
<span class="cw-ton-lbl" aria-hidden="true">Ton</span>
|
||||
<input type="range" id="cw-vol" min="0" max="300" step="5" title="Lautstärke" aria-label="Lautstärke Benachrichtigung">
|
||||
<span class="vol-lbl" id="cw-vol-disp">100%</span>
|
||||
<button type="button" id="cw-sound" onclick="toggleSound()" title="Ton an/aus">🔔</button>
|
||||
<button type="button" id="cw-gear" onclick="toggleSettings()" title="Klangsignal wählen">⚙</button>
|
||||
<button type="button" onclick="reloadThread()" title="Aktualisieren">↻</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div id="cw-settings" class="hidden">
|
||||
<label for="cw-tone">Signal bei neuer Nachricht</label>
|
||||
<select id="cw-tone" onchange="saveToneChoice()"></select>
|
||||
<div class="set-row">
|
||||
<button type="button" class="btn-test" onclick="testSound()" style="background:#e8f0f8;color:#2a5a8a;border:1px solid #c8d8e8;border-radius:6px;padding:6px 12px;cursor:pointer;font-family:inherit;font-size:.8rem">Klang testen</button>
|
||||
</div>
|
||||
<p style="margin-top:10px;font-size:.75rem;color:#8a9aaa">Einstellungen werden wie im Haupt-Empfang gespeichert (dieser Browser).</p>
|
||||
</div>
|
||||
<div id="main-col">
|
||||
<div id="pending-strip"></div>
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
<div class="drop-hint" id="drop-hint">Bilder hierher ziehen oder in das Textfeld einfügen (Strg+V)</div>
|
||||
<div id="bar">
|
||||
<textarea id="tx" placeholder="Nachricht… (Enter = senden, Umschalt+Enter = Zeile)" rows="2"></textarea>
|
||||
<div id="att-preview"></div>
|
||||
<div class="row">
|
||||
<button type="button" id="btn-send" onclick="doSend()">Senden</button>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var API_BASE = window.location.origin + '/empfang';
|
||||
var MAX_B64 = 2 * 1024 * 1024;
|
||||
var mode = 'general';
|
||||
var peerName = '';
|
||||
var threadId = null;
|
||||
var currentSession = null;
|
||||
var pollTimer = null;
|
||||
var pendingAttach = [];
|
||||
var lastPollSig = '';
|
||||
|
||||
var soundEnabled = localStorage.getItem('empfang_sound') !== 'off';
|
||||
var audioCtx = null;
|
||||
var volume = parseFloat(localStorage.getItem('empfang_volume') || '1');
|
||||
if (isNaN(volume)) volume = 1;
|
||||
var currentToneIdx = parseInt(localStorage.getItem('empfang_tone_idx') || '0', 10);
|
||||
|
||||
var TONE_PRESETS = [
|
||||
{name:'Sanftes Glockenspiel', notes:[{f:523,d:.15},{f:659,d:.15},{f:784,d:.3}], wave:'sine', vol:.12},
|
||||
{name:'Zwei-Ton Harmonisch', notes:[{f:392,d:.2},{f:523,d:.3}], wave:'sine', vol:.12},
|
||||
{name:'Drei-Ton Melodie', notes:[{f:523,d:.12},{f:587,d:.12},{f:659,d:.28}], wave:'sine', vol:.11},
|
||||
{name:'Kristallklar', notes:[{f:1319,d:.5}], wave:'sine', vol:.07},
|
||||
{name:'Warmer Akkord', notes:[{f:262,d:.4}], wave:'triangle', vol:.14},
|
||||
{name:'Aufstieg', notes:[{f:262,d:.09},{f:330,d:.09},{f:392,d:.09},{f:523,d:.22}], wave:'sine', vol:.10},
|
||||
{name:'Sanfte Welle', notes:[{f:440,d:.55}], wave:'sine', vol:.10},
|
||||
{name:'Tropfen', notes:[{f:659,d:.12},{f:587,d:.12},{f:523,d:.28}], wave:'sine', vol:.10},
|
||||
{name:'Morgengruss', notes:[{f:523,d:.14},{f:392,d:.14},{f:523,d:.28}], wave:'sine', vol:.12},
|
||||
{name:'Zephyr', notes:[{f:880,d:.45}], wave:'sine', vol:.06},
|
||||
{name:'Bambus', notes:[{f:330,d:.18},{f:440,d:.28}], wave:'triangle', vol:.12},
|
||||
{name:'Silberglocke', notes:[{f:988,d:.45}], wave:'sine', vol:.08},
|
||||
{name:'Meditation', notes:[{f:262,d:.65}], wave:'sine', vol:.12},
|
||||
{name:'Horizont', notes:[{f:587,d:.18},{f:880,d:.32}], wave:'sine', vol:.10},
|
||||
{name:'Stille Post', notes:[{f:784,d:.4}], wave:'sine', vol:.08},
|
||||
];
|
||||
|
||||
function parseQs() {
|
||||
var p = new URLSearchParams(window.location.search);
|
||||
mode = (p.get('mode') || 'general').toLowerCase() === 'dm' ? 'dm' : 'general';
|
||||
try {
|
||||
peerName = decodeURIComponent((p.get('peer') || '').trim());
|
||||
} catch (e) {
|
||||
peerName = (p.get('peer') || '').trim();
|
||||
}
|
||||
if (mode === 'dm' && !peerName) mode = 'general';
|
||||
}
|
||||
|
||||
async function checkAuth() {
|
||||
try {
|
||||
var r = await fetch(API_BASE + '/auth/me', { credentials: 'include' });
|
||||
if (r.status === 401) return null;
|
||||
var d = await r.json();
|
||||
if (d.authenticated) return d;
|
||||
} catch (e) {}
|
||||
return null;
|
||||
}
|
||||
|
||||
function showGate(msg) {
|
||||
document.getElementById('gate').classList.remove('hidden');
|
||||
document.getElementById('gate-msg').textContent = msg;
|
||||
var base = window.location.origin + '/empfang/';
|
||||
document.getElementById('gate-link').href = base;
|
||||
document.getElementById('gate-link').onclick = function(e) {
|
||||
e.preventDefault();
|
||||
window.open(base, '_blank');
|
||||
};
|
||||
}
|
||||
|
||||
function setTitle() {
|
||||
var t = document.getElementById('hdr-title');
|
||||
if (mode === 'dm' && peerName) t.textContent = 'Chat mit ' + peerName;
|
||||
else t.textContent = 'Neuer Chat – Allgemein';
|
||||
}
|
||||
|
||||
function mimeForAttachment(name, fallbackMime) {
|
||||
var fm = (fallbackMime || '').toLowerCase();
|
||||
if (fm.indexOf('image/') === 0) return fm;
|
||||
var n = (name || '').toLowerCase();
|
||||
if (n.endsWith('.png')) return 'image/png';
|
||||
if (n.endsWith('.gif')) return 'image/gif';
|
||||
if (n.endsWith('.webp')) return 'image/webp';
|
||||
if (n.endsWith('.bmp')) return 'image/bmp';
|
||||
if (n.endsWith('.jpg') || n.endsWith('.jpeg')) return 'image/jpeg';
|
||||
return 'image/png';
|
||||
}
|
||||
|
||||
function fileToAttach(file) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
if (file.size > MAX_B64) {
|
||||
reject(new Error('Datei zu groß (max. ca. 2 MB)'));
|
||||
return;
|
||||
}
|
||||
var fr = new FileReader();
|
||||
fr.onload = function() {
|
||||
var s = fr.result;
|
||||
var i = s.indexOf(',');
|
||||
resolve({
|
||||
name: file.name || 'bild.png',
|
||||
data: i >= 0 ? s.slice(i + 1) : s,
|
||||
mime: file.type || mimeForAttachment(file.name, '')
|
||||
});
|
||||
};
|
||||
fr.onerror = function() { reject(new Error('Lesefehler')); };
|
||||
fr.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
function renderPendingStrip() {
|
||||
var strip = document.getElementById('pending-strip');
|
||||
strip.innerHTML = '';
|
||||
if (!pendingAttach.length) {
|
||||
strip.classList.remove('has-items');
|
||||
return;
|
||||
}
|
||||
strip.classList.add('has-items');
|
||||
pendingAttach.forEach(function(a, idx) {
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'pend-item';
|
||||
var img = document.createElement('img');
|
||||
img.src = 'data:' + (a.mime || mimeForAttachment(a.name)) + ';base64,' + a.data;
|
||||
img.alt = a.name || '';
|
||||
var rm = document.createElement('button');
|
||||
rm.type = 'button';
|
||||
rm.className = 'rm';
|
||||
rm.innerHTML = '\u00d7';
|
||||
rm.title = 'Entfernen';
|
||||
rm.onclick = function() {
|
||||
pendingAttach.splice(idx, 1);
|
||||
renderPendingStrip();
|
||||
document.getElementById('att-preview').textContent =
|
||||
pendingAttach.length ? (pendingAttach.length + ' Bild(er) werden mitgesendet') : '';
|
||||
};
|
||||
wrap.appendChild(img);
|
||||
wrap.appendChild(rm);
|
||||
strip.appendChild(wrap);
|
||||
});
|
||||
}
|
||||
|
||||
function addFiles(files) {
|
||||
var arr = Array.from(files || []);
|
||||
var work = arr.filter(function(f) { return f.type && f.type.indexOf('image/') === 0; });
|
||||
if (!work.length) return;
|
||||
Promise.all(work.map(function(f) {
|
||||
return fileToAttach(f).then(function(a) { pendingAttach.push(a); });
|
||||
})).then(function() {
|
||||
renderPendingStrip();
|
||||
document.getElementById('att-preview').textContent =
|
||||
pendingAttach.length ? (pendingAttach.length + ' Bild(er) werden mitgesendet') : '';
|
||||
}).catch(function(e) {
|
||||
alert(e.message || String(e));
|
||||
});
|
||||
}
|
||||
|
||||
function setupDropPaste() {
|
||||
var hint = document.getElementById('drop-hint');
|
||||
var tx = document.getElementById('tx');
|
||||
['dragenter','dragover'].forEach(function(ev) {
|
||||
hint.addEventListener(ev, function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
hint.classList.add('drag');
|
||||
});
|
||||
});
|
||||
hint.addEventListener('dragleave', function(e) {
|
||||
hint.classList.remove('drag');
|
||||
});
|
||||
hint.addEventListener('drop', function(e) {
|
||||
e.preventDefault();
|
||||
hint.classList.remove('drag');
|
||||
addFiles(e.dataTransfer && e.dataTransfer.files);
|
||||
});
|
||||
document.body.addEventListener('dragover', function(e) { e.preventDefault(); });
|
||||
document.body.addEventListener('drop', function(e) {
|
||||
if (e.target === hint || hint.contains(e.target)) return;
|
||||
if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length) {
|
||||
e.preventDefault();
|
||||
addFiles(e.dataTransfer.files);
|
||||
}
|
||||
});
|
||||
tx.addEventListener('paste', function(e) {
|
||||
var items = e.clipboardData && e.clipboardData.items;
|
||||
if (!items) return;
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
if (items[i].type && items[i].type.indexOf('image/') === 0) {
|
||||
e.preventDefault();
|
||||
var f = items[i].getAsFile();
|
||||
if (f) addFiles([f]);
|
||||
}
|
||||
}
|
||||
});
|
||||
tx.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
doSend();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function patientLine() {
|
||||
var now = new Date();
|
||||
var pad = function(n) { return n < 10 ? '0' + n : '' + n; };
|
||||
return 'Chat · ' + pad(now.getDate()) + '.' + pad(now.getMonth() + 1) + '. ' +
|
||||
pad(now.getHours()) + ':' + pad(now.getMinutes());
|
||||
}
|
||||
|
||||
async function doSend() {
|
||||
var tx = document.getElementById('tx');
|
||||
var text = (tx.value || '').trim();
|
||||
if (!text && !pendingAttach.length) return;
|
||||
if (!currentSession) return;
|
||||
|
||||
var extras = {};
|
||||
if (threadId) {
|
||||
extras.reply_to = threadId;
|
||||
extras.reply_to_absender = '';
|
||||
}
|
||||
if (mode === 'dm' && peerName) extras.recipient = peerName;
|
||||
if (pendingAttach.length) {
|
||||
extras.attachments = pendingAttach.map(function(a) {
|
||||
return { name: a.name, data: a.data };
|
||||
});
|
||||
}
|
||||
|
||||
var payload = {
|
||||
medikamente: '', therapieplan: '', procedere: '',
|
||||
kommentar: text || (pendingAttach.length ? '\u200b' : ''),
|
||||
patient: mode === 'dm' && peerName ? ('Direkt: ' + peerName) : patientLine(),
|
||||
absender: currentSession.display_name + ' (Empfang)',
|
||||
zeitstempel: new Date().toISOString().slice(0, 19).replace('T', ' '),
|
||||
extras: extras
|
||||
};
|
||||
|
||||
document.getElementById('btn-send').disabled = true;
|
||||
try {
|
||||
var r = await fetch(API_BASE + '/send', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
var d = await r.json().catch(function() { return {}; });
|
||||
if (r.ok && d.success) {
|
||||
threadId = d.thread_id || d.id || threadId;
|
||||
tx.value = '';
|
||||
pendingAttach = [];
|
||||
renderPendingStrip();
|
||||
document.getElementById('att-preview').textContent = '';
|
||||
lastPollSig = '';
|
||||
await loadThread();
|
||||
} else {
|
||||
alert(d.detail || 'Senden fehlgeschlagen');
|
||||
}
|
||||
} catch (e) {
|
||||
alert('Verbindungsfehler');
|
||||
}
|
||||
document.getElementById('btn-send').disabled = false;
|
||||
}
|
||||
|
||||
function appendImagesToEl(parent, att) {
|
||||
if (!att || !att.length) return;
|
||||
att.forEach(function(a) {
|
||||
if (!a || !a.data) return;
|
||||
var mime = mimeForAttachment(a.name, a.mime || '');
|
||||
var img = document.createElement('img');
|
||||
img.src = 'data:' + mime + ';base64,' + a.data;
|
||||
img.alt = a.name || 'Bild';
|
||||
parent.appendChild(img);
|
||||
});
|
||||
}
|
||||
|
||||
function renderOne(m, isMe) {
|
||||
var div = document.createElement('div');
|
||||
div.className = 'msg ' + (isMe ? 'me' : 'them');
|
||||
var meta = document.createElement('div');
|
||||
meta.className = 'meta';
|
||||
meta.textContent = (m.absender || '') + ' · ' + (m.zeitstempel || m.empfangen || '');
|
||||
div.appendChild(meta);
|
||||
if (m.kommentar && m.kommentar.trim() && m.kommentar !== '\u200b') {
|
||||
var t = document.createElement('div');
|
||||
t.textContent = m.kommentar;
|
||||
div.appendChild(t);
|
||||
}
|
||||
var att = m.extras && m.extras.attachments;
|
||||
appendImagesToEl(div, att);
|
||||
return div;
|
||||
}
|
||||
|
||||
function playTone(idx) {
|
||||
if (!soundEnabled) return;
|
||||
var preset = TONE_PRESETS[idx] || TONE_PRESETS[0];
|
||||
var vol = preset.vol * Math.max(0, volume);
|
||||
try {
|
||||
if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
if (audioCtx.state === 'suspended') audioCtx.resume();
|
||||
var t0 = audioCtx.currentTime;
|
||||
var t = t0;
|
||||
preset.notes.forEach(function(note) {
|
||||
var g = audioCtx.createGain();
|
||||
g.connect(audioCtx.destination);
|
||||
g.gain.setValueAtTime(vol, t);
|
||||
g.gain.linearRampToValueAtTime(vol * 0.6, t + note.d * 0.4);
|
||||
g.gain.exponentialRampToValueAtTime(0.001, t + note.d);
|
||||
var o = audioCtx.createOscillator();
|
||||
o.type = preset.wave;
|
||||
o.frequency.setValueAtTime(note.f, t);
|
||||
o.connect(g);
|
||||
o.start(t);
|
||||
o.stop(t + note.d + 0.05);
|
||||
t += note.d;
|
||||
});
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function updateSoundBtn() {
|
||||
var btn = document.getElementById('cw-sound');
|
||||
if (!btn) return;
|
||||
if (soundEnabled) {
|
||||
btn.innerHTML = '🔔';
|
||||
btn.classList.remove('muted');
|
||||
btn.title = 'Ton an (Klick = aus)';
|
||||
} else {
|
||||
btn.innerHTML = '🔕';
|
||||
btn.classList.add('muted');
|
||||
btn.title = 'Ton aus (Klick = an)';
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSound() {
|
||||
soundEnabled = !soundEnabled;
|
||||
localStorage.setItem('empfang_sound', soundEnabled ? 'on' : 'off');
|
||||
updateSoundBtn();
|
||||
if (soundEnabled) playTone(currentToneIdx);
|
||||
}
|
||||
|
||||
function testSound() {
|
||||
var prev = soundEnabled;
|
||||
soundEnabled = true;
|
||||
playTone(currentToneIdx);
|
||||
soundEnabled = prev;
|
||||
}
|
||||
|
||||
function setVolFromSlider() {
|
||||
var el = document.getElementById('cw-vol');
|
||||
if (!el) return;
|
||||
volume = Math.min(3, Math.max(0, parseInt(el.value, 10) / 100));
|
||||
document.getElementById('cw-vol-disp').textContent = Math.round(volume * 100) + '%';
|
||||
try {
|
||||
localStorage.setItem('empfang_volume', String(volume));
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function initVolumeUI() {
|
||||
var el = document.getElementById('cw-vol');
|
||||
if (!el) return;
|
||||
el.value = String(Math.round(volume * 100));
|
||||
document.getElementById('cw-vol-disp').textContent = Math.round(volume * 100) + '%';
|
||||
el.addEventListener('input', setVolFromSlider);
|
||||
}
|
||||
|
||||
function initToneSelect() {
|
||||
var sel = document.getElementById('cw-tone');
|
||||
if (!sel) return;
|
||||
sel.innerHTML = '';
|
||||
TONE_PRESETS.forEach(function(t, i) {
|
||||
var o = document.createElement('option');
|
||||
o.value = String(i);
|
||||
o.textContent = t.name;
|
||||
if (i === currentToneIdx) o.selected = true;
|
||||
sel.appendChild(o);
|
||||
});
|
||||
}
|
||||
|
||||
function saveToneChoice() {
|
||||
var sel = document.getElementById('cw-tone');
|
||||
currentToneIdx = parseInt(sel.value, 10) || 0;
|
||||
localStorage.setItem('empfang_tone_idx', String(currentToneIdx));
|
||||
if (soundEnabled) playTone(currentToneIdx);
|
||||
}
|
||||
|
||||
function toggleSettings() {
|
||||
var p = document.getElementById('cw-settings');
|
||||
p.classList.toggle('hidden');
|
||||
var g = document.getElementById('cw-gear');
|
||||
if (g) g.classList.toggle('on', !p.classList.contains('hidden'));
|
||||
}
|
||||
|
||||
async function loadThread() {
|
||||
if (!threadId || !currentSession) return;
|
||||
try {
|
||||
var r = await fetch(API_BASE + '/messages', { credentials: 'include' });
|
||||
var d = await r.json();
|
||||
var msgs = (d.messages || []).filter(function(m) {
|
||||
return String(m.thread_id || m.id) === String(threadId);
|
||||
});
|
||||
msgs.sort(function(a, b) {
|
||||
return (a.empfangen || '').localeCompare(b.empfangen || '');
|
||||
});
|
||||
|
||||
var sig = msgs.map(function(m) { return m.id; }).join(',');
|
||||
if (lastPollSig && sig !== lastPollSig) {
|
||||
var myName = currentSession.display_name;
|
||||
var oldSet = {};
|
||||
lastPollSig.split(',').forEach(function(id) { if (id) oldSet[id] = true; });
|
||||
var playOnce = false;
|
||||
msgs.forEach(function(m) {
|
||||
if (oldSet[m.id]) return;
|
||||
var isMe = (m.absender || '').indexOf(myName) === 0 ||
|
||||
(m.absender || '').split('(')[0].trim() === myName;
|
||||
if (!isMe) playOnce = true;
|
||||
});
|
||||
if (playOnce) playTone(currentToneIdx);
|
||||
}
|
||||
lastPollSig = sig;
|
||||
|
||||
var log = document.getElementById('log');
|
||||
log.innerHTML = '';
|
||||
var myName = currentSession.display_name;
|
||||
msgs.forEach(function(m) {
|
||||
var isMe = (m.absender || '').indexOf(myName) === 0 ||
|
||||
(m.absender || '').split('(')[0].trim() === myName;
|
||||
log.appendChild(renderOne(m, isMe));
|
||||
});
|
||||
log.scrollTop = log.scrollHeight;
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function reloadThread() {
|
||||
loadThread();
|
||||
}
|
||||
|
||||
async function init() {
|
||||
parseQs();
|
||||
setTitle();
|
||||
initVolumeUI();
|
||||
initToneSelect();
|
||||
updateSoundBtn();
|
||||
|
||||
setupDropPaste();
|
||||
currentSession = await checkAuth();
|
||||
if (!currentSession) {
|
||||
showGate('Melden Sie sich im Empfang an, um zu chatten. Dieses Fenster nutzt dieselbe Anmeldung.');
|
||||
return;
|
||||
}
|
||||
pollTimer = setInterval(loadThread, 5000);
|
||||
}
|
||||
|
||||
init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
219
AzA march 2026 - Kopie (18)/web/index.html
Normal file
219
AzA march 2026 - Kopie (18)/web/index.html
Normal 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>© 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>
|
||||
38
AzA march 2026 - Kopie (18)/web/style.css
Normal file
38
AzA march 2026 - Kopie (18)/web/style.css
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user