1<!--
2SPDX-FileCopyrightText: Amolith <amolith@secluded.site>
3
4SPDX-License-Identifier: AGPL-3.0-or-later
5-->
6
7<!DOCTYPE html>
8<html lang="en">
9<head>
10 <meta charset="UTF-8">
11 <meta name="viewport" content="width=device-width, initial-scale=1.0">
12 <title>Sift</title>
13 <link rel="stylesheet" href="/palette.css">
14 <link rel="stylesheet" href="/style.css">
15</head>
16<body>
17 <noscript>
18 <div class="noscript-message">
19 <h1>JavaScript Required</h1>
20 <p>Sift requires JavaScript to function. Please enable JavaScript in your browser settings and reload this page.</p>
21 <p>Sift is a collaborative list application that uses WebSockets for real-time updates, which requires JavaScript to work.</p>
22 </div>
23 </noscript>
24 <div id="app">
25 <div id="start-screen">
26 <h1>Sift</h1>
27 <div class="buttons">
28 <button id="create-btn">Create New List</button>
29 <div class="join-section">
30 <input type="text" id="join-code" placeholder="Enter room ID">
31 <button id="join-btn">Join List</button>
32 </div>
33 </div>
34 <a href="https://git.secluded.site/sift" class="source-link" target="_blank" rel="noopener noreferrer">source code</a>
35 </div>
36
37 <div id="list-screen" class="hidden">
38 <header>
39 <div>
40 <h2 id="room-title" class="hidden"></h2>
41 <div class="connection-status">
42 <span class="status-dot"></span>
43 <span class="status-text">Connecting...</span>
44 <span class="last-sync"></span>
45 </div>
46 </div>
47 <div class="header-actions">
48 <button id="set-title-btn" title="Set room title"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg></button>
49 <button id="copy-link-btn" title="Copy invite link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></button>
50 <button id="copy-btn" title="Copy items to clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button>
51 <button id="reset-votes-btn" title="Clear all votes and vetoes"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg></button>
52 <button id="leave-btn">Leave</button>
53 </div>
54 </header>
55
56 <div class="add-section">
57 <input type="text" id="single-input" placeholder="Add single item">
58 <button id="add-single-btn">Add</button>
59 </div>
60
61 <div class="bulk-section">
62 <textarea id="bulk-input" placeholder="Paste items (one per line)"></textarea>
63 <button id="add-bulk-btn">Add all</button>
64 </div>
65
66 <div id="tie-breaker" class="hidden">
67 <button id="break-tie-btn">Break the tie</button>
68 <span id="tie-break-result"></span>
69 </div>
70
71 <div id="list-container"></div>
72 <a href="https://git.secluded.site/sift" class="source-link" target="_blank" rel="noopener noreferrer">source code</a>
73 </div>
74
75 <!-- Help Modal -->
76 <div id="help-modal" class="modal hidden" role="dialog" aria-labelledby="help-title" aria-modal="true">
77 <div class="modal-content">
78 <div class="modal-header">
79 <h3 id="help-title">Keyboard Shortcuts</h3>
80 <button class="modal-close" aria-label="Close help">×</button>
81 </div>
82 <div class="modal-body">
83 <h4>Navigation</h4>
84 <ul>
85 <li><kbd>j</kbd> or <kbd>↓</kbd> - Select next item</li>
86 <li><kbd>k</kbd> or <kbd>↑</kbd> - Select previous item</li>
87 </ul>
88
89 <h4>Actions on Selected Item</h4>
90 <ul>
91 <li><kbd>1</kbd> or <kbd>Enter</kbd> - Upvote</li>
92 <li><kbd>2</kbd> - Downvote</li>
93 <li><kbd>3</kbd> - Veto</li>
94 <li><kbd>e</kbd> - Edit item</li>
95 <li><kbd>Delete</kbd> or <kbd>Backspace</kbd> - Delete item</li>
96 </ul>
97
98 <h4>General</h4>
99 <ul>
100 <li><kbd>Ctrl/Cmd</kbd> + <kbd>Z</kbd> - Undo last vote</li>
101 <li><kbd>?</kbd> - Show this help</li>
102 <li><kbd>Esc</kbd> - Close help</li>
103 </ul>
104 </div>
105 </div>
106 </div>
107 </div>
108
109 <script type="module" src="/app.js"></script>
110</body>
111</html>