diff --git a/index.html b/index.html index f1fc260..d71d110 100644 --- a/index.html +++ b/index.html @@ -282,6 +282,96 @@ left: 50%; transform: translateX(-50%); } + + /* LEADERBOARD CHART */ + .lb-row { + display: grid; + grid-template-columns: 28px 1fr 52px; + align-items: center; + gap: 10px; + padding: 5px 0; + border-radius: 8px; + transition: background 200ms ease; + } + .lb-row:hover { + background: rgba(148, 163, 184, 0.06); + } + .lb-row.is-moxie { + background: rgba(52, 211, 153, 0.08); + padding: 6px 8px; + margin: 2px -8px; + border: 1px solid rgba(52, 211, 153, 0.25); + border-radius: 10px; + } + .lb-rank { + font-size: 0.75rem; + font-weight: 600; + color: #64748b; + text-align: center; + } + .lb-row.is-moxie .lb-rank { + color: #34d399; + } + .lb-bar-wrap { + display: flex; + flex-direction: column; + gap: 3px; + min-width: 0; + } + .lb-model-line { + display: flex; + align-items: baseline; + gap: 6px; + min-width: 0; + } + .lb-model-name { + font-size: 0.8rem; + font-weight: 500; + color: #e2e8f0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .lb-row.is-moxie .lb-model-name { + color: #34d399; + font-weight: 700; + } + .lb-provider { + font-size: 0.65rem; + color: #64748b; + white-space: nowrap; + } + .lb-row.is-moxie .lb-provider { + color: #6ee7b7; + } + .lb-bar-track { + width: 100%; + height: 6px; + background: rgba(148, 163, 184, 0.08); + border-radius: 3px; + overflow: hidden; + } + .lb-bar-fill { + height: 100%; + border-radius: 3px; + transition: width 1.2s cubic-bezier(0.25, 0.1, 0.25, 1); + width: 0; + } + .lb-row.is-moxie .lb-bar-fill { + background: linear-gradient(90deg, #34d399, #6ee7b7); + box-shadow: 0 0 12px rgba(52, 211, 153, 0.4); + } + .lb-score { + font-size: 0.8rem; + font-weight: 600; + color: #94a3b8; + text-align: right; + font-variant-numeric: tabular-nums; + } + .lb-row.is-moxie .lb-score { + color: #34d399; + } + .lb-medal { font-size: 0.7rem; } @@ -401,20 +491,17 @@

Real-time performance leaderboard

- +
🏆 - LIVE LEADERBOARD + LMARENA LEADERBOARD
-
Updated 11 seconds ago
+
Internal Testing
-
-

[Leaderboard Placement]

-

Awaiting LMAreana Results
Table will be shown here once available.

-
+
@@ -940,11 +1027,81 @@ } // Initialize everything when page loads + // ============================================ + // LEADERBOARD CHART + // ============================================ + function initLeaderboard() { + const data = [ + { rank: 1, model: 'Claude Opus 4.7 Thinking', provider: 'Anthropic', score: 1503 }, + { rank: 2, model: 'Claude Opus 4.6 Thinking', provider: 'Anthropic', score: 1502 }, + { rank: 3, model: 'Claude Opus 4.6', provider: 'Anthropic', score: 1498 }, + { rank: 4, model: 'Gemini 3.1 Pro Preview', provider: 'Google', score: 1492 }, + { rank: 5, model: 'Claude Opus 4.7', provider: 'Anthropic', score: 1491 }, + { rank: 6, model: 'Muse Spark', provider: 'Meta', score: 1490 }, + { rank: 7, model: 'Moxie', provider: 'Moxiegen', score: 1488 }, + { rank: 8, model: 'Gemini 3 Pro', provider: 'Google', score: 1486 }, + { rank: 9, model: 'GPT-5.5 High', provider: 'OpenAI', score: 1484 }, + { rank: 10, model: 'Grok 4.20 Beta', provider: 'xAI', score: 1480 }, + { rank: 11, model: 'GPT-5.2 Chat', provider: 'OpenAI', score: 1477 }, + { rank: 12, model: 'GPT-5.4 High', provider: 'OpenAI', score: 1477 }, + { rank: 13, model: 'Grok 4.20 Reasoning', provider: 'xAI', score: 1477 }, + { rank: 14, model: 'GPT-5.5', provider: 'OpenAI', score: 1475 }, + { rank: 15, model: 'ERNIE 5.1', provider: 'Baidu', score: 1474 }, + ]; + + const minScore = 1470; + const maxScore = 1505; + const range = maxScore - minScore; + + const medals = ['🥇', '🥈', '🥉']; + const barColors = [ + 'linear-gradient(90deg, #fbbf24, #f59e0b)', // 1st gold + 'linear-gradient(90deg, #d1d5db, #9ca3af)', // 2nd silver + 'linear-gradient(90deg, #d97706, #b45309)', // 3rd bronze + ]; + + const container = document.getElementById('leaderboard-chart'); + if (!container) return; + + container.innerHTML = data.map((item, i) => { + const isMoxie = item.provider === 'Moxiegen'; + const pct = ((item.score - minScore) / range) * 100; + const medal = i < 3 ? `${medals[i]}` : ''; + const barBg = isMoxie ? '' : (i < 3 ? `background:${barColors[i]};` : 'background:rgba(148,163,184,0.25);'); + + return ` +
+
${medal || item.rank}
+
+
+ ${item.model} + ${item.provider} +
+
+
+
+
+
${item.score}
+
+ `; + }).join(''); + + // Animate bars in after a short delay + requestAnimationFrame(() => { + setTimeout(() => { + container.querySelectorAll('.lb-bar-fill').forEach(bar => { + bar.style.width = bar.dataset.width + '%'; + }); + }, 200); + }); + } + window.addEventListener('load', () => { initScrollAnimations(); initBalloon(); initAuth(); initContactForm(); + initLeaderboard(); });