Something went wrong. Try again.
Collaborative lists with real‑time voting and ranking
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124<!--SPDX-FileCopyrightText: Amolith <amolith@secluded.site>
SPDX-License-Identifier: AGPL-3.0-or-later-->
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sift</title> <link rel="stylesheet" href="/palette.css"> <link rel="stylesheet" href="/style.css"> </head> <body> <noscript> <div class="noscript-message"> <h1>JavaScript Required</h1> <p>Sift requires JavaScript to function. Please enable JavaScript in your browser settings and reload this page.</p> <p>Sift is a collaborative list application that uses WebSockets for real-time updates, which requires JavaScript to work.</p> </div> </noscript> <div id="app"> <div id="start-screen"> <h1>Sift</h1> <div class="buttons"> <button id="create-btn">Create New List</button> <div class="join-section"> <input type="text" id="join-code" placeholder="Enter room ID"> <button id="join-btn">Join List</button> </div> </div> <a href="https://tangled.org/secluded.site/sift" class="source-link" target="_blank" rel="noopener noreferrer">source code</a> </div>
<div id="list-screen" class="hidden"> <header> <div> <h2 id="room-title" class="hidden"></h2> <div class="connection-status"> <span class="status-dot"></span> <span class="status-text">Connecting...</span> <span class="last-sync"></span> </div> </div> <div class="header-actions"> <button id="set-title-btn" title="Set room title" aria-label="Set room title"><svg class="icon icon-edit" aria-hidden="true"><use href="/icons/phosphor.svg#pencil-simple"/></svg></button> <button id="copy-link-btn" title="Copy invite link" aria-label="Copy invite link"><svg class="icon icon-link" aria-hidden="true"><use href="/icons/phosphor.svg#link"/></svg></button> <button id="copy-btn" title="Copy items to clipboard" aria-label="Copy items to clipboard"><svg class="icon icon-copy" aria-hidden="true"><use href="/icons/phosphor.svg#clipboard-text"/></svg></button> <button id="reset-votes-btn" title="Clear all votes and vetoes" aria-label="Clear all votes and vetoes"><svg class="icon icon-reset" aria-hidden="true"><use href="/icons/phosphor.svg#arrows-clockwise"/></svg></button> <button id="leave-btn">Leave</button> </div> </header>
<div class="add-section"> <input type="text" id="single-input" placeholder="Add single item"> <button id="add-single-btn">Add</button> </div>
<div class="bulk-section"> <textarea id="bulk-input" placeholder="Paste items (one per line)"></textarea> <button id="add-bulk-btn">Add all</button> </div>
<div id="tie-breaker" class="hidden"> <button id="break-tie-btn">Break the tie</button> <span id="tie-break-result"></span> </div>
<div id="list-container"></div> <a href="https://tangled.org/secluded.site/sift" class="source-link" target="_blank" rel="noopener noreferrer">source code</a> </div>
<button id="keyboard-help-btn" aria-label="Keyboard shortcuts" title="Keyboard shortcuts (?)" aria-haspopup="dialog" aria-controls="help-modal" aria-expanded="false"> <svg class="icon icon-keyboard" aria-hidden="true"><use href="/icons/phosphor.svg#keyboard"/></svg> </button> <div id="help-modal" class="keyboard-popover hidden" role="dialog" aria-labelledby="help-title"> <div class="modal-content"> <div class="modal-header"> <h3 id="help-title">Keyboard Shortcuts</h3> <button class="modal-close" aria-label="Close help"><svg class="icon icon-close" aria-hidden="true"><use href="/icons/phosphor.svg#x-circle"/></svg></button> </div> <div class="modal-body"> <h4>Navigation</h4> <ul> <li><span>Select next item</span><span class="keys"><kbd>j</kbd> / <kbd aria-label="Arrow down">↓</kbd></span></li> <li><span>Select previous item</span><span class="keys"><kbd>k</kbd> / <kbd aria-label="Arrow up">↑</kbd></span></li> </ul>
<h4>Actions on Selected Item</h4> <ul> <li><span>Upvote</span><span class="keys"><kbd>1</kbd> / <kbd>Enter</kbd></span></li> <li><span>Downvote</span><span class="keys"><kbd>2</kbd></span></li> <li><span>Veto</span><span class="keys"><kbd>3</kbd></span></li> <li><span>Edit item</span><span class="keys"><kbd>e</kbd></span></li> <li><span>Delete item</span><span class="keys"><kbd>Delete</kbd> / <kbd>Backspace</kbd></span></li> </ul>
<h4>General</h4> <ul> <li><span>Undo last vote</span><span class="keys"><span><kbd>Ctrl</kbd> + <kbd>Z</kbd></span> / <span><kbd>⌘</kbd> + <kbd>Z</kbd></span></span></li> <li><span>Show shortcuts</span><span class="keys"><kbd>?</kbd></span></li> <li><span>Close shortcuts</span><span class="keys"><kbd>Esc</kbd></span></li> </ul> <p class="shortcut-note">/ means either shortcut. + means press together.</p> </div> </div> </div> </div>
<script type="module" src="/app.js"></script> </body></html>