<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Motion Arena</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
<div class="page">
<header>
<h1>Motion Prompt Arena</h1>
<p class="subtitle">Describe a motion and see how different AI models translate it for MotionGPT3.</p>
</header>
<div class="prompt-card">
<span class="prompt-label">Your Prompt</span>
<textarea id="prompt" rows="4" placeholder="Describe a movement or motion… e.g. a person slowly raising their arms above their head"></textarea>
<div class="prompt-footer">
<span class="char-count" id="char-count">0 characters</span>
<button id="run">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="5 3 19 12 5 21 5 3"/>
</svg>
Run Models
</button>
</div>
</div>
<div id="results-section">
<div class="results-header">
<span class="results-meta" id="results-meta"></span>
</div>
<div id="results">
</div>
</div>
</div>
<script src="/static/app.js"></script>
</body>
</html>