Hugging Face's logo

Spaces:
FriedsU
/
wif
Running

App Files Community
FriedsU commited on
Commit
41270f3
路
verified 路
1 Parent(s): 8ce7745

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +346 -224
index.html CHANGED
@@ -100,6 +100,74 @@
100
  50% { transform: translateY(-20px); }
101
  100% { transform: translateY(0px); }
102
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  </style>
104
  </head>
105
  <body class="doge-bg">
@@ -118,7 +186,7 @@
118
  <h1 class="text-2xl font-bold doge-text">WifDogJoint</h1>
119
  </div>
120
 
121
- <div class="hidden md:flex items-center space-x-6">
122
  <div class="relative">
123
  <select class="bg-gray-800 text-white px-4 py-2 rounded-lg appearance-none pr-8">
124
  <option>BTC/USDT</option>
@@ -132,29 +200,29 @@
132
  </div>
133
  </div>
134
 
135
- <div class="flex items-center space-x-2">
136
  <span class="text-green-400 font-mono">$69,420.42</span>
137
  <span class="text-xs text-green-400">+4.20%</span>
138
  </div>
139
 
140
- <div class="flex items-center space-x-4">
141
- <button class="text-gray-400 hover:text-yellow-500">
142
  <i class="fas fa-bell"></i>
143
  </button>
144
- <button class="text-gray-400 hover:text-yellow-500">
145
  <i class="fas fa-envelope"></i>
146
  </button>
147
- <button class="text-gray-400 hover:text-yellow-500">
148
  <i class="fas fa-cog"></i>
149
  </button>
150
  </div>
151
  </div>
152
 
153
- <div class="flex items-center space-x-4">
154
  <button class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg font-medium">
155
  <i class="fas fa-wallet mr-2"></i> Connect
156
  </button>
157
- <button class="md:hidden text-gray-400">
158
  <i class="fas fa-bars text-xl"></i>
159
  </button>
160
  </div>
@@ -163,139 +231,199 @@
163
 
164
  <!-- Main Content -->
165
  <div class="flex flex-1 overflow-hidden">
166
- <!-- Left Sidebar - Social Feed -->
167
  <div class="hidden lg:block w-80 border-r border-gray-800 overflow-y-auto">
168
  <div class="p-4">
169
- <div class="flex justify-between items-center mb-4">
170
- <h2 class="text-lg font-semibold">Social Feed</h2>
171
- <button class="text-yellow-500 hover:text-yellow-400">
172
- <i class="fas fa-plus"></i>
173
- </button>
174
- </div>
175
-
176
- <!-- Create Post -->
177
  <div class="mb-6">
178
- <div class="flex items-start space-x-3">
179
- <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-10 h-10 rounded-full">
180
- <div class="flex-1">
181
- <textarea class="w-full bg-gray-800 text-white p-3 rounded-lg border border-gray-700 focus:outline-none focus:border-yellow-500" rows="2" placeholder="Share your trade idea..."></textarea>
182
- <div class="flex justify-between items-center mt-2">
183
- <div class="flex space-x-2">
184
- <button class="text-gray-400 hover:text-yellow-500 p-1">
185
- <i class="fas fa-chart-line"></i>
186
- </button>
187
- <button class="text-gray-400 hover:text-yellow-500 p-1">
188
- <i class="fas fa-image"></i>
189
- </button>
190
- <button class="text-gray-400 hover:text-yellow-500 p-1">
191
- <i class="fas fa-gift"></i>
192
- </button>
193
- </div>
194
- <button class="bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-1 rounded-lg text-sm">
195
- Post
196
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
197
  </div>
198
  </div>
199
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
200
  </div>
201
 
202
- <!-- Feed Items -->
203
- <div class="space-y-4">
204
- <!-- Feed Item 1 -->
205
- <div class="terminal-bg p-4 rounded-lg">
206
- <div class="flex justify-between items-start mb-3">
207
- <div class="flex items-center space-x-2">
208
- <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
 
 
 
 
 
 
209
  <div>
210
- <span class="font-medium">DiamondPaws</span>
211
- <span class="text-xs text-gray-400 ml-1">@DiamondPaws 路 2h</span>
212
  </div>
213
  </div>
214
- <button class="text-gray-400 hover:text-yellow-500">
215
- <i class="fas fa-ellipsis-h"></i>
216
- </button>
 
217
  </div>
218
 
219
- <p class="mb-3">Just entered a long position on $WIF at $2.30. Chart looks bullish with strong support at $2.00. Target $3.50 馃殌</p>
220
-
221
- <div class="bg-gray-800 rounded-lg p-3 mb-3">
222
- <div class="flex justify-between items-center mb-2">
223
- <div class="flex items-center">
224
- <img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-6 h-6 mr-2">
225
- <span class="font-medium">WIF/USDT</span>
226
  </div>
227
- <div class="text-green-400 font-mono text-sm">$2.34 (+8.9%)</div>
228
  </div>
229
- <div class="h-24 bg-gray-900 rounded mb-2"></div>
230
- <div class="flex justify-between text-xs text-gray-400">
231
- <span>Entry: $2.30</span>
232
- <span>Target: $3.50</span>
233
- <span>Stop: $2.00</span>
234
  </div>
235
  </div>
236
 
237
- <div class="flex justify-between text-sm text-gray-400">
238
- <button class="flex items-center hover:text-yellow-500">
239
- <i class="far fa-comment mr-1"></i> 12
240
- </button>
241
- <button class="flex items-center hover:text-green-500">
242
- <i class="fas fa-retweet mr-1"></i> 24
243
- </button>
244
- <button class="flex items-center hover:text-red-500">
245
- <i class="far fa-heart mr-1"></i> 89
246
- </button>
247
- <button class="flex items-center hover:text-blue-400">
248
- <i class="fas fa-share-alt mr-1"></i>
249
- </button>
250
- </div>
251
- </div>
252
-
253
- <!-- Feed Item 2 -->
254
- <div class="terminal-bg p-4 rounded-lg">
255
- <div class="flex justify-between items-start mb-3">
256
- <div class="flex items-center space-x-2">
257
- <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
258
  <div>
259
- <span class="font-medium">WhaleHunter</span>
260
- <span class="text-xs text-gray-400 ml-1">@WhaleHunter 路 4h</span>
261
  </div>
262
  </div>
263
- <button class="text-gray-400 hover:text-yellow-500">
264
- <i class="fas fa-ellipsis-h"></i>
265
- </button>
 
266
  </div>
267
 
268
- <p class="mb-3">Shorting $BTC at $69,500. RSI showing divergence on 4H chart. Target $65,000 with stop at $71,000.</p>
 
 
 
 
 
 
 
 
 
 
 
 
269
 
270
- <div class="bg-gray-800 rounded-lg p-3 mb-3">
271
- <div class="flex justify-between items-center mb-2">
272
- <div class="flex items-center">
273
- <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-2">
274
- <span class="font-medium">BTC/USDT</span>
 
275
  </div>
276
- <div class="text-red-400 font-mono text-sm">$69,420 (-1.2%)</div>
277
  </div>
278
- <div class="h-24 bg-gray-900 rounded mb-2"></div>
279
- <div class="flex justify-between text-xs text-gray-400">
280
- <span>Entry: $69,500</span>
281
- <span>Target: $65,000</span>
282
- <span>Stop: $71,000</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
283
  </div>
284
  </div>
285
 
286
- <div class="flex justify-between text-sm text-gray-400">
287
- <button class="flex items-center hover:text-yellow-500">
288
- <i class="far fa-comment mr-1"></i> 8
289
- </button>
290
- <button class="flex items-center hover:text-green-500">
291
- <i class="fas fa-retweet mr-1"></i> 15
292
- </button>
293
- <button class="flex items-center hover:text-red-500">
294
- <i class="far fa-heart mr-1"></i> 42
295
- </button>
296
- <button class="flex items-center hover:text-blue-400">
297
- <i class="fas fa-share-alt mr-1"></i>
298
- </button>
 
 
 
 
 
 
 
299
  </div>
300
  </div>
301
  </div>
@@ -557,145 +685,139 @@
557
  </div>
558
  </div>
559
 
560
- <!-- Right Sidebar - Watchlist & Portfolio -->
561
  <div class="hidden lg:block w-80 border-l border-gray-800 overflow-y-auto">
562
  <div class="p-4">
563
- <!-- Watchlist -->
 
 
 
 
 
 
 
564
  <div class="mb-6">
565
- <div class="flex justify-between items-center mb-3">
566
- <h2 class="font-medium">Watchlist</h2>
567
- <button class="text-gray-400 hover:text-yellow-500">
568
- <i class="fas fa-plus"></i>
569
- </button>
570
- </div>
571
-
572
- <div class="space-y-2">
573
- <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
574
- <div class="flex items-center">
575
- <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-3">
576
- <div>
577
- <div class="font-medium">BTC/USDT</div>
578
- <div class="text-xs text-gray-400">Bitcoin</div>
 
579
  </div>
580
- </div>
581
- <div class="text-right">
582
- <div class="font-mono">$69,420</div>
583
- <div class="text-xs text-green-400">+4.2%</div>
584
  </div>
585
  </div>
586
-
587
- <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
588
- <div class="flex items-center">
589
- <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH" class="w-6 h-6 mr-3">
 
 
 
 
 
 
590
  <div>
591
- <div class="font-medium">ETH/USDT</div>
592
- <div class="text-xs text-gray-400">Ethereum</div>
593
  </div>
594
  </div>
595
- <div class="text-right">
596
- <div class="font-mono">$3,690</div>
597
- <div class="text-xs text-green-400">+2.3%</div>
598
- </div>
599
  </div>
600
 
601
- <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
602
- <div class="flex items-center">
603
- <img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="SOL" class="w-6 h-6 mr-3">
604
- <div>
605
- <div class="font-medium">SOL/USDT</div>
606
- <div class="text-xs text-gray-400">Solana</div>
607
- </div>
608
- </div>
609
- <div class="text-right">
610
- <div class="font-mono">$142.42</div>
611
- <div class="text-xs text-red-400">-1.5%</div>
612
- </div>
613
- </div>
614
 
615
- <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
616
- <div class="flex items-center">
617
- <img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-6 h-6 mr-3">
618
- <div>
619
- <div class="font-medium">WIF/USDT</div>
620
- <div class="text-xs text-gray-400">dogwifhat</div>
621
  </div>
 
622
  </div>
623
- <div class="text-right">
624
- <div class="font-mono">$2.34</div>
625
- <div class="text-xs text-green-400">+8.9%</div>
 
 
626
  </div>
627
  </div>
628
 
629
- <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
630
- <div class="flex items-center">
631
- <img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" alt="DOGE" class="w-6 h-6 mr-3">
632
- <div>
633
- <div class="font-medium">DOGE/USDT</div>
634
- <div class="text-xs text-gray-400">Dogecoin</div>
635
- </div>
636
- </div>
637
- <div class="text-right">
638
- <div class="font-mono">$0.16</div>
639
- <div class="text-xs text-red-400">-1.2%</div>
640
- </div>
641
- </div>
642
- </div>
643
- </div>
644
-
645
- <!-- Portfolio -->
646
- <div>
647
- <div class="flex justify-between items-center mb-3">
648
- <h2 class="font-medium">Portfolio</h2>
649
- <div class="text-xs text-gray-400">$42,690.42</div>
650
- </div>
651
-
652
- <div class="bg-gray-800 rounded-lg p-4 mb-4">
653
- <div class="flex justify-between mb-3">
654
- <div class="text-sm">Total Balance</div>
655
- <div class="font-mono">$42,690.42</div>
656
- </div>
657
- <div class="flex justify-between text-xs text-gray-400 mb-1">
658
- <div>Available</div>
659
- <div>$12,345.67</div>
660
- </div>
661
- <div class="flex justify-between text-xs text-gray-400">
662
- <div>In Orders</div>
663
- <div>$30,344.75</div>
664
  </div>
665
  </div>
666
 
667
- <div class="space-y-3">
668
- <div class="flex items-center justify-between">
669
- <div class="flex items-center">
670
- <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-2">
671
- <div class="text-sm">BTC</div>
672
- </div>
673
- <div class="text-right">
674
- <div class="font-mono text-sm">0.42</div>
675
- <div class="text-xs text-gray-400">$29,156.40</div>
676
  </div>
 
 
 
677
  </div>
678
 
679
- <div class="flex items-center justify-between">
680
- <div class="flex items-center">
681
- <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH" class="w-6 h-6 mr-2">
682
- <div class="text-sm">ETH</div>
 
 
 
 
 
683
  </div>
684
- <div class="text-right">
685
- <div class="font-mono text-sm">3.69</div>
686
- <div class="text-xs text-gray-400">$13,616.10</div>
 
 
687
  </div>
688
  </div>
689
 
690
- <div class="flex items-center justify-between">
691
- <div class="flex items-center">
692
- <img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-6 h-6 mr-2">
693
- <div class="text-sm">WIF</div>
694
- </div>
695
- <div class="text-right">
696
- <div class="font-mono text-sm">420</div>
697
- <div class="text-xs text-gray-400">$982.80</div>
698
- </div>
 
 
 
 
699
  </div>
700
  </div>
701
  </div>
 
100
  50% { transform: translateY(-20px); }
101
  100% { transform: translateY(0px); }
102
  }
103
+
104
+ .video-chat {
105
+ display: grid;
106
+ grid-template-columns: repeat(2, 1fr);
107
+ gap: 8px;
108
+ height: 200px;
109
+ }
110
+
111
+ .video-box {
112
+ background-color: #334155;
113
+ border-radius: 8px;
114
+ overflow: hidden;
115
+ position: relative;
116
+ }
117
+
118
+ .video-box::before {
119
+ content: "";
120
+ display: block;
121
+ padding-top: 100%;
122
+ }
123
+
124
+ .video-content {
125
+ position: absolute;
126
+ top: 0;
127
+ left: 0;
128
+ width: 100%;
129
+ height: 100%;
130
+ display: flex;
131
+ align-items: center;
132
+ justify-content: center;
133
+ color: #94a3b8;
134
+ }
135
+
136
+ .video-user {
137
+ position: absolute;
138
+ bottom: 0;
139
+ left: 0;
140
+ right: 0;
141
+ background: rgba(0,0,0,0.5);
142
+ padding: 4px;
143
+ font-size: 10px;
144
+ text-align: center;
145
+ }
146
+
147
+ .video-active {
148
+ border: 2px solid #f59e0b;
149
+ }
150
+
151
+ .video-controls {
152
+ position: absolute;
153
+ bottom: 8px;
154
+ left: 0;
155
+ right: 0;
156
+ display: flex;
157
+ justify-content: center;
158
+ gap: 8px;
159
+ }
160
+
161
+ .video-control-btn {
162
+ background: rgba(0,0,0,0.7);
163
+ border-radius: 50%;
164
+ width: 24px;
165
+ height: 24px;
166
+ display: flex;
167
+ align-items: center;
168
+ justify-content: center;
169
+ font-size: 10px;
170
+ }
171
  </style>
172
  </head>
173
  <body class="doge-bg">
 
186
  <h1 class="text-2xl font-bold doge-text">WifDogJoint</h1>
187
  </div>
188
 
189
+ <div class="hidden md:flex items-center space-x-4">
190
  <div class="relative">
191
  <select class="bg-gray-800 text-white px-4 py-2 rounded-lg appearance-none pr-8">
192
  <option>BTC/USDT</option>
 
200
  </div>
201
  </div>
202
 
203
+ <div class="flex items-center space-x-2 bg-gray-800 px-3 py-1 rounded-lg">
204
  <span class="text-green-400 font-mono">$69,420.42</span>
205
  <span class="text-xs text-green-400">+4.20%</span>
206
  </div>
207
 
208
+ <div class="flex space-x-2">
209
+ <button class="bg-gray-800 text-gray-400 hover:text-yellow-500 p-2 rounded-lg">
210
  <i class="fas fa-bell"></i>
211
  </button>
212
+ <button class="bg-gray-800 text-gray-400 hover:text-yellow-500 p-2 rounded-lg">
213
  <i class="fas fa-envelope"></i>
214
  </button>
215
+ <button class="bg-gray-800 text-gray-400 hover:text-yellow-500 p-2 rounded-lg">
216
  <i class="fas fa-cog"></i>
217
  </button>
218
  </div>
219
  </div>
220
 
221
+ <div class="flex items-center">
222
  <button class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg font-medium">
223
  <i class="fas fa-wallet mr-2"></i> Connect
224
  </button>
225
+ <button class="md:hidden text-gray-400 ml-2">
226
  <i class="fas fa-bars text-xl"></i>
227
  </button>
228
  </div>
 
231
 
232
  <!-- Main Content -->
233
  <div class="flex flex-1 overflow-hidden">
234
+ <!-- Left Sidebar - Watchlist & Portfolio -->
235
  <div class="hidden lg:block w-80 border-r border-gray-800 overflow-y-auto">
236
  <div class="p-4">
237
+ <!-- Video Chat -->
 
 
 
 
 
 
 
238
  <div class="mb-6">
239
+ <div class="flex justify-between items-center mb-3">
240
+ <h2 class="font-medium">Video Chat</h2>
241
+ <div class="flex space-x-2">
242
+ <button class="text-gray-400 hover:text-yellow-500">
243
+ <i class="fas fa-expand"></i>
244
+ </button>
245
+ <button class="text-gray-400 hover:text-yellow-500">
246
+ <i class="fas fa-ellipsis-h"></i>
247
+ </button>
248
+ </div>
249
+ </div>
250
+
251
+ <div class="video-chat mb-3">
252
+ <div class="video-box video-active">
253
+ <div class="video-content">
254
+ <i class="fas fa-user fa-2x"></i>
255
+ <div class="video-user">You</div>
256
+ </div>
257
+ </div>
258
+ <div class="video-box">
259
+ <div class="video-content">
260
+ <i class="fas fa-user fa-2x"></i>
261
+ <div class="video-user">DogeTrader</div>
262
+ </div>
263
+ </div>
264
+ <div class="video-box">
265
+ <div class="video-content">
266
+ <i class="fas fa-user fa-2x"></i>
267
+ <div class="video-user">CryptoWolf</div>
268
+ </div>
269
+ </div>
270
+ <div class="video-box">
271
+ <div class="video-content">
272
+ <i class="fas fa-user fa-2x"></i>
273
+ <div class="video-user">MoonLambo</div>
274
  </div>
275
  </div>
276
  </div>
277
+
278
+ <div class="flex justify-center space-x-4">
279
+ <button class="bg-gray-800 text-white p-2 rounded-full hover:bg-gray-700">
280
+ <i class="fas fa-microphone"></i>
281
+ </button>
282
+ <button class="bg-red-500 text-white p-2 rounded-full hover:bg-red-600">
283
+ <i class="fas fa-phone"></i>
284
+ </button>
285
+ <button class="bg-gray-800 text-white p-2 rounded-full hover:bg-gray-700">
286
+ <i class="fas fa-video"></i>
287
+ </button>
288
+ </div>
289
  </div>
290
 
291
+ <!-- Watchlist -->
292
+ <div class="mb-6">
293
+ <div class="flex justify-between items-center mb-3">
294
+ <h2 class="font-medium">Watchlist</h2>
295
+ <button class="text-gray-400 hover:text-yellow-500">
296
+ <i class="fas fa-plus"></i>
297
+ </button>
298
+ </div>
299
+
300
+ <div class="space-y-2">
301
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
302
+ <div class="flex items-center">
303
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-3">
304
  <div>
305
+ <div class="font-medium">BTC/USDT</div>
306
+ <div class="text-xs text-gray-400">Bitcoin</div>
307
  </div>
308
  </div>
309
+ <div class="text-right">
310
+ <div class="font-mono">$69,420</div>
311
+ <div class="text-xs text-green-400">+4.2%</div>
312
+ </div>
313
  </div>
314
 
315
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
316
+ <div class="flex items-center">
317
+ <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH" class="w-6 h-6 mr-3">
318
+ <div>
319
+ <div class="font-medium">ETH/USDT</div>
320
+ <div class="text-xs text-gray-400">Ethereum</div>
 
321
  </div>
 
322
  </div>
323
+ <div class="text-right">
324
+ <div class="font-mono">$3,690</div>
325
+ <div class="text-xs text-green-400">+2.3%</div>
 
 
326
  </div>
327
  </div>
328
 
329
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
330
+ <div class="flex items-center">
331
+ <img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="SOL" class="w-6 h-6 mr-3">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
332
  <div>
333
+ <div class="font-medium">SOL/USDT</div>
334
+ <div class="text-xs text-gray-400">Solana</div>
335
  </div>
336
  </div>
337
+ <div class="text-right">
338
+ <div class="font-mono">$142.42</div>
339
+ <div class="text-xs text-red-400">-1.5%</div>
340
+ </div>
341
  </div>
342
 
343
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
344
+ <div class="flex items-center">
345
+ <img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-6 h-6 mr-3">
346
+ <div>
347
+ <div class="font-medium">WIF/USDT</div>
348
+ <div class="text-xs text-gray-400">dogwifhat</div>
349
+ </div>
350
+ </div>
351
+ <div class="text-right">
352
+ <div class="font-mono">$2.34</div>
353
+ <div class="text-xs text-green-400">+8.9%</div>
354
+ </div>
355
+ </div>
356
 
357
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
358
+ <div class="flex items-center">
359
+ <img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" alt="DOGE" class="w-6 h-6 mr-3">
360
+ <div>
361
+ <div class="font-medium">DOGE/USDT</div>
362
+ <div class="text-xs text-gray-400">Dogecoin</div>
363
  </div>
 
364
  </div>
365
+ <div class="text-right">
366
+ <div class="font-mono">$0.16</div>
367
+ <div class="text-xs text-red-400">-1.2%</div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div>
372
+
373
+ <!-- Portfolio -->
374
+ <div>
375
+ <div class="flex justify-between items-center mb-3">
376
+ <h2 class="font-medium">Portfolio</h2>
377
+ <div class="text-xs text-gray-400">$42,690.42</div>
378
+ </div>
379
+
380
+ <div class="bg-gray-800 rounded-lg p-4 mb-4">
381
+ <div class="flex justify-between mb-3">
382
+ <div class="text-sm">Total Balance</div>
383
+ <div class="font-mono">$42,690.42</div>
384
+ </div>
385
+ <div class="flex justify-between text-xs text-gray-400 mb-1">
386
+ <div>Available</div>
387
+ <div>$12,345.67</div>
388
+ </div>
389
+ <div class="flex justify-between text-xs text-gray-400">
390
+ <div>In Orders</div>
391
+ <div>$30,344.75</div>
392
+ </div>
393
+ </div>
394
+
395
+ <div class="space-y-3">
396
+ <div class="flex items-center justify-between">
397
+ <div class="flex items-center">
398
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-2">
399
+ <div class="text-sm">BTC</div>
400
+ </div>
401
+ <div class="text-right">
402
+ <div class="font-mono text-sm">0.42</div>
403
+ <div class="text-xs text-gray-400">$29,156.40</div>
404
  </div>
405
  </div>
406
 
407
+ <div class="flex items-center justify-between">
408
+ <div class="flex items-center">
409
+ <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH" class="w-6 h-6 mr-2">
410
+ <div class="text-sm">ETH</div>
411
+ </div>
412
+ <div class="text-right">
413
+ <div class="font-mono text-sm">3.69</div>
414
+ <div class="text-xs text-gray-400">$13,616.10</div>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="flex items-center justify-between">
419
+ <div class="flex items-center">
420
+ <img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-6 h-6 mr-2">
421
+ <div class="text-sm">WIF</div>
422
+ </div>
423
+ <div class="text-right">
424
+ <div class="font-mono text-sm">420</div>
425
+ <div class="text-xs text-gray-400">$982.80</div>
426
+ </div>
427
  </div>
428
  </div>
429
  </div>
 
685
  </div>
686
  </div>
687
 
688
+ <!-- Right Sidebar - Social Feed -->
689
  <div class="hidden lg:block w-80 border-l border-gray-800 overflow-y-auto">
690
  <div class="p-4">
691
+ <div class="flex justify-between items-center mb-4">
692
+ <h2 class="text-lg font-semibold">Social Feed</h2>
693
+ <button class="text-yellow-500 hover:text-yellow-400">
694
+ <i class="fas fa-plus"></i>
695
+ </button>
696
+ </div>
697
+
698
+ <!-- Create Post -->
699
  <div class="mb-6">
700
+ <div class="flex items-start space-x-3">
701
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-10 h-10 rounded-full">
702
+ <div class="flex-1">
703
+ <textarea class="w-full bg-gray-800 text-white p-3 rounded-lg border border-gray-700 focus:outline-none focus:border-yellow-500" rows="2" placeholder="Share your trade idea..."></textarea>
704
+ <div class="flex justify-between items-center mt-2">
705
+ <div class="flex space-x-2">
706
+ <button class="text-gray-400 hover:text-yellow-500 p-1">
707
+ <i class="fas fa-chart-line"></i>
708
+ </button>
709
+ <button class="text-gray-400 hover:text-yellow-500 p-1">
710
+ <i class="fas fa-image"></i>
711
+ </button>
712
+ <button class="text-gray-400 hover:text-yellow-500 p-1">
713
+ <i class="fas fa-gift"></i>
714
+ </button>
715
  </div>
716
+ <button class="bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-1 rounded-lg text-sm">
717
+ Post
718
+ </button>
 
719
  </div>
720
  </div>
721
+ </div>
722
+ </div>
723
+
724
+ <!-- Feed Items -->
725
+ <div class="space-y-4">
726
+ <!-- Feed Item 1 -->
727
+ <div class="terminal-bg p-4 rounded-lg">
728
+ <div class="flex justify-between items-start mb-3">
729
+ <div class="flex items-center space-x-2">
730
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
731
  <div>
732
+ <span class="font-medium">DiamondPaws</span>
733
+ <span class="text-xs text-gray-400 ml-1">@DiamondPaws 路 2h</span>
734
  </div>
735
  </div>
736
+ <button class="text-gray-400 hover:text-yellow-500">
737
+ <i class="fas fa-ellipsis-h"></i>
738
+ </button>
 
739
  </div>
740
 
741
+ <p class="mb-3">Just entered a long position on $WIF at $2.30. Chart looks bullish with strong support at $2.00. Target $3.50 馃殌</p>
 
 
 
 
 
 
 
 
 
 
 
 
742
 
743
+ <div class="bg-gray-800 rounded-lg p-3 mb-3">
744
+ <div class="flex justify-between items-center mb-2">
745
+ <div class="flex items-center">
746
+ <img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-6 h-6 mr-2">
747
+ <span class="font-medium">WIF/USDT</span>
 
748
  </div>
749
+ <div class="text-green-400 font-mono text-sm">$2.34 (+8.9%)</div>
750
  </div>
751
+ <div class="h-24 bg-gray-900 rounded mb-2"></div>
752
+ <div class="flex justify-between text-xs text-gray-400">
753
+ <span>Entry: $2.30</span>
754
+ <span>Target: $3.50</span>
755
+ <span>Stop: $2.00</span>
756
  </div>
757
  </div>
758
 
759
+ <div class="flex justify-between text-sm text-gray-400">
760
+ <button class="flex items-center hover:text-yellow-500">
761
+ <i class="far fa-comment mr-1"></i> 12
762
+ </button>
763
+ <button class="flex items-center hover:text-green-500">
764
+ <i class="fas fa-retweet mr-1"></i> 24
765
+ </button>
766
+ <button class="flex items-center hover:text-red-500">
767
+ <i class="far fa-heart mr-1"></i> 89
768
+ </button>
769
+ <button class="flex items-center hover:text-blue-400">
770
+ <i class="fas fa-share-alt mr-1"></i>
771
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
772
  </div>
773
  </div>
774
 
775
+ <!-- Feed Item 2 -->
776
+ <div class="terminal-bg p-4 rounded-lg">
777
+ <div class="flex justify-between items-start mb-3">
778
+ <div class="flex items-center space-x-2">
779
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
780
+ <div>
781
+ <span class="font-medium">WhaleHunter</span>
782
+ <span class="text-xs text-gray-400 ml-1">@WhaleHunter 路 4h</span>
783
+ </div>
784
  </div>
785
+ <button class="text-gray-400 hover:text-yellow-500">
786
+ <i class="fas fa-ellipsis-h"></i>
787
+ </button>
788
  </div>
789
 
790
+ <p class="mb-3">Shorting $BTC at $69,500. RSI showing divergence on 4H chart. Target $65,000 with stop at $71,000.</p>
791
+
792
+ <div class="bg-gray-800 rounded-lg p-3 mb-3">
793
+ <div class="flex justify-between items-center mb-2">
794
+ <div class="flex items-center">
795
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-2">
796
+ <span class="font-medium">BTC/USDT</span>
797
+ </div>
798
+ <div class="text-red-400 font-mono text-sm">$69,420 (-1.2%)</div>
799
  </div>
800
+ <div class="h-24 bg-gray-900 rounded mb-2"></div>
801
+ <div class="flex justify-between text-xs text-gray-400">
802
+ <span>Entry: $69,500</span>
803
+ <span>Target: $65,000</span>
804
+ <span>Stop: $71,000</span>
805
  </div>
806
  </div>
807
 
808
+ <div class="flex justify-between text-sm text-gray-400">
809
+ <button class="flex items-center hover:text-yellow-500">
810
+ <i class="far fa-comment mr-1"></i> 8
811
+ </button>
812
+ <button class="flex items-center hover:text-green-500">
813
+ <i class="fas fa-retweet mr-1"></i> 15
814
+ </button>
815
+ <button class="flex items-center hover:text-red-500">
816
+ <i class="far fa-heart mr-1"></i> 42
817
+ </button>
818
+ <button class="flex items-center hover:text-blue-400">
819
+ <i class="fas fa-share-alt mr-1"></i>
820
+ </button>
821
  </div>
822
  </div>
823
  </div>