make the market sentiment interactive - Follow Up Deployment

index.html

@@ -363,17 +363,17 @@
                     <div class="flex items-center space-x-4">
                         <div class="flex items-center">
                             <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="h-8 w-8 mr-2">
-                            <span class="font-bold text-lg">BTC/USDT</span>
+                            <span class="font-bold text-xl">BTC/USDT</span>
                         </div>
-                        <div class="text-success">
-                            <span class="font-bold" id="current-price">$42,876.45</span>
-                            <span class="text-sm ml-1" id="price-change">+2.34%</span>
+                        <div class="flex items-center text-success">
+                            <span class="font-bold text-2xl ml-1" id="current-price">42,876.45</span>
+                            <span class="text-sm ml-2 px-2 py-0.5 rounded" id="price-change">+2.34%</span>
                         </div>
                     </div>
                     <div class="flex items-center space-x-2 sm:space-x-4">
                         <div class="flex items-center space-x-2">
                             <span class="hidden sm:inline">Volume:</span>
-                            <span class="font-bold" id="current-volume">24.5K BTC</span>
+                            <span class="font-bold" id="current-volume">24.5K</span>
                         </div>
                         <div class="flex space-x-2">
                             <button class="btn btn-sm bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
@@ -677,12 +677,25 @@
 
                 <!-- News & Sentiment -->
                 <div class="bg-gray-800 rounded-xl p-4 shadow-lg">
-                    <h2 class="text-lg font-semibold mb-4 flex items-center">
-                        <i class="fas fa-newspaper mr-2"></i> Market Sentiment
-                    </h2>
-                    <div class="space-y-3">
-                        <div class="flex items-start space-x-3">
-                            <div class="bg-accent p-2 rounded-full">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-lg font-semibold flex items-center">
+                            <i class="fas fa-newspaper mr-2"></i> Market Sentiment
+                        </h2>
+                        <div class="flex space-x-2">
+                            <button class="sentiment-filter-btn btn btn-xs bg-primary hover:bg-blue-800 px-2 py-1 rounded text-xs" data-filter="all">
+                                All
+                            </button>
+                            <button class="sentiment-filter-btn btn btn-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-xs" data-filter="bullish">
+                                <i class="fas fa-arrow-up mr-1"></i>
+                            </button>
+                            <button class="sentiment-filter-btn btn btn-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-xs" data-filter="bearish">
+                                <i class="fas fa-arrow-down mr-1"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="space-y-3" id="sentiment-items">
+                        <div class="sentiment-item cursor-pointer transition hover:bg-gray-700 flex items-start space-x-3 p-2 rounded-lg" data-sentiment="bullish" onclick="showSentimentDetail('Fed Signals Potential Rate Pause', 'bullish', 'The Federal Reserve has indicated a possible pause in rate hikes for their next meeting, signaling potential relief for markets.')">
+                            <div class="bg-success p-2 rounded-full">
                                 <i class="fas fa-bullhorn text-sm"></i>
                             </div>
                             <div>
@@ -690,7 +703,7 @@
                                 <div class="text-xs text-gray-400">2 hours ago • Bullish</div>
                             </div>
                         </div>
-                        <div class="flex items-start space-x-3">
+                        <div class="sentiment-item cursor-pointer transition hover:bg-gray-700 flex items-start space-x-3 p-2 rounded-lg" data-sentiment="bearish" onclick="showSentimentDetail('Binance Regulatory Concerns', 'bearish', 'Increased regulatory scrutiny on Binance has raised concerns about potential impacts on crypto market liquidity.')">
                             <div class="bg-danger p-2 rounded-full">
                                 <i class="fas fa-exclamation-triangle text-sm"></i>
                             </div>
@@ -699,7 +712,7 @@
                                 <div class="text-xs text-gray-400">4 hours ago • Bearish</div>
                             </div>
                         </div>
-                        <div class="flex items-start space-x-3">
+                        <div class="sentiment-item cursor-pointer transition hover:bg-gray-700 flex items-start space-x-3 p-2 rounded-lg" data-sentiment="bullish" onclick="showSentimentDetail('Bitcoin ETF Approval Odds Increase', 'bullish', 'Analysts are increasing their odds of SEC approval for a spot Bitcoin ETF following new filings from major asset managers.')">
                             <div class="bg-success p-2 rounded-full">
                                 <i class="fas fa-chart-line text-sm"></i>
                             </div>
@@ -784,22 +797,22 @@
             const newPrice = basePrice + change;
             const percentChange = (change / basePrice * 100).toFixed(2);
             
-            document.getElementById('current-price').textContent = `$${newPrice.toFixed(2)}`;
+            document.getElementById('current-price').textContent = newPrice.toFixed(2);
             
             const priceChangeElement = document.getElementById('price-change');
             if (change >= 0) {
                 priceChangeElement.textContent = `+${percentChange}%`;
-                priceChangeElement.className = 'text-sm ml-1 text-success';
+                priceChangeElement.className = 'text-sm ml-2 px-2 py-0.5 rounded text-success bg-green-900 bg-opacity-40';
             } else {
                 priceChangeElement.textContent = `${percentChange}%`;
-                priceChangeElement.className = 'text-sm ml-1 text-danger';
+                priceChangeElement.className = 'text-sm ml-2 px-2 py-0.5 rounded text-danger bg-red-900 bg-opacity-40';
             }
             
             // Update volume randomly
             const baseVolume = 24500;
             const volumeChange = (Math.random() - 0.3) * 5000;
             const newVolume = baseVolume + volumeChange;
-            document.getElementById('current-volume').textContent = `${(newVolume/1000).toFixed(1)}K BTC`;
+            document.getElementById('current-volume').textContent = `${(newVolume/1000).toFixed(1)}K`;
             
             // Update server metrics
             document.getElementById('server-load').textContent = `${Math.floor(Math.random() * 30) + 10}%`;
@@ -1076,5 +1089,125 @@
         }
         setInterval(updateSignals, 8000);
     </script>
+
+    <!-- Sentiment Detail Modal -->
+    <div id="sentiment-detail-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md">
+            <div class="flex justify-between items-center mb-4">
+                <h3 id="sentiment-title" class="text-xl font-bold"></h3>
+                <button onclick="closeSentimentDetail()" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="flex items-center mb-4">
+                <div id="sentiment-icon" class="p-2 rounded-full mr-3">
+                    <i id="sentiment-icon-inner" class="fas"></i>
+                </div>
+                <span id="sentiment-type" class="font-bold"></span>
+            </div>
+            <p id="sentiment-description" class="mb-6 text-gray-300"></p>
+            <div class="flex justify-end">
+                <button onclick="closeSentimentDetail()" class="btn btn-primary px-4 py-2">Close</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Sentiment filtering functionality
+        document.querySelectorAll('.sentiment-filter-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                const filter = this.dataset.filter;
+                
+                // Update active button
+                document.querySelectorAll('.sentiment-filter-btn').forEach(b => {
+                    b.classList.remove('bg-primary');
+                    b.classList.add('bg-gray-700');
+                });
+                this.classList.add('bg-primary');
+                this.classList.remove('bg-gray-700');
+                
+                // Filter items
+                document.querySelectorAll('.sentiment-item').forEach(item => {
+                    if (filter === 'all' || item.dataset.sentiment === filter) {
+                        item.classList.remove('hidden');
+                    } else {
+                        item.classList.add('hidden');
+                    }
+                });
+            });
+        });
+
+        // Sentiment detail display
+        function showSentimentDetail(title, type, description) {
+            const modal = document.getElementById('sentiment-detail-modal');
+            const icon = document.getElementById('sentiment-icon');
+            const iconInner = document.getElementById('sentiment-icon-inner');
+            
+            document.getElementById('sentiment-title').textContent = title;
+            document.getElementById('sentiment-type').textContent = type.charAt(0).toUpperCase() + type.slice(1);
+            document.getElementById('sentiment-description').textContent = description;
+            
+            // Set icon and color based on sentiment type
+            if (type === 'bullish') {
+                icon.className = 'p-2 rounded-full mr-3 bg-success';
+                iconInner.className = 'fas fa-arrow-up';
+            } else {
+                icon.className = 'p-2 rounded-full mr-3 bg-danger';
+                iconInner.className = 'fas fa-arrow-down';
+            }
+            
+            modal.classList.remove('hidden');
+        }
+
+        function closeSentimentDetail() {
+            document.getElementById('sentiment-detail-modal').classList.add('hidden');
+        }
+
+        // Simulate adding new sentiment items
+        setInterval(() => {
+            const sentiments = ['bullish', 'bearish'];
+            const titles = [
+                'Institutional Bitcoin Buying Increases',
+                'New Crypto Regulations Proposed',
+                'Ethereum Network Activity Spikes',
+                'Market Liquidity Concerns Grow',
+                'Fed Chair Comments Boost Markets'
+            ];
+            const icons = ['bullhorn', 'chart-line', 'exclamation-triangle', 'university', 'balance-scale'];
+            const descriptions = [
+                'Large institutional investors are increasing their Bitcoin exposure according to recent filings.',
+                'New regulatory proposals could impact crypto exchange operations in multiple jurisdictions.',
+                'Ethereum network activity has surged to 6-month highs according to on-chain data.',
+                'Analysts warn of decreasing liquidity in some altcoin markets.',
+                'Positive remarks from the Federal Reserve chairman sparked a market rally across assets.'
+            ];
+            
+            const randomIndex = Math.floor(Math.random() * titles.length);
+            const sentiment = sentiments[Math.floor(Math.random() * sentiments.length)];
+            const icon = icons[Math.floor(Math.random() * icons.length)];
+            
+            const newItem = document.createElement('div');
+            newItem.className = `sentiment-item cursor-pointer transition hover:bg-gray-700 flex items-start space-x-3 p-2 rounded-lg`;
+            newItem.dataset.sentiment = sentiment;
+            newItem.setAttribute('onclick', `showSentimentDetail('${titles[randomIndex]}', '${sentiment}', '${descriptions[randomIndex]}')`);
+            newItem.innerHTML = `
+                <div class="bg-${sentiment === 'bullish' ? 'success' : 'danger'} p-2 rounded-full">
+                    <i class="fas fa-${icon} text-sm"></i>
+                </div>
+                <div>
+                    <div class="font-medium">${titles[randomIndex]}</div>
+                    <div class="text-xs text-gray-400">Just now • ${sentiment.charAt(0).toUpperCase() + sentiment.slice(1)}</div>
+                </div>
+            `;
+            
+            const container = document.getElementById('sentiment-items');
+            container.insertBefore(newItem, container.firstChild);
+            
+            // Remove oldest item if we have more than 5
+            if (container.children.length > 5) {
+                container.removeChild(container.lastChild);
+            }
+        }, 15000);
+    </script>
 <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=Akademics/https-huggingface-co-spaces-akademics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt

@@ -1,2 +1,4 @@
 why is it that i cant  log in through the exchange link
-Why can't I log in through metaTrader 5
+Why can't I log in through metaTrader 5
+update all prices to correspond with trading View
+make the market sentiment interactive