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 <div id="app">
18 <div id="start-screen">
19 <h1>Sift</h1>
20 <div class="buttons">
21 <button id="create-btn">Create New List</button>
22 <div class="join-section">
23 <input type="text" id="join-code" placeholder="Enter room ID">
24 <button id="join-btn">Join List</button>
25 </div>
26 </div>
27 <a href="https://git.secluded.site/sift" class="source-link" target="_blank" rel="noopener noreferrer">source code</a>
28 </div>
29
30 <div id="list-screen" class="hidden">
31 <header>
32 <div>
33 <h2 id="room-title" class="hidden"></h2>
34 <div class="connection-status">
35 <span class="status-dot"></span>
36 <span class="status-text">Connecting...</span>
37 <span class="last-sync"></span>
38 </div>
39 </div>
40 <div class="header-actions">
41 <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>
42 <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>
43 <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>
44 <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>
45 <button id="leave-btn">Leave</button>
46 </div>
47 </header>
48
49 <div class="add-section">
50 <input type="text" id="single-input" placeholder="Add single item">
51 <button id="add-single-btn">Add</button>
52 </div>
53
54 <div class="bulk-section">
55 <textarea id="bulk-input" placeholder="Paste items (one per line)"></textarea>
56 <button id="add-bulk-btn">Add all</button>
57 </div>
58
59 <div id="list-container"></div>
60 <a href="https://git.secluded.site/sift" class="source-link" target="_blank" rel="noopener noreferrer">source code</a>
61 </div>
62
63 <!-- Help Modal -->
64 <div id="help-modal" class="modal hidden" role="dialog" aria-labelledby="help-title" aria-modal="true">
65 <div class="modal-content">
66 <div class="modal-header">
67 <h3 id="help-title">Keyboard Shortcuts</h3>
68 <button class="modal-close" aria-label="Close help">×</button>
69 </div>
70 <div class="modal-body">
71 <h4>Navigation</h4>
72 <ul>
73 <li><kbd>j</kbd> or <kbd>↓</kbd> - Select next item</li>
74 <li><kbd>k</kbd> or <kbd>↑</kbd> - Select previous item</li>
75 </ul>
76
77 <h4>Actions on Selected Item</h4>
78 <ul>
79 <li><kbd>1</kbd> or <kbd>Enter</kbd> - Upvote</li>
80 <li><kbd>2</kbd> - Downvote</li>
81 <li><kbd>3</kbd> - Veto</li>
82 <li><kbd>e</kbd> - Edit item</li>
83 <li><kbd>Delete</kbd> or <kbd>Backspace</kbd> - Delete item</li>
84 </ul>
85
86 <h4>General</h4>
87 <ul>
88 <li><kbd>Ctrl/Cmd</kbd> + <kbd>Z</kbd> - Undo last vote</li>
89 <li><kbd>?</kbd> - Show this help</li>
90 <li><kbd>Esc</kbd> - Close help</li>
91 </ul>
92 </div>
93 </div>
94 </div>
95 </div>
96
97 <script src="/app.js"></script>
98</body>
99</html>