Loader: morphing gradient blob, dancing bars, clean step pipeline, no emoji

static/index.html

@@ -372,156 +372,186 @@ nav {
 ═══════════════════════════════════════════════ */
 #loader {
   display:none; flex-direction:column; align-items:center;
-  padding:60px 24px 80px; gap:0;
+  padding:56px 24px 72px; gap:0;
   animation:slideUp 0.4s var(--ease);
 }
 
-/* Central radar / orb */
-.scan-radar {
-  position:relative; width:180px; height:180px;
-  margin-bottom:40px; flex-shrink:0;
+/* ── Morphing orb ── */
+.scan-orb-wrap {
+  position:relative; width:160px; height:160px;
+  margin-bottom:36px;
+  display:grid; place-items:center;
 }
-.scan-radar-core {
-  position:absolute; inset:30px;
-  background:var(--glass);
-  border:1px solid var(--glassbdr);
-  border-radius:50%;
+
+/* Outer glow halo */
+.scan-orb-halo {
+  position:absolute; inset:-24px; border-radius:50%;
+  background:radial-gradient(circle, rgba(13,148,136,0.14) 0%, transparent 70%);
+  animation:haloPulse 2.5s ease-in-out infinite;
+}
+@keyframes haloPulse {
+  0%,100% { transform:scale(1); opacity:0.7; }
+  50%      { transform:scale(1.18); opacity:1; }
+}
+
+/* The morphing blob */
+.scan-blob {
+  position:absolute; inset:0;
+  background:linear-gradient(135deg, var(--teal) 0%, var(--blue2) 50%, var(--purple) 100%);
+  background-size:200% 200%;
+  border-radius:60% 40% 55% 45% / 50% 60% 40% 50%;
+  animation:blobMorph 4s ease-in-out infinite, gradShift 3s ease infinite;
+  filter:blur(1px);
+  opacity:0.9;
+}
+@keyframes blobMorph {
+  0%  { border-radius:60% 40% 55% 45% / 50% 60% 40% 50%; }
+  25% { border-radius:50% 50% 40% 60% / 60% 40% 60% 40%; }
+  50% { border-radius:40% 60% 60% 40% / 45% 55% 45% 55%; }
+  75% { border-radius:55% 45% 45% 55% / 55% 45% 55% 45%; }
+  100%{ border-radius:60% 40% 55% 45% / 50% 60% 40% 50%; }
+}
+
+/* Inner frosted disc */
+.scan-orb-core {
+  position:relative; z-index:2;
+  width:80px; height:80px; border-radius:50%;
+  background:rgba(255,255,255,0.88);
+  backdrop-filter:blur(20px);
+  border:1px solid rgba(255,255,255,1);
+  box-shadow:0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 white;
   display:grid; place-items:center;
-  font-size:46px; line-height:1;
-  backdrop-filter:blur(28px) saturate(180%);
-  box-shadow:0 12px 40px rgba(0,0,0,0.1), inset 0 1px 0 white, 0 0 0 1px rgba(13,148,136,0.1);
-  animation:radarBreathe 2.4s ease-in-out infinite;
-  z-index:2;
-}
-@keyframes radarBreathe {
-  0%,100% { transform:scale(1); box-shadow:0 12px 40px rgba(0,0,0,0.1), inset 0 1px 0 white, 0 0 0 0 rgba(13,148,136,0.25); }
-  50%      { transform:scale(1.06); box-shadow:0 20px 60px rgba(0,0,0,0.14), inset 0 1px 0 white, 0 0 0 16px rgba(13,148,136,0); }
-}
-
-/* Rings */
-.scan-ring {
-  position:absolute; border-radius:50%;
-  border:2px solid transparent; inset:0;
-}
-.scan-ring-1 {
-  border-top-color:var(--teal); border-right-color:rgba(13,148,136,0.3);
-  animation:spinRing 1.4s linear infinite;
-}
-.scan-ring-2 {
-  inset:-14px;
-  border-bottom-color:var(--blue2); border-left-color:rgba(59,130,246,0.25);
-  animation:spinRing 2.2s linear infinite reverse;
-}
-.scan-ring-3 {
-  inset:-30px;
-  border:1.5px solid transparent;
-  border-top-color:rgba(124,58,237,0.35); border-right-color:rgba(167,139,250,0.2);
-  animation:spinRing 3.5s linear infinite;
-}
-
-/* Radar sweep */
-.scan-sweep {
-  position:absolute; inset:0; border-radius:50%; overflow:hidden; z-index:1;
-}
-.scan-sweep::after {
-  content:''; position:absolute; inset:0; border-radius:50%;
-  background:conic-gradient(from 0deg, transparent 70%, rgba(13,148,136,0.18) 85%, rgba(13,148,136,0.08) 100%);
-  animation:spinRing 2s linear infinite;
-}
-
-/* Ping dot */
-.scan-ping {
-  position:absolute; top:50%; left:50%;
-  width:8px; height:8px; border-radius:50%;
-  background:var(--teal);
-  transform:translate(-50%,-50%) translateX(52px);
-  transform-origin:center;
-  animation:pingOrbit 1.4s linear infinite;
-  z-index:3;
-  box-shadow:0 0 0 0 rgba(13,148,136,0.6);
-}
-.scan-ping::after {
-  content:''; position:absolute; inset:-4px; border-radius:50%;
-  background:rgba(13,148,136,0.25);
-  animation:pingFlare 1.4s ease-out infinite;
-}
-@keyframes pingOrbit {
-  from { transform:translate(-50%,-50%) rotate(0deg) translateX(52px); }
-  to   { transform:translate(-50%,-50%) rotate(360deg) translateX(52px); }
-}
-@keyframes pingFlare { 0%{transform:scale(1);opacity:1} 100%{transform:scale(3);opacity:0} }
-@keyframes spinRing  { to{transform:rotate(360deg)} }
+}
+
+/* Custom SVG-style scan icon — pure CSS bars */
+.scan-icon-bars {
+  display:flex; align-items:flex-end; gap:3px; height:28px;
+}
+.sib {
+  width:4px; border-radius:3px;
+  background:linear-gradient(180deg, var(--teal), var(--blue2));
+}
+.sib:nth-child(1) { height:12px; animation:barDance 1.2s ease-in-out 0.0s infinite alternate; }
+.sib:nth-child(2) { height:22px; animation:barDance 1.2s ease-in-out 0.15s infinite alternate; }
+.sib:nth-child(3) { height:28px; animation:barDance 1.2s ease-in-out 0.3s infinite alternate; }
+.sib:nth-child(4) { height:18px; animation:barDance 1.2s ease-in-out 0.45s infinite alternate; }
+.sib:nth-child(5) { height:10px; animation:barDance 1.2s ease-in-out 0.6s infinite alternate; }
+@keyframes barDance {
+  from { transform:scaleY(0.35); opacity:0.5; }
+  to   { transform:scaleY(1);    opacity:1; }
+}
+
+/* Orbiting dot */
+.scan-orbit {
+  position:absolute; inset:0; animation:spinRing 2.2s linear infinite; z-index:3;
+}
+.scan-orbit-dot {
+  position:absolute; top:4px; left:50%; transform:translateX(-50%);
+  width:10px; height:10px; border-radius:50%;
+  background:white;
+  box-shadow:0 0 0 2px rgba(13,148,136,0.4), 0 2px 8px rgba(13,148,136,0.6);
+}
+.scan-orbit-dot::after {
+  content:''; position:absolute; inset:-3px; border-radius:50%;
+  background:rgba(255,255,255,0.4);
+  animation:orbitPing 2.2s ease-out infinite;
+}
+@keyframes orbitPing {
+  0%   { transform:scale(1); opacity:0.8; }
+  100% { transform:scale(2.5); opacity:0; }
+}
+@keyframes spinRing { to{transform:rotate(360deg)} }
+
+/* ── Headline ── */
+.scan-headline {
+  font-size:26px; font-weight:900; letter-spacing:-1px; color:var(--t1);
+  text-align:center; margin-bottom:6px;
+  animation:slideUp 0.5s var(--ease) 0.1s both;
+}
+.scan-subline {
+  font-size:13px; color:var(--t3); font-weight:500; text-align:center;
+  margin-bottom:32px;
+  animation:slideUp 0.5s var(--ease) 0.2s both;
+}
 
 /* ── Step pipeline ── */
 .scan-pipeline {
-  width:100%; max-width:540px;
-  display:flex; flex-direction:column; gap:10px;
-  margin-bottom:32px;
+  width:100%; max-width:520px;
+  display:flex; flex-direction:column; gap:8px;
+  margin-bottom:28px;
+  animation:slideUp 0.5s var(--ease) 0.3s both;
 }
 .scan-step {
-  display:flex; align-items:center; gap:14px;
-  padding:14px 18px; border-radius:16px;
-  background:rgba(255,255,255,0.55);
-  border:1px solid rgba(255,255,255,0.85);
-  backdrop-filter:blur(16px);
-  box-shadow:0 2px 12px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
-  transition:all 0.4s var(--ease);
-  opacity:0.4;
+  display:flex; align-items:center; gap:12px;
+  padding:12px 16px; border-radius:14px;
+  background:rgba(255,255,255,0.5);
+  border:1px solid rgba(255,255,255,0.8);
+  backdrop-filter:blur(12px);
+  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
+  transition:all 0.45s var(--ease);
+  opacity:0.38;
 }
 .scan-step.active {
-  opacity:1; background:rgba(255,255,255,0.85);
-  box-shadow:0 4px 24px rgba(13,148,136,0.12), 0 0 0 1px rgba(13,148,136,0.15), inset 0 1px 0 white;
-  border-color:rgba(13,148,136,0.2);
-  transform:translateX(4px);
+  opacity:1; background:rgba(255,255,255,0.9);
+  border-color:rgba(13,148,136,0.22);
+  box-shadow:0 4px 20px rgba(13,148,136,0.1), inset 0 1px 0 white;
+  transform:scale(1.015) translateX(3px);
 }
 .scan-step.done {
-  opacity:0.75; background:rgba(209,250,229,0.4);
-  border-color:rgba(5,150,105,0.2);
+  opacity:0.7; background:rgba(220,252,231,0.45);
+  border-color:rgba(5,150,105,0.18);
+  transform:none;
 }
-.step-icon {
-  width:36px; height:36px; border-radius:10px; flex-shrink:0;
-  display:grid; place-items:center; font-size:17px;
-  background:rgba(255,255,255,0.8); border:1px solid rgba(0,0,0,0.06);
+
+/* Step number badge */
+.step-num {
+  width:30px; height:30px; border-radius:9px; flex-shrink:0;
+  display:grid; place-items:center;
+  font-size:12px; font-weight:800; color:var(--t3);
+  background:rgba(255,255,255,0.7); border:1px solid rgba(0,0,0,0.06);
   transition:all 0.3s var(--ease);
   box-shadow:inset 0 1px 0 white;
 }
-.scan-step.active .step-icon {
-  background:linear-gradient(135deg,var(--teal),#0f766e);
-  border-color:transparent; font-size:0;
-  box-shadow:0 4px 14px rgba(13,148,136,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
+.scan-step.active .step-num {
+  background:linear-gradient(135deg, var(--teal), #0891b2);
+  color:transparent; border-color:transparent;
+  box-shadow:0 4px 12px rgba(13,148,136,0.4);
+  position:relative;
 }
-.scan-step.active .step-icon::after {
-  content:''; width:16px; height:16px;
-  border:2px solid rgba(255,255,255,0.4);
+/* Spinner inside active num */
+.scan-step.active .step-num::after {
+  content:''; position:absolute; inset:5px;
+  border:2px solid rgba(255,255,255,0.35);
   border-top-color:white;
-  border-radius:50%; animation:spinRing 0.7s linear infinite;
+  border-radius:50%; animation:spinRing 0.65s linear infinite;
 }
-.scan-step.done .step-icon {
-  background:rgba(209,250,229,0.8); border-color:rgba(5,150,105,0.2);
-}
-.scan-step.done .step-icon::before { content:'✓'; font-size:16px; color:var(--green); }
-.step-body { flex:1; }
-.step-label { font-size:14px; font-weight:700; color:var(--t1); letter-spacing:-0.2px; }
-.step-sub   { font-size:12px; color:var(--t3); margin-top:2px; font-weight:500; }
-.scan-step.active .step-sub { color:var(--teal); font-weight:600; }
-.step-time {
-  font-size:11px; font-weight:700; color:var(--t4);
-  font-variant-numeric:tabular-nums;
+.scan-step.done .step-num {
+  background:rgba(209,250,229,0.9); color:var(--green);
+  border-color:rgba(5,150,105,0.2);
+  font-size:15px;
 }
+.step-body { flex:1; min-width:0; }
+.step-label { font-size:13px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.step-sub   { font-size:11px; color:var(--t3); margin-top:1px; font-weight:500; }
+.scan-step.active .step-sub { color:var(--teal); }
+.step-time  { font-size:11px; font-weight:700; color:var(--t4); font-variant-numeric:tabular-nums; flex-shrink:0; }
 .scan-step.done .step-time { color:var(--green2); }
 
-/* ── Count-up ── */
+/* ── Live counters ── */
 .scan-counter {
-  display:flex; align-items:center; gap:10px;
-  padding:12px 22px; border-radius:99px;
-  background:rgba(255,255,255,0.75);
+  display:flex; align-items:stretch; gap:0;
+  border-radius:18px; overflow:hidden;
+  background:rgba(255,255,255,0.78);
   border:1px solid rgba(255,255,255,0.95);
-  backdrop-filter:blur(16px);
-  box-shadow:0 2px 12px rgba(0,0,0,0.06), inset 0 1px 0 white;
+  backdrop-filter:blur(20px);
+  box-shadow:0 4px 20px rgba(0,0,0,0.07), inset 0 1px 0 white;
+  animation:slideUp 0.5s var(--ease) 0.4s both;
 }
-.counter-num { font-size:22px; font-weight:900; letter-spacing:-1px; color:var(--t1); font-variant-numeric:tabular-nums; }
-.counter-lbl { font-size:12px; font-weight:600; color:var(--t3); }
-.counter-sep { width:1px; height:24px; background:rgba(0,0,0,0.08); }
+.sc-item { padding:14px 24px; text-align:center; }
+.sc-item + .sc-item { border-left:1px solid rgba(0,0,0,0.06); }
+.sc-num { font-size:24px; font-weight:900; letter-spacing:-1px; color:var(--t1); line-height:1; font-variant-numeric:tabular-nums; }
+.sc-lbl { font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--t3); margin-top:4px; }
+.sc-item.accent .sc-num { color:var(--teal); }
 
 /* ═══════════════════════════════════════════════
    EMPTY STATE
@@ -899,67 +929,74 @@ nav {
   <div id="error-banner"></div>
 
   <div id="loader">
-    <!-- Radar orb -->
-    <div class="scan-radar">
-      <div class="scan-sweep"></div>
-      <div class="scan-ring scan-ring-3"></div>
-      <div class="scan-ring scan-ring-2"></div>
-      <div class="scan-ring scan-ring-1"></div>
-      <div class="scan-radar-core">📡</div>
-      <div class="scan-ping"></div>
+    <!-- Morphing orb -->
+    <div class="scan-orb-wrap">
+      <div class="scan-orb-halo"></div>
+      <div class="scan-blob"></div>
+      <div class="scan-orb-core">
+        <div class="scan-icon-bars">
+          <div class="sib"></div>
+          <div class="sib"></div>
+          <div class="sib"></div>
+          <div class="sib"></div>
+          <div class="sib"></div>
+        </div>
+      </div>
+      <div class="scan-orbit"><div class="scan-orbit-dot"></div></div>
     </div>
 
+    <div class="scan-headline">Scanning the market</div>
+    <div class="scan-subline">Analysing 300+ USDT pairs · BingX + Binance data fusion</div>
+
     <!-- Step pipeline -->
     <div class="scan-pipeline">
       <div class="scan-step" id="sd1">
-        <div class="step-icon">🔍</div>
+        <div class="step-num">1</div>
         <div class="step-body">
           <div class="step-label">Fetching universe</div>
-          <div class="step-sub">Loading 300+ USDT pairs from BingX</div>
+          <div class="step-sub">300+ USDT perpetual pairs from BingX</div>
         </div>
         <div class="step-time" id="st1"></div>
       </div>
       <div class="scan-step" id="sd2">
-        <div class="step-icon">📊</div>
+        <div class="step-num">2</div>
         <div class="step-body">
           <div class="step-label">Computing indicators</div>
-          <div class="step-sub">EMA · RSI · ATR · S/R levels</div>
+          <div class="step-sub">EMA · RSI · ATR · Support/Resistance</div>
         </div>
         <div class="step-time" id="st2"></div>
       </div>
       <div class="scan-step" id="sd3">
-        <div class="step-icon">🔀</div>
+        <div class="step-num">3</div>
         <div class="step-body">
-          <div class="step-label">Cross-validating</div>
-          <div class="step-sub">BingX funding + Binance OI check</div>
+          <div class="step-label">Cross-validating sources</div>
+          <div class="step-sub">BingX funding rate + Binance OI check</div>
         </div>
         <div class="step-time" id="st3"></div>
       </div>
       <div class="scan-step" id="sd4">
-        <div class="step-icon">🏆</div>
+        <div class="step-num">4</div>
         <div class="step-body">
           <div class="step-label">Ranking setups</div>
-          <div class="step-sub">40/20/20/20 scoring framework</div>
+          <div class="step-sub">40/20/20/20 scoring · sorting by confidence</div>
         </div>
         <div class="step-time" id="st4"></div>
       </div>
     </div>
 
-    <!-- Live counter -->
+    <!-- Live counters -->
     <div class="scan-counter">
-      <div>
-        <div class="counter-num" id="scan-count">0</div>
-        <div class="counter-lbl">pairs analysed</div>
+      <div class="sc-item accent">
+        <div class="sc-num" id="scan-count">0</div>
+        <div class="sc-lbl">pairs scanned</div>
       </div>
-      <div class="counter-sep"></div>
-      <div>
-        <div class="counter-num" id="scan-elapsed">0s</div>
-        <div class="counter-lbl">elapsed</div>
+      <div class="sc-item">
+        <div class="sc-num" id="scan-elapsed">0s</div>
+        <div class="sc-lbl">elapsed</div>
       </div>
-      <div class="counter-sep"></div>
-      <div>
-        <div class="counter-num">BingX</div>
-        <div class="counter-lbl">data source</div>
+      <div class="sc-item">
+        <div class="sc-num">BingX</div>
+        <div class="sc-lbl">source</div>
       </div>
     </div>
   </div>
@@ -1057,10 +1094,10 @@ function startLoaderSteps() {
   clearInterval(stepTimer); clearInterval(elapsedTimer); clearInterval(countTimer);
 
   // Reset all steps
-  const icons=['🔍','📊','🔀','🏆'];
   for(let i=1;i<=4;i++){
     const el=$('sd'+i); if(!el) continue;
-    el.className='scan-step'; el.querySelector('.step-icon').textContent=icons[i-1];
+    el.className='scan-step';
+    const num=el.querySelector('.step-num'); if(num) num.textContent=i;
     const t=$('st'+i); if(t) t.textContent='';
   }
   const sc=$('scan-count'); if(sc) sc.textContent='0';
@@ -1098,13 +1135,12 @@ function activateStep(n) {
   if(n>4) return;
   const el=$('sd'+n); if(!el) return;
   el.className='scan-step active';
-  el.querySelector('.step-icon').textContent='';
   const t=$('st'+n); if(t) t.textContent='running…';
 }
 function markDone(n) {
   const el=$('sd'+n); if(!el) return;
   el.className='scan-step done';
-  const icon=el.querySelector('.step-icon'); if(icon) { icon.textContent=''; }
+  const num=el.querySelector('.step-num'); if(num) num.textContent='✓';
   const elapsed=((Date.now()-scanStartTime)/1000).toFixed(1);
   const t=$('st'+n); if(t) t.textContent=elapsed+'s';
 }