Upload index.html

index.html

@@ -86,6 +86,29 @@ body {
 .info-banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }
 .info-banner a { color: var(--accent); text-decoration: none; }
 .info-banner a:hover { text-decoration: underline; }
+.info-banner.clickable { cursor: pointer; user-select: none; }
+.info-banner.clickable:hover { border-color: var(--accent); }
+.banner-expand {
+  max-height: 0; overflow: hidden;
+  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease;
+  opacity: 0; margin-top: 0;
+}
+.banner-expand.open {
+  max-height: 300px; opacity: 1; margin-top: 10px;
+}
+.banner-expand-inner {
+  padding: 0.85rem 1rem; background: var(--bg); border-radius: var(--radius-xs);
+  border: 1px solid var(--border-light); font-size: 0.84rem; color: var(--text-secondary); line-height: 1.65;
+}
+.banner-expand-inner code {
+  background: rgba(88,166,255,0.1); padding: 1px 5px; border-radius: 3px;
+  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.82rem; color: var(--accent);
+}
+.banner-hint {
+  font-size: 0.75rem; color: var(--text-muted); margin-left: 6px;
+  transition: transform 0.25s ease; display: inline-block;
+}
+.banner-hint.rotated { transform: rotate(180deg); }
 .section { margin-bottom: 1.5rem; }
 .timeline-toolbar {
   display: flex; align-items: center; gap: 6px;
@@ -604,6 +627,22 @@ footer a:hover { text-decoration: underline; }
       <a href="https://huggingface.co/spaces/CompactAI-O/Tiny-ML-Leaderboard/discussions" target="_blank">Submit a model via PR.</a>
     </div>
   </div>
+  <div class="info-banner anim d2 clickable" id="unknown-banner" onclick="toggleUnknownBanner()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+    <div style="flex:1">
+      <div style="display:flex;align-items:center;gap:4px;flex-wrap:wrap">
+        <strong>Unknown org?</strong>
+        <span>The "Unknown" tag is for model makers submitting their model ahead of official release.</span>
+        <span>If that's you — DM <strong>glintresearch</strong> on Discord.</span>
+        <span class="banner-hint" id="banner-hint">▼</span>
+      </div>
+      <div class="banner-expand" id="banner-expand">
+        <div class="banner-expand-inner">
+          Model makers can submit their model's benchmarks before the official release so it appears on the leaderboard immediately when announced. The <strong>Unknown</strong> tag is temporary — once you DM <strong>glintresearch</strong> on Discord we can update it to your organization name and color.
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="section anim d3" id="table-section">
     <div class="section-head">
       <h2>Detailed Results</h2>
@@ -1148,6 +1187,7 @@ const orgNameMap = {
   GODELEV: 'GODELEV',
   finnianx: 'finnianx',
   ivmelabs: 'IvmeLabs',
+  unknown: 'Unknown',
 };
 
 const colorMap = {
@@ -1160,6 +1200,7 @@ const colorMap = {
   GODELEV: '#1a56db',
   finnianx: '#06b6d4',
   ivmelabs: '#ff0000',
+  unknown: '#000000',
 };
 
 const bgMap = {};
@@ -1930,6 +1971,17 @@ function buildOrgCountChart() {
   });
 }
 
+/* ─── Toggle Banner ─── */
+
+function toggleUnknownBanner() {
+  const expand = document.getElementById('banner-expand');
+  const hint = document.getElementById('banner-hint');
+  if (!expand) return;
+  const isOpen = expand.classList.contains('open');
+  expand.classList.toggle('open');
+  if (hint) hint.classList.toggle('rotated');
+}
+
 /* ─── Init ─── */
 
 window.addEventListener('DOMContentLoaded', () => {