add: pairwise elo voting workflow

templates/rankings.html

@@ -28,7 +28,7 @@
 			<header id="header">
 				<img src="images/meow.gif" alt="meow" id="gifone">
 				<h1>food power rankings</h1>
-				<p>static Elo seeds for every meal before the head-to-head voting page exists.</p>
+				<p>pick the better meal, one pair at a time, and the board updates live in this browser.</p>
 				<p class="page-links">
 					<a href="index.html">gallery</a>
 					<span class="page-links__separator">/</span>
@@ -36,6 +36,26 @@
 				</p>
 			</header>
 
+			<!-- Voting -->
+			<section id="voting">
+				<div class="voting-panel">
+					<div class="voting-panel__intro">
+						<p class="voting-panel__eyebrow">Head-To-Head Voting</p>
+						<h2>Pick the winner.</h2>
+						<p class="vote-status" id="vote-status" aria-live="polite">Enable JavaScript to save votes in this browser.</p>
+					</div>
+					<div class="voting-panel__actions">
+						<button class="button small" id="skip-pair" type="button">skip pair</button>
+						<button class="button small" id="reset-rankings" type="button">reset local votes</button>
+					</div>
+					<p class="vote-message" id="vote-message" aria-live="polite">Enable JavaScript to start head-to-head voting.</p>
+					<div class="duel-grid" id="duel-cards">
+						<p class="duel-placeholder">Enable JavaScript to compare meals here.</p>
+					</div>
+					<p class="vote-hint">Tip: use the left and right arrow keys to vote faster.</p>
+				</div>
+			</section>
+
 			<!-- Rankings Summary -->
 			<section id="rankings-summary">
 				{{ranking_summary}}
@@ -55,5 +75,9 @@
 			</footer>
 
 		</div>
+		<script id="rankings-seed-data" type="application/json">
+{{rankings_seed_data}}
+		</script>
+		<script src="assets/js/rankings.js"></script>
 	</body>
 </html>