Replace leaderboard placeholder with LMArena chart from PDF data
- Replaced dashed-border placeholder with animated horizontal bar chart - Shows all 15 models from LMArena Internal Testing results - Moxie (rank #7, score 1488) highlighted with emerald glow effect - Top 3 get gold/silver/bronze medals and gradient bars - Bars animate in on page load with smooth 1.2s transition - Updated header: LMARENA LEADERBOARD / Internal Testing
This commit is contained in:
Z User
parent
84b0bd86e7
commit
a7cbfa581f
171
index.html
171
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; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-slate-950 text-white font-sans">
|
||||
@ -401,20 +491,17 @@
|
||||
<p class="text-slate-400 text-xl">Real-time performance leaderboard</p>
|
||||
</div>
|
||||
|
||||
<!-- Leaderboard Placeholder -->
|
||||
<!-- Leaderboard Chart -->
|
||||
<div class="bg-slate-900 border border-slate-700 rounded-3xl p-8 max-w-2xl w-full md:w-auto scroll-animate">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="text-emerald-400 font-medium flex items-center gap-x-2">
|
||||
<span class="text-2xl">🏆</span>
|
||||
LIVE LEADERBOARD
|
||||
LMARENA LEADERBOARD
|
||||
</div>
|
||||
<div class="text-xs uppercase tracking-widest bg-slate-800 text-slate-400 px-4 py-1 rounded-3xl">Updated 11 seconds ago</div>
|
||||
<div class="text-xs uppercase tracking-widest bg-slate-800 text-slate-400 px-4 py-1 rounded-3xl">Internal Testing</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center py-16 border border-dashed border-slate-600 rounded-3xl text-slate-400">
|
||||
<p class="text-2xl mb-2">[Leaderboard Placement]</p>
|
||||
<p class="text-sm">Awaiting LMAreana Results<br> Table will be shown here once available.</p>
|
||||
</div>
|
||||
<div id="leaderboard-chart" class="space-y-1.5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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 ? `<span class="lb-medal">${medals[i]}</span>` : '';
|
||||
const barBg = isMoxie ? '' : (i < 3 ? `background:${barColors[i]};` : 'background:rgba(148,163,184,0.25);');
|
||||
|
||||
return `
|
||||
<div class="lb-row${isMoxie ? ' is-moxie' : ''}">
|
||||
<div class="lb-rank">${medal || item.rank}</div>
|
||||
<div class="lb-bar-wrap">
|
||||
<div class="lb-model-line">
|
||||
<span class="lb-model-name">${item.model}</span>
|
||||
<span class="lb-provider">${item.provider}</span>
|
||||
</div>
|
||||
<div class="lb-bar-track">
|
||||
<div class="lb-bar-fill" data-width="${pct}" style="${barBg}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lb-score">${item.score}</div>
|
||||
</div>
|
||||
`;
|
||||
}).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();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user