e607b1fba0
- fuenfvoracht/STATE.md: Review-Flow entfernt, direkt approved, neuer Changelog - arakava-news/STATE.md: Aktualisiert - redax-wp/STATE.md + src/app.py: Aktualisiert - flugpreisscanner/STATE.md: Aktualisiert - infrastructure/STATE.md: Aktualisiert - fuenfvoracht READMEs und Kurzuebersichten hinzugefuegt Made-with: Cursor
188 lines
No EOL
8.6 KiB
Markdown
188 lines
No EOL
8.6 KiB
Markdown
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Heizungsanlage – Hydraulisches Schaltbild</title>
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{background:#0d1117;color:#e6edf3;font-family:'Segoe UI',system-ui,sans-serif;
|
||
display:flex;flex-direction:column;align-items:center;padding:20px;min-height:100vh}
|
||
h1{font-size:1.45em;margin-bottom:6px}
|
||
.sub{color:#8b949e;margin-bottom:14px;font-size:.92em}
|
||
.ctrls{display:flex;gap:8px;margin-bottom:15px;flex-wrap:wrap;justify-content:center}
|
||
.ctrls button{padding:10px 22px;border:2px solid #30363d;border-radius:8px;
|
||
background:#161b22;color:#c9d1d9;font-size:.95em;cursor:pointer;transition:all .3s}
|
||
.ctrls button:hover{background:#21262d}
|
||
.ctrls button.a-sol{border-color:#ffd33d;background:#2a2000;color:#ffd33d}
|
||
.ctrls button.a-holz{border-color:#f0883e;background:#2a1500;color:#f0883e}
|
||
.ctrls button.a-oel{border-color:#58a6ff;background:#001a33;color:#58a6ff}
|
||
.ctrls button.a-all{border-color:#a371f7;background:#1a0033;color:#a371f7}
|
||
.w{width:100%;max-width:1250px;border:1px solid #21262d;border-radius:12px;
|
||
overflow:hidden;background:#0d1117}
|
||
svg{width:100%;height:auto;display:block}
|
||
.info{margin-top:12px;padding:12px 24px;background:#161b22;border:1px solid #21262d;
|
||
border-radius:8px;text-align:center;font-size:.93em;max-width:780px;line-height:1.6}
|
||
|
||
@keyframes dash{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
|
||
.pf{stroke-dasharray:8 16;animation:dash .7s linear infinite;
|
||
fill:none;stroke-linecap:round;stroke-linejoin:round}
|
||
.fg{opacity:0;transition:opacity .5s}.fg.on{opacity:1}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>🏠 Heizungsanlage – Hydraulisches Schaltbild</h1>
|
||
<p class="sub">Interaktive Energiefluss-Visualisierung · Klicke einen Betriebsmodus</p>
|
||
<div class="ctrls">
|
||
<button id="b-sol" onclick="go('sol')">☀️ Solar</button>
|
||
<button id="b-holz" onclick="go('holz')">🪵 Holzvergaser</button>
|
||
<button id="b-oel" onclick="go('oel')">🛢️ Ölkessel</button>
|
||
<button id="b-all" onclick="go('all')">⚡ Alle Quellen</button>
|
||
</div>
|
||
|
||
<div class="w">
|
||
<svg viewBox="0 0 1200 960" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="gP" x1="0" y1="1" x2="0" y2="0">
|
||
<stop offset="0%" stop-color="#0a1628"/>
|
||
<stop offset="100%" stop-color="#1a0808"/>
|
||
</linearGradient>
|
||
<linearGradient id="gT" x1="0" y1="1" x2="0" y2="0">
|
||
<stop offset="0%" stop-color="#223388" stop-opacity=".18"/>
|
||
<stop offset="100%" stop-color="#882222" stop-opacity=".18"/>
|
||
</linearGradient>
|
||
<filter id="gl">
|
||
<feGaussianBlur stdDeviation="4" result="b"/>
|
||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
<filter id="sh">
|
||
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity=".35"/>
|
||
</filter>
|
||
</defs>
|
||
|
||
<!-- ═══════════ BACKGROUND PIPES ═══════════ -->
|
||
<g stroke="#1c2128" stroke-width="6" fill="none"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- Öl -->
|
||
<path d="M150,140 V195 H350 V250"/>
|
||
<path d="M390,250 V215 H220 V140"/>
|
||
<!-- Holz -->
|
||
<path d="M400,140 V195 H490 V250"/>
|
||
<path d="M530,250 V215 H470 V140"/>
|
||
<!-- Solar -->
|
||
<path d="M930,140 V195 H710 V250"/>
|
||
<path d="M670,250 V215 H1000 V140"/>
|
||
<!-- WW / KW -->
|
||
<path d="M700,490 H860 V375 H920"/>
|
||
<path d="M920,545 H840 V535 H700"/>
|
||
<!-- VL Heizung -->
|
||
<path d="M560,600 V780"/>
|
||
<!-- RL Heizung -->
|
||
<path d="M440,600 V920"/>
|
||
<!-- Verteiler VL -->
|
||
<line x1="240" y1="780" x2="850" y2="780"/>
|
||
<!-- Sammler RL -->
|
||
<line x1="240" y1="920" x2="850" y2="920"/>
|
||
<!-- HK VL-Drops -->
|
||
<line x1="285" y1="780" x2="285" y2="820"/>
|
||
<line x1="455" y1="780" x2="455" y2="820"/>
|
||
<line x1="625" y1="780" x2="625" y2="820"/>
|
||
<line x1="795" y1="780" x2="795" y2="820"/>
|
||
<!-- HK RL-Returns -->
|
||
<line x1="285" y1="875" x2="285" y2="920"/>
|
||
<line x1="455" y1="875" x2="455" y2="920"/>
|
||
<line x1="625" y1="875" x2="625" y2="920"/>
|
||
<line x1="795" y1="875" x2="795" y2="920"/>
|
||
</g>
|
||
|
||
<!-- ═══════════ PUFFERSPEICHER ═══════════ -->
|
||
<rect x="290" y="240" width="530" height="360" rx="12"
|
||
fill="url(#gP)" stroke="#336699" stroke-width="3" filter="url(#sh)"/>
|
||
<rect x="300" y="250" width="510" height="340" rx="8" fill="url(#gT)"/>
|
||
<text x="555" y="282" text-anchor="middle" fill="#336699"
|
||
font-size="17" font-weight="bold" opacity=".55">PUFFERSPEICHER</text>
|
||
<text x="310" y="305" fill="#ff6666" font-size="10" opacity=".4">▲ heiß</text>
|
||
<text x="310" y="585" fill="#6688ff" font-size="10" opacity=".4">▼ kalt</text>
|
||
|
||
<!-- Anschlüsse ⑦–⑪ -->
|
||
<g fill="#336699" font-size="12" opacity=".4">
|
||
<text x="808" y="310">⑦</text>
|
||
<text x="808" y="360">⑧</text>
|
||
<text x="808" y="410">⑨</text>
|
||
<text x="808" y="460">⑩</text>
|
||
<text x="808" y="510">⑪</text>
|
||
</g>
|
||
|
||
<!-- WW-Wärmetauscher (im Puffer) -->
|
||
<rect x="410" y="475" width="290" height="65" rx="6"
|
||
fill="#1a0800" stroke="#dd5500" stroke-width="2"/>
|
||
<text x="555" y="514" text-anchor="middle" fill="#dd5500"
|
||
font-size="12" font-weight="bold">WW-Wärmetauscher</text>
|
||
|
||
<!-- ═══════════ WÄRMEQUELLEN ═══════════ -->
|
||
|
||
<!-- Öl-Kessel -->
|
||
<rect x="70" y="30" width="190" height="110" rx="10"
|
||
fill="#161b22" stroke="#58a6ff" stroke-width="2.5" filter="url(#sh)"/>
|
||
<text x="165" y="72" text-anchor="middle" fill="#58a6ff" font-size="24">🛢️</text>
|
||
<text x="165" y="100" text-anchor="middle" fill="#58a6ff"
|
||
font-size="14" font-weight="bold">Öl-Kessel</text>
|
||
|
||
<!-- Holzvergaser -->
|
||
<rect x="340" y="30" width="190" height="110" rx="10"
|
||
fill="#1a1208" stroke="#f0883e" stroke-width="2.5" filter="url(#sh)"/>
|
||
<text x="435" y="72" text-anchor="middle" fill="#f0883e" font-size="24">🪵</text>
|
||
<text x="435" y="100" text-anchor="middle" fill="#f0883e"
|
||
font-size="13" font-weight="bold">Holzvergaser</text>
|
||
|
||
<!-- Thermo-Solar -->
|
||
<rect x="860" y="30" width="200" height="110" rx="10"
|
||
fill="#1a1800" stroke="#e6a800" stroke-width="2.5" filter="url(#sh)"/>
|
||
<text x="960" y="72" text-anchor="middle" fill="#e6a800" font-size="24">☀️</text>
|
||
<text x="960" y="100" text-anchor="middle" fill="#e6a800"
|
||
font-size="14" font-weight="bold">Thermo-Solar</text>
|
||
|
||
<!-- Highlight-Ringe (wenn aktiv) -->
|
||
<rect id="hl-oel" x="66" y="26" width="198" height="118" rx="12"
|
||
fill="none" stroke="#58a6ff" stroke-width="3" filter="url(#gl)" opacity="0"/>
|
||
<rect id="hl-holz" x="336" y="26" width="198" height="118" rx="12"
|
||
fill="none" stroke="#f0883e" stroke-width="3" filter="url(#gl)" opacity="0"/>
|
||
<rect id="hl-sol" x="856" y="26" width="208" height="118" rx="12"
|
||
fill="none" stroke="#e6a800" stroke-width="3" filter="url(#gl)" opacity="0"/>
|
||
|
||
<!-- ═══════════ WW / KW BOXEN ═══════════ -->
|
||
<rect x="920" y="355" width="165" height="45" rx="8"
|
||
fill="#1a0800" stroke="#dd5500" stroke-width="2"/>
|
||
<text x="1002" y="383" text-anchor="middle" fill="#dd5500"
|
||
font-size="12" font-weight="bold">WW-Ausgang ⑬</text>
|
||
|
||
<rect x="920" y="525" width="165" height="45" rx="8"
|
||
fill="#001a2a" stroke="#33aadd" stroke-width="2"/>
|
||
<text x="1002" y="553" text-anchor="middle" fill="#33aadd"
|
||
font-size="12" font-weight="bold">KW-Eingang</text>
|
||
|
||
<text x="872" y="465" fill="#dd5500" font-size="10" font-weight="bold">⑫ Mischung</text>
|
||
|
||
<!-- ═══════════ MISCHER & PUMPEN ═══════════ -->
|
||
|
||
<!-- Heizkreis-Mischer (VL) -->
|
||
<circle cx="560" cy="660" r="20" fill="#161b22" stroke="#888" stroke-width="2"/>
|
||
<polygon points="545,652 545,668 560,660" fill="#cc2222"/>
|
||
<polygon points="575,652 575,668 560,660" fill="#2255bb"/>
|
||
<text x="590" y="665" fill="#888" font-size="10">Mischer</text>
|
||
|
||
<!-- Heizkreis-Pumpe (RL) -->
|
||
<circle cx="440" cy="660" r="16" fill="#161b22" stroke="#888" stroke-width="2"/>
|
||
<polygon points="432,653 432,667 448,660" fill="#888"/>
|
||
<text x="440" y="693" text-anchor="middle" fill="#888" font-size="10">Pumpe</text>
|
||
|
||
<!-- Solar-Pumpe -->
|
||
<circle cx="930" cy="175" r="14" fill="#1a1800" stroke="#e6a800" stroke-width="2"/>
|
||
<polygon points="923,169 923,181 937,175" fill="#e6a800"/>
|
||
<text x="930" y="202" text-anchor="middle" fill="#a08000" font-size="9">Pumpe</text>
|
||
|
||
<!-- ═══════════ HEIZKREISE HK 1–4 ═══════════ -->
|
||
|
||
<!-- HK-1 -->
|
||
<rect x="230" y="820" width="110" height="55" rx="4"
|
||
fill="#1a1200" stroke="#d29 |