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%;
|
left: 50%;
|
||||||
transform: translateX(-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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-slate-950 text-white font-sans">
|
<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>
|
<p class="text-slate-400 text-xl">Real-time performance leaderboard</p>
|
||||||
</div>
|
</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="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="flex items-center justify-between mb-6">
|
||||||
<div class="text-emerald-400 font-medium flex items-center gap-x-2">
|
<div class="text-emerald-400 font-medium flex items-center gap-x-2">
|
||||||
<span class="text-2xl">🏆</span>
|
<span class="text-2xl">🏆</span>
|
||||||
LIVE LEADERBOARD
|
LMARENA LEADERBOARD
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="text-center py-16 border border-dashed border-slate-600 rounded-3xl text-slate-400">
|
<div id="leaderboard-chart" class="space-y-1.5"></div>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -940,11 +1027,81 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Initialize everything when page loads
|
// 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', () => {
|
window.addEventListener('load', () => {
|
||||||
initScrollAnimations();
|
initScrollAnimations();
|
||||||
initBalloon();
|
initBalloon();
|
||||||
initAuth();
|
initAuth();
|
||||||
initContactForm();
|
initContactForm();
|
||||||
|
initLeaderboard();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user