Update templates/index.html

templates/index.html

@@ -16,12 +16,18 @@
         .h-blue { background: var(--mac-blue); }
         .h-red { background: var(--mac-red); }
         
+        .input-group { position: relative; display: inline-block; width: 90%; }
         input { width: 100%; border: 1px solid #d1d1d6; border-radius: 5px; padding: 6px 5px; text-align: center; font-size: 14px; box-sizing: border-box; }
+        .unit-label { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #8e8e93; pointer-events: none; }
         select { border: 1px solid #d1d1d6; border-radius: 5px; padding: 5px; font-size: 14px; }
 
         .btn { width: 100%; padding: 12px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; margin-top: 10px; font-size: 15px; color: white; text-transform: uppercase; }
         .btn-calc { background: var(--mac-green); }
         .btn-exp { background: #5856d6; margin-top: 20px; }
+        .btn-cups { background: var(--mac-blue); }
+        
+        .res-section { margin-bottom: 15px; }
+        .res-section h4 { margin: 0 0 5px 0; text-transform: uppercase; font-size: 12px; color: #8e8e93; }
         .res-box { background: white; padding: 15px; border-radius: 10px; border: 1px solid #d1d1d6; line-height: 1.6; }
         hr { border: 0; border-top: 1px solid #d1d1d6; margin: 15px 0; }
         .msg-ok { color: var(--mac-green); font-weight: bold; text-align: center; margin-top: 10px; }
@@ -43,19 +49,35 @@
                 <table>
                     <tr class="h-red"><th colspan="3">Miscela (Parti)</th></tr>
                     <tr>
-                        <td>Cem:<br><input type="text" name="p_cem" value="{{form.get('p_cem','1')}}"></td>
+                        <td>Cemento:<br><input type="text" name="p_cem" value="{{form.get('p_cem','1')}}"></td>
-                        <td>Sab:<br><input type="text" name="p_sab" value="{{form.get('p_sab','3')}}"></td>
+                        <td>Sabbia:<br><input type="text" name="p_sab" value="{{form.get('p_sab','3')}}"></td>
-                        <td>Ghi:<br><input type="text" name="p_ghi" value="{{form.get('p_ghi','5')}}"></td>
+                        <td>Ghiaia:<br><input type="text" name="p_ghi" value="{{form.get('p_ghi','5')}}"></td>
                     </tr>
                 </table>
 
                 <table>
-                    <tr class="h-red"><th colspan="3">Peso e Costo sacche</th></tr>
+                    <tr class="h-red"><th colspan="3">Peso sacchette (Kg)</th></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>
-                    <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>
+                        <td>Cemento:<br><div class="input-group"><input type="text" name="w_cem" value="{{form.get('w_cem','25')}}"><span class="unit-label">Kg</span></div></td>
+                        <td>Sabbia:<br><div class="input-group"><input type="text" name="w_sab" value="{{form.get('w_sab','25')}}"><span class="unit-label">Kg</span></div></td>
+                        <td>Ghiaia:<br><div class="input-group"><input type="text" name="w_ghi" value="{{form.get('w_ghi','25')}}"><span class="unit-label">Kg</span></div></td>
+                    </tr>
+                </table>
+
+                <table>
+                    <tr class="h-red"><th colspan="3">Costo sacchette (€)</th></tr>
+                    <tr>
+                        <td>Cemento:<br><div class="input-group"><input type="text" name="c_cem" value="{{form.get('c_cem','1')}}"><span class="unit-label">€</span></div></td>
+                        <td>Sabbia:<br><div class="input-group"><input type="text" name="c_sab" value="{{form.get('c_sab','1')}}"><span class="unit-label">€</span></div></td>
+                        <td>Ghiaia:<br><div class="input-group"><input type="text" name="c_ghi" value="{{form.get('c_ghi','1')}}"><span class="unit-label">€</span></div></td>
+                    </tr>
+                </table>
+
+                <table>
+                    <tr class="h-red"><th>Attrezzatura</th></tr>
+                    <tr><td>Volume Betoniera: <div class="input-group" style="width:80px;"><input type="text" name="v_bet" value="{{form.get('v_bet','160')}}"><span class="unit-label">L</span></div></td></tr>
                 </table>
 
-                <input type="hidden" name="v_bet" value="{{form.get('v_bet','160')}}">
                 <button type="submit" class="btn btn-calc">Esegui Calcolo</button>
             </form>
         </div>
@@ -64,11 +86,30 @@
             <h3>Risultati</h3>
             {% if res %}
             <div class="res-box">
-                <b>Volume:</b> {{ res.vol }} m³ | <b>Peso:</b> {{ res.peso }} Kg<br>
+                <div class="res-section">
-                <b>Sacchetti:</b> C:{{res.s_cem}} | S:{{res.s_sab}} | G:{{res.s_ghi}} | <b>Tot:</b> {{res.tot_sacc}}<br>
+                    <b>Volume:</b> {{ res.vol }} m³ | <b>Peso:</b> {{ res.peso }} Kg
-                <b>Acqua:</b> {{res.acqua}} L | <b>Costo: {{res.costo_tot}} €</b>
+                </div>
                 <hr>
-                <b>Carico ({{ res.n_c }} carichi):</b> C:{{res.bc_cem}} | S:{{res.bc_sab}} | G:{{res.bc_ghi}} | Aq:{{res.bc_aq}} L
+                <div class="res-section">
+                    <h4>Acquisti</h4>
+                    Cemento: {{ res.s_cem }} sacchetti<br>
+                    Sabbia: {{ res.s_sab }} sacchetti<br>
+                    Ghiaia: {{ res.s_ghi }} sacchetti<br>
+                    Acqua: {{ res.acqua }} L<br>
+                    <b>Totale materiale:</b> {{ res.tot_sacc }} sacchetti
+                </div>
+                <div class="res-section">
+                    <h4>Costo stimato</h4>
+                    <b>Costo totale: {{ res.costo_tot }} €</b>
+                </div>
+                <hr>
+                <div class="res-section">
+                    <h4>Per ogni carico ({{ res.n_c }} carichi):</h4>
+                    • Cemento: {{ res.bc_cem }} sacchetti<br>
+                    • Sabbia: {{ res.bc_sab }} sacchetti<br>
+                    • Ghiaia: {{ res.bc_ghi }} sacchetti<br>
+                    • Acqua: {{ res.bc_aq }} L
+                </div>
             </div>
 
             <form method="POST" class="no-print">
@@ -79,11 +120,13 @@
                 <input type="hidden" name="res_s_cem" value="{{res.s_cem}}"><input type="hidden" name="res_s_sab" value="{{res.s_sab}}"><input type="hidden" name="res_s_ghi" value="{{res.s_ghi}}">
                 <input type="hidden" name="res_bc_cem" value="{{res.bc_cem}}"><input type="hidden" name="res_bc_sab" value="{{res.bc_sab}}"><input type="hidden" name="res_bc_ghi" value="{{res.bc_ghi}}"><input type="hidden" name="res_bc_aq" value="{{res.bc_aq}}">
                 
-                <button type="submit" name="btn_stampa" class="btn" style="background:var(--mac-blue)">Stampa PDF (CUPS)</button>
+                <button type="submit" name="btn_stampa" class="btn btn-cups">Stampa PDF (CUPS)</button>
                 <button type="submit" formaction="/download" class="btn btn-exp">Esporta TXT</button>
             </form>
             
             {% if msg_stampa %}<div class="msg-ok">{{ msg_stampa }}</div>{% endif %}
+            
+            <button onclick="window.print()" class="btn no-print" style="background:#d1d1d6; color:#1c1c1e;">Stampa Pagina</button>
             {% else %}
             <p style="color:#8e8e93; text-align:center;">Inserisci i dati e premi "Esegui Calcolo".</p>
             {% endif %}