Hugging Face's logo

Spaces:
ilovejs
/
bookmarksite
Running

App Files Community
ilovejs commited on
Commit
f98ed28
·
verified ·
1 Parent(s): b59ad42

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +315 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bookmarksite
3
- emoji: 📉
4
  colorFrom: green
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: bookmarksite
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,315 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nexus Bookmarks - Modern Bookmark Manager</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .bookmark-folder:hover .folder-actions {
11
+ opacity: 1;
12
+ }
13
+ .bookmark-item:hover .bookmark-actions {
14
+ opacity: 1;
15
+ }
16
+ .drag-over {
17
+ border: 2px dashed #3b82f6 !important;
18
+ background-color: rgba(59, 130, 246, 0.1) !important;
19
+ }
20
+ </style>
21
+ </head>
22
+ <body class="bg-gray-50 text-gray-800 font-sans">
23
+ <div class="flex h-screen overflow-hidden">
24
+ <!-- Sidebar -->
25
+ <div class="w-64 bg-white border-r border-gray-200 flex flex-col">
26
+ <div class="p-4 border-b border-gray-200">
27
+ <h1 class="text-xl font-bold text-blue-600 flex items-center">
28
+ <i class="fas fa-bookmark mr-2"></i> Nexus Bookmarks
29
+ </h1>
30
+ </div>
31
+
32
+ <div class="p-4 border-b border-gray-200">
33
+ <button id="new-folder-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md flex items-center justify-center">
34
+ <i class="fas fa-folder-plus mr-2"></i> New Folder
35
+ </button>
36
+ </div>
37
+
38
+ <div class="flex-1 overflow-y-auto">
39
+ <div class="p-4">
40
+ <div class="mb-4">
41
+ <div class="flex items-center justify-between mb-2">
42
+ <h2 class="font-medium text-gray-700">Bookmark Folders</h2>
43
+ <button class="text-gray-400 hover:text-gray-600">
44
+ <i class="fas fa-ellipsis-h"></i>
45
+ </button>
46
+ </div>
47
+ <ul id="folders-list" class="space-y-1">
48
+ <li class="bookmark-folder group flex items-center justify-between px-3 py-2 rounded-md hover:bg-gray-100 cursor-pointer">
49
+ <div class="flex items-center">
50
+ <i class="fas fa-folder text-yellow-400 mr-3"></i>
51
+ <span>Favorites</span>
52
+ </div>
53
+ <div class="folder-actions opacity-0 flex space-x-1">
54
+ <button class="text-gray-400 hover:text-blue-500">
55
+ <i class="fas fa-pencil-alt text-xs"></i>
56
+ </button>
57
+ <button class="text-gray-400 hover:text-red-500">
58
+ <i class="fas fa-trash-alt text-xs"></i>
59
+ </button>
60
+ </div>
61
+ </li>
62
+ <li class="bookmark-folder group flex items-center justify-between px-3 py-2 rounded-md hover:bg-gray-100 cursor-pointer">
63
+ <div class="flex items-center">
64
+ <i class="fas fa-folder text-yellow-400 mr-3"></i>
65
+ <span>Work</span>
66
+ </div>
67
+ <div class="folder-actions opacity-0 flex space-x-1">
68
+ <button class="text-gray-400 hover:text-blue-500">
69
+ <i class="fas fa-pencil-alt text-xs"></i>
70
+ </button>
71
+ <button class="text-gray-400 hover:text-red-500">
72
+ <i class="fas fa-trash-alt text-xs"></i>
73
+ </button>
74
+ </div>
75
+ </li>
76
+ <li class="bookmark-folder group flex items-center justify-between px-3 py-2 rounded-md hover:bg-gray-100 cursor-pointer">
77
+ <div class="flex items-center">
78
+ <i class="fas fa-folder text-yellow-400 mr-3"></i>
79
+ <span>Research</span>
80
+ </div>
81
+ <div class="folder-actions opacity-0 flex space-x-1">
82
+ <button class="text-gray-400 hover:text-blue-500">
83
+ <i class="fas fa-pencil-alt text-xs"></i>
84
+ </button>
85
+ <button class="text-gray-400 hover:text-red-500">
86
+ <i class="fas fa-trash-alt text-xs"></i>
87
+ </button>
88
+ </div>
89
+ </li>
90
+ </ul>
91
+ </div>
92
+
93
+ <div class="mb-4">
94
+ <div class="flex items-center justify-between mb-2">
95
+ <h2 class="font-medium text-gray-700">Tags</h2>
96
+ <button class="text-gray-400 hover:text-gray-600">
97
+ <i class="fas fa-plus"></i>
98
+ </button>
99
+ </div>
100
+ <div class="flex flex-wrap gap-2">
101
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Important</span>
102
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Tutorial</span>
103
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Reference</span>
104
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Read Later</span>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="p-4 border-t border-gray-200">
111
+ <div class="flex items-center space-x-4">
112
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
113
+ <i class="fas fa-user"></i>
114
+ </div>
115
+ <div>
116
+ <p class="text-sm font-medium">User Name</p>
117
+ <p class="text-xs text-gray-500">user@example.com</p>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Main Content -->
124
+ <div class="flex-1 flex flex-col overflow-hidden">
125
+ <!-- Top Bar -->
126
+ <div class="bg-white border-b border-gray-200 p-4">
127
+ <div class="flex items-center justify-between">
128
+ <div class="flex items-center space-x-4">
129
+ <div class="relative w-64">
130
+ <input type="text" placeholder="Search bookmarks..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
131
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
132
+ </div>
133
+ <div class="flex items-center space-x-2">
134
+ <button class="p-2 text-gray-500 hover:text-blue-600 hover:bg-gray-100 rounded-md">
135
+ <i class="fas fa-sort-alpha-down"></i>
136
+ </button>
137
+ <button class="p-2 text-gray-500 hover:text-blue-600 hover:bg-gray-100 rounded-md">
138
+ <i class="fas fa-filter"></i>
139
+ </button>
140
+ </div>
141
+ </div>
142
+ <div class="flex items-center space-x-2">
143
+ <button class="p-2 text-gray-500 hover:text-blue-600 hover:bg-gray-100 rounded-md">
144
+ <i class="fas fa-sync-alt"></i>
145
+ </button>
146
+ <button class="p-2 text-gray-500 hover:text-blue-600 hover:bg-gray-100 rounded-md">
147
+ <i class="fas fa-cog"></i>
148
+ </button>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Current Folder Info -->
154
+ <div class="bg-white p-4 border-b border-gray-200">
155
+ <div class="flex items-center justify-between">
156
+ <div class="flex items-center space-x-3">
157
+ <i class="fas fa-folder text-yellow-400 text-xl"></i>
158
+ <h2 class="text-xl font-semibold">Favorites</h2>
159
+ <span class="text-sm text-gray-500">(24 items)</span>
160
+ </div>
161
+ <div class="flex items-center space-x-2">
162
+ <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md">
163
+ <i class="fas fa-share-alt mr-1"></i> Share
164
+ </button>
165
+ <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md">
166
+ <i class="fas fa-export mr-1"></i> Export
167
+ </button>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Bookmarks Grid -->
173
+ <div class="flex-1 overflow-y-auto p-6 bg-gray-50">
174
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
175
+ <!-- Bookmark Item Example -->
176
+ <div class="bookmark-item bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-200">
177
+ <div class="p-4 border-b border-gray-200">
178
+ <div class="flex justify-between items-start">
179
+ <div class="w-10 h-10 bg-blue-100 rounded-md flex items-center justify-center text-blue-600">
180
+ <i class="fab fa-google"></i>
181
+ </div>
182
+ <div class="bookmark-actions opacity-0 flex space-x-2">
183
+ <button class="text-gray-400 hover:text-blue-500">
184
+ <i class="fas fa-pencil-alt text-sm"></i>
185
+ </button>
186
+ <button class="text-gray-400 hover:text-red-500">
187
+ <i class="fas fa-trash-alt text-sm"></i>
188
+ </button>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ <div class="p-4">
193
+ <h3 class="font-medium text-gray-900 mb-1">Google Search</h3>
194
+ <p class="text-sm text-gray-500 mb-2">Search the world's information</p>
195
+ <div class="flex items-center text-xs text-gray-400">
196
+ <span>google.com</span>
197
+ <span class="mx-2">•</span>
198
+ <span>Added 2 days ago</span>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- More bookmark items -->
204
+ <div class="bookmark-item bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-200">
205
+ <div class="p-4 border-b border-gray-200">
206
+ <div class="flex justify-between items-start">
207
+ <div class="w-10 h-10 bg-red-100 rounded-md flex items-center justify-center text-red-600">
208
+ <i class="fab fa-youtube"></i>
209
+ </div>
210
+ <div class="bookmark-actions opacity-0 flex space-x-2">
211
+ <button class="text-gray-400 hover:text-blue-500">
212
+ <i class="fas fa-pencil-alt text-sm"></i>
213
+ </button>
214
+ <button class="text-gray-400 hover:text-red-500">
215
+ <i class="fas fa-trash-alt text-sm"></i>
216
+ </button>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ <div class="p-4">
221
+ <h3 class="font-medium text-gray-900 mb-1">YouTube</h3>
222
+ <p class="text-sm text-gray-500 mb-2">Watch and share videos</p>
223
+ <div class="flex items-center text-xs text-gray-400">
224
+ <span>youtube.com</span>
225
+ <span class="mx-2">•</span>
226
+ <span>Added 1 week ago</span>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <div class="bookmark-item bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-200">
232
+ <div class="p-4 border-b border-gray-200">
233
+ <div class="flex justify-between items-start">
234
+ <div class="w-10 h-10 bg-purple-100 rounded-md flex items-center justify-center text-purple-600">
235
+ <i class="fab fa-github"></i>
236
+ </div>
237
+ <div class="bookmark-actions opacity-0 flex space-x-2">
238
+ <button class="text-gray-400 hover:text-blue-500">
239
+ <i class="fas fa-pencil-alt text-sm"></i>
240
+ </button>
241
+ <button class="text-gray-400 hover:text-red-500">
242
+ <i class="fas fa-trash-alt text-sm"></i>
243
+ </button>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ <div class="p-4">
248
+ <h3 class="font-medium text-gray-900 mb-1">GitHub</h3>
249
+ <p class="text-sm text-gray-500 mb-2">Code repository and version control</p>
250
+ <div class="flex items-center text-xs text-gray-400">
251
+ <span>github.com</span>
252
+ <span class="mx-2">•</span>
253
+ <span>Added 3 days ago</span>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <div class="bookmark-item bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-200">
259
+ <div class="p-4 border-b border-gray-200">
260
+ <div class="flex justify-between items-start">
261
+ <div class="w-10 h-10 bg-blue-100 rounded-md flex items-center justify-center text-blue-600">
262
+ <i class="fab fa-twitter"></i>
263
+ </div>
264
+ <div class="bookmark-actions opacity-0 flex space-x-2">
265
+ <button class="text-gray-400 hover:text-blue-500">
266
+ <i class="fas fa-pencil-alt text-sm"></i>
267
+ </button>
268
+ <button class="text-gray-400 hover:text-red-500">
269
+ <i class="fas fa-trash-alt text-sm"></i>
270
+ </button>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ <div class="p-4">
275
+ <h3 class="font-medium text-gray-900 mb-1">Twitter</h3>
276
+ <p class="text-sm text-gray-500 mb-2">See what's happening</p>
277
+ <div class="flex items-center text-xs text-gray-400">
278
+ <span>twitter.com</span>
279
+ <span class="mx-2">•</span>
280
+ <span>Added 2 weeks ago</span>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <div class="bookmark-item bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-200">
286
+ <div class="p-4 border-b border-gray-200">
287
+ <div class="flex justify-between items-start">
288
+ <div class="w-10 h-10 bg-orange-100 rounded-md flex items-center justify-center text-orange-600">
289
+ <i class="fab fa-stack-overflow"></i>
290
+ </div>
291
+ <div class="bookmark-actions opacity-0 flex space-x-2">
292
+ <button class="text-gray-400 hover:text-blue-500">
293
+ <i class="fas fa-pencil-alt text-sm"></i>
294
+ </button>
295
+ <button class="text-gray-400 hover:text-red-500">
296
+ <i class="fas fa-trash-alt text-sm"></i>
297
+ </button>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ <div class="p-4">
302
+ <h3 class="font-medium text-gray-900 mb-1">Stack Overflow</h3>
303
+ <p class="text-sm text-gray-500 mb-2">Developer Q&A</p>
304
+ <div class="flex items-center text-xs text-gray-400">
305
+ <span>stackoverflow.com</span>
306
+ <span class="mx-2">•</span>
307
+ <span>Added 1 month ago</span>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Add Bookmark Button -->
313
+ <div class="bg-white rounded-lg border-2 border-dashed border-gray-300 hover:border-blue-500 flex flex-col items-center justify-center p-6 cursor-pointer transition-colors duration-200">
314
+ <div class="w-10 h
315
+ </html>