mantenimento-app 2.4.4 → 2.4.6

package/app.js

@@ -289,7 +289,7 @@ const defaultExpenseItems = [
         firstHomeAssignedToHint: "Seleziona il coniuge a cui e ceduta la prima casa.",
         firstHomeAssignedToNone: "Nessuna cessione",
         firstHomeAssignedToSpouse: "Casa ceduta a {spouse}",
-        firstHomeSplitLabel: "Quota mutuo a carico {spouse} (%)",
+        firstHomeSplitLabel: "Quota mutuo a carico",
         firstHomeSplitHint: "Percentuale della rata mutuo pagata da {spouse}. La quota dell'altro coniuge e complementare a 100%.",
         firstHomeSplitInfo: "Ripartizione mutuo: {spouse1} {p1}% · {spouse2} {p2}%",
         calcCompBenefitsLabel: "Benefici compensativi gia allocati",
@@ -651,7 +651,7 @@ const defaultExpenseItems = [
         firstHomeAssignedToHint: "Select which spouse receives assignment of the primary home.",
         firstHomeAssignedToNone: "No assignment",
         firstHomeAssignedToSpouse: "Home assigned to {spouse}",
-        firstHomeSplitLabel: "Mortgage share paid by {spouse} (%)",
+        firstHomeSplitLabel: "Mortgage share allocation",
         firstHomeSplitHint: "Percentage of the monthly mortgage payment paid by {spouse}. The other spouse share is the complement to 100%.",
         firstHomeSplitInfo: "Mortgage split: {spouse1} {p1}% · {spouse2} {p2}%",
         calcCompBenefitsLabel: "Compensative benefits already allocated",
@@ -1290,7 +1290,7 @@ const defaultExpenseItems = [
       if (hintPrimaCasaMutuoImporto) hintPrimaCasaMutuoImporto.title = tr("firstHomeMortgageAmountHint");
       if (lblPrimaCasaAssegnataA) lblPrimaCasaAssegnataA.textContent = tr("firstHomeAssignedToLabel");
       if (hintPrimaCasaAssegnataA) hintPrimaCasaAssegnataA.title = tr("firstHomeAssignedToHint");
-      if (lblPrimaCasaMutuoPerc1) lblPrimaCasaMutuoPerc1.textContent = msg("firstHomeSplitLabel", { spouse: c1n() });
+      if (lblPrimaCasaMutuoPerc1) lblPrimaCasaMutuoPerc1.textContent = tr("firstHomeSplitLabel");
       if (hintPrimaCasaMutuoPerc1) hintPrimaCasaMutuoPerc1.title = msg("firstHomeSplitHint", { spouse: c1n() });
       if (lblStraordAnn1) lblStraordAnn1.textContent = msg("extraAnnLabel1", { spouse: c1n(), currency: currentCurrency });
       if (lblStraordAnn2) lblStraordAnn2.textContent = msg("extraAnnLabel2", { spouse: c2n(), currency: currentCurrency });
@@ -3931,7 +3931,7 @@ const defaultExpenseItems = [
       const amount = Math.max(0, num("primaCasaMutuoImporto"));
       const quota1 = amount * (normalizedShare1 / 100);
       const quota2 = amount - quota1;
-      if (splitLabelEl) splitLabelEl.textContent = msg("firstHomeSplitLabel", { spouse: c1n() });
+      if (splitLabelEl) splitLabelEl.textContent = tr("firstHomeSplitLabel");
       if (splitHintEl) splitHintEl.title = msg("firstHomeSplitHint", { spouse: c1n() });
       if (splitInfoEl) {
         splitInfoEl.textContent = msg("firstHomeSplitInfo", {
@@ -6469,6 +6469,19 @@ ${scenarioLab.length ? `
       }
     });
 
+    const firstHomeShiftLeftBtn = document.getElementById("primaCasaMutuoShiftLeft");
+    const firstHomeShiftRightBtn = document.getElementById("primaCasaMutuoShiftRight");
+    const firstHomeShareInput = document.getElementById("primaCasaMutuoPerc1");
+    const shiftFirstHomeShare = (delta) => {
+      if (!firstHomeShareInput || firstHomeShareInput.disabled) return;
+      const next = Math.min(100, Math.max(0, Number(firstHomeShareInput.value || 0) + delta));
+      firstHomeShareInput.value = String(next);
+      updateFirstHomeMortgageUi();
+      renderAll();
+    };
+    if (firstHomeShiftLeftBtn) firstHomeShiftLeftBtn.addEventListener("click", () => shiftFirstHomeShare(-1));
+    if (firstHomeShiftRightBtn) firstHomeShiftRightBtn.addEventListener("click", () => shiftFirstHomeShare(1));
+
     document.getElementById("langSelect").addEventListener("change", (e) => {
       const next = String(e.target.value || "it").toLowerCase();
       currentLang = SUPPORTED_LANGS.includes(next) ? next : "it";

package/frontend/public/app.js

@@ -289,7 +289,7 @@ const defaultExpenseItems = [
         firstHomeAssignedToHint: "Seleziona il coniuge a cui e ceduta la prima casa.",
         firstHomeAssignedToNone: "Nessuna cessione",
         firstHomeAssignedToSpouse: "Casa ceduta a {spouse}",
-        firstHomeSplitLabel: "Quota mutuo a carico {spouse} (%)",
+        firstHomeSplitLabel: "Quota mutuo a carico",
         firstHomeSplitHint: "Percentuale della rata mutuo pagata da {spouse}. La quota dell'altro coniuge e complementare a 100%.",
         firstHomeSplitInfo: "Ripartizione mutuo: {spouse1} {p1}% · {spouse2} {p2}%",
         calcCompBenefitsLabel: "Benefici compensativi gia allocati",
@@ -651,7 +651,7 @@ const defaultExpenseItems = [
         firstHomeAssignedToHint: "Select which spouse receives assignment of the primary home.",
         firstHomeAssignedToNone: "No assignment",
         firstHomeAssignedToSpouse: "Home assigned to {spouse}",
-        firstHomeSplitLabel: "Mortgage share paid by {spouse} (%)",
+        firstHomeSplitLabel: "Mortgage share allocation",
         firstHomeSplitHint: "Percentage of the monthly mortgage payment paid by {spouse}. The other spouse share is the complement to 100%.",
         firstHomeSplitInfo: "Mortgage split: {spouse1} {p1}% · {spouse2} {p2}%",
         calcCompBenefitsLabel: "Compensative benefits already allocated",
@@ -1290,7 +1290,7 @@ const defaultExpenseItems = [
       if (hintPrimaCasaMutuoImporto) hintPrimaCasaMutuoImporto.title = tr("firstHomeMortgageAmountHint");
       if (lblPrimaCasaAssegnataA) lblPrimaCasaAssegnataA.textContent = tr("firstHomeAssignedToLabel");
       if (hintPrimaCasaAssegnataA) hintPrimaCasaAssegnataA.title = tr("firstHomeAssignedToHint");
-      if (lblPrimaCasaMutuoPerc1) lblPrimaCasaMutuoPerc1.textContent = msg("firstHomeSplitLabel", { spouse: c1n() });
+      if (lblPrimaCasaMutuoPerc1) lblPrimaCasaMutuoPerc1.textContent = tr("firstHomeSplitLabel");
       if (hintPrimaCasaMutuoPerc1) hintPrimaCasaMutuoPerc1.title = msg("firstHomeSplitHint", { spouse: c1n() });
       if (lblStraordAnn1) lblStraordAnn1.textContent = msg("extraAnnLabel1", { spouse: c1n(), currency: currentCurrency });
       if (lblStraordAnn2) lblStraordAnn2.textContent = msg("extraAnnLabel2", { spouse: c2n(), currency: currentCurrency });
@@ -3931,7 +3931,7 @@ const defaultExpenseItems = [
       const amount = Math.max(0, num("primaCasaMutuoImporto"));
       const quota1 = amount * (normalizedShare1 / 100);
       const quota2 = amount - quota1;
-      if (splitLabelEl) splitLabelEl.textContent = msg("firstHomeSplitLabel", { spouse: c1n() });
+      if (splitLabelEl) splitLabelEl.textContent = tr("firstHomeSplitLabel");
       if (splitHintEl) splitHintEl.title = msg("firstHomeSplitHint", { spouse: c1n() });
       if (splitInfoEl) {
         splitInfoEl.textContent = msg("firstHomeSplitInfo", {
@@ -6469,6 +6469,19 @@ ${scenarioLab.length ? `
       }
     });
 
+    const firstHomeShiftLeftBtn = document.getElementById("primaCasaMutuoShiftLeft");
+    const firstHomeShiftRightBtn = document.getElementById("primaCasaMutuoShiftRight");
+    const firstHomeShareInput = document.getElementById("primaCasaMutuoPerc1");
+    const shiftFirstHomeShare = (delta) => {
+      if (!firstHomeShareInput || firstHomeShareInput.disabled) return;
+      const next = Math.min(100, Math.max(0, Number(firstHomeShareInput.value || 0) + delta));
+      firstHomeShareInput.value = String(next);
+      updateFirstHomeMortgageUi();
+      renderAll();
+    };
+    if (firstHomeShiftLeftBtn) firstHomeShiftLeftBtn.addEventListener("click", () => shiftFirstHomeShare(-1));
+    if (firstHomeShiftRightBtn) firstHomeShiftRightBtn.addEventListener("click", () => shiftFirstHomeShare(1));
+
     document.getElementById("langSelect").addEventListener("change", (e) => {
       const next = String(e.target.value || "it").toLowerCase();
       currentLang = SUPPORTED_LANGS.includes(next) ? next : "it";

package/frontend/public/index.html

@@ -88,7 +88,7 @@
     ]
   }
   </script>
-    <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="styles.css?v=2.4.6" />
 </head>
 <body>
   <div class="wrap">
@@ -380,8 +380,8 @@
                 </label>
                 <input id="primaCasaMutuoImporto" type="number" min="0" step="50" value="0" />
               </div>
-              <div class="field">
-                <label for="primaCasaMutuoPerc1" class="label-row"><span id="lblPrimaCasaMutuoPerc1">Quota mutuo a carico Coniuge 1 (%)</span>
+              <div class="field first-home-split-field">
+                <label for="primaCasaMutuoPerc1" class="label-row"><span id="lblPrimaCasaMutuoPerc1">Quota mutuo a carico</span>
                   <span class="hint" id="hintPrimaCasaMutuoPerc1" title="Percentuale della rata mutuo pagata da Coniuge 1. La quota dell'altro coniuge e complementare a 100%.">i</span>
                 </label>
                 <div class="mortgage-split-slider" id="primaCasaMutuoSliderWrap">
@@ -390,7 +390,11 @@
                     <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" aria-label="Ripartizione quota mutuo" />
+                    <div class="mortgage-split-range-controls">
+                      <button id="primaCasaMutuoShiftLeft" class="mortgage-split-nudge" type="button" aria-label="Sposta quota verso sinistra" title="Sposta quota verso sinistra">&#9664;</button>
+                      <input id="primaCasaMutuoPerc1" type="range" min="0" max="100" step="1" value="50" aria-label="Ripartizione quota mutuo" />
+                      <button id="primaCasaMutuoShiftRight" class="mortgage-split-nudge" type="button" aria-label="Sposta quota verso destra" title="Sposta quota verso destra">&#9654;</button>
+                    </div>
                     <div class="mortgage-split-center" id="primaCasaSplitCenter">50% / 50%</div>
                   </div>
                   <div class="mortgage-split-side mortgage-split-side-right" id="primaCasaSplitRight">
@@ -626,7 +630,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.4.4"></script>
+    <script src="app.js?v=2.4.6"></script>
 </body>
 </html>
 

package/frontend/public/styles.css

@@ -887,9 +887,26 @@
     .extra-box-first-home {
       position: relative;
       overflow: hidden;
-      background: linear-gradient(135deg, #ffffff 0%, #f0fffe 50%, #f5faff 100%);
-      border: 1px solid rgba(27, 141, 127, 0.15);
-      box-shadow: 0 2px 8px rgba(27, 141, 127, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+      background:
+        linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(242, 252, 250, 0.96) 46%, rgba(246, 251, 255, 0.94)),
+        repeating-linear-gradient(135deg, rgba(27, 141, 127, 0.035) 0 10px, rgba(216, 154, 53, 0.03) 10px 20px);
+      border: 1px solid rgba(27, 141, 127, 0.2);
+      box-shadow: 0 8px 20px rgba(16, 88, 79, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.86);
+      transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
+    }
+
+    .extra-box-first-home:hover {
+      transform: translateY(-2px);
+      border-color: rgba(27, 141, 127, 0.32);
+      box-shadow: 0 14px 28px rgba(16, 88, 79, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
+    }
+
+    .extra-box-first-home::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(115deg, rgba(255, 255, 255, 0.24), transparent 44%, rgba(61, 181, 160, 0.11) 72%, transparent 100%);
+      pointer-events: none;
     }
 
     .extra-box-first-home::after {
@@ -907,19 +924,45 @@
       margin-right: 4px;
     }
 
+    .extra-box-first-home .extra-box-title {
+      font-size: 0.96rem;
+      font-weight: 800;
+      letter-spacing: 0.25px;
+      color: #114942;
+      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+    }
+
+    .extra-box-first-home .extra-box-note {
+      margin-top: 4px;
+      padding-left: 11px;
+      border-left: 3px solid rgba(27, 141, 127, 0.35);
+      color: #2f5853;
+    }
+
     .extra-box-first-home .extra-grid {
       position: relative;
       z-index: 1;
       gap: 8px 10px;
     }
 
+    .extra-box-first-home .first-home-split-field {
+      grid-column: 1 / -1;
+    }
+
     .extra-box-first-home .field {
-      transition: transform 0.2s ease, filter 0.2s ease;
+      border-radius: 12px;
+      padding: 8px 9px 7px;
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(241, 249, 247, 0.58));
+      border: 1px solid rgba(27, 141, 127, 0.12);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+      transition: transform 0.2s ease, filter 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
     }
 
     .extra-box-first-home .field:focus-within {
       transform: translateY(-1px);
       filter: saturate(1.04);
+      border-color: rgba(27, 141, 127, 0.32);
+      box-shadow: 0 8px 16px rgba(22, 104, 93, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.84);
     }
 
     .extra-box-first-home .field input[type="number"],
@@ -929,6 +972,15 @@
       transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
     }
 
+    .extra-box-first-home #primaCasaMutuoEnabled {
+      width: 20px;
+      height: 20px;
+      accent-color: #0e9886;
+      margin-top: 6px;
+      box-shadow: 0 0 0 4px rgba(14, 152, 134, 0.14);
+      border-radius: 6px;
+    }
+
     .extra-box-first-home .field input[type="number"]:focus,
     .extra-box-first-home .field select:focus {
       border-color: rgba(27, 141, 127, 0.4);
@@ -951,7 +1003,7 @@
       grid-template-columns: minmax(0, 1fr) minmax(180px, 2fr) minmax(0, 1fr);
       gap: 10px;
       align-items: center;
-      box-shadow: 0 4px 12px rgba(27, 141, 127, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+      box-shadow: 0 10px 18px rgba(27, 141, 127, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.65);
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
 
@@ -966,7 +1018,7 @@
     }
 
     .mortgage-split-slider:hover {
-      box-shadow: 0 8px 20px rgba(27, 141, 127, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+      box-shadow: 0 14px 28px rgba(27, 141, 127, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.86);
       border-color: rgba(27, 141, 127, 0.3);
     }
 
@@ -1072,6 +1124,44 @@
       --split-left: 50%;
     }
 
+    .mortgage-split-range-controls {
+      display: grid;
+      grid-template-columns: 34px minmax(0, 1fr) 34px;
+      gap: 7px;
+      align-items: center;
+    }
+
+    .mortgage-split-nudge {
+      height: 32px;
+      width: 32px;
+      border-radius: 50%;
+      border: 1.5px solid rgba(27, 141, 127, 0.24);
+      background: linear-gradient(180deg, #ffffff, #edf8f5);
+      color: #11655b;
+      font-size: 13px;
+      font-weight: 900;
+      line-height: 1;
+      cursor: pointer;
+      box-shadow: 0 2px 8px rgba(17, 93, 84, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+    }
+
+    .mortgage-split-nudge:hover {
+      transform: translateY(-1px) scale(1.04);
+      border-color: rgba(27, 141, 127, 0.38);
+      box-shadow: 0 4px 12px rgba(17, 93, 84, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
+    }
+
+    .mortgage-split-nudge:active {
+      transform: translateY(0) scale(0.98);
+    }
+
+    .mortgage-split-slider.is-disabled .mortgage-split-nudge {
+      opacity: 0.6;
+      cursor: not-allowed;
+      transform: none;
+    }
+
     .mortgage-split-range-wrap input[type="range"] {
       -webkit-appearance: none;
       appearance: none;
@@ -1165,8 +1255,17 @@
     }
 
     #primaCasaMutuoSplitInfo {
-      margin-top: 3px;
-      font-size: 0.77rem;
+      margin-top: 7px;
+      font-size: 0.79rem;
+      font-weight: 700;
+      color: #174e47;
+      background: linear-gradient(90deg, rgba(22, 163, 150, 0.12), rgba(216, 154, 53, 0.12));
+      border: 1px solid rgba(22, 163, 150, 0.14);
+      border-radius: 999px;
+      padding: 4px 10px;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
     }
     
     .label-row {
@@ -3438,6 +3537,16 @@
       .mortgage-split-range-wrap {
         order: -1;
       }
+
+      .mortgage-split-range-controls {
+        grid-template-columns: 30px minmax(0, 1fr) 30px;
+      }
+
+      .mortgage-split-nudge {
+        height: 28px;
+        width: 28px;
+        font-size: 12px;
+      }
       .spieg-grid {
         grid-template-columns: 1fr;
       }

package/package.json

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