v1.3

index.html

@@ -175,9 +175,7 @@
       transition: background .12s;
     }
     .dropdown-item:hover { background: var(--bg4); }
-    .dropdown-item-dot {
-      width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
-    }
+    .dropdown-item-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
     .dropdown-item-name { font-weight: 600; color: var(--text); font-family: 'Bricolage Grotesque', sans-serif; }
     .dropdown-item-detail { font-size: 10px; color: var(--text3); font-family: 'JetBrains Mono', monospace; margin-left: auto; white-space: nowrap; }
     /* ─── Icon Toggle Buttons ────────────────────────────── */
@@ -189,6 +187,36 @@
     .icon-toggle-btn:hover { border-color: var(--border2); color: var(--text); }
     .icon-toggle-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(77,158,245,.1); }
     .icon-toggle-btn svg { width: 16px; height: 16px; }
+    /* ─── Mobile Tab Bar ─────────────────────────────────── */
+    .mobile-tab-bar {
+      display: none;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+      background: var(--bg2);
+      padding: 0 4px;
+    }
+    .mobile-tab {
+      flex: 1;
+      padding: 10px 4px;
+      border: none;
+      background: transparent;
+      color: var(--text2);
+      font-family: 'DM Sans', sans-serif;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: all .15s;
+      text-align: center;
+    }
+    .mobile-tab.active {
+      color: var(--accent);
+      border-bottom-color: var(--accent);
+    }
+    .mobile-tab.tab-disabled {
+      opacity: 0.3;
+      pointer-events: none;
+    }
     /* ─── Main Split ─────────────────────────────────────── */
     main {
       flex: 1; min-height: 0; overflow: hidden;
@@ -418,22 +446,124 @@
     /* ─── Animations ─────────────────────────────────────── */
     @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
     .fade-in { animation: fadeIn .2s ease forwards; }
-    /* ─── Responsive ─────────────────────────────────────── */
-    @media (max-width: 1100px) {
-      main { grid-template-columns: 1fr 1fr; }
-      main.single-panel { grid-template-columns: 1fr 2fr; }
-      .output-panel:last-child { display: none; }
-      .searchbar-group:last-of-type { display: none; }
-    }
-    @media (max-width: 768px) {
-      header { padding: 0 12px; gap: 8px; flex-wrap: wrap; height: auto; padding: 8px 12px; }
-      .logo-name { font-size: 14px; }
-      main { grid-template-columns: 1fr; }
-      main.single-panel { grid-template-columns: 1fr; }
-      .input-panel { border-right: none; border-bottom: 1px solid var(--border); max-height: 35vh; }
-      .output-panel { border-left: none !important; }
-      .output-panel:last-child { display: none; }
-      .searchbar-group { min-width: 140px; }
+    /* ─── Responsive: Tablet (600–900px) ──────────────────── */
+    @media (min-width: 601px) and (max-width: 900px) {
+      header {
+        flex-wrap: wrap;
+        height: auto;
+        padding: 8px 12px;
+        gap: 8px;
+      }
+      .header-divider { display: none; }
+      .header-controls {
+        flex-basis: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      .searchbar-group {
+        flex: 1 1 180px;
+      }
+      main {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr 1fr;
+      }
+      main.single-panel {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr;
+      }
+      .input-panel {
+        border-right: none;
+        border-bottom: 1px solid var(--border);
+        max-height: 25vh;
+      }
+      .output-panel {
+        border-left: none !important;
+        border-bottom: 1px solid var(--border);
+      }
+      .output-panel:last-child {
+        border-bottom: none;
+      }
+      .stat-card { padding: 7px 10px; }
+      .stat-value { font-size: 17px; }
+      .stat-sub { font-size: 8px; }
+      .stat-label { font-size: 8px; }
+      .output-panel-header { padding: 8px 10px; }
+      .view-toggle { padding: 6px 10px; }
+    }
+    /* ─── Responsive: Mobile (≤600px) ────────────────────── */
+    @media (max-width: 600px) {
+      header {
+        flex-wrap: wrap;
+        height: auto;
+        padding: 6px 10px;
+        gap: 6px;
+      }
+      .header-divider { display: none; }
+      .logo-tag { display: none; }
+      .header-controls {
+        flex-basis: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+      }
+      .searchbar-group {
+        flex: 1 1 100%;
+      }
+      .searchbar-label { display: none; }
+      .dropdown-menu {
+        left: 0 !important;
+        right: 0 !important;
+        min-width: unset;
+      }
+      .mobile-tab-bar {
+        display: flex;
+      }
+      main {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+      }
+      .input-panel,
+      .output-panel {
+        display: none;
+      }
+      .mobile-active {
+        display: flex !important;
+      }
+      .input-panel {
+        border-right: none;
+        border-bottom: none;
+        max-height: none;
+      }
+      .output-panel {
+        border-left: none !important;
+        border-bottom: none;
+      }
+      .panel-header {
+        flex-wrap: wrap;
+        gap: 6px;
+        padding: 10px 12px 8px;
+      }
+      .sample-btns { width: 100%; }
+      .sample-btn { font-size: 9px; padding: 3px 6px; }
+      .output-panel-header { padding: 6px 10px; }
+      .model-indicator { font-size: 10px; }
+      .stat-card { padding: 5px 8px; }
+      .stat-value { font-size: 16px; }
+      .stat-label { font-size: 7px; letter-spacing: .5px; margin-bottom: 2px; }
+      .stat-sub { font-size: 7px; }
+      .view-toggle { padding: 5px 10px; }
+      .toggle-btn { padding: 3px 8px; font-size: 10px; }
+      .token-display { padding: 10px; }
+      .token-text-view { font-size: 12px; line-height: 2; }
+      .tok-split-idx { width: 28px; font-size: 8px; }
+      .tok-split-text { font-size: 11px; }
+      .tok-split-id { font-size: 9px; }
+      footer {
+        padding: 6px 12px;
+        font-size: 9px;
+      }
+      footer span:last-child { display: none; }
     }
   </style>
 </head>
@@ -446,14 +576,14 @@
     <div class="logo">
       <div class="logo-hex">T</div>
       <span class="logo-name">TokenLens</span>
-      <span class="logo-tag">v1.2</span>
+      <span class="logo-tag">v1.3</span>
     </div>
     <div class="header-divider"></div>
     <div class="header-controls">
       <!-- Search bar A -->
       <div class="searchbar-group" id="search-group-0">
         <span class="searchbar-label label-a">A</span>
-        <input class="searchbar-input" id="search-input-0" type="text" placeholder="HF model id… e.g. Xenova/gpt2" />
+        <input class="searchbar-input" id="search-input-0" type="text" placeholder="Model A: HF repo id…" />
         <button class="searchbar-dropdown-btn" id="dropdown-btn-0" title="Predefined models">
           <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 3.5L5 6.5L8 3.5"/></svg>
         </button>
@@ -463,7 +593,7 @@
       <!-- Search bar B -->
       <div class="searchbar-group" id="search-group-1">
         <span class="searchbar-label label-b">B</span>
-        <input class="searchbar-input" id="search-input-1" type="text" placeholder="HF model id… e.g. Xenova/llama-tokenizer" />
+        <input class="searchbar-input" id="search-input-1" type="text" placeholder="Model B: HF repo id…" />
         <button class="searchbar-dropdown-btn" id="dropdown-btn-1" title="Predefined models">
           <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 3.5L5 6.5L8 3.5"/></svg>
         </button>
@@ -481,10 +611,16 @@
       </button>
     </div>
   </header>
+  <!-- Mobile Tab Bar -->
+  <div class="mobile-tab-bar" id="mobile-tab-bar">
+    <button class="mobile-tab active" data-tab="input">Input</button>
+    <button class="mobile-tab" data-tab="panel-0">Model A</button>
+    <button class="mobile-tab" data-tab="panel-1">Model B</button>
+  </div>
   <!-- Main -->
   <main id="main-grid">
     <!-- Left: Input -->
-    <div class="input-panel">
+    <div class="input-panel mobile-active" id="input-panel">
       <div class="panel-header">
         <div class="panel-title">
           <div class="panel-title-icon">✎</div>
@@ -679,22 +815,27 @@ const panels = [
   { tokenizer: null, modelId: null, view: 'text' },
   { tokenizer: null, modelId: null, view: 'text' },
 ];
-let tokenizerCache = {};
-let panel1Visible  = true;
-let debounceTimer  = null;
+let tokenizerCache  = {};
+let panel1Visible   = true;
+let debounceTimer   = null;
+let mobileActiveTab = 'input';
 
 // ── DOM References ─────────────────────────────────────────
-const $overlay     = document.getElementById('loading-overlay');
-const $loadTitle   = document.getElementById('loading-title');
-const $loadSub     = document.getElementById('loading-sub');
-const $loadBar     = document.getElementById('loading-bar');
-const $loadFile    = document.getElementById('loading-file');
-const $input       = document.getElementById('input-area');
-const $charCount   = document.getElementById('char-count');
-const $toast       = document.getElementById('toast');
-const $mainGrid    = document.getElementById('main-grid');
-const $panelToggle = document.getElementById('panel-toggle');
-const $themeToggle = document.getElementById('theme-toggle');
+const $overlay      = document.getElementById('loading-overlay');
+const $loadTitle    = document.getElementById('loading-title');
+const $loadSub      = document.getElementById('loading-sub');
+const $loadBar      = document.getElementById('loading-bar');
+const $loadFile     = document.getElementById('loading-file');
+const $input        = document.getElementById('input-area');
+const $charCount    = document.getElementById('char-count');
+const $toast        = document.getElementById('toast');
+const $mainGrid     = document.getElementById('main-grid');
+const $panelToggle  = document.getElementById('panel-toggle');
+const $themeToggle  = document.getElementById('theme-toggle');
+const $inputPanel   = document.getElementById('input-panel');
+const $panel0       = document.getElementById('panel-0');
+const $panel1       = document.getElementById('panel-1');
+const $mobileTabs   = document.querySelectorAll('.mobile-tab');
 
 // ── Utilities ──────────────────────────────────────────────
 function showOverlay(title, sub) {
@@ -751,6 +892,65 @@ function decodeTokenString(raw) {
   return s;
 }
 
+// ── Mobile Tab Handling ────────────────────────────────────
+function isMobile() { return window.innerWidth <= 600; }
+
+function applyMobileTab(tabId) {
+  mobileActiveTab = tabId;
+  $mobileTabs.forEach(t => t.classList.toggle('active', t.dataset.tab === tabId));
+  // Remove mobile-active from all panels
+  $inputPanel.classList.remove('mobile-active');
+  $panel0.classList.remove('mobile-active');
+  $panel1.classList.remove('mobile-active');
+  // Add to the target
+  if (tabId === 'input')   $inputPanel.classList.add('mobile-active');
+  if (tabId === 'panel-0') $panel0.classList.add('mobile-active');
+  if (tabId === 'panel-1') $panel1.classList.add('mobile-active');
+}
+
+ $mobileTabs.forEach(tab => {
+  tab.addEventListener('click', () => {
+    applyMobileTab(tab.dataset.tab);
+  });
+});
+
+// Handle resize: reset display properties when switching between mobile/desktop
+function handleResize() {
+  if (!isMobile()) {
+    // Desktop/tablet: remove mobile-active, reset display for all panels
+    $inputPanel.classList.remove('mobile-active');
+    $panel0.classList.remove('mobile-active');
+    $panel1.classList.remove('mobile-active');
+    $inputPanel.style.display = '';
+    $panel0.style.display = '';
+    $panel1.style.display = panel1Visible ? '' : 'none';
+  } else {
+    // Mobile: apply mobile tab logic
+    $inputPanel.style.display = '';
+    $panel0.style.display = '';
+    $panel1.style.display = '';
+    applyMobileTab(mobileActiveTab);
+  }
+  updateMobileTabBState();
+}
+
+function updateMobileTabBState() {
+  const $tabB = document.querySelector('.mobile-tab[data-tab="panel-1"]');
+  if ($tabB) {
+    if (panel1Visible) {
+      $tabB.classList.remove('tab-disabled');
+    } else {
+      $tabB.classList.add('tab-disabled');
+      // If currently on tab B, switch away
+      if (mobileActiveTab === 'panel-1') {
+        applyMobileTab('panel-0');
+      }
+    }
+  }
+}
+
+window.addEventListener('resize', handleResize);
+
 // ── Tokenize for a specific panel ─────────────────────────
 async function tokenizeForPanel(idx, text) {
   const p = panels[idx];
@@ -785,7 +985,7 @@ async function tokenizeForPanel(idx, text) {
 // ── Render Views ───────────────────────────────────────────
 function renderView(idx, tokens) {
   const view = panels[idx].view;
-  if (view === 'text')  renderTextView(idx, tokens);
+  if (view === 'text')     renderTextView(idx, tokens);
   else if (view === 'ids') renderIdView(idx, tokens);
   else if (view === 'list') renderListView(idx, tokens);
 }
@@ -1012,17 +1212,17 @@ document.querySelectorAll('.sample-btn').forEach(btn => {
  $panelToggle.addEventListener('click', () => {
   panel1Visible = !panel1Visible;
   $panelToggle.classList.toggle('active', panel1Visible);
-  const $panel1 = document.getElementById('panel-1');
+  if (!isMobile()) {
+    $panel1.style.display = panel1Visible ? '' : 'none';
+  }
   const $searchGroup1 = document.getElementById('search-group-1');
+  $searchGroup1.style.display = panel1Visible ? '' : 'none';
   if (panel1Visible) {
-    $panel1.style.display = '';
-    $searchGroup1.style.display = '';
     $mainGrid.classList.remove('single-panel');
   } else {
-    $panel1.style.display = 'none';
-    $searchGroup1.style.display = 'none';
     $mainGrid.classList.add('single-panel');
   }
+  updateMobileTabBState();
   runTokenize();
 });
 
@@ -1054,6 +1254,9 @@ buildDropdowns();
 
 setTheme('dark');
 
+// Set initial mobile state
+handleResize();
+
 document.getElementById('search-input-0').value = MODELS[0].id;
 loadModel(0, MODELS[0].id);
 </script>