Update templates/index.html
This commit is contained in:
@@ -2,62 +2,57 @@
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Software Cemento {{ rev }}</title>
|
||||
<title>Calcolo Calcestruzzo</title>
|
||||
<style>
|
||||
:root { --mac-bg: #f2f2f7; --mac-blue: #007aff; --mac-red: #ff3b30; --mac-green: #34c759; }
|
||||
body { font-family: -apple-system, system-ui, sans-serif; background: var(--mac-bg); padding: 20px; font-size: 14px; color: #1c1c1e; }
|
||||
.container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; max-width: 1200px; margin: auto; }
|
||||
.panel { background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); border-radius: 12px; padding: 20px; flex: 1; min-width: 320px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
|
||||
table { width: 100%; border-collapse: collapse; margin-bottom: 15px; background: white; border-radius: 8px; overflow: hidden; }
|
||||
th { padding: 10px; font-size: 14px; color: white; text-transform: uppercase; }
|
||||
td { padding: 8px; text-align: center; border: 1px solid #e5e5ea; font-size: 14px; }
|
||||
.h-blue { background: var(--mac-blue); } .h-red { background: var(--mac-red); }
|
||||
input { width: 100%; border: 1px solid #d1d1d6; border-radius: 5px; padding: 6px 5px; text-align: center; box-sizing: border-box; }
|
||||
.btn { width: 100%; padding: 12px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; margin-top: 10px; color: white; text-transform: uppercase; }
|
||||
.btn-calc { background: var(--mac-green); } .btn-exp { background: #5856d6; }
|
||||
.res-box { background: white; padding: 15px; border-radius: 10px; border: 1px solid #d1d1d6; line-height: 1.6; }
|
||||
@media print { .no-print { display: none !important; } }
|
||||
body { font-family: sans-serif; padding: 20px; background: #f0f0f0; }
|
||||
.container { display: flex; gap: 20px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
|
||||
.input-panel { flex: 1; border-right: 1px solid #ccc; padding-right: 20px; }
|
||||
.output-panel { flex: 1; padding-left: 20px; min-height: 400px; white-space: pre-wrap; }
|
||||
table { width: 100%; }
|
||||
td { padding: 5px; }
|
||||
input, select { padding: 5px; width: 100%; box-sizing: border-box; }
|
||||
.btn-container { margin-top: 20px; display: flex; gap: 10px; }
|
||||
button { padding: 15px; cursor: pointer; flex: 1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="panel no-print">
|
||||
<div class="input-panel">
|
||||
<form method="POST">
|
||||
<table>
|
||||
<tr class="h-blue"><th colspan="3">Dimensioni Totali</th></tr>
|
||||
<tr><td>Altezza</td><td><input type="text" name="a" value="{{form.get('a','0')}}"></td><td><select name="ua">{% for u in ['m','cm','mm'] %}<option value="{{u}}" {% if form.get('ua','m')==u %}selected{% endif %}>{{u}}</option>{% endfor %}</select></td></tr>
|
||||
<tr><td>Larghezza</td><td><input type="text" name="l" value="{{form.get('l','0')}}"></td><td><select name="ul">{% for u in ['m','cm','mm'] %}<option value="{{u}}" {% if form.get('ul','m')==u %}selected{% endif %}>{{u}}</option>{% endfor %}</select></td></tr>
|
||||
<tr><td>Profondità</td><td><input type="text" name="p" value="{{form.get('p','0')}}"></td><td><select name="up">{% for u in ['m','cm','mm'] %}<option value="{{u}}" {% if form.get('up','m')==u %}selected{% endif %}>{{u}}</option>{% endfor %}</select></td></tr>
|
||||
<tr><td>Larghezza</td><td><input type="text" name="l" value="{{form.get('l','1')}}"></td><td><select name="ul"><option value="m">m</option></select></td></tr>
|
||||
<tr><td>Profondità</td><td><input type="text" name="p" value="{{form.get('p','20')}}"></td><td><select name="up"><option value="cm">cm</option></select></td></tr>
|
||||
<tr><td>Altezza</td><td><input type="text" name="a" value="{{form.get('a','500')}}"></td><td><select name="ua"><option value="mm">mm</option></select></td></tr>
|
||||
<tr><td colspan="3"><hr></td></tr>
|
||||
<tr><td>Parte Cemento</td><td colspan="2"><input type="text" name="p_cem" value="{{form.get('p_cem','1')}}"></td></tr>
|
||||
<tr><td>Parte Sabbia</td><td colspan="2"><input type="text" name="p_sab" value="{{form.get('p_sab','3')}}"></td></tr>
|
||||
<tr><td>Parte Ghiaia</td><td colspan="2"><input type="text" name="p_ghi" value="{{form.get('p_ghi','5')}}"></td></tr>
|
||||
</table>
|
||||
<table>
|
||||
<tr class="h-red"><th colspan="3">Miscela (Parti) / Peso e Costo</th></tr>
|
||||
<tr><td>Cem: <input type="text" name="p_cem" value="{{form.get('p_cem','1')}}"></td><td>Sab: <input type="text" name="p_sab" value="{{form.get('p_sab','3')}}"></td><td>Ghi: <input type="text" name="p_ghi" value="{{form.get('p_ghi','5')}}"></td></tr>
|
||||
<tr><td>Kg: <input type="text" name="w_cem" value="{{form.get('w_cem','25')}}"></td><td>Kg: <input type="text" name="w_sab" value="{{form.get('w_sab','25')}}"></td><td>Kg: <input type="text" name="w_ghi" value="{{form.get('w_ghi','25')}}"></td></tr>
|
||||
<tr><td>€: <input type="text" name="c_cem" value="{{form.get('c_cem','1')}}"></td><td>€: <input type="text" name="c_sab" value="{{form.get('c_sab','1')}}"></td><td>€: <input type="text" name="c_ghi" value="{{form.get('c_ghi','1')}}"></td></tr>
|
||||
</table>
|
||||
<p>Betoniera (L): <input type="text" name="v_bet" value="{{form.get('v_bet','160')}}" style="width:60px;"></p>
|
||||
<button type="submit" class="btn btn-calc">Esegui Calcolo</button>
|
||||
<button type="submit" style="background:#e1f5fe;">Calcola</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h3>Risultati</h3>
|
||||
<div class="output-panel">
|
||||
<h3>Risultati del Calcolo:</h3>
|
||||
{% if res %}
|
||||
<div class="res-box">
|
||||
<b>Vol:</b> {{ res.vol }} m³ | <b>Peso:</b> {{ res.peso }} Kg<br>
|
||||
<b>Materiali:</b> Cem: {{res.s_cem}} | Sab: {{res.s_sab}} | Ghi: {{res.s_ghi}} sacchetti<br>
|
||||
<b style="color:var(--mac-blue);">Totale: {{ res.costo_tot }} €</b>
|
||||
</div>
|
||||
--- Dettagli Gettata ---
|
||||
Volume totale: {{ res.vol }} m3
|
||||
Peso stimato: {{ res.peso }} kg
|
||||
|
||||
<form action="/download" method="POST" class="no-print">
|
||||
<input type="hidden" name="res_vol" value="{{res.vol}}"><input type="hidden" name="res_costo_t" value="{{res.costo_tot}}">
|
||||
<button type="submit" class="btn btn-exp">Esporta Report TXT</button>
|
||||
<button type="button" onclick="stampaCups()" class="btn" style="background:#ff9500;">Stampa PDF (CUPS)</button>
|
||||
</form>
|
||||
<div id="status" style="text-align:center; font-size:12px; margin-top:5px;"></div>
|
||||
{% else %}
|
||||
<p style="text-align:center; color:#8e8e93;">Inserisci i dati e calcola.</p>
|
||||
--- Totale Materiali ---
|
||||
Cemento: {{ res.s_cem }} sacchetti
|
||||
Sabbia: {{ res.s_sab }} sacchetti
|
||||
Ghiaia: {{ res.s_ghi }} sacchetti
|
||||
|
||||
<div class="btn-container">
|
||||
<form action="/download" method="POST" style="flex:1;">
|
||||
<input type="hidden" name="res_vol" value="{{res.vol}}">
|
||||
<input type="hidden" name="res_tot_s" value="{{res.tot_sacc}}">
|
||||
<button type="submit">Stampa TXT</button>
|
||||
</form>
|
||||
<button type="button" onclick="stampaCups()" style="flex:1; background:#fff3e0;">Stampa PDF (CUPS)</button>
|
||||
</div>
|
||||
<div id="status" style="margin-top:10px; font-weight:bold;"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,10 +60,13 @@
|
||||
<script>
|
||||
function stampaCups() {
|
||||
const s = document.getElementById('status');
|
||||
s.innerText = "Invio...";
|
||||
const fd = new FormData(document.querySelector('form[action="/download"]'));
|
||||
s.innerText = "Invio al NAS...";
|
||||
const fd = new FormData();
|
||||
fd.append('res_vol', '{{res.vol if res else ""}}');
|
||||
fd.append('res_tot_s', '{{res.tot_sacc if res else ""}}');
|
||||
|
||||
fetch('/stampa_pdf', { method: 'POST', body: fd })
|
||||
.then(r => r.text()).then(m => { s.innerText = m; s.style.color = m.includes("OK") ? "green" : "red"; });
|
||||
.then(r => r.text()).then(m => { s.innerText = m; });
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user