Hugging Face's logo

Spaces:
kcrazy
/
deepsite
Running

App Files Community
kcrazy commited on
Commit
00c845d
·
verified ·
1 Parent(s): 1abfd67

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +442 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite
3
- emoji: ⚡
4
- colorFrom: pink
5
- colorTo: green
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: deepsite
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
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,442 @@
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>Browser Tools Pro</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
+ /* Custom CSS for animations and special effects */
11
+ @keyframes toolSlideIn {
12
+ from { transform: translateY(20px); opacity: 0; }
13
+ to { transform: translateY(0); opacity: 1; }
14
+ }
15
+
16
+ .tool-card {
17
+ animation: toolSlideIn 0.3s ease-out forwards;
18
+ opacity: 0;
19
+ animation-delay: calc(var(--order) * 0.1s);
20
+ }
21
+
22
+ .gradient-bg {
23
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
24
+ }
25
+
26
+ .tab-active {
27
+ position: relative;
28
+ }
29
+
30
+ .tab-active::after {
31
+ content: '';
32
+ position: absolute;
33
+ bottom: -1px;
34
+ left: 0;
35
+ right: 0;
36
+ height: 3px;
37
+ background: #6e8efb;
38
+ border-radius: 3px 3px 0 0;
39
+ }
40
+
41
+ .tool-icon {
42
+ transition: all 0.2s ease;
43
+ }
44
+
45
+ .tool-card:hover .tool-icon {
46
+ transform: scale(1.1);
47
+ }
48
+
49
+ .search-box:focus {
50
+ box-shadow: 0 0 0 3px rgba(110, 142, 251, 0.3);
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="bg-gray-100 font-sans">
55
+ <div class="min-h-screen flex flex-col">
56
+ <!-- Header -->
57
+ <header class="gradient-bg text-white shadow-lg">
58
+ <div class="container mx-auto px-4 py-6">
59
+ <div class="flex justify-between items-center">
60
+ <div class="flex items-center space-x-3">
61
+ <i class="fas fa-tools text-2xl"></i>
62
+ <h1 class="text-2xl font-bold">Browser Tools Pro</h1>
63
+ </div>
64
+ <div class="flex items-center space-x-4">
65
+ <button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition">
66
+ <i class="fas fa-sign-in-alt mr-2"></i>Sign In
67
+ </button>
68
+ <button class="bg-indigo-800 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-900 transition">
69
+ <i class="fas fa-user-plus mr-2"></i>Register
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </header>
75
+
76
+ <!-- Main Content -->
77
+ <main class="flex-grow container mx-auto px-4 py-8">
78
+ <!-- Search and Filter -->
79
+ <div class="mb-8">
80
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
81
+ <div class="relative flex-grow max-w-2xl">
82
+ <input type="text"
83
+ placeholder="Search tools..."
84
+ class="search-box w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-indigo-500 transition">
85
+ <i class="fas fa-search absolute left-3 top-3.5 text-gray-400"></i>
86
+ </div>
87
+ <div class="flex space-x-2 overflow-x-auto pb-2">
88
+ <button class="filter-btn px-4 py-2 bg-white rounded-lg border border-gray-300 hover:bg-gray-50 transition whitespace-nowrap" data-filter="all">
89
+ All Tools
90
+ </button>
91
+ <button class="filter-btn px-4 py-2 bg-white rounded-lg border border-gray-300 hover:bg-gray-50 transition whitespace-nowrap" data-filter="dev">
92
+ <i class="fas fa-code mr-2 text-blue-500"></i>Developer
93
+ </button>
94
+ <button class="filter-btn px-4 py-2 bg-white rounded-lg border border-gray-300 hover:bg-gray-50 transition whitespace-nowrap" data-filter="seo">
95
+ <i class="fas fa-chart-line mr-2 text-green-500"></i>SEO
96
+ </button>
97
+ <button class="filter-btn px-4 py-2 bg-white rounded-lg border border-gray-300 hover:bg-gray-50 transition whitespace-nowrap" data-filter="design">
98
+ <i class="fas fa-paint-brush mr-2 text-purple-500"></i>Design
99
+ </button>
100
+ <button class="filter-btn px-4 py-2 bg-white rounded-lg border border-gray-300 hover:bg-gray-50 transition whitespace-nowrap" data-filter="security">
101
+ <i class="fas fa-shield-alt mr-2 text-red-500"></i>Security
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Tabs -->
108
+ <div class="mb-8 border-b border-gray-200">
109
+ <div class="flex space-x-8">
110
+ <button class="tab-btn py-2 px-1 font-medium text-gray-500 hover:text-indigo-600 transition tab-active" data-tab="all">
111
+ All Tools
112
+ </button>
113
+ <button class="tab-btn py-2 px-1 font-medium text-gray-500 hover:text-indigo-600 transition" data-tab="favorites">
114
+ <i class="fas fa-star mr-2 text-yellow-400"></i>Favorites
115
+ </button>
116
+ <button class="tab-btn py-2 px-1 font-medium text-gray-500 hover:text-indigo-600 transition" data-tab="recent">
117
+ <i class="fas fa-history mr-2 text-blue-400"></i>Recently Used
118
+ </button>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Tools Grid -->
123
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="tools-container">
124
+ <!-- Tool cards will be dynamically inserted here -->
125
+ </div>
126
+
127
+ <!-- Empty State -->
128
+ <div id="empty-state" class="hidden text-center py-16">
129
+ <i class="fas fa-search text-5xl text-gray-300 mb-4"></i>
130
+ <h3 class="text-xl font-medium text-gray-500">No tools found</h3>
131
+ <p class="text-gray-400 mt-2">Try adjusting your search or filter to find what you're looking for.</p>
132
+ </div>
133
+ </main>
134
+
135
+ <!-- Footer -->
136
+ <footer class="bg-gray-800 text-white py-8">
137
+ <div class="container mx-auto px-4">
138
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
139
+ <div>
140
+ <h3 class="text-lg font-semibold mb-4">Browser Tools Pro</h3>
141
+ <p class="text-gray-400">Powerful tools to enhance your browsing experience and productivity.</p>
142
+ </div>
143
+ <div>
144
+ <h4 class="font-medium mb-4">Categories</h4>
145
+ <ul class="space-y-2 text-gray-400">
146
+ <li><a href="#" class="hover:text-white transition">Developer Tools</a></li>
147
+ <li><a href="#" class="hover:text-white transition">SEO Tools</a></li>
148
+ <li><a href="#" class="hover:text-white transition">Design Tools</a></li>
149
+ <li><a href="#" class="hover:text-white transition">Security Tools</a></li>
150
+ </ul>
151
+ </div>
152
+ <div>
153
+ <h4 class="font-medium mb-4">Resources</h4>
154
+ <ul class="space-y-2 text-gray-400">
155
+ <li><a href="#" class="hover:text-white transition">Documentation</a></li>
156
+ <li><a href="#" class="hover:text-white transition">API</a></li>
157
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
158
+ <li><a href="#" class="hover:text-white transition">Support</a></li>
159
+ </ul>
160
+ </div>
161
+ <div>
162
+ <h4 class="font-medium mb-4">Connect</h4>
163
+ <div class="flex space-x-4">
164
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
165
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github text-xl"></i></a>
166
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord text-xl"></i></a>
167
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube text-xl"></i></a>
168
+ </div>
169
+ <div class="mt-6">
170
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition">
171
+ <i class="fas fa-download mr-2"></i>Download Extension
172
+ </button>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
177
+ <p>&copy; 2023 Browser Tools Pro. All rights reserved.</p>
178
+ </div>
179
+ </div>
180
+ </footer>
181
+ </div>
182
+
183
+ <script>
184
+ // Sample tools data
185
+ const tools = [
186
+ {
187
+ id: 1,
188
+ name: "JSON Formatter",
189
+ description: "Format and validate JSON data with syntax highlighting",
190
+ category: "dev",
191
+ icon: "fas fa-brackets-curly",
192
+ color: "text-blue-500",
193
+ bgColor: "bg-blue-50",
194
+ favorite: true,
195
+ lastUsed: "2023-07-15"
196
+ },
197
+ {
198
+ id: 2,
199
+ name: "Color Picker",
200
+ description: "Pick colors from any webpage and get HEX, RGB values",
201
+ category: "design",
202
+ icon: "fas fa-eye-dropper",
203
+ color: "text-purple-500",
204
+ bgColor: "bg-purple-50",
205
+ favorite: false,
206
+ lastUsed: "2023-07-10"
207
+ },
208
+ {
209
+ id: 3,
210
+ name: "SEO Analyzer",
211
+ description: "Analyze webpage SEO factors and get improvement suggestions",
212
+ category: "seo",
213
+ icon: "fas fa-chart-pie",
214
+ color: "text-green-500",
215
+ bgColor: "bg-green-50",
216
+ favorite: true,
217
+ lastUsed: "2023-07-12"
218
+ },
219
+ {
220
+ id: 4,
221
+ name: "Password Generator",
222
+ description: "Generate strong, secure passwords with customizable options",
223
+ category: "security",
224
+ icon: "fas fa-key",
225
+ color: "text-red-500",
226
+ bgColor: "bg-red-50",
227
+ favorite: false,
228
+ lastUsed: "2023-06-28"
229
+ },
230
+ {
231
+ id: 5,
232
+ name: "Base64 Encoder",
233
+ description: "Encode and decode Base64 strings quickly",
234
+ category: "dev",
235
+ icon: "fas fa-lock",
236
+ color: "text-blue-500",
237
+ bgColor: "bg-blue-50",
238
+ favorite: false,
239
+ lastUsed: "2023-07-05"
240
+ },
241
+ {
242
+ id: 6,
243
+ name: "Responsive Tester",
244
+ description: "Test how your website looks on different screen sizes",
245
+ category: "design",
246
+ icon: "fas fa-mobile-alt",
247
+ color: "text-purple-500",
248
+ bgColor: "bg-purple-50",
249
+ favorite: true,
250
+ lastUsed: "2023-07-14"
251
+ },
252
+ {
253
+ id: 7,
254
+ name: "Meta Tag Inspector",
255
+ description: "View and analyze meta tags of any webpage",
256
+ category: "seo",
257
+ icon: "fas fa-tags",
258
+ color: "text-green-500",
259
+ bgColor: "bg-green-50",
260
+ favorite: false,
261
+ lastUsed: "2023-06-30"
262
+ },
263
+ {
264
+ id: 8,
265
+ name: "SSL Checker",
266
+ description: "Verify SSL certificate details for any website",
267
+ category: "security",
268
+ icon: "fas fa-lock-open",
269
+ color: "text-red-500",
270
+ bgColor: "bg-red-50",
271
+ favorite: false,
272
+ lastUsed: "2023-07-01"
273
+ }
274
+ ];
275
+
276
+ // DOM elements
277
+ const toolsContainer = document.getElementById('tools-container');
278
+ const searchBox = document.querySelector('.search-box');
279
+ const filterButtons = document.querySelectorAll('.filter-btn');
280
+ const tabButtons = document.querySelectorAll('.tab-btn');
281
+ const emptyState = document.getElementById('empty-state');
282
+
283
+ // Current filter state
284
+ let currentFilter = 'all';
285
+ let currentTab = 'all';
286
+ let searchQuery = '';
287
+
288
+ // Initialize the app
289
+ function init() {
290
+ renderTools();
291
+ setupEventListeners();
292
+ }
293
+
294
+ // Set up event listeners
295
+ function setupEventListeners() {
296
+ // Search box
297
+ searchBox.addEventListener('input', (e) => {
298
+ searchQuery = e.target.value.toLowerCase();
299
+ renderTools();
300
+ });
301
+
302
+ // Filter buttons
303
+ filterButtons.forEach(button => {
304
+ button.addEventListener('click', () => {
305
+ filterButtons.forEach(btn => btn.classList.remove('bg-indigo-100', 'border-indigo-300'));
306
+ button.classList.add('bg-indigo-100', 'border-indigo-300');
307
+ currentFilter = button.dataset.filter;
308
+ renderTools();
309
+ });
310
+ });
311
+
312
+ // Tab buttons
313
+ tabButtons.forEach(button => {
314
+ button.addEventListener('click', () => {
315
+ tabButtons.forEach(btn => btn.classList.remove('tab-active', 'text-indigo-600'));
316
+ button.classList.add('tab-active', 'text-indigo-600');
317
+ currentTab = button.dataset.tab;
318
+ renderTools();
319
+ });
320
+ });
321
+ }
322
+
323
+ // Render tools based on current filters
324
+ function renderTools() {
325
+ toolsContainer.innerHTML = '';
326
+
327
+ let filteredTools = [...tools];
328
+
329
+ // Apply tab filter
330
+ if (currentTab === 'favorites') {
331
+ filteredTools = filteredTools.filter(tool => tool.favorite);
332
+ } else if (currentTab === 'recent') {
333
+ filteredTools = filteredTools.sort((a, b) => new Date(b.lastUsed) - new Date(a.lastUsed)).slice(0, 4);
334
+ }
335
+
336
+ // Apply category filter
337
+ if (currentFilter !== 'all') {
338
+ filteredTools = filteredTools.filter(tool => tool.category === currentFilter);
339
+ }
340
+
341
+ // Apply search query
342
+ if (searchQuery) {
343
+ filteredTools = filteredTools.filter(tool =>
344
+ tool.name.toLowerCase().includes(searchQuery) ||
345
+ tool.description.toLowerCase().includes(searchQuery)
346
+ );
347
+ }
348
+
349
+ // Show empty state if no tools found
350
+ if (filteredTools.length === 0) {
351
+ emptyState.classList.remove('hidden');
352
+ return;
353
+ } else {
354
+ emptyState.classList.add('hidden');
355
+ }
356
+
357
+ // Render tool cards
358
+ filteredTools.forEach((tool, index) => {
359
+ const toolCard = document.createElement('div');
360
+ toolCard.className = `tool-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition`;
361
+ toolCard.style.setProperty('--order', index);
362
+
363
+ toolCard.innerHTML = `
364
+ <div class="p-6">
365
+ <div class="flex items-start justify-between">
366
+ <div class="${tool.bgColor} p-3 rounded-lg">
367
+ <i class="${tool.icon} ${tool.color} text-xl tool-icon"></i>
368
+ </div>
369
+ <button class="favorite-btn text-gray-300 hover:text-yellow-400 transition ${tool.favorite ? 'text-yellow-400' : ''}" data-id="${tool.id}">
370
+ <i class="fas fa-star"></i>
371
+ </button>
372
+ </div>
373
+ <div class="mt-4">
374
+ <h3 class="text-lg font-semibold text-gray-800">${tool.name}</h3>
375
+ <p class="mt-2 text-gray-600">${tool.description}</p>
376
+ </div>
377
+ <div class="mt-6 flex justify-between items-center">
378
+ <span class="text-xs px-2 py-1 rounded-full ${getCategoryClass(tool.category)}">
379
+ ${getCategoryName(tool.category)}
380
+ </span>
381
+ <button class="use-btn bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
382
+ Use Tool
383
+ </button>
384
+ </div>
385
+ </div>
386
+ `;
387
+
388
+ toolsContainer.appendChild(toolCard);
389
+ });
390
+
391
+ // Add event listeners to favorite buttons
392
+ document.querySelectorAll('.favorite-btn').forEach(button => {
393
+ button.addEventListener('click', (e) => {
394
+ e.stopPropagation();
395
+ const toolId = parseInt(button.dataset.id);
396
+ const tool = tools.find(t => t.id === toolId);
397
+ if (tool) {
398
+ tool.favorite = !tool.favorite;
399
+ button.classList.toggle('text-yellow-400');
400
+ button.classList.toggle('text-gray-300');
401
+ }
402
+ });
403
+ });
404
+
405
+ // Add event listeners to use buttons
406
+ document.querySelectorAll('.use-btn').forEach(button => {
407
+ button.addEventListener('click', (e) => {
408
+ e.stopPropagation();
409
+ const toolCard = e.target.closest('.tool-card');
410
+ const toolName = toolCard.querySelector('h3').textContent;
411
+ alert(`Launching ${toolName}...`);
412
+ // In a real app, this would open the selected tool
413
+ });
414
+ });
415
+ }
416
+
417
+ // Helper functions
418
+ function getCategoryName(category) {
419
+ const names = {
420
+ 'dev': 'Developer',
421
+ 'seo': 'SEO',
422
+ 'design': 'Design',
423
+ 'security': 'Security'
424
+ };
425
+ return names[category] || 'Other';
426
+ }
427
+
428
+ function getCategoryClass(category) {
429
+ const classes = {
430
+ 'dev': 'bg-blue-100 text-blue-800',
431
+ 'seo': 'bg-green-100 text-green-800',
432
+ 'design': 'bg-purple-100 text-purple-800',
433
+ 'security': 'bg-red-100 text-red-800'
434
+ };
435
+ return classes[category] || 'bg-gray-100 text-gray-800';
436
+ }
437
+
438
+ // Initialize the app
439
+ init();
440
+ </script>
441
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=kcrazy/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
442
+ </html>