Hugging Face's logo

Spaces:
privateuserh
/
privdmi
Running

App Files Community
privateuserh commited on
Commit
8802c5d
·
verified ·
1 Parent(s): aebf34f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +686 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privdmi
3
- emoji: 👀
4
- colorFrom: red
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: privdmi
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
  colorTo: green
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,686 @@
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, maximum-scale=1.0, user-scalable=no">
6
+ <title>TrendSpot - Hashtag Explorer</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 scrollbar */
11
+ ::-webkit-scrollbar {
12
+ width: 4px;
13
+ }
14
+ ::-webkit-scrollbar-track {
15
+ background: #f1f1f1;
16
+ }
17
+ ::-webkit-scrollbar-thumb {
18
+ background: #1DA1F2;
19
+ border-radius: 3px;
20
+ }
21
+ ::-webkit-scrollbar-thumb:hover {
22
+ background: #0c7abf;
23
+ }
24
+
25
+ /* Animation for loading */
26
+ @keyframes pulse {
27
+ 0% { opacity: 0.6; }
28
+ 50% { opacity: 1; }
29
+ 100% { opacity: 0.6; }
30
+ }
31
+ .animate-pulse {
32
+ animation: pulse 1.5s infinite;
33
+ }
34
+
35
+ /* Card hover effect */
36
+ .trend-card:hover {
37
+ transform: translateY(-4px);
38
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
39
+ }
40
+
41
+ /* Loading spinner */
42
+ .spinner {
43
+ width: 24px;
44
+ height: 24px;
45
+ border: 3px solid rgba(255,255,255,0.3);
46
+ border-radius: 50%;
47
+ border-top-color: #fff;
48
+ animation: spin 1s ease-in-out infinite;
49
+ }
50
+
51
+ @keyframes spin {
52
+ to { transform: rotate(360deg); }
53
+ }
54
+
55
+ /* Platform colors */
56
+ .twitter-bg { background-color: #1DA1F2; }
57
+ .tiktok-bg { background-color: #000000; }
58
+ .instagram-bg { background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D); }
59
+ .youtube-bg { background-color: #FF0000; }
60
+
61
+ /* Floating button */
62
+ .floating-btn {
63
+ position: fixed;
64
+ bottom: 80px;
65
+ right: 20px;
66
+ width: 60px;
67
+ height: 60px;
68
+ border-radius: 50%;
69
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
70
+ z-index: 50;
71
+ }
72
+
73
+ /* Prevent text selection */
74
+ * {
75
+ -webkit-user-select: none;
76
+ -moz-user-select: none;
77
+ -ms-user-select: none;
78
+ user-select: none;
79
+ }
80
+
81
+ /* Tap highlight color */
82
+ * {
83
+ -webkit-tap-highlight-color: transparent;
84
+ }
85
+
86
+ /* Disable pull-to-refresh */
87
+ body {
88
+ overscroll-behavior-y: contain;
89
+ }
90
+ </style>
91
+ </head>
92
+ <body class="bg-gray-50 font-sans text-gray-800">
93
+ <!-- App Container -->
94
+ <div class="max-w-md mx-auto bg-white min-h-screen flex flex-col">
95
+ <!-- Header -->
96
+ <header class="bg-primary p-4 shadow-md">
97
+ <div class="flex items-center justify-between">
98
+ <h1 class="text-white text-xl font-bold">TrendSpot</h1>
99
+ <div class="flex space-x-3">
100
+ <button class="text-white" id="darkModeToggle">
101
+ <i class="fas fa-moon"></i>
102
+ </button>
103
+ <button class="text-white" id="settingsBtn">
104
+ <i class="fas fa-cog"></i>
105
+ </button>
106
+ </div>
107
+ </div>
108
+ </header>
109
+
110
+ <!-- Main Content Area -->
111
+ <main class="flex-1 overflow-y-auto p-4" id="mainContent">
112
+ <!-- Home Tab Content -->
113
+ <div id="homeTab">
114
+ <div class="mb-6">
115
+ <h2 class="text-lg font-semibold mb-4">Trending Now</h2>
116
+
117
+ <div class="grid grid-cols-2 gap-4">
118
+ <!-- Trend Card 1 -->
119
+ <div class="trend-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 cursor-pointer">
120
+ <div class="relative">
121
+ <img src="https://source.unsplash.com/random/300x200/?music" alt="Trend thumbnail" class="w-full h-32 object-cover">
122
+ <span class="absolute top-2 left-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded-full">
123
+ <i class="fab fa-youtube youtube-bg mr-1"></i> #Music
124
+ </span>
125
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded-full">
126
+ <i class="fas fa-fire text-orange-400 mr-1"></i> 1.2M
127
+ </span>
128
+ </div>
129
+ <div class="p-3">
130
+ <h3 class="font-medium text-sm line-clamp-2">Top music trends this week across all platforms</h3>
131
+ <div class="flex justify-between items-center mt-2">
132
+ <span class="text-xs text-gray-500">12K posts</span>
133
+ <span class="text-xs text-gray-500">Newest</span>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Trend Card 2 -->
139
+ <div class="trend-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 cursor-pointer">
140
+ <div class="relative">
141
+ <img src="https://source.unsplash.com/random/300x200/?tech" alt="Trend thumbnail" class="w-full h-32 object-cover">
142
+ <span class="absolute top-2 left-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded-full">
143
+ <i class="fab fa-twitter twitter-bg mr-1"></i> #Tech
144
+ </span>
145
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded-full">
146
+ <i class="fas fa-fire text-orange-400 mr-1"></i> 890K
147
+ </span>
148
+ </div>
149
+ <div class="p-3">
150
+ <h3 class="font-medium text-sm line-clamp-2">Latest tech innovations and discussions</h3>
151
+ <div class="flex justify-between items-center mt-2">
152
+ <span class="text-xs text-gray-500">8K posts</span>
153
+ <span class="text-xs text-gray-500">Hottest</span>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <!-- Trend Card 3 -->
159
+ <div class="trend-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 cursor-pointer">
160
+ <div class="relative">
161
+ <img src="https://source.unsplash.com/random/300x200/?fitness" alt="Trend thumbnail" class="w-full h-32 object-cover">
162
+ <span class="absolute top-2 left-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded-full">
163
+ <i class="fab fa-instagram instagram-bg mr-1"></i> #Fitness
164
+ </span>
165
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded-full">
166
+ <i class="fas fa-fire text-orange-400 mr-1"></i> 750K
167
+ </span>
168
+ </div>
169
+ <div class="p-3">
170
+ <h3 class="font-medium text-sm line-clamp-2">New workout trends taking over social media</h3>
171
+ <div class="flex justify-between items-center mt-2">
172
+ <span class="text-xs text-gray-500">15K posts</span>
173
+ <span class="text-xs text-gray-500">Newest</span>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Trend Card 4 -->
179
+ <div class="trend-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 cursor-pointer">
180
+ <div class="relative">
181
+ <img src="https://source.unsplash.com/random/300x200/?food" alt="Trend thumbnail" class="w-full h-32 object-cover">
182
+ <span class="absolute top-2 left-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded-full">
183
+ <i class="fab fa-tiktok tiktok-bg mr-1"></i> #Foodie
184
+ </span>
185
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded-full">
186
+ <i class="fas fa-fire text-orange-400 mr-1"></i> 1.5M
187
+ </span>
188
+ </div>
189
+ <div class="p-3">
190
+ <h3 class="font-medium text-sm line-clamp-2">Viral food trends you need to try</h3>
191
+ <div class="flex justify-between items-center mt-2">
192
+ <span class="text-xs text-gray-500">25K posts</span>
193
+ <span class="text-xs text-gray-500">Hottest</span>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <div class="mt-6">
201
+ <h2 class="text-lg font-semibold mb-4">Recently Viewed</h2>
202
+ <div class="space-y-4">
203
+ <!-- Recent Trend 1 -->
204
+ <div class="flex gap-3 trend-card p-2 rounded-lg bg-white shadow-sm transition duration-300 cursor-pointer">
205
+ <div class="relative flex-shrink-0">
206
+ <img src="https://source.unsplash.com/random/200x200/?travel" alt="Recent trend" class="w-24 h-16 rounded object-cover">
207
+ <span class="absolute top-1 left-1 bg-black bg-opacity-70 text-white text-2xs px-1 rounded">
208
+ #Travel
209
+ </span>
210
+ </div>
211
+ <div>
212
+ <h3 class="font-medium text-sm line-clamp-2">Most beautiful destinations trending this season</h3>
213
+ <div class="flex justify-between items-center mt-1">
214
+ <span class="text-xs text-gray-500">5K posts</span>
215
+ <span class="text-xs text-gray-500">Newest</span>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Recent Trend 2 -->
221
+ <div class="flex gap-3 trend-card p-2 rounded-lg bg-white shadow-sm transition duration-300 cursor-pointer">
222
+ <div class="relative flex-shrink-0">
223
+ <img src="https://source.unsplash.com/random/200x200/?fashion" alt="Recent trend" class="w-24 h-16 rounded object-cover">
224
+ <span class="absolute top-1 left-1 bg-black bg-opacity-70 text-white text-2xs px-1 rounded">
225
+ #Fashion
226
+ </span>
227
+ </div>
228
+ <div>
229
+ <h3 class="font-medium text-sm line-clamp-2">Streetwear trends going viral right now</h3>
230
+ <div class="flex justify-between items-center mt-1">
231
+ <span class="text-xs text-gray-500">18K posts</span>
232
+ <span class="text-xs text-gray-500">Hottest</span>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Explore Tab Content (hidden by default) -->
241
+ <div id="exploreTab" class="hidden">
242
+ <h2 class="text-lg font-semibold mb-4">Browse Categories</h2>
243
+
244
+ <div class="grid grid-cols-3 gap-3">
245
+ <div class="bg-blue-50 rounded-lg p-3 text-center cursor-pointer hover:bg-blue-100 transition">
246
+ <div class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
247
+ <i class="fas fa-music"></i>
248
+ </div>
249
+ <span class="text-sm font-medium">Music</span>
250
+ </div>
251
+
252
+ <div class="bg-orange-50 rounded-lg p-3 text-center cursor-pointer hover:bg-orange-100 transition">
253
+ <div class="bg-secondary text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
254
+ <i class="fas fa-gamepad"></i>
255
+ </div>
256
+ <span class="text-sm font-medium">Gaming</span>
257
+ </div>
258
+
259
+ <div class="bg-purple-50 rounded-lg p-3 text-center cursor-pointer hover:bg-purple-100 transition">
260
+ <div class="bg-purple-500 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
261
+ <i class="fas fa-newspaper"></i>
262
+ </div>
263
+ <span class="text-sm font-medium">News</span>
264
+ </div>
265
+
266
+ <div class="bg-green-50 rounded-lg p-3 text-center cursor-pointer hover:bg-green-100 transition">
267
+ <div class="bg-green-500 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
268
+ <i class="fas fa-film"></i>
269
+ </div>
270
+ <span class="text-sm font-medium">Movies</span>
271
+ </div>
272
+
273
+ <div class="bg-red-50 rounded-lg p-3 text-center cursor-pointer hover:bg-red-100 transition">
274
+ <div class="bg-red-500 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
275
+ <i class="fas fa-lightbulb"></i>
276
+ </div>
277
+ <span class="text-sm font-medium">Learning</span>
278
+ </div>
279
+
280
+ <div class="bg-yellow-50 rounded-lg p-3 text-center cursor-pointer hover:bg-yellow-100 transition">
281
+ <div class="bg-yellow-500 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
282
+ <i class="fas fa-laugh-beam"></i>
283
+ </div>
284
+ <span class="text-sm font-medium">Comedy</span>
285
+ </div>
286
+ </div>
287
+
288
+ <div class="mt-6">
289
+ <h2 class="text-lg font-semibold mb-4">Popular Hashtags</h2>
290
+ <div class="flex flex-wrap gap-2">
291
+ <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#Viral</span>
292
+ <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#Trending</span>
293
+ <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#Explore</span>
294
+ <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#Discover</span>
295
+ <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#New</span>
296
+ <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#Hot</span>
297
+ <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#Popular</span>
298
+ <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#Latest</span>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Library Tab Content (hidden by default) -->
304
+ <div id="libraryTab" class="hidden">
305
+ <h2 class="text-lg font-semibold mb-4">Your Hashtags</h2>
306
+
307
+ <div class="grid grid-cols-2 gap-4 mb-6">
308
+ <div class="bg-white rounded-lg p-3 shadow-sm border border-gray-200 flex items-center cursor-pointer hover:bg-gray-50" id="savedBtn">
309
+ <div class="bg-blue-100 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-3">
310
+ <i class="fas fa-bookmark"></i>
311
+ </div>
312
+ <span class="font-medium text-sm">Saved</span>
313
+ </div>
314
+
315
+ <div class="bg-white rounded-lg p-3 shadow-sm border border-gray-200 flex items-center cursor-pointer hover:bg-gray-50" id="historyBtn">
316
+ <div class="bg-orange-100 text-secondary w-10 h-10 rounded-full flex items-center justify-center mr-3">
317
+ <i class="fas fa-history"></i>
318
+ </div>
319
+ <span class="font-medium text-sm">History</span>
320
+ </div>
321
+ </div>
322
+
323
+ <div>
324
+ <h3 class="font-medium mb-3">Recently Viewed</h3>
325
+ <div class="space-y-3">
326
+ <!-- Recent Item 1 -->
327
+ <div class="flex items-center p-2 rounded-lg bg-white shadow-sm cursor-pointer hover:bg-gray-50">
328
+ <img src="https://source.unsplash.com/random/100x100/?music" alt="Recent trend" class="w-12 h-12 rounded object-cover">
329
+ <div class="ml-3 flex-1">
330
+ <h4 class="font-medium text-sm line-clamp-1">#MusicTrends</h4>
331
+ <p class="text-gray-500 text-xs">Viewed 2 days ago</p>
332
+ </div>
333
+ <button class="text-gray-500">
334
+ <i class="fas fa-ellipsis-v"></i>
335
+ </button>
336
+ </div>
337
+
338
+ <!-- Recent Item 2 -->
339
+ <div class="flex items-center p-2 rounded-lg bg-white shadow-sm cursor-pointer hover:bg-gray-50">
340
+ <img src="https://source.unsplash.com/random/100x100/?tech" alt="Recent trend" class="w-12 h-12 rounded object-cover">
341
+ <div class="ml-3 flex-1">
342
+ <h4 class="font-medium text-sm line-clamp-1">#TechNews</h4>
343
+ <p class="text-gray-500 text-xs">Viewed 1 week ago</p>
344
+ </div>
345
+ <button class="text-gray-500">
346
+ <i class="fas fa-ellipsis-v"></i>
347
+ </button>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </main>
353
+
354
+ <!-- Bottom Navigation -->
355
+ <nav class="bg-white border-t border-gray-200 p-2">
356
+ <div class="flex justify-around">
357
+ <button class="tab-button active flex flex-col items-center text-primary" data-tab="homeTab">
358
+ <i class="fas fa-home text-lg"></i>
359
+ <span class="text-xs mt-1">Home</span>
360
+ </button>
361
+
362
+ <button class="tab-button flex flex-col items-center text-gray-500" data-tab="exploreTab">
363
+ <i class="fas fa-compass text-lg"></i>
364
+ <span class="text-xs mt-1">Explore</span>
365
+ </button>
366
+
367
+ <button class="tab-button flex flex-col items-center text-gray-500" data-tab="libraryTab">
368
+ <i class="fas fa-bookmark text-lg"></i>
369
+ <span class="text-xs mt-1">Library</span>
370
+ </button>
371
+ </div>
372
+ </nav>
373
+
374
+ <!-- Floating Hashtag Search Button -->
375
+ <button class="floating-btn bg-primary text-white flex items-center justify-center" id="hashtagSearchBtn">
376
+ <i class="fas fa-hashtag text-2xl"></i>
377
+ </button>
378
+
379
+ <!-- Hashtag Search Modal (hidden by default) -->
380
+ <div id="hashtagModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
381
+ <div class="bg-white rounded-lg w-full max-w-md mx-4">
382
+ <div class="p-4 border-b border-gray-200">
383
+ <h3 class="font-semibold text-lg">Search Hashtags</h3>
384
+ </div>
385
+
386
+ <div class="p-4">
387
+ <div class="mb-4">
388
+ <label class="block text-sm font-medium text-gray-700 mb-1">Enter a hashtag</label>
389
+ <input type="text" id="hashtagInput" placeholder="#trending"
390
+ class="w-full py-2 px-4 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary">
391
+ </div>
392
+
393
+ <div class="mb-4">
394
+ <label class="block text-sm font-medium text-gray-700 mb-1">Sort by</label>
395
+ <div class="grid grid-cols-2 gap-2">
396
+ <button class="bg-primary text-white py-2 px-3 rounded text-sm sort-btn" data-sort="newest">
397
+ <i class="fas fa-clock mr-1"></i> Newest
398
+ </button>
399
+ <button class="bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm sort-btn" data-sort="hottest">
400
+ <i class="fas fa-fire mr-1"></i> Hottest
401
+ </button>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="mb-4">
406
+ <label class="block text-sm font-medium text-gray-700 mb-1">Content type</label>
407
+ <div class="grid grid-cols-2 gap-2">
408
+ <button class="bg-primary text-white py-2 px-3 rounded text-sm type-btn" data-type="all">
409
+ <i class="fas fa-globe mr-1"></i> All
410
+ </button>
411
+ <button class="bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm type-btn" data-type="media">
412
+ <i class="fas fa-photo-video mr-1"></i> Media
413
+ </button>
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="p-4 border-t border-gray-200 flex justify-end space-x-3">
419
+ <button id="cancelHashtag" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700">
420
+ Cancel
421
+ </button>
422
+ <button id="searchHashtag" class="px-4 py-2 bg-primary text-white rounded-md text-sm font-medium">
423
+ Search
424
+ </button>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <!-- Settings Modal (hidden by default) -->
430
+ <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
431
+ <div class="bg-white rounded-lg w-full max-w-md mx-4 max-h-[80vh] overflow-y-auto">
432
+ <div class="p-4 border-b border-gray-200">
433
+ <h3 class="font-semibold text-lg">Settings</h3>
434
+ </div>
435
+
436
+ <div class="p-4">
437
+ <div class="mb-6">
438
+ <h4 class="font-medium text-gray-700 mb-3">Appearance</h4>
439
+
440
+ <div class="space-y-3">
441
+ <div class="flex items-center justify-between">
442
+ <span class="text-sm text-gray-700">Dark Mode</span>
443
+ <label class="relative inline-flex items-center cursor-pointer">
444
+ <input type="checkbox" value="" class="sr-only peer" id="darkModeToggleSetting">
445
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
446
+ </label>
447
+ </div>
448
+
449
+ <div class="flex items-center justify-between">
450
+ <span class="text-sm text-gray-700">App Theme Color</span>
451
+ <div class="flex space-x-2">
452
+ <div class="w-6 h-6 rounded-full bg-primary cursor-pointer border-2 border-primary"></div>
453
+ <div class="w-6 h-6 rounded-full bg-purple-500 cursor-pointer border-2 border-transparent"></div>
454
+ <div class="w-6 h-6 rounded-full bg-green-500 cursor-pointer border-2 border-transparent"></div>
455
+ <div class="w-6 h-6 rounded-full bg-red-500 cursor-pointer border-2 border-transparent"></div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="mb-6">
462
+ <h4 class="font-medium text-gray-700 mb-3">About</h4>
463
+
464
+ <div class="space-y-3">
465
+ <div class="flex items-center justify-between">
466
+ <span class="text-sm text-gray-700">Version</span>
467
+ <span class="text-sm text-gray-500">1.0.0</span>
468
+ </div>
469
+
470
+ <div class="flex items-center justify-between">
471
+ <span class="text-sm text-gray-700">Privacy Policy</span>
472
+ <span class="text-sm text-primary">View</span>
473
+ </div>
474
+
475
+ <div class="flex items-center justify-between">
476
+ <span class="text-sm text-gray-700">Terms of Service</span>
477
+ <span class="text-sm text-primary">View</span>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+
483
+ <div class="p-4 border-t border-gray-200 flex justify-center">
484
+ <button id="closeSettings" class="px-4 py-2 bg-primary text-white rounded-md text-sm font-medium">
485
+ Close
486
+ </button>
487
+ </div>
488
+ </div>
489
+ </div>
490
+
491
+ <!-- Toast Notification (hidden by default) -->
492
+ <div id="toast" class="fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-md shadow-lg hidden z-50">
493
+ <div class="flex items-center">
494
+ <span id="toastMessage">Searching for #trending...</span>
495
+ </div>
496
+ </div>
497
+ </div>
498
+
499
+ <script>
500
+ // Tab switching functionality
501
+ document.querySelectorAll('.tab-button').forEach(button => {
502
+ button.addEventListener('click', function() {
503
+ // Remove active class from all buttons
504
+ document.querySelectorAll('.tab-button').forEach(btn => {
505
+ btn.classList.remove('active', 'text-primary');
506
+ btn.classList.add('text-gray-500');
507
+ });
508
+
509
+ // Add active class to clicked button
510
+ this.classList.add('active', 'text-primary');
511
+ this.classList.remove('text-gray-500');
512
+
513
+ // Hide all tabs
514
+ document.querySelectorAll('#mainContent > div').forEach(tab => {
515
+ tab.classList.add('hidden');
516
+ });
517
+
518
+ // Show selected tab
519
+ const tabId = this.getAttribute('data-tab');
520
+ document.getElementById(tabId).classList.remove('hidden');
521
+
522
+ // Scroll to top when switching tabs
523
+ document.getElementById('mainContent').scrollTo(0, 0);
524
+ });
525
+ });
526
+
527
+ // Hashtag search modal
528
+ const hashtagSearchBtn = document.getElementById('hashtagSearchBtn');
529
+ const hashtagModal = document.getElementById('hashtagModal');
530
+ const cancelHashtag = document.getElementById('cancelHashtag');
531
+ const searchHashtag = document.getElementById('searchHashtag');
532
+ const hashtagInput = document.getElementById('hashtagInput');
533
+
534
+ hashtagSearchBtn.addEventListener('click', function() {
535
+ hashtagModal.classList.remove('hidden');
536
+ });
537
+
538
+ cancelHashtag.addEventListener('click', function() {
539
+ hashtagModal.classList.add('hidden');
540
+ });
541
+
542
+ // Sort button selection
543
+ document.querySelectorAll('.sort-btn').forEach(btn => {
544
+ btn.addEventListener('click', function() {
545
+ document.querySelectorAll('.sort-btn').forEach(b => {
546
+ b.classList.remove('bg-primary', 'text-white');
547
+ b.classList.add('bg-gray-200', 'text-gray-700');
548
+ });
549
+ this.classList.remove('bg-gray-200', 'text-gray-700');
550
+ this.classList.add('bg-primary', 'text-white');
551
+ });
552
+ });
553
+
554
+ // Type button selection
555
+ document.querySelectorAll('.type-btn').forEach(btn => {
556
+ btn.addEventListener('click', function() {
557
+ document.querySelectorAll('.type-btn').forEach(b => {
558
+ b.classList.remove('bg-primary', 'text-white');
559
+ b.classList.add('bg-gray-200', 'text-gray-700');
560
+ });
561
+ this.classList.remove('bg-gray-200', 'text-gray-700');
562
+ this.classList.add('bg-primary', 'text-white');
563
+ });
564
+ });
565
+
566
+ // Search hashtag
567
+ searchHashtag.addEventListener('click', function() {
568
+ const hashtag = hashtagInput.value.trim();
569
+ if (!hashtag) return;
570
+
571
+ // Get selected sort option
572
+ const sortBtn = document.querySelector('.sort-btn.bg-primary');
573
+ const sort = sortBtn ? sortBtn.getAttribute('data-sort') : 'newest';
574
+
575
+ // Get selected type option
576
+ const typeBtn = document.querySelector('.type-btn.bg-primary');
577
+ const type = typeBtn ? typeBtn.getAttribute('data-type') : 'all';
578
+
579
+ hashtagModal.classList.add('hidden');
580
+ showToast(`Searching for ${hashtag} (${sort}, ${type})...`);
581
+
582
+ // Simulate search with timeout
583
+ setTimeout(() => {
584
+ // In a real app, this would fetch actual trending content
585
+ const homeTab = document.getElementById('homeTab');
586
+ const newCard = document.createElement('div');
587
+ newCard.className = 'trend-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 cursor-pointer mb-4';
588
+ newCard.innerHTML = `
589
+ <div class="relative">
590
+ <img src="https://source.unsplash.com/random/300x200/?${hashtag.replace('#', '')}" alt="Trend thumbnail" class="w-full h-32 object-cover">
591
+ <span class="absolute top-2 left-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded-full">
592
+ <i class="fab fa-instagram instagram-bg mr-1"></i> ${hashtag}
593
+ </span>
594
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded-full">
595
+ <i class="fas fa-fire text-orange-400 mr-1"></i> ${Math.floor(Math.random() * 1000)}K
596
+ </span>
597
+ </div>
598
+ <div class="p-3">
599
+ <h3 class="font-medium text-sm line-clamp-2">Latest content for ${hashtag} sorted by ${sort} (${type})</h3>
600
+ <div class="flex justify-between items-center mt-2">
601
+ <span class="text-xs text-gray-500">${Math.floor(Math.random() * 100)}K posts</span>
602
+ <span class="text-xs text-gray-500">${sort.charAt(0).toUpperCase() + sort.slice(1)}</span>
603
+ </div>
604
+ </div>
605
+ `;
606
+
607
+ // Insert at the top of the home tab
608
+ homeTab.insertBefore(newCard, homeTab.firstChild);
609
+
610
+ showToast(`Found results for ${hashtag}`);
611
+ }, 2000);
612
+ });
613
+
614
+ // Dark mode toggle
615
+ const darkModeToggle = document.getElementById('darkModeToggle');
616
+ const darkModeToggleSetting = document.getElementById('darkModeToggleSetting');
617
+
618
+ function toggleDarkMode() {
619
+ document.body.classList.toggle('bg-gray-900');
620
+ document.body.classList.toggle('text-gray-100');
621
+ document.querySelector('main').classList.toggle('bg-gray-800');
622
+ document.querySelectorAll('.bg-white').forEach(el => {
623
+ el.classList.toggle('bg-gray-700');
624
+ el.classList.toggle('text-gray-100');
625
+ });
626
+ document.querySelector('nav').classList.toggle('bg-gray-700');
627
+ document.querySelector('nav').classList.toggle('border-gray-600');
628
+
629
+ // Save preference to localStorage
630
+ const isDark = document.body.classList.contains('bg-gray-900');
631
+ localStorage.setItem('darkMode', isDark);
632
+ }
633
+
634
+ darkModeToggle.addEventListener('click', toggleDarkMode);
635
+ darkModeToggleSetting.addEventListener('change', toggleDarkMode);
636
+
637
+ // Check for saved dark mode preference
638
+ if (localStorage.getItem('darkMode') === 'true') {
639
+ toggleDarkMode();
640
+ darkModeToggleSetting.checked = true;
641
+ }
642
+
643
+ // Settings modal
644
+ const settingsBtn = document.getElementById('settingsBtn');
645
+ const settingsModal = document.getElementById('settingsModal');
646
+ const closeSettings = document.getElementById('closeSettings');
647
+
648
+ settingsBtn.addEventListener('click', function() {
649
+ settingsModal.classList.remove('hidden');
650
+ });
651
+
652
+ closeSettings.addEventListener('click', function() {
653
+ settingsModal.classList.add('hidden');
654
+ });
655
+
656
+ // Library buttons
657
+ document.getElementById('savedBtn').addEventListener('click', function() {
658
+ showToast('Saved hashtags view would be shown here');
659
+ });
660
+
661
+ document.getElementById('historyBtn').addEventListener('click', function() {
662
+ showToast('History view would be shown here');
663
+ });
664
+
665
+ // Toast notification function
666
+ function showToast(message) {
667
+ const toast = document.getElementById('toast');
668
+ const toastMessage = document.getElementById('toastMessage');
669
+
670
+ toastMessage.textContent = message;
671
+ toast.classList.remove('hidden');
672
+
673
+ setTimeout(() => {
674
+ toast.classList.add('hidden');
675
+ }, 3000);
676
+ }
677
+
678
+ // Prevent default behavior for all buttons to avoid unwanted scrolling on mobile
679
+ document.querySelectorAll('button').forEach(button => {
680
+ button.addEventListener('touchstart', function(e) {
681
+ e.preventDefault();
682
+ });
683
+ });
684
+ </script>
685
+ <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=privateuserh/privdmi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
686
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Remove videos and download links only keep the cards on the cards add a floating button to allow user input of a hashtag make the hashtag search for the newest trending to hottest trending content audio and video only display the newest or hottest in the card window