58 lines
2.3 KiB
HTML
58 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="theme-color" content="#0b0f14">
|
|
<link rel="manifest" href="manifest.webmanifest">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<title>Movie Select</title>
|
|
</head>
|
|
<body>
|
|
<main class="app" aria-live="polite">
|
|
<header class="topbar">
|
|
<h1 data-i18n="title">Movie Select</h1>
|
|
<label for="language" class="sr-only" data-i18n="language">Language</label>
|
|
<select id="language" aria-label="Language selector">
|
|
<option value="en">English</option>
|
|
<option value="de">Deutsch</option>
|
|
<option value="es">Español</option>
|
|
<option value="fr">Français</option>
|
|
</select>
|
|
</header>
|
|
|
|
<section class="card">
|
|
<h2 data-i18n="setup">Setup</h2>
|
|
<div class="row">
|
|
<input id="participantInput" type="text" data-i18n-placeholder="participantPlaceholder" placeholder="Add participant" maxlength="30">
|
|
<button id="addParticipant" data-i18n="add">Add</button>
|
|
</div>
|
|
<ul id="participantList" class="chips" aria-label="Participants"></ul>
|
|
<div class="row">
|
|
<input id="movieInput" type="text" data-i18n-placeholder="moviePlaceholder" placeholder="Add movie" maxlength="60">
|
|
<button id="addMovie" data-i18n="add">Add</button>
|
|
</div>
|
|
<ul id="movieList" class="chips" aria-label="Movies"></ul>
|
|
<p class="hint" data-i18n="setupHint">Add at least 2 people and 2 movies.</p>
|
|
</section>
|
|
|
|
<section class="card" id="ratingsCard" hidden>
|
|
<h2 data-i18n="ratings">Ratings</h2>
|
|
<p class="hint" data-i18n="ratingsHint">Each person rates each movie from 0 (no) to 5 (yes).</p>
|
|
<div id="ratingsGrid" class="ratings-grid" role="table" aria-label="Ratings grid"></div>
|
|
<div class="actions">
|
|
<button id="decide" class="primary" data-i18n="decide">Pick a movie</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card" id="resultCard" hidden>
|
|
<h2 data-i18n="result">Result</h2>
|
|
<p id="winnerText" class="winner"></p>
|
|
<div id="resultList"></div>
|
|
<p class="hint" data-i18n="algoNote">Method: Pareto filter + Nash social welfare (product of ratings+1). This avoids picks one person strongly dislikes.</p>
|
|
</section>
|
|
</main>
|
|
<script src="app.js" type="module"></script>
|
|
</body>
|
|
</html>
|