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