mantenimento-app 2.2.6 → 2.2.8

package/app.js

@@ -2800,6 +2800,8 @@ const defaultExpenseItems = [
         sliderBar.style.setProperty("--perm-left", `${p1}%`);
         sliderBar.setAttribute("aria-valuenow", String(p1));
         sliderBar.setAttribute("aria-valuetext", `${p1}% / ${p2}%`);
+        const centerBadge = document.getElementById("permDaysCenter");
+        if (centerBadge) centerBadge.textContent = `${p1}% / ${p2}%`;
       }
 
       // Update days bar below slider.
@@ -4675,24 +4677,42 @@ const defaultExpenseItems = [
           <strong class="sep-cost-value ${cls}">${formatted}</strong>
         </div>`;
       };
+      const statHtml = (label, value, tone) => {
+        const cls = lossClass(value);
+        const formatted = value === null ? "&mdash;" : eur(value);
+        return `<div class="sep-cost-stat ${tone || ""}">
+          <span class="sep-cost-stat-label">${label}</span>
+          <strong class="sep-cost-stat-value ${cls}">${formatted}</strong>
+        </div>`;
+      };
+      const pillHtml = (label, value) => {
+        const cls = lossClass(value);
+        const formatted = value === null ? "&mdash;" : eur(value);
+        return `<div class="sep-cost-pill">
+          <span class="sep-cost-pill-label">${label}</span>
+          <strong class="sep-cost-pill-value ${cls}">${formatted}</strong>
+        </div>`;
+      };
 
       panel.innerHTML = `
         <div class="sep-cost-panel">
-          <h3 class="sep-cost-title">${escapeHtml(tr("sepCostPanelTitle"))}</h3>
-          <div class="sep-cost-section">
+          <h3 class="sep-cost-title"><span class="sep-cost-title-icon">&#128148;</span>${escapeHtml(tr("sepCostPanelTitle"))}</h3>
+          <div class="sep-cost-hero">
+            ${statHtml(tr("sepCostLossMonthly"), m.perditaMensile, "sep-cost-stat--primary")}
+            ${statHtml(tr("sepCostLossAnnually"), m.perditaAnnua, "sep-cost-stat--secondary")}
+          </div>
+          <div class="sep-cost-section sep-cost-section--grid">
             ${rowHtml(tr("sepCostNetTogether"), m.nettoInsiemeCombinato, false)}
             ${rowHtml(tr("sepCostNetSeparated"), m.nettoSeparatoTotale, false)}
-          </div>
-          <div class="sep-cost-divider"></div>
-          <div class="sep-cost-section">
             ${m.separationAdjustmentHousingUtilities > 0
               ? rowHtml(tr("sepCostHousingUtilityAdj"), m.separationAdjustmentHousingUtilities, false)
               : ""}
             ${rowHtml(tr("sepCostDuplication"), m.costoSeparazioneMensile, false)}
-            ${rowHtml(tr("sepCostLossMonthly"), m.perditaMensile, true)}
-            ${rowHtml(tr("sepCostLossAnnually"), m.perditaAnnua, true)}
-            ${rowHtml(msg("sepCostLossSpouse", { spouse: c1NameEsc }), m.perditaSpouse1, false)}
-            ${rowHtml(msg("sepCostLossSpouse", { spouse: c2NameEsc }), m.perditaSpouse2, false)}
+          </div>
+          <div class="sep-cost-divider"></div>
+          <div class="sep-cost-pill-wrap">
+            ${pillHtml(msg("sepCostLossSpouse", { spouse: c1NameEsc }), m.perditaSpouse1)}
+            ${pillHtml(msg("sepCostLossSpouse", { spouse: c2NameEsc }), m.perditaSpouse2)}
           </div>
         </div>
       `;

package/frontend/public/app.js

@@ -2800,6 +2800,8 @@ const defaultExpenseItems = [
         sliderBar.style.setProperty("--perm-left", `${p1}%`);
         sliderBar.setAttribute("aria-valuenow", String(p1));
         sliderBar.setAttribute("aria-valuetext", `${p1}% / ${p2}%`);
+        const centerBadge = document.getElementById("permDaysCenter");
+        if (centerBadge) centerBadge.textContent = `${p1}% / ${p2}%`;
       }
 
       // Update days bar below slider.
@@ -4675,24 +4677,42 @@ const defaultExpenseItems = [
           <strong class="sep-cost-value ${cls}">${formatted}</strong>
         </div>`;
       };
+      const statHtml = (label, value, tone) => {
+        const cls = lossClass(value);
+        const formatted = value === null ? "&mdash;" : eur(value);
+        return `<div class="sep-cost-stat ${tone || ""}">
+          <span class="sep-cost-stat-label">${label}</span>
+          <strong class="sep-cost-stat-value ${cls}">${formatted}</strong>
+        </div>`;
+      };
+      const pillHtml = (label, value) => {
+        const cls = lossClass(value);
+        const formatted = value === null ? "&mdash;" : eur(value);
+        return `<div class="sep-cost-pill">
+          <span class="sep-cost-pill-label">${label}</span>
+          <strong class="sep-cost-pill-value ${cls}">${formatted}</strong>
+        </div>`;
+      };
 
       panel.innerHTML = `
         <div class="sep-cost-panel">
-          <h3 class="sep-cost-title">${escapeHtml(tr("sepCostPanelTitle"))}</h3>
-          <div class="sep-cost-section">
+          <h3 class="sep-cost-title"><span class="sep-cost-title-icon">&#128148;</span>${escapeHtml(tr("sepCostPanelTitle"))}</h3>
+          <div class="sep-cost-hero">
+            ${statHtml(tr("sepCostLossMonthly"), m.perditaMensile, "sep-cost-stat--primary")}
+            ${statHtml(tr("sepCostLossAnnually"), m.perditaAnnua, "sep-cost-stat--secondary")}
+          </div>
+          <div class="sep-cost-section sep-cost-section--grid">
             ${rowHtml(tr("sepCostNetTogether"), m.nettoInsiemeCombinato, false)}
             ${rowHtml(tr("sepCostNetSeparated"), m.nettoSeparatoTotale, false)}
-          </div>
-          <div class="sep-cost-divider"></div>
-          <div class="sep-cost-section">
             ${m.separationAdjustmentHousingUtilities > 0
               ? rowHtml(tr("sepCostHousingUtilityAdj"), m.separationAdjustmentHousingUtilities, false)
               : ""}
             ${rowHtml(tr("sepCostDuplication"), m.costoSeparazioneMensile, false)}
-            ${rowHtml(tr("sepCostLossMonthly"), m.perditaMensile, true)}
-            ${rowHtml(tr("sepCostLossAnnually"), m.perditaAnnua, true)}
-            ${rowHtml(msg("sepCostLossSpouse", { spouse: c1NameEsc }), m.perditaSpouse1, false)}
-            ${rowHtml(msg("sepCostLossSpouse", { spouse: c2NameEsc }), m.perditaSpouse2, false)}
+          </div>
+          <div class="sep-cost-divider"></div>
+          <div class="sep-cost-pill-wrap">
+            ${pillHtml(msg("sepCostLossSpouse", { spouse: c1NameEsc }), m.perditaSpouse1)}
+            ${pillHtml(msg("sepCostLossSpouse", { spouse: c2NameEsc }), m.perditaSpouse2)}
           </div>
         </div>
       `;

package/frontend/public/index.html

@@ -257,6 +257,7 @@
                 <div class="perm-days-bar" id="permSliderBar" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" aria-label="Permanenza figli presso Coniuge 1 (%)">
                   <div class="perm-days-half perm-days-half--left" id="permDaysLeft" style="width:40%"><span class="perm-days-chip">12 gg</span></div>
                   <div class="perm-days-half perm-days-half--right" id="permDaysRight" style="width:60%"><span class="perm-days-chip">18 gg</span></div>
+                  <div class="perm-days-center" id="permDaysCenter">40% / 60%</div>
                   <div class="perm-days-thumb" id="permDaysThumb" aria-hidden="true"></div>
                 </div>
                 <input id="perm2" type="number" min="0" max="100" step="1" value="60" aria-label="Permanenza figli presso Coniuge 2 (%)" />
@@ -599,7 +600,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.2.6"></script>
+    <script src="app.js?v=2.2.8"></script>
 </body>
 </html>
 

package/frontend/public/styles.css

@@ -571,6 +571,11 @@
       text-align: center;
       padding: 8px 6px;
       font-size: 0.9rem;
+      border-radius: 12px;
+      border-color: #bfd8d2;
+      background: linear-gradient(180deg, #ffffff, #f0f8f6);
+      font-weight: 800;
+      color: #114c45;
     }
 
     .perm-days-bar {
@@ -579,10 +584,14 @@
       border-radius: 17px;
       overflow: hidden;
       margin-top: 0;
-      box-shadow: inset 0 1px 3px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.12);
+      box-shadow: inset 0 1px 2px rgba(12, 61, 56, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
       position: relative;
       cursor: ew-resize;
-      border: 1px solid #b8cac5;
+      border: 1px solid #b9d6cf;
+      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);
       user-select: none;
       touch-action: none;
     }
@@ -606,35 +615,59 @@
       align-items: center;
       justify-content: center;
       min-width: 74px;
-      padding: 3px 10px;
+      padding: 2px 10px;
       border-radius: 999px;
-      background: rgba(255, 255, 255, 0.78);
-      border: 1px solid rgba(255, 255, 255, 0.95);
-      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
+      background: rgba(255, 255, 255, 0.86);
+      border: 1px solid #c6ded8;
+      box-shadow: 0 1px 3px rgba(17, 74, 68, 0.12);
       line-height: 1;
+      font-size: 0.78rem;
+      font-weight: 900;
     }
 
     .perm-days-half--left {
-      background: linear-gradient(90deg, #bfe9df, #6ec0b0);
+      background: linear-gradient(90deg, #2b9d8e, #6cb9a9);
+      justify-content: flex-start;
+      padding-left: 8px;
     }
 
     .perm-days-half--right {
-      background: linear-gradient(90deg, #f2d8ab, #deaa59);
+      background: linear-gradient(90deg, #dfb264, #cb8a2d);
       color: #5d3d11;
+      justify-content: flex-end;
+      padding-right: 8px;
+    }
+
+    .perm-days-center {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 0.7rem;
+      font-weight: 900;
+      color: #114c45;
+      background: #ffffff;
+      border: 1px solid #b8d5ce;
+      border-radius: 999px;
+      padding: 1px 7px;
+      white-space: nowrap;
+      pointer-events: none;
+      z-index: 3;
     }
 
     .perm-days-thumb {
       position: absolute;
       top: 50%;
       left: var(--perm-left, 40%);
-      width: 24px;
-      height: 24px;
+      width: 22px;
+      height: 22px;
       border-radius: 50%;
       transform: translate(-50%, -50%);
-      border: 3px solid #ffffff;
-      background: #0f766d;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
+      border: 2px solid #ffffff;
+      background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e8f8f5 42%, #177a6f 100%);
+      box-shadow: 0 3px 9px rgba(13, 70, 64, 0.35);
       pointer-events: none;
+      z-index: 4;
     }
 
     .perm-days-bar:focus-visible {
@@ -1847,19 +1880,78 @@
 
       .sep-cost-panel {
         margin-top: 10px;
-        border-radius: 14px;
+        border-radius: 16px;
         border: 1.5px solid #e2a5a5;
-        background: linear-gradient(145deg, #fff5f3, #ffeceb 52%, #fff6f0);
-        box-shadow: 0 8px 22px rgba(130, 33, 33, 0.12);
-        padding: 12px;
+        background:
+          radial-gradient(120% 180% at 0% -20%, rgba(255, 241, 230, 0.75), transparent 58%),
+          radial-gradient(120% 180% at 100% -20%, rgba(255, 228, 228, 0.72), transparent 56%),
+          linear-gradient(145deg, #fff5f3, #ffeceb 52%, #fff6f0);
+        box-shadow: 0 10px 24px rgba(130, 33, 33, 0.14);
+        padding: 14px;
       }
 
       .sep-cost-title {
-        margin: 0 0 8px;
-        font-size: 0.98rem;
+        margin: 0 0 10px;
+        font-size: 1.01rem;
         font-weight: 900;
         color: #842d2d;
         letter-spacing: 0.2px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .sep-cost-title-icon {
+        width: 24px;
+        height: 24px;
+        border-radius: 999px;
+        background: rgba(140, 32, 32, 0.12);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.85rem;
+      }
+
+      .sep-cost-hero {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+        margin-bottom: 9px;
+      }
+
+      .sep-cost-stat {
+        border-radius: 12px;
+        border: 1px solid rgba(138, 44, 44, 0.16);
+        background: rgba(255,255,255,0.82);
+        padding: 8px 10px;
+        display: grid;
+        gap: 2px;
+        min-width: 0;
+      }
+
+      .sep-cost-stat--primary {
+        background: linear-gradient(130deg, rgba(255, 233, 232, 0.95), rgba(255, 244, 232, 0.92));
+        border-color: rgba(170, 67, 46, 0.35);
+      }
+
+      .sep-cost-stat--secondary {
+        background: linear-gradient(130deg, rgba(255, 245, 240, 0.95), rgba(255, 235, 231, 0.92));
+        border-color: rgba(164, 61, 61, 0.28);
+      }
+
+      .sep-cost-stat-label {
+        font-size: 0.72rem;
+        font-weight: 800;
+        color: #7a3d3d;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+
+      .sep-cost-stat-value {
+        font-size: 1.12rem;
+        font-weight: 900;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
       }
 
       .sep-cost-section {
@@ -1867,6 +1959,10 @@
         gap: 7px;
       }
 
+      .sep-cost-section--grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
       .sep-cost-divider {
         height: 1px;
         margin: 8px 0;
@@ -1893,6 +1989,7 @@
         font-size: 0.82rem;
         color: #6a3939;
         font-weight: 700;
+        min-width: 0;
       }
 
       .sep-cost-value {
@@ -1903,6 +2000,47 @@
         color: #5d2e2e;
       }
 
+      .sep-cost-pill-wrap {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+      }
+
+      .sep-cost-pill {
+        border: 1px solid rgba(134, 40, 40, 0.18);
+        border-radius: 11px;
+        background: rgba(255,255,255,0.82);
+        padding: 8px 10px;
+        display: grid;
+        gap: 2px;
+      }
+
+      .sep-cost-pill-label {
+        font-size: 0.76rem;
+        color: #714343;
+        font-weight: 700;
+        line-height: 1.2;
+      }
+
+      .sep-cost-pill-value {
+        font-size: 1rem;
+        font-weight: 900;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+      }
+
+      @media (max-width: 720px) {
+        .sep-cost-hero,
+        .sep-cost-section--grid,
+        .sep-cost-pill-wrap {
+          grid-template-columns: 1fr;
+        }
+        .sep-cost-stat-value,
+        .sep-cost-pill-value {
+          white-space: normal;
+        }
+      }
+
       .sep-loss-negative {
         color: #9b1f1f;
       }

package/package.json

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