← back to Model Wars
public/index.html
140 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MODEL WARS — The AI Tournament</title>
<meta name="description" content="Leading AI models battle head-to-head in a medieval tournament. Real API battles, AI judges, and a persistent medieval ELO ladder." />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E%E2%9A%94%EF%B8%8F%3C/text%3E%3C/svg%3E" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<canvas id="embers"></canvas>
<canvas id="torch"></canvas>
<div class="parallax" id="parallax"></div>
<div class="vignette"></div>
<div class="wrap">
<header class="hero">
<div class="crest-line">Anno Domini MMXXVI · The Grand Tournament</div>
<h1 class="wordmark">MODEL WARS</h1>
<div class="subtitle">Where Champions of Silicon Clash for Glory</div>
<div id="modeFlag" class="mode-flag mode-exh"><span class="dot"></span><span id="modeText">Checking champions…</span></div>
<button id="muteBtn" class="mute" title="Toggle battle sound">🔊 Sound</button>
</header>
<nav class="tabs">
<button class="tab active" data-view="arena">⚔ The Arena</button>
<button class="tab" data-view="table">👑 The King's Table</button>
</nav>
<!-- ══════════ ARENA ══════════ -->
<section class="view active" id="view-arena">
<div class="glass" style="padding:20px">
<div class="panel-title">Choose Your Champions</div>
<div class="combatants">
<div class="fighter side-a glass" id="fighterA">
<img class="portrait" alt="" />
<div class="crest">⚔️</div>
<div class="cname">—</div>
<div class="ctitle">—</div>
<select id="selA"></select>
<div class="avail off"><span class="d"></span><span class="txt">—</span></div>
</div>
<div class="vs-emblem">⚜<br />VS</div>
<div class="fighter side-b glass" id="fighterB">
<img class="portrait" alt="" />
<div class="crest">🗡️</div>
<div class="cname">—</div>
<div class="ctitle">—</div>
<select id="selB"></select>
<div class="avail off"><span class="d"></span><span class="txt">—</span></div>
</div>
</div>
</div>
<div class="glass" style="padding:20px; margin-top:16px">
<div class="panel-title">Choose The Battle</div>
<div class="modes" id="modes"></div>
</div>
<div class="glass prompt-row">
<label id="promptLabel">The Challenge Scroll (identical prompt sent to both champions)</label>
<textarea id="prompt"></textarea>
<div class="actions">
<button class="btn" id="beginBtn">Begin Battle</button>
<span class="hint" id="battleHint"></span>
</div>
</div>
<div class="glass stage-wrap" style="margin-top:18px; position:relative">
<div class="stage-banner" id="stageBanner"></div>
<canvas id="stage"></canvas>
</div>
<div class="results" id="results">
<div class="winner-banner glass" id="winnerBanner"></div>
<div class="score-grid">
<div class="resp-card glass" id="cardA"></div>
<div class="resp-card glass" id="cardB"></div>
</div>
<div class="vote-row">
<span class="hint">The People's Choice — who won in your eyes?</span>
<button class="btn ghost" id="voteA">🗳 Vote Champion A</button>
<button class="btn ghost" id="voteB">🗳 Vote Champion B</button>
<button class="btn ghost" id="evidenceBtn">📜 View The Evidence</button>
</div>
<div class="people" id="peoplesChoice"></div>
</div>
</section>
<!-- ══════════ KING'S TABLE ══════════ -->
<section class="view" id="view-table">
<div class="glass kings-table">
<div class="panel-title">👑 The King's Table — Global Tournament Ladder</div>
<table class="ladder" id="ladder">
<thead><tr>
<th>Rank</th><th>Champion</th><th>Provider</th><th>ELO</th>
<th>W</th><th>L</th><th>D</th><th>Win %</th><th>Streak</th>
<th>Strongest</th><th>Avg ms</th><th>Cost/Battle</th>
</tr></thead>
<tbody id="ladderBody"></tbody>
</table>
<div class="panel-title" style="margin-top:26px">Summon A New Champion</div>
<div class="addrow">
<input id="addName" placeholder="Name (e.g. Mistral)" />
<input id="addTitle" placeholder="Title (e.g. The Frankish Duelist)" />
<input id="addCrest" placeholder="Crest emoji (⚜)" style="width:120px" />
<select id="addProvider">
<option value="openai">OpenAI-compatible</option>
<option value="anthropic">Anthropic</option>
<option value="google">Google</option>
<option value="xai">xAI</option>
<option value="deepseek">DeepSeek</option>
<option value="groq">Groq / Llama</option>
</select>
<button class="btn ghost" id="addBtn">Add To Ladder</button>
<button class="btn ghost" id="resetBtn" style="margin-left:auto">Reset Ladder</button>
</div>
<div class="hint" style="margin-top:8px">New champions enter at ELO 1500. Wire their API key in <code>.env</code> to battle live.</div>
</div>
</section>
<footer>
<div><b>MODEL WARS</b> — objective measurements (speed, tokens, cost) are <b>measured</b>; the six-dimension scores are <b>AI-judge opinions</b>. People's Choice is tallied separately.</div>
<div id="footMode"></div>
</footer>
</div>
<div class="toast" id="toast"></div>
<script src="scene.js"></script>
<script src="sound.js"></script>
<script src="battles.js"></script>
<script src="app.js"></script>
</body>
</html>