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