@javierfrancoleal/dsh-supervisor 1.0.27 → 1.0.28

package/dashboard.html

@@ -111,6 +111,21 @@ td,th{border-bottom:1px solid var(--line);padding:9px 6px;text-align:left}
 .orow .sub{font-size:13px;opacity:.7}
 .orow.center{background:rgba(255,255,255,.30);font-size:23px;font-weight:800;border:1px solid rgba(255,255,255,.45)}
 .orow.center .sub{opacity:.9}
+#langStep{position:fixed;inset:0;background:linear-gradient(160deg,#4D6BFE,#7c5cff 60%,#a78bfa);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:95;transition:opacity .45s,visibility .45s}
+#langStep.done{opacity:0;visibility:hidden}
+.langstep-inner{text-align:center}
+.langstep-hint{color:rgba(255,255,255,.9);font-size:14px;margin:18px 0 4px}
+.langstep-inner .langreel{width:min(340px,86vw)}
+.langstep-inner svg path.draw{stroke-dasharray:100;animation:drawStroke 1.2s cubic-bezier(.4,0,.2,1) forwards}
+@media (prefers-reduced-motion: reduce){.langstep-inner svg path.draw{animation:none}}
+#loginView{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;box-shadow:none;text-align:center}
+#loginView h2,#loginView .loginbrand h2{color:#fff}
+#loginView .loginbrand p,#loginView .hint,#loginView .note{color:rgba(255,255,255,.82)}
+#loginView input,#loginView select{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff}
+#loginView input::placeholder{color:rgba(255,255,255,.7)}
+#loginView .loginerr{background:rgba(239,68,68,.25);color:#fff;border:1px solid rgba(255,255,255,.3)}
+#loginView .eye{color:#fff}
+#loginView .btn.gray{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3)}
 .langreel{width:min(340px,86vw);height:58px;margin:10px auto;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.30);border-radius:10px;backdrop-filter:blur(8px);overflow:hidden;cursor:pointer;position:relative;box-shadow:0 10px 30px rgba(15,23,42,.15)}
 body.dark .langreel{background:rgba(20,31,49,.55)}
 .ticks{display:flex;flex-direction:column;will-change:transform}
@@ -161,7 +176,14 @@ body.wall pre{max-height:40vh}
 </style>
 </head>
 <body>
-<div id="splash"><div class="splash-inner">
+<div id="langStep" class="hidden" style="display:none">
+    <div class="langstep-inner">
+      <svg width="110" height="110" viewBox="0 0 64 64" aria-hidden="true"><path class="draw" pathLength="100" d="M10 32 C10 22 16 14 32 14 C48 14 54 22 54 32 C54 42 48 50 32 50 C20 50 12.5 45.2 10.5 38.5 C14 42.5 20 41 25.4 34.8 A6.6 6.6 0 0 1 38.6 34.8 C38.6 31.4 36.6 28.2 32 22.5 C27.4 28.2 25.4 31.4 25.4 34.8" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      <p id="langStepHint" class="langstep-hint">Choose your language</p>
+      <div class="langreel" id="langStepReel"><div class="ticks" id="langStepTicks"></div></div>
+    </div>
+  </div>
+  <div id="splash"><div class="splash-inner">
     <svg width="96" height="96" viewBox="0 0 64 64" aria-hidden="true"><defs><linearGradient id="splg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#e0e7ff"/></linearGradient></defs><path pathLength="100" d="M10 32 C10 22 16 14 32 14 C48 14 54 22 54 32 C54 42 48 50 32 50 C20 50 12.5 45.2 10.5 38.5 C14 42.5 20 41 25.4 34.8 A6.6 6.6 0 0 1 38.6 34.8 C38.6 31.4 36.6 28.2 32 22.5 C27.4 28.2 25.4 31.4 25.4 34.8" fill="none" stroke="url(#splg)" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>
     <b>Le Veilleux</b><span id="splashTag">The AI works. The human watches, decides, reviews.</span>
   </div></div>
@@ -521,37 +543,43 @@ function buildLangMenu(){
     const r=document.createElement("div");
     r.className="orow"+(l==="en"?" center":"");
     r.innerHTML='<span>'+LANGNAMES[l]+'</span><span class="sub">'+l.toUpperCase()+'</span>';
-    r.onclick=()=>{cur=l;applyLang();$("langOverlay").style.display="none";markReel();};
+    r.onclick=()=>{cur=l;applyLang();$("langOverlay").style.display="none";markReel();$("langStep").classList.add("done");};
     rows.appendChild(r);
   }
 }
 function markReel(){
-  document.querySelectorAll("#langTicks .tick").forEach(t=>t.classList.toggle("active",t.dataset.l===cur));
+  document.querySelectorAll("#langTicks .tick,#langStepTicks .tick").forEach(t=>t.classList.toggle("active",t.dataset.l===cur));
 }
-function buildReel(){
+function buildReel(ticksId){
   for(let pass=0;pass<2;pass++){
     for(const l of Object.keys(LANG)){
       const d=document.createElement("div");
       d.className="tick";d.dataset.l=l;d.textContent=LANGNAMES[l];
-      $("langTicks").appendChild(d);
+      $(ticksId).appendChild(d);
     }
   }
   const N=Object.keys(LANG).length,H=58,CYCLE=20000;
   const t0=performance.now();
   (function frame(now){
     const t=(now-t0)%CYCLE;
-    $("langTicks").style.transform="translateY(-"+((t/CYCLE)*N*H)+"px)";
+    $(ticksId).style.transform="translateY(-"+((t/CYCLE)*N*H)+"px)";
     requestAnimationFrame(frame);
   })(t0);
 }
 buildLangMenu();
-buildReel();
+buildReel("langTicks");
+buildReel("langStepTicks");
 markReel();
 $("langReel").onclick=()=>{$("langOverlay").style.display="flex";const en=document.querySelector("#langRows .center");if(en)en.scrollIntoView({block:"center"});};
+$("langStepReel").onclick=()=>{$("langOverlay").style.display="flex";const en=document.querySelector("#langRows .center");if(en)en.scrollIntoView({block:"center"});};
 $("closeOverlay").onclick=()=>{$("langOverlay").style.display="none";};
 // The Apple flow: after the splash, the language menu opens once (until chosen).
 setTimeout(()=>{
-  try{if(!localStorage.getItem("dsh-lang")){$("langOverlay").style.display="flex";}}catch(e){}
+  try{
+    if(!localStorage.getItem("dsh-lang")){
+      $("langStep").style.display="flex";
+    }
+  }catch(e){}
 },1600);
 function pill(l){for(const host of ["langs","footLangs"]){const b=document.createElement("button");b.className="pill";b.dataset.l=l;b.textContent=LANG[l];b.onclick=()=>{cur=l;applyLang();};$(host).appendChild(b);}}
 for(const l of Object.keys(LANG))pill(l);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@javierfrancoleal/dsh-supervisor",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "The Veilleux central control plane of the J.Franco agentic workflow suite: user accounts, the live conversation flow (listen → per-person summary → confirm → orders), telemetry, and the universal sector dashboard with 10 languages. Created by J.Franco.",
   "author": "J.Franco",
   "license": "MIT",