mantenimento-app 2.2.7 → 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.

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.

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.7"></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 {

package/package.json

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