-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathquicksave.html
More file actions
170 lines (160 loc) · 17.7 KB
/
quicksave.html
File metadata and controls
170 lines (160 loc) · 17.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Copus – Saved</title>
<link rel="stylesheet" href="quicksave.css" />
</head>
<body>
<!-- ========== Login Screen (shown when not logged in) ========== -->
<div id="login-screen" class="login-screen" style="display: none;">
<div class="login-container">
<div class="login-content">
<div class="login-text">
<h1 class="login-title">Please log in to start!</h1>
<p class="login-subtitle">Save and curate the web with Copus</p>
</div>
<button id="login-button" class="login-button">
<span>Log in</span>
</button>
</div>
<div class="login-mascot">
<img src="https://c.animaapp.com/mg0kz9olCQ44yb/img/ic-fractopus-open.svg" alt="Copus Octopus" class="octopus-image" />
</div>
</div>
</div>
<!-- ========== Main Content (shown when logged in) ========== -->
<div id="main-content" style="display: none; flex-direction: column; flex: 1;">
<!-- Success Banner -->
<div id="success-banner" class="success-banner">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M13.3 4.3L6 11.6L2.7 8.3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>Saved privately to your curation</span>
</div>
<!-- Cover Section (editable) -->
<div class="cover-section">
<label class="field-label">Cover<span class="required" id="cover-required" style="display:none">*</span></label>
<div id="cover-area" class="cover-area">
<!-- Empty state with tools -->
<div id="cover-empty" class="cover-empty">
<div class="cover-actions-compact">
<label class="upload-button" for="cover-upload">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
<path d="M8 2V14M2 8H14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
Upload from device
</label>
<input id="cover-upload" type="file" accept="image/*" hidden />
<div class="action-icons">
<button id="cover-screenshot" class="icon-button" type="button" title="Capture screenshot">
<svg width="20" height="20" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.5 3.5778V13.4514C23.5 13.8104 23.3602 14.1547 23.1114 14.4086C22.8625 14.6625 22.525 14.8051 22.1731 14.8051C21.8212 14.8051 21.4836 14.6625 21.2348 14.4086C20.986 14.1547 20.8462 13.8104 20.8462 13.4514V3.5778C20.8462 3.52921 20.8368 3.48109 20.8185 3.4362C20.8003 3.3913 20.7736 3.35051 20.7399 3.31615C20.7062 3.28179 20.6663 3.25453 20.6223 3.23594C20.5783 3.21734 20.5311 3.20777 20.4835 3.20777H3.55192C3.50141 3.20272 3.45041 3.20854 3.40224 3.22486C3.35407 3.24118 3.30979 3.26763 3.27226 3.30251C3.23474 3.33739 3.20482 3.37991 3.18442 3.42733C3.16402 3.47475 3.1536 3.52602 3.15385 3.5778V13.4514C3.15385 13.8104 3.01405 14.1547 2.7652 14.4086C2.51635 14.6625 2.17884 14.8051 1.82692 14.8051C1.475 14.8051 1.13749 14.6625 0.888647 14.4086C0.6398 14.1547 0.5 13.8104 0.5 13.4514V3.5778C0.499973 3.17059 0.579154 2.76742 0.732958 2.39166C0.886761 2.0159 1.11213 1.67501 1.396 1.38875C1.67987 1.1025 2.0166 0.876559 2.38667 0.724036C2.75675 0.571513 3.15282 0.495435 3.55192 0.500212H20.4481C20.8472 0.495435 21.2432 0.571513 21.6133 0.724036C21.9834 0.876559 22.3201 1.1025 22.604 1.38875C22.8879 1.67501 23.1132 2.0159 23.267 2.39166C23.4208 2.76742 23.5 3.17059 23.5 3.5778ZM22.1819 17.621C23.0002 18.4985 23.4566 19.6634 23.4566 20.8746C23.4566 22.0858 23.0002 23.2507 22.1819 24.1282C21.7755 24.5626 21.2868 24.9082 20.7454 25.1441C20.204 25.3799 19.6213 25.501 19.0327 25.5C18.444 25.501 17.8613 25.3799 17.32 25.1441C16.7786 24.9082 16.2899 24.5626 15.8835 24.1282C15.2229 23.4166 14.7963 22.5125 14.6631 21.5418C14.5299 20.5712 14.6968 19.5824 15.1404 18.713L12 15.4008L8.85961 18.713C9.30194 19.5827 9.46804 20.5712 9.3349 21.5416C9.20175 22.5119 8.77594 23.4159 8.11654 24.1282C7.71012 24.5626 7.22139 24.9082 6.68002 25.1441C6.13866 25.3799 5.55595 25.501 4.96731 25.5C4.37866 25.501 3.79596 25.3799 3.25459 25.1441C2.71323 24.9082 2.22449 24.5626 1.81808 24.1282C0.999758 23.2507 0.543388 22.0858 0.543388 20.8746C0.543388 19.6634 0.999758 18.4985 1.81808 17.621C2.46858 16.9175 3.32916 16.4535 4.26539 16.3017C5.20163 16.1498 6.16079 16.3186 6.99308 16.7817L10.1512 13.4514L6.11731 9.19147C5.88529 8.93167 5.76141 8.58999 5.77185 8.23868C5.78229 7.88737 5.92624 7.55398 6.17325 7.309C6.42027 7.06401 6.75099 6.92664 7.09549 6.92593C7.43999 6.92523 7.77125 7.06124 8.01923 7.30521L12 11.5109L15.9808 7.31423C16.2274 7.06803 16.5584 6.92955 16.9035 6.92816C17.2485 6.92676 17.5806 7.06257 17.8291 7.30677C18.0777 7.55097 18.2232 7.88436 18.2349 8.23621C18.2465 8.58806 18.1234 8.93071 17.8915 9.19147L13.8488 13.4604L17.0069 16.7907C17.8392 16.3276 18.7984 16.1589 19.7346 16.3107C20.6708 16.4626 21.5314 16.9265 22.1819 17.63V17.621ZM6.20577 19.5073C6.04693 19.3346 5.85508 19.197 5.64207 19.1029C5.42907 19.0088 5.19942 18.9603 4.96731 18.9603C4.7352 18.9603 4.50555 19.0088 4.29254 19.1029C4.07953 19.197 3.88769 19.3346 3.72885 19.5073C3.39499 19.8758 3.20957 20.3592 3.20957 20.861C3.20957 21.3629 3.39499 21.8463 3.72885 22.2148C3.88769 22.3875 4.07953 22.5251 4.29254 22.6192C4.50555 22.7133 4.7352 22.7618 4.96731 22.7618C5.19942 22.7618 5.42907 22.7133 5.64207 22.6192C5.85508 22.5251 6.04693 22.3875 6.20577 22.2148C6.53963 21.8463 6.72505 21.3629 6.72505 20.861C6.72505 20.3592 6.53963 19.8758 6.20577 19.5073ZM20.2712 19.5073C20.1123 19.3346 19.9205 19.197 19.7075 19.1029C19.4944 19.0088 19.2648 18.9603 19.0327 18.9603C18.8006 18.9603 18.5709 19.0088 18.3579 19.1029C18.1449 19.197 17.9531 19.3346 17.7942 19.5073C17.4604 19.8758 17.275 20.3592 17.275 20.861C17.275 21.3629 17.4604 21.8463 17.7942 22.2148C17.9531 22.3875 18.1449 22.5251 18.3579 22.6192C18.5709 22.7133 18.8006 22.7618 19.0327 22.7618C19.2648 22.7618 19.4944 22.7133 19.7075 22.6192C19.9205 22.5251 20.1123 22.3875 20.2712 22.2148C20.605 21.8463 20.7904 21.3629 20.7904 20.861C20.7904 20.3592 20.605 19.8758 20.2712 19.5073Z" fill="currentColor"/>
</svg>
<span>Capture</span>
</button>
<button id="cover-detect" class="icon-button" type="button" title="Detect images from page">
<svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.9948 0.500006C10.5996 0.498025 8.25482 1.18784 6.24185 2.48663C6.0933 2.58469 5.98943 2.73746 5.95283 2.91173C5.91623 3.08601 5.94987 3.26769 6.04642 3.41729C6.14297 3.56688 6.29463 3.67229 6.46843 3.71059C6.64223 3.7489 6.82412 3.71701 6.97455 3.62185C8.57635 2.58919 10.4173 1.98755 12.3195 1.8751V7.6424C11.131 7.79321 10.0262 8.33508 9.1791 9.18276C8.33195 10.0305 7.79043 11.1359 7.63971 12.3252H1.87609C1.99486 10.3308 2.64799 8.40516 3.76691 6.75044L3.97287 8.20662C3.9958 8.36899 4.07696 8.51746 4.2012 8.62438C4.32544 8.7313 4.4843 8.78936 4.64816 8.78775H4.74608C4.92338 8.76263 5.08344 8.66808 5.19109 8.52489C5.29873 8.3817 5.34513 8.2016 5.32008 8.02418L4.89127 4.99356C4.86617 4.81615 4.77168 4.65598 4.62858 4.54827C4.48548 4.44057 4.30549 4.39414 4.12819 4.4192L1.10288 4.8449C0.923777 4.86955 0.761796 4.96437 0.652568 5.10852C0.543339 5.25266 0.49581 5.43433 0.520436 5.61354C0.545062 5.79275 0.639826 5.95484 0.783881 6.06413C0.927937 6.17343 1.10948 6.22099 1.28858 6.19635L2.63917 6.00377C1.02956 8.38917 0.291884 11.2573 0.550688 14.1239C0.809493 16.9904 2.04892 19.6798 4.05971 21.738C6.07049 23.7961 8.72944 25.0969 11.5876 25.4206C14.4457 25.7444 17.328 25.0714 19.7477 23.5151C19.8963 23.4171 20.0001 23.2643 20.0367 23.09C20.0733 22.9157 20.0397 22.7341 19.9431 22.5845C19.8466 22.4349 19.6949 22.3295 19.5211 22.2912C19.3473 22.2529 19.1654 22.2848 19.015 22.3799C17.4132 23.4126 15.5722 24.0142 13.6701 24.1267V18.3594C14.8586 18.2085 15.9633 17.6667 16.8105 16.819C17.6576 15.9713 18.1991 14.8659 18.3499 13.6766H24.1135C23.9947 15.671 23.3416 17.5966 22.2227 19.2513L22.0167 17.7951C21.9916 17.6159 21.8964 17.454 21.7521 17.345C21.6077 17.2361 21.426 17.1889 21.2469 17.214C21.0678 17.2391 20.906 17.3344 20.797 17.4788C20.6881 17.6233 20.641 17.8051 20.6661 17.9843L21.0949 21.0251C21.1179 21.1874 21.199 21.3359 21.3232 21.4428C21.4475 21.5498 21.6063 21.6078 21.7702 21.6062H21.8647L24.8799 21.1805C25.059 21.1559 25.221 21.061 25.3302 20.9169C25.4395 20.7727 25.487 20.5911 25.4624 20.4119C25.4377 20.2327 25.343 20.0706 25.1989 19.9613C25.0549 19.852 24.8733 19.8044 24.6942 19.8291L23.3436 20.0216C24.6191 18.1413 25.3583 15.9487 25.4816 13.6795C25.6049 11.4103 25.1076 9.1504 24.0434 7.14282C22.9791 5.13524 21.3881 3.45594 19.4414 2.2855C17.4946 1.11506 15.2659 0.497769 12.9948 0.500006ZM12.3195 24.1267C9.60389 23.9609 7.04272 22.8068 5.11894 20.8817C3.19515 18.9567 2.0417 16.3939 1.87609 13.6766H7.63971C7.79043 14.8659 8.33195 15.9713 9.1791 16.819C10.0262 17.6667 11.131 18.2085 12.3195 18.3594V24.1267ZM15.0207 13.6766H16.9858C16.845 14.5053 16.4503 15.2698 15.8563 15.8642C15.2623 16.4586 14.4983 16.8536 13.6701 16.9944V15.028C13.6701 14.8488 13.5989 14.677 13.4723 14.5502C13.3456 14.4235 13.1739 14.3523 12.9948 14.3523C12.8157 14.3523 12.6439 14.4235 12.5173 14.5502C12.3906 14.677 12.3195 14.8488 12.3195 15.028V16.9944C11.4913 16.8536 10.7273 16.4586 10.1333 15.8642C9.53924 15.2698 9.14454 14.5053 9.0038 13.6766H10.9689C11.148 13.6766 11.3198 13.6054 11.4464 13.4787C11.573 13.352 11.6442 13.1801 11.6442 13.0009C11.6442 12.8217 11.573 12.6498 11.4464 12.5231C11.3198 12.3963 11.148 12.3252 10.9689 12.3252H9.0038C9.14454 11.4964 9.53924 10.7319 10.1333 10.1375C10.7273 9.54314 11.4913 9.14819 12.3195 9.00736V10.9737C12.3195 11.1529 12.3906 11.3248 12.5173 11.4515C12.6439 11.5782 12.8157 11.6494 12.9948 11.6494C13.1739 11.6494 13.3456 11.5782 13.4723 11.4515C13.5989 11.3248 13.6701 11.1529 13.6701 10.9737V9.00736C14.4983 9.14819 15.2623 9.54314 15.8563 10.1375C16.4503 10.7319 16.845 11.4964 16.9858 12.3252H15.0207C14.8416 12.3252 14.6698 12.3963 14.5432 12.5231C14.4165 12.6498 14.3454 12.8217 14.3454 13.0009C14.3454 13.1801 14.4165 13.352 14.5432 13.4787C14.6698 13.6054 14.8416 13.6766 15.0207 13.6766ZM18.3499 12.3252C18.1991 11.1359 17.6576 10.0305 16.8105 9.18276C15.9633 8.33508 14.8586 7.79321 13.6701 7.6424V1.8751C16.3857 2.04082 18.9468 3.19501 20.8706 5.12002C22.7944 7.04503 23.9479 9.60783 24.1135 12.3252H18.3499Z" fill="currentColor"/>
</svg>
<span>Detect</span>
</button>
</div>
</div>
</div>
<!-- Loaded cover preview -->
<img id="cover-preview" class="cover-preview" alt="Cover" hidden />
<button id="cover-remove" class="cover-remove" type="button" hidden>×</button>
</div>
</div>
<!-- Editable Fields (order: Title → Recommendation → Treasury → Private → buttons) -->
<div class="fields-section">
<!-- Title (editable, matching sidepanel) -->
<div class="field-group">
<label class="field-label">Title<span class="required">*</span></label>
<div class="textarea-wrapper">
<textarea id="title-input" class="field-textarea field-textarea-title" maxlength="75" rows="2" placeholder="Page title"></textarea>
<div class="char-counter" id="title-counter">0/75</div>
</div>
</div>
<!-- Recommendation / Note -->
<div class="field-group">
<label class="field-label">Recommendation<span class="required" id="recommendation-required" style="display:none">*</span></label>
<div class="textarea-wrapper">
<textarea id="note-input" class="field-textarea" placeholder="What makes you want to share it and who should see it? (Good recommendations boost visibility!)" maxlength="1000" rows="3"></textarea>
<div class="char-counter" id="note-counter">0/1000</div>
</div>
</div>
<!-- Treasury Selection -->
<div class="field-group">
<label class="field-label">Select treasuries</label>
<button id="treasury-button" class="treasury-select-button" type="button">
<span id="treasury-text">Choose treasuries...</span>
<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<!-- Visibility Toggle -->
<div class="visibility-row">
<div class="private-toggle" id="visibility-toggle">
<div class="private-checkbox" id="private-checkbox">
<svg width="8" height="8" viewBox="0 0 10 10" fill="none"><path d="M2 5L4.5 7.5L8 2.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div class="private-label">
<svg width="14" height="14" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.9723 3C15.4989 3 14.096 3.66092 12.9955 4.86118C11.9336 3.70292 10.5466 3 9.02774 3C5.7035 3 3 6.36428 3 10.5C3 14.6357 5.7035 18 9.02774 18C10.5466 18 11.9359 17.2971 12.9955 16.1388C14.0937 17.3413 15.492 18 16.9723 18C20.2965 18 23 14.6357 23 10.5C23 6.36428 20.2965 3 16.9723 3ZM3.68213 10.5C3.68213 6.73121 6.08095 3.66313 9.02774 3.66313C11.9745 3.66313 14.3734 6.729 14.3734 10.5C14.3734 11.2206 14.2847 11.9169 14.1232 12.569C14.0937 10.9885 13.3456 9.68877 12.1519 9.39699C10.5966 9.0168 8.86858 10.4956 8.30014 12.6927C8.03183 13.7339 8.05684 14.7838 8.37062 15.6503C8.65712 16.4439 9.15507 17.0053 9.79172 17.2639C9.54161 17.3103 9.28695 17.3347 9.03001 17.3347C6.07867 17.3369 3.68213 14.2688 3.68213 10.5ZM13.4297 15.6149C14.437 14.2732 15.0555 12.4761 15.0555 10.5C15.0555 8.52387 14.437 6.72679 13.4297 5.38506C14.4097 4.27542 15.6648 3.66313 16.9723 3.66313C19.9191 3.66313 22.3179 6.729 22.3179 10.5C22.3179 11.3112 22.2065 12.0893 22.0018 12.8121C22.0473 11.1233 21.2833 9.70424 20.0305 9.3992C18.4752 9.01901 16.7472 10.4978 16.1787 12.695C15.6467 14.7529 16.3197 16.7224 17.6862 17.275C17.452 17.3148 17.2133 17.3391 16.97 17.3391C15.6603 17.3369 14.4097 16.7268 13.4297 15.6149Z" fill="#454545"/>
<line x1="5.27279" y1="2" x2="22" y2="18.7272" stroke="#454545" stroke-width="1.8" stroke-linecap="round"/>
</svg>
<span>Make private</span>
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="action-bar">
<button id="close-button" class="btn-close" type="button">Close</button>
<button id="update-button" class="btn-update" type="button">Update</button>
</div>
</div>
<!-- Detected Images View (overlay) -->
<div id="detected-images-view" class="detected-images-view" style="display: none;">
<div class="detected-images-header">
<button id="detected-back" class="back-button" type="button">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
</button>
<h3>Detected Images</h3>
</div>
<div id="detected-images-grid" class="detected-images-grid"></div>
</div>
<!-- Treasury Selection Modal (inline) -->
<div id="treasury-modal" class="treasury-modal" style="display: none;">
<div class="treasury-modal-backdrop" id="treasury-backdrop"></div>
<div class="treasury-modal-content">
<button id="treasury-modal-close" class="treasury-modal-close-btn" type="button">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#686868" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
<h3 class="treasury-modal-title">Select treasuries</h3>
<div class="treasury-search-wrapper">
<svg width="16" height="16" viewBox="0 0 22 22" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.0872 1.9131C5.12757 1.9131 1.9131 5.12757 1.9131 9.0872C1.9131 13.0468 5.12757 16.2613 9.0872 16.2613C13.0468 16.2613 16.2613 13.0468 16.2613 9.0872C16.2613 5.12757 13.0468 1.9131 9.0872 1.9131Z" fill="#686868"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0158 16.7214L18.7349 21.4401C19.4815 22.1866 20.6935 22.1866 21.4401 21.4401C22.1866 20.6935 22.1866 19.4815 21.4401 18.7349L16.7214 14.0158C17.6407 12.5958 18.1744 10.9032 18.1744 9.0872C18.1744 4.07202 14.1024 0 9.0872 0C4.07202 0 0 4.07202 0 9.0872C0 14.1024 4.07202 18.1744 9.0872 18.1744C10.9032 18.1744 12.5958 17.6407 14.0158 16.7214ZM9.0872 0.956548C13.5748 0.956548 17.2179 4.59956 17.2179 9.0872C17.2179 13.5748 13.5748 17.2179 9.0872 17.2179C4.59956 17.2179 0.956548 13.5748 0.956548 9.0872C0.956548 4.59956 4.59956 0.956548 9.0872 0.956548Z" fill="#686868"/>
</svg>
<input type="search" id="treasury-search" class="treasury-search-input" placeholder="Search treasuries..." />
</div>
<div id="treasury-list" class="treasury-list">
<div class="treasury-loading">Loading treasuries...</div>
</div>
<div class="treasury-modal-actions">
<button id="treasury-cancel" class="btn-treasury-cancel" type="button">Cancel</button>
<button id="treasury-save" class="btn-treasury-save" type="button">Save</button>
</div>
</div>
</div>
<script src="quicksave.js"></script>
</body>
</html>