import os
tdir = '/opt/struktur/case-intake/templates'
# index.html
idx = open(tdir + '/index.html', 'w')
idx.write('''<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>Fall erfassen</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,sans-serif;background:#f5f5f5;padding:16px;color:#1a1a1a}
h1{font-size:20px;font-weight:700;margin-bottom:20px;color:#d32f2f}
.card{background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
label{font-size:13px;font-weight:600;color:#555;display:block;margin-bottom:6px}
select,textarea,input[type=text]{width:100%;padding:12px;font-size:16px;border:1.5px solid #ddd;border-radius:8px;background:#fafafa;-webkit-appearance:none}
select:focus,textarea:focus,input:focus{border-color:#d32f2f;outline:none}
textarea{min-height:80px;resize:none}
.prow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.pb{padding:12px;text-align:center;border-radius:8px;border:2px solid #ddd;font-size:13px;font-weight:700;cursor:pointer;background:#fff}
.pb input{display:none}
.p1{border-color:#d32f2f;color:#d32f2f}.p2{border-color:#f57c00;color:#f57c00}.p3{border-color:#388e3c;color:#388e3c}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fb{padding:14px;text-align:center;border-radius:8px;border:2px solid #ddd;font-size:14px;font-weight:700;cursor:pointer;background:#fff}
.fb.ja{color:#388e3c;border-color:#388e3c}
.ua{border:2px dashed #bbb;border-radius:10px;padding:20px;text-align:center;background:#fafafa}
.ua input{display:none}
.sub{width:100%;padding:18px;background:#d32f2f;color:#fff;font-size:18px;font-weight:700;border:none;border-radius:10px;cursor:pointer;margin-top:8px}
details{margin-top:4px}summary{cursor:pointer;font-size:13px;color:#888;padding:8px 0}
.fc{font-size:13px;color:#388e3c;margin-top:6px;min-height:20px}
</style>
</head><body>
<h1>📷 Fall erfassen</h1>
<form method="POST" action="/submit" enctype="multipart/form-data">
<div class="card"><label>Problemtyp *</label>
<select name="problemtyp" required>
<option value="">-- waehlen --</option>
<option value="feuchte">Feuchte / Kondensation</option>
<option value="schimmel">Schimmel (sichtbar)</option>
<option value="schimmel_risiko">Schimmel-Risiko</option>
<option value="schlechte_luft">Schlechte Luft / CO2</option>
<option value="leerstand">Leerstand</option>
<option value="falsches_lueften">Falsches Lueften</option>
<option value="okkupado_risiko">Okkupado-Risiko</option>
<option value="unklare_ursache">Unklar</option>
</select></div>
<div class="card"><label>Falltyp *</label>
<select name="falltyp" required>
<option value="">-- waehlen --</option>
<option value="baustelle">Baustelle / Einbau</option>
<option value="feuchtefall">Feuchtefall</option>
<option value="vorher_nachher">Vorher / Nachher</option>
<option value="whatsapp_anfrage">WhatsApp-Anfrage</option>
<option value="kundenfrage">Kundenfrage</option>
<option value="schimmel_risiko">Schimmel-Risiko</option>
<option value="remotecheck">RemoteCheck</option>
<option value="immobilienpruefung">Immobilienpruefung</option>
</select></div>
<div class="card"><label>Ort / Region</label>
<input type="text" name="ort" placeholder="z.B. Palma Nova, Ferienhaus"></div>
<div class="card"><label>Kurzbeschreibung</label>
<textarea name="beschreibung" placeholder="Was ist das Problem? Max. 300 Zeichen." maxlength="300"></textarea></div>
<div class="card"><label>Prioritaet</label><div class="prow">
<label class="pb p1"><input type="radio" name="prioritaet" value="p1"><span>🔴 Dringend</span></label>
<label class="pb p2"><input type="radio" name="prioritaet" value="p2" checked><span>🟠 Normal</span></label>
<label class="pb p3"><input type="radio" name="prioritaet" value="p3"><span>🟢 Niedrig</span></label>
</div></div>
<div class="card"><label>Fotos / Video</label>
<div class="ua" id="ua" onclick="document.getElementById('fi').click()">
<div style="font-size:40px">📷</div>
<div>Tippen zum Aufnehmen oder Auswaehlen</div>
<input type="file" id="fi" name="fotos" accept="image/*,video/*" multiple capture="environment">
</div>
<div class="fc" id="fc"></div></div>
<div class="card"><label>Veroeffentlichbar?</label><div class="frow">
<label class="fb ja"><input type="radio" name="freigabe" value="ja"> ✓ Ja</label>
<label class="fb"><input type="radio" name="freigabe" value="nein" checked> ✗ Noch nicht</label>
</div></div>
<details><summary>+ Messwerte / WhatsApp-Text</summary>
<div class="card"><label>Messwert vorher</label><input type="text" name="messwert_vorher" placeholder="z.B. 81% rH"></div>
<div class="card"><label>Messwert nachher</label><input type="text" name="messwert_nachher" placeholder="z.B. 54% rH"></div>
<div class="card"><label>WhatsApp-Text</label><textarea name="whatsapp_quelle" placeholder="Kundentext wortwoertlich..." style="min-height:60px"></textarea></div>
</details>
<button type="submit" class="sub">✓ Fall speichern</button>
</form>
<script>
document.getElementById('fi').onchange=function(){
document.getElementById('fc').textContent=this.files.length+' Datei(en) ausgewaehlt';
};
</script>
</body></html>''')
idx.close()
print('index.html OK')
# success.html
s = open('/opt/struktur/case-intake/templates/success.html','w')
s.write('''<!DOCTYPE html>
<html lang="de"><head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Gespeichert</title>
<style>*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,sans-serif;background:#f5f5f5;padding:16px;color:#1a1a1a;text-align:center}
.icon{font-size:64px;margin:40px 0 16px}.cid{font-family:monospace;font-size:28px;font-weight:700;background:#e8f5e9;padding:12px 24px;border-radius:10px;display:inline-block;margin:16px 0;color:#2e7d32;letter-spacing:2px}
.meta{color:#666;font-size:14px;margin:8px 0}
.btn{display:block;width:100%;padding:16px;margin-top:12px;border-radius:10px;font-size:16px;font-weight:700;text-decoration:none;border:none;cursor:pointer}
.r{background:#d32f2f;color:#fff}.g{background:#fff;color:#333;border:2px solid #ddd}</style>
</head><body>
<div class="icon">✓</div>
<h1 style="color:#388e3c">Fall gespeichert!</h1>
<div class="cid">{{ case_id }}</div>
<p class="meta">{{ problemtyp }} • {{ falltyp }}</p>
{% if ort %}<p class="meta">{{ ort }}</p>{% endif %}
<p class="meta">{{ fotos }} Foto(s) • Prio: {{ prio.upper() }}</p>
<a href="/" class="btn r">+ Neuen Fall erfassen</a>
<a href="/cases" class="btn g">Alle Faelle</a>
</body></html>''')
s.close()
print('success.html OK')
# cases.html
c = open('/opt/struktur/case-intake/templates/cases.html','w')
c.write('''<!DOCTYPE html>
<html lang="de"><head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Faelle</title>
<style>*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,sans-serif;background:#f5f5f5;padding:16px;color:#1a1a1a}
.add{display:block;text-align:center;background:#d32f2f;color:#fff;padding:14px;border-radius:10px;text-decoration:none;font-weight:700;margin-bottom:16px}
h1{font-size:20px;margin-bottom:12px}
.case{background:#fff;border-radius:10px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.cid{font-family:monospace;font-weight:700;font-size:16px;color:#d32f2f}
.meta{font-size:13px;color:#666;margin-top:4px}
.p1{color:#c62828}.p2{color:#e65100}.p3{color:#2e7d32}
.ok{color:#388e3c;font-weight:600}.no{color:#aaa}
</style></head><body>
<a href="/" class="add">+ Neuen Fall erfassen</a>
<h1>Faelle (letzte 50)</h1>
{% for c in cases %}
<div class="case">
<div><span class="cid">{{ c["case_id"] }}</span>
<span class="{{ c["prioritaet"] }}"> {{ c["prioritaet"].upper() }}</span>
{% if c["freigabe"] %}<span class="ok"> ✓</span>{% else %}<span class="no"> gesperrt</span>{% endif %}
</div>
<div class="meta">{{ c["problemtyp"] }} • {{ c["falltyp"] }} • {{ c["foto_anzahl"] }} Foto(s)</div>
{% if c["ort"] %}<div class="meta">{{ c["ort"] }}</div>{% endif %}
</div>
{% else %}
<p style="color:#999;text-align:center;padding:40px">Noch keine Faelle.</p>
{% endfor %}
</body></html>''')
c.close()
print('cases.html OK')