<!DOCTYPE HTML>
<!--
	Lens by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html class="rankings-html">
	<head>
		<title>food rankings</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<link rel="stylesheet" href="assets/css/nyaa.css" />
		<link rel="stylesheet" href="assets/css/rankings.css" />
		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>

		<link rel="apple-touch-icon" sizes="180x180" href="../favicon/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="../favicon/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="../favicon/favicon-16x16.png">
		<link rel="manifest" href="../favicon/site.webmanifest">
	</head>
	<body class="rankings-page">

		<!-- Main -->
		<div id="main">

			<!-- Header -->
			<header id="header">
				<img src="images/meow.gif" alt="meow" id="gifone">
				<h1>food power rankings</h1>
				<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="./">gallery</a>
					<span class="page-links__separator">/</span>
					<a href="rankings" aria-current="page">rankings</a>
				</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 load saved rankings.</p>
					</div>
					<div class="voting-panel__actions">
						<button class="button small" id="skip-pair" type="button">skip pair</button>
						<button class="button small" id="undo-vote" type="button">go back</button>
						<button class="button small" id="reset-rankings" type="button">reset saved rankings</button>
					</div>
					<p class="vote-message" id="vote-message" aria-live="polite">Enable JavaScript to load 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, or press Z to go back.</p>
				</div>
			</section>

			<!-- Rankings Summary -->
			<section id="rankings-summary">
				{{ranking_summary}}
			</section>

			<!-- Rankings -->
			<section id="rankings">
				{{ranking_items}}
			</section>

			<!-- Footer -->
			<footer id="footer">
				<ul class="copyright">
					<li>&copy; Ryan Chou. 2026.</li>
				</ul>
				<img src="images/nyaa.gif" alt="nyaa" id="giftwo">
			</footer>

		</div>
		<script id="rankings-seed-data" type="application/json">
{{rankings_seed_data}}
		</script>
		<script src="assets/js/rankings.js"></script>
	</body>
</html>
