mantenimento-app 2.1.4 → 2.1.6

package/app.js

@@ -4140,6 +4140,10 @@ const defaultExpenseItems = [
     function renderSpiegabilita(m) {
       const panel = document.getElementById("spiegPanel");
       if (!panel) return;
+      const c1Name = c1n();
+      const c2Name = c2n();
+      const c1NameEsc = escapeHtml(c1Name);
+      const c2NameEsc = escapeHtml(c2Name);
 
       const peso1Pct = (m.peso1 * 100).toFixed(1);
       const peso2Pct = (m.peso2 * 100).toFixed(1);
@@ -4371,8 +4375,10 @@ const defaultExpenseItems = [
             .join("");
           mainHtml = `
             <span class="result-main-line">${escapeHtml(tr("calcNoTransferSuggested"))}</span>
-            <span class="result-main-sub">${escapeHtml(tr("calcCompBenefitsLabel"))}</span>
-            <ul class="result-benefits-list">${benefitsHtml}</ul>
+            <div class="result-benefits-box">
+              <span class="result-main-sub">${escapeHtml(tr("calcCompBenefitsLabel"))}</span>
+              <ul class="result-benefits-list">${benefitsHtml}</ul>
+            </div>
           `;
         } else if (benefitsInline) {
           mainHtml = `<span class="result-main-line">${escapeHtml(msg("calcNoTransferWithBenefits", { benefits: benefitsInline }))}</span>`;

package/frontend/public/app.js

@@ -4140,6 +4140,10 @@ const defaultExpenseItems = [
     function renderSpiegabilita(m) {
       const panel = document.getElementById("spiegPanel");
       if (!panel) return;
+      const c1Name = c1n();
+      const c2Name = c2n();
+      const c1NameEsc = escapeHtml(c1Name);
+      const c2NameEsc = escapeHtml(c2Name);
 
       const peso1Pct = (m.peso1 * 100).toFixed(1);
       const peso2Pct = (m.peso2 * 100).toFixed(1);
@@ -4371,8 +4375,10 @@ const defaultExpenseItems = [
             .join("");
           mainHtml = `
             <span class="result-main-line">${escapeHtml(tr("calcNoTransferSuggested"))}</span>
-            <span class="result-main-sub">${escapeHtml(tr("calcCompBenefitsLabel"))}</span>
-            <ul class="result-benefits-list">${benefitsHtml}</ul>
+            <div class="result-benefits-box">
+              <span class="result-main-sub">${escapeHtml(tr("calcCompBenefitsLabel"))}</span>
+              <ul class="result-benefits-list">${benefitsHtml}</ul>
+            </div>
           `;
         } else if (benefitsInline) {
           mainHtml = `<span class="result-main-line">${escapeHtml(msg("calcNoTransferWithBenefits", { benefits: benefitsInline }))}</span>`;

package/frontend/public/index.html

@@ -347,7 +347,7 @@
             </div>
           </div>
 
-          <div class="extra-box" id="firstHomeBox">
+          <div class="extra-box extra-box-first-home" id="firstHomeBox">
             <div class="extra-box-title" id="firstHomeBoxTitle">Mutuo prima casa ceduta</div>
             <div class="extra-box-note" id="firstHomeBoxNote">Dichiara se esiste un mutuo sulla prima casa dei coniugi ceduta a uno dei due: il modello considera il trasferimento implicito quando la casa e assegnata al collocatario.</div>
             <div class="extra-grid">
@@ -374,16 +374,13 @@
                 </select>
               </div>
               <div class="field">
-                <label for="primaCasaMutuoPerc1" class="label-row"><span id="lblPrimaCasaMutuoPerc1">Quota mutuo a carico Coniuge 1 (%)</span>
-                  <span class="hint" id="hintPrimaCasaMutuoPerc1" title="Percentuale della rata mutuo pagata da Coniuge 1. La quota di Coniuge 2 e complementare a 100%.">i</span>
-                </label>
                 <div class="mortgage-split-slider" id="primaCasaMutuoSliderWrap">
                   <div class="mortgage-split-side mortgage-split-side-left" id="primaCasaSplitLeft">
                     <div class="mortgage-split-name" id="primaCasaSplitLeftName">Coniuge 1</div>
                     <div class="mortgage-split-amount" id="primaCasaSplitLeftAmount">0 EUR</div>
                   </div>
                   <div class="mortgage-split-range-wrap">
-                    <input id="primaCasaMutuoPerc1" type="range" min="0" max="100" step="1" value="50" />
+                    <input id="primaCasaMutuoPerc1" type="range" min="0" max="100" step="1" value="50" aria-label="Ripartizione quota mutuo" />
                     <div class="mortgage-split-center" id="primaCasaSplitCenter">50% / 50%</div>
                   </div>
                   <div class="mortgage-split-side mortgage-split-side-right" id="primaCasaSplitRight">
@@ -501,7 +498,17 @@
           <p class="note">
             Questo strumento e solo orientativo e non sostituisce una valutazione legale/professionale del caso concreto.
           </p>
-          <div id="spiegPanel" class="spieg-panel"></div>
+          <div id="spiegPanel" class="spieg-panel">
+            <details class="spieg-details" open>
+              <summary class="spieg-title">💡 Perche questo risultato?</summary>
+              <div class="spieg-grid">
+                <div class="spieg-item">
+                  <div class="spieg-item-label">Stato calcolo</div>
+                  <div class="spieg-item-body">Sezione in aggiornamento automatico: modifica i dati per vedere la spiegazione dettagliata del risultato.</div>
+                </div>
+              </div>
+            </details>
+          </div>
         </div>
       </section>
     </div>
@@ -576,6 +583,7 @@
   <script src="supabase.min.js"></script>
   <script src="fabric.min.js"></script>
   <script src="html2pdf.bundle.min.js"></script>
-    <script src="app.js?v=2.1.4"></script>
+    <script src="app.js?v=2.1.6"></script>
 </body>
 </html>
+

package/frontend/public/styles.css

@@ -851,18 +851,22 @@
       color: #184a44;
     }
 
+    .extra-box-first-home .extra-grid {
+      gap: 8px 10px;
+    }
+
     .mortgage-split-slider {
-      margin-top: 6px;
+      margin-top: 2px;
       border: 1px solid #b9d6cf;
-      border-radius: 14px;
+      border-radius: 12px;
       background:
         radial-gradient(120% 160% at 0% 0%, rgba(229, 247, 242, 0.8), transparent 58%),
         radial-gradient(120% 160% at 100% 0%, rgba(255, 241, 214, 0.8), transparent 58%),
         linear-gradient(180deg, #fafdfc, #eef7f5);
-      padding: 10px;
+      padding: 8px;
       display: grid;
       grid-template-columns: minmax(0, 1fr) minmax(180px, 2fr) minmax(0, 1fr);
-      gap: 8px;
+      gap: 6px;
       align-items: center;
       transition: opacity 0.2s ease;
     }
@@ -873,10 +877,10 @@
 
     .mortgage-split-side {
       border: 1px solid #c6ded8;
-      border-radius: 11px;
-      padding: 8px;
+      border-radius: 10px;
+      padding: 7px;
       background: rgba(255, 255, 255, 0.84);
-      min-height: 66px;
+      min-height: 58px;
       display: grid;
       align-content: center;
       gap: 2px;
@@ -892,14 +896,14 @@
     }
 
     .mortgage-split-name {
-      font-size: 0.76rem;
+      font-size: 0.72rem;
       font-weight: 800;
       color: #2a4a46;
       overflow-wrap: anywhere;
     }
 
     .mortgage-split-amount {
-      font-size: 0.95rem;
+      font-size: 0.9rem;
       font-weight: 900;
       color: #124f48;
       letter-spacing: 0.2px;
@@ -907,7 +911,7 @@
 
     .mortgage-split-range-wrap {
       position: relative;
-      padding: 20px 0 10px;
+      padding: 14px 0 6px;
     }
 
     .mortgage-split-range-wrap input[type="range"] {
@@ -945,18 +949,23 @@
 
     .mortgage-split-center {
       position: absolute;
-      top: -2px;
+      top: -1px;
       left: 50%;
       transform: translateX(-50%);
-      font-size: 0.74rem;
+      font-size: 0.7rem;
       font-weight: 900;
       color: #114c45;
       background: #ffffff;
       border: 1px solid #b8d5ce;
       border-radius: 999px;
-      padding: 2px 8px;
+      padding: 1px 7px;
       white-space: nowrap;
     }
+
+    #primaCasaMutuoSplitInfo {
+      margin-top: 3px;
+      font-size: 0.77rem;
+    }
     
     .label-row {
       display: inline-flex;
@@ -2155,7 +2164,16 @@
       border: 1px solid #bfd6d0;
       border-radius: 999px;
       padding: 3px 9px;
-      margin-bottom: 8px;
+      margin-bottom: 0;
+    }
+
+    .result-benefits-box {
+      border: 1px solid #bdd6cf;
+      border-radius: 12px;
+      background: linear-gradient(180deg, rgba(249, 253, 252, 0.92), rgba(241, 249, 246, 0.92));
+      padding: 8px;
+      display: grid;
+      gap: 8px;
     }
 
     .result-benefits-list {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantenimento-app",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "description": "Frontend + backend architecture for the mantenimento calculator",
   "type": "commonjs",
   "main": "backend/calculate-model.js",