Hugging Face's logo

Spaces:
FriedsU
/
wif
Running

App Files Community
FriedsU commited on
Commit
fa3711b
·
verified ·
1 Parent(s): f55d652

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +735 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Wif
3
- emoji: 💻
4
  colorFrom: red
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: wif
3
+ emoji: 🐳
4
  colorFrom: red
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,735 @@
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>WifDogJoint - Social Trading Network</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
+ @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Comic Neue', cursive;
14
+ background-color: #f5f5dc;
15
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmZmZmIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=');
16
+ }
17
+
18
+ .doge-bg {
19
+ background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
20
+ }
21
+
22
+ .doge-shadow {
23
+ box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
24
+ }
25
+
26
+ .doge-text {
27
+ color: #FF8C00;
28
+ text-shadow: 2px 2px 0px #FFF, 4px 4px 0px rgba(0,0,0,0.1);
29
+ }
30
+
31
+ .coin-spin {
32
+ animation: spin 4s linear infinite;
33
+ }
34
+
35
+ @keyframes spin {
36
+ 0% { transform: rotateY(0deg); }
37
+ 100% { transform: rotateY(360deg); }
38
+ }
39
+
40
+ .pulse {
41
+ animation: pulse 2s infinite;
42
+ }
43
+
44
+ @keyframes pulse {
45
+ 0% { transform: scale(1); }
46
+ 50% { transform: scale(1.05); }
47
+ 100% { transform: scale(1); }
48
+ }
49
+
50
+ .ticker-tape {
51
+ display: inline-block;
52
+ white-space: nowrap;
53
+ animation: ticker 30s linear infinite;
54
+ }
55
+
56
+ @keyframes ticker {
57
+ 0% { transform: translateX(100%); }
58
+ 100% { transform: translateX(-100%); }
59
+ }
60
+
61
+ .post-card:hover {
62
+ transform: translateY(-5px);
63
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
64
+ transition: all 0.3s ease;
65
+ }
66
+
67
+ .floating-doge {
68
+ position: fixed;
69
+ bottom: 20px;
70
+ right: 20px;
71
+ animation: float 6s ease-in-out infinite;
72
+ cursor: pointer;
73
+ z-index: 100;
74
+ }
75
+
76
+ @keyframes float {
77
+ 0% { transform: translateY(0px); }
78
+ 50% { transform: translateY(-20px); }
79
+ 100% { transform: translateY(0px); }
80
+ }
81
+
82
+ .confetti {
83
+ position: fixed;
84
+ width: 10px;
85
+ height: 10px;
86
+ background-color: #f00;
87
+ opacity: 0;
88
+ z-index: 9999;
89
+ }
90
+ </style>
91
+ </head>
92
+ <body>
93
+ <!-- Floating Doge Button -->
94
+ <div class="floating-doge" onclick="createConfetti()">
95
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="Doge" class="w-16 h-16 rounded-full doge-shadow pulse">
96
+ </div>
97
+
98
+ <!-- Navigation -->
99
+ <nav class="doge-bg py-4 px-6 sticky top-0 z-50 doge-shadow">
100
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
101
+ <div class="flex items-center space-x-2">
102
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="Doge" class="w-10 h-10 rounded-full doge-shadow">
103
+ <h1 class="text-2xl font-bold doge-text">WifDogJoint</h1>
104
+ </div>
105
+ <div class="hidden md:flex items-center space-x-6">
106
+ <a href="#" class="text-white hover:text-yellow-200 font-bold">Home</a>
107
+ <a href="#" class="text-white hover:text-yellow-200 font-bold">Markets</a>
108
+ <a href="#" class="text-white hover:text-yellow-200 font-bold">Portfolio</a>
109
+ <a href="#" class="text-white hover:text-yellow-200 font-bold">Community</a>
110
+ <a href="#" class="text-white hover:text-yellow-200 font-bold">Learn</a>
111
+ </div>
112
+ <div class="flex items-center space-x-4">
113
+ <button class="bg-white text-orange-500 px-4 py-2 rounded-full font-bold hover:bg-yellow-100 transition">
114
+ <i class="fas fa-wallet mr-2"></i>Connect Wallet
115
+ </button>
116
+ <button class="md:hidden text-white">
117
+ <i class="fas fa-bars text-2xl"></i>
118
+ </button>
119
+ </div>
120
+ </div>
121
+ </nav>
122
+
123
+ <!-- Market Ticker -->
124
+ <div class="bg-black text-white py-2 overflow-hidden">
125
+ <div class="max-w-7xl mx-auto">
126
+ <div class="ticker-tape">
127
+ <span class="font-bold mr-8">BTC: $69,420 <span class="text-green-400">+4.20%</span></span>
128
+ <span class="font-bold mr-8">ETH: $3,690 <span class="text-green-400">+2.30%</span></span>
129
+ <span class="font-bold mr-8">DOGE: $0.16 <span class="text-red-400">-1.50%</span></span>
130
+ <span class="font-bold mr-8">SHIB: $0.000024 <span class="text-green-400">+8.90%</span></span>
131
+ <span class="font-bold mr-8">SPY: $520.69 <span class="text-green-400">+0.69%</span></span>
132
+ <span class="font-bold mr-8">AAPL: $189.42 <span class="text-red-400">-0.42%</span></span>
133
+ <span class="font-bold mr-8">TSLA: $420.69 <span class="text-green-400">+6.90%</span></span>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Main Content -->
139
+ <div class="max-w-7xl mx-auto px-4 py-8">
140
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
141
+ <!-- Left Sidebar -->
142
+ <div class="lg:col-span-1 space-y-6">
143
+ <!-- User Profile Card -->
144
+ <div class="bg-white rounded-xl p-6 shadow-lg">
145
+ <div class="flex flex-col items-center">
146
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="Profile" class="w-20 h-20 rounded-full border-4 border-yellow-400 mb-4">
147
+ <h3 class="font-bold text-xl">DogeTrader69</h3>
148
+ <p class="text-gray-500 mb-4">@DiamondPaws</p>
149
+ <div class="flex space-x-4 mb-4">
150
+ <div class="text-center">
151
+ <div class="font-bold">420</div>
152
+ <div class="text-sm text-gray-500">Following</div>
153
+ </div>
154
+ <div class="text-center">
155
+ <div class="font-bold">69K</div>
156
+ <div class="text-sm text-gray-500">Followers</div>
157
+ </div>
158
+ <div class="text-center">
159
+ <div class="font-bold">100%</div>
160
+ <div class="text-sm text-gray-500">Win Rate</div>
161
+ </div>
162
+ </div>
163
+ <button class="bg-yellow-500 text-white px-6 py-2 rounded-full font-bold hover:bg-yellow-600 transition w-full">
164
+ Follow
165
+ </button>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Trending Tokens -->
170
+ <div class="bg-white rounded-xl p-6 shadow-lg">
171
+ <h3 class="font-bold text-lg mb-4 flex items-center">
172
+ <i class="fas fa-fire text-red-500 mr-2"></i> Trending Tokens
173
+ </h3>
174
+ <div class="space-y-4">
175
+ <div class="flex items-center justify-between p-2 hover:bg-yellow-50 rounded-lg cursor-pointer">
176
+ <div class="flex items-center">
177
+ <img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" alt="DOGE" class="w-8 h-8 mr-3 coin-spin">
178
+ <div>
179
+ <div class="font-bold">DOGE</div>
180
+ <div class="text-sm text-gray-500">Dogecoin</div>
181
+ </div>
182
+ </div>
183
+ <div class="text-right">
184
+ <div class="font-bold">$0.16</div>
185
+ <div class="text-sm text-green-500">+8.9%</div>
186
+ </div>
187
+ </div>
188
+ <div class="flex items-center justify-between p-2 hover:bg-yellow-50 rounded-lg cursor-pointer">
189
+ <div class="flex items-center">
190
+ <img src="https://cryptologos.cc/logos/shiba-inu-shib-logo.png" alt="SHIB" class="w-8 h-8 mr-3">
191
+ <div>
192
+ <div class="font-bold">SHIB</div>
193
+ <div class="text-sm text-gray-500">Shiba Inu</div>
194
+ </div>
195
+ </div>
196
+ <div class="text-right">
197
+ <div class="font-bold">$0.000024</div>
198
+ <div class="text-sm text-green-500">+12.3%</div>
199
+ </div>
200
+ </div>
201
+ <div class="flex items-center justify-between p-2 hover:bg-yellow-50 rounded-lg cursor-pointer">
202
+ <div class="flex items-center">
203
+ <img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-8 h-8 mr-3">
204
+ <div>
205
+ <div class="font-bold">WIF</div>
206
+ <div class="text-sm text-gray-500">dogwifhat</div>
207
+ </div>
208
+ </div>
209
+ <div class="text-right">
210
+ <div class="font-bold">$2.34</div>
211
+ <div class="text-sm text-red-500">-3.2%</div>
212
+ </div>
213
+ </div>
214
+ <div class="flex items-center justify-between p-2 hover:bg-yellow-50 rounded-lg cursor-pointer">
215
+ <div class="flex items-center">
216
+ <img src="https://cryptologos.cc/logos/pepe-pepe-logo.png" alt="PEPE" class="w-8 h-8 mr-3">
217
+ <div>
218
+ <div class="font-bold">PEPE</div>
219
+ <div class="text-sm text-gray-500">Pepe</div>
220
+ </div>
221
+ </div>
222
+ <div class="text-right">
223
+ <div class="font-bold">$0.0000069</div>
224
+ <div class="text-sm text-green-500">+42.0%</div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ <button class="mt-4 text-yellow-600 font-bold w-full text-center hover:text-yellow-700">
229
+ View All Tokens <i class="fas fa-arrow-right ml-1"></i>
230
+ </button>
231
+ </div>
232
+
233
+ <!-- Top Traders -->
234
+ <div class="bg-white rounded-xl p-6 shadow-lg">
235
+ <h3 class="font-bold text-lg mb-4 flex items-center">
236
+ <i class="fas fa-trophy text-yellow-500 mr-2"></i> Top Traders
237
+ </h3>
238
+ <div class="space-y-4">
239
+ <div class="flex items-center p-2 hover:bg-yellow-50 rounded-lg cursor-pointer">
240
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
241
+ <i class="fas fa-crown text-purple-500"></i>
242
+ </div>
243
+ <div>
244
+ <div class="font-bold">WhaleHunter</div>
245
+ <div class="text-sm text-gray-500">+420.69% ROI</div>
246
+ </div>
247
+ </div>
248
+ <div class="flex items-center p-2 hover:bg-yellow-50 rounded-lg cursor-pointer">
249
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
250
+ <i class="fas fa-medal text-blue-500"></i>
251
+ </div>
252
+ <div>
253
+ <div class="font-bold">DiamondPaws</div>
254
+ <div class="text-sm text-gray-500">+369.42% ROI</div>
255
+ </div>
256
+ </div>
257
+ <div class="flex items-center p-2 hover:bg-yellow-50 rounded-lg cursor-pointer">
258
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
259
+ <i class="fas fa-award text-green-500"></i>
260
+ </div>
261
+ <div>
262
+ <div class="font-bold">MoonLambo</div>
263
+ <div class="text-sm text-gray-500">+210.69% ROI</div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Main Feed -->
271
+ <div class="lg:col-span-2 space-y-6">
272
+ <!-- Create Post -->
273
+ <div class="bg-white rounded-xl p-6 shadow-lg">
274
+ <div class="flex items-start space-x-4">
275
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-12 h-12 rounded-full">
276
+ <div class="flex-1">
277
+ <textarea class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300" rows="3" placeholder="What's your next trade? Much wow!"></textarea>
278
+ <div class="flex justify-between items-center mt-3">
279
+ <div class="flex space-x-2">
280
+ <button class="p-2 text-gray-500 hover:text-yellow-500 rounded-full hover:bg-yellow-50">
281
+ <i class="fas fa-chart-line"></i>
282
+ </button>
283
+ <button class="p-2 text-gray-500 hover:text-yellow-500 rounded-full hover:bg-yellow-50">
284
+ <i class="fas fa-image"></i>
285
+ </button>
286
+ <button class="p-2 text-gray-500 hover:text-yellow-500 rounded-full hover:bg-yellow-50">
287
+ <i class="fas fa-gift"></i>
288
+ </button>
289
+ </div>
290
+ <button class="bg-yellow-500 text-white px-6 py-2 rounded-full font-bold hover:bg-yellow-600 transition">
291
+ Post
292
+ </button>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+
298
+ <!-- Feed Filters -->
299
+ <div class="bg-white rounded-xl p-4 shadow-lg">
300
+ <div class="flex space-x-4 overflow-x-auto pb-2">
301
+ <button class="px-4 py-2 bg-yellow-500 text-white rounded-full font-bold whitespace-nowrap">
302
+ All Trades
303
+ </button>
304
+ <button class="px-4 py-2 bg-gray-100 rounded-full font-bold whitespace-nowrap hover:bg-gray-200">
305
+ Crypto
306
+ </button>
307
+ <button class="px-4 py-2 bg-gray-100 rounded-full font-bold whitespace-nowrap hover:bg-gray-200">
308
+ Stocks
309
+ </button>
310
+ <button class="px-4 py-2 bg-gray-100 rounded-full font-bold whitespace-nowrap hover:bg-gray-200">
311
+ NFTs
312
+ </button>
313
+ <button class="px-4 py-2 bg-gray-100 rounded-full font-bold whitespace-nowrap hover:bg-gray-200">
314
+ Memes
315
+ </button>
316
+ <button class="px-4 py-2 bg-gray-100 rounded-full font-bold whitespace-nowrap hover:bg-gray-200">
317
+ Following
318
+ </button>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- Feed Posts -->
323
+ <div class="space-y-6">
324
+ <!-- Post 1 -->
325
+ <div class="bg-white rounded-xl p-6 shadow-lg post-card transition">
326
+ <div class="flex justify-between items-start mb-4">
327
+ <div class="flex items-center space-x-3">
328
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-12 h-12 rounded-full">
329
+ <div>
330
+ <h3 class="font-bold">DiamondPaws</h3>
331
+ <p class="text-gray-500 text-sm">@DiamondPaws · 2h ago</p>
332
+ </div>
333
+ </div>
334
+ <button class="text-gray-400 hover:text-gray-600">
335
+ <i class="fas fa-ellipsis-h"></i>
336
+ </button>
337
+ </div>
338
+ <div class="mb-4">
339
+ <p class="mb-3">Just went ALL IN on $WIF at $2.30! This is the next big meme coin after DOGE and SHIB. Much wow! 🚀🐶</p>
340
+ <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
341
+ <div class="flex items-center mb-2">
342
+ <img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-8 h-8 mr-3">
343
+ <div>
344
+ <div class="font-bold">WIF (dogwifhat)</div>
345
+ <div class="text-sm text-gray-500">Solana Ecosystem</div>
346
+ </div>
347
+ </div>
348
+ <div class="grid grid-cols-2 gap-4 mt-3">
349
+ <div>
350
+ <div class="text-sm text-gray-500">Price</div>
351
+ <div class="font-bold">$2.34</div>
352
+ </div>
353
+ <div>
354
+ <div class="text-sm text-gray-500">24h Change</div>
355
+ <div class="font-bold text-green-500">+8.9%</div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ <div class="flex justify-between text-gray-500">
361
+ <button class="flex items-center space-x-1 hover:text-yellow-500">
362
+ <i class="far fa-comment"></i>
363
+ <span>42</span>
364
+ </button>
365
+ <button class="flex items-center space-x-1 hover:text-green-500">
366
+ <i class="fas fa-retweet"></i>
367
+ <span>69</span>
368
+ </button>
369
+ <button class="flex items-center space-x-1 hover:text-red-500">
370
+ <i class="far fa-heart"></i>
371
+ <span>420</span>
372
+ </button>
373
+ <button class="flex items-center space-x-1 hover:text-blue-500">
374
+ <i class="fas fa-share"></i>
375
+ <span>Share</span>
376
+ </button>
377
+ </div>
378
+ </div>
379
+
380
+ <!-- Post 2 -->
381
+ <div class="bg-white rounded-xl p-6 shadow-lg post-card transition">
382
+ <div class="flex justify-between items-start mb-4">
383
+ <div class="flex items-center space-x-3">
384
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-12 h-12 rounded-full">
385
+ <div>
386
+ <h3 class="font-bold">WhaleHunter</h3>
387
+ <p class="text-gray-500 text-sm">@WhaleHunter · 4h ago</p>
388
+ </div>
389
+ </div>
390
+ <button class="text-gray-400 hover:text-gray-600">
391
+ <i class="fas fa-ellipsis-h"></i>
392
+ </button>
393
+ </div>
394
+ <div class="mb-4">
395
+ <p class="mb-3">Shorting $TSLA at $420.69. Elon's too distracted with X and AI. Price target $350. 🐻📉</p>
396
+ <div class="bg-red-50 p-4 rounded-lg border border-red-100">
397
+ <div class="flex items-center mb-2">
398
+ <img src="https://logo.clearbit.com/tesla.com" alt="TSLA" class="w-8 h-8 mr-3">
399
+ <div>
400
+ <div class="font-bold">TSLA (Tesla Inc.)</div>
401
+ <div class="text-sm text-gray-500">NASDAQ</div>
402
+ </div>
403
+ </div>
404
+ <div class="grid grid-cols-2 gap-4 mt-3">
405
+ <div>
406
+ <div class="text-sm text-gray-500">Price</div>
407
+ <div class="font-bold">$420.69</div>
408
+ </div>
409
+ <div>
410
+ <div class="text-sm text-gray-500">24h Change</div>
411
+ <div class="font-bold text-red-500">-2.3%</div>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ <div class="flex justify-between text-gray-500">
417
+ <button class="flex items-center space-x-1 hover:text-yellow-500">
418
+ <i class="far fa-comment"></i>
419
+ <span>36</span>
420
+ </button>
421
+ <button class="flex items-center space-x-1 hover:text-green-500">
422
+ <i class="fas fa-retweet"></i>
423
+ <span>84</span>
424
+ </button>
425
+ <button class="flex items-center space-x-1 hover:text-red-500">
426
+ <i class="far fa-heart"></i>
427
+ <span>369</span>
428
+ </button>
429
+ <button class="flex items-center space-x-1 hover:text-blue-500">
430
+ <i class="fas fa-share"></i>
431
+ <span>Share</span>
432
+ </button>
433
+ </div>
434
+ </div>
435
+
436
+ <!-- Post 3 -->
437
+ <div class="bg-white rounded-xl p-6 shadow-lg post-card transition">
438
+ <div class="flex justify-between items-start mb-4">
439
+ <div class="flex items-center space-x-3">
440
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-12 h-12 rounded-full">
441
+ <div>
442
+ <h3 class="font-bold">MoonLambo</h3>
443
+ <p class="text-gray-500 text-sm">@MoonLambo · 6h ago</p>
444
+ </div>
445
+ </div>
446
+ <button class="text-gray-400 hover:text-gray-600">
447
+ <i class="fas fa-ellipsis-h"></i>
448
+ </button>
449
+ </div>
450
+ <div class="mb-4">
451
+ <p class="mb-3">$BTC halving is coming soon! Historically this leads to massive bull runs. Accumulating now for the next cycle. 🌕🚀</p>
452
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
453
+ <div class="flex items-center mb-2">
454
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-8 h-8 mr-3">
455
+ <div>
456
+ <div class="font-bold">BTC (Bitcoin)</div>
457
+ <div class="text-sm text-gray-500">Store of Value</div>
458
+ </div>
459
+ </div>
460
+ <div class="grid grid-cols-2 gap-4 mt-3">
461
+ <div>
462
+ <div class="text-sm text-gray-500">Price</div>
463
+ <div class="font-bold">$69,420</div>
464
+ </div>
465
+ <div>
466
+ <div class="text-sm text-gray-500">24h Change</div>
467
+ <div class="font-bold text-green-500">+4.2%</div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ <div class="flex justify-between text-gray-500">
473
+ <button class="flex items-center space-x-1 hover:text-yellow-500">
474
+ <i class="far fa-comment"></i>
475
+ <span>89</span>
476
+ </button>
477
+ <button class="flex items-center space-x-1 hover:text-green-500">
478
+ <i class="fas fa-retweet"></i>
479
+ <span>142</span>
480
+ </button>
481
+ <button class="flex items-center space-x-1 hover:text-red-500">
482
+ <i class="far fa-heart"></i>
483
+ <span>690</span>
484
+ </button>
485
+ <button class="flex items-center space-x-1 hover:text-blue-500">
486
+ <i class="fas fa-share"></i>
487
+ <span>Share</span>
488
+ </button>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <!-- Right Sidebar -->
495
+ <div class="lg:col-span-1 space-y-6">
496
+ <!-- Market News -->
497
+ <div class="bg-white rounded-xl p-6 shadow-lg">
498
+ <h3 class="font-bold text-lg mb-4 flex items-center">
499
+ <i class="fas fa-newspaper text-blue-500 mr-2"></i> Market News
500
+ </h3>
501
+ <div class="space-y-4">
502
+ <div class="p-3 hover:bg-blue-50 rounded-lg cursor-pointer">
503
+ <div class="text-sm font-bold mb-1">Bitcoin ETF Approval Expected This Week</div>
504
+ <div class="text-xs text-gray-500">3 hours ago · CoinDesk</div>
505
+ </div>
506
+ <div class="p-3 hover:bg-blue-50 rounded-lg cursor-pointer">
507
+ <div class="text-sm font-bold mb-1">Elon Musk: Tesla Will Accept DOGE Again Soon</div>
508
+ <div class="text-xs text-gray-500">5 hours ago · DogeWire</div>
509
+ </div>
510
+ <div class="p-3 hover:bg-blue-50 rounded-lg cursor-pointer">
511
+ <div class="text-sm font-bold mb-1">Solana Network Outage Sparks Concerns</div>
512
+ <div class="text-xs text-gray-500">7 hours ago · CryptoNews</div>
513
+ </div>
514
+ <div class="p-3 hover:bg-blue-50 rounded-lg cursor-pointer">
515
+ <div class="text-sm font-bold mb-1">Meme Coin Season Returns as WIF Surges 50%</div>
516
+ <div class="text-xs text-gray-500">9 hours ago · MemeEconomist</div>
517
+ </div>
518
+ </div>
519
+ <button class="mt-4 text-blue-500 font-bold w-full text-center hover:text-blue-700">
520
+ More News <i class="fas fa-arrow-right ml-1"></i>
521
+ </button>
522
+ </div>
523
+
524
+ <!-- Upcoming Events -->
525
+ <div class="bg-white rounded-xl p-6 shadow-lg">
526
+ <h3 class="font-bold text-lg mb-4 flex items-center">
527
+ <i class="fas fa-calendar-alt text-purple-500 mr-2"></i> Upcoming Events
528
+ </h3>
529
+ <div class="space-y-4">
530
+ <div class="flex items-start p-3 hover:bg-purple-50 rounded-lg cursor-pointer">
531
+ <div class="bg-purple-100 text-purple-800 rounded-lg p-2 mr-3 text-center">
532
+ <div class="font-bold text-sm">APR</div>
533
+ <div class="font-bold text-lg">20</div>
534
+ </div>
535
+ <div>
536
+ <div class="text-sm font-bold mb-1">Bitcoin Halving Event</div>
537
+ <div class="text-xs text-gray-500">Block 840,000</div>
538
+ </div>
539
+ </div>
540
+ <div class="flex items-start p-3 hover:bg-purple-50 rounded-lg cursor-pointer">
541
+ <div class="bg-purple-100 text-purple-800 rounded-lg p-2 mr-3 text-center">
542
+ <div class="font-bold text-sm">MAY</div>
543
+ <div class="font-bold text-lg">15</div>
544
+ </div>
545
+ <div>
546
+ <div class="text-sm font-bold mb-1">WifDogJoint Meetup</div>
547
+ <div class="text-xs text-gray-500">Miami, FL</div>
548
+ </div>
549
+ </div>
550
+ <div class="flex items-start p-3 hover:bg-purple-50 rounded-lg cursor-pointer">
551
+ <div class="bg-purple-100 text-purple-800 rounded-lg p-2 mr-3 text-center">
552
+ <div class="font-bold text-sm">JUN</div>
553
+ <div class="font-bold text-lg">9</div>
554
+ </div>
555
+ <div>
556
+ <div class="text-sm font-bold mb-1">Consensus 2024</div>
557
+ <div class="text-xs text-gray-500">Austin, TX</div>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </div>
562
+
563
+ <!-- Suggested Users -->
564
+ <div class="bg-white rounded-xl p-6 shadow-lg">
565
+ <h3 class="font-bold text-lg mb-4 flex items-center">
566
+ <i class="fas fa-user-plus text-green-500 mr-2"></i> Suggested Users
567
+ </h3>
568
+ <div class="space-y-4">
569
+ <div class="flex items-center justify-between p-2 hover:bg-green-50 rounded-lg cursor-pointer">
570
+ <div class="flex items-center">
571
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-10 h-10 rounded-full mr-3">
572
+ <div>
573
+ <div class="font-bold">CryptoPup</div>
574
+ <div class="text-xs text-gray-500">@ToTheMoonPup</div>
575
+ </div>
576
+ </div>
577
+ <button class="text-xs bg-green-500 text-white px-3 py-1 rounded-full hover:bg-green-600">
578
+ Follow
579
+ </button>
580
+ </div>
581
+ <div class="flex items-center justify-between p-2 hover:bg-green-50 rounded-lg cursor-pointer">
582
+ <div class="flex items-center">
583
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-10 h-10 rounded-full mr-3">
584
+ <div>
585
+ <div class="font-bold">ShibaSensei</div>
586
+ <div class="text-xs text-gray-500">@ShibaMaster</div>
587
+ </div>
588
+ </div>
589
+ <button class="text-xs bg-green-500 text-white px-3 py-1 rounded-full hover:bg-green-600">
590
+ Follow
591
+ </button>
592
+ </div>
593
+ <div class="flex items-center justify-between p-2 hover:bg-green-50 rounded-lg cursor-pointer">
594
+ <div class="flex items-center">
595
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-10 h-10 rounded-full mr-3">
596
+ <div>
597
+ <div class="font-bold">WolfOfDeFi</div>
598
+ <div class="text-xs text-gray-500">@DeFiWolf</div>
599
+ </div>
600
+ </div>
601
+ <button class="text-xs bg-green-500 text-white px-3 py-1 rounded-full hover:bg-green-600">
602
+ Follow
603
+ </button>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </div>
610
+
611
+ <!-- Footer -->
612
+ <footer class="doge-bg py-8 mt-12">
613
+ <div class="max-w-7xl mx-auto px-6">
614
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
615
+ <div>
616
+ <div class="flex items-center space-x-2 mb-4">
617
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="Doge" class="w-8 h-8 rounded-full">
618
+ <h2 class="text-xl font-bold doge-text">WifDogJoint</h2>
619
+ </div>
620
+ <p class="text-white mb-4">Much social. Very trade. Wow.</p>
621
+ <div class="flex space-x-4">
622
+ <a href="#" class="text-white hover:text-yellow-200"><i class="fab fa-twitter"></i></a>
623
+ <a href="#" class="text-white hover:text-yellow-200"><i class="fab fa-telegram"></i></a>
624
+ <a href="#" class="text-white hover:text-yellow-200"><i class="fab fa-discord"></i></a>
625
+ <a href="#" class="text-white hover:text-yellow-200"><i class="fab fa-reddit"></i></a>
626
+ </div>
627
+ </div>
628
+ <div>
629
+ <h3 class="text-white font-bold mb-4">Trading</h3>
630
+ <ul class="space-y-2">
631
+ <li><a href="#" class="text-white hover:text-yellow-200">Markets</a></li>
632
+ <li><a href="#" class="text-white hover:text-yellow-200">Portfolio</a></li>
633
+ <li><a href="#" class="text-white hover:text-yellow-200">Watchlist</a></li>
634
+ <li><a href="#" class="text-white hover:text-yellow-200">Alerts</a></li>
635
+ </ul>
636
+ </div>
637
+ <div>
638
+ <h3 class="text-white font-bold mb-4">Community</h3>
639
+ <ul class="space-y-2">
640
+ <li><a href="#" class="text-white hover:text-yellow-200">Leaderboard</a></li>
641
+ <li><a href="#" class="text-white hover:text-yellow-200">Groups</a></li>
642
+ <li><a href="#" class="text-white hover:text-yellow-200">Discussions</a></li>
643
+ <li><a href="#" class="text-white hover:text-yellow-200">Events</a></li>
644
+ </ul>
645
+ </div>
646
+ <div>
647
+ <h3 class="text-white font-bold mb-4">Resources</h3>
648
+ <ul class="space-y-2">
649
+ <li><a href="#" class="text-white hover:text-yellow-200">Learn</a></li>
650
+ <li><a href="#" class="text-white hover:text-yellow-200">Blog</a></li>
651
+ <li><a href="#" class="text-white hover:text-yellow-200">Help Center</a></li>
652
+ <li><a href="#" class="text-white hover:text-yellow-200">Terms</a></li>
653
+ </ul>
654
+ </div>
655
+ </div>
656
+ <div class="border-t border-yellow-300 mt-8 pt-8 text-center text-white">
657
+ <p>© 2024 WifDogJoint. Much rights reserved. Very legal.</p>
658
+ </div>
659
+ </div>
660
+ </footer>
661
+
662
+ <script>
663
+ // Confetti effect
664
+ function createConfetti() {
665
+ const colors = ['#FFD700', '#FFA500', '#FF6347', '#FF69B4', '#9370DB', '#00FF7F', '#1E90FF'];
666
+
667
+ for (let i = 0; i < 100; i++) {
668
+ const confetti = document.createElement('div');
669
+ confetti.className = 'confetti';
670
+ confetti.style.left = Math.random() * window.innerWidth + 'px';
671
+ confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
672
+ confetti.style.transform = 'rotate(' + Math.random() * 360 + 'deg)';
673
+
674
+ document.body.appendChild(confetti);
675
+
676
+ const animationDuration = Math.random() * 3 + 2;
677
+
678
+ confetti.style.animation = `fall ${animationDuration}s linear forwards`;
679
+
680
+ // Create keyframes for falling animation
681
+ const style = document.createElement('style');
682
+ style.innerHTML = `
683
+ @keyframes fall {
684
+ 0% {
685
+ transform: translateY(-100vh) rotate(0deg);
686
+ opacity: 1;
687
+ }
688
+ 100% {
689
+ transform: translateY(100vh) rotate(360deg);
690
+ opacity: 0;
691
+ }
692
+ }
693
+ `;
694
+ document.head.appendChild(style);
695
+
696
+ // Remove confetti after animation
697
+ setTimeout(() => {
698
+ confetti.remove();
699
+ style.remove();
700
+ }, animationDuration * 1000);
701
+ }
702
+
703
+ // Play doge sound
704
+ const audio = new Audio('https://www.myinstants.com/media/sounds/doge-sound.mp3');
705
+ audio.play().catch(e => console.log("Audio play failed:", e));
706
+ }
707
+
708
+ // Make DOGE logo spin on hover
709
+ document.addEventListener('DOMContentLoaded', () => {
710
+ const dogeLogo = document.querySelector('nav img');
711
+ if (dogeLogo) {
712
+ dogeLogo.addEventListener('mouseenter', () => {
713
+ dogeLogo.classList.add('coin-spin');
714
+ });
715
+ dogeLogo.addEventListener('mouseleave', () => {
716
+ dogeLogo.classList.remove('coin-spin');
717
+ });
718
+ }
719
+
720
+ // Animate trending tokens on hover
721
+ const trendingTokens = document.querySelectorAll('.trending-tokens div');
722
+ trendingTokens.forEach(token => {
723
+ token.addEventListener('mouseenter', () => {
724
+ const img = token.querySelector('img');
725
+ if (img) img.classList.add('coin-spin');
726
+ });
727
+ token.addEventListener('mouseleave', () => {
728
+ const img = token.querySelector('img');
729
+ if (img) img.classList.remove('coin-spin');
730
+ });
731
+ });
732
+ });
733
+ </script>
734
+ <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=FriedsU/wif" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
735
+ </html>