Lensing

Author: thinhhoangpham

attack_timearcs.html

@@ -79,12 +79,23 @@
           <span>Attack Group</span>
         </label>
       </fieldset>
-      <button id="lensingToggle" style="padding:6px 12px; border:1px solid #dee2e6; border-radius:4px; background:#fff; cursor:pointer; font-size:12px; font-weight:600; transition: all 0.2s;">
+      <button id="lensingToggle" style="padding:6px 12px; border:1px solid #dee2e6; border-radius:4px; background:#fff; cursor:pointer; font-size:12px; font-weight:600; transition: all 0.2s;" title="Toggle lensing mode (Shift + L)">
         <span>🔍 Lensing</span>
+        <span style="font-size:10px; opacity:0.7; margin-left:4px;">(⇧L)</span>
       </button>
+      <div style="display:flex; align-items:center; gap:8px; padding:4px 8px; border:1px solid #dee2e6; border-radius:4px;">
+        <label for="lensingMulSlider" style="font-size:12px; font-weight:600; white-space:nowrap;">Zoom:</label>
+        <input type="range" id="lensingMulSlider" min="2" max="200" step="1" value="5" style="width:100px; cursor:pointer;" />
+        <span id="lensingMulValue" style="font-size:12px; min-width:24px; text-align:right;">5x</span>
+      </div>
     </div>
-    <div class="hint">Columns: timestamp,length,src_ip,dst_ip,protocol,count,attack • Default load: 90min_day1_attacks.csv</div>
-    <div id="status">Waiting for data…</div>
+    <div class="hint" style="display: none;">
+      Columns: timestamp,length,src_ip,dst_ip,protocol,count,attack • Default load: 90min_day1_attacks.csv
+      <span style="margin-left:12px; padding-left:12px; border-left:1px solid #dee2e6;">
+        💡 Tip: Press <kbd style="padding:2px 6px; background:#f8f9fa; border:1px solid #dee2e6; border-radius:3px; font-size:11px; font-family:monospace;">Shift + L</kbd> to toggle lensing
+      </span>
+    </div>
+    <div id="status" style="display: none;">Waiting for data…</div>
   </header>
   <main>
     <div class="top-bar">