-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
145 lines (137 loc) · 8.33 KB
/
index.html
File metadata and controls
145 lines (137 loc) · 8.33 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>YCopy</title>
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="styles.css" />
<meta name="theme-color" content="#1b1f3b" />
</head>
<body>
<header id="header-default">
<div class="header-actions">
<button id="open-settings" class="header-btn" aria-label="Open settings" title="Settings">
<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" class="lucide lucide-settings-icon lucide-settings"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>
</button>
<button id="clear-all" class="header-btn header-btn-danger" aria-label="Clear all" title="Clear all">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
</button>
</div>
<h1>YCopy</h1>
<button id="fab" class="header-btn" aria-label="Add note" title="Add note">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
</button>
</header>
<header id="header-selection" class="header-selection" hidden>
<button id="selection-close" class="selection-btn" aria-label="Close selection">✕</button>
<span id="selection-count">0</span>
<div class="selection-actions">
<button id="selection-pin" class="selection-btn" aria-label="Pin selected"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg></button>
<button id="selection-copy" class="selection-btn" aria-label="Copy selected"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
<button id="selection-share" class="selection-btn" aria-label="Share selected"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.59 13.51 15.42 17.49"/><path d="M15.41 6.51 8.59 10.49"/></svg></button>
<button id="selection-delete" class="selection-btn" aria-label="Delete selected"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg></button>
</div>
</header>
<div class="search-container">
<div class="search-wrapper">
<div class="search-bar">
<svg class="search-icon" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input
id="search"
class="search-input"
type="search"
placeholder="Search..."
aria-label="Search saved clips"
/>
</div>
<div id="search-filters" class="search-filters" role="group" aria-label="Filter search results">
<button type="button" class="filter-chip is-active" data-filter="all" aria-pressed="true">All</button>
<button type="button" class="filter-chip" data-filter="text" aria-pressed="false">Text</button>
<button type="button" class="filter-chip" data-filter="link" aria-pressed="false">Link</button>
<button type="button" class="filter-chip" data-filter="file" aria-pressed="false">File</button>
<button type="button" class="filter-chip" data-filter="image" aria-pressed="false">Image</button>
</div>
</div>
</div>
<main>
<ul id="items" class="items"></ul>
<section id="empty-state" class="empty" aria-live="polite">
<div class="empty-default" data-empty-default>
<p class="empty-title">Save, then copy in one tap</p>
<p class="empty-subtitle">How it works:</p>
<ol class="empty-steps">
<li><strong>Save a clip</strong>: tap <strong>+</strong> or share to <strong>YCopy</strong>.</li>
<li><strong>Copy it back</strong>: tap a saved clip to copy to your clipboard.</li>
<li><strong>Organize</strong>: long-press to select multiple, then pin/share/delete.</li>
</ol>
<p class="empty-tip">Tip: use Search to filter fast.</p>
</div>
<p class="empty-search" data-empty-search hidden></p>
</section>
</main>
<div id="modal-overlay" class="modal-overlay" hidden>
<div class="modal">
<div class="modal-header">
<h2>Add note</h2>
<button id="modal-close" class="modal-close" aria-label="Close">✕</button>
</div>
<form id="add-form">
<label>
Text
<textarea name="text" rows="3" placeholder="Paste text here"></textarea>
</label>
<label>
URL
<input type="url" name="url" placeholder="https://" />
</label>
<button type="submit">Save</button>
</form>
</div>
</div>
<div id="settings-overlay" class="modal-overlay" hidden>
<div class="modal">
<div class="modal-header">
<h2>Settings</h2>
<button id="settings-close" class="modal-close" aria-label="Close settings">✕</button>
</div>
<form id="settings-form">
<label>
Auto-clear unpinned clips older than
<select id="expiry-duration" name="expiry-duration">
<option value="0">Off</option>
<option value="86400000">1 day</option>
<option value="259200000">3 days</option>
<option value="604800000">7 days</option>
<option value="1209600000">14 days</option>
<option value="2592000000">30 days</option>
<option value="7776000000">90 days</option>
</select>
</label>
<label>
Max clipboard entries (0 = unlimited)
<input
id="max-entries"
name="max-entries"
type="number"
min="0"
max="500"
step="1"
inputmode="numeric"
placeholder="0"
/>
</label>
<p class="settings-note">Pinned clips are never auto-cleared by time and are excluded from max count. When max is reached, oldest unpinned clips are removed first.</p>
<button type="submit">Save settings</button>
</form>
</div>
</div>
<div id="lightbox" class="lightbox" hidden>
<button id="lightbox-close" class="lightbox-close" aria-label="Close">✕</button>
<img id="lightbox-img" alt="" />
</div>
<div id="toast" class="toast" role="status" aria-live="polite"></div>
<script src="fuse.min.js"></script>
<script src="app.js" type="module"></script>
</body>
</html>