85 lines
2.9 KiB
HTML
85 lines
2.9 KiB
HTML
<!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>© 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>
|