@javierfrancoleal/dsh-supervisor 1.0.26 → 1.0.28

package/dashboard.html

@@ -102,6 +102,34 @@ td,th{border-bottom:1px solid var(--line);padding:9px 6px;text-align:left}
 .row .btn{flex:1;min-width:110px}
 .switchuser{margin-top:26px;text-align:center}
 .langs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:8px 0 14px}
+.langov{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:90;animation:rise .3s ease}
+.langov .top{position:absolute;top:22px;right:26px}
+.langov .close{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;width:44px;height:44px;font-size:18px;cursor:pointer}
+.orow{width:min(520px,92vw);display:flex;justify-content:space-between;align-items:center;padding:15px 22px;border-radius:14px;font-size:19px;color:#fff;cursor:pointer;transition:background .15s,transform .1s}
+.orow:hover{background:rgba(255,255,255,.12)}
+.orow:active{transform:scale(.98)}
+.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}
+.tick{height:58px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;opacity:.85;color:#fff}
 .pill{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:13px;cursor:pointer}
 .pill.active{background:var(--blue);color:#fff;border-color:var(--blue)}
 .person{background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:14px;margin:10px 0}
@@ -148,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>
@@ -161,6 +196,10 @@ body.wall pre{max-height:40vh}
   <button class="btn small gray" id="logoutBtn" style="display:none">Log out</button>
 </header>
 <main>
+  <div id="langOverlay" class="langov hidden" style="display:none">
+    <div class="top"><button class="close" id="closeOverlay">✕</button></div>
+    <div id="langRows"></div>
+  </div>
   <div id="loginView" class="card" style="max-width:440px;margin:26px auto">
     <div class="loginbrand">
       <div class="mark" style="background:none;box-shadow:none"><svg width="64" height="64" viewBox="0 0 64 64" aria-hidden="true"><defs><linearGradient id="osgd" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#4D6BFE"/><stop offset="1" stop-color="#7c5cff"/></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(#osgd)" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
@@ -168,7 +207,7 @@ body.wall pre{max-height:40vh}
       <p id="tagline">The AI works. The human decides.</p>
     </div>
     <h2 id="loginTitle" style="font-size:14px;color:var(--muted);text-align:center">Log in</h2>
-    <div id="langs" class="langs"></div>
+    <div class="langreel" id="langReel"><div class="ticks" id="langTicks"></div></div>
     <input id="loginUser" placeholder="User" autocomplete="username">
     <div class="passwrap">
       <input id="loginPass" type="password" placeholder="Password" autocomplete="current-password">
@@ -496,6 +535,52 @@ function applyLang(){
   panelLinks();
   reRenderDynamic();
 }
+const LANGNAMES={es:"Español",en:"English",fr:"Français",de:"Deutsch",it:"Italiano",pt:"Português",zh:"中文",ja:"日本語",ko:"한국어",ar:"العربية"};
+const LANGORDER=["it","zh","de","es","en","fr","ja","pt","ko","ar"];
+function buildLangMenu(){
+  const rows=$("langRows");
+  for(const l of LANGORDER){
+    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();$("langStep").classList.add("done");};
+    rows.appendChild(r);
+  }
+}
+function markReel(){
+  document.querySelectorAll("#langTicks .tick,#langStepTicks .tick").forEach(t=>t.classList.toggle("active",t.dataset.l===cur));
+}
+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];
+      $(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;
+    $(ticksId).style.transform="translateY(-"+((t/CYCLE)*N*H)+"px)";
+    requestAnimationFrame(frame);
+  })(t0);
+}
+buildLangMenu();
+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")){
+      $("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);
 try{const q=new URLSearchParams(location.search);const ql=q.get("lang");if(ql&&S[ql])cur=ql;}catch(e){}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@javierfrancoleal/dsh-supervisor",
-  "version": "1.0.26",
+  "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",